Feat: Add shortcut to open flow share modal

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 (

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.`;

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);
+    internalSetOpen(false);
-    else internalSetOpen(false);
   };
 
   const handleExportComponent = () => {
@@ -208,8 +202,8 @@ export default function ShareModal({
     <>
       <BaseModal
         size="smaller-h-full"
-        open={(!disabled && open) ?? internalOpen}
+        open={!disabled && internalOpen}
-        setOpen={setOpen ?? internalSetOpen}
+        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();
                 }}
               >

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",

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;