Repository list - add columns, filters (#3787)

* Repository list sync status - merge status and date, show no remote vs never synced

Combine sync status and last sync into a single column. This should still show the last sync status and date. The date could be a popover. If no remote is set on the repository, this column should say something like "no remote". If a remote is set, but a sync has never been performed this should say something like "never synced".

Issue: AAH-2271

* Repository list - add Labels, Private columns

Add a "Labels" column that includes the pipeline and hide from search label
Add a "Private" column that indicates if the repo is private or not

Issue: AAH-2271

* CHANGES

* Add a "Pipeline" filter that lets the user select approved or staging repositories

filter present repository list and approvals filter, but called Status, changed to Pipeline

* ListPage: clean inputText on search

Issue: AAH-2340

* page: remove unused didMount, extraState

* Repository list - filter by Remote (or None)

add typeahead filter by Remote, with an extra None (remote=null) option

Issue: AAH-2271

* filter fixup - clean both inputText and selectedFilter

Author: himdel

CHANGES/2271.feature

@@ -0,0 +1 @@
+Repository list - add columns, filters

CHANGES/2340.bugfix

@@ -0,0 +1 @@
+Repositories, Remotes - clean filter text on search

src/api/response-types/ansible-repository.ts

@@ -1,13 +1,16 @@
+import { LastSyncType } from './remote';
+
 export class AnsibleRepositoryType {
   description: string;
+  last_sync_task?: LastSyncType;
   latest_version_href?: string;
   name: string;
+  private?: boolean;
   pulp_created?: string;
   pulp_href?: string;
   pulp_labels?: { [key: string]: string };
   remote?: string;
   retain_repo_versions: number;
-  private?: boolean;
 
   // gpgkey
   // last_synced_metadata_time

src/components/page/list-page.tsx

@@ -16,6 +16,7 @@ import {
   EmptyStateFilter,
   EmptyStateNoData,
   EmptyStateUnauthorized,
+  FilterOption,
   LoadingPageSpinner,
   Main,
   Pagination,
@@ -43,6 +44,7 @@ interface IState<T> {
   alerts: AlertType[];
   unauthorised: boolean;
   inputText: string;
+  selectedFilter: string;
 }
 
 // states:
@@ -76,16 +78,13 @@ export type LocalizedSortHeaders = {
   className?: string;
 }[];
 
-interface ListPageParams<T, ExtraState> {
+interface ListPageParams<T> {
   condition: PermissionContextType;
   defaultPageSize: number;
   defaultSort?: string;
-  didMount?: ({ context, addAlert }) => void;
   displayName: string;
   errorTitle: MessageDescriptor;
-  extraState?: ExtraState;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterConfig: any[]; // FilterOption[] but { title: MessageDescriptor }
+  filterConfig: ({ state }) => FilterOption[];
   headerActions?: ActionType[];
   listItemActions?: ActionType[];
   noDataButton?: (item, actionContext) => React.ReactNode;
@@ -96,13 +95,12 @@ interface ListPageParams<T, ExtraState> {
   renderTableRow: RenderTableRow<T>;
   sortHeaders: SortHeaders;
   title: MessageDescriptor;
+  typeaheadQuery?: ({ inputText, selectedFilter, setState }) => void;
 }
 
-export const ListPage = function <T, ExtraState = Record<string, never>>({
+export const ListPage = function <T>({
   // { featureFlags, settings, user } => bool
   condition,
-  // extra code to run on mount
-  didMount,
   // component name for debugging
   displayName,
   // initial page size
@@ -111,8 +109,6 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
   defaultSort,
   // alert on query failure
   errorTitle,
-  // extra initial state
-  extraState,
   // filters
   filterConfig,
   // displayed after filters
@@ -133,7 +129,9 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
   sortHeaders,
   // container title
   title,
-}: ListPageParams<T, ExtraState>) {
+  // for typeahed filters
+  typeaheadQuery,
+}: ListPageParams<T>) {
   renderModals ||= function (actionContext) {
     return (
       <>
@@ -180,8 +178,8 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
         items: [],
         loading: true,
         params,
+        selectedFilter: null,
         unauthorised: false,
-        ...extraState,
       };
     }
 
@@ -194,26 +192,13 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
 
       this.setState({ alerts: this.context.alerts || [] });
       this.context.setAlerts([]);
-
-      if (didMount) {
-        didMount({
-          context: this.context,
-          addAlert: (alert) => this.addAlert(alert),
-        });
-      }
     }
 
     render() {
       const { alerts, itemCount, items, loading, params, unauthorised } =
         this.state;
 
-      const localizedFilterConfig = (filterConfig || [])
-        .map(translateTitle)
-        .map(({ options, ...rest }) => ({
-          ...rest,
-          options: options?.map(translateTitle),
-        }));
-
+      const localizedFilterConfig = filterConfig({ state: this.state }) || [];
       const knownFilters = localizedFilterConfig.map(({ id }) => id);
       const noData = items.length === 0 && !filterIsSet(params, knownFilters);
 
@@ -225,11 +210,11 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
 
       const niceValues = {};
       localizedFilterConfig
-        .filter((filter) => filter['options'] && filter['options'].length > 0)
-        .forEach((item) => {
-          const obj = (niceValues[item['id']] = {});
-          item['options'].forEach((option) => {
-            obj[option.id] = option.title;
+        .filter(({ options }) => options?.length)
+        .forEach(({ id: filterId, options }) => {
+          const obj = (niceValues[filterId] = {});
+          options.forEach(({ id: optionId, title }) => {
+            obj[optionId] = title;
           });
         });
 
@@ -245,6 +230,12 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
         user: this.context.user,
       };
 
+      const resetCompoundFilter = () =>
+        this.setState({
+          inputText: '',
+          selectedFilter: localizedFilterConfig[0].id,
+        });
+
       return (
         <React.Fragment>
           <AlertList alerts={alerts} closeAlert={(i) => this.closeAlert(i)} />
@@ -271,12 +262,34 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
                           <ToolbarItem>
                             <CompoundFilter
                               inputText={this.state.inputText}
-                              onChange={(inputText) =>
-                                this.setState({ inputText })
-                              }
-                              updateParams={updateParams}
+                              onChange={(inputText) => {
+                                this.setState({ inputText });
+
+                                if (typeaheadQuery) {
+                                  typeaheadQuery({
+                                    inputText,
+                                    selectedFilter: this.state.selectedFilter,
+                                    setState: (s) => this.setState(s),
+                                  });
+                                }
+                              }}
+                              updateParams={(p) => {
+                                resetCompoundFilter();
+                                updateParams(p);
+                              }}
                               params={params}
                               filterConfig={localizedFilterConfig}
+                              selectFilter={(selectedFilter) => {
+                                this.setState({ selectedFilter });
+
+                                if (typeaheadQuery) {
+                                  typeaheadQuery({
+                                    inputText: '',
+                                    selectedFilter,
+                                    setState: (s) => this.setState(s),
+                                  });
+                                }
+                              }}
                             />
                           </ToolbarItem>
                           {headerActions?.length &&
@@ -299,8 +312,8 @@ export const ListPage = function <T, ExtraState = Record<string, never>>({
                   <div>
                     <AppliedFilters
                       updateParams={(p) => {
+                        resetCompoundFilter();
                         updateParams(p);
-                        this.setState({ inputText: '' });
                       }}
                       params={params}
                       ignoredParams={['page_size', 'page', 'sort', 'ordering']}

src/components/page/page-with-tabs.tsx

@@ -46,13 +46,11 @@ interface IState<T> {
 
 type RenderModals = ({ addAlert, state, setState, query }) => React.ReactNode;
 
-interface PageWithTabsParams<T, ExtraState> {
+interface PageWithTabsParams<T> {
   breadcrumbs: ({ name, tab, params }) => { url?: string; name: string }[];
   condition: PermissionContextType;
-  didMount?: ({ context, addAlert }) => void;
   displayName: string;
   errorTitle: MessageDescriptor;
-  extraState?: ExtraState;
   headerActions?: ActionType[];
   headerDetails?: (item) => React.ReactNode;
   query: ({ name }) => Promise<T>;
@@ -64,20 +62,15 @@ interface PageWithTabsParams<T, ExtraState> {
 
 export const PageWithTabs = function <
   T extends { name: string; my_permissions?: string[] },
-  ExtraState = Record<string, never>,
 >({
   // ({ name }) => [{ url?, name }]
   breadcrumbs,
   // { featureFlags, settings, user } => bool
   condition,
-  // extra code to run on mount
-  didMount,
   // component name for debugging
   displayName,
   // alert on query failure
   errorTitle,
-  // extra initial state
-  extraState,
   // displayed after filters
   headerActions,
   // under title
@@ -91,7 +84,7 @@ export const PageWithTabs = function <
   tabs,
   // params => params
   tabUpdateParams,
-}: PageWithTabsParams<T, ExtraState>) {
+}: PageWithTabsParams<T>) {
   renderModals ||= function (actionContext) {
     return (
       <>
@@ -121,7 +114,6 @@ export const PageWithTabs = function <
         loading: true,
         unauthorised: false,
         params,
-        ...extraState,
       };
     }
 
@@ -134,13 +126,6 @@ export const PageWithTabs = function <
 
       this.setState({ alerts: this.context.alerts || [] });
       this.context.setAlerts([]);
-
-      if (didMount) {
-        didMount({
-          context: this.context,
-          addAlert: (alert) => this.addAlert(alert),
-        });
-      }
     }
 
     componentDidUpdate(prevProps) {

src/components/page/page.tsx

@@ -35,13 +35,11 @@ interface IState<T> {
 
 type RenderModals = ({ addAlert, state, setState, query }) => React.ReactNode;
 
-interface PageParams<T, ExtraState> {
+interface PageParams<T> {
   breadcrumbs: ({ name }) => { url?: string; name: string }[];
   condition: PermissionContextType;
-  didMount?: ({ context, addAlert }) => void;
   displayName: string;
   errorTitle: MessageDescriptor;
-  extraState?: ExtraState;
   headerActions?: ActionType[];
   query: ({ name }) => Promise<T>;
   title: ({ name }) => string;
@@ -52,20 +50,15 @@ interface PageParams<T, ExtraState> {
 
 export const Page = function <
   T extends { name: string; my_permissions?: string[] },
-  ExtraState = Record<string, never>,
 >({
   // ({ name }) => [{ url?, name }]
   breadcrumbs,
   // { featureFlags, settings, user } => bool
   condition,
-  // extra code to run on mount
-  didMount,
   // component name for debugging
   displayName,
   // alert on query failure
   errorTitle,
-  // extra initial state
-  extraState,
   // displayed after filters
   headerActions,
   // () => Promise<T>
@@ -75,7 +68,7 @@ export const Page = function <
   // ({ addAlert, state, setState, query }) => <ConfirmationModal... />
   renderModals,
   render,
-}: PageParams<T, ExtraState>) {
+}: PageParams<T>) {
   renderModals ||= function (actionContext) {
     return (
       <>
@@ -98,7 +91,6 @@ export const Page = function <
         item: null,
         loading: true,
         unauthorised: false,
-        ...extraState,
       };
     }
 
@@ -116,13 +108,6 @@ export const Page = function <
 
         this.setState({ alerts: this.context.alerts || [] });
         this.context.setAlerts([]);
-
-        if (didMount) {
-          didMount({
-            context: this.context,
-            addAlert: (alert) => this.addAlert(alert),
-          });
-        }
       });
     }
 

src/components/patternfly-wrappers/compound-filter.tsx

@@ -54,7 +54,6 @@ export class CompoundFilter extends React.Component<IProps, IState> {
   constructor(props) {
     super(props);
 
-    // this is called again in repositories selector, but not in approval page (the same filter is here)...
     this.state = {
       selectedFilter: props.filterConfig[0],
       isExpanded: false,
@@ -167,9 +166,10 @@ export class CompoundFilter extends React.Component<IProps, IState> {
           />
         );
       case 'typeahead': {
-        const typeAheadResults = this.props.filterConfig
+        const typeaheadResults = this.props.filterConfig
           .find(({ id }) => id === selectedFilter.id)
           .options.map(({ id, title }) => ({ id, name: title }));
+
         return (
           <APISearchTypeAhead
             multiple={false}
@@ -180,13 +180,14 @@ export class CompoundFilter extends React.Component<IProps, IState> {
               this.props.onChange('');
             }}
             onSelect={(event, value) => {
-              this.submitFilter(value);
+              const item = typeaheadResults.find(({ name }) => name === value);
+              this.submitFilter(item?.id || value);
             }}
             placeholderText={
               selectedFilter?.placeholder ||
               t`Filter by ${selectedFilter.title.toLowerCase()}`
             }
-            results={typeAheadResults}
+            results={typeaheadResults}
           />
         );
       }