diff --git a/src/shared/canvas/MyData/types.ts b/src/shared/canvas/MyData/types.ts index 6ae5be1d8..94b620c6b 100644 --- a/src/shared/canvas/MyData/types.ts +++ b/src/shared/canvas/MyData/types.ts @@ -1,5 +1,5 @@ import { MenuProps } from 'antd'; -import { TType } from '../../molecules/TypeSelector/types'; +import { TType, TTypeOperator } from '../../molecules/TypeSelector/types'; export type TIssuer = 'createdBy' | 'updatedBy'; export type TDateField = 'createdAt' | 'updatedAt'; @@ -18,7 +18,7 @@ export type TFilterOptions = { sort: string[]; locate: boolean; issuer: TIssuer; - typeOperator: 'AND' | 'OR'; + typeOperator: TTypeOperator; }; export type TCurrentDate = Pick< TFilterOptions, diff --git a/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/index.tsx b/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/index.tsx index 74bbe79e1..f3b7b42f9 100644 --- a/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/index.tsx +++ b/src/shared/molecules/MyDataHeader/MyDataHeaderFilters/index.tsx @@ -46,6 +46,7 @@ const MyDataHeaderFilters = ({ { const nexus = useNexusContext(); const originTypes = useRef([]); @@ -161,15 +161,17 @@ const TypeSelector = ({ const onDeselectTypesChange = (value: any) => { const newTypes = types?.filter((item: TType) => item.value !== value); updateOptions({ + typeOperator, types: newTypes, }); - afterUpdate?.(newTypes); + afterUpdate?.(typeOperator, newTypes); }; const onClearTypesChange = () => { updateOptions({ + typeOperator, types: [], }); - afterUpdate?.([]); + afterUpdate?.('OR', []); }; const handleOnCheckType = ( @@ -182,9 +184,10 @@ const TypeSelector = ({ ? types.filter((item: TType) => item.value !== type.value) : [...(types ? types : []), type]; updateOptions({ + typeOperator, types: newTypes, }); - afterUpdate?.(newTypes); + afterUpdate?.(typeOperator, newTypes); }; const renderedTypes = typeSearchValue ? typesOptionsArray : typeOptions ?? []; const onTypeOperatorChange = ({ target: { value } }: RadioChangeEvent) => { diff --git a/src/shared/molecules/TypeSelector/types.ts b/src/shared/molecules/TypeSelector/types.ts index d041f44f0..9d8e50d9e 100644 --- a/src/shared/molecules/TypeSelector/types.ts +++ b/src/shared/molecules/TypeSelector/types.ts @@ -30,16 +30,17 @@ type TTypeSelectorStyle = { container?: React.CSSProperties; selector?: React.CSSProperties; }; +export type TTypeOperator = 'AND' | 'OR'; export type TTypeSelectorProps = { org?: string; project?: string; types?: TType[]; styles?: TTypeSelectorStyle; defaultValue?: TType[]; - typeOperator?: 'AND' | 'OR'; + typeOperator: TTypeOperator; updateOptions(options: { types?: TType[]; - typeOperator?: 'AND' | 'OR'; + typeOperator: TTypeOperator; }): void; - afterUpdate?: (types?: TType[]) => void; + afterUpdate?: (typeOperator: TTypeOperator, types?: TType[]) => void; }; diff --git a/src/subapps/dataExplorer/DataExplorer.tsx b/src/subapps/dataExplorer/DataExplorer.tsx index e0ea9da47..2261a26b7 100644 --- a/src/subapps/dataExplorer/DataExplorer.tsx +++ b/src/subapps/dataExplorer/DataExplorer.tsx @@ -12,16 +12,17 @@ import { sortColumns, usePaginatedExpandedResources, } from './DataExplorerUtils'; +import { + TType, + TTypeOperator, +} from '../../shared/molecules/TypeSelector/types'; +import TypeSelector from '../../shared/molecules/TypeSelector/TypeSelector'; import { ProjectSelector } from './ProjectSelector'; import { PredicateSelector } from './PredicateSelector'; import { DatasetCount } from './DatasetCount'; import { DataExplorerCollapsibleHeader } from './DataExplorerCollapsibleHeader'; import DateExplorerScrollArrows from './DateExplorerScrollArrows'; -import { RootState } from '../../shared/store/reducers'; -import { UpdateDataExplorerOrigin } from '../../shared/store/reducers/data-explorer'; -import { TType } from '../../shared/molecules/TypeSelector/types'; import ColumnsSelector, { TColumn } from './ColumnsSelector'; -import TypeSelector from '../../shared/molecules/TypeSelector/TypeSelector'; import './styles.less'; const $update = ( @@ -42,6 +43,7 @@ export interface DataExplorerConfiguration { selectedPath: string | null; deprecated: boolean; columns: TColumn[]; + typeOperator: TTypeOperator; } const SELECTED_COLUMNS_CACHED_KEY = 'data-explorer-selected-columns'; const SELECTED_FILTERS_CACHED_KEY = 'data-explorer-selected-filters'; @@ -83,6 +85,7 @@ const getSelectedFiltersCached = () => { showEmptyCells: parsed.showEmptyCells ?? true, pageSize: parsed.pageSize ?? 50, offset: parsed.offset ?? 0, + typeOperator: parsed.typeOperator ?? 'OR', }; } catch (e) { return null; @@ -133,6 +136,7 @@ const DataExplorer: React.FC<{}> = () => { selectedPath, deprecated, columns, + typeOperator, }, updateTableConfiguration, ] = useReducer( @@ -152,6 +156,7 @@ const DataExplorer: React.FC<{}> = () => { selectedPath: null, deprecated: false, columns: [], + typeOperator: 'OR', } ); @@ -160,6 +165,7 @@ const DataExplorer: React.FC<{}> = () => { offset, orgAndProject, deprecated, + typeOperator, types: types?.map(t => t.value), }); @@ -225,6 +231,7 @@ const DataExplorer: React.FC<{}> = () => { : undefined, types: selectedFilters.types, deprecated: selectedFilters.deprecated ?? deprecated, + typeOperator: selectedFilters.typeOperator ?? typeOperator, }); setShowMetadataColumns( selectedFilters.showMetadata ?? showMetadataColumns @@ -312,10 +319,12 @@ const DataExplorer: React.FC<{}> = () => { }} /> = () => { '--types-background-color': 'white', } as React.CSSProperties, }} - afterUpdate={types => { - updateTableConfiguration({ types }); + afterUpdate={(typeOperator, types) => { + updateTableConfiguration({ types, typeOperator }); clearSelectedColumnsCached(); updateSelectedFiltersCached({ + typeOperator, types: types && types.length > 0 ? types : undefined, }); }} diff --git a/src/subapps/dataExplorer/DataExplorerUtils.tsx b/src/subapps/dataExplorer/DataExplorerUtils.tsx index fd990e503..f4bea2718 100644 --- a/src/subapps/dataExplorer/DataExplorerUtils.tsx +++ b/src/subapps/dataExplorer/DataExplorerUtils.tsx @@ -1,11 +1,12 @@ +import { useEffect } from 'react'; import { Resource } from '@bbp/nexus-sdk'; +import { useQuery } from 'react-query'; import { useNexusContext } from '@bbp/react-nexus'; -import PromisePool from '@supercharge/promise-pool'; import { notification } from 'antd'; -import { useQuery } from 'react-query'; -import { makeOrgProjectTuple } from '../../shared/molecules/MyDataTable/MyDataTable'; import { isString } from 'lodash'; -import { useEffect } from 'react'; +import PromisePool from '@supercharge/promise-pool'; +import { makeOrgProjectTuple } from '../../shared/molecules/MyDataTable/MyDataTable'; +import { TTypeOperator } from '../../shared/molecules/TypeSelector/types'; export const usePaginatedExpandedResources = ({ pageSize, @@ -13,10 +14,14 @@ export const usePaginatedExpandedResources = ({ orgAndProject, deprecated, types, + typeOperator, }: PaginatedResourcesParams) => { const nexus = useNexusContext(); return useQuery({ - queryKey: ['data-explorer', { pageSize, offset, orgAndProject, types }], + queryKey: [ + 'data-explorer', + { pageSize, offset, orgAndProject, types, typeOperator }, + ], retry: false, queryFn: async () => { const resultWithPartialResources = await nexus.Resource.list( @@ -25,8 +30,9 @@ export const usePaginatedExpandedResources = ({ { deprecated, // @ts-ignore + typeOperator, + // @ts-ignore type: types, - typeOperator: 'or', from: offset, size: pageSize, } @@ -186,6 +192,7 @@ interface PaginatedResourcesParams { orgAndProject?: string[]; deprecated: boolean; types?: string[]; + typeOperator: TTypeOperator; } export const useTimeoutMessage = ({