From bebaab822bdff4fb06f5089319295a4a308ef898 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 17 Nov 2023 21:07:22 -0300
Subject: [PATCH] fix(modals): add support for disabling StoreApiKeyModal
 component when disabled prop is true fix(pages): add support for disabling
 StoreApiKeyModal button when loading prop is true feat(types): add disabled
 prop to StoreApiKeyType to enable/disable StoreApiKeyModal component

---
 .../src/modals/StoreApiKeyModal/index.tsx      |  8 ++++++--
 src/frontend/src/pages/StorePage/index.tsx     | 18 ++++++++++++------
 src/frontend/src/types/components/index.ts     |  1 +
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index 8684a191d..1832e0da6 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -10,7 +10,11 @@ import { addApiKeyStore } from "../../controllers/API";
 import { StoreApiKeyType } from "../../types/components";
 import BaseModal from "../baseModal";
 
-export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
+export default function StoreApiKeyModal({
+  children,
+  disabled = false,
+}: StoreApiKeyType) {
+  if (disabled) return <>{children}</>;
   const [open, setOpen] = useState(false);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const { storeApiKey } = useContext(AuthContext);
@@ -38,7 +42,7 @@ export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
   };
 
   return (
-    <BaseModal size="small-h-full" open={open} setOpen={setOpen}>
+    <BaseModal size="small-h-full" open={open && !disabled} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index cdd52a9b8..e2514f038 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -22,7 +22,7 @@ import { StoreContext } from "../../contexts/storeContext";
 import { getStoreComponents, getStoreTags } from "../../controllers/API";
 import StoreApiKeyModal from "../../modals/StoreApiKeyModal";
 import { storeComponent } from "../../types/store";
-import { cn } from "../../utils/utils";
+import { classNames, cn } from "../../utils/utils";
 export default function StorePage(): JSX.Element {
   const { validApiKey, setValidApiKey, hasApiKey, loadingApiKey } =
     useContext(StoreContext);
@@ -161,11 +161,13 @@ export default function StorePage(): JSX.Element {
               Langflow Store
             </span>
             <div className="community-page-nav-button">
-              <StoreApiKeyModal>
+              <StoreApiKeyModal disabled={loading}>
                 <Button
-                  className={`${
-                    !validApiKey ? "animate-pulse border-error" : ""
-                  }`}
+                  disabled={loading}
+                  className={classNames(
+                    `${!validApiKey ? "animate-pulse border-error" : ""}`,
+                    loading ? "cursor-not-allowed" : ""
+                  )}
                   variant="primary"
                 >
                   <IconComponent name="Key" className="main-page-nav-button" />
@@ -261,7 +263,11 @@ export default function StorePage(): JSX.Element {
             </div>
 
             <div className="flex h-6 items-center gap-2">
-              <Select onValueChange={setSelectFilter} value={selectFilter}>
+              <Select
+                disabled={loading}
+                onValueChange={setSelectFilter}
+                value={selectFilter}
+              >
                 <SelectTrigger className="mr-4 w-[160px]">
                   <SelectValue placeholder="Filter Values" />
                 </SelectTrigger>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 02bc85e70..472311907 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -356,6 +356,7 @@ export type ApiKeyType = {
 
 export type StoreApiKeyType = {
   children: ReactElement;
+  disabled?: boolean;
 };
 export type groupedObjType = {
   family: string;