From d42ffd735304c22be71cd710345ec81b0df0f096 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Thu, 26 Sep 2019 10:50:15 -0400
Subject: [PATCH] Removes unused fnc and unnecessary props adds dom node to
 Empty State

This.node was use for the add button for both empty list and list with data.
This was done to reduce complexity in handleAddToggle() and I don't think it
will cause bugs because those two elements are not rendered at the same time.
---
 .../Template/TemplateList/TemplateList.jsx    | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 328e3879b5..3e69a18f8a 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -56,11 +56,11 @@ class TemplatesList extends Component {
 
   componentDidMount() {
     this.loadTemplates();
-    document.addEventListener('click', this.handleAddToggle, false);
   }
 
   componentDidUpdate(prevProps) {
     const { location } = this.props;
+
     if (location !== prevProps.location) {
       this.loadTemplates();
     }
@@ -91,12 +91,19 @@ class TemplatesList extends Component {
 
   handleAddToggle(e) {
     const { isAddOpen } = this.state;
+    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);
     }
   }
 
@@ -236,10 +243,9 @@ class TemplatesList extends Component {
                         isPlain
                         isOpen={isAddOpen}
                         position={DropdownPosition.right}
-                        onSelect={this.handleAddSelect}
-                        toggle={<ToolbarAddButton onClick={() => {}} />}
+                        toggle={<ToolbarAddButton onClick={this.handleAddToggle}/>}
                         dropdownItems={[
-                          <DropdownItem isHovered={false} key="job">
+                          <DropdownItem key="job">
                             <Link to={`${match.url}/job_template/add/`}>
                               {i18n._(t`Job Template`)}
                             </Link>
@@ -268,13 +274,17 @@ 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} />}
+                  toggle={<ToolbarAddButton onClick={this.handleAddToggle}/> }
                   dropdownItems={[
                     <DropdownItem key="job">
                       <Link to={`${match.url}/job_template/add/`}>
@@ -288,6 +298,7 @@ class TemplatesList extends Component {
                     </DropdownItem>,
                   ]}
                 />
+              </div>
               )
             }
           />