From fa627eea037b522a0248669a5ab36da6ab04299c Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 27 Nov 2023 21:28:33 -0300
Subject: [PATCH] Fix: bug on disabled share when there is no api key

---
 .../src/CustomNodes/GenericNode/index.tsx     | 45 +++++++-------
 .../extraSidebarComponent/index.tsx           | 60 ++++++++++++++-----
 .../components/nodeToolbarComponent/index.tsx | 10 ++--
 src/frontend/src/pages/StorePage/index.tsx    | 14 ++++-
 .../end-to-end/promptModalComponent.spec.ts   |  4 +-
 5 files changed, 89 insertions(+), 44 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index a86207063..2ceacf654 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -198,14 +198,19 @@ export default function GenericNode({
                     </div>
                   ) : (
                     <ShadTooltip content={data.node?.display_name}>
-                      <div className="flex" onDoubleClick={() => setInputName(true)}>
-                        <div
-                          className="generic-node-tooltip-div text-primary pr-3"
-                          
-                        >
+                      <div
+                        className="flex"
+                        onDoubleClick={() => setInputName(true)}
+                      >
+                        <div className="generic-node-tooltip-div pr-3 text-primary">
                           {data.node?.display_name}
                         </div>
-                        {data.node?.flow&& <IconComponent name="Pencil" className="w-5 h-5 text-primary-content" />}
+                        {data.node?.flow && (
+                          <IconComponent
+                            name="Pencil"
+                            className="h-5 w-5 text-primary-content"
+                          />
+                        )}
                       </div>
                     </ShadTooltip>
                   )}
@@ -235,10 +240,10 @@ export default function GenericNode({
                             setData={setData}
                             color={
                               nodeColors[
-                              types[data.node?.template[templateField].type!]
+                                types[data.node?.template[templateField].type!]
                               ] ??
                               nodeColors[
-                              data.node?.template[templateField].type!
+                                data.node?.template[templateField].type!
                               ] ??
                               nodeColors.unknown
                             }
@@ -285,7 +290,7 @@ export default function GenericNode({
                     color={nodeColors[types[data.type]] ?? nodeColors.unknown}
                     title={
                       data.node?.output_types &&
-                        data.node.output_types.length > 0
+                      data.node.output_types.length > 0
                         ? data.node.output_types.join("|")
                         : data.type
                     }
@@ -323,10 +328,10 @@ export default function GenericNode({
                         <div className="max-h-96 overflow-auto">
                           {typeof validationStatus.params === "string"
                             ? validationStatus.params
-                              .split("\n")
-                              .map((line: string, index: number) => (
-                                <div key={index}>{line}</div>
-                              ))
+                                .split("\n")
+                                .map((line: string, index: number) => (
+                                  <div key={index}>{line}</div>
+                                ))
                             : ""}
                         </div>
                       )
@@ -370,14 +375,14 @@ export default function GenericNode({
             className={
               showNode
                 ? "generic-node-desc " +
-                (data.node?.description !== "" ? "py-5" : "pb-5")
+                  (data.node?.description !== "" ? "py-5" : "pb-5")
                 : ""
             }
           >
             {data.node?.description !== "" &&
-              showNode &&
-              data.node?.flow &&
-              inputDescription ? (
+            showNode &&
+            data.node?.flow &&
+            inputDescription ? (
               <Textarea
                 autoFocus
                 onBlur={() => {
@@ -432,7 +437,7 @@ export default function GenericNode({
                 .map((templateField: string, idx) => (
                   <div key={idx}>
                     {data.node!.template[templateField].show &&
-                      !data.node!.template[templateField].advanced ? (
+                    !data.node!.template[templateField].advanced ? (
                       <ParameterComponent
                         index={idx.toString()}
                         key={scapedJSONStringfy({
@@ -447,10 +452,10 @@ export default function GenericNode({
                         setData={setData}
                         color={
                           nodeColors[
-                          types[data.node?.template[templateField].type!]
+                            types[data.node?.template[templateField].type!]
                           ] ??
                           nodeColors[
-                          data.node?.template[templateField].type!
+                            data.node?.template[templateField].type!
                           ] ??
                           nodeColors.unknown
                         }
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index d5ce13dd8..3c73139af 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,validApiKey } = useContext(StoreContext);
+  const { hasApiKey, validApiKey } = useContext(StoreContext);
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
@@ -181,25 +181,54 @@ export default function ExtraSidebar(): JSX.Element {
   }, [getFilterEdge, data]);
 
   const ModalMemo = useMemo(
-    () => (
-      <ShareModal is_component={false} component={flow!} disabled={(!hasApiKey||!validApiKey)}>
-        <ShadTooltip content="Share" side="top">
-          <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":"")} />
+    () =>
+      !hasApiKey || !validApiKey ? (
+        <button
+          disabled={!hasApiKey || !validApiKey}
+          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>
+      ) : (
+        <ShareModal
+          is_component={false}
+          component={flow!}
+          disabled={!hasApiKey || !validApiKey}
+        >
+          <button
+            disabled={!hasApiKey || !validApiKey}
+            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,validApiKey]
+        </ShareModal>
+      ),
+    [hasApiKey, validApiKey]
   );
 
   const ExportMemo = useMemo(
     () => (
       <ExportModal>
         <ShadTooltip content="Export" side="top">
-          <button
-            className={classNames("extra-side-bar-buttons")}
-          >
+          <button className={classNames("extra-side-bar-buttons")}>
             <IconComponent name="FileDown" className="side-bar-button-size" />
           </button>
         </ShadTooltip>
@@ -280,8 +309,9 @@ export default function ExtraSidebar(): JSX.Element {
             </div>
           </ShadTooltip>
         </div>
-
-        <div className="side-bar-button">{ModalMemo}</div>
+        <ShadTooltip content="Share" side="top" styleClasses="cursor-default">
+          <div className="side-bar-button">{ModalMemo}</div>
+        </ShadTooltip>
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 6ac04e287..4f6a7b3a0 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,validApiKey } = 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"
@@ -232,7 +232,7 @@ export default function NodeToolbarComponent({
                 </SelectItem>
               )}
 
-              <SelectItem disabled={(!hasApiKey||!validApiKey)} value={"Share"}>
+              <SelectItem disabled={!hasApiKey || !validApiKey} value={"Share"}>
                 <div className="flex">
                   <IconComponent
                     name="Share2"
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 244cf0765..a135752c9 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -275,8 +275,18 @@ export default function StorePage(): JSX.Element {
               <SelectContent>
                 <SelectGroup>
                   <SelectItem value="all">All</SelectItem>
-                  <SelectItem disabled={!hasApiKey} value="createdbyme">Created By Me</SelectItem>
-                  <SelectItem disabled={!hasApiKey} value="likedbyme">Liked By Me</SelectItem>
+                  <SelectItem
+                    disabled={!hasApiKey || !validApiKey}
+                    value="createdbyme"
+                  >
+                    Created By Me
+                  </SelectItem>
+                  <SelectItem
+                    disabled={!hasApiKey || !validApiKey}
+                    value="likedbyme"
+                  >
+                    Liked By Me
+                  </SelectItem>
                 </SelectGroup>
               </SelectContent>
             </Select>
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 3ae920e9d..653510f03 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -152,8 +152,8 @@ test("PromptTemplateComponent", async ({ page }) => {
       )
       .click();
 
-      await page.getByTestId("more-options-modal").click();
-      await page.getByTestId("edit-button-modal").click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showprompt1"]').click();
     expect(