update filtering into the one input search box for name,ns and type

Signed-off-by: R-Lawton <[email protected]>

locales/en/plugin__kuadrant-console-plugin.json

@@ -85,6 +85,7 @@
   "Reference to an existing secret resource containing DNS provider credentials and configuration": "Reference to an existing secret resource containing DNS provider credentials and configuration",
   "Release Notes": "Release Notes",
   "Save": "Save",
+  "Search across name, namespace and/or resource type": "Search across name, namespace and/or resource type",
   "Select a gateway": "Select a gateway",
   "Select a Protocol": "Select a Protocol",
   "Select an ClusterIssuer": "Select an ClusterIssuer",

src/components/ResourceList.tsx

@@ -11,6 +11,7 @@ import {
   EmptyStateBody,
   Title,
   Tooltip,
+  SearchInput,
 } from '@patternfly/react-core';
 import {
   K8sResourceCommon,
@@ -356,29 +357,27 @@ const ResourceList: React.FC<ResourceListProps> = ({
     loadErrors.length > 0 ? new Error(loadErrors.map((err) => err.message).join('; ')) : null;
 
   // Implement local filter state
-  const [filters, setFilters] = React.useState<{ [key: string]: string }>({});
+  const [filters, setFilters] = React.useState<string>('');
   const [filteredData, setFilteredData] = React.useState<K8sResourceCommon[]>([]);
 
   React.useEffect(() => {
     let data = allData;
 
-    // Apply filters
-    Object.keys(filters).forEach((key) => {
-      const value = filters[key];
-      if (value) {
-        data = data.filter((item) => {
-          if (key === 'name') {
-            return item.metadata.name.toLowerCase().includes(value.toLowerCase());
-          } else if (key === 'namespace') {
-            return item.metadata.namespace?.toLowerCase().includes(value.toLowerCase());
-          } else if (key === 'type') {
-            return item.kind.toLowerCase().includes(value.toLowerCase());
-          }
-          return true;
-        });
-      }
-    });
-
+    if (filters) {
+      const search = filters.toLowerCase().trim().split(/\s+/).filter(Boolean);
+      data = data.filter((item) => {
+        const name = item.metadata?.name?.toLowerCase() || '';
+        const namespace = item.metadata?.namespace?.toLowerCase() || '';
+        const kind = item.kind?.toLowerCase() || '';
+        const matches = search.some(
+          (searchValue) =>
+            name.includes(searchValue) ||
+            namespace.includes(searchValue) ||
+            kind.includes(searchValue),
+        );
+        return matches;
+      });
+    }
     setFilteredData(data);
   }, [allData, filters]);
 
@@ -442,6 +441,16 @@ const ResourceList: React.FC<ResourceListProps> = ({
     setCurrentPage(1);
   };
 
+  const handleFilterChange = (value: string) => {
+    setCurrentPage(1);
+    setFilters(value);
+  };
+
+  const handleClear = () => {
+    setFilters('');
+    setCurrentPage(1);
+  };
+
   const ResourceRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
     const { apiVersion, kind } = obj;
     const [group, version] = apiVersion.includes('/') ? apiVersion.split('/') : ['', apiVersion];
@@ -521,36 +530,14 @@ const ResourceList: React.FC<ResourceListProps> = ({
       )}
       <div className="kuadrant-policy-list-body">
         <ListPageBody>
-          {/* Filter UI */}
-          <div className="kuadrant-filter-bar" style={{ marginBottom: '16px' }}>
-            <input
-              type="text"
-              placeholder="Filter by name"
-              value={filters.name || ''}
-              onChange={(e) => {
-                setCurrentPage(1);
-                setFilters({ ...filters, name: e.target.value });
-              }}
-              style={{ marginRight: '8px' }}
-            />
-            <input
-              type="text"
-              placeholder="Filter by namespace"
-              value={filters.namespace || ''}
-              onChange={(e) => {
-                setCurrentPage(1);
-                setFilters({ ...filters, namespace: e.target.value });
-              }}
-              style={{ marginRight: '8px' }}
-            />
-            <input
-              type="text"
-              placeholder="Filter by type"
-              value={filters.type || ''}
-              onChange={(e) => {
-                setCurrentPage(1);
-                setFilters({ ...filters, type: e.target.value });
-              }}
+          <div className="kuadrant-filter-bar" style={{ marginBottom: '16px', marginTop: '15px' }}>
+            <SearchInput
+              placeholder={t('Search across name, namespace and/or resource type')}
+              value={String(filters) || ''}
+              onChange={(_, value: string) => handleFilterChange(value)}
+              onClear={handleClear}
+              aria-label="Global search input"
+              style={{ marginRight: '8px', width: '350px' }}
             />
           </div>