OCPBUGS-63391: enable keyboard shortcut for DataViewTextFilter

Author: rhamilto

frontend/packages/console-app/src/components/data-view/ConsoleDataView.tsx

@@ -10,7 +10,6 @@ import {
   DataView,
   DataViewState,
   DataViewTable,
-  DataViewTextFilter,
   DataViewToolbar,
 } from '@patternfly/react-data-view';
 import DataViewFilters from '@patternfly/react-data-view/dist/cjs/DataViewFilters';
@@ -26,6 +25,7 @@ import { LazyColumnManagementModalOverlay } from '@console/internal/components/m
 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 { useConsoleDataViewData } from './useConsoleDataViewData';
 import { useConsoleDataViewFilters } from './useConsoleDataViewFilters';
 

frontend/packages/console-app/src/components/data-view/DataViewLabelFilter.tsx

@@ -45,7 +45,7 @@ export const DataViewLabelFilter = <TData,>({
         applyLabelFilters([]);
       }}
     >
-      <div className="pf-v6-c-input-group co-filter-group">
+      <div className="pf-v6-c-input-group">
         <AutocompleteInput
           color="purple"
           onSuggestionSelect={(selected) => {

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';
+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<HTMLInputElement>, value: string) => {
+    setInputText(value);
+    onChange?.(filterId, value);
+  };
+
+  const handleDeleteChip = () => {
+    setInputText('');
+    onChange?.(filterId, '');
+  };
+
+  return (
+    <ToolbarFilter
+      categoryName={title}
+      showToolbarItem={showToolbarItem}
+      labels={inputText ? [inputText] : []}
+      deleteLabel={handleDeleteChip}
+    >
+      <TextFilter
+        label={filterId}
+        placeholder={placeholder}
+        value={inputText}
+        onChange={handleChange}
+      />
+    </ToolbarFilter>
+  );
+};

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(),

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();

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 {

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
-  }
-}

frontend/public/components/filter-toolbar.tsx

@@ -444,7 +444,7 @@ export const FilterToolbar: FC<FilterToolbarProps> = ({
                     }}
                     categoryName={translatedNameFilterTitle}
                   >
-                    <div className="pf-v6-c-input-group co-filter-group">
+                    <div className="pf-v6-c-input-group">
                       {showSearchFiltersDropdown && (
                         <ConsoleSelect
                           alwaysShowTitle