Fixed id scrolling when clicking from Store

src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx

@@ -41,12 +41,23 @@ import {
 } from "../../../../types/components";
 import { gradients } from "../../../../utils/styleUtils";
 import { useStoreStore } from "../../../../stores/storeStore";
+import { useParams } from "react-router-dom";
 
 export default function GeneralPage() {
   const setCurrentFlowId = useFlowsManagerStore(
     (state) => state.setCurrentFlowId,
   );
 
+  const { scrollId } = useParams();
+
+  useEffect(() => {
+    const element = document.getElementById(scrollId ?? "null");
+    if (element) {
+      // 👇 Will scroll smoothly to the top of the next section
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [scrollId]);
+
   const [inputState, setInputState] = useState<patchUserInputStateType>(
     CONTROL_PATCH_USER_STATE,
   );
@@ -272,9 +283,9 @@ export default function GeneralPage() {
               handleSaveKey();
             }}
           >
-            <Card x-chunk="dashboard-04-chunk-2">
+            <Card x-chunk="dashboard-04-chunk-2" id="api">
               <CardHeader>
-                <CardTitle>API Key</CardTitle>
+                <CardTitle>Store API Key</CardTitle>
                 <CardDescription>
                   {(hasApiKey && !validApiKey
                     ? INVALID_API_KEY

src/frontend/src/pages/StorePage/index.tsx

@@ -180,24 +180,21 @@ export default function StorePage(): JSX.Element {
       title={STORE_TITLE}
       description={STORE_DESC}
       button={
-        <>
-          {StoreApiKeyModal && (
-            <StoreApiKeyModal disabled={loading}>
-              <Button
-                data-testid="api-key-button-store"
-                disabled={loading}
-                className={cn(
-                  `${!validApiKey ? "animate-pulse border-error" : ""}`,
-                  loading ? "cursor-not-allowed" : "",
-                )}
-                variant="primary"
-              >
-                <IconComponent name="Key" className="mr-2 w-4" />
-                API Key
-              </Button>
-            </StoreApiKeyModal>
+        <Button
+          data-testid="api-key-button-store"
+          disabled={loading}
+          className={cn(
+            `${!validApiKey ? "animate-pulse border-error" : ""}`,
+            loading ? "cursor-not-allowed" : "",
           )}
-        </>
+          variant="primary"
+          onClick={() => {
+            navigate("/settings/general/api");
+          }}
+        >
+          <IconComponent name="Key" className="mr-2 w-4" />
+          API Key
+        </Button>
       }
     >
       <div className="flex h-full w-full flex-col justify-between">

src/frontend/src/routes.tsx

@@ -56,7 +56,7 @@ const Router = () => {
       >
         <Route index element={<Navigate replace to={"general"} />} />
         <Route path="global-variables" element={<GlobalVariablesPage />} />
-        <Route path="general" element={<GeneralPage />} />
+        <Route path="general/:scrollId?" element={<GeneralPage />} />
         <Route path="shortcuts" element={<ShortcutsPage />} />
       </Route>
       <Route
@@ -80,17 +80,14 @@ const Router = () => {
         }
       />
       <Route path="/playground/:id/">
-        element=
-        {
-          <Route
-            path=""
-            element={
-              <ProtectedRoute>
-                <PlaygroundPage />
-              </ProtectedRoute>
-            }
-          />
-        }
+        <Route
+          path=""
+          element={
+            <ProtectedRoute>
+              <PlaygroundPage />
+            </ProtectedRoute>
+          }
+        />
       </Route>
       <Route path="/flow/:id/">
         <Route