From d14e13d4e44388e0ebceb67b54e56c9d0a08e122 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Sun, 9 Jun 2024 18:51:31 -0300
Subject: [PATCH] Feat: Add shortcut to open flow share modal

---
 .../src/components/chatComponent/index.tsx    | 15 +++++++---
 src/frontend/src/constants/constants.ts       |  4 +++
 src/frontend/src/modals/shareModal/index.tsx  | 28 ++++++++-----------
 src/frontend/src/stores/shortcuts.ts          |  1 +
 src/frontend/src/types/store/index.ts         |  1 +
 5 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 6fc0da4b9..f0d7922d4 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -30,11 +30,11 @@ export default function FlowToolbar(): JSX.Element {
 
   const openPlayground = useShortcutsStore((state) => state.open);
   const api = useShortcutsStore((state) => state.api);
-  const share = useShortcutsStore((state) => state.share);
+  const flow = useShortcutsStore((state) => state.flow);
 
   useHotkeys(openPlayground, handleChatWShortcut, { preventDefault });
   useHotkeys(api, handleAPIWShortcut, { preventDefault });
-  useHotkeys(share, handleShareWShortcut, { preventDefault });
+  useHotkeys(flow, handleShareWShortcut, { preventDefault });
 
   const [open, setOpen] = useState<boolean>(false);
   const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
@@ -55,7 +55,7 @@ export default function FlowToolbar(): JSX.Element {
         component={currentFlow!}
         disabled={!hasApiKey || !validApiKey || !hasStore}
         open={openShareModal}
-        setOpen={setOpen}
+        setOpen={setOpenShareModal}
       >
         <button
           disabled={!hasApiKey || !validApiKey || !hasStore}
@@ -79,7 +79,14 @@ export default function FlowToolbar(): JSX.Element {
         </button>
       </ShareModal>
     ),
-    [hasApiKey, validApiKey, currentFlow, hasStore, openShareModal, setOpen],
+    [
+      hasApiKey,
+      validApiKey,
+      currentFlow,
+      hasStore,
+      openShareModal,
+      setOpenShareModal,
+    ],
   );
 
   return (
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 6bb0656f5..9d9fbda40 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -813,6 +813,10 @@ export const defaultShortcuts = [
     name: "Freeze",
     shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + F`,
   },
+  {
+    name: "Flow Share",
+    shortcut: `${IS_MAC ? "Cmd" : "Ctrl"} + B`,
+  },
 ];
 
 export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;
diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx
index d63846a5e..9a58403d7 100644
--- a/src/frontend/src/modals/shareModal/index.tsx
+++ b/src/frontend/src/modals/shareModal/index.tsx
@@ -42,24 +42,19 @@ export default function ShareModal({
   setOpen?: (open: boolean) => void;
   disabled?: boolean;
 }): JSX.Element {
-  function handleOpenWShortcut(e: KeyboardEvent) {
-    if (hasApiKey || hasStore) {
-      e.preventDefault();
-      internalSetOpen((state) => !state);
-    }
-  }
   const version = useDarkStore((state) => state.version);
   const hasStore = useStoreStore((state) => state.hasStore);
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  const [internalOpen, internalSetOpen] = useState(children ? false : true);
+  const [internalOpen, internalSetOpen] =
+    setOpen !== undefined && open !== undefined
+      ? [open, setOpen]
+      : useState(children ? false : true);
   const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
   const nameComponent = is_component ? "component" : "workflow";
 
-  useHotkeys("mod+alt+s", handleOpenWShortcut);
-
   const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
   const [loadingTags, setLoadingTags] = useState<boolean>(false);
   const [sharePublic, setSharePublic] = useState(true);
@@ -75,13 +70,13 @@ export default function ShareModal({
   const description = component?.description ?? "";
 
   useEffect(() => {
-    if (open || internalOpen) {
+    if (internalOpen) {
       if (hasApiKey && hasStore) {
         handleGetTags();
         handleGetNames();
       }
     }
-  }, [open, internalOpen, hasApiKey, hasStore]);
+  }, [internalOpen, hasApiKey, hasStore]);
 
   function handleGetTags() {
     setLoadingTags(true);
@@ -155,8 +150,7 @@ export default function ShareModal({
 
   const handleUpdateComponent = () => {
     handleShareComponent(true);
-    if (setOpen) setOpen(false);
-    else internalSetOpen(false);
+    internalSetOpen(false);
   };
 
   const handleExportComponent = () => {
@@ -208,8 +202,8 @@ export default function ShareModal({
     <>
       <BaseModal
         size="smaller-h-full"
-        open={(!disabled && open) ?? internalOpen}
-        setOpen={setOpen ?? internalSetOpen}
+        open={!disabled && internalOpen}
+        setOpen={internalSetOpen}
         onSubmit={() => {
           const isNameAvailable = !unavaliableNames.some(
             (element) => element.name === name,
@@ -217,7 +211,7 @@ export default function ShareModal({
 
           if (isNameAvailable) {
             handleShareComponent();
-            (setOpen || internalSetOpen)(false);
+            internalSetOpen(false);
           } else {
             setOpenConfirmationModal(true);
           }
@@ -298,7 +292,7 @@ export default function ShareModal({
                 variant="outline"
                 className="gap-2"
                 onClick={() => {
-                  (setOpen || internalSetOpen)(false);
+                  internalSetOpen(false);
                   handleExportComponent();
                 }}
               >
diff --git a/src/frontend/src/stores/shortcuts.ts b/src/frontend/src/stores/shortcuts.ts
index 09970b42e..c0b271849 100644
--- a/src/frontend/src/stores/shortcuts.ts
+++ b/src/frontend/src/stores/shortcuts.ts
@@ -7,6 +7,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   setShortcuts: (newShortcuts) => {
     set({ shortcuts: newShortcuts });
   },
+  flow: "mod+b",
   undo: "mod+z",
   redo: "mod+y",
   open: "mod+k",
diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts
index 143e1b26b..a24b1696d 100644
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@@ -21,6 +21,7 @@ export type StoreComponentResponse = {
 
 export type shortcutsStoreType = {
   updateUniqueShortcut: (name: string, combination: string) => void;
+  flow: string;
   group: string;
   cut: string;
   paste: string;