From 5a0922a94ded26d4d30cddd9a6cb54ded0ccc643 Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Wed, 1 Nov 2023 03:31:18 +0000
Subject: [PATCH] PAUSED: Use `git resume` to continue working. [skip ci]

---
 src/components/shared/hub-list-toolbar.tsx    |  4 +++
 .../ansible-role/namespace-detail.tsx         | 24 ++++++++++++++++--
 src/containers/ansible-role/role-list.tsx     | 25 ++++++++++++++++---
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/components/shared/hub-list-toolbar.tsx b/src/components/shared/hub-list-toolbar.tsx
index 1071ef7d26..ef4b287071 100644
--- a/src/components/shared/hub-list-toolbar.tsx
+++ b/src/components/shared/hub-list-toolbar.tsx
@@ -22,6 +22,10 @@ interface IProps {
   params: ParamType;
   sortOptions?: SortFieldType[];
   updateParams: (p) => void;
+  // TODO
+  typeaheads?: {
+    [key: string]: (inputText: string) => { id: string; title: string }[];
+  };
 }
 
 // FIXME: missing Buttons & CardListSwitcher to be usable everywhere
diff --git a/src/containers/ansible-role/namespace-detail.tsx b/src/containers/ansible-role/namespace-detail.tsx
index 4e394edf33..a7b0a930b9 100644
--- a/src/containers/ansible-role/namespace-detail.tsx
+++ b/src/containers/ansible-role/namespace-detail.tsx
@@ -14,6 +14,7 @@ import {
   LegacyNamespaceListType,
   LegacyRoleAPI,
   LegacyRoleListType,
+  TagAPI,
 } from 'src/api';
 import {
   AlertList,
@@ -61,6 +62,7 @@ interface NamespaceRolesState {
     tags?: string[];
   };
   roles: LegacyRoleListType[];
+  tags: { id: string; title: string }[];
 }
 
 class NamespaceRoles extends React.Component<
@@ -88,6 +90,7 @@ class NamespaceRoles extends React.Component<
         ...params,
       },
       roles: [],
+      tags: [],
     };
   }
 
@@ -119,11 +122,28 @@ class NamespaceRoles extends React.Component<
       );
   }
 
+  // TODO call - but only HubListToolbar knows inputText
+  loadTags() {
+    const { inputText } = this.state;
+
+    TagAPI.listRoles({ name__icontains: inputText, sort: '-count' }).then(
+      ({ data }) =>
+        this.setState({
+          tags: data.map(({ name, count }) => ({
+            id: name,
+            title: t`${name} (${count})`,
+          })),
+        }),
+    );
+  }
+
   private get updateParams() {
     return ParamHelper.updateParamsMixin();
   }
 
   render() {
+    const { count, loading, params, roles, tags } = this.state;
+
     const updateParams = (params) =>
       this.updateParams(params, () => this.query(params));
 
@@ -135,6 +155,8 @@ class NamespaceRoles extends React.Component<
       {
         id: 'tags',
         title: t`Tags`,
+        inputType: 'typeahead' as const,
+        options: tags,
       },
     ];
 
@@ -152,8 +174,6 @@ class NamespaceRoles extends React.Component<
       },
     ];
 
-    const { count, loading, params, roles } = this.state;
-
     const noData =
       count === 0 &&
       !filterIsSet(
diff --git a/src/containers/ansible-role/role-list.tsx b/src/containers/ansible-role/role-list.tsx
index c968774994..0c5362c680 100644
--- a/src/containers/ansible-role/role-list.tsx
+++ b/src/containers/ansible-role/role-list.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import { DataList } from '@patternfly/react-core';
 import React from 'react';
-import { LegacyRoleAPI, LegacyRoleListType } from 'src/api';
+import { LegacyRoleAPI, LegacyRoleListType, TagAPI } from 'src/api';
 import {
   AlertList,
   AlertType,
@@ -32,6 +32,7 @@ interface RolesState {
     sort?: string;
   };
   roles: LegacyRoleListType[];
+  tags: { id: string; title: string }[];
 }
 
 class AnsibleRoleList extends React.Component<RouteProps, RolesState> {
@@ -54,6 +55,7 @@ class AnsibleRoleList extends React.Component<RouteProps, RolesState> {
         ...params,
       },
       roles: [],
+      tags: [],
     };
   }
 
@@ -80,6 +82,21 @@ class AnsibleRoleList extends React.Component<RouteProps, RolesState> {
       );
   }
 
+  // TODO call - but only HubListToolbar knows inputText
+  loadTags() {
+    const { inputText } = this.state;
+
+    TagAPI.listRoles({ name__icontains: inputText, sort: '-count' }).then(
+      ({ data }) =>
+        this.setState({
+          tags: data.map(({ name, count }) => ({
+            id: name,
+            title: t`${name} (${count})`,
+          })),
+        }),
+    );
+  }
+
   private get updateParams() {
     return ParamHelper.updateParamsMixin();
   }
@@ -95,6 +112,8 @@ class AnsibleRoleList extends React.Component<RouteProps, RolesState> {
   }
 
   render() {
+    const { alerts, count, loading, params, roles, tags } = this.state;
+
     const updateParams = (params) =>
       this.updateParams(params, () => this.query(params));
 
@@ -110,6 +129,8 @@ class AnsibleRoleList extends React.Component<RouteProps, RolesState> {
       {
         id: 'tags',
         title: t`Tags`,
+        inputType: 'typeahead' as const,
+        options: tags,
       },
     ];
 
@@ -127,8 +148,6 @@ class AnsibleRoleList extends React.Component<RouteProps, RolesState> {
       },
     ];
 
-    const { alerts, count, loading, params, roles } = this.state;
-
     const noData =
       count === 0 &&
       !filterIsSet(