yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-28 02:17:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): Fix appearance of skeleton loading indicator for search bar (#13129)

Browse Source 
Co-authored-by: John Joyce <john@Johns-MacBook-Pro.local>
This commit is contained in:
John Joyce 2025-04-08 11:07:10 -07:00 committed by GitHub
parent 9b7b534283
commit 967db2a136
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 105 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

208
datahub-web-react/src/app/searchV2/SearchBar.tsx
View File

@ -413,118 +413,120 @@ export const SearchBar = ({
};
return (
<AutoCompleteContainer
viewsEnabled={viewsEnabled}
$isShowNavBarRedesign={isShowNavBarRedesign}
id={id}
style={viewsEnabled ? viewsEnabledStyle : style}
ref={searchBarWrapperRef}
>
<>
{isLoading ? (
<SkeletonContainer>
<SkeletonButton shape="square" active block />
</SkeletonContainer>
) : (
<StyledAutoComplete
data-testid="search-bar"
<AutoCompleteContainer
viewsEnabled={viewsEnabled}
$isShowNavBarRedesign={isShowNavBarRedesign}
defaultActiveFirstOption={false}
style={autoCompleteStyle}
options={options}
filterOption={false}
onSelect={(value, option) => {
// If the autocomplete option type is NOT an entity, then render as a normal search query.
if (
option.type === EXACT_AUTOCOMPLETE_OPTION_TYPE ||
option.type === RELEVANCE_QUERY_OPTION_TYPE
) {
handleSearch(
`${filterSearchQuery(value as string)}`,
getFiltersWithQuickFilter(selectedQuickFilter),
);
analytics.event({
type: EventType.SelectAutoCompleteOption,
optionType: option.type,
} as Event);
} else {
// Navigate directly to the entity profile.
history.push(getEntityPath(option.type, value as string, entityRegistry, false, false));
setSelected('');
analytics.event({
type: EventType.SelectAutoCompleteOption,
optionType: option.type,
entityType: option.type,
entityUrn: value,
} as Event);
}
}}
onSearch={showAutoCompleteResults ? onQueryChange : undefined}
defaultValue={initialQuery || undefined}
value={selected}
onChange={(v) => setSelected(filterSearchQuery(v as string))}
dropdownStyle={{
maxHeight: 1000,
overflowY: 'visible',
position: (fixAutoComplete && 'fixed') || 'relative',
...(isShowNavBarRedesign ? { minWidth: '648px' } : {}),
}}
onDropdownVisibleChange={(isOpen) => {
if (!isOpen) {
setIsDropdownVisible(isOpen);
} else {
// set timeout so that we allow search bar to grow in width and therefore allow autocomplete to grow
setTimeout(() => {
setIsDropdownVisible(isOpen);
}, 0);
}
}}
open={isDropdownVisible}
listHeight={480}
id={id}
style={viewsEnabled ? viewsEnabledStyle : style}
ref={searchBarWrapperRef}
>
<StyledSearchBar
bordered={false}
placeholder={placeholderText}
onPressEnter={() => {
handleSearch(
filterSearchQuery(searchQuery || ''),
getFiltersWithQuickFilter(selectedQuickFilter),
);
}}
style={{ ...inputStyle, color: '#fff' }}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
data-testid="search-input"
onFocus={handleFocus}
onBlur={handleBlur}
viewsEnabled={viewsEnabled}
<StyledAutoComplete
data-testid="search-bar"
$isShowNavBarRedesign={isShowNavBarRedesign}
allowClear={(isFocused && { clearIcon: <ClearIcon /> }) || false}
prefix={
<>
<SearchIcon
$isShowNavBarRedesign={isShowNavBarRedesign}
onClick={() => {
handleSearch(
filterSearchQuery(searchQuery || ''),
getFiltersWithQuickFilter(selectedQuickFilter),
);
}}
/>
</>
}
ref={searchInputRef}
suffix={<>{(showCommandK && !isFocused && <CommandK />) || null}</>}
$textColor={textColor}
$placeholderColor={placeholderColor}
/>
</StyledAutoComplete>
defaultActiveFirstOption={false}
style={autoCompleteStyle}
options={options}
filterOption={false}
onSelect={(value, option) => {
// If the autocomplete option type is NOT an entity, then render as a normal search query.
if (
option.type === EXACT_AUTOCOMPLETE_OPTION_TYPE ||
option.type === RELEVANCE_QUERY_OPTION_TYPE
) {
handleSearch(
`${filterSearchQuery(value as string)}`,
getFiltersWithQuickFilter(selectedQuickFilter),
);
analytics.event({
type: EventType.SelectAutoCompleteOption,
optionType: option.type,
} as Event);
} else {
// Navigate directly to the entity profile.
history.push(getEntityPath(option.type, value as string, entityRegistry, false, false));
setSelected('');
analytics.event({
type: EventType.SelectAutoCompleteOption,
optionType: option.type,
entityType: option.type,
entityUrn: value,
} as Event);
}
}}
onSearch={showAutoCompleteResults ? onQueryChange : undefined}
defaultValue={initialQuery || undefined}
value={selected}
onChange={(v) => setSelected(filterSearchQuery(v as string))}
dropdownStyle={{
maxHeight: 1000,
overflowY: 'visible',
position: (fixAutoComplete && 'fixed') || 'relative',
...(isShowNavBarRedesign ? { minWidth: '648px' } : {}),
}}
onDropdownVisibleChange={(isOpen) => {
if (!isOpen) {
setIsDropdownVisible(isOpen);
} else {
// set timeout so that we allow search bar to grow in width and therefore allow autocomplete to grow
setTimeout(() => {
setIsDropdownVisible(isOpen);
}, 0);
}
}}
open={isDropdownVisible}
listHeight={480}
>
<StyledSearchBar
bordered={false}
placeholder={placeholderText}
onPressEnter={() => {
handleSearch(
filterSearchQuery(searchQuery || ''),
getFiltersWithQuickFilter(selectedQuickFilter),
);
}}
style={{ ...inputStyle, color: '#fff' }}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
data-testid="search-input"
onFocus={handleFocus}
onBlur={handleBlur}
viewsEnabled={viewsEnabled}
$isShowNavBarRedesign={isShowNavBarRedesign}
allowClear={(isFocused && { clearIcon: <ClearIcon /> }) || false}
prefix={
<>
<SearchIcon
$isShowNavBarRedesign={isShowNavBarRedesign}
onClick={() => {
handleSearch(
filterSearchQuery(searchQuery || ''),
getFiltersWithQuickFilter(selectedQuickFilter),
);
}}
/>
</>
}
ref={searchInputRef}
suffix={<>{(showCommandK && !isFocused && <CommandK />) || null}</>}
$textColor={textColor}
$placeholderColor={placeholderColor}
/>
</StyledAutoComplete>
{viewsEnabled && (
<ViewSelectContainer id={V2_SEARCH_BAR_VIEWS}>
<ViewSelect />
</ViewSelectContainer>
)}
</AutoCompleteContainer>
)}
{viewsEnabled && (
<ViewSelectContainer id={V2_SEARCH_BAR_VIEWS}>
<ViewSelect />
</ViewSelectContainer>
)}
</AutoCompleteContainer>
</>
);
};