Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: search only features when there is search string (#7450)

Browse Source 
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.
This commit is contained in:
Jaanus Sellin 2024-06-25 15:17:17 +02:00 committed by GitHub
parent 3a3b6a29ff
commit b5e329e22d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/component/commandBar/CommandBar.tsx
View File

@ -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'}

29
frontend/src/component/commandBar/CommandFeatures.tsx Normal file
View File

@ -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} />
);
};