yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-31 04:14:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Increased the maximum width of the advanced search quick dropdown (#11117)

Browse Source 
Brought common quick filters in the front for all the tabs
This commit is contained in:
Aniket Katkar 2023-04-19 10:05:33 +05:30 committed by GitHub
parent 463f242d6b
commit 32f18449e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 109 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.less
View File

@ -34,7 +34,7 @@
}
.dropdown-option-label {
max-width: 200px;
max-width: 65vw;
}
.update-btn {

172
openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx
View File

@ -14,6 +14,7 @@
import {
Button,
Card,
Col,
Divider,
Dropdown,
Input,
@ -26,7 +27,14 @@ import {
} from 'antd';
import classNames from 'classnames';
import { debounce, isEmpty, isUndefined } from 'lodash';
import React, { FC, useEffect, useMemo, useState } from 'react';
import React, {
FC,
ReactNode,
useCallback,
useEffect,
useMemo,
useState,
} from 'react';
import { useTranslation } from 'react-i18next';
import { ReactComponent as DropDown } from '../../assets/svg/DropDown.svg';
import {
@ -141,78 +149,104 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
setSelectedOptions(selectedKeys);
}, [isDropDownOpen, selectedKeys]);
const getDropdownBody = useCallback(
(menuNode: ReactNode) => {
if (isSuggestionsLoading) {
return (
<Row align="middle" className="p-y-sm" justify="center">
<Col>
<Loader size="small" />
</Col>
</Row>
);
}
return options.length > 0 || selectedOptions.length > 0 ? (
menuNode
) : (
<Row align="middle" className="m-y-sm" justify="center">
<Col>
<Typography.Text>{t('message.no-data-available')}</Typography.Text>
</Col>
</Row>
);
},
[isSuggestionsLoading, options, selectedOptions]
);
const dropdownCardComponent = useCallback(
(menuNode: ReactNode) => (
<Card
bodyStyle={{ padding: 0 }}
className="custom-dropdown-render"
data-testid="drop-down-menu">
<Space direction="vertical" size={0}>
<div className="p-t-sm p-x-sm">
<Input
autoFocus
data-testid="search-input"
placeholder={`${t('label.search-entity', {
entity: label,
})}...`}
onChange={(e) => {
const { value } = e.target;
debouncedOnSearch(value);
}}
/>
</div>
{showClearAllBtn && (
<>
<Divider className="m-t-xs m-b-0" />
<Button
className="p-0 m-l-sm"
data-testid="clear-button"
type="link"
onClick={handleClear}>
{t('label.clear-entity', {
entity: t('label.all'),
})}
</Button>
</>
)}
<Divider
className={classNames(showClearAllBtn ? 'm-y-0' : 'm-t-xs m-b-0')}
/>
{getDropdownBody(menuNode)}
<Space className="p-sm p-t-xss">
<Button
className="update-btn"
data-testid="update-btn"
size="small"
onClick={handleUpdate}>
{t('label.update')}
</Button>
<Button
data-testid="close-btn"
size="small"
type="link"
onClick={handleDropdownClose}>
{t('label.close')}
</Button>
</Space>
</Space>
</Card>
),
[
label,
debouncedOnSearch,
showClearAllBtn,
handleClear,
getDropdownBody,
handleUpdate,
handleDropdownClose,
]
);
return (
<Dropdown
destroyPopupOnHide
data-testid={searchKey}
dropdownRender={(menuNode) => (
<Card
bodyStyle={{ padding: 0 }}
className="custom-dropdown-render"
data-testid="drop-down-menu">
<Space direction="vertical" size={0}>
<div className="p-t-sm p-x-sm">
<Input
autoFocus
data-testid="search-input"
placeholder={`${t('label.search-entity', {
entity: label,
})}...`}
onChange={(e) => {
const { value } = e.target;
debouncedOnSearch(value);
}}
/>
</div>
{showClearAllBtn && (
<>
<Divider className="m-t-xs m-b-0" />
<Button
className="p-0 m-l-sm"
data-testid="clear-button"
type="link"
onClick={handleClear}>
{t('label.clear-entity', {
entity: t('label.all'),
})}
</Button>
</>
)}
<Divider
className={classNames(showClearAllBtn ? 'm-y-0' : 'm-t-xs m-b-0')}
/>
{isSuggestionsLoading ? (
<Row align="middle" className="p-y-sm" justify="center">
<Loader size="small" />
</Row>
) : options.length > 0 || selectedOptions.length > 0 ? (
menuNode
) : (
<Row className="m-y-sm" justify="center">
<Typography.Text>
{t('message.no-data-available')}
</Typography.Text>
</Row>
)}
<Space className="p-sm p-t-xss">
<Button
className="update-btn"
data-testid="update-btn"
size="small"
onClick={handleUpdate}>
{t('label.update')}
</Button>
<Button
data-testid="close-btn"
size="small"
type="link"
onClick={handleDropdownClose}>
{t('label.close')}
</Button>
</Space>
</Space>
</Card>
)}
dropdownRender={dropdownCardComponent}
key={searchKey}
menu={{ items: menuOptions, onClick: handleMenuItemClick }}
open={isDropDownOpen}

10
openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx
View File

@ -47,23 +47,23 @@ import SVGIcons, { Icons } from './SvgUtils';
export const getDropDownItems = (index: string) => {
switch (index) {
case SearchIndex.TABLE:
return [...TABLE_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
return [...COMMON_DROPDOWN_ITEMS, ...TABLE_DROPDOWN_ITEMS];
case SearchIndex.TOPIC:
return [...TOPIC_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
return [...COMMON_DROPDOWN_ITEMS, ...TOPIC_DROPDOWN_ITEMS];
case SearchIndex.DASHBOARD:
return [...DASHBOARD_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
return [...COMMON_DROPDOWN_ITEMS, ...DASHBOARD_DROPDOWN_ITEMS];
case SearchIndex.PIPELINE:
return [...PIPELINE_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
return [...COMMON_DROPDOWN_ITEMS, ...PIPELINE_DROPDOWN_ITEMS];
case SearchIndex.MLMODEL:
return [
...COMMON_DROPDOWN_ITEMS.filter((item) => item.key !== 'service_type'),
];
case SearchIndex.CONTAINER:
return [...CONTAINER_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS];
return [...COMMON_DROPDOWN_ITEMS, ...CONTAINER_DROPDOWN_ITEMS];
case SearchIndex.GLOSSARY:
return [...GLOSSARY_DROPDOWN_ITEMS];