From 30c678b2937656e9f1b53c6d80123f84779d8ad1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Mon, 7 Jul 2025 17:52:36 -0300
Subject: [PATCH] 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
---
 .../components/common/pageLayout/index.tsx    |  3 +-
 src/frontend/src/modals/apiModal/index.tsx    | 47 +++++--------------
 src/frontend/src/pages/SettingsPage/index.tsx |  4 +-
 3 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/components/common/pageLayout/index.tsx b/src/frontend/src/components/common/pageLayout/index.tsx
index 9ceaeebae..fd8622145 100644
--- a/src/frontend/src/components/common/pageLayout/index.tsx
+++ b/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();
 
diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx
index 4526ed23d..09bd29c13 100644
--- a/src/frontend/src/modals/apiModal/index.tsx
+++ b/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
-                    href="/settings/api-keys"
-                    className="text-accent-pink-foreground"
-                  >
-                    {" "}
-                    create an API key
-                  </a>{" "}
-                  in settings.
-                </span>
-              </>
-            )
+            <span className="pr-2">
+              API access requires an API key. You can{" "}
+              <CustomLink
+                to="/settings/api-keys"
+                className="text-accent-pink-foreground"
+              >
+                {" "}
+                create an API key
+              </CustomLink>{" "}
+              in settings.
+            </span>
           }
         >
           <IconComponent
@@ -167,25 +164,7 @@ export default function ApiModal({
         setOpen={setOpenTweaks}
         size="medium-small-tall"
       >
-        <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>
-              </>
-            )
-          }
-        >
+        <BaseModal.Header>
           <IconComponent name="SlidersHorizontal" className="text-f h-6 w-6" />
           <span className="pl-2">Input Schema</span>
         </BaseModal.Header>
diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx
index a9868ed10..38f8dd91c 100644
--- a/src/frontend/src/pages/SettingsPage/index.tsx
+++ b/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."
     >