Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: show all results in the same time (#7590)

Browse Source 
Previously, when the result box was loading, it returned projects and
menu items first. After the feature search response came back, it also
showed the features, but this made the component jump around too much.
Now, everything is shown when the feature result comes back, reducing
the jumping around.
This commit is contained in:
Jaanus Sellin 2024-07-15 16:37:11 +03:00 committed by GitHub
parent d32990ec4c
commit aaf66022af
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 83 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -97,6 +97,7 @@ export const CommandBar = () => {
const searchInputRef = useRef<HTMLInputElement>(null);
const searchContainerRef = useRef<HTMLInputElement>(null);
const [showSuggestions, setShowSuggestions] = useState(false);
const [searchLoading, setSearchLoading] = useState(false);
const [searchString, setSearchString] = useState(undefined);
const [searchedProjects, setSearchedProjects] = useState<
CommandResultGroupItem[]
@ -215,39 +216,54 @@ export const CommandBar = () => {
}
});
return { allCommandBarLinks, selectedIndex };
return {
allCommandBarLinks,
selectedIndex,
};
};
useKeyboardShortcut({ key: 'ArrowDown', preventDefault: true }, () => {
const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
if (!itemsAndIndex) return;
const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
useKeyboardShortcut(
{
key: 'ArrowDown',
preventDefault: true,
},
() => {
const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
if (!itemsAndIndex) return;
const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
const newIndex = selectedIndex + 1;
if (newIndex >= allCommandBarLinks.length) return;
const newIndex = selectedIndex + 1;
if (newIndex >= allCommandBarLinks.length) return;
(allCommandBarLinks[newIndex] as HTMLElement).focus();
});
useKeyboardShortcut({ key: 'ArrowUp', preventDefault: true }, () => {
const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
if (!itemsAndIndex) return;
const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
const newIndex = selectedIndex - 1;
if (newIndex >= 0) {
(allCommandBarLinks[newIndex] as HTMLElement).focus();
} else {
const element = searchInputRef.current;
if (element) {
element.focus();
element.setSelectionRange(
element.value.length,
element.value.length,
);
},
);
useKeyboardShortcut(
{
key: 'ArrowUp',
preventDefault: true,
},
() => {
const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
if (!itemsAndIndex) return;
const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
const newIndex = selectedIndex - 1;
if (newIndex >= 0) {
(allCommandBarLinks[newIndex] as HTMLElement).focus();
} else {
const element = searchInputRef.current;
if (element) {
element.focus();
element.setSelectionRange(
element.value.length,
element.value.length,
);
}
}
}
});
},
);
useOnClickOutside([searchContainerRef], hideSuggestions);
const onKeyDown = (event: React.KeyboardEvent) => {
@ -346,24 +362,32 @@ export const CommandBar = () => {
searchString={searchString}
setSearchedFlagCount={setSearchedFlagCount}
onClick={clearSearchValue}
setSearchLoading={setSearchLoading}
/>
)}
<CommandResultGroup
groupName={'Projects'}
icon={'flag'}
onClick={clearSearchValue}
items={searchedProjects}
/>
<CommandSearchPages
items={searchedPages}
onClick={clearSearchValue}
/>
<ConditionallyRender
condition={hasNoResults}
condition={!searchLoading}
show={
<CommandBarFeedback
onSubmit={hideSuggestions}
/>
<>
<CommandResultGroup
groupName={'Projects'}
icon={'flag'}
onClick={clearSearchValue}
items={searchedProjects}
/>
<CommandSearchPages
items={searchedPages}
onClick={clearSearchValue}
/>
<ConditionallyRender
condition={hasNoResults}
show={
<CommandBarFeedback
onSubmit={hideSuggestions}
/>
}
/>
</>
}
/>
</CommandResultsPaper>

24
frontend/src/component/commandBar/CommandSearchFeatures.tsx
View File

@ -4,18 +4,21 @@ import {
} from './RecentlyVisited/CommandResultGroup';
import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
import { useEffect } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
interface ICommandBar {
searchString: string;
setSearchedFlagCount: (count: number) => void;
onClick: () => void;
setSearchLoading: (loading: boolean) => void;
}
export const CommandSearchFeatures = ({
searchString,
setSearchedFlagCount,
onClick,
setSearchLoading,
}: ICommandBar) => {
const { features = [] } = useFeatureSearch(
const { features = [], loading } = useFeatureSearch(
{
query: searchString,
limit: '3',
@ -36,12 +39,21 @@ export const CommandSearchFeatures = ({
setSearchedFlagCount(flags.length);
}, [JSON.stringify(flags)]);
useEffect(() => {
setSearchLoading(loading);
}, [loading]);
return (
<CommandResultGroup
groupName={'Flags'}
icon={'flag'}
items={flags}
onClick={onClick}
<ConditionallyRender
condition={!loading}
show={
<CommandResultGroup
groupName={'Flags'}
icon={'flag'}
items={flags}
onClick={onClick}
/>
}
/>
);
};