From b5e329e22d485676fd51c8dcaa5644b3e2e1bfad Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Tue, 25 Jun 2024 15:17:17 +0200
Subject: [PATCH] feat: search only features when there is search string
 (#7450)

Now the search hook is inside another component, so we do not get
searches without search query.
Also we had 2 state variable handing the search query. Removed one of
them.
---
 .../src/component/commandBar/CommandBar.tsx   | 33 ++++---------------
 .../component/commandBar/CommandFeatures.tsx  | 29 ++++++++++++++++
 2 files changed, 36 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/component/commandBar/CommandFeatures.tsx

diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx
index 90e9601182..4eb69b8125 100644
--- a/frontend/src/component/commandBar/CommandBar.tsx
+++ b/frontend/src/component/commandBar/CommandBar.tsx
@@ -24,7 +24,7 @@ import { PageSuggestions } from './PageSuggestions';
 import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRoutes';
 import { useAsyncDebounce } from 'react-table';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
-import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
+import { CommandFeatures } from './CommandFeatures';
 
 export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
     position: 'absolute',
@@ -124,17 +124,6 @@ export const CommandBar = () => {
         setShowSuggestions(false);
     };
 
-    const [value, setValue] = useState<string>('');
-
-    const { features = [] } = useFeatureSearch(
-        {
-            query: searchString,
-            limit: '3',
-        },
-        {
-            revalidateOnFocus: false,
-        },
-    );
     const { projects } = useProjects();
 
     const debouncedSetSearchState = useAsyncDebounce((query) => {
@@ -163,7 +152,6 @@ export const CommandBar = () => {
 
     const onSearchChange = (value: string) => {
         debouncedSetSearchState(value);
-        setValue(value);
     };
 
     const hotkey = useKeyboardShortcut(
@@ -190,11 +178,6 @@ export const CommandBar = () => {
     useOnClickOutside([searchContainerRef], hideSuggestions);
     useOnBlur(searchContainerRef, hideSuggestions);
 
-    const flags: CommandResultGroupItem[] = features.map((feature) => ({
-        name: feature.name,
-        link: `/projects/${feature.project}/features/${feature.name}`,
-    }));
-
     return (
         <StyledContainer ref={searchContainerRef} active={showSuggestions}>
             <StyledSearch>
@@ -211,7 +194,7 @@ export const CommandBar = () => {
                         'aria-label': placeholder,
                         'data-testid': SEARCH_INPUT,
                     }}
-                    value={value}
+                    value={searchString}
                     onChange={(e) => onSearchChange(e.target.value)}
                     onFocus={() => {
                         setShowSuggestions(true);
@@ -220,7 +203,7 @@ export const CommandBar = () => {
 
                 <Box sx={{ width: (theme) => theme.spacing(4) }}>
                     <ConditionallyRender
-                        condition={Boolean(value)}
+                        condition={Boolean(searchString)}
                         show={
                             <Tooltip title='Clear search query' arrow>
                                 <IconButton
@@ -243,14 +226,12 @@ export const CommandBar = () => {
             </StyledSearch>
 
             <ConditionallyRender
-                condition={Boolean(value) && showSuggestions}
+                condition={Boolean(searchString) && showSuggestions}
                 show={
                     <CommandResultsPaper>
-                        <CommandResultGroup
-                            groupName={'Flags'}
-                            icon={'flag'}
-                            items={flags}
-                        />
+                        {searchString !== undefined && (
+                            <CommandFeatures searchString={searchString} />
+                        )}
                         <CommandResultGroup
                             groupName={'Projects'}
                             icon={'flag'}
diff --git a/frontend/src/component/commandBar/CommandFeatures.tsx b/frontend/src/component/commandBar/CommandFeatures.tsx
new file mode 100644
index 0000000000..ee486472cf
--- /dev/null
+++ b/frontend/src/component/commandBar/CommandFeatures.tsx
@@ -0,0 +1,29 @@
+import {
+    CommandResultGroup,
+    type CommandResultGroupItem,
+} from './RecentlyVisited/CommandResultGroup';
+import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
+
+interface ICommandBar {
+    searchString: string;
+}
+export const CommandFeatures = ({ searchString }: ICommandBar) => {
+    const { features = [] } = useFeatureSearch(
+        {
+            query: searchString,
+            limit: '3',
+        },
+        {
+            revalidateOnFocus: false,
+        },
+    );
+
+    const flags: CommandResultGroupItem[] = features.map((feature) => ({
+        name: feature.name,
+        link: `/projects/${feature.project}/features/${feature.name}`,
+    }));
+
+    return (
+        <CommandResultGroup groupName={'Flags'} icon={'flag'} items={flags} />
+    );
+};