From ce1d9793ceb92b903ac8840a7e20ea975b77cd87 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Fri, 20 Sep 2019 16:25:05 -0400
Subject: [PATCH] ToolBar checkbox checks and JT Add Button closes and Test
 Clean up

The Select-All check box in the DataList Toolbar will be checked when the
user clicks on it. Also, the JT Add button closes when the user clicks
elsewhere on the page as well as when the user clicks on the button a second time.
I also cleaned up some tests in the DataListToolBar file.
---
 .../DataListToolbar/DataListToolbar.jsx       |  2 +-
 .../DataListToolbar/DataListToolbar.test.jsx  | 35 ++++++++---
 .../Template/TemplateList/TemplateList.jsx    | 61 ++++++++++++-------
 3 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
index 8f8d0ecea6..0e56ee6078 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
@@ -109,7 +109,7 @@ class DataListToolbar extends React.Component {
               <Fragment>
                 <ToolbarItem>
                   <Checkbox
-                    checked={isAllSelected}
+                    isChecked={isAllSelected}
                     onChange={onSelectAll}
                     aria-label={i18n._(t`Select all`)}
                     id="select-all"
diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
index 8beb597edb..7caed7c802 100644
--- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
+++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx
@@ -12,6 +12,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 },
@@ -22,10 +26,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
         isAllSelected={false}
@@ -73,8 +73,6 @@ describe('<DataListToolbar />', () => {
       { name: 'Baz', key: 'baz' },
     ];
 
-    const onSort = jest.fn();
-
     toolbar = mountWithContexts(
       <DataListToolbar
         sortedColumnKey="foo"
@@ -198,9 +196,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
@@ -220,4 +215,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);
+  });
 });
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 34e29329a2..e1dfa6508e 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -56,6 +56,7 @@ class TemplatesList extends Component {
 
   componentDidMount() {
     this.loadTemplates();
+    document.addEventListener('click', this.handleAddToggle, false);
   }
 
   componentDidUpdate(prevProps) {
@@ -65,6 +66,10 @@ class TemplatesList extends Component {
     }
   }
 
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleAddToggle, false);
+  }
+
   handleDeleteErrorClose() {
     this.setState({ deletionError: null });
   }
@@ -84,9 +89,15 @@ class TemplatesList extends Component {
     }
   }
 
-  handleAddToggle() {
+  handleAddToggle(e) {
     const { isAddOpen } = this.state;
-    this.setState({ isAddOpen: !isAddOpen });
+    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 handleTemplateDelete() {
@@ -215,28 +226,32 @@ class TemplatesList extends Component {
                     itemName={i18n._(t`Template`)}
                   />,
                   canAdd && (
-                    <Dropdown
+                    <div
+                      ref={node => {
+                        this.node = node;
+                      }}
                       key="add"
-                      isPlain
-                      isOpen={isAddOpen}
-                      position={DropdownPosition.right}
-                      onSelect={this.handleAddSelect}
-                      toggle={
-                        <ToolbarAddButton onClick={this.handleAddToggle} />
-                      }
-                      dropdownItems={[
-                        <DropdownItem key="job">
-                          <Link to={`${match.url}/job_template/add/`}>
-                            {i18n._(t`Job Template`)}
-                          </Link>
-                        </DropdownItem>,
-                        <DropdownItem key="workflow">
-                          <Link to={`${match.url}_workflow/add/`}>
-                            {i18n._(t`Workflow Template`)}
-                          </Link>
-                        </DropdownItem>,
-                      ]}
-                    />
+                    >
+                      <Dropdown
+                        isPlain
+                        isOpen={isAddOpen}
+                        position={DropdownPosition.right}
+                        onSelect={this.handleAddSelect}
+                        toggle={<ToolbarAddButton onClick={() => {}} />}
+                        dropdownItems={[
+                          <DropdownItem key="job" isPlain>
+                            <Link to={`${match.url}/job_template/add/`}>
+                              {i18n._(t`Job Template`)}
+                            </Link>
+                          </DropdownItem>,
+                          <DropdownItem key="workflow" isPlain>
+                            <Link to={`${match.url}_workflow/add/`}>
+                              {i18n._(t`Workflow Template`)}
+                            </Link>
+                          </DropdownItem>,
+                        ]}
+                      />
+                    </div>
                   ),
                 ]}
               />