Changed way of disabling sidebar button; Disabled API button before building.

src/frontend/src/components/chatComponent/index.tsx

@@ -12,9 +12,8 @@ import { NodeType } from "../../types/flow";
 
 export default function Chat({ flow }: ChatType) {
   const [open, setOpen] = useState(false);
-  const [isBuilt, setIsBuilt] = useState(false);
   const [canOpen, setCanOpen] = useState(false);
-  const { tabsState } = useContext(TabsContext);
+  const { tabsState, isBuilt, setIsBuilt } = useContext(TabsContext);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {

src/frontend/src/contexts/tabsContext.tsx

@@ -40,6 +40,8 @@ const TabsContextInitialValue: TabsContextType = {
   downloadFlows: () => {},
   uploadFlows: () => {},
   uploadFlow: () => {},
+  isBuilt: false,
+  setIsBuilt: (state: boolean) => {},
   hardReset: () => {},
   saveFlow: async (flow: FlowType) => {},
   lastCopiedSelection: null,
@@ -583,10 +585,14 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     }
   }
 
+  const [isBuilt, setIsBuilt] = useState(false);
+
   return (
     <TabsContext.Provider
       value={{
         saveFlow,
+        isBuilt,
+        setIsBuilt,
         lastCopiedSelection,
         setLastCopiedSelection,
         hardReset,

src/frontend/src/modals/ApiModal/index.tsx

@@ -30,9 +30,11 @@ const ApiModal = forwardRef(
     {
       flow,
       children,
+      disable,
     }: {
       flow: FlowType;
       children: ReactNode;
+      disable: boolean;
     },
     ref
   ) => {
@@ -278,7 +280,7 @@ const ApiModal = forwardRef(
     }
 
     return (
-      <BaseModal open={open} setOpen={setOpen}>
+      <BaseModal open={open} setOpen={setOpen} disable={disable}>
         <BaseModal.Trigger>{children}</BaseModal.Trigger>
         <BaseModal.Header description={EXPORT_CODE_DIALOG}>
           <span className="pr-2">Code</span>

src/frontend/src/modals/baseModal/index.tsx

@@ -46,11 +46,13 @@ interface BaseModalProps {
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  disable?: boolean;
   size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
 }
 function BaseModal({
   open,
   setOpen,
+  disable = false,
   children,
   size = "large",
 }: BaseModalProps) {
@@ -99,7 +101,10 @@ function BaseModal({
   //UPDATE COLORS AND STYLE CLASSSES
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger className="w-full" hidden={triggerChild ? false : true}>
+      <DialogTrigger
+        className={"w-full " + (disable ? "button-disable" : "")}
+        hidden={triggerChild ? false : true}
+      >
         {triggerChild}
       </DialogTrigger>
       <DialogContent className={minWidth}>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -19,7 +19,7 @@ import DisclosureComponent from "../DisclosureComponent";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
-  const { flows, tabId, uploadFlow, tabsState, saveFlow } =
+  const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt } =
     useContext(TabsContext);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
@@ -88,11 +88,14 @@ export default function ExtraSidebar() {
         <div className="side-bar-button">
           <ShadTooltip content="Code" side="top">
             {flow && flow.data && (
-              <ApiModal flow={flow}>
+              <ApiModal flow={flow} disable={!isBuilt}>
                 <div className={classNames("extra-side-bar-buttons")}>
                   <IconComponent
                     name="Code2"
-                    className="side-bar-button-size"
+                    className={
+                      "side-bar-button-size" +
+                      (isBuilt ? " " : " extra-side-bar-save-disable")
+                    }
                   />
                 </div>
               </ApiModal>
@@ -102,12 +105,13 @@ export default function ExtraSidebar() {
         <div className="side-bar-button">
           <ShadTooltip content="Save" side="top">
             <button
-              className="extra-side-bar-buttons"
+              className={
+                "extra-side-bar-buttons " + (isPending ? "" : "button-disable")
+              }
               onClick={(event) => {
                 saveFlow(flow);
                 setSuccessData({ title: "Changes saved successfully" });
               }}
-              disabled={!isPending}
             >
               <IconComponent
                 name="Save"

src/frontend/src/style/applies.css

@@ -81,6 +81,9 @@
     .side-bar-button {
       @apply flex w-full
     }
+    .button-disable {
+      @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
     }

src/frontend/src/types/tabs/index.ts

@@ -18,6 +18,8 @@ export type TabsContextType = {
   ) => void;
   downloadFlows: () => void;
   uploadFlows: () => void;
+  isBuilt: boolean;
+  setIsBuilt: (state: boolean) => void;
   uploadFlow: (newFlow?: boolean, file?: File) => void;
   hardReset: () => void;
   getNodeId: (nodeType: string) => string;