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 by": "Search by",
   "Select a gateway": "Select a gateway",
   "Select a Protocol": "Select a Protocol",
   "Select an ClusterIssuer": "Select an ClusterIssuer",

src/components/KuadrantOverviewPage.tsx

@@ -171,7 +171,7 @@ const KuadrantOverviewPage: React.FC = () => {
         <title data-test="example-page-title">{t('Kuadrant')}</title>
       </Helmet>
       <Page>
-        <PageSection>
+        <PageSection isFilled>
           <Title headingLevel="h1">{t('Kuadrant')} Overview</Title>
           <br />
 

src/components/ResourceList.tsx

@@ -11,6 +11,16 @@ import {
   EmptyStateBody,
   Title,
   Tooltip,
+  ToolbarItem,
+  ToolbarGroup,
+  Select,
+  MenuToggle,
+  InputGroup,
+  TextInput,
+  MenuToggleElement,
+  SelectOption,
+  Toolbar,
+  ToolbarContent,
 } from '@patternfly/react-core';
 import {
   K8sResourceCommon,
@@ -356,29 +366,39 @@ 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 [isOpen, setIsOpen] = React.useState(false);
+  const [filterSelected, setFilterSelected] = React.useState('Name');
   const [filteredData, setFilteredData] = React.useState<K8sResourceCommon[]>([]);
 
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onFilterSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    selection: string,
+  ) => {
+    setFilterSelected(selection);
+    setIsOpen(false);
+  };
+
   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 filterValue = filters.toLowerCase();
+      data = data.filter((item) => {
+        if (filterSelected === 'Name') {
+          return item.metadata.name.toLowerCase().includes(filterValue);
+        } else if (filterSelected === 'Namespace') {
+          return item.metadata.namespace?.toLowerCase().includes(filterValue);
+        } else if (filterSelected === 'Type') {
+          return item.kind.toLowerCase().includes(filterValue);
+        }
+        return true;
+      });
+    }
     setFilteredData(data);
   }, [allData, filters]);
 
@@ -442,6 +462,11 @@ const ResourceList: React.FC<ResourceListProps> = ({
     setCurrentPage(1);
   };
 
+  const handleFilterChange = (value: string) => {
+    setCurrentPage(1);
+    setFilters(value);
+  };
+
   const ResourceRow: React.FC<RowProps<K8sResourceCommon>> = ({ obj, activeColumnIDs }) => {
     const { apiVersion, kind } = obj;
     const [group, version] = apiVersion.includes('/') ? apiVersion.split('/') : ['', apiVersion];
@@ -521,39 +546,41 @@ 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>
-
+          <Toolbar>
+            <ToolbarContent>
+              <ToolbarGroup variant="filter-group">
+                <ToolbarItem>
+                  <Select
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+                        {filterSelected}
+                      </MenuToggle>
+                    )}
+                    onSelect={onFilterSelect}
+                    onOpenChange={setIsOpen}
+                    isOpen={isOpen}
+                  >
+                    {['Name', 'Namespace', 'Type'].map((option, index) => (
+                      <SelectOption key={index} value={option}>
+                        {option}
+                      </SelectOption>
+                    ))}
+                  </Select>
+                </ToolbarItem>
+
+                <ToolbarItem>
+                  <InputGroup className="pf-v5-c-input-group co-filter-group">
+                    <TextInput
+                      type="text"
+                      placeholder={`Search by ${filterSelected.toLowerCase()}...`}
+                      onChange={(_event, value) => handleFilterChange(value)}
+                      className="pf-v5-c-form-control co-text-filter-with-icon "
+                    />
+                  </InputGroup>
+                </ToolbarItem>
+              </ToolbarGroup>
+            </ToolbarContent>
+          </Toolbar>
           {paginatedData.length === 0 && allLoaded ? (
             <EmptyState>
               <EmptyStateIcon icon={SearchIcon} />

src/components/kuadrant.css

@@ -67,7 +67,9 @@
   padding: 1rem;
 }
 
-.kuadrant-dashboard-learning, .kuadrant-dashboard-feature-highlights, .kuadrant-dashboard-enhance  {
+.kuadrant-dashboard-learning,
+.kuadrant-dashboard-feature-highlights,
+.kuadrant-dashboard-enhance {
   margin-bottom: 0.5em;
 }
 
@@ -79,7 +81,7 @@
   color: var(--pf-global--palette--purple-700);
 }
 
-.pf-theme-dark .kuadrant-dashboard-learning  {
+.pf-theme-dark .kuadrant-dashboard-learning {
   color: var(--pf-v5-global--palette--purple-200);
 }
 
@@ -107,14 +109,15 @@
   font-size: 0.8rem;
   color: var(--pf-global--palette--black-600);
   margin-left: 1rem;
-  margin-right: 1rem
+  margin-right: 1rem;
 }
 
 .kuadrant-limits-header {
   margin: 1rem 0 0;
 }
 
-.kuadrant-limits-button, .pf-v5-c-label-group {
+.kuadrant-limits-button,
+.pf-v5-c-label-group {
   margin: 1rem;
 }
 
@@ -143,11 +146,12 @@
 
 .kuadrant-overview-create-button {
   position: absolute;
-  top: 0;   
-  right: 0; 
+  top: 0;
+  right: 0;
 }
 
-.kuadrant-overview-create-list, .kuadrant-overview-create-button {
+.kuadrant-overview-create-list,
+.kuadrant-overview-create-button {
   font-family: RedHatText, helvetica, arial, sans-serif;
-   }
+}