f-4096/update: enable type operator in type filter in data explorer

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,

src/shared/molecules/MyDataHeader/MyDataHeaderFilters/index.tsx

@@ -46,6 +46,7 @@ const MyDataHeaderFilters = ({
       <DateFieldSelector {...{ dateField, setFilterOptions }} />
       <DateSelector {...{ dateField, setFilterOptions }} />
       <TypeSelector
+        key={'my-data-type-selector'}
         {...{
           types,
           typeOperator,

src/shared/molecules/TypeSelector/TypeSelector.tsx

@@ -118,10 +118,10 @@ const TypeSelector = ({
   project,
   types,
   styles,
-  typeOperator,
   updateOptions,
   defaultValue,
   afterUpdate,
+  typeOperator = 'OR',
 }: TTypeSelectorProps) => {
   const nexus = useNexusContext();
   const originTypes = useRef<TType[]>([]);
@@ -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) => {

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;
 };

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 = <T,>(
@@ -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,21 +319,24 @@ const DataExplorer: React.FC<{}> = () => {
               }}
             />
             <TypeSelector
+              key={'data-explorer-type-selector'}
               defaultValue={types}
               org={orgAndProject?.[0]}
               project={orgAndProject?.[1]}
               types={types}
+              typeOperator={typeOperator}
               updateOptions={updateTableConfiguration}
               styles={{
                 container: { width: '250px' },
                 selector: {
                   '--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,
                 });
               }}

src/subapps/dataExplorer/DataExplorerUtils.tsx

@@ -1,22 +1,27 @@
+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,
   offset,
   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 = ({