From c0ffb86c13c716f37af3582f637724afbaea0cc1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:27:03 -0300
Subject: [PATCH] fix: make search on sidebar shortcut not be triggered inside
 inputs (#5345)

* added search components on sidebar shortcut

* Implemented search components sidebar shortcut on flow sidebar component

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
---
 src/frontend/src/constants/constants.ts       |  5 ++
 .../components/flowSidebarComponent/index.tsx | 49 +++++++------------
 src/frontend/src/stores/shortcuts.ts          |  1 +
 src/frontend/src/types/store/index.ts         |  1 +
 4 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 94bc0c0e3..176b148d8 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -764,6 +764,11 @@ export const defaultShortcuts = [
     name: "Advanced Settings",
     shortcut: "mod+shift+a",
   },
+  {
+    display_name: "Search Components on Sidebar",
+    name: "Search Components Sidebar",
+    shortcut: "/",
+  },
   {
     display_name: "Minimize",
     name: "Minimize",
diff --git a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
index 51eabc181..a2a92c3d8 100644
--- a/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/flowSidebarComponent/index.tsx
@@ -2,25 +2,14 @@ import Fuse from "fuse.js";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook"; // Import useHotkeys
 
-import ForwardedIconComponent from "@/components/common/genericIconComponent";
-import {
-  Disclosure,
-  DisclosureContent,
-  DisclosureTrigger,
-} from "@/components/ui/disclosure";
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
 import { useAddComponent } from "@/hooks/useAddComponent";
+import { useShortcutsStore } from "@/stores/shortcuts";
 import { useStoreStore } from "@/stores/storeStore";
 import { checkChatInput } from "@/utils/reactflowUtils";
 import {
@@ -34,12 +23,12 @@ import useFlowStore from "../../../../stores/flowStore";
 import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import sensitiveSort from "../extraSidebarComponent/utils/sensitive-sort";
+import isWrappedWithClass from "../PageComponent/utils/is-wrapped-with-class";
 import { CategoryGroup } from "./components/categoryGroup";
 import NoResultsMessage from "./components/emptySearchComponent";
 import MemoizedSidebarGroup from "./components/sidebarBundles";
 import SidebarMenuButtons from "./components/sidebarFooterButtons";
 import { SidebarHeaderComponent } from "./components/sidebarHeader";
-import SidebarItemsList from "./components/sidebarItemsList";
 import { applyBetaFilter } from "./helpers/apply-beta-filter";
 import { applyEdgeFilter } from "./helpers/apply-edge-filter";
 import { applyLegacyFilter } from "./helpers/apply-legacy-filter";
@@ -119,15 +108,6 @@ export function FlowSidebarComponent() {
     setFuse(new Fuse(fuseData, fuseOptions));
   }, [data]);
 
-  // Event handlers
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (event.key === "/") {
-      event.preventDefault();
-      searchInputRef.current?.focus();
-      setOpen(true);
-    }
-  }, []);
-
   const handleKeyDownInput = (
     e: React.KeyboardEvent<HTMLDivElement>,
     name: string,
@@ -142,11 +122,6 @@ export function FlowSidebarComponent() {
     }
   };
 
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-
   const [isInputFocused, setIsInputFocused] = useState(false);
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -165,12 +140,22 @@ export function FlowSidebarComponent() {
 
   const { setOpen } = useSidebar();
 
-  useHotkeys("/", (event) => {
-    event.preventDefault();
-    searchInputRef.current?.focus();
+  const searchComponentsSidebar = useShortcutsStore(
+    (state) => state.searchComponentsSidebar,
+  );
 
-    setOpen(true);
-  });
+  useHotkeys(
+    searchComponentsSidebar,
+    (e: KeyboardEvent) => {
+      if (isWrappedWithClass(e, "noflow")) return;
+      e.preventDefault();
+      searchInputRef.current?.focus();
+      setOpen(true);
+    },
+    {
+      preventDefault: true,
+    },
+  );
 
   useHotkeys(
     "esc",
diff --git a/src/frontend/src/stores/shortcuts.ts b/src/frontend/src/stores/shortcuts.ts
index a14b9d2ba..afd7927cf 100644
--- a/src/frontend/src/stores/shortcuts.ts
+++ b/src/frontend/src/stores/shortcuts.ts
@@ -34,6 +34,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   freezePath: "mod+shift+f",
   toolMode: "mod+shift+m",
   toggleSidebar: "mod+b",
+  searchComponentsSidebar: "/",
   updateUniqueShortcut: (name, combination) => {
     set({
       [name]: combination,
diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts
index 8c7370e7e..31da0121c 100644
--- a/src/frontend/src/types/store/index.ts
+++ b/src/frontend/src/types/store/index.ts
@@ -38,6 +38,7 @@ export type shortcutsStoreType = {
   duplicate: string;
   componentShare: string;
   docs: string;
+  searchComponentsSidebar: string;
   changesSave: string;
   saveComponent: string;
   delete: string;