From a3f1258884a1095888494b916038f3d4837699f5 Mon Sep 17 00:00:00 2001
From: TheGostKasper <thegostkasper@gmail.com>
Date: Wed, 20 Sep 2023 15:43:55 +0300
Subject: [PATCH] Link clusterName in image automation details

---
 .../ImageAutomationDetails.tsx                | 14 ++---
 .../policies/ImagePolicyDetails.tsx           | 31 +++++++---
 .../ImageAutomationRepoDetails.tsx            | 45 +++++++++-----
 .../updates/ImageAutomationUpdatesDetails.tsx | 61 ++++++++++++++-----
 ui/components/Policies/Utils/HeaderRows.tsx   | 12 ++--
 5 files changed, 112 insertions(+), 51 deletions(-)

diff --git a/ui/components/ImageAutomation/ImageAutomationDetails.tsx b/ui/components/ImageAutomation/ImageAutomationDetails.tsx
index d4651e2fb2..d0de32fcde 100644
--- a/ui/components/ImageAutomation/ImageAutomationDetails.tsx
+++ b/ui/components/ImageAutomation/ImageAutomationDetails.tsx
@@ -3,9 +3,8 @@ import styled from "styled-components";
 import { Kind } from "../../lib/api/core/types.pb";
 import EventsTable from "../EventsTable";
 import Flex from "../Flex";
-import InfoList, { InfoField } from "../InfoList";
 import PageStatus from "../PageStatus";
-import Spacer from "../Spacer";
+import HeaderRows, { RowItem } from "../Policies/Utils/HeaderRows";
 import SubRouterTabs, { RouterTab } from "../SubRouterTabs";
 import SyncActions from "../SyncActions";
 import YamlView from "../YamlView";
@@ -15,7 +14,7 @@ interface Props {
   data: any;
   kind: Kind;
   rootPath: string;
-  infoFields: InfoField[];
+  infoFields: RowItem[];
   children?: any;
 }
 
