Move Search to hooks and excise PF Dropdown in favor of Select

awx/ui_next/src/components/Search/Search.jsx

@@ -1,5 +1,5 @@
 import 'styled-components/macro';
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -7,10 +7,6 @@ import { withRouter } from 'react-router-dom';
 import {
   Button,
   ButtonVariant,
-  Dropdown,
-  DropdownPosition,
-  DropdownToggle,
-  DropdownItem,
   InputGroup,
   Select,
   SelectOption,
@@ -34,116 +30,56 @@ const NoOptionDropdown = styled.div`
   border-bottom-color: var(--pf-global--BorderColor--200);
 `;
 
-class Search extends React.Component {
+function Search({
-  constructor(props) {
-    super(props);
-
-    const { columns } = this.props;
-
-    this.state = {
-      isSearchDropdownOpen: false,
-      searchKey: columns.find(col => col.isDefault).key,
-      searchValue: '',
-      isFilterDropdownOpen: false,
-    };
-
-    this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
-    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
-    this.handleDropdownSelect = this.handleDropdownSelect.bind(this);
-    this.handleSearch = this.handleSearch.bind(this);
-    this.handleTextKeyDown = this.handleTextKeyDown.bind(this);
-    this.handleFilterDropdownToggle = this.handleFilterDropdownToggle.bind(
-      this
-    );
-    this.handleFilterDropdownSelect = this.handleFilterDropdownSelect.bind(
-      this
-    );
-    this.handleFilterBooleanSelect = this.handleFilterBooleanSelect.bind(this);
-  }
-
-  handleDropdownToggle(isSearchDropdownOpen) {
-    this.setState({ isSearchDropdownOpen });
-  }
-
-  handleDropdownSelect({ target }) {
-    const { columns } = this.props;
-    const { innerText } = target;
-
-    const { key: searchKey } = columns.find(({ name }) => name === innerText);
-    this.setState({ isSearchDropdownOpen: false, searchKey });
-  }
-
-  handleSearch(e) {
-    // keeps page from fully reloading
-    e.preventDefault();
-
-    const { searchKey, searchValue } = this.state;
-    const { onSearch } = this.props;
-
-    if (searchValue) {
-      onSearch(searchKey, searchValue);
-      this.setState({ searchValue: '' });
-    }
-  }
-
-  handleSearchInputChange(searchValue) {
-    this.setState({ searchValue });
-  }
-
-  handleTextKeyDown(e) {
-    if (e.key && e.key === 'Enter') {
-      this.handleSearch(e);
-    }
-  }
-
-  handleFilterDropdownToggle(isFilterDropdownOpen) {
-    this.setState({ isFilterDropdownOpen });
-  }
-
-  handleFilterDropdownSelect(key, event, actualValue) {
-    const { onSearch, onRemove } = this.props;
-
-    if (event.target.checked) {
-      onSearch(key, actualValue);
-    } else {
-      onRemove(key, actualValue);
-    }
-  }
-
-  handleFilterBooleanSelect(key, selection) {
-    const { onReplaceSearch } = this.props;
-    onReplaceSearch(key, selection);
-  }
-
-  render() {
-    const { up } = DropdownPosition;
-    const {
   columns,
   i18n,
   onSearch,
+  onReplaceSearch,
   onRemove,
   qsConfig,
   location,
   searchableKeys,
   relatedSearchableKeys,
-    } = this.props;
+}) {
-    const {
+  const [isSearchDropdownOpen, setIsSearchDropdownOpen] = useState(false);
-      isSearchDropdownOpen,
+  const [searchKey, setSearchKey] = useState(
-      searchKey,
+    columns.find(col => col.isDefault).key
-      searchValue,
+  );
-      isFilterDropdownOpen,
+  const [searchValue, setSearchValue] = useState('');
-    } = this.state;
+  const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
-    const { name: searchColumnName } = columns.find(
+
-      ({ key }) => key === searchKey
+  const handleDropdownSelect = ({ target }) => {
+    const { key: actualSearchKey } = columns.find(
+      ({ name }) => name === target.innerText
     );
 
-    const searchDropdownItems = columns
+    setIsFilterDropdownOpen(false);
-      .filter(({ key }) => key !== searchKey)
+    setSearchKey(actualSearchKey);
-      .map(({ key, name }) => (
+  };
-        <DropdownItem key={key} component="button">
+
-          {name}
+  const handleSearch = e => {
-        </DropdownItem>
+    // keeps page from fully reloading
-      ));
+    e.preventDefault();
+
+    if (searchValue) {
+      onSearch(searchKey, searchValue);
+      setSearchValue('');
+    }
+  };
+
+  const handleTextKeyDown = e => {
+    if (e.key && e.key === 'Enter') {
+      handleSearch(e);
+    }
+  };
+
+  const handleFilterDropdownSelect = (key, event, actualValue) => {
+    if (event.target.checked) {
+      onSearch(key, actualValue);
+    } else {
+      onRemove(key, actualValue);
+    }
+  };
 
   const filterDefaultParams = (paramsArr, config) => {
     const defaultParamsKeys = Object.keys(config.defaultParams || {});
@@ -178,8 +114,7 @@ class Search extends React.Component {
         ({ key: keyToCheck }) => columnKey === keyToCheck
       ).length
         ? `${
-              columns.find(({ key: keyToCheck }) => columnKey === keyToCheck)
+            columns.find(({ key: keyToCheck }) => columnKey === keyToCheck).name
-                .name
           } (${key})`
         : columnKey;
 
@@ -204,32 +139,37 @@ class Search extends React.Component {
 
   const chipsByKey = getChipsByKey();
 
+  const { name: searchColumnName } = columns.find(
+    ({ key }) => key === searchKey
+  );
+
+  const searchOptions = columns
+    .filter(({ key }) => key !== searchKey)
+    .map(({ key, name }) => (
+      <SelectOption key={key} value={name}>
+        {name}
+      </SelectOption>
+    ));
+
   return (
     <ToolbarGroup variant="filter-group">
       <ToolbarItem>
-          {searchDropdownItems.length > 0 ? (
+        {searchOptions.length > 0 ? (
-            <Dropdown
+          <Select
-              onToggle={this.handleDropdownToggle}
+            variant={SelectVariant.single}
-              onSelect={this.handleDropdownSelect}
+            aria-label={i18n._(t`Simple key select`)}
-              direction={up}
+            onToggle={setIsSearchDropdownOpen}
-              toggle={
+            onSelect={handleDropdownSelect}
-                <DropdownToggle
+            selections={searchColumnName}
-                  id="awx-search"
-                  onToggle={this.handleDropdownToggle}
-                  style={{ width: '100%' }}
-                >
-                  {searchColumnName}
-                </DropdownToggle>
-              }
             isOpen={isSearchDropdownOpen}
-              dropdownItems={searchDropdownItems}
+          >
-            />
+            {searchOptions}
+          </Select>
         ) : (
           <NoOptionDropdown>{searchColumnName}</NoOptionDropdown>
         )}
       </ToolbarItem>
-        {columns.map(
+      {columns.map(({ key, name, options, isBoolean, booleanLabels = {} }) => (
-          ({ key, name, options, isBoolean, booleanLabels = {} }) => (
         <ToolbarFilter
           chips={chipsByKey[key] ? chipsByKey[key].chips : []}
           deleteChip={(unusedKey, chip) => {
@@ -252,9 +192,9 @@ class Search extends React.Component {
                 <Select
                   variant={SelectVariant.checkbox}
                   aria-label={name}
-                      onToggle={this.handleFilterDropdownToggle}
+                  onToggle={setIsFilterDropdownOpen}
                   onSelect={(event, selection) =>
-                        this.handleFilterDropdownSelect(key, event, selection)
+                    handleFilterDropdownSelect(key, event, selection)
                   }
                   selections={chipsByKey[key].chips.map(chip => {
                     const [, ...value] = chip.key.split(':');
@@ -274,10 +214,8 @@ class Search extends React.Component {
             (isBoolean && (
               <Select
                 aria-label={name}
-                    onToggle={this.handleFilterDropdownToggle}
+                onToggle={setIsFilterDropdownOpen}
-                    onSelect={(event, selection) =>
+                onSelect={(event, selection) => onReplaceSearch(key, selection)}
-                      this.handleFilterBooleanSelect(key, selection)
-                    }
                 selections={chipsByKey[key].chips[0]}
                 isOpen={isFilterDropdownOpen}
                 placeholderText={`Filter By ${name}`}
@@ -303,15 +241,15 @@ class Search extends React.Component {
                   }
                   aria-label={i18n._(t`Search text input`)}
                   value={searchValue}
-                      onChange={this.handleSearchInputChange}
+                  onChange={setSearchValue}
-                      onKeyDown={this.handleTextKeyDown}
+                  onKeyDown={handleTextKeyDown}
                 />
                 <div css={!searchValue && `cursor:not-allowed`}>
                   <Button
                     variant={ButtonVariant.control}
                     isDisabled={!searchValue}
                     aria-label={i18n._(t`Search submit button`)}
-                        onClick={this.handleSearch}
+                    onClick={handleSearch}
                   >
                     <SearchIcon />
                   </Button>
@@ -319,8 +257,7 @@ class Search extends React.Component {
               </InputGroup>
             )}
         </ToolbarFilter>
-          )
+      ))}
-        )}
       {/* Add a ToolbarFilter for any key that doesn't have it's own
       search column so the chips show up */}
       {Object.keys(chipsByKey)
@@ -328,9 +265,7 @@ class Search extends React.Component {
         .filter(val => columns.map(val2 => val2.key).indexOf(val) === -1)
         .map(leftoverKey => (
           <ToolbarFilter
-              chips={
+            chips={chipsByKey[leftoverKey] ? chipsByKey[leftoverKey].chips : []}
-                chipsByKey[leftoverKey] ? chipsByKey[leftoverKey].chips : []
-              }
             deleteChip={(unusedKey, chip) => {
               const [columnKey, ...value] = chip.key.split(':');
               onRemove(columnKey, value.join(':'));
@@ -345,7 +280,6 @@ class Search extends React.Component {
         ))}
     </ToolbarGroup>
   );
-  }
 }
 
 Search.propTypes = {

awx/ui_next/src/components/Search/Search.test.jsx

@@ -49,26 +49,9 @@ describe('<Search />', () => {
     expect(onSearch).toBeCalledWith('name__icontains', 'test-321');
   });
 
-  test('handleDropdownToggle properly updates state', async () => {
+  test('changing key select updates which key is called for onSearch', () => {
-    const columns = [{ name: 'Name', key: 'name__icontains', isDefault: true }];
+    const searchButton = 'button[aria-label="Search submit button"]';
-    const onSearch = jest.fn();
+    const searchTextInput = 'input[aria-label="Search text input"]';
-    const wrapper = mountWithContexts(
-      <Toolbar
-        id={`${QS_CONFIG.namespace}-list-toolbar`}
-        clearAllFilters={() => {}}
-        collapseListedFiltersBreakpoint="lg"
-      >
-        <ToolbarContent>
-          <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
-        </ToolbarContent>
-      </Toolbar>
-    ).find('Search');
-    expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
-    wrapper.instance().handleDropdownToggle(true);
-    expect(wrapper.state('isSearchDropdownOpen')).toEqual(true);
-  });
-
-  test('handleDropdownSelect properly updates state', async () => {
     const columns = [
       { name: 'Name', key: 'name__icontains', isDefault: true },
       { name: 'Description', key: 'description__icontains' },
@@ -84,12 +67,20 @@ describe('<Search />', () => {
           <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
         </ToolbarContent>
       </Toolbar>
-    ).find('Search');
+    );
-    expect(wrapper.state('searchKey')).toEqual('name__icontains');
+
+    act(() => {
       wrapper
-      .instance()
+        .find('Select[aria-label="Simple key select"]')
-      .handleDropdownSelect({ target: { innerText: 'Description' } });
+        .invoke('onSelect')({ target: { innerText: 'Description' } });
-    expect(wrapper.state('searchKey')).toEqual('description__icontains');
+    });
+    wrapper.update();
+    wrapper.find(searchTextInput).instance().value = 'test-321';
+    wrapper.find(searchTextInput).simulate('change');
+    wrapper.find(searchButton).simulate('click');
+
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('description__icontains', 'test-321');
   });
 
   test('attempt to search with empty string', () => {