diff --git a/locales/en/plugin__kuadrant-console-plugin.json b/locales/en/plugin__kuadrant-console-plugin.json index 6638bab..252e479 100644 --- 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 index 9103387..bb5719e 100644 --- a/src/components/KuadrantOverviewPage.tsx +++ b/src/components/KuadrantOverviewPage.tsx @@ -171,7 +171,7 @@ const KuadrantOverviewPage: React.FC = () => { {t('Kuadrant')} - + {t('Kuadrant')} Overview
diff --git a/src/components/ResourceList.tsx b/src/components/ResourceList.tsx index 2df70a1..2a1618a 100644 --- 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 = ({ // Implement local filter state const [filters, setFilters] = React.useState(''); + const [isOpen, setIsOpen] = React.useState(false); + const [filterSelected, setFilterSelected] = React.useState('Name'); const [filteredData, setFilteredData] = React.useState([]); + const onToggleClick = () => { + setIsOpen(!isOpen); + }; + + const onFilterSelect = ( + _event: React.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 = ({ setFilters(value); }; - const handleClear = () => { - setFilters(''); - setCurrentPage(1); - }; - const ResourceRow: React.FC> = ({ obj, activeColumnIDs }) => { const { apiVersion, kind } = obj; const [group, version] = apiVersion.includes('/') ? apiVersion.split('/') : ['', apiVersion]; @@ -530,17 +546,41 @@ const ResourceList: React.FC = ({ )}
-
- handleFilterChange(value)} - onClear={handleClear} - aria-label="Global search input" - style={{ marginRight: '8px', width: '350px' }} - /> -
- + + + + + + + + + + handleFilterChange(value)} + className="pf-v5-c-form-control co-text-filter-with-icon " + /> + + + + + {paginatedData.length === 0 && allLoaded ? ( diff --git a/src/components/kuadrant.css b/src/components/kuadrant.css index d2c7022..c56ea79 100644 --- 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; - } +}