yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-03 14:13:06 +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 { .dropdown-option-label {
max-width: 200px; max-width: 65vw;
} }
.update-btn { .update-btn {

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

@ -14,6 +14,7 @@
import { import {
Button, Button,
Card, Card,
Col,
Divider, Divider,
Dropdown, Dropdown,
Input, Input,
@ -26,7 +27,14 @@ import {
} from 'antd'; } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import { debounce, isEmpty, isUndefined } from 'lodash'; 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 { useTranslation } from 'react-i18next';
import { ReactComponent as DropDown } from '../../assets/svg/DropDown.svg'; import { ReactComponent as DropDown } from '../../assets/svg/DropDown.svg';
import { import {
@ -141,11 +149,33 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
setSelectedOptions(selectedKeys); setSelectedOptions(selectedKeys);
}, [isDropDownOpen, selectedKeys]); }, [isDropDownOpen, selectedKeys]);
const getDropdownBody = useCallback(
(menuNode: ReactNode) => {
if (isSuggestionsLoading) {
return ( return (
<Dropdown <Row align="middle" className="p-y-sm" justify="center">
destroyPopupOnHide <Col>
data-testid={searchKey} <Loader size="small" />
dropdownRender={(menuNode) => ( </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 <Card
bodyStyle={{ padding: 0 }} bodyStyle={{ padding: 0 }}
className="custom-dropdown-render" className="custom-dropdown-render"
@ -181,19 +211,7 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
<Divider <Divider
className={classNames(showClearAllBtn ? 'm-y-0' : 'm-t-xs m-b-0')} className={classNames(showClearAllBtn ? 'm-y-0' : 'm-t-xs m-b-0')}
/> />
{isSuggestionsLoading ? ( {getDropdownBody(menuNode)}
<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"> <Space className="p-sm p-t-xss">
<Button <Button
className="update-btn" className="update-btn"
@ -212,7 +230,23 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
</Space> </Space>
</Space> </Space>
</Card> </Card>
)} ),
[
label,
debouncedOnSearch,
showClearAllBtn,
handleClear,
getDropdownBody,
handleUpdate,
handleDropdownClose,
]
);
return (
<Dropdown
destroyPopupOnHide
data-testid={searchKey}
dropdownRender={dropdownCardComponent}
key={searchKey} key={searchKey}
menu={{ items: menuOptions, onClick: handleMenuItemClick }} menu={{ items: menuOptions, onClick: handleMenuItemClick }}
open={isDropDownOpen} 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) => { export const getDropDownItems = (index: string) => {
switch (index) { switch (index) {
case SearchIndex.TABLE: case SearchIndex.TABLE:
return [...TABLE_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS]; return [...COMMON_DROPDOWN_ITEMS, ...TABLE_DROPDOWN_ITEMS];
case SearchIndex.TOPIC: case SearchIndex.TOPIC:
return [...TOPIC_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS]; return [...COMMON_DROPDOWN_ITEMS, ...TOPIC_DROPDOWN_ITEMS];
case SearchIndex.DASHBOARD: case SearchIndex.DASHBOARD:
return [...DASHBOARD_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS]; return [...COMMON_DROPDOWN_ITEMS, ...DASHBOARD_DROPDOWN_ITEMS];
case SearchIndex.PIPELINE: case SearchIndex.PIPELINE:
return [...PIPELINE_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS]; return [...COMMON_DROPDOWN_ITEMS, ...PIPELINE_DROPDOWN_ITEMS];
case SearchIndex.MLMODEL: case SearchIndex.MLMODEL:
return [ return [
...COMMON_DROPDOWN_ITEMS.filter((item) => item.key !== 'service_type'), ...COMMON_DROPDOWN_ITEMS.filter((item) => item.key !== 'service_type'),
]; ];
case SearchIndex.CONTAINER: case SearchIndex.CONTAINER:
return [...CONTAINER_DROPDOWN_ITEMS, ...COMMON_DROPDOWN_ITEMS]; return [...COMMON_DROPDOWN_ITEMS, ...CONTAINER_DROPDOWN_ITEMS];
case SearchIndex.GLOSSARY: case SearchIndex.GLOSSARY:
return [...GLOSSARY_DROPDOWN_ITEMS]; return [...GLOSSARY_DROPDOWN_ITEMS];