fix: add description to API Access dialog and link it to API Keys on settings (#8912)

* Add description to modal when autologin is on and change from A to CustomLink

* Changed place of custom link

* Made settings back button go back to previous page

src/frontend/src/components/common/pageLayout/index.tsx

@@ -1,5 +1,6 @@
 import { CustomBanner } from "@/customization/components/custom-banner";
 import { useCustomNavigate } from "@/customization/hooks/use-custom-navigate";
+import { To } from "react-router-dom";
 import { Button } from "../../ui/button";
 import { Separator } from "../../ui/separator";
 import ForwardedIconComponent from "../genericIconComponent";
@@ -17,7 +18,7 @@ export default function PageLayout({
   children: React.ReactNode;
   button?: React.ReactNode;
   betaIcon?: boolean;
-  backTo?: string;
+  backTo?: To;
 }) {
   const navigate = useCustomNavigate();
 

src/frontend/src/modals/apiModal/index.tsx

@@ -4,6 +4,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
 import { CustomAPIGenerator } from "@/customization/components/custom-api-generator";
+import { CustomLink } from "@/customization/components/custom-link";
 import useSaveFlow from "@/hooks/flows/use-save-flow";
 import useAuthStore from "@/stores/authStore";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
@@ -110,21 +111,17 @@ export default function ApiModal({
         <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
         <BaseModal.Header
           description={
-            autoLogin ? undefined : (
-              <>
             <span className="pr-2">
               API access requires an API key. You can{" "}
-                  <a
+              <CustomLink
-                    href="/settings/api-keys"
+                to="/settings/api-keys"
                 className="text-accent-pink-foreground"
               >
                 {" "}
                 create an API key
-                  </a>{" "}
+              </CustomLink>{" "}
               in settings.
             </span>
-              </>
-            )
           }
         >
           <IconComponent
@@ -167,25 +164,7 @@ export default function ApiModal({
         setOpen={setOpenTweaks}
         size="medium-small-tall"
       >
-        <BaseModal.Header
+        <BaseModal.Header>
-          description={
-            autoLogin ? undefined : (
-              <>
-                <span className="pr-2">
-                  API access requires an API key. You can{" "}
-                  <a
-                    href="/settings/api-keys"
-                    className="text-accent-pink-foreground"
-                  >
-                    {" "}
-                    create an API key
-                  </a>{" "}
-                  in settings.
-                </span>
-              </>
-            )
-          }
-        >
           <IconComponent name="SlidersHorizontal" className="text-f h-6 w-6" />
           <span className="pl-2">Input Schema</span>
         </BaseModal.Header>

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

@@ -8,7 +8,7 @@ import {
 } from "@/customization/feature-flags";
 import useAuthStore from "@/stores/authStore";
 import { useStoreStore } from "@/stores/storeStore";
-import { Outlet } from "react-router-dom";
+import { Outlet, To } from "react-router-dom";
 import ForwardedIconComponent from "../../components/common/genericIconComponent";
 import PageLayout from "../../components/common/pageLayout";
 export default function SettingsPage(): JSX.Element {
@@ -89,7 +89,7 @@ export default function SettingsPage(): JSX.Element {
 
   return (
     <PageLayout
-      backTo={"/"}
+      backTo={-1 as To}
       title="Settings"
       description="Manage the general settings for Langflow."
     >