From 31f89283b48b41cd80572f00c20a30af09b6be1f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 27 Nov 2023 18:43:46 -0300
Subject: [PATCH] fix(extraSidebarComponent): add validApiKey to the dependency
 array of ModalMemo to update the disabled state of the Share button based on
 validApiKey value fix(extraSidebarComponent): update the disabled state of
 the Share button to also consider validApiKey value
 fix(nodeToolbarComponent): add validApiKey to the dependency array of
 ModalMemo to update the disabled state of the Share SelectItem based on
 validApiKey value fix(nodeToolbarComponent): update the disabled state of the
 Share SelectItem to also consider validApiKey value fix(applies.css): remove
 unnecessary whitespace in the class definition of extra-side-bar-buttons

---
 .../extraSidebarComponent/index.tsx           | 13 ++++-----
 .../components/nodeToolbarComponent/index.tsx | 29 +++++++++----------
 src/frontend/src/style/applies.css            |  2 +-
 3 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index a3187c751..d5ce13dd8 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -30,7 +30,7 @@ export default function ExtraSidebar(): JSX.Element {
     useContext(typesContext);
   const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, version } =
     useContext(FlowsContext);
-  const { hasApiKey } = useContext(StoreContext);
+  const { hasApiKey,validApiKey } = useContext(StoreContext);
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
@@ -182,15 +182,15 @@ export default function ExtraSidebar(): JSX.Element {
 
   const ModalMemo = useMemo(
     () => (
-      <ShareModal is_component={false} component={flow!} disabled={!hasApiKey}>
+      <ShareModal is_component={false} component={flow!} disabled={(!hasApiKey||!validApiKey)}>
         <ShadTooltip content="Share" side="top">
-          <div className={classNames("extra-side-bar-buttons")}>
-            <IconComponent name="Share2" className="side-bar-button-size" />
-          </div>
+          <button disabled={!hasApiKey} className={classNames("extra-side-bar-buttons",(!hasApiKey||!validApiKey)?"button-disable cursor-default":"")}>
+            <IconComponent name="Share2" className={classNames("side-bar-button-size",(!hasApiKey||!validApiKey)?"extra-side-bar-save-disable":"")} />
+          </button>
         </ShadTooltip>
       </ShareModal>
     ),
-    [hasApiKey]
+    [hasApiKey,validApiKey]
   );
 
   const ExportMemo = useMemo(
@@ -198,7 +198,6 @@ export default function ExtraSidebar(): JSX.Element {
       <ExportModal>
         <ShadTooltip content="Export" side="top">
           <button
-            disabled={!hasApiKey}
             className={classNames("extra-side-bar-buttons")}
           >
             <IconComponent name="FileDown" className="side-bar-button-size" />
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index ff1c77d95..6ac04e287 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -52,7 +52,7 @@ export default function NodeToolbarComponent({
   );
   const updateNodeInternals = useUpdateNodeInternals();
   const { getNodeId } = useContext(FlowsContext);
-  const { hasApiKey } = useContext(StoreContext);
+  const { hasApiKey,validApiKey } = useContext(StoreContext);
 
   function canMinimize() {
     let countHandles: number = 0;
@@ -161,9 +161,9 @@ export default function NodeToolbarComponent({
             <a
               className={classNames(
                 "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
-                  (data.node?.documentation === ""
-                    ? " text-muted-foreground"
-                    : " text-foreground")
+                (data.node?.documentation === ""
+                  ? " text-muted-foreground"
+                  : " text-foreground")
               )}
               target="_blank"
               rel="noopener noreferrer"
@@ -231,17 +231,16 @@ export default function NodeToolbarComponent({
                   </div>{" "}
                 </SelectItem>
               )}
-              {hasApiKey && (
-                <SelectItem value={"Share"}>
-                  <div className="flex">
-                    <IconComponent
-                      name="Share2"
-                      className="relative top-0.5 mr-2 h-4 w-4"
-                    />{" "}
-                    Share{" "}
-                  </div>{" "}
-                </SelectItem>
-              )}
+
+              <SelectItem disabled={(!hasApiKey||!validApiKey)} value={"Share"}>
+                <div className="flex">
+                  <IconComponent
+                    name="Share2"
+                    className="relative top-0.5 mr-2 h-4 w-4"
+                  />{" "}
+                  Share{" "}
+                </div>{" "}
+              </SelectItem>
               <SelectItem value={"Download"}>
                 <div className="flex">
                   <IconComponent
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 8270aac85..d0572c38d 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -114,7 +114,7 @@
     @apply pointer-events-none;
   }
   .extra-side-bar-buttons {
-    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background   px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
+    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
   }
   .extra-side-bar-buttons:hover {
     @apply hover:bg-muted;