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

Improve: Add clear all button for filter feature in explore page (#1768)

Browse Source 
* Improve: Add clear all button for filter in explore page

* miner fix
This commit is contained in:
Shailesh Parmar 2021-12-15 18:08:43 +05:30 committed by GitHub
parent 63ec25158c
commit f6849f1069
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 94 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
openmetadata-ui/src/main/resources/ui/src/components/Explore/Explore.component.tsx
View File

@ -98,6 +98,7 @@ const Explore: React.FC<ExploreProps> = ({
const [fieldList, setFieldList] = const [fieldList, setFieldList] =
useState<Array<{ name: string; value: string }>>(tableSortingFields); useState<Array<{ name: string; value: string }>>(tableSortingFields);
const [isEntityLoading, setIsEntityLoading] = useState(true); const [isEntityLoading, setIsEntityLoading] = useState(true);
const [isFilterSelected, setIsFilterSelected] = useState(false);
const [connectionError] = useState(error.includes('Connection refused')); const [connectionError] = useState(error.includes('Connection refused'));
const isMounting = useRef(true); const isMounting = useRef(true);
const forceSetAgg = useRef(false); const forceSetAgg = useRef(false);
@ -114,6 +115,7 @@ const Explore: React.FC<ExploreProps> = ({
if (filterType.includes(selectedFilter)) { if (filterType.includes(selectedFilter)) {
return { ...prevState }; return { ...prevState };
} }
setIsFilterSelected(true);
return { return {
...prevState, ...prevState,
@ -127,29 +129,31 @@ const Explore: React.FC<ExploreProps> = ({
const filter = filters[type]; const filter = filters[type];
const index = filter.indexOf(selectedFilter); const index = filter.indexOf(selectedFilter);
filter.splice(index, 1); filter.splice(index, 1);
setFilters((prevState) => ({ ...prevState, [type]: filter })); setFilters((prevState) => {
const selectedFilterCount = Object.values(prevState).reduce(
(count, currentValue) => {
return count + currentValue.length;
},
0
);
setIsFilterSelected(selectedFilterCount >= 1);
return { ...prevState, [type]: filter };
});
} }
}; };
const onSelectAllFilterHandler = ( const onClearFilterHandler = (type: string[]) => {
type: keyof FilterObject,
filters: Array<string>
) => {
setFilters((prevFilters) => { setFilters((prevFilters) => {
return { const updatedFilter = type.reduce((filterObj, type) => {
...prevFilters, return { ...filterObj, [type]: [] };
...getQueryParam(location.search), }, {});
[type]: filters, setIsFilterSelected(false);
};
});
};
const onClearFilterHandler = (type: keyof FilterObject) => {
setFilters((prevFilters) => {
return { return {
...prevFilters, ...prevFilters,
...getQueryParam(location.search), ...getQueryParam(location.search),
[type]: [], ...updatedFilter,
}; };
}); });
}; };
@ -348,9 +352,7 @@ const Explore: React.FC<ExploreProps> = ({
}; };
const resetFilters = () => { const resetFilters = () => {
visibleFilters.forEach((type) => { onClearFilterHandler(visibleFilters);
onClearFilterHandler(type);
});
}; };
const getTabCount = (index: string, isActive: boolean, className = '') => { const getTabCount = (index: string, isActive: boolean, className = '') => {
@ -383,31 +385,42 @@ const Explore: React.FC<ExploreProps> = ({
const getTabs = () => { const getTabs = () => {
return ( return (
<div className="tw-mb-5"> <div className="tw-mb-5">
<nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-mx-9 tw-pl-72 xl:tw-pr-64 lg:tw-pr-0 tw-justify-between"> <nav className="tw-flex tw-flex-row tw-gh-tabs-container tw-mx-9 xl:tw-pr-64 lg:tw-pr-0">
<div> <div className="tw-w-3/12">
{tabsInfo.map((tabDetail, index) => ( {isFilterSelected && (
<button <p
className={`tw-pb-2 tw-pr-6 tw-gh-tabs ${getActiveTabClass( className="link-text tw-text-sm tw-text-grey-body tw-text-right tw-mt-5 tw-mr-12"
tabDetail.tab onClick={resetFilters}>
)}`} Clear All
data-testid="tab" </p>
key={index} )}
onClick={() => { </div>
onTabChange(tabDetail.tab); <div className="tw-flex tw-justify-between tw-w-9/12">
}}> <div className="tw--ml-2.5">
<SVGIcons {tabsInfo.map((tabDetail, index) => (
alt="icon" <button
className="tw-h-4 tw-w-4 tw-mr-2" className={`tw-pb-2 tw-pr-6 tw-gh-tabs ${getActiveTabClass(
icon={tabDetail.icon} tabDetail.tab
/> )}`}
{tabDetail.label} data-testid="tab"
<span className="tw-pl-2"> key={index}
{getTabCount(tabDetail.index, tabDetail.tab === currentTab)} onClick={() => {
</span> onTabChange(tabDetail.tab);
</button> }}>
))} <SVGIcons
alt="icon"
className="tw-h-4 tw-w-4 tw-mr-2"
icon={tabDetail.icon}
/>
{tabDetail.label}
<span className="tw-pl-2">
{getTabCount(tabDetail.index, tabDetail.tab === currentTab)}
</span>
</button>
))}
</div>
{getSortingElements()}
</div> </div>
{getSortingElements()}
</nav> </nav>
</div> </div>
); );
@ -520,8 +533,6 @@ const Explore: React.FC<ExploreProps> = ({
<FacetFilter <FacetFilter
aggregations={getAggrWithDefaultValue(aggregations, visibleFilters)} aggregations={getAggrWithDefaultValue(aggregations, visibleFilters)}
filters={getFacetedFilter()} filters={getFacetedFilter()}
onClearFilter={(value) => onClearFilterHandler(value)}
onSelectAllFilter={onSelectAllFilterHandler}
onSelectHandler={handleSelectedFilter} onSelectHandler={handleSelectedFilter}
/> />
)} )}

58
openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetFilter.tsx
View File

@ -148,30 +148,40 @@ const FacetFilter: FunctionComponent<FacetProp> = ({
} }
</h6> </h6>
<div className="tw-flex tw-mt-1.5"> <div className="tw-flex tw-mt-1.5">
<span {onSelectAllFilter && (
className="link-text tw-text-xs" <span
onClick={() => { className="link-text tw-text-xs"
if (isSelectAllFilter(aggregation)) { onClick={() => {
onSelectAllFilter( if (isSelectAllFilter(aggregation)) {
lowerCase(aggregation.title) as keyof FilterObject, onSelectAllFilter(
aggregation.buckets.map((b) => b.key) lowerCase(
); aggregation.title
} ) as keyof FilterObject,
}}> aggregation.buckets.map((b) => b.key)
Select All );
</span> }
<span className="tw-text-xs tw-px-2">|</span> }}>
<span Select All
className="link-text tw-text-xs tw-text-grey-muted" </span>
onClick={() => { )}
if (isClearFilter(aggregation)) { {onClearFilter && (
onClearFilter( <>
lowerCase(aggregation.title) as keyof FilterObject <span className="tw-text-xs tw-px-2">|</span>
); <span
} className="link-text tw-text-xs tw-text-grey-muted"
}}> onClick={() => {
Deselect All if (isClearFilter(aggregation)) {
</span> onClearFilter(
lowerCase(
aggregation.title
) as keyof FilterObject
);
}
}}>
Deselect All
</span>
</>
)}
</div> </div>
</div> </div>
<div className="sidebar-my-data-holder mt-2 mb-3"> <div className="sidebar-my-data-holder mt-2 mb-3">

7
openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/FacetTypes.ts
View File

@ -21,8 +21,11 @@ export type FacetProp = {
type: keyof FilterObject type: keyof FilterObject
) => void; ) => void;
filters: FilterObject; filters: FilterObject;
onClearFilter: (value: keyof FilterObject) => void; onClearFilter?: (value: keyof FilterObject) => void;
onSelectAllFilter: (type: keyof FilterObject, filters: Array<string>) => void; onSelectAllFilter?: (
type: keyof FilterObject,
filters: Array<string>
) => void;
}; };
export type FilterContainerProp = { export type FilterContainerProp = {