From bb59e04c28a66a9e911f8ecd5eb3aa8b54cbb13c Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 11 Apr 2025 22:09:37 +0800
Subject: [PATCH] misc: updated ui to show cluster name instead of just ID

---
 .../src/hooks/api/secretSyncs/types/camunda-sync.ts |  1 +
 .../CamundaSyncDestinationCol.tsx                   | 13 ++++++++++++-
 .../SecretSyncsTab/SecretSyncTable/helpers/index.ts |  2 +-
 .../CamundaSyncDestinationSection.tsx               |  5 ++++-
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/hooks/api/secretSyncs/types/camunda-sync.ts b/frontend/src/hooks/api/secretSyncs/types/camunda-sync.ts
index 1f7f346c6..7332a0a4a 100644
--- a/frontend/src/hooks/api/secretSyncs/types/camunda-sync.ts
+++ b/frontend/src/hooks/api/secretSyncs/types/camunda-sync.ts
@@ -11,6 +11,7 @@ export type TCamundaSync = TRootSecretSync & {
   destinationConfig: {
     scope: string;
     clusterUUID: string;
+    clusterName?: string;
   };
   connection: {
     app: AppConnection.Camunda;
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/CamundaSyncDestinationCol.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/CamundaSyncDestinationCol.tsx
index ebfd80c4e..0fe1b640a 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/CamundaSyncDestinationCol.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/CamundaSyncDestinationCol.tsx
@@ -1,3 +1,4 @@
+import { useCamundaConnectionListClusters } from "@app/hooks/api/appConnections/camunda";
 import { TCamundaSync } from "@app/hooks/api/secretSyncs/types/camunda-sync";
 
 import { getSecretSyncDestinationColValues } from "../helpers";
@@ -8,7 +9,17 @@ type Props = {
 };
 
 export const CamundaDestinationSyncCol = ({ secretSync }: Props) => {
-  const { primaryText, secondaryText } = getSecretSyncDestinationColValues(secretSync);
+  const { data: clusters } = useCamundaConnectionListClusters(secretSync.connectionId);
+
+  const { primaryText, secondaryText } = getSecretSyncDestinationColValues({
+    ...secretSync,
+    destinationConfig: {
+      ...secretSync.destinationConfig,
+      clusterName: clusters?.find(
+        (cluster) => cluster.uuid === secretSync.destinationConfig.clusterUUID
+      )?.name
+    }
+  });
 
   return <SecretSyncTableCell primaryText={primaryText} secondaryText={secondaryText} />;
 };
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts
index 9671bfacb..1b457dc2b 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts
@@ -74,7 +74,7 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
       secondaryText = `Organization - ${destinationConfig.org}`;
       break;
     case SecretSync.Camunda:
-      primaryText = destinationConfig.clusterUUID;
+      primaryText = destinationConfig.clusterName ?? destinationConfig.clusterUUID;
       secondaryText = "Cluster";
       break;
     case SecretSync.Vercel:
diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/CamundaSyncDestinationSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/CamundaSyncDestinationSection.tsx
index 35a77c3ee..cfd3ade81 100644
--- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/CamundaSyncDestinationSection.tsx
+++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/CamundaSyncDestinationSection.tsx
@@ -1,4 +1,5 @@
 import { GenericFieldLabel } from "@app/components/secret-syncs";
+import { useCamundaConnectionListClusters } from "@app/hooks/api/appConnections/camunda";
 import { TCamundaSync } from "@app/hooks/api/secretSyncs/types/camunda-sync";
 
 type Props = {
@@ -6,9 +7,11 @@ type Props = {
 };
 
 export const CamundaSyncDestinationSection = ({ secretSync }: Props) => {
+  const { data: clusters } = useCamundaConnectionListClusters(secretSync.connectionId);
   const {
     destinationConfig: { clusterUUID }
   } = secretSync;
 
-  return <GenericFieldLabel label="Cluster UUID">{clusterUUID}</GenericFieldLabel>;
+  const clusterName = clusters?.find((cluster) => cluster.uuid === clusterUUID)?.name;
+  return <GenericFieldLabel label="Cluster">{clusterName ?? clusterUUID}</GenericFieldLabel>;
 };