Merge pull request #4804 from AlexSCorey/4616-4766-JTAddBtn-ToolBarCheckBox

ToolBar checkbox checks, JT Add Button closes and Test Clean up

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

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

@@ -112,7 +112,7 @@ class DataListToolbar extends React.Component {
               <Fragment>
                 <ToolbarItem>
                   <Checkbox
-                    checked={isAllSelected}
+                    isChecked={isAllSelected}
                     onChange={onSelectAll}
                     aria-label={i18n._(t`Select all`)}
                     id="select-all"

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

@@ -19,6 +19,10 @@ describe('<DataListToolbar />', () => {
     }
   });
 
+  const onSearch = jest.fn();
+  const onSort = jest.fn();
+  const onSelectAll = jest.fn();
+
   test('it triggers the expected callbacks', () => {
     const columns = [
       { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
@@ -29,10 +33,6 @@ describe('<DataListToolbar />', () => {
     const selectAll = 'input[aria-label="Select all"]';
     const sort = 'button[aria-label="Sort"]';
 
-    const onSearch = jest.fn();
-    const onSort = jest.fn();
-    const onSelectAll = jest.fn();
-
     toolbar = mountWithContexts(
       <DataListToolbar
         qsConfig={QS_CONFIG}
@@ -81,8 +81,6 @@ describe('<DataListToolbar />', () => {
       { name: 'Baz', key: 'baz' },
     ];
 
-    const onSort = jest.fn();
-
     toolbar = mountWithContexts(
       <DataListToolbar
         qsConfig={QS_CONFIG}
@@ -210,9 +208,6 @@ describe('<DataListToolbar />', () => {
     const columns = [
       { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
     ];
-    const onSearch = jest.fn();
-    const onSort = jest.fn();
-    const onSelectAll = jest.fn();
 
     toolbar = mountWithContexts(
       <DataListToolbar
@@ -233,4 +228,26 @@ describe('<DataListToolbar />', () => {
     expect(button).toHaveLength(1);
     expect(button.text()).toEqual('click');
   });
+
+  test('it triggers the expected callbacks', () => {
+    const columns = [
+      { name: 'Name', key: 'name', isSortable: true, isSearchable: true },
+    ];
+
+    toolbar = mountWithContexts(
+      <DataListToolbar
+        isAllSelected
+        showExpandCollapse
+        sortedColumnKey="name"
+        sortOrder="ascending"
+        columns={columns}
+        onSearch={onSearch}
+        onSort={onSort}
+        onSelectAll={onSelectAll}
+        showSelectAll
+      />
+    );
+    const checkbox = toolbar.find('Checkbox');
+    expect(checkbox.prop('isChecked')).toBe(true);
+  });
 });

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

@@ -60,11 +60,16 @@ class TemplatesList extends Component {
 
   componentDidUpdate(prevProps) {
     const { location } = this.props;
+
     if (location !== prevProps.location) {
       this.loadTemplates();
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleAddToggle, false);
+  }
+
   handleDeleteErrorClose() {
     this.setState({ deletionError: null });
   }
@@ -84,9 +89,19 @@ class TemplatesList extends Component {
     }
   }
 
-  handleAddToggle() {
+  handleAddToggle(e) {
     const { isAddOpen } = this.state;
-    this.setState({ isAddOpen: !isAddOpen });
+    document.addEventListener('click', this.handleAddToggle, false);
+
+    if (this.node && this.node.contains(e.target) && isAddOpen) {
+      document.removeEventListener('click', this.handleAddToggle, false);
+      this.setState({ isAddOpen: false });
+    } else if (this.node && this.node.contains(e.target) && !isAddOpen) {
+      this.setState({ isAddOpen: true });
+    } else {
+      this.setState({ isAddOpen: false });
+      document.removeEventListener('click', this.handleAddToggle, false);
+    }
   }
 
   async handleTemplateDelete() {
@@ -216,12 +231,16 @@ class TemplatesList extends Component {
                     pluralizedItemName="Templates"
                   />,
                   canAdd && (
-                    <Dropdown
+                    <div
+                      ref={node => {
+                        this.node = node;
+                      }}
                       key="add"
+                    >
+                      <Dropdown
                         isPlain
                         isOpen={isAddOpen}
                         position={DropdownPosition.right}
-                      onSelect={this.handleAddSelect}
                         toggle={
                           <ToolbarAddButton onClick={this.handleAddToggle} />
                         }
@@ -238,6 +257,7 @@ class TemplatesList extends Component {
                           </DropdownItem>,
                         ]}
                       />
+                    </div>
                   ),
                 ]}
               />
@@ -254,12 +274,16 @@ class TemplatesList extends Component {
             )}
             emptyStateControls={
               canAdd && (
-                <Dropdown
+                <div
+                  ref={node => {
+                    this.node = node;
+                  }}
                   key="add"
+                >
+                  <Dropdown
                     isPlain
                     isOpen={isAddOpen}
                     position={DropdownPosition.right}
-                  onSelect={this.handleAddSelect}
                     toggle={<ToolbarAddButton onClick={this.handleAddToggle} />}
                     dropdownItems={[
                       <DropdownItem key="job">
@@ -274,6 +298,7 @@ class TemplatesList extends Component {
                       </DropdownItem>,
                     ]}
                   />
+                </div>
               )
             }
           />