Turn on react / react-hook eslinters to ensure consistency with EE

.eslintrc

@@ -1,37 +1,38 @@
 {
-    "extends": [
-        "eslint:recommended",
-        "plugin:import/errors",
-        "plugin:import/warnings",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:import/typescript"
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": ["@typescript-eslint", "import"],
+  "rules": {
+    "import/default": 0,
+    "import/no-named-as-default-member": 0,
+    "import/named": 2,
+    "import/order": [
+      2,
+      {
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
     ],
-    "plugins": [
-        "@typescript-eslint",
-        "import"
-    ],
-    "rules": {
-        "import/default": 0,
-        "import/no-named-as-default-member": 0,
-        "import/named": 2,
-        "import/order": [
-            2,
-            {
-                "alphabetize": {
-                    "order": "asc",
-                    "caseInsensitive": true
-                }
-            }
-        ],
-        "@typescript-eslint/explicit-module-boundary-types": 0,
-        "@typescript-eslint/no-explicit-any": 0,
-        "@typescript-eslint/ban-ts-comment": 0,
-        "import/no-named-as-default": 0,
-        "@typescript-eslint/switch-exhaustiveness-check": "error",
-        "import/no-unresolved": 0
-    },
-    "ignorePatterns": "rpc",
-    "parserOptions": {
-        "project": "./tsconfig.json"
-    }
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "import/no-named-as-default": 0,
+    "@typescript-eslint/switch-exhaustiveness-check": "error",
+    "import/no-unresolved": 0,
+    "react/prop-types": 0,
+    "react/display-name": "off"
+  },
+  "ignorePatterns": "rpc",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
 }

package.json

@@ -52,6 +52,8 @@
     "@material-ui/lab": "^4.0.0-alpha.58",
     "d3": "^7.6.1",
     "d3-dag": "^0.11.5",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "history": "^5.0.0",
     "http-proxy-middleware": "^2.0.3",
     "jest-canvas-mock": "^2.4.0",

ui/components/BucketDetail.tsx

@@ -24,7 +24,15 @@ function BucketDetail({ className, bucket, customActions }: Props) {
       : [];
 
   const clusterInfo: InfoField[] = isFlagEnabled("WEAVE_GITOPS_FEATURE_CLUSTER")
-    ? [["Cluster", <ClusterDashboardLink clusterName={bucket?.clusterName} />]]
+    ? [
+        [
+          "Cluster",
+          <ClusterDashboardLink
+            key={bucket.uid}
+            clusterName={bucket?.clusterName}
+          />,
+        ],
+      ]
     : [];
 
   return (
@@ -37,8 +45,11 @@ function BucketDetail({ className, bucket, customActions }: Props) {
         ["Kind", Kind.Bucket],
         ["Endpoint", bucket.endpoint],
         ["Bucket Name", bucket.name],
-        ["Last Updated", <Timestamp time={bucket.lastUpdatedAt} />],
-        ["Interval", <Interval interval={bucket.interval} />],
+        [
+          "Last Updated",
+          <Timestamp key={bucket.uid} time={bucket.lastUpdatedAt} />,
+        ],
+        ["Interval", <Interval key={bucket.uid} interval={bucket.interval} />],
         ...clusterInfo,
         ["Namespace", bucket.namespace],
         ...tenancyInfo,

ui/components/DagGraph.tsx

@@ -151,7 +151,6 @@ function DagGraph({ className, nodes }: Props) {
                     height={nodeSize.height}
                     key={index}
                     transform={`translate(${d.x - nodeSize.width / 2}, ${d.y})`}
-                    fill="white"
                     strokeWidth={2}
                     stroke={"#737373"}
                     overflow="visible"

ui/components/DependenciesView.tsx

@@ -30,9 +30,7 @@ function DependenciesView({ className, automation }: DependenciesViewProps) {
     data,
     isLoading: isLoadingData,
     error,
-  } = automation
-    ? useListObjects("", automationKind, automation?.clusterName, {})
-    : { data: { objects: [], errors: [] }, error: null, isLoading: false };
+  } = useListObjects("", automationKind, automation?.clusterName, {});
 
   React.useEffect(() => {
     if (isLoadingData) {
@@ -59,7 +57,7 @@ function DependenciesView({ className, automation }: DependenciesViewProps) {
     } else {
       setGraphNodes(nodes);
     }
-  }, [isLoadingData, data, error]);
+  }, [isLoadingData, data, error, automation]);
 
   const isLoading = isLoadingData && !graphNodes;
 
@@ -101,7 +99,7 @@ function DependenciesView({ className, automation }: DependenciesViewProps) {
               Dependencies allow you to relate different Kustomizations and Helm
               Releases and to specify an order in which your resources should be
               started. For example, you can wait for a database to report as
-              'Ready' before attempting to deploy other services.
+              'Ready' before attempting to deploy other services.
             </Text>
           </MessageBox>
           <Spacer padding="xl" />

ui/components/DirectedGraph.tsx

@@ -74,7 +74,6 @@ function DirectedGraph({
                 height={nodeSize.height}
                 key={index}
                 transform={`translate(${d.x - nodeSize.width / 2}, ${d.y})`}
-                fill="white"
                 strokeWidth={2}
                 stroke={"#737373"}
                 overflow="visible"

ui/components/ErrorBoundary.tsx

@@ -54,6 +54,7 @@ function ErrorBoundary({ children }: Props) {
     if (hasError) {
       setHasError(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.key]);
 
   return (

ui/components/Form.tsx

@@ -45,7 +45,8 @@ function Form({
     if (onChange) {
       onChange(state);
     }
-  }, [state]);
+    // This component isn't in use atm. If 'onChange' changes too often, find the parent component that defines it and wrap that definition in useCallback.
+  }, [state, onChange]);
 
   return (
     <ControlledForm

ui/components/GitRepositoryDetail.tsx

@@ -31,7 +31,10 @@ function GitRepositoryDetail({
     ? [
         [
           "Cluster",
-          <ClusterDashboardLink clusterName={gitRepository?.clusterName} />,
+          <ClusterDashboardLink
+            key={gitRepository.uid}
+            clusterName={gitRepository?.clusterName}
+          />,
         ],
       ]
     : [];
@@ -46,12 +49,22 @@ function GitRepositoryDetail({
         ["Kind", Kind.GitRepository],
         [
           "URL",
-          <Link newTab href={convertGitURLToGitProvider(gitRepository.url)}>
+          <Link
+            newTab
+            key={gitRepository.uid}
+            href={convertGitURLToGitProvider(gitRepository.url)}
+          >
             {gitRepository.url}
           </Link>,
         ],
         ["Ref", gitRepository.reference?.branch],
-        ["Last Updated", <Timestamp time={gitRepository.lastUpdatedAt} />],
+        [
+          "Last Updated",
+          <Timestamp
+            key={gitRepository.uid}
+            time={gitRepository.lastUpdatedAt}
+          />,
+        ],
         ...clusterInfo,
         ["Namespace", gitRepository.namespace],
         ...tenancyInfo,

ui/components/HelmChartDetail.tsx

@@ -26,7 +26,10 @@ function HelmChartDetail({ className, helmChart, customActions }: Props) {
     ? [
         [
           "Cluster",
-          <ClusterDashboardLink clusterName={helmChart?.clusterName} />,
+          <ClusterDashboardLink
+            key={helmChart.uid}
+            clusterName={helmChart?.clusterName}
+          />,
         ],
       ]
     : [];
@@ -43,8 +46,14 @@ function HelmChartDetail({ className, helmChart, customActions }: Props) {
         ["Version", helmChart.version],
         ["Current Revision", helmChart.revision],
         ["Ref", helmChart.sourceRef?.name],
-        ["Last Updated", <Timestamp time={helmChart.lastUpdatedAt} />],
-        ["Interval", <Interval interval={helmChart.interval} />],
+        [
+          "Last Updated",
+          <Timestamp key={helmChart.uid} time={helmChart.lastUpdatedAt} />,
+        ],
+        [
+          "Interval",
+          <Interval key={helmChart.uid} interval={helmChart.interval} />,
+        ],
         ...clusterInfo,
         ["Namespace", helmChart.namespace],
         ...tenancyInfo,

ui/components/HelmReleaseDetail.tsx

@@ -65,7 +65,10 @@ function HelmReleaseDetail({
     ? [
         [
           "Cluster",
-          <ClusterDashboardLink clusterName={helmRelease?.clusterName} />,
+          <ClusterDashboardLink
+            key={helmRelease.uid}
+            clusterName={helmRelease?.clusterName}
+          />,
         ],
       ]
     : [];
@@ -84,7 +87,10 @@ function HelmReleaseDetail({
         ["Last Attempted Revision", helmRelease.lastAttemptedRevision],
         ...clusterInfo,
         ...tenancyInfo,
-        ["Interval", <Interval interval={helmRelease?.interval} />],
+        [
+          "Interval",
+          <Interval key={helmRelease.uid} interval={helmRelease?.interval} />,
+        ],
         ["Namespace", helmRelease?.namespace],
       ]}
     />

ui/components/HelmRepositoryDetail.tsx

@@ -31,7 +31,10 @@ function HelmRepositoryDetail({
     ? [
         [
           "Cluster",
-          <ClusterDashboardLink clusterName={helmRepository?.clusterName} />,
+          <ClusterDashboardLink
+            key={helmRepository.uid}
+            clusterName={helmRepository?.clusterName}
+          />,
         ],
       ]
     : [];
@@ -45,16 +48,30 @@ function HelmRepositoryDetail({
       info={[
         ["Kind", Kind.HelmRepository],
         ["Repository Type", helmRepository.repositoryType.toLowerCase()],
-        ["URL", <Link href={helmRepository.url}>{helmRepository.url}</Link>],
+        [
+          "URL",
+          <Link key={helmRepository.uid} href={helmRepository.url}>
+            {helmRepository.url}
+          </Link>,
+        ],
         [
           "Last Updated",
           helmRepository.lastUpdatedAt ? (
-            <Timestamp time={helmRepository.lastUpdatedAt} />
+            <Timestamp
+              key={helmRepository.uid}
+              time={helmRepository.lastUpdatedAt}
+            />
           ) : (
             "-"
           ),
         ],
-        ["Interval", <Interval interval={helmRepository.interval} />],
+        [
+          "Interval",
+          <Interval
+            key={helmRepository.uid}
+            interval={helmRepository.interval}
+          />,
+        ],
         ...clusterInfo,
         ["Namespace", helmRepository.namespace],
         ...tenancyInfo,

ui/components/ImageAutomation/updates/ImageAutomationUpdatesDetails.tsx

@@ -20,15 +20,15 @@ type Props = {
 };
 function getInfoList(
   data: ImageUpdateAutomation,
-  clusterName: string
+  clusterName: string,
+  isFlagEnabled: (flag: string) => boolean
 ): RowItem[] {
   const {
     kind,
     spec: { update, git },
   } = data.obj;
   const { path } = update;
   const { commit, checkout, push } = git;
-  const { isFlagEnabled } = useFeatureFlags();
 
   return [
     {
@@ -92,6 +92,7 @@ function ImageAutomationUpdatesDetails({
       refetchInterval: 5000,
     }
   );
+  const { isFlagEnabled } = useFeatureFlags();
 
   const rootPath = V2Routes.ImageAutomationUpdatesDetails;
   return (
@@ -108,7 +109,7 @@ function ImageAutomationUpdatesDetails({
         <ImageAutomationDetails
           data={data}
           kind={Kind.ImageUpdateAutomation}
-          infoFields={getInfoList(data, data.clusterName)}
+          infoFields={getInfoList(data, data.clusterName, isFlagEnabled)}
           rootPath={rootPath}
         >
           <Metadata metadata={data.metadata} labels={data.labels} />

ui/components/InfoModal.tsx

@@ -50,8 +50,9 @@ function InfoModal({ searchedNamespaces, onCloseModal, open }: Props) {
       onClose={onClose}
       title="Searched namespaces"
       description="These are the namespaces that we've searched per cluster to retrieve the objects that you are seeing on this page."
-      children={content}
-    />
+    >
+      {content}
+    </Modal>
   );
 }
 

ui/components/KustomizationDetail.tsx

@@ -41,7 +41,10 @@ function KustomizationDetail({
     ? [
         [
           "Cluster",
-          <ClusterDashboardLink clusterName={kustomization?.clusterName} />,
+          <ClusterDashboardLink
+            key={kustomization.uid}
+            clusterName={kustomization?.clusterName}
+          />,
         ],
       ]
     : [];
@@ -57,14 +60,21 @@ function KustomizationDetail({
         [
           "Source",
           <SourceLink
+            key={kustomization.uid}
             sourceRef={kustomization?.sourceRef}
             clusterName={kustomization?.clusterName}
           />,
         ],
         ...clusterInfo,
         ...tenancyInfo,
         ["Path", kustomization?.path],
-        ["Interval", <Interval interval={kustomization?.interval} />],
+        [
+          "Interval",
+          <Interval
+            key={kustomization.uid}
+            interval={kustomization?.interval}
+          />,
+        ],
         ["Namespace", kustomization?.namespace],
       ]}
     />