namespace list - use HubListToolbar, support buttons

src/components/patternfly-wrappers/pagination.tsx

@@ -25,9 +25,6 @@ interface IProps {
 
   /** Applies styling to make pagination compact */
   isCompact?: boolean;
-
-  /** Options for the number of items that can be displayed per page */
-  perPageOptions?: number[];
 }
 
 // AAP-3737 - support both "1 - 2 of 3" and "3 的 1 - 2"
@@ -56,44 +53,45 @@ export const Pagination = ({
   params,
   updateParams,
   isTop,
-  perPageOptions,
   isCompact,
 }: IProps) => {
-  const extraProps = {};
-  if (!isTop) {
-    extraProps['widgetId'] = 'pagination-options-menu-bottom';
-    extraProps['variant'] = PaginationVariant.bottom;
-  }
+  const extraProps = isTop
+    ? {}
+    : {
+        widgetId: 'pagination-options-menu-bottom',
+        variant: PaginationVariant.bottom,
+      };
+
+  const onSetPage = (_, p) =>
+    updateParams(ParamHelper.setParam(params, 'page', p));
+
+  const onPerPageSelect = (_, p) => {
+    updateParams({ ...params, page: 1, page_size: p });
+  };
+
+  const perPageOptions = Constants.DEFAULT_PAGINATION_OPTIONS.map((option) => ({
+    title: String(option),
+    value: option,
+  }));
+
+  const titles = {
+    ofWord: t`of`,
+    perPageSuffix: t`per page`,
+    items: null,
+  };
 
   return (
     <PaginationPF
+      isCompact={isTop || isCompact}
       itemCount={count}
-      perPage={params.page_size || Constants.DEFAULT_PAGE_SIZE}
+      onPerPageSelect={onPerPageSelect}
+      onSetPage={onSetPage}
       page={params.page || 1}
-      onSetPage={(_, p) =>
-        updateParams(ParamHelper.setParam(params, 'page', p))
-      }
-      onPerPageSelect={(_, p) => {
-        updateParams({ ...params, page: 1, page_size: p });
-      }}
-      {...extraProps}
-      isCompact={isTop || isCompact}
-      perPageOptions={mapPerPageOptions(
-        perPageOptions || Constants.DEFAULT_PAGINATION_OPTIONS,
-      )}
-      titles={{
-        ofWord: t`of`,
-        perPageSuffix: t`per page`,
-        items: null,
-      }}
+      perPage={params.page_size || Constants.DEFAULT_PAGE_SIZE}
+      perPageOptions={perPageOptions}
+      titles={titles}
       toggleTemplate={(props) => <ToggleTemplate {...props} />}
+      {...extraProps}
     />
   );
 };
-
-function mapPerPageOptions(options) {
-  return options.map((option) => ({
-    title: String(option),
-    value: option,
-  }));
-}

src/components/shared/hub-list-toolbar.tsx

