From 0f45a09494afa9ef4151bc884e08d42d3b24a99f Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 6 Mar 2024 18:06:52 -0300
Subject: [PATCH] Refactor: flow toolbar buttons disable intead of dissapear

---
 src/frontend/src/App.css                      |  3 +-
 src/frontend/src/components/IOview/index.tsx  |  8 +++-
 .../src/components/chatComponent/index.tsx    | 42 ++++++++++---------
 src/frontend/src/style/index.css              |  3 +-
 4 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index c2427fb0f..6aa681415 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -97,4 +97,5 @@ body {
 
 .custom-hover:hover {
   background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
-}
\ No newline at end of file
+}
+
diff --git a/src/frontend/src/components/IOview/index.tsx b/src/frontend/src/components/IOview/index.tsx
index 73f0a068e..ced31a177 100644
--- a/src/frontend/src/components/IOview/index.tsx
+++ b/src/frontend/src/components/IOview/index.tsx
@@ -20,7 +20,12 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 
-export default function IOView({ children, open, setOpen }): JSX.Element {
+export default function IOView({ children, open, setOpen, disable }: {
+  children: JSX.Element;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disable?: boolean;
+}): JSX.Element {
   const inputs = useFlowStore((state) => state.inputs).filter(
     (input) => input.type !== "ChatInput"
   );
@@ -98,6 +103,7 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
       size={haveChat ? (selectedTab === 0 ? "large-thin" : "large") : "small"}
       open={open}
       setOpen={setOpen}
+      disable={disable}
     >
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index a53184856..3d3a01562 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -51,9 +51,9 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
         <button
           disabled={!hasApiKey || !validApiKey || !hasStore}
           className={classNames(
-            "relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold",
+            "relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold ",
             !hasApiKey || !validApiKey || !hasStore
-              ? "button-disable  cursor-default text-muted-foreground"
+              ? " button-disable text-muted-foreground  "
               : ""
           )}
         >
@@ -87,14 +87,14 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
       >
       <div
         className={
-          "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted  shadow-md transition-all cursor-pointer gap-7 border"
+          "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted  shadow-md transition-all gap-7 border"
         }
       >
         <div className="flex">
           <div className="flex gap-1 text-medium-indigo  rounded-sm transition-all w-full h-full">
-          {hasIO && (
-          <IOView open={open} setOpen={setOpen}>
-            <div className="relative inline-flex w-full items-center justify-center   hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold">
+          {hasIO ? (
+          <IOView open={open} setOpen={setOpen} disable={!hasIO}>
+            <div className="relative inline-flex w-full items-center justify-center   hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold transition-all">
               <ForwardedIconComponent
                 name="Zap"
                 className={"message-button-icon h-5 w-5 transition-all"}
@@ -102,14 +102,20 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
               Run
             </div>
           </IOView>
+        ) : (
+          <div className={`relative inline-flex w-full items-center justify-center transition-all duration-500 ease-in-out px-5 py-3 text-muted-foreground ease-in-out gap-1 text-sm font-semibold cursor-not-allowed`}>
+              <ForwardedIconComponent
+                name="Zap"
+                className={"message-button-icon h-5 w-5 transition-all fill-muted-foreground stroke-muted-foreground"}
+              />
+              Run
+          </div>
         )}
           </div>
-          {hasIO && (
-            <div>
-              <Separator orientation="vertical" />
-            </div>
-          )}
-          <div className="flex items-center gap-2">
+          <div>
+            <Separator orientation="vertical" />
+          </div>
+          <div className="flex items-center gap-2 cursor-pointer">
             {currentFlow && currentFlow.data && (
               <ApiModal flow={currentFlow}>
                   <div className={classNames("relative inline-flex w-full items-center justify-center hover:bg-hover px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-1 text-sm font-semibold")}>
@@ -122,15 +128,11 @@ export default function FlowToolbar({ flow }: ChatType): JSX.Element {
               </ApiModal>
             )}
           </div>
-          {hasStore && validApiKey && (
-            <div>
-              <Separator orientation="vertical" />
-            </div>
-          )}
+          <div>
+            <Separator orientation="vertical" />
+          </div>
           <div className="flex items-center gap-2">
-            {hasStore && validApiKey && (
-              <div className="side-bar-button">{ModalMemo}</div>
-            )}
+            <div className={`side-bar-button ${!hasApiKey || !validApiKey || !hasStore ? " cursor-not-allowed" : " cursor-pointer"}`}>{ModalMemo}</div>
           </div>
         </div>
       </div>
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 0c58cb1df..e744fb503 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -51,7 +51,7 @@
     --component-icon: #d8598a;
     --flow-icon: #2f67d0;
     --hover: #F2F4F5;
-
+    --disabled-run: #6366f1;
     
 
     /* Colors that are shared in dark and light mode */
@@ -73,6 +73,7 @@
     --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
     --ice: #60A5FA;
     --hover: #1A202E;
+    --disabled-run: #6366f1;
 
     --muted: 223 27% 11%; /* hsl(223 27% 11%) */
     --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */