Allows AddDropDownButton components to accept array of dropdownItems

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

@@ -1,10 +1,9 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Link, withRouter } from 'react-router-dom';
-import { withI18n } from '@lingui/react';
+import { Link } from 'react-router-dom';
 import { Dropdown, DropdownPosition } from '@patternfly/react-core';
 import { ToolbarAddButton } from '@components/PaginatedDataList';
 
-function AddDropDownButton({ topUrl, bottomUrl, topLabel, bottomLabel }) {
+function AddDropDownButton({ dropdownItems }) {
   const [isOpen, setIsOpen] = useState(false);
   const element = useRef(null);
 
@@ -28,22 +27,19 @@ function AddDropDownButton({ topUrl, bottomUrl, topLabel, bottomLabel }) {
         isOpen={isOpen}
         position={DropdownPosition.right}
         toggle={<ToolbarAddButton onClick={() => setIsOpen(!isOpen)} />}
-        dropdownItems={[
-          <Link key="top" className="pf-c-dropdown__menu-item" to={`${topUrl}`}>
-            {`${topLabel}`}
-          </Link>,
+        dropdownItems={dropdownItems.map(item => (
           <Link
-            key="bottom"
             className="pf-c-dropdown__menu-item"
-            to={`${bottomUrl}`}
+            key={item.key}
+            to={item.url}
           >
-            {`${bottomLabel}`}
-          </Link>,
-        ]}
+            {item.label}
+          </Link>
+        ))}
       />
     </div>
   );
 }
 
 export { AddDropDownButton as _AddDropDownButton };
-export default withI18n()(withRouter(AddDropDownButton));
+export default AddDropDownButton;

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

@@ -3,20 +3,33 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import AddDropDownButton from './AddDropDownButton';
 
 describe('<AddDropDownButton />', () => {
+  const dropdownItems = [
+    {
+      key: 'inventory',
+      label: 'Inventory',
+      url: `inventory/inventory/add/`,
+    },
+  ];
   test('should be closed initially', () => {
-    const wrapper = mountWithContexts(<AddDropDownButton />);
+    const wrapper = mountWithContexts(
+      <AddDropDownButton dropdownItems={dropdownItems} />
+    );
     expect(wrapper.find('Dropdown').prop('isOpen')).toEqual(false);
   });
 
   test('should render two links', () => {
-    const wrapper = mountWithContexts(<AddDropDownButton />);
+    const wrapper = mountWithContexts(
+      <AddDropDownButton dropdownItems={dropdownItems} />
+    );
     wrapper.find('button').simulate('click');
     expect(wrapper.find('Dropdown').prop('isOpen')).toEqual(true);
-    expect(wrapper.find('Link')).toHaveLength(2);
+    expect(wrapper.find('Link')).toHaveLength(dropdownItems.length);
   });
 
   test('should close when button re-clicked', () => {
-    const wrapper = mountWithContexts(<AddDropDownButton />);
+    const wrapper = mountWithContexts(
+      <AddDropDownButton dropdownItems={dropdownItems} />
+    );
     wrapper.find('button').simulate('click');
     expect(wrapper.find('Dropdown').prop('isOpen')).toEqual(true);
     wrapper.find('button').simulate('click');

awx/ui_next/src/components/AddDropDownButton/index.js

@@ -1,4 +1 @@
-export {
-  default
-}
-from './AddDropDownButton'
+export { default } from './AddDropDownButton';

awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx

@@ -36,7 +36,6 @@ class InventoriesList extends Component {
       selected: [],
       inventories: [],
       itemCount: 0,
-      isAddOpen: false,
     };
 
     this.loadInventories = this.loadInventories.bind(this);
@@ -44,7 +43,6 @@ class InventoriesList extends Component {
     this.handleSelect = this.handleSelect.bind(this);
     this.handleInventoryDelete = this.handleInventoryDelete.bind(this);
     this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-    this.handleAddToggle = this.handleAddToggle.bind(this);
   }
 
   componentDidMount() {
@@ -78,18 +76,6 @@ class InventoriesList extends Component {
     }
   }
 
-  handleAddToggle(e) {
-    const { isAddOpen } = this.state;
-
-    if (this.node && this.node.contains(e.target) && isAddOpen) {
-      this.setState({ isAddOpen: false });
-    } else if (this.node && this.node.contains(e.target) && !isAddOpen) {
-      this.setState({ isAddOpen: true });
-    } else {
-      this.setState({ isAddOpen: false });
-    }
-  }
-
   async handleInventoryDelete() {
     const { selected, itemCount } = this.state;
 
@@ -155,14 +141,29 @@ class InventoriesList extends Component {
       inventories,
       itemCount,
       selected,
-      isAddOpen,
       actions,
     } = this.state;
     const { match, i18n } = this.props;
     const canAdd =
       actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected =
-      selected.length > 0 && selected.length === inventories.length;
+    const isAllSelected = selected.length === inventories.length;
+    const addButton = (
+      <AddDropDownButton
+        key="add"
+        dropdownItems={[
+          {
+            key: 'inventory',
+            label: i18n._(t`Inventory`),
+            url: `${match.url}/inventory/add/`,
+          },
+          {
+            key: 'smart-inventory',
+            label: i18n._(t`Smart Inventory`),
+            url: `${match.url}/smart_inventory/add/`,
+          },
+        ]}
+      />
+    );
     return (
       <PageSection>
         <Card>
@@ -208,15 +209,7 @@ class InventoriesList extends Component {
                     itemsToDelete={selected}
                     pluralizedItemName="Inventories"
                   />,
-                  canAdd && (
-                    <AddDropDownButton
-                      key="add"
-                      topUrl={`${match.url}/inventory/add/`}
-                      bottomdUrl={`${match.url}/smart_inventory/add/`}
-                      topLabel={i18n._(t`Inventory`)}
-                      bottomLabel={i18n._(t`Smart Inventory`)}
-                    />
-                  ),
+                  canAdd && addButton,
                 ]}
               />
             )}
@@ -234,17 +227,7 @@ class InventoriesList extends Component {
                 isSelected={selected.some(row => row.id === inventory.id)}
               />
             )}
-            emptyStateControls={
-              canAdd && (
-                <AddDropDownButton
-                  key="add"
-                  topUrl={`${match.url}/inventory/add/`}
-                  bottomUrl={`${match.url}/smart_inventory/add/`}
-                  topLabel={i18n._(t`Inventory`)}
-                  bottomLabel={i18n._(t`Smart Inventory`)}
-                />
-              )
-            }
+            emptyStateControls={canAdd && addButton}
           />
         </Card>
         <AlertModal

awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx

@@ -161,6 +161,23 @@ class TemplatesList extends Component {
       actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
     const isAllSelected =
       selected.length === templates.length && selected.length > 0;
+    const addButton = (
+      <AddDropDownButton
+        key="add"
+        dropdownItems={[
+          {
+            key: 'template',
+            label: i18n._(t`Template`),
+            url: `${match.url}/template/add/`,
+          },
+          {
+            key: 'workflow_template',
+            label: i18n._(t`Workflow Template`),
+            url: `${match.url}/_workflow/add/`,
+          },
+        ]}
+      />
+    );
     return (
       <PageSection>
         <Card>
@@ -206,15 +223,7 @@ class TemplatesList extends Component {
                     itemsToDelete={selected}
                     pluralizedItemName="Templates"
                   />,
-                  canAdd && (
-                    <AddDropDownButton
-                      key="add"
-                      topUrl={`${match.url}/job_template/add/`}
-                      bottomUrl={`${match.url}_workflow/add/`}
-                      topLabel={i18n._(t`Job Template`)}
-                      bottomLabel={i18n._(t`Workflow Template`)}
-                    />
-                  ),
+                  canAdd && addButton,
                 ]}
               />
             )}
@@ -228,17 +237,7 @@ class TemplatesList extends Component {
                 isSelected={selected.some(row => row.id === template.id)}
               />
             )}
-            emptyStateControls={
-              canAdd && (
-                <AddDropDownButton
-                  key="add"
-                  topUrl={`${match.url}/job_template/add/`}
-                  bottomUrl={`${match.url}_workflow/add/`}
-                  topLabel={i18n._(t`Job Template`)}
-                  bottomLabel={i18n._(t`Workflow Template`)}
-                />
-              )
-            }
+            emptyStateControls={canAdd && addButton}
           />
         </Card>
         <AlertModal