Add eslint-plugin-react-hooks to enforce the Rules of Hooks (#20707)

js/.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     "plugin:import/typescript",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/base",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:prettier/recommended",

js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx

@@ -82,7 +82,17 @@ export type AttributeForm = Omit<
 
 type Props = ClientSettingsProps & EvaluationResultRepresentation;
 
-export const AuthorizationEvaluate = ({ client }: Props) => {
+export const AuthorizationEvaluate = (props: Props) => {
+  const { hasAccess } = useAccess();
+
+  if (!hasAccess("view-users")) {
+    return <ForbiddenSection permissionNeeded="view-users" />;
+  }
+
+  return <AuthorizationEvaluateContent {...props} />;
+};
+
+const AuthorizationEvaluateContent = ({ client }: Props) => {
   const form = useForm<EvaluateFormInputs>({ mode: "onChange" });
   const {
     control,
@@ -107,10 +117,6 @@ export const AuthorizationEvaluate = ({ client }: Props) => {
 
   const [clientRoles, setClientRoles] = useState<RoleRepresentation[]>([]);
 
-  const { hasAccess } = useAccess();
-  if (!hasAccess("view-users"))
-    return <ForbiddenSection permissionNeeded="view-users" />;
-
   useFetch(
     () => adminClient.roles.find(),
     (roles) => {

js/package.json

@@ -16,6 +16,7 @@
     "eslint-plugin-mocha": "^10.1.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",

js/pnpm-lock.yaml

@@ -40,6 +40,9 @@ importers:
       eslint-plugin-react:
         specifier: ^7.32.2
         version: 7.32.2(eslint@8.41.0)
+      eslint-plugin-react-hooks:
+        specifier: ^4.6.0
+        version: 4.6.0(eslint@8.41.0)
       husky:
         specifier: ^8.0.3
         version: 8.0.3
@@ -3481,6 +3484,15 @@ packages:
       prettier-linter-helpers: 1.0.0
     dev: true
 
+  /eslint-plugin-react-hooks@4.6.0(eslint@8.41.0):
+    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+    dependencies:
+      eslint: 8.41.0
+    dev: true
+
   /eslint-plugin-react@7.32.2(eslint@8.41.0):
     resolution: {integrity: sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==}
     engines: {node: '>=4'}