chore(lint): fix react/jsx-key violations

weaveworks · Jan 19, 2025 · b573514 · b573514
1 parent 976596b
commit b573514
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 23 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -45,7 +45,6 @@ export default tseslint.config([
             "import/no-unresolved": 0,
 
             "react/display-name": 0,
-            "react/jsx-key": 0,
             "react/no-children-prop": 0,
             "react/no-unknown-property": 0,
             "react/prop-types": 0,

diff --git a/ui/components/BucketDetail.tsx b/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,

diff --git a/ui/components/GitRepositoryDetail.tsx b/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
+            key={gitRepository.uid}
+            newTab
+            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,

diff --git a/ui/components/HelmChartDetail.tsx b/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,

diff --git a/ui/components/HelmReleaseDetail.tsx b/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],
       ]}
     />

diff --git a/ui/components/HelmRepositoryDetail.tsx b/ui/components/HelmRepositoryDetail.tsx
@@ -31,7 +31,10 @@ function HelmRepositoryDetail({
     ? [
         [
           "Cluster",
-          <ClusterDashboardLink clusterName={helmRepository?.clusterName} />,
+          <ClusterDashboardLink
+            key={helmRepository.uid}
+            clusterName={helmRepository?.clusterName}
+          />,
         ],
       ]
     : [];
@@ -45,7 +48,12 @@ 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 ? (
@@ -54,7 +62,13 @@ function HelmRepositoryDetail({
             "-"
           ),
         ],
-        ["Interval", <Interval interval={helmRepository.interval} />],
+        [
+          "Interval",
+          <Interval
+            key={helmRepository.uid}
+            interval={helmRepository.interval}
+          />,
+        ],
         ...clusterInfo,
         ["Namespace", helmRepository.namespace],
         ...tenancyInfo,

diff --git a/ui/components/KustomizationDetail.tsx b/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],
       ]}
     />

diff --git a/ui/components/OCIRepositoryDetail.tsx b/ui/components/OCIRepositoryDetail.tsx
@@ -31,7 +31,10 @@ function OCIRepositoryDetail({
     ? [
         [
           "Cluster",
-          <ClusterDashboardLink clusterName={ociRepository.clusterName} />,
+          <ClusterDashboardLink
+            key={ociRepository.uid}
+            clusterName={ociRepository.clusterName}
+          />,
         ],
       ]
     : [];
@@ -44,7 +47,12 @@ function OCIRepositoryDetail({
       customActions={customActions}
       info={[
         ["Kind", Kind.OCIRepository],
-        ["URL", <Link href={ociRepository.url}>{ociRepository.url}</Link>],
+        [
+          "URL",
+          <Link key={ociRepository.uid} href={ociRepository.url}>
+            {ociRepository.url}
+          </Link>,
+        ],
         [
           "Last Updated",
           ociRepository.lastUpdatedAt ? (
@@ -53,7 +61,13 @@ function OCIRepositoryDetail({
             "-"
           ),
         ],
-        ["Interval", <Interval interval={ociRepository.interval} />],
+        [
+          "Interval",
+          <Interval
+            key={ociRepository.uid}
+            interval={ociRepository.interval}
+          />,
+        ],
         ...clusterInfo,
         ["Namespace", ociRepository.namespace],
         ...tenancyInfo,

diff --git a/ui/components/PodDetail.tsx b/ui/components/PodDetail.tsx
@@ -67,7 +67,14 @@ const Detail = ({ pod }) => {
         items={[
           ["Namespace", pod.namespace],
           ["Pod IP", pod.podIP],
-          ["Pod IPs", <ArrayToList array={pod.podIPs} display={(p) => p.ip} />],
+          [
+            "Pod IPs",
+            <ArrayToList
+              key={pod.id}
+              array={pod.podIPs}
+              display={(p) => p.ip}
+            />,
+          ],
           ["Priority Class", pod.priorityClass],
           ["QoS Class", pod.qosClass],
         ]}
@@ -100,6 +107,7 @@ const Detail = ({ pod }) => {
                 [
                   "Ports",
                   <ArrayToList
+                    key={container.name}
                     array={container.ports}
                     display={(port) =>
                       `${port.name}:${port.containerPort}/${port.protocol}`
@@ -108,11 +116,19 @@ const Detail = ({ pod }) => {
                 ],
                 [
                   "Env Vars",
-                  <ArrayToList array={container.enVar} display={(v) => v} />,
+                  <ArrayToList
+                    key={container.name}
+                    array={container.enVar}
+                    display={(v) => v}
+                  />,
                 ],
                 [
                   "Arguments",
-                  <ArrayToList array={container.args} display={(arg) => arg} />,
+                  <ArrayToList
+                    key={container.name}
+                    array={container.args}
+                    display={(arg) => arg}
+                  />,
                 ],
               ]}
             />