Replace hideNameFilter with hideToolbar

openshift · May 18, 2020 · 53723e1 · 53723e1
1 parent cd79a7b
commit 53723e1
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 89 deletions.
diff --git a/frontend/packages/container-security/src/components/image-manifest-vuln.tsx b/frontend/packages/container-security/src/components/image-manifest-vuln.tsx
@@ -320,8 +320,7 @@ export const ImageManifestVulnPage: React.FC<ImageManifestVulnPageProps> = (prop
       title="Image Manifest Vulnerabilities"
       canCreate={false}
       showTitle
-      hideNameFilter
-      hideLabelFilter
+      hideToolbar
       ListComponent={ImageManifestVulnList}
     />
   );

diff --git a/frontend/packages/dev-console/src/components/custom-resource-list/CustomResourceList.tsx b/frontend/packages/dev-console/src/components/custom-resource-list/CustomResourceList.tsx
@@ -72,7 +72,6 @@ const CustomResourceList: React.FC<CustomResourceListProps> = ({
           rowFilters={rowFilters}
           data={listItems}
           textFilter={textFilter}
-          hideNameFilter={false}
           hideLabelFilter
           reduxIDs={[]}
         />

diff --git a/frontend/public/components/factory/list-page.jsx b/frontend/public/components/factory/list-page.jsx
@@ -58,7 +58,7 @@ export const TextFilter = (props) => {
 TextFilter.displayName = 'TextFilter';
 
 // TODO (jon) make this into "withListPageFilters" HOC
-/** @augments {React.PureComponent<{ListComponent: React.ComponentType<any>, kinds: string[], filters?:any, flatten?: function, data?: any[], rowFilters?: any[], hideNameFilter?: boolean, hideLabelFilter?: boolean }>} */
+/** @augments {React.PureComponent<{ListComponent: React.ComponentType<any>, kinds: string[], filters?:any, flatten?: function, data?: any[], rowFilters?: any[], hideToolbar?: boolean, hideLabelFilter?: boolean }>} */
 export class ListPageWrapper_ extends React.PureComponent {
   render() {
     const {
@@ -67,7 +67,7 @@ export class ListPageWrapper_ extends React.PureComponent {
       reduxIDs,
       rowFilters,
       textFilter,
-      hideNameFilter,
+      hideToolbar,
       hideLabelFilter,
     } = this.props;
     const data = flatten ? flatten(this.props.resources) : [];
@@ -77,7 +77,7 @@ export class ListPageWrapper_ extends React.PureComponent {
         data={data}
         reduxIDs={reduxIDs}
         textFilter={textFilter}
-        hideNameFilter={hideNameFilter}
+        hideToolbar={hideToolbar}
         hideLabelFilter={hideLabelFilter}
         {...this.props}
       />
@@ -104,7 +104,7 @@ ListPageWrapper_.propTypes = {
   rowFilters: PropTypes.array,
   staticFilters: PropTypes.array,
   customData: PropTypes.any,
-  hideNameFilter: PropTypes.bool,
+  hideToolbar: PropTypes.bool,
   hideLabelFilter: PropTypes.bool,
 };
 
@@ -307,7 +307,7 @@ FireMan_.propTypes = {
   title: PropTypes.string,
 };
 
-/** @type {React.SFC<{ListComponent: React.ComponentType<any>, kind: string, helpText?: any, namespace?: string, filterLabel?: string, textFilter?: string, title?: string, showTitle?: boolean, rowFilters?: any[], selector?: any, fieldSelector?: string, canCreate?: boolean, createButtonText?: string, createProps?: any, mock?: boolean, badge?: React.ReactNode, createHandler?: any, hideNameFilter?: boolean, hideLabelFilter?: boolean, customData?: any} >} */
+/** @type {React.SFC<{ListComponent: React.ComponentType<any>, kind: string, helpText?: any, namespace?: string, filterLabel?: string, textFilter?: string, title?: string, showTitle?: boolean, rowFilters?: any[], selector?: any, fieldSelector?: string, canCreate?: boolean, createButtonText?: string, createProps?: any, mock?: boolean, badge?: React.ReactNode, createHandler?: any, hideToolbar?: boolean, hideLabelFilter?: boolean, customData?: any} >} */
 export const ListPage = withFallback((props) => {
   const {
     autoFocus,
@@ -332,7 +332,7 @@ export const ListPage = withFallback((props) => {
     textFilter,
     match,
     badge,
-    hideNameFilter,
+    hideToolbar,
     hideLabelFilter,
   } = props;
   let { createProps } = props;
@@ -398,15 +398,15 @@ export const ListPage = withFallback((props) => {
       textFilter={textFilter}
       title={title}
       badge={badge}
-      hideNameFilter={hideNameFilter}
+      hideToolbar={hideToolbar}
       hideLabelFilter={hideLabelFilter}
     />
   );
 }, ErrorBoundaryFallback);
 
 ListPage.displayName = 'ListPage';
 
-/** @type {React.SFC<{canCreate?: boolean, createButtonText?: string, createProps?: any, createAccessReview?: Object, flatten?: Function, title?: string, label?: string, hideTextFilter?: boolean, showTitle?: boolean, helpText?: any, filterLabel?: string, textFilter?: string, rowFilters?: any[], resources: any[], ListComponent: React.ComponentType<any>, namespace?: string, customData?: any, badge?: React.ReactNode, hideNameFilter?: boolean, hideLabelFilter?: boolean >} */
+/** @type {React.SFC<{canCreate?: boolean, createButtonText?: string, createProps?: any, createAccessReview?: Object, flatten?: Function, title?: string, label?: string, hideTextFilter?: boolean, showTitle?: boolean, helpText?: any, filterLabel?: string, textFilter?: string, rowFilters?: any[], resources: any[], ListComponent: React.ComponentType<any>, namespace?: string, customData?: any, badge?: React.ReactNode, hideToolbar?: boolean, hideLabelFilter?: boolean >} */
 export const MultiListPage = (props) => {
   const {
     autoFocus,
@@ -428,7 +428,7 @@ export const MultiListPage = (props) => {
     title,
     customData,
     badge,
-    hideNameFilter,
+    hideToolbar,
     hideLabelFilter,
   } = props;
 
@@ -464,7 +464,7 @@ export const MultiListPage = (props) => {
           rowFilters={rowFilters}
           staticFilters={staticFilters}
           customData={customData}
-          hideNameFilter={hideNameFilter}
+          hideToolbar={hideToolbar}
           hideLabelFilter={hideLabelFilter}
         />
       </Firehose>

diff --git a/frontend/public/components/filter-toolbar.tsx b/frontend/public/components/filter-toolbar.tsx
@@ -80,7 +80,7 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
   const {
     rowFilters = [],
     data,
-    hideNameFilter,
+    hideToolbar,
     hideLabelFilter,
     location,
     textFilter = filterTypeMap[FilterType.NAME],
@@ -218,12 +218,8 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
 
   const clearAll = () => {
     updateRowFilterSelected(selectedRowFilters);
-    if (!hideNameFilter) {
-      updateNameFilter('');
-    }
-    if (!hideLabelFilter) {
-      updateLabelFilter([]);
-    }
+    updateNameFilter('');
+    updateLabelFilter([]);
   };
 
   // Initial URL parsing
@@ -242,69 +238,69 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
   const dropdownItems = getDropdownItems(rowFilters, selectedRowFilters, data, props);
 
   return (
-    <DataToolbar id="filter-toolbar" clearAllFilters={clearAll}>
-      <DataToolbarContent>
-        {rowFilters.length > 0 && (
-          <DataToolbarItem>
-            {_.reduce(
-              Object.keys(filters),
-              (acc, key) => (
-                <DataToolbarFilter
-                  key={key}
-                  chips={_.intersection(selectedRowFilters, filters[key]).map((item) => {
-                    return { key: item, node: filtersNameMap[item] };
-                  })}
-                  deleteChip={(filter, chip: DataToolbarChip) =>
-                    updateRowFilterSelected([chip.key])
-                  }
-                  categoryName={key}
-                  deleteChipGroup={() => clearAllRowFilter(key)}
-                >
-                  {acc}
-                </DataToolbarFilter>
-              ),
-              <Dropdown
-                dropdownItems={dropdownItems}
-                onSelect={onRowFilterSelect}
-                isOpen={isOpen}
-                toggle={
-                  <DropdownToggle
-                    data-test-id="filter-dropdown-toggle"
-                    onToggle={() => setOpen(!isOpen)}
-                    iconComponent={CaretDownIcon}
+    !hideToolbar && (
+      <DataToolbar id="filter-toolbar" clearAllFilters={clearAll}>
+        <DataToolbarContent>
+          {rowFilters.length > 0 && (
+            <DataToolbarItem>
+              {_.reduce(
+                Object.keys(filters),
+                (acc, key) => (
+                  <DataToolbarFilter
+                    key={key}
+                    chips={_.intersection(selectedRowFilters, filters[key]).map((item) => {
+                      return { key: item, node: filtersNameMap[item] };
+                    })}
+                    deleteChip={(filter, chip: DataToolbarChip) =>
+                      updateRowFilterSelected([chip.key])
+                    }
+                    categoryName={key}
+                    deleteChipGroup={() => clearAllRowFilter(key)}
                   >
-                    <FilterIcon className="span--icon__right-margin" />
-                    Filter
-                  </DropdownToggle>
-                }
-              />,
-            )}
-          </DataToolbarItem>
-        )}
-        <DataToolbarItem className="co-filter-search--full-width">
-          <DataToolbarFilter
-            deleteChipGroup={() => updateLabelFilter([])}
-            chips={[...labelFilters]}
-            deleteChip={(filter, chip: string) =>
-              updateLabelFilter(_.difference(labelFilters, [chip]))
-            }
-            categoryName="Label"
-          >
+                    {acc}
+                  </DataToolbarFilter>
+                ),
+                <Dropdown
+                  dropdownItems={dropdownItems}
+                  onSelect={onRowFilterSelect}
+                  isOpen={isOpen}
+                  toggle={
+                    <DropdownToggle
+                      data-test-id="filter-dropdown-toggle"
+                      onToggle={() => setOpen(!isOpen)}
+                      iconComponent={CaretDownIcon}
+                    >
+                      <FilterIcon className="span--icon__right-margin" />
+                      Filter
+                    </DropdownToggle>
+                  }
+                />,
+              )}
+            </DataToolbarItem>
+          )}
+          <DataToolbarItem className="co-filter-search--full-width">
             <DataToolbarFilter
-              chips={nameFilter && nameFilter.length > 0 ? [nameFilter] : []}
-              deleteChip={() => updateNameFilter('')}
-              categoryName="Name"
+              deleteChipGroup={() => updateLabelFilter([])}
+              chips={[...labelFilters]}
+              deleteChip={(filter, chip: string) =>
+                updateLabelFilter(_.difference(labelFilters, [chip]))
+              }
+              categoryName="Label"
             >
-              <div className="pf-c-input-group">
-                {!hideLabelFilter && (
-                  <DropdownInternal
-                    items={FilterType}
-                    onChange={switchFilter}
-                    selectedKey={filterType}
-                    title={filterType}
-                  />
-                )}
-                {!hideNameFilter && (
+              <DataToolbarFilter
+                chips={nameFilter?.length > 0 ? [nameFilter] : []}
+                deleteChip={() => updateNameFilter('')}
+                categoryName="Name"
+              >
+                <div className="pf-c-input-group">
+                  {!hideLabelFilter && (
+                    <DropdownInternal
+                      items={FilterType}
+                      onChange={switchFilter}
+                      selectedKey={filterType}
+                      title={filterType}
+                    />
+                  )}
                   <AutocompleteInput
                     className="co-text-node"
                     onSuggestionSelect={(selected) => {
@@ -318,13 +314,13 @@ const FilterToolbar_: React.FC<FilterToolbarProps & RouteComponentProps> = (prop
                     }
                     data={data}
                   />
-                )}
-              </div>
+                </div>
+              </DataToolbarFilter>
             </DataToolbarFilter>
-          </DataToolbarFilter>
-        </DataToolbarItem>
-      </DataToolbarContent>
-    </DataToolbar>
+          </DataToolbarItem>
+        </DataToolbarContent>
+      </DataToolbar>
+    )
   );
 };
 
@@ -334,7 +330,7 @@ type FilterToolbarProps = {
   reduxIDs?: string[];
   filterList?: any;
   textFilter?: string;
-  hideNameFilter?: boolean;
+  hideToolbar?: boolean;
   hideLabelFilter?: boolean;
   parseAutoComplete?: any;
   kinds?: any;

diff --git a/frontend/public/components/search.tsx b/frontend/public/components/search.tsx
@@ -59,8 +59,7 @@ const ResourceList = connectToModel(({ kindObj, mock, namespace, selector, nameF
       autoFocus={false}
       mock={mock}
       badge={getBadgeFromType(kindObj.badge)}
-      hideNameFilter
-      hideLabelFilter
+      hideToolbar
     />
   );
 });