Merge pull request #7880 from jlmitch5/kebabifyAdvancedSearch

kebabify additional controls when advanced search is displayed

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/AddDropDownButton/AddDropDownButton.jsx

@@ -1,25 +1,46 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, Fragment } from 'react';
 import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import PropTypes from 'prop-types';
-import { Dropdown, DropdownPosition } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownPosition,
+  DropdownItem,
+} from '@patternfly/react-core';
 import { ToolbarAddButton } from '../PaginatedDataList';
+import { toTitleCase } from '../../util/strings';
+import { useKebabifiedMenu } from '../../contexts/Kebabified';
 
-function AddDropDownButton({ dropdownItems }) {
+function AddDropDownButton({ dropdownItems, i18n }) {
+  const { isKebabified } = useKebabifiedMenu();
   const [isOpen, setIsOpen] = useState(false);
   const element = useRef(null);
 
+  useEffect(() => {
     const toggle = e => {
-    if (!element || !element.current.contains(e.target)) {
+      if (!isKebabified && (!element || !element.current.contains(e.target))) {
         setIsOpen(false);
       }
     };
 
-  useEffect(() => {
     document.addEventListener('click', toggle, false);
     return () => {
       document.removeEventListener('click', toggle);
     };
-  }, []);
+  }, [isKebabified]);
+
+  if (isKebabified) {
+    return (
+      <Fragment>
+        {dropdownItems.map(item => (
+          <DropdownItem key={item.url} component={Link} to={item.url}>
+            {toTitleCase(`${i18n._(t`Add`)} ${item.label}`)}
+          </DropdownItem>
+        ))}
+      </Fragment>
+    );
+  }
 
   return (
     <div ref={element} key="add">
@@ -52,4 +73,4 @@ AddDropDownButton.propTypes = {
 };
 
 export { AddDropDownButton as _AddDropDownButton };
-export default AddDropDownButton;
+export default withI18n()(AddDropDownButton);

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -1,4 +1,4 @@
-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';
@@ -9,17 +9,17 @@ import {
   ToolbarGroup,
   ToolbarItem,
   ToolbarToggleGroup,
+  Dropdown,
+  KebabToggle,
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
 import Sort from '../Sort';
-
 import { SearchColumns, SortColumns, QSConfig } from '../../types';
+import { KebabifiedProvider } from '../../contexts/Kebabified';
 
-class DataListToolbar extends React.Component {
+function DataListToolbar({
-  render() {
-    const {
   itemCount,
   clearAllFilters,
   searchColumns,
@@ -40,9 +40,16 @@ class DataListToolbar extends React.Component {
   i18n,
   qsConfig,
   pagination,
-    } = this.props;
+}) {
-
   const showExpandCollapse = onCompact && onExpand;
+  const [kebabIsOpen, setKebabIsOpen] = useState(false);
+  const [advancedSearchShown, setAdvancedSearchShown] = useState(false);
+
+  const onShowAdvancedSearch = shown => {
+    setAdvancedSearchShown(shown);
+    setKebabIsOpen(false);
+  };
+
   return (
     <Toolbar
       id={`${qsConfig.namespace}-list-toolbar`}
@@ -74,6 +81,7 @@ class DataListToolbar extends React.Component {
               relatedSearchableKeys={relatedSearchableKeys}
               onSearch={onSearch}
               onReplaceSearch={onReplaceSearch}
+              onShowAdvancedSearch={onShowAdvancedSearch}
               onRemove={onRemove}
             />
           </ToolbarItem>
@@ -94,18 +102,35 @@ class DataListToolbar extends React.Component {
             </Fragment>
           </ToolbarGroup>
         )}
+        {advancedSearchShown && (
+          <ToolbarItem>
+            <Dropdown
+              toggle={<KebabToggle onToggle={setKebabIsOpen} />}
+              isOpen={kebabIsOpen}
+              isPlain
+              dropdownItems={additionalControls.map(control => {
+                return (
+                  <KebabifiedProvider value={{ isKebabified: true }}>
+                    {control}
+                  </KebabifiedProvider>
+                );
+              })}
+            />
+          </ToolbarItem>
+        )}
+        {!advancedSearchShown && (
           <ToolbarGroup>
             {additionalControls.map(control => (
               <ToolbarItem key={control.key}>{control}</ToolbarItem>
             ))}
           </ToolbarGroup>
-          {pagination && itemCount > 0 && (
+        )}
+        {!advancedSearchShown && pagination && itemCount > 0 && (
           <ToolbarItem variant="pagination">{pagination}</ToolbarItem>
         )}
       </ToolbarContent>
     </Toolbar>
   );
-  }
 }
 
 DataListToolbar.propTypes = {

awx/ui_next/src/components/PaginatedDataList/ToolbarAddButton.jsx

@@ -1,16 +1,32 @@
 import React from 'react';
 import { string, func } from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
+import { useKebabifiedMenu } from '../../contexts/Kebabified';
 
 function ToolbarAddButton({ linkTo, onClick, i18n, isDisabled }) {
+  const { isKebabified } = useKebabifiedMenu();
+
   if (!linkTo && !onClick) {
     throw new Error(
       'ToolbarAddButton requires either `linkTo` or `onClick` prop'
     );
   }
+  if (isKebabified) {
+    return (
+      <DropdownItem
+        key="add"
+        isDisabled={isDisabled}
+        component={linkTo ? Link : Button}
+        to={linkTo}
+        onClick={!onClick ? undefined : onClick}
+      >
+        {i18n._(t`Add`)}
+      </DropdownItem>
+    );
+  }
   if (linkTo) {
     return (
       <Tooltip content={i18n._(t`Add`)} position="top">

awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -8,10 +8,11 @@ import {
   shape,
   checkPropTypes,
 } from 'prop-types';
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Button, DropdownItem, Tooltip } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import AlertModal from '../AlertModal';
+import { Kebabified } from '../../contexts/Kebabified';
 
 const requireNameOrUsername = props => {
   const { name, username } = props;
@@ -138,7 +139,19 @@ class ToolbarDeleteButton extends React.Component {
     // we can delete the extra <div> around the <DeleteButton> below.
     // See: https://github.com/patternfly/patternfly-react/issues/1894
     return (
+      <Kebabified>
+        {({ isKebabified }) => (
           <Fragment>
+            {isKebabified ? (
+              <DropdownItem
+                key="add"
+                isDisabled={isDisabled}
+                component="Button"
+                onClick={this.handleConfirmDelete}
+              >
+                {i18n._(t`Delete`)}
+              </DropdownItem>
+            ) : (
               <Tooltip content={this.renderTooltip()} position="top">
                 <div>
                   <Button
@@ -151,6 +164,7 @@ class ToolbarDeleteButton extends React.Component {
                   </Button>
                 </div>
               </Tooltip>
+            )}
             {isModalOpen && (
               <AlertModal
                 variant="danger"
@@ -186,6 +200,8 @@ class ToolbarDeleteButton extends React.Component {
               </AlertModal>
             )}
           </Fragment>
+        )}
+      </Kebabified>
     );
   }
 }

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

@@ -40,6 +40,7 @@ function Search({
   location,
   searchableKeys,
   relatedSearchableKeys,
+  onShowAdvancedSearch,
 }) {
   const [isSearchDropdownOpen, setIsSearchDropdownOpen] = useState(false);
   const [searchKey, setSearchKey] = useState(
@@ -62,7 +63,7 @@ function Search({
     const { key: actualSearchKey } = columns.find(
       ({ name }) => name === target.innerText
     );
-
+    onShowAdvancedSearch(actualSearchKey === 'advanced');
     setIsFilterDropdownOpen(false);
     setSearchKey(actualSearchKey);
   };
@@ -301,6 +302,7 @@ Search.propTypes = {
   columns: SearchColumns.isRequired,
   onSearch: PropTypes.func,
   onRemove: PropTypes.func,
+  onShowAdvancedSearch: PropTypes.func.isRequired,
 };
 
 Search.defaultProps = {

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

@@ -36,7 +36,12 @@ describe('<Search />', () => {
         collapseListedFiltersBreakpoint="lg"
       >
         <ToolbarContent>
-          <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+            onShowAdvancedSearch={jest.fn}
+          />
         </ToolbarContent>
       </Toolbar>
     );
@@ -64,7 +69,12 @@ describe('<Search />', () => {
         collapseListedFiltersBreakpoint="lg"
       >
         <ToolbarContent>
-          <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+            onShowAdvancedSearch={jest.fn}
+          />
         </ToolbarContent>
       </Toolbar>
     );
@@ -83,6 +93,50 @@ describe('<Search />', () => {
     expect(onSearch).toBeCalledWith('description__icontains', 'test-321');
   });
 
+  test('changing key select to and from advanced causes onShowAdvancedSearch callback to be invoked', () => {
+    const columns = [
+      { name: 'Name', key: 'name__icontains', isDefault: true },
+      { name: 'Description', key: 'description__icontains' },
+      { name: 'Advanced', key: 'advanced' },
+    ];
+    const onSearch = jest.fn();
+    const onShowAdvancedSearch = jest.fn();
+    const wrapper = mountWithContexts(
+      <Toolbar
+        id={`${QS_CONFIG.namespace}-list-toolbar`}
+        clearAllFilters={() => {}}
+        collapseListedFiltersBreakpoint="lg"
+      >
+        <ToolbarContent>
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+            onShowAdvancedSearch={onShowAdvancedSearch}
+          />
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    act(() => {
+      wrapper
+        .find('Select[aria-label="Simple key select"]')
+        .invoke('onSelect')({ target: { innerText: 'Advanced' } });
+    });
+    wrapper.update();
+    expect(onShowAdvancedSearch).toHaveBeenCalledTimes(1);
+    expect(onShowAdvancedSearch).toBeCalledWith(true);
+    jest.clearAllMocks();
+    act(() => {
+      wrapper
+        .find('Select[aria-label="Simple key select"]')
+        .invoke('onSelect')({ target: { innerText: 'Description' } });
+    });
+    wrapper.update();
+    expect(onShowAdvancedSearch).toHaveBeenCalledTimes(1);
+    expect(onShowAdvancedSearch).toBeCalledWith(false);
+  });
+
   test('attempt to search with empty string', () => {
     const searchButton = 'button[aria-label="Search submit button"]';
     const searchTextInput = 'input[aria-label="Search text input"]';
@@ -95,7 +149,12 @@ describe('<Search />', () => {
         collapseListedFiltersBreakpoint="lg"
       >
         <ToolbarContent>
-          <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+            onShowAdvancedSearch={jest.fn}
+          />
         </ToolbarContent>
       </Toolbar>
     );
@@ -119,7 +178,12 @@ describe('<Search />', () => {
         collapseListedFiltersBreakpoint="lg"
       >
         <ToolbarContent>
-          <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onSearch={onSearch}
+            onShowAdvancedSearch={jest.fn}
+          />
         </ToolbarContent>
       </Toolbar>
     );
@@ -150,7 +214,11 @@ describe('<Search />', () => {
         collapseListedFiltersBreakpoint="lg"
       >
         <ToolbarContent>
-          <Search qsConfig={QS_CONFIG} columns={columns} />
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onShowAdvancedSearch={jest.fn}
+          />
         </ToolbarContent>
       </Toolbar>,
       { context: { router: { history } } }
@@ -197,6 +265,7 @@ describe('<Search />', () => {
             qsConfig={qsConfigNew}
             columns={columns}
             onRemove={onRemove}
+            onShowAdvancedSearch={jest.fn}
           />
         </ToolbarContent>
       </Toolbar>,
@@ -243,6 +312,7 @@ describe('<Search />', () => {
             qsConfig={qsConfigNew}
             columns={columns}
             onRemove={onRemove}
+            onShowAdvancedSearch={jest.fn}
           />
         </ToolbarContent>
       </Toolbar>,
@@ -277,7 +347,11 @@ describe('<Search />', () => {
         collapseListedFiltersBreakpoint="lg"
       >
         <ToolbarContent>
-          <Search qsConfig={QS_CONFIG} columns={columns} />
+          <Search
+            qsConfig={QS_CONFIG}
+            columns={columns}
+            onShowAdvancedSearch={jest.fn}
+          />
         </ToolbarContent>
       </Toolbar>,
       { context: { router: { history } } }

awx/ui_next/src/contexts/Kebabified.jsx

@@ -0,0 +1,8 @@
+import React, { useContext } from 'react';
+
+// eslint-disable-next-line import/prefer-default-export
+export const KebabifiedContext = React.createContext({});
+
+export const KebabifiedProvider = KebabifiedContext.Provider;
+export const Kebabified = KebabifiedContext.Consumer;
+export const useKebabifiedMenu = () => useContext(KebabifiedContext);