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.

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"

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);
+  });
 });

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>
                   ),
                 ]}
               />