@@ -4,7 +4,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import React, { useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import {
   AppliedFilters,
   CompoundFilter,
@@ -16,6 +16,7 @@ import {
 import { ParamType } from 'src/utilities';
 
 interface IProps {
+  buttons?: ReactNode[];
   count?: number;
   filterConfig: FilterOption[];
   ignoredParams: string[];
@@ -49,8 +50,9 @@ function useTypeaheads(typeaheads, { inputText, selectedFilter }) {
   return options;
 }
 
-// FIXME: missing Buttons & CardListSwitcher to be usable everywhere
+// FIXME: missing CardListSwitcher to be usable everywhere
 export function HubListToolbar({
+  buttons,
   count,
   filterConfig,
   ignoredParams,
@@ -76,8 +78,14 @@ export function HubListToolbar({
       : { ...item, options: item.options || typeaheadOptions[item.id] || [] },
   );
 
+  const renderedButtons = buttons?.length
+    ? buttons.map((button, i) =>
+        button ? <ToolbarItem key={`button${i}`}>{button}</ToolbarItem> : null,
+      )
+    : null;
+
   return (
-    <Toolbar>
+    <Toolbar style={{ paddingLeft: '8px' }}>
       <ToolbarContent>
         <ToolbarGroup
           style={{
@@ -107,14 +115,19 @@ export function HubListToolbar({
           </ToolbarItem>
         </ToolbarGroup>
         {sortOptions ? (
-          <ToolbarItem style={{ alignSelf: 'start' }}>
-            <Sort
-              options={sortOptions}
-              params={params}
-              updateParams={updateParams}
-            />
-          </ToolbarItem>
-        ) : null}
+          <ToolbarGroup style={{ alignSelf: 'start' }}>
+            <ToolbarItem>
+              <Sort
+                options={sortOptions}
+                params={params}
+                updateParams={updateParams}
+              />
+            </ToolbarItem>
+            {renderedButtons}
+          </ToolbarGroup>
+        ) : (
+          renderedButtons
+        )}
         <ToolbarItem
           alignment={{ default: 'alignRight' }}
           style={{ alignSelf: 'start' }}

src/constants.tsx

@@ -2,11 +2,10 @@ import { msg } from '@lingui/macro';
 
 export class Constants {
   static readonly SEARCH_VIEW_TYPE_LOCAL_KEY = 'search_view_type';
+
   static readonly DEFAULT_PAGE_SIZE = 10;
   static readonly DEFAULT_PAGINATION_OPTIONS = [10, 20, 50, 100];
 
-  static readonly CARD_DEFAULT_PAGE_SIZE = 10;
-  static readonly CARD_DEFAULT_PAGINATION_OPTIONS = [10, 20, 50, 100];
   static readonly INSIGHTS_DEPLOYMENT_MODE = 'insights';
   static readonly STANDALONE_DEPLOYMENT_MODE = 'standalone';
 

src/containers/namespace-list/namespace-list.tsx

@@ -1,33 +1,24 @@
 import { t } from '@lingui/macro';
-import {
-  Button,
-  Toolbar,
-  ToolbarContent,
-  ToolbarGroup,
-  ToolbarItem,
-} from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import React from 'react';
 import { Navigate } from 'react-router-dom';
 import { MyNamespaceAPI, NamespaceAPI, NamespaceListType } from 'src/api';
 import {
   AlertList,
   AlertType,
-  AppliedFilters,
   BaseHeader,
-  CompoundFilter,
   EmptyStateFilter,
   EmptyStateNoData,
+  HubListToolbar,
   LinkTabs,
   LoadingPageSpinner,
   LoadingPageWithHeader,
   NamespaceCard,
   NamespaceModal,
   NamespaceNextPageCard,
   Pagination,
-  Sort,
   closeAlertMixin,
 } from 'src/components';
-import { Constants } from 'src/constants';
 import { AppContext } from 'src/loaders/app-context';
 import { Paths, formatPath, namespaceBreadcrumb } from 'src/paths';
 import {
@@ -54,7 +45,6 @@ interface IState {
   isModalOpen: boolean;
   loading: boolean;
   redirect?: string;
-  inputText: string;
 }
 
 interface IProps extends RouteProps {
@@ -89,7 +79,6 @@ export class NamespaceList extends React.Component<IProps, IState> {
       hasPermission: true,
       isModalOpen: false,
       loading: true,
-      inputText: params['keywords'] || '',
     };
   }
 
@@ -144,8 +133,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
       return <Navigate to={this.state.redirect} />;
     }
 
-    const { alerts, namespaces, params, itemCount, loading, inputText } =
-      this.state;
+    const { alerts, namespaces, params, itemCount, loading } = this.state;
     const { filterOwner } = this.props;
     const { hasPermission } = this.context;
 
@@ -164,6 +152,18 @@ export class NamespaceList extends React.Component<IProps, IState> {
     const updateParams = (p) =>
       this.updateParams(p, () => this.loadNamespaces());
 
+    const filterConfig = [{ id: 'keywords', title: t`keywords` }];
+    const sortOptions = [
+      { title: t`Name`, id: 'name', type: 'alpha' as const },
+    ];
+    const buttons = [
+      hasPermission('galaxy.add_namespace') ? (
+        <Button variant='primary' onClick={this.handleModalToggle}>
+          {t`Create`}
+        </Button>
+      ) : null,
+    ];
+
     return (
       <div className='hub-namespace-page'>
         <NamespaceModal
@@ -203,66 +203,18 @@ export class NamespaceList extends React.Component<IProps, IState> {
               </div>
             </div>
           )}
-          {noData ? null : (
-            <div className='hub-toolbar hub-toolbar-left'>
-              <Toolbar>
-                <ToolbarContent>
-                  <ToolbarGroup style={{ marginLeft: 0 }}>
-                    <ToolbarItem>
-                      <CompoundFilter
-                        inputText={inputText}
-                        onChange={(text) => this.setState({ inputText: text })}
-                        params={params}
-                        updateParams={updateParams}
-                        filterConfig={[{ id: 'keywords', title: t`keywords` }]}
-                      />
-                      <AppliedFilters
-                        style={{ marginTop: '16px' }}
-                        params={params}
-                        updateParams={(p) => {
-                          updateParams(p);
-                          this.setState({ inputText: '' });
-                        }}
-                        ignoredParams={['page_size', 'page', 'sort']}
-                        niceNames={{ keywords: t`keywords` }}
-                      />
-                    </ToolbarItem>
-                  </ToolbarGroup>
-                  <ToolbarGroup style={{ alignSelf: 'start' }}>
-                    <ToolbarItem>
-                      <Sort
-                        options={[
-                          { title: t`Name`, id: 'name', type: 'alpha' },
-                        ]}
-                        params={params}
-                        updateParams={updateParams}
-                      />
-                    </ToolbarItem>
-                    {hasPermission('galaxy.add_namespace') && (
-                      <ToolbarItem key='create-button'>
-                        <Button
-                          variant='primary'
-                          onClick={this.handleModalToggle}
-                        >
-                          {t`Create`}
-                        </Button>
-                      </ToolbarItem>
-                    )}
-                  </ToolbarGroup>
-                </ToolbarContent>
-              </Toolbar>
-              <div>
-                <Pagination
-                  params={params}
-                  updateParams={updateParams}
-                  count={itemCount}
-                  isCompact
-                  perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
-                />
-              </div>
-            </div>
-          )}
         </BaseHeader>
+        {noData ? null : (
+          <HubListToolbar
+            buttons={buttons}
+            count={itemCount}
+            filterConfig={filterConfig}
+            ignoredParams={['page', 'page_size', 'sort']}
+            params={params}
+            sortOptions={sortOptions}
+            updateParams={updateParams}
+          />
+        )}
         <section className='card-area'>
           {this.renderBody({ updateParams })}
         </section>
@@ -271,7 +223,6 @@ export class NamespaceList extends React.Component<IProps, IState> {
             <Pagination
               params={params}
               updateParams={updateParams}
-              perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
               count={itemCount}
             />
           </section>

src/containers/search/search.tsx

@@ -81,7 +81,7 @@ class Search extends React.Component<RouteProps, IState> {
     ]);
 
     if (!params['page_size']) {
-      params['page_size'] = Constants.CARD_DEFAULT_PAGE_SIZE;
+      params['page_size'] = Constants.DEFAULT_PAGE_SIZE;
     }
 
     // Load view type from local storage if it's not set. This allows a
@@ -248,7 +248,6 @@ class Search extends React.Component<RouteProps, IState> {
                     params={params}
                     updateParams={updateParams}
                     count={count}
-                    perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
                     isTop
                   />
                 </div>
@@ -276,7 +275,6 @@ class Search extends React.Component<RouteProps, IState> {
               <Pagination
                 params={params}
                 updateParams={updateParams}
-                perPageOptions={Constants.CARD_DEFAULT_PAGINATION_OPTIONS}
                 count={count}
               />
             </section>