used by depenendencies - use HubListToolbar

mostly because the onChange-based filter would really need a cancel token,
but we want unified filters everywhere too

Author: himdel

src/components/collection-dependencies-list/collection-usedby-dependencies-list.tsx

@@ -1,19 +1,13 @@
 import { t } from '@lingui/macro';
-import {
-  SearchInput,
-  Toolbar,
-  ToolbarGroup,
-  ToolbarItem,
-} from '@patternfly/react-core';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { CollectionUsedByDependencies } from 'src/api';
 import {
   EmptyStateFilter,
   EmptyStateNoData,
+  HubListToolbar,
   LoadingPageSpinner,
   Pagination,
-  Sort,
 } from 'src/components';
 import 'src/containers/collection-detail/collection-dependencies.scss';
 import { Paths, formatPath } from 'src/paths';
@@ -40,8 +34,6 @@ export const CollectionUsedbyDependenciesList = ({
   updateParams,
   usedByDependenciesLoading,
 }: IProps) => {
-  const ignoredParams = ['page_size', 'page', 'sort', 'name__icontains'];
-
   if (!itemCount && !filterIsSet(params, ['name__icontains'])) {
     return (
       <EmptyStateNoData
@@ -51,50 +43,29 @@ export const CollectionUsedbyDependenciesList = ({
     );
   }
 
+  const ignoredParams = ['page_size', 'page', 'sort'];
+
+  const filterConfig = [
+    {
+      id: 'name__icontains',
+      title: t`Name`,
+    },
+  ];
+
+  const sortOptions = [
+    { title: t`Collection`, id: 'collection', type: 'alpha' },
+  ];
+
   return (
     <>
-      <div className='hub-toolbar'>
-        <Toolbar>
-          <ToolbarGroup>
-            <ToolbarItem>
-              <SearchInput
-                value={params.name__icontains || ''}
-                onChange={(_e, val) =>
-                  updateParams(
-                    ParamHelper.setParam(params, 'name__icontains', val),
-                  )
-                }
-                onClear={() =>
-                  updateParams(
-                    ParamHelper.setParam(params, 'name__icontains', ''),
-                  )
-                }
-                aria-label='filter-collection-name'
-                placeholder={t`Filter by name`}
-              />
-            </ToolbarItem>
-            <ToolbarItem>
-              <Sort
-                options={[
-                  { title: t`Collection`, id: 'collection', type: 'alpha' },
-                ]}
-                params={params}
-                updateParams={({ sort }) =>
-                  updateParams(ParamHelper.setParam(params, 'sort', sort))
-                }
-              />
-            </ToolbarItem>
-          </ToolbarGroup>
-        </Toolbar>
-        {!!itemCount && (
-          <Pagination
-            params={params}
-            updateParams={(p) => updateParams(p)}
-            count={itemCount}
-            isTop
-          />
-        )}
-      </div>
+      <HubListToolbar
+        count={itemCount}
+        filterConfig={filterConfig}
+        ignoredParams={ignoredParams}
+        params={params}
+        sortOptions={sortOptions}
+        updateParams={updateParams}
+      />
 
       {usedByDependenciesLoading ? (
         <LoadingPageSpinner />
@@ -118,10 +89,10 @@ export const CollectionUsedbyDependenciesList = ({
                                 namespace,
                                 repo: repository_list[0],
                               },
-                              ParamHelper.getReduced(
-                                { version },
-                                ignoredParams,
-                              ),
+                              ParamHelper.getReduced({ version }, [
+                                ...ignoredParams,
+                                'name__icontains',
+                              ]),
                             )}
                           >
                             {namespace + '.' + name} v{version}

src/containers/collection-detail/collection-dependencies.tsx

@@ -115,7 +115,7 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
     const noDependencies = !Object.keys(version.dependencies).length;
 
     return (
-      <React.Fragment>
+      <>
         <AlertList alerts={alerts} closeAlert={(i) => this.closeAlert(i)} />
         <CollectionHeader
           activeTab='dependencies'
@@ -129,9 +129,7 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
           reload={() => this.loadData(true)}
           repo={repository.name}
           updateParams={(p) => {
-            this.updateParams(this.combineParams(this.state.params, p), () =>
-              this.loadData(true),
-            );
+            this.updateParams(p, () => this.loadData(true));
           }}
         />
         <Main>
@@ -160,15 +158,12 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
               params={dependenciesParams}
               usedByDependenciesLoading={usedByDependenciesLoading}
               updateParams={(p) =>
-                this.updateParams(
-                  this.combineParams(this.state.params, p),
-                  () => this.loadUsedByDependencies(),
-                )
+                this.updateParams(p, () => this.loadUsedByDependencies())
               }
             />
           </section>
         </Main>
-      </React.Fragment>
+      </>
     );
   }
 
@@ -298,10 +293,6 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
     return ParamHelper.updateParamsMixin();
   }
 
-  private combineParams(...params) {
-    return params.reduce((acc, cur) => ({ ...acc, ...cur }));
-  }
-
   get closeAlert() {
     return closeAlertMixin('alerts');
   }