Repository list - filter by Remote (or None)

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

Issue: AAH-2271

Author: himdel

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:
@@ -82,8 +84,7 @@ interface ListPageParams<T> {
   defaultSort?: string;
   displayName: string;
   errorTitle: MessageDescriptor;
-  // 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;
@@ -94,6 +95,7 @@ interface ListPageParams<T> {
   renderTableRow: RenderTableRow<T>;
   sortHeaders: SortHeaders;
   title: MessageDescriptor;
+  typeaheadQuery?: ({ inputText, selectedFilter, setState }) => void;
 }
 
 export const ListPage = function <T>({
@@ -127,6 +129,8 @@ export const ListPage = function <T>({
   sortHeaders,
   // container title
   title,
+  // for typeahed filters
+  typeaheadQuery,
 }: ListPageParams<T>) {
   renderModals ||= function (actionContext) {
     return (
@@ -174,6 +178,7 @@ export const ListPage = function <T>({
         items: [],
         loading: true,
         params,
+        selectedFilter: null,
         unauthorised: false,
       };
     }
@@ -193,13 +198,7 @@ export const ListPage = function <T>({
       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);
 
@@ -257,15 +256,34 @@ export const ListPage = function <T>({
                           <ToolbarItem>
                             <CompoundFilter
                               inputText={this.state.inputText}
-                              onChange={(inputText) =>
-                                this.setState({ inputText })
-                              }
+                              onChange={(inputText) => {
+                                this.setState({ inputText });
+
+                                if (typeaheadQuery) {
+                                  typeaheadQuery({
+                                    inputText,
+                                    selectedFilter: this.state.selectedFilter,
+                                    setState: (s) => this.setState(s),
+                                  });
+                                }
+                              }}
                               updateParams={(p) => {
                                 this.setState({ inputText: '' });
                                 updateParams(p);
                               }}
                               params={params}
                               filterConfig={localizedFilterConfig}
+                              selectFilter={(selectedFilter) => {
+                                this.setState({ selectedFilter });
+
+                                if (typeaheadQuery) {
+                                  typeaheadQuery({
+                                    inputText: '',
+                                    selectedFilter,
+                                    setState: (s) => this.setState(s),
+                                  });
+                                }
+                              }}
                             />
                           </ToolbarItem>
                           {headerActions?.length &&

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

@@ -166,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}
@@ -179,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}
           />
         );
       }

src/containers/ansible-remote/list.tsx

@@ -1,4 +1,4 @@
-import { msg } from '@lingui/macro';
+import { msg, t } from '@lingui/macro';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {
@@ -34,10 +34,10 @@ const AnsibleRemoteList = ListPage<AnsibleRemoteType>({
   defaultSort: '-pulp_created',
   displayName: 'AnsibleRemoteList',
   errorTitle: msg`Remotes could not be displayed.`,
-  filterConfig: [
+  filterConfig: () => [
     {
       id: 'name__icontains',
-      title: msg`Remote name`,
+      title: t`Remote name`,
     },
   ],
   headerActions: [ansibleRemoteCreateAction], // Add remote

src/containers/ansible-repository/list.tsx

@@ -1,4 +1,4 @@
-import { msg } from '@lingui/macro';
+import { msg, t } from '@lingui/macro';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import {
@@ -8,7 +8,11 @@ import {
   ansibleRepositoryEditAction,
   ansibleRepositorySyncAction,
 } from 'src/actions';
-import { AnsibleRepositoryAPI, AnsibleRepositoryType } from 'src/api';
+import {
+  AnsibleRemoteAPI,
+  AnsibleRepositoryAPI,
+  AnsibleRepositoryType,
+} from 'src/api';
 import {
   DateComponent,
   ListItemActions,
@@ -31,34 +35,59 @@ const listItemActions = [
   ansibleRepositoryDeleteAction,
 ];
 
+const typeaheadQuery = ({ inputText, selectedFilter, setState }) => {
+  console.log('typeaheadQuery', { inputText, selectedFilter });
+  if (selectedFilter !== 'remote') {
+    return;
+  }
+
+  return AnsibleRemoteAPI.list({ name__icontains: inputText })
+    .then(({ data: { results } }) =>
+      results.map(({ name, pulp_href }) => ({ id: pulp_href, title: name })),
+    )
+    .then((remotes) => setState({ remotes }));
+};
+
 const AnsibleRepositoryList = ListPage<AnsibleRepositoryType>({
   condition: canViewAnsibleRepositories,
   defaultPageSize: 10,
   defaultSort: '-pulp_created',
   displayName: 'AnsibleRepositoryList',
   errorTitle: msg`Repositories could not be displayed.`,
-  filterConfig: [
+  filterConfig: ({ state: { remotes } }) => [
     {
       id: 'name__icontains',
-      title: msg`Repository name`,
+      title: t`Repository name`,
     },
     {
       id: 'pulp_label_select',
-      title: msg`Pipeline`,
+      title: t`Pipeline`,
       inputType: 'select',
       options: [
         {
           id: `pipeline=${Constants.NOTCERTIFIED}`,
-          title: msg`Rejected`,
+          title: t`Rejected`,
         },
         {
           id: `pipeline=${Constants.NEEDSREVIEW}`,
-          title: msg`Needs Review`,
+          title: t`Needs Review`,
         },
         {
           id: `pipeline=${Constants.APPROVED}`,
-          title: msg`Approved`,
+          title: t`Approved`,
+        },
+      ],
+    },
+    {
+      id: 'remote',
+      title: t`Remote`,
+      inputType: 'typeahead',
+      options: [
+        {
+          id: 'null',
+          title: t`None`,
         },
+        ...(remotes || []),
       ],
     },
   ],
@@ -68,6 +97,7 @@ const AnsibleRepositoryList = ListPage<AnsibleRepositoryType>({
   noDataDescription: msg`Repositories will appear once created.`,
   noDataTitle: msg`No repositories yet`,
   query: ({ params }) => AnsibleRepositoryAPI.list(params),
+  typeaheadQuery,
   renderTableRow(item: AnsibleRepositoryType, index: number, actionContext) {
     const {
       last_sync_task,