@@ -30,7 +29,7 @@ const ImageAutomationDetails = ({
   const { name, namespace, clusterName, suspended, conditions } = data;
 
   return (
-    <Flex wide tall column className={className}>
+    <Flex wide tall column className={className} gap="4">
       <PageStatus conditions={conditions} suspended={suspended} />
       {kind !== Kind.ImagePolicy && (
         <SyncActions
@@ -45,11 +44,10 @@ const ImageAutomationDetails = ({
 
       <SubRouterTabs rootPath={`${rootPath}/details`}>
         <RouterTab name="Details" path={`${rootPath}/details`}>
-          <>
-            <InfoList items={infoFields} />
-            <Spacer margin="xs" />
+          <Flex column gap="4">
+            <HeaderRows items={infoFields} />
             {children}
-          </>
+          </Flex>
         </RouterTab>
         <RouterTab name="Events" path={`${rootPath}/events`}>
           <EventsTable
diff --git a/ui/components/ImageAutomation/policies/ImagePolicyDetails.tsx b/ui/components/ImageAutomation/policies/ImagePolicyDetails.tsx
index a39c841a8a..3aaea44688 100644
--- a/ui/components/ImageAutomation/policies/ImagePolicyDetails.tsx
+++ b/ui/components/ImageAutomation/policies/ImagePolicyDetails.tsx
@@ -5,6 +5,7 @@ import { useGetObject } from "../../../hooks/objects";
 import { Kind } from "../../../lib/api/core/types.pb";
 import { ImagePolicy } from "../../../lib/objects";
 import { V2Routes } from "../../../lib/types";
+import ClusterDashboardLink from "../../ClusterDashboardLink";
 import Metadata from "../../Metadata";
 import Page from "../../Page";
 import ImageAutomationDetails from "../ImageAutomationDetails";
@@ -33,6 +34,7 @@ function ImagePolicyDetails({
   );
   const { isFlagEnabled } = useFeatureFlags();
   const rootPath = V2Routes.ImagePolicyDetails;
+
   return (
     <Page
       error={error}
@@ -48,14 +50,27 @@ function ImagePolicyDetails({
           data={data}
           kind={Kind.ImagePolicy}
           infoFields={[
-            ["Kind", Kind.ImagePolicy],
-            ["Namespace", data?.namespace],
-            isFlagEnabled("WEAVE_GITOPS_FEATURE_CLUSTER") && [
-              "Cluster",
-              clusterName,
-            ],
-            ["Image Policy", data?.imagePolicy?.type || ""],
-            ["Order/Range", data?.imagePolicy?.value],
+            {
+              rowkey: "Kind",
+              value: Kind.ImagePolicy,
+            },
+            {
+              rowkey: "Namespace",
+              value: data?.namespace,
+            },
+            {
+              rowkey: "Cluster",
+              children: <ClusterDashboardLink clusterName={clusterName} />,
+              visible: isFlagEnabled("WEAVE_GITOPS_FEATURE_CLUSTER"),
+            },
+            {
+              rowkey: "Image Policy",
+              value: data?.imagePolicy?.type,
+            },
+            {
+              rowkey: "Order/Range",
+              value: data?.imagePolicy?.value,
+            },
           ]}
           rootPath={rootPath}
         >
diff --git a/ui/components/ImageAutomation/repositories/ImageAutomationRepoDetails.tsx b/ui/components/ImageAutomation/repositories/ImageAutomationRepoDetails.tsx
index b0a4f39087..d03fde5edf 100644
--- a/ui/components/ImageAutomation/repositories/ImageAutomationRepoDetails.tsx
+++ b/ui/components/ImageAutomation/repositories/ImageAutomationRepoDetails.tsx
@@ -6,6 +6,7 @@ import { Kind } from "../../../lib/api/core/types.pb";
 import { ImageRepository } from "../../../lib/objects";
 import { V2Routes } from "../../../lib/types";
 import Button from "../../Button";
+import ClusterDashboardLink from "../../ClusterDashboardLink";
 import Interval from "../../Interval";
 import Link from "../../Link";
 import Page from "../../Page";
@@ -35,6 +36,7 @@ function ImageAutomationRepoDetails({
   );
   const { isFlagEnabled } = useFeatureFlags();
   const rootPath = V2Routes.ImageAutomationRepositoryDetails;
+
   return (
     <Page
       error={error}
@@ -50,20 +52,35 @@ function ImageAutomationRepoDetails({
           data={data}
           kind={Kind.ImageRepository}
           infoFields={[
-            ["Kind", Kind.ImageRepository],
-            ["Namespace", data.namespace],
-            isFlagEnabled("WEAVE_GITOPS_FEATURE_CLUSTER") && [
-              "Cluster",
-              clusterName,
-            ],
-            [
-              "Image",
-              <Link newTab={true} to={data.obj?.spec?.image}>
-                {data.obj?.spec?.image}
-              </Link>,
-            ],
-            ["Interval", <Interval interval={data.interval} />],
-            ["Tag Count", data.tagCount],
+            {
+              rowkey: "Kind",
+              value: Kind.ImageRepository,
+            },
+            {
+              rowkey: "Namespace",
+              value: data.namespace,
+            },
+            {
+              rowkey: "Cluster",
+              children: <ClusterDashboardLink clusterName={clusterName} />,
+              visible: isFlagEnabled("WEAVE_GITOPS_FEATURE_CLUSTER"),
+            },
+            {
+              rowkey: "Image",
+              children: (
+                <Link newTab={true} to={data.obj?.spec?.image}>
+                  {data.obj?.spec?.image}
+                </Link>
+              ),
+            },
+            {
+              rowkey: "Interval",
+              value: <Interval interval={data.interval} />,
+            },
+            {
+              rowkey: "Tag Count",
+              value: data.tagCount,
+            },
           ]}
           rootPath={rootPath}
         >
diff --git a/ui/components/ImageAutomation/updates/ImageAutomationUpdatesDetails.tsx b/ui/components/ImageAutomation/updates/ImageAutomationUpdatesDetails.tsx
index 6ee9379fb8..1fc004fbb1 100644
--- a/ui/components/ImageAutomation/updates/ImageAutomationUpdatesDetails.tsx
+++ b/ui/components/ImageAutomation/updates/ImageAutomationUpdatesDetails.tsx
@@ -5,9 +5,10 @@ import { useGetObject } from "../../../hooks/objects";
 import { Kind } from "../../../lib/api/core/types.pb";
 import { ImageUpdateAutomation } from "../../../lib/objects";
 import { V2Routes } from "../../../lib/types";
-import { InfoField } from "../../InfoList";
+import ClusterDashboardLink from "../../ClusterDashboardLink";
 import Metadata from "../../Metadata";
 import Page from "../../Page";
+import { RowItem } from "../../Policies/Utils/HeaderRows";
 import SourceLink from "../../SourceLink";
 import ImageAutomationDetails from "../ImageAutomationDetails";
 
@@ -20,7 +21,7 @@ type Props = {
 function getInfoList(
   data: ImageUpdateAutomation,
   clusterName: string
-): InfoField[] {
+): RowItem[] {
   const {
     kind,
     spec: { update, git },
@@ -30,19 +31,49 @@ function getInfoList(
   const { isFlagEnabled } = useFeatureFlags();
 
   return [
-    ["Kind", kind],
-    ["Namespace", data.namespace],
-    isFlagEnabled("WEAVE_GITOPS_FEATURE_CLUSTER") && ["Cluster", clusterName],
-    [
-      "Source",
-      <SourceLink sourceRef={data.sourceRef} clusterName={clusterName} />,
-    ],
-    ["Update Path", path],
-    ["Checkout Branch", checkout?.ref?.branch],
-    ["Push Branch", push?.branch],
-    ["Author Name", commit.author?.name],
-    ["Author Email", commit.author?.email],
-    ["Commit Template", <code> {commit.messageTemplate}</code>],
+    {
+      rowkey: "Kind",
+      value: kind,
+    },
+    {
+      rowkey: "Namespace",
+      value: data.namespace,
+    },
+    {
+      rowkey: "Cluster",
+      children: <ClusterDashboardLink clusterName={clusterName} />,
+      visible: isFlagEnabled("WEAVE_GITOPS_FEATURE_CLUSTER"),
+    },
+    {
+      rowkey: "Source",
+      children: (
+        <SourceLink sourceRef={data.sourceRef} clusterName={clusterName} />
+      ),
+    },
+    {
+      rowkey: "Update Path",
+      value: path,
+    },
+    {
+      rowkey: "Checkout Branch",
+      value: checkout?.ref?.branch,
+    },
+    {
+      rowkey: "Push Branch",
+      value: push?.branch,
+    },
+    {
+      rowkey: "Author Name",
+      value: commit.author?.name,
+    },
+    {
+      rowkey: "Author Email",
+      value: commit.author?.email,
+    },
+    {
+      rowkey: "Commit Template",
+      children: <code> {commit.messageTemplate}</code>,
+    },
   ];
 }
 
diff --git a/ui/components/Policies/Utils/HeaderRows.tsx b/ui/components/Policies/Utils/HeaderRows.tsx
index ec1d801a1b..13c4df7384 100644
--- a/ui/components/Policies/Utils/HeaderRows.tsx
+++ b/ui/components/Policies/Utils/HeaderRows.tsx
@@ -30,9 +30,10 @@ interface Props {
 const HeaderRows = ({ items }: Props) => {
   return (
     <Flex column gap="8">
-      {items.map((h) => {
-        return (
-          h.visible !== false && (
+      {items
+        .filter((h) => h.visible !== false)
+        .map((h) => {
+          return (
             <Flex
               alignItems="center"
               center
@@ -51,9 +52,8 @@ const HeaderRows = ({ items }: Props) => {
                 </Text>
               )}
             </Flex>
-          )
-        );
-      })}
+          );
+        })}
     </Flex>
   );
 };