console: add eslint-plugin-react-hooks (#5219)

console/.eslintrc

@@ -72,6 +72,8 @@
     "react/no-unescaped-entities": 0,
     "react/sort-comp": 0,
     "react/jsx-indent": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/no-noninteractive-element-interactions": 0,
@@ -86,7 +88,12 @@
     "eqeqeq": 0,
     "no-nested-ternary": 0
   },
-  "plugins": ["react", "import", "@typescript-eslint/eslint-plugin"],
+  "plugins": [
+    "react",
+    "import",
+    "@typescript-eslint/eslint-plugin",
+    "react-hooks"
+  ],
   "settings": {
     "import/resolve": {
       "moduleDirectory": ["node_modules", "src"]

console/package-lock.json

@@ -7653,6 +7653,12 @@
         }
       }
     },
+    "eslint-plugin-react-hooks": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.4.tgz",
+      "integrity": "sha512-equAdEIsUETLFNCmmCkiCGq6rkSK5MoJhXFPFYeUebcjKgBmWWcgVOqZyQC8Bv1BwVCnTq9tBxgJFgAJTWoJtA==",
+      "dev": true
+    },
     "eslint-restricted-globals": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz",

console/package.json

@@ -167,6 +167,7 @@
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "express": "4.17.1",
     "extract-hoc": "0.0.5",
     "extract-text-webpack-plugin": "3.0.2",

console/src/client.js

@@ -100,20 +100,24 @@ if (__DEVELOPMENT__ && module.hot) {
   */
   module.hot.accept();
 }
-
 // Main routes and rendering
-const main = (
-  <Router
-    history={useBasename(() => history)({ basename: globals.urlPrefix })}
-    routes={getRoutes(store)}
-    onUpdate={hashLinkScroll}
-  />
-);
+const Main = () => {
+  const routeHistory = useBasename(() => history)({
+    basename: globals.urlPrefix,
+  });
+  return (
+    <Router
+      history={routeHistory}
+      routes={getRoutes(store)}
+      onUpdate={hashLinkScroll}
+    />
+  );
+};
 
 const dest = document.getElementById('content');
 ReactDOM.render(
   <Provider store={store} key="provider">
-    {main}
+    <Main />
   </Provider>,
   dest
 );

console/src/components/Common/Layout/LeftSubSidebar/LeftSidebarSection.tsx

@@ -13,7 +13,7 @@ interface LeftSidebarSectionProps extends React.ComponentProps<'div'> {
   service: string;
 }
 
-const getLeftSidebarSection = ({
+const LeftSidebarSection = ({
   items = [],
   currentItem,
   service,
@@ -96,4 +96,4 @@ const getLeftSidebarSection = ({
   };
 };
 
-export default getLeftSidebarSection;
+export default LeftSidebarSection;

console/src/components/Services/Data/TablePermissions/PermButtonsSection.tsx

@@ -26,10 +26,6 @@ const PermButtonSection: React.FC<PermButtonSectionProps> = ({
   permsChanged,
   currQueryPermissions,
 }) => {
-  if (readOnlyMode) {
-    return null;
-  }
-
   const dispatchSavePermissions = useCallback(() => {
     const isInvalid = Object.values(localFilterString).some(val => {
       if (val && !isJsonString(val)) {
@@ -60,6 +56,10 @@ const PermButtonSection: React.FC<PermButtonSectionProps> = ({
     }
   }, [dispatch]);
 
+  if (readOnlyMode) {
+    return null;
+  }
+
   return (
     <div className={`${styles.add_mar_top} ${styles.add_pad_left}`}>
       <Button