diff --git a/awx/ui_next/.eslintrc b/awx/ui_next/.eslintrc index c22e9fa16dcf..367f465aa699 100644 --- a/awx/ui_next/.eslintrc +++ b/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" } } diff --git a/awx/ui_next/package-lock.json b/awx/ui_next/package-lock.json index 8af20feadb9e..a10b4c184ec0 100644 --- a/awx/ui_next/package-lock.json +++ b/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", diff --git a/awx/ui_next/package.json b/awx/ui_next/package.json index d0c86218f258..957f796ffacb 100644 --- a/awx/ui_next/package.json +++ b/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", diff --git a/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx b/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx index 5d8c91ef0dd9..35804d324d38 100644 --- a/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx +++ b/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 ( { setHostStatus(processEventStatus(hostEvent)); - }, []); + }, [setHostStatus, hostEvent]); const handleTabClick = (event, tabIndex) => { setActiveTabKey(tabIndex); diff --git a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx index e1757f40020d..fed39b72b436 100644 --- a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx +++ b/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: '', diff --git a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx b/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx index 3443aeb3b406..68cce8519383 100644 --- a/awx/ui_next/src/screens/Template/shared/LabelSelect.jsx +++ b/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 (