Feat: Implement shortcut to open CodeModal

src/frontend/src/App.tsx

@@ -22,6 +22,7 @@ import useFlowStore from "./stores/flowStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
+import { useShortcutsStore } from "./stores/shortcuts";
 
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(
@@ -45,32 +46,6 @@ export default function App() {
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
 
-  const handleModalWShortcut = useFlowStore(
-    (state) => state.handleModalWShortcut
-  );
-  const nodes = useFlowStore((state) => state.nodes);
-
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      const selectedNode = nodes.filter((obj) => obj.selected);
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        event.shiftKey &&
-        event.key === "C" &&
-        selectedNode.length > 0
-      ) {
-        event.preventDefault();
-        handleModalWShortcut("code");
-      }
-    };
-
-    document.addEventListener("keydown", onKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [handleModalWShortcut, nodes]);
-
   useEffect(() => {
     refreshStars();
     refreshVersion();

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -15,6 +15,7 @@ export default function CodeAreaComponent({
   id = "",
   readonly = false,
   openModal,
+  selected,
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value)
@@ -33,6 +34,7 @@ export default function CodeAreaComponent({
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <CodeAreaModal
+        selected={selected}
         openModal={openModal}
         readonly={readonly}
         dynamic={dynamic}

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -36,17 +36,25 @@ export default function CodeAreaModal({
   dynamic,
   readonly = false,
   openModal,
+  selected,
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const dark = useDarkStore((state) => state.dark);
   const unselectAll = useFlowStore((state) => state.unselectAll);
-
   const [height, setHeight] = useState<string | null>(null);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [error, setError] = useState<{
     detail: { error: string | undefined; traceback: string | undefined };
   } | null>(null);
+  const handleModalWShortcut = useFlowStore(
+    (state) => state.handleModalWShortcut
+  );
+  const openCodeModalWShortcut = useFlowStore(
+    (state) => state.openCodeModalWShortcut
+  );
+  const [open, setOpen] = useState(false);
+  const nodes = useFlowStore((state) => state.nodes);
 
   useEffect(() => {
     // if nodeClass.template has more fields other than code and dynamic is true
@@ -56,37 +64,29 @@ export default function CodeAreaModal({
     }
   }, []);                                                          
 
-  const handleModalWShortcut = useFlowStore(
-    (state) => state.handleModalWShortcut
-  );
-  const openCodeModalWShortcut = useFlowStore(
-    (state) => state.openCodeModalWShortcut
-  );
-  const nodes = useFlowStore((state) => state.nodes);
-
   useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
-      const selectedNode = nodes.filter((obj) => obj.selected);
       if (
-        (event.ctrlKey || event.metaKey) &&
+        (event.key === "C" || event.key === "c") &&
-        event.shiftKey &&
+        (event.metaKey || event.ctrlKey) &&
-        event.key === "C" &&
+        selected
-        selectedNode.length > 0
       ) {
         event.preventDefault();
-        setOpen(openCodeModalWShortcut);
+        console.log("entrou")
+        setOpen((oldState) => !oldState);
       }
     };
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
-
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
   
+
   useEffect(() => {
+    console.log(open)
     if (openModal) setOpen(true);
-  }, [openModal]);
+  }, [openModal, open]);
 
   function processNonDynamicField() {
     postValidateCode(code)
@@ -171,14 +171,14 @@ export default function CodeAreaModal({
     };
   }, [error, setHeight]);
 
-  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     setCode(value);
   }, [value, open]);
+  console.log(selected)
 
   return (
-    <BaseModal open={open} setOpen={setOpen}>
+    <BaseModal open={(open && selected)} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>
       <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
         <span className="pr-2"> {editCodeTitle} </span>

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

@@ -97,10 +97,6 @@ export default function NodeToolbarComponent({
     (state) => state.handleModalWShortcut
   );
 
-  useEffect(() => {
-    setOpenModal(openCodeModalWShortcut);
-  }, [openCodeModalWShortcut, handleModalWShortcut]);
-
   const setLastCopiedSelection = useFlowStore(
     (state) => state.setLastCopiedSelection
   );
@@ -217,6 +213,8 @@ export default function NodeToolbarComponent({
   const [openModal, setOpenModal] = useState(false);
   const hasCode = Object.keys(data.node!.template).includes("code");
 
+  console.log((selected && openModal))
+
   return (
     <>
       <div className="w-26 h-10">
@@ -231,8 +229,9 @@ export default function NodeToolbarComponent({
                 data-testid="code-button-modal"
               >
                 <div className="hidden">
-                  <CodeAreaComponent
+                  {selected && (
-                    openModal={openModal}
+                    <CodeAreaComponent
+                    openModal={(openModal || selected)}
                     readonly={
                       data.node?.flow && data.node.template[name].dynamic
                         ? true
@@ -245,7 +244,9 @@ export default function NodeToolbarComponent({
                     value={data.node?.template[name].value ?? ""}
                     onChange={handleOnNewValue}
                     id={"code-input-node-toolbar-" + name}
-                  />
+                    selected={selected}
+                    />
+                  )}
                 </div>
                 <IconComponent name="TerminalSquare" className="h-4 w-4" />
               </button>

src/frontend/src/stores/shortcuts.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+import { shortcutsStoreType } from "../types/store";
+
+export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
+    openCodeModalWShortcut: false,
+    handleModalWShortcut: (modal) => {
+      switch (modal) {
+        case "code":
+            set({
+                openCodeModalWShortcut: !get().openCodeModalWShortcut,
+            });
+            break;
+      }
+    },
+}));

src/frontend/src/types/components/index.ts

@@ -113,6 +113,7 @@ export type CodeAreaComponentType = {
   id?: string;
   readonly?: boolean;
   openModal?: boolean;
+  selected?: boolean;
 };
 
 export type FileComponentType = {
@@ -519,6 +520,7 @@ export type codeAreaModalPropsType = {
   dynamic?: boolean;
   readonly?: boolean;
   openModal?: boolean;
+  selected?: boolean;
 };
 
 export type chatMessagePropsType = {

src/frontend/src/types/store/index.ts

@@ -18,3 +18,8 @@ export type StoreComponentResponse = {
   authorized: boolean;
   results: storeComponent[];
 };
+
+export type shortcutsStoreType = {
+  openCodeModalWShortcut: boolean;
+  handleModalWShortcut: (str: string) => void;
+};