Use a unified text input for searching purpose

frontend/__tests__/components/factory/list-page.spec.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { TextInput } from '@patternfly/react-core';
 import {
   TextFilter,
   ListPageWrapper_,
@@ -22,11 +23,11 @@ describe(TextFilter.displayName, () => {
   });
 
   it('renders text input', () => {
-    const input: ShallowWrapper<React.InputHTMLAttributes<any>> = wrapper.find('input');
+    const input: ShallowWrapper<any> = wrapper.find(TextInput);
 
     expect(input.props().type).toEqual('text');
     expect(input.props().placeholder).toEqual(`Filter ${label}...`);
-    expect(input.props().onChange).toEqual(onChange);
+    expect(input.props().onChange()).toEqual(((e) => onChange(e))());
     expect(input.props().defaultValue).toEqual(defaultValue);
   });
 });

frontend/packages/console-shared/src/hooks/document-listener.ts

@@ -11,7 +11,14 @@ export enum KeyEventModes {
   FOCUS = 'FOCUS',
 }
 
-export const useDocumentListener = <T extends HTMLElement>(keyEventMap: KeyEventMap) => {
+const textInputKeyHandler = {
+  Escape: KeyEventModes.HIDE,
+  '/': KeyEventModes.FOCUS,
+};
+
+export const useDocumentListener = <T extends HTMLElement>(
+  keyEventMap: KeyEventMap = textInputKeyHandler,
+) => {
   const [visible, setVisible] = React.useState(true);
   const ref = React.useRef<T>(null);
 

frontend/packages/dev-console/src/components/custom-resource-list/CustomResourceList.tsx

@@ -97,7 +97,7 @@ const CustomResourceList: React.FC<CustomResourceListProps> = ({
       {textFilterReducer && (
         <div className="co-m-pane__filter-bar">
           <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--filter">
-            <TextFilter label="by name" onChange={(e) => applyTextFilter(e.target.value)} />
+            <TextFilter label="by name" onChange={applyTextFilter} />
           </div>
         </div>
       )}

frontend/packages/dev-console/src/components/topology/filters/TopologyFilterBar.tsx

@@ -52,7 +52,7 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
             placeholder="Find by name..."
             value={searchQuery}
             autoFocus
-            onChange={(e) => onSearchQueryChange(e.target.value)}
+            onChange={onSearchQueryChange}
           />
         </ToolbarItem>
         <ToolbarItem>

frontend/public/components/RBAC/role.jsx

@@ -89,7 +89,7 @@ class Details extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
-    this.changeFilter = (e) => this.setState({ ruleFilter: e.target.value });
+    this.changeFilter = (e) => this.setState({ ruleFilter: e });
   }
 
   render() {

frontend/public/components/api-explorer.tsx

@@ -536,8 +536,6 @@ const APIResourceAccessReview: React.FC<APIResourceTabProps> = ({
   const sortedData = _.orderBy(filteredData, ['type', 'name'], ['asc', 'asc']);
 
   // event handlers
-  const onFilterChange: React.ReactEventHandler<HTMLInputElement> = (e) =>
-    setFilter(e.currentTarget.value);
   const toggleShowUsers = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
     setShowUsers(!showUsers);
@@ -569,7 +567,7 @@ const APIResourceAccessReview: React.FC<APIResourceTabProps> = ({
           />
         </div>
         <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--filter">
-          <TextFilter defaultValue={filter} label="by subject" onChange={onFilterChange} />
+          <TextFilter defaultValue={filter} label="by subject" onChange={setFilter} />
         </div>
       </div>
       <div className="co-m-pane__body">

frontend/public/components/autocomplete.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
-import { TextInput } from '@patternfly/react-core';
 import { useDocumentListener, getLabelsAsString } from '@console/shared';
 import { KeyEventModes } from '@console/shared/src/hooks';
 import { fuzzyCaseInsensitive } from './factory/table-filters';
 import { K8sResourceCommon } from '../module/k8s';
+import { TextFilter } from './factory';
 
 const MAX_SUGGESTIONS = 5;
 
@@ -19,15 +19,9 @@ const suggestionBoxKeyHandler = {
   Escape: KeyEventModes.HIDE,
 };
 
-const textInputKeyHandler = {
-  Escape: KeyEventModes.HIDE,
-  '/': KeyEventModes.FOCUS,
-};
-
 const AutocompleteInput: React.FC<AutocompleteInputProps> = (props) => {
   const [suggestions, setSuggestions] = React.useState<string[]>();
   const { visible, setVisible, ref } = useDocumentListener<HTMLDivElement>(suggestionBoxKeyHandler);
-  const { ref: textInputRef } = useDocumentListener<HTMLInputElement>(textInputKeyHandler);
   const {
     textValue,
     setTextValue,
@@ -73,18 +67,14 @@ const AutocompleteInput: React.FC<AutocompleteInputProps> = (props) => {
   return (
     <div className="co-suggestion-box" ref={ref}>
       <div className="has-feedback">
-        <TextInput
+        <TextFilter
           data-test-id="list-page-search-input"
           aria-label="Enter Query"
           value={textValue}
           onChange={handleInput}
           placeholder={placeholder}
           onFocus={activate}
-          ref={textInputRef}
         />
-        <span className="form-control-feedback form-control-feedback--keyboard-hint">
-          <kbd>/</kbd>
-        </span>
       </div>
       {showSuggestions && (
         <div

frontend/public/components/cluster-settings/global-config.tsx

@@ -166,7 +166,7 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
               <TextFilter
                 value={textFilter}
                 label="by name or description"
-                onChange={(e) => this.setState({ textFilter: e.target.value })}
+                onChange={(e) => this.setState({ textFilter: e })}
               />
             </div>
           </div>

frontend/public/components/events.jsx

@@ -209,7 +209,7 @@ export class EventsList extends React.Component {
             <TextFilter
               autoFocus={autoFocus}
               label="Events by name or message"
-              onChange={(e) => this.setState({ textFilter: e.target.value || '' })}
+              onChange={(e) => this.setState({ textFilter: e || '' })}
             />
           </div>
           <div className="form-group">

frontend/public/components/factory/list-page.jsx

@@ -4,10 +4,10 @@ import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { Button } from '@patternfly/react-core';
+import { Button, TextInput } from '@patternfly/react-core';
 
 import { withFallback } from '@console/shared/src/components/error/error-boundary';
-import { KEYBOARD_SHORTCUTS } from '@console/shared';
+import { useDocumentListener } from '@console/shared';
 import { filterList } from '../../actions/k8s';
 import { storagePrefix } from '../row-filter';
 import { ErrorPage404, ErrorBoundaryFallback } from '../error';
@@ -25,66 +25,42 @@ import {
 } from '../utils';
 import { FilterToolbar } from '../filter-toolbar';
 
-/** @type {React.SFC<{disabled?: boolean, label?: string, onChange: React.ChangeEventHandler<any>, defaultValue?: string, value?: string, placeholder?: string, autoFocus?: boolean,}}>} */
-export const TextFilter = ({
-  label,
-  onChange,
-  defaultValue,
-  style,
-  className,
-  value,
-  placeholder = `Filter ${label}...`,
-  autoFocus = false,
-}) => {
-  const input = React.useRef();
-  const onKeyDown = (e) => {
-    const { nodeName } = e.target;
-    if (
-      nodeName === 'INPUT' ||
-      nodeName === 'TEXTAREA' ||
-      e.key !== KEYBOARD_SHORTCUTS.focusFilterInput
-    ) {
-      return;
-    }
-
-    e.stopPropagation();
-    e.preventDefault();
-    input.current.focus();
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', onKeyDown);
-    // Remove event listeners on cleanup
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-    };
-  }, []);
+/** @type {React.SFC<{disabled?: boolean, label?: string, onChange: (value: string) => void;, defaultValue?: string, value?: string, placeholder?: string, autoFocus?: boolean, onFocus?:any, name?:string, id?: string, onKeyDown?: any, parentClassName?: string }}>} */
+export const TextFilter = (props) => {
+  const {
+    label,
+    defaultValue,
+    className,
+    value,
+    placeholder = `Filter ${label}...`,
+    autoFocus = false,
+    onChange,
+    parentClassName,
+  } = props;
+  const { ref } = useDocumentListener();
 
   return (
-    <div className="has-feedback">
-      <input
-        ref={input}
-        autoCapitalize="none"
-        className={classNames('pf-c-form-control co-text-filter', className)}
+    <div className={classNames('has-feedback', parentClassName)}>
+      <TextInput
+        {...props}
+        className={classNames('co-text-filter', className)}
         data-test-id="item-filter"
-        value={value}
-        defaultValue={defaultValue}
-        onChange={onChange}
-        onKeyDown={(e) => e.key === 'Escape' && e.target.blur()}
+        aria-label={placeholder}
         placeholder={placeholder}
-        style={style}
+        onChange={(val) => onChange(val)}
+        ref={ref}
+        autoFocus={autoFocus}
+        defaultValue={defaultValue}
         tabIndex={0}
+        value={value}
         type="text"
-        autoFocus={autoFocus}
-        aria-label={placeholder}
       />
       <span className="form-control-feedback form-control-feedback--keyboard-hint">
         <kbd>/</kbd>
       </span>
     </div>
   );
 };
-
 TextFilter.displayName = 'TextFilter';
 
 // TODO (jon) make this into "withListPageFilters" HOC

frontend/public/components/monitoring.tsx

@@ -1053,7 +1053,7 @@ const MonitoringListPage = connect(filtersToProps)(
     }
 
     applyTextFilter(e) {
-      const v = e.target.value;
+      const v = e;
       const { nameFilterID, reduxID } = this.props;
       store.dispatch(k8sActions.filterList(reduxID, nameFilterID, v));
 

frontend/public/components/monitoring/alert-manager-config.tsx

@@ -374,11 +374,7 @@ const Receivers = () => {
           </Link>
         </div>
         <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--filter">
-          <TextFilter
-            defaultValue=""
-            label="Receivers by Name"
-            onChange={(e) => setReceiverFilter(e.target.value)}
-          />
+          <TextFilter defaultValue="" label="Receivers by Name" onChange={setReceiverFilter} />
         </div>
       </div>
       {numOfIncompleteReceivers > 0 && (

frontend/public/components/overview/index.tsx

@@ -132,11 +132,7 @@ class OverviewHeading_ extends React.Component<OverviewHeadingProps> {
           />
         </div>
         <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--filter">
-          <TextFilter
-            defaultValue={filterValue}
-            label="by name"
-            onChange={(e) => changeFilter(e.target.value)}
-          />
+          <TextFilter defaultValue={filterValue} label="by name" onChange={changeFilter} />
         </div>
       </div>
     );

frontend/public/components/search-filter-dropdown.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, TextInput } from '@patternfly/react-core';
+import { Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
 import { CaretDownIcon, FilterIcon } from '@patternfly/react-icons';
+import { TextFilter } from './factory';
 
 export enum searchFilterValues {
   Label = 'Label',
@@ -51,7 +52,8 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
         isOpen={isOpen}
         dropdownItems={dropdownItems}
       />
-      <TextInput
+      <TextFilter
+        parentClassName="has-feedback--full-width"
         onChange={handleInputValue}
         placeholder={selected === searchFilterValues.Label ? 'app=frontend' : 'my-resource'}
         name="search-filter-input"

frontend/public/style/_forms.scss

@@ -53,11 +53,8 @@
   }
 }
 
-.co-suggestion-box input:focus,
-.co-text-filter:focus {
-  + .form-control-feedback--keyboard-hint {
-    display: none;
-  }
+.co-text-filter:focus + .form-control-feedback--keyboard-hint {
+  display: none;
 }
 
 .co-text-filter {
@@ -72,6 +69,10 @@
   padding-right: 25px;
 }
 
+.has-feedback--full-width {
+  width: 100%;
+}
+
 .pf-c-form__actions--right {
   justify-content: flex-end;
 }
@@ -84,4 +85,3 @@
 .pf-c-form__group--no-top-margin {
   margin-top: 0 !important;
 }
-