Merge pull request #5297 from mabashian/eslint-plugin-react-hooks

Adds eslint-plugin-react-hooks as a dev dep

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

awx/ui_next/.eslintrc

@@ -8,6 +8,9 @@
       "modules": true
     }
   },
+  "plugins": [
+    "react-hooks"
+  ],
   "extends": ["airbnb", "prettier", "prettier/react"],
   "settings": {
     "import/resolver": {
@@ -56,6 +59,8 @@
     "react/prop-types": "off",
     "react/sort-comp": ["error", {}],
     "jsx-a11y/label-has-for": "off",
-    "jsx-a11y/label-has-associated-control": "off"
+    "jsx-a11y/label-has-associated-control": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

awx/ui_next/package-lock.json

@@ -6523,6 +6523,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "eslint-plugin-react-hooks": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.2.0.tgz",
+      "integrity": "sha512-jSlnBjV2cmyIeL555H/FbvuSbQ1AtpHjLMHuPrQnt1eVA6lX8yufdygh7AArI2m8ct7ChHGx2uOaCuxq2MUn6g==",
+      "dev": true
+    },
     "eslint-restricted-globals": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz",

awx/ui_next/package.json

@@ -43,6 +43,7 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
+    "eslint-plugin-react-hooks": "^2.2.0",
     "file-loader": "^2.0.0",
     "history": "^4.9.0",
     "jest": "^24.7.1",

awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx

@@ -19,7 +19,7 @@ function ExpandingContainer({ isExpanded, children }) {
   });
   useEffect(() => {
     setContentHeight(ref.current.scrollHeight);
-  });
+  }, [setContentHeight]);
   const height = isExpanded ? contentHeight : '0';
   return (
     <Container

awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx

@@ -120,7 +120,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false, i18n }) {
 
   useEffect(() => {
     setHostStatus(processEventStatus(hostEvent));
-  }, []);
+  }, [setHostStatus, hostEvent]);
 
   const handleTabClick = (event, tabIndex) => {
     setActiveTabKey(tabIndex);

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

@@ -108,7 +108,7 @@ function ProjectForm({ project, ...props }) {
     }
 
     fetchData();
-  }, []);
+  }, [summary_fields.credential]);
 
   const scmFormFields = {
     scm_url: '',

awx/ui_next/src/screens/Template/shared/LabelSelect.jsx

@@ -33,7 +33,7 @@ function LabelSelect({ value, onChange, onError }) {
   const [options, setOptions] = useState([]);
   useEffect(() => {
     loadLabelOptions(setOptions, onError);
-  }, []);
+  }, [onError]);
 
   return (
     <MultiSelect

awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx

@@ -39,7 +39,7 @@ function PlaybookSelect({
         onError(contentError);
       }
     })();
-  }, [projectId]);
+  }, [projectId, i18n, onError]);
 
   return (
     <AnsibleSelect