Feat: create isThereModal validate function to prevent modals from opening on top of each other

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

@@ -8,23 +8,29 @@ import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { useShortcutsStore } from "../../stores/shortcuts";
 import { useStoreStore } from "../../stores/storeStore";
-import { classNames } from "../../utils/utils";
+import { classNames, isThereModal } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 import { Separator } from "../ui/separator";
 
 export default function FlowToolbar(): JSX.Element {
   const preventDefault = true;
+  const [open, setOpen] = useState<boolean>(false);
+  const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
+  const [openShareModal, setOpenShareModal] = useState<boolean>(false);
   function handleAPIWShortcut(e: KeyboardEvent) {
+    if (isThereModal() && !openCodeModal) return;
     setOpenCodeModal((oldOpen) => !oldOpen);
   }
 
   function handleChatWShortcut(e: KeyboardEvent) {
+    if (isThereModal() && !open) return;
     if (useFlowStore.getState().hasIO) {
       setOpen((oldState) => !oldState);
     }
   }
 
   function handleShareWShortcut(e: KeyboardEvent) {
+    if (isThereModal() && !openShareModal) return;
     setOpenShareModal((oldState) => !oldState);
   }
 
@@ -36,10 +42,6 @@ export default function FlowToolbar(): JSX.Element {
   useHotkeys(api, handleAPIWShortcut, { preventDefault });
   useHotkeys(flow, handleShareWShortcut, { preventDefault });
 
-  const [open, setOpen] = useState<boolean>(false);
-  const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
-  const [openShareModal, setOpenShareModal] = useState<boolean>(false);
-
   const hasIO = useFlowStore((state) => state.hasIO);
   const hasStore = useStoreStore((state) => state.hasStore);
   const validApiKey = useStoreStore((state) => state.validApiKey);

src/frontend/src/modals/shareModal/index.tsx

@@ -1,5 +1,4 @@
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
 import EditFlowSettings from "../../components/editFlowSettingsComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { TagsSelector } from "../../components/tagsSelectorComponent";

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

@@ -32,7 +32,7 @@ import {
   expandGroupNode,
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
-import { classNames, cn } from "../../../../utils/utils";
+import { classNames, cn, isThereModal } from "../../../../utils/utils";
 import ToolbarSelectItem from "./toolbarSelectItem";
 import RenderIcons from "../../../../components/renderIconComponent";
 
@@ -47,6 +47,13 @@ export default function NodeToolbarComponent({
   setShowState,
   onCloseAdvancedModal,
 }: nodeToolbarPropsType): JSX.Element {
+  const version = useDarkStore((state) => state.version);
+  const [showModalAdvanced, setShowModalAdvanced] = useState(false);
+  const [showconfirmShare, setShowconfirmShare] = useState(false);
+  const [showOverrideModal, setShowOverrideModal] = useState(false);
+  const [flowComponent, setFlowComponent] = useState<FlowType>(
+    createFlowComponent(cloneDeep(data), version),
+  );
   const preventDefault = true;
   const isMac = navigator.platform.toUpperCase().includes("MAC");
   const nodeLength = Object.keys(data.node!.template).filter(
@@ -99,20 +106,23 @@ export default function NodeToolbarComponent({
   }
 
   function handleShareWShortcut(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isThereModal() && !showOverrideModal) return;
     if (hasApiKey || hasStore) {
-      e.preventDefault();
       setShowconfirmShare((state) => !state);
     }
   }
 
   function handleCodeWShortcut(e: KeyboardEvent) {
     e.preventDefault();
+    if (isThereModal() && !openModal) return;
     if (hasCode) return setOpenModal((state) => !state);
     setNoticeData({ title: `You can not access ${data.id} code` });
   }
 
   function handleAdvancedWShortcut(e: KeyboardEvent) {
     e.preventDefault();
+    if (isThereModal() && !showModalAdvanced) return;
     if (!isGroup) {
       setShowModalAdvanced((state) => !state);
     }
@@ -120,11 +130,12 @@ export default function NodeToolbarComponent({
 
   function handleSaveWShortcut(e: KeyboardEvent) {
     e.preventDefault();
+    if (isThereModal() && !showOverrideModal) return;
     if (isSaved) {
       setShowOverrideModal((state) => !state);
       return;
     }
-    if (hasCode) {
+    if (hasCode && !isSaved) {
       saveComponent(cloneDeep(data), false);
       setSuccessData({ title: `${data.id} saved successfully` });
       return;
@@ -195,14 +206,7 @@ export default function NodeToolbarComponent({
   const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
   const getNodePosition = useFlowStore((state) => state.getNodePosition);
   const flows = useFlowsManagerStore((state) => state.flows);
-  const version = useDarkStore((state) => state.version);
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
-  const [showModalAdvanced, setShowModalAdvanced] = useState(false);
-  const [showconfirmShare, setShowconfirmShare] = useState(false);
-  const [showOverrideModal, setShowOverrideModal] = useState(false);
-  const [flowComponent, setFlowComponent] = useState<FlowType>(
-    createFlowComponent(cloneDeep(data), version),
-  );
 
   //  useEffect(() => {
   //    if (openWDoubleClick) setShowModalAdvanced(true);
@@ -428,7 +432,7 @@ export default function NodeToolbarComponent({
               side="top"
             >
               <button
-                className="relative inline-flex items-center rounded-l-md  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"
+                className="relative inline-flex items-center rounded-l-md 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"
                 onClick={() => {
                   setOpenModal(!openModal);
                 }}
@@ -448,7 +452,7 @@ export default function NodeToolbarComponent({
               side="top"
             >
               <button
-                className="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"
+                className={`${isGroup ? "rounded-l-md" : ""} 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`}
                 onClick={() => {
                   setShowModalAdvanced(true);
                 }}

src/frontend/src/utils/utils.ts

@@ -406,3 +406,12 @@ export function extractColumnsFromRows(
 
   return Object.values(columnsKeys);
 }
+
+export function isThereModal(): boolean {
+  const modal = document.body.getElementsByClassName(
+    "nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  );
+  console.log(modal);
+  if (modal.length > 0) return true;
+  return false;
+}