Merge pull request #5022 from bipuladh/toolbar-textfilter

Bug 1823253: Fix Textfilter issue in Filter Toolbar
openshift · May 4, 2020 · 078ff1c · 078ff1c
2 parents 48cbe67 + c94ae5f
commit 078ff1c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/catalog-source.tsx b/frontend/packages/operator-lifecycle-manager/src/components/catalog-source.tsx
@@ -472,6 +472,7 @@ export const CatalogSourceListPage: React.FC<CatalogSourceListPageProps> = (prop
     flatten={(data) => flatten({ operatorHub: props.obj, ...data })}
     ListComponent={CatalogSourceList}
     textFilter="catalog-source-name"
+    hideLabelFilter
     resources={[
       {
         isList: true,

diff --git a/frontend/public/components/factory/list-page.jsx b/frontend/public/components/factory/list-page.jsx
@@ -399,7 +399,7 @@ export const ListPage = withFallback((props) => {
   ];
 
   // Don't show row filters if props.filters were passed. The content is already filtered and the row filters will have incorrect counts.
-  const rowFilters = _.isEmpty(filters) ? props.rowFilters : null;
+  const rowFilters = _.isEmpty(filters) ? props.rowFilters : undefined;
 
   if (!namespaced && usedNamespace) {
     return <ErrorPage404 />;

diff --git a/frontend/public/components/filter-toolbar.tsx b/frontend/public/components/filter-toolbar.tsx
@@ -78,7 +78,14 @@ const getDropdownItems = (rowFilters: RowFilter[], selectedItems, data, props) =
   });
 
 const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (props) => {
-  const { rowFilters = [], data, hideNameFilter, hideLabelFilter, location } = props;
+  const {
+    rowFilters = [],
+    data,
+    hideNameFilter,
+    hideLabelFilter,
+    location,
+    textFilter = filterTypeMap[FilterType.NAME],
+  } = props;
 
   const [inputText, setInputText] = React.useState('');
   const [filterType, setFilterType] = React.useState(FilterType.NAME);
@@ -114,7 +121,7 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
     const rowFiltersFromURL: string[] = [];
     const params = new URLSearchParams(location.search);
     const q = params.get('label');
-    const name = params.get('name');
+    const name = params.get(textFilter);
     _.map(filterKeys, (f) => {
       const vals = params.get(f);
       if (vals) {
@@ -127,9 +134,10 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
 
   /* Logic for Name and Label Filter */
 
-  const applyFilter = (value: string | string[], type: FilterType) => {
-    const filter = type === FilterType.NAME ? value : { all: value };
-    props.reduxIDs.forEach((id) => props.filterList(id, filterTypeMap[type], filter));
+  const applyFilter = (input: string | string[], type: FilterType) => {
+    const filter = type === FilterType.NAME ? textFilter : filterTypeMap[FilterType.LABEL];
+    const value = type === FilterType.NAME ? input : { all: input };
+    props.reduxIDs.forEach((id) => props.filterList(id, filter, value));
   };
 
   const updateLabelFilter = (filterValues: string[]) => {
@@ -144,9 +152,9 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
 
   const updateNameFilter = (filterValue: string) => {
     if (!_.isEmpty(filterValue)) {
-      setQueryArgument('name', filterValue);
+      setQueryArgument(textFilter, filterValue);
     } else {
-      removeQueryArgument('name');
+      removeQueryArgument(textFilter);
     }
     setInputText(filterValue);
     applyFilter(filterValue, FilterType.NAME);