Merge pull request #13233 from upalatucci/filter-toolbar-additional-search

OCPBUGS-30077: Add additional search filters in the toolbar

Author: openshift-merge-bot[bot]

frontend/packages/console-dynamic-plugin-sdk/docs/api.md

@@ -840,15 +840,15 @@ Component that generates filter for list page.
   // See implementation for more details on RowFilter and FilterValue types
   const [staticData, filteredData, onFilterChange] = useListPageFilter(
     data,
-    rowFilters,
+    [...rowFilters, ...searchFilters],
     staticFilters,
   );
   // ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
   return (
     <>
-      <ListPageHeader .../>
+      <ListPageHeader />
       <ListPagBody>
-        <ListPageFilter data={staticData} onFilterChange={onFilterChange} />
+        <ListPageFilter data={staticData} onFilterChange={onFilterChange} rowFilters={rowFilters} rowSearchFilters={searchFilters} />
         <List data={filteredData} />
       </ListPageBody>
     </>
@@ -877,6 +877,7 @@ Component that generates filter for list page.
 | `columnLayout` | (optional) column layout object |
 | `hideColumnManagement` | (optional) flag to hide the column management |
 | `nameFilter` | (optional) a unique name key for name filter. This may be useful if there are multiple `ListPageFilter` components rendered at once. |
+| `rowSearchFilters` | (optional) An array of RowSearchFilters elements that define search text filters added on top of Name and Label filters |
 
 
 

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -281,20 +281,21 @@ export const ListPageCreateDropdown: React.FC<ListPageCreateDropdownProps> = req
  * @param {ColumnLayout} [columnLayout] -  (optional) column layout object
  * @param {boolean} [hideColumnManagement] -  (optional) flag to hide the column management
  * @param {string} [nameFilter] - (optional) a unique name key for name filter. This may be useful if there are multiple `ListPageFilter` components rendered at once.
+ * @param {RowSearchFilter[]} [rowSearchFilters] - (optional) An array of RowSearchFilters elements that define search text filters added on top of Name and Label filters
  * @example
  * ```tsx
  *   // See implementation for more details on RowFilter and FilterValue types
  *   const [staticData, filteredData, onFilterChange] = useListPageFilter(
  *     data,
- *     rowFilters,
+ *     [...rowFilters, ...searchFilters],
  *     staticFilters,
  *   );
  *   // ListPageFilter updates filter state based on user interaction and resulting filtered data can be rendered in an independent component.
  *   return (
  *     <>
- *       <ListPageHeader .../>
+ *       <ListPageHeader />
  *       <ListPagBody>
- *         <ListPageFilter data={staticData} onFilterChange={onFilterChange} />
+ *         <ListPageFilter data={staticData} onFilterChange={onFilterChange} rowFilters={rowFilters} rowSearchFilters={searchFilters} />
  *         <List data={filteredData} />
  *       </ListPageBody>
  *     </>

frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts

@@ -401,6 +401,12 @@ export type RowReducerFilter<R = any> = RowFilterBase<R> & {
 
 export type RowFilter<R = any> = RowMatchFilter<R> | RowReducerFilter<R>;
 
+export type RowSearchFilter<R = any> = Omit<RowFilterBase<R>, 'items' | 'defaultSelected'> & {
+  placeholder?: string;
+};
+
+export type AnyRowFilter<R = any> = RowFilter<R> | RowSearchFilter<R>;
+
 export type ColumnLayout = {
   id: string;
   columns: ManagedColumn[];
@@ -420,7 +426,7 @@ export type OnFilterChange = (type: string, value: FilterValue) => void;
 export type ListPageFilterProps<D = any> = {
   data: D;
   loaded: boolean;
-  rowFilters?: RowFilter[];
+  rowFilters?: RowFilter<D>[];
   labelFilter?: string;
   labelPath?: string;
   nameFilterTitle?: string;
@@ -432,11 +438,12 @@ export type ListPageFilterProps<D = any> = {
   onFilterChange: OnFilterChange;
   hideColumnManagement?: boolean;
   nameFilter?: string;
+  rowSearchFilters?: RowSearchFilter<D>[];
 };
 
 export type UseListPageFilter = <D, R>(
   data: D[],
-  rowFilters?: RowFilter<R>[],
+  rowFilters?: AnyRowFilter<R>[],
   staticFilters?: { [key: string]: FilterValue },
 ) => [D[], D[], OnFilterChange];
 

frontend/public/components/factory/ListPage/ListPageFilter.tsx

@@ -19,6 +19,7 @@ const ListPageFilter: React.FC<ListPageFilterProps> = ({
   onFilterChange,
   hideColumnManagement,
   nameFilter,
+  rowSearchFilters,
 }) =>
   loaded &&
   !_.isEmpty(data) && (
@@ -36,6 +37,7 @@ const ListPageFilter: React.FC<ListPageFilterProps> = ({
       columnLayout={columnLayout}
       hideColumnManagement={hideColumnManagement}
       textFilter={nameFilter}
+      rowSearchFilters={rowSearchFilters}
     />
   );
 

frontend/public/components/factory/table-filters.ts

@@ -2,7 +2,7 @@ import * as _ from 'lodash-es';
 import * as fuzzy from 'fuzzysearch';
 import { nodeStatus, volumeSnapshotStatus } from '@console/app/src/status';
 import { getNodeRoles, getLabelsAsString } from '@console/shared';
-import { Alert, FilterValue, RowFilter, Rule } from '@console/dynamic-plugin-sdk';
+import { Alert, AnyRowFilter, FilterValue, Rule } from '@console/dynamic-plugin-sdk';
 import { routeStatus } from '../routes';
 import { secretTypeFilterReducer } from '../secret';
 import { roleType } from '../RBAC';
@@ -235,13 +235,16 @@ export const tableFilters = (isExactSearch: boolean): FilterMap => {
     },
   };
 };
-const rowFiltersToFilterFuncs = (rowFilters: RowFilter[]): FilterMap => {
+const rowFiltersToFilterFuncs = (rowFilters: AnyRowFilter[]): FilterMap => {
   return (rowFilters || [])
     .filter((f) => f.type && _.isFunction(f.filter))
     .reduce((acc, f) => ({ ...acc, [f.type]: f.filter }), {} as FilterMap);
 };
 
-export const getAllTableFilters = (rowFilters: RowFilter[], isExactMatch?: boolean): FilterMap => ({
+export const getAllTableFilters = (
+  rowFilters: AnyRowFilter[],
+  isExactMatch?: boolean,
+): FilterMap => ({
   ...tableFilters(isExactMatch),
   ...rowFiltersToFilterFuncs(rowFilters),
 });

frontend/public/components/filter-toolbar.tsx

@@ -29,6 +29,7 @@ import {
   ColumnLayout,
   OnFilterChange,
   FilterValue,
+  RowSearchFilter,
 } from '@console/dynamic-plugin-sdk';
 import {
   Dropdown as DropdownInternal,
@@ -43,6 +44,7 @@ import { TextFilter } from './factory';
 import { filterList } from '@console/dynamic-plugin-sdk/src/app/k8s/actions/k8s';
 import useRowFilterFix from './useRowFilterFix';
 import useLabelSelectionFix from './useLabelSelectionFix';
+import useSearchFilters from './useSearchFilters';
 
 /**
  * Housing both the row filter and name/label filter in the same file.
@@ -82,6 +84,7 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
   reduxIDs,
   onFilterChange,
   labelPath,
+  rowSearchFilters = [],
 }) => {
   const dispatch = useDispatch();
   const location = useLocation();
@@ -90,36 +93,61 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
 
   const translatedNameFilterTitle = nameFilterTitle ?? t('public~Name');
 
+  const { searchFiltersObject, searchFiltersState, changeSearchFiltersState } = useSearchFilters(
+    rowSearchFilters,
+    uniqueFilterName,
+  );
+
   const translateFilterType = (value: string) => {
     switch (value) {
       case 'Name':
         return translatedNameFilterTitle;
       case 'Label':
         return t('public~Label');
       default:
-        return value;
+        return searchFiltersObject?.[value]?.filterGroupName || value;
     }
   };
-  const filterDropdownItems = {
-    NAME: translatedNameFilterTitle,
-    LABEL: t('public~Label'),
+
+  const filterDropdownItems: Record<string, string> = {
+    ...Object.keys(searchFiltersObject || {}).reduce(
+      (acc, key) => ({
+        ...acc,
+        [key]: searchFiltersObject[key].filterGroupName,
+      }),
+      {},
+    ),
   };
 
+  if (!hideLabelFilter && !hideNameLabelFilters) {
+    filterDropdownItems.LABEL = t('public~Label');
+  }
+
+  if (!hideNameLabelFilters) {
+    filterDropdownItems.NAME = translatedNameFilterTitle;
+  }
+
   // use unique name only when only when more than 1 table is in the view
   const nameFilterQueryArgumentKey = uniqueFilterName
     ? `${uniqueFilterName}-${textFilter}`
     : textFilter;
   const labelFilterQueryArgumentKey = uniqueFilterName
     ? `${uniqueFilterName}-${labelFilter}`
     : labelFilter;
+
   const params = new URLSearchParams(location.search);
-  const [filterType, setFilterType] = React.useState(FilterType.NAME);
   const [isOpen, setOpen] = React.useState(false);
   const [nameInputText, setNameInputText] = React.useState(
     params.get(nameFilterQueryArgumentKey) ?? '',
   );
   const [labelInputText, setLabelInputText] = React.useState('');
 
+  const [filterType, setFilterType] = React.useState(
+    nameInputText || !hideNameLabelFilters
+      ? FilterType.NAME
+      : Object.keys(searchFiltersState)?.[0] || rowSearchFilters?.[0]?.type,
+  );
+
   // Generate rowFilter items and counts. Memoize to minimize re-renders.
   const generatedRowFilters = useDeepCompareMemoize(
     (rowFilters ?? []).map((rowFilter) => ({
@@ -213,6 +241,27 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
     [onFilterChange, reduxIDs, dispatch],
   );
 
+  const applyTextFilter = React.useCallback(
+    (value: string, filterName: string) => {
+      applyFilters(filterName, { selected: [value] });
+    },
+    [applyFilters],
+  );
+
+  const searchRowFilters = rowSearchFilters.map((searchFilter) => (
+    <ToolbarFilter
+      key={searchFilter.type}
+      categoryName={translateFilterType(searchFilter.type)}
+      deleteChip={() => {
+        changeSearchFiltersState(searchFilter.type, '');
+        applyTextFilter('', searchFilter.type);
+      }}
+      chips={searchFiltersState[searchFilter.type] ? [searchFiltersState[searchFilter.type]] : []}
+    >
+      <></>
+    </ToolbarFilter>
+  ));
+
   const applyRowFilter = (selected: string[]) => {
     generatedRowFilters?.forEach?.(({ items, type }) => {
       const all = items?.map?.(({ id }) => id) ?? [];
@@ -250,6 +299,7 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
   );
 
   const debounceApplyNameFilter = useDebounceCallback(applyNameFilter, 250);
+  const debounceApplyTextFilter = useDebounceCallback(applyTextFilter, 250);
 
   const clearAll = () => {
     updateRowFilterSelected(selectedRowFilters);
@@ -261,6 +311,13 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
       setLabelInputText('');
       applyLabelFilters([]);
     }
+
+    if (rowSearchFilters.length > 0) {
+      Object.keys(searchFiltersState).forEach((key) => {
+        changeSearchFiltersState(key, '');
+        applyTextFilter('', key);
+      });
+    }
   };
 
   // Run once on mount to apply filters from query params
@@ -271,6 +328,12 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
     if (!hideNameLabelFilters) {
       applyFilters(textFilter, { selected: [nameInputText] });
     }
+
+    if (rowSearchFilters.length > 0) {
+      Object.keys(searchFiltersState).forEach((key) => {
+        applyFilters(key, { selected: [searchFiltersState[key]] });
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -287,6 +350,9 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [rowFiltersInitialized, labelSelectionInitialized]);
 
+  const showSearchFilters = Object.keys(filterDropdownItems).length !== 0;
+
+  const showSearchFiltersDropdown = Object.keys(filterDropdownItems).length > 1;
   return (
     <Toolbar
       className="co-toolbar-no-padding pf-m-toggle-group-container"
@@ -347,8 +413,9 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
                 )}
               </ToolbarItem>
             )}
-            {!hideNameLabelFilters && (
+            {showSearchFilters && (
               <ToolbarItem className="co-filter-search--full-width">
+                {searchRowFilters}
                 <ToolbarFilter
                   deleteChipGroup={() => {
                     setLabelInputText('');
@@ -370,15 +437,15 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
                     categoryName={translatedNameFilterTitle}
                   >
                     <div className="pf-v5-c-input-group co-filter-group">
-                      {!hideLabelFilter && (
+                      {showSearchFiltersDropdown && (
                         <DropdownInternal
                           items={filterDropdownItems}
-                          onChange={(type) => setFilterType(FilterType[type])}
+                          onChange={(type) => setFilterType(FilterType[type] || type)}
                           selectedKey={filterType}
                           title={translateFilterType(filterType)}
                         />
                       )}
-                      {filterType === FilterType.LABEL ? (
+                      {filterType === FilterType.LABEL && (
                         <AutocompleteInput
                           className="co-text-node"
                           onSuggestionSelect={(selected) => {
@@ -391,7 +458,9 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
                           data={data}
                           labelPath={labelPath}
                         />
-                      ) : (
+                      )}
+
+                      {filterType === FilterType.NAME && (
                         <TextFilter
                           data-test="name-filter-input"
                           value={nameInputText}
@@ -402,6 +471,18 @@ export const FilterToolbar: React.FC<FilterToolbarProps> = ({
                           placeholder={nameFilterPlaceholder ?? t('public~Search by name...')}
                         />
                       )}
+
+                      {searchFiltersObject[filterType] && (
+                        <TextFilter
+                          data-test={`${filterType}-filter-input`}
+                          value={searchFiltersState[filterType]}
+                          onChange={(_event, value: string) => {
+                            changeSearchFiltersState(filterType, value);
+                            debounceApplyTextFilter(value, filterType);
+                          }}
+                          placeholder={searchFiltersObject[filterType].placeholder}
+                        />
+                      )}
                     </div>
                   </ToolbarFilter>
                 </ToolbarFilter>
@@ -471,6 +552,7 @@ type FilterToolbarProps = {
   // Used when multiple tables are in the same page
   uniqueFilterName?: string;
   onFilterChange?: OnFilterChange;
+  rowSearchFilters?: RowSearchFilter[];
 };
 
 FilterToolbar.displayName = 'FilterToolbar';