diff --git a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx index 58330f0c38d..0f64073859a 100644 --- a/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx +++ b/frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx @@ -9,7 +9,6 @@ import { DataView, DataViewState, DataViewTable, - DataViewTextFilter, DataViewToolbar, } from '@patternfly/react-data-view'; import DataViewFilters from '@patternfly/react-data-view/dist/cjs/DataViewFilters'; @@ -22,6 +21,7 @@ import { TableColumn } from '@console/internal/module/k8s'; import { EmptyBox } from '@console/shared/src/components/empty-state/EmptyBox'; import { StatusBox } from '@console/shared/src/components/status/StatusBox'; import { DataViewLabelFilter } from './DataViewLabelFilter'; +import { DataViewTextFilter } from './DataViewTextFilter'; import { ResourceFilters, ResourceMetadata, GetDataViewRows } from './types'; import { useConsoleDataViewData } from './useConsoleDataViewData'; import { useConsoleDataViewFilters } from './useConsoleDataViewFilters'; diff --git a/frontend/packages/console-app/src/components/data-view/DataViewLabelFilter.tsx b/frontend/packages/console-app/src/components/data-view/DataViewLabelFilter.tsx index 7d8ad33dcdb..4eda390d212 100644 --- a/frontend/packages/console-app/src/components/data-view/DataViewLabelFilter.tsx +++ b/frontend/packages/console-app/src/components/data-view/DataViewLabelFilter.tsx @@ -45,7 +45,7 @@ export const DataViewLabelFilter = ({ applyLabelFilters([]); }} > -
+
{ diff --git a/frontend/packages/console-app/src/components/data-view/DataViewTextFilter.tsx b/frontend/packages/console-app/src/components/data-view/DataViewTextFilter.tsx new file mode 100644 index 00000000000..94ae8118560 --- /dev/null +++ b/frontend/packages/console-app/src/components/data-view/DataViewTextFilter.tsx @@ -0,0 +1,55 @@ +import type { FormEvent } from 'react'; +import { useEffect, useState } from 'react'; +import { ToolbarFilter } from '@patternfly/react-core'; +import { useSearchParams } from 'react-router-dom-v5-compat'; +import { TextFilter } from '@console/internal/components/factory/text-filter'; + +type DataViewTextFilterProps = { + title: string; + filterId: string; + placeholder: string; + onChange?: (key: string, selectedValue: string) => void; + showToolbarItem?: boolean; +}; + +export const DataViewTextFilter = ({ + title, + filterId, + placeholder, + onChange, + showToolbarItem, +}: DataViewTextFilterProps) => { + const [searchParams] = useSearchParams(); + const [inputText, setInputText] = useState(searchParams.get(filterId) ?? ''); + + // Sync local state with URL changes + useEffect(() => { + setInputText(searchParams.get(filterId) ?? ''); + }, [searchParams, filterId]); + + const handleChange = (_event: FormEvent, value: string) => { + setInputText(value); + onChange?.(filterId, value); + }; + + const handleDeleteChip = () => { + setInputText(''); + onChange?.(filterId, ''); + }; + + return ( + + + + ); +}; diff --git a/frontend/packages/helm-plugin/integration-tests/support/pages/helm/helm-page.ts b/frontend/packages/helm-plugin/integration-tests/support/pages/helm/helm-page.ts index e1c4a243603..7d940ef8066 100644 --- a/frontend/packages/helm-plugin/integration-tests/support/pages/helm/helm-page.ts +++ b/frontend/packages/helm-plugin/integration-tests/support/pages/helm/helm-page.ts @@ -12,7 +12,7 @@ export const helmPage = { search: (name: string) => { cy.get(helmPO.filters).within(() => cy.get('.pf-v6-c-menu-toggle').first().click()); cy.get('.pf-v6-c-menu__list-item').contains('Name').click(); - cy.get('[aria-label="Name filter"]').clear().type(name); + cy.get('[aria-label="Filter by name"]').clear().type(name); }, verifyHelmReleasesDisplayed: () => cy.get(helmPO.table).should('be.visible'), clickHelmReleaseName: (name: string) => cy.get(`a[title="${name}"]`).click(), diff --git a/frontend/packages/integration-tests-cypress/views/list-page.ts b/frontend/packages/integration-tests-cypress/views/list-page.ts index f04f5e49688..ebf71534b0d 100644 --- a/frontend/packages/integration-tests-cypress/views/list-page.ts +++ b/frontend/packages/integration-tests-cypress/views/list-page.ts @@ -62,7 +62,7 @@ export const listPage = { cy.get('.pf-v6-c-menu-toggle').first().click(), ); cy.get('.pf-v6-c-menu__list-item').contains('Name').click(); - cy.get('[aria-label="Name filter"]').clear().type(name); + cy.get('[aria-label="Filter by name"]').clear().type(name); }, by: (checkboxLabel: string) => { cy.get('[data-ouia-component-id="DataViewCheckboxFilter"]').click(); diff --git a/frontend/public/components/_autocomplete.scss b/frontend/public/components/_autocomplete.scss index b5f47209a5c..0cfb06685c7 100644 --- a/frontend/public/components/_autocomplete.scss +++ b/frontend/public/components/_autocomplete.scss @@ -2,12 +2,6 @@ position: relative; width: 100%; z-index: var(--pf-t--global--z-index--sm); - @media (max-width: $screen-xs-min) { - max-width: calc(100% - 95px); - } - @media (min-width: $screen-xs-min) and (max-width: $screen-sm-min) { - max-width: 200px; - } } .co-suggestion-box__suggestions { @@ -17,9 +11,6 @@ gap: var(--pf-t--global--spacer--gap--group--vertical); position: absolute; width: 100%; - @media (min-width: $screen-xs-min) and (max-width: $screen-sm-min) { - max-width: 200px; - } } .co-suggestion-box__suggestions--shadowed { diff --git a/frontend/public/components/_filter-toolbar.scss b/frontend/public/components/_filter-toolbar.scss index 30fb246ffaa..644725d4ff3 100644 --- a/frontend/public/components/_filter-toolbar.scss +++ b/frontend/public/components/_filter-toolbar.scss @@ -1,29 +1,3 @@ -.co-filter-dropdown__item { - display: inline-flex; - pointer-events: none; -} - -.co-filter-dropdown__list-item { - list-style: none; -} - -/* No way to reach this ul */ -.co-filter-dropdown-group > ul { - margin-left: 0; - padding-left: 0; -} - -.co-filter-dropdown-item { - display: inline-flex; - margin: var(--pf-t--global--spacer--xs) 0; -} - .co-filter-dropdown-item__name { padding: 0 var(--pf-t--global--spacer--xs); } - -@media (min-width: $pf-v6-global--breakpoint--md) { - .co-filter-group { - width: 350px !important; // enable full placeholder text to display - } -} diff --git a/frontend/public/components/filter-toolbar.tsx b/frontend/public/components/filter-toolbar.tsx index 50e02e04277..1b6d728b00c 100644 --- a/frontend/public/components/filter-toolbar.tsx +++ b/frontend/public/components/filter-toolbar.tsx @@ -442,7 +442,7 @@ export const FilterToolbar: React.FC = ({ }} categoryName={translatedNameFilterTitle} > -
+
{showSearchFiltersDropdown && (