adding dropdown

Kuadrant · Nov 19, 2024 · db43509 · db43509
1 parent 1e786a3
commit db43509
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 38 deletions.
diff --git a/locales/en/plugin__kuadrant-console-plugin.json b/locales/en/plugin__kuadrant-console-plugin.json
@@ -85,7 +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",
+  "Search by": "Search by",
   "Select a gateway": "Select a gateway",
   "Select a Protocol": "Select a Protocol",
   "Select an ClusterIssuer": "Select an ClusterIssuer",

diff --git a/src/components/KuadrantOverviewPage.tsx b/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 />
 

diff --git a/src/components/ResourceList.tsx b/src/components/ResourceList.tsx
@@ -11,7 +11,16 @@ import {
   EmptyStateBody,
   Title,
   Tooltip,
-  SearchInput,
+  ToolbarItem,
+  ToolbarGroup,
+  Select,
+  MenuToggle,
+  InputGroup,
+  TextInput,
+  MenuToggleElement,
+  SelectOption,
+  Toolbar,
+  ToolbarContent,
 } from '@patternfly/react-core';
 import {
   K8sResourceCommon,
@@ -358,24 +367,36 @@ const ResourceList: React.FC<ResourceListProps> = ({
 
   // Implement local filter state
   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;
 
     if (filters) {
-      const search = filters.toLowerCase().trim().split(/\s+/).filter(Boolean);
+      const filterValue = filters.toLowerCase();
       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;
+        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);
@@ -446,11 +467,6 @@ const ResourceList: React.FC<ResourceListProps> = ({
     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];
@@ -530,17 +546,41 @@ const ResourceList: React.FC<ResourceListProps> = ({
       )}
       <div className="kuadrant-policy-list-body">
         <ListPageBody>
-          <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>
-
+          <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} />

diff --git a/src/components/kuadrant.css b/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;
-   }
+}