General improvements to Humanitec integration

frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/helpers/index.ts

@@ -3,6 +3,7 @@ import {
   GitHubSyncScope,
   GitHubSyncVisibility
 } from "@app/hooks/api/secretSyncs/types/github-sync";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 // This functional ensures parity across what is displayed in the destination column
 // and the values used when search filtering
@@ -60,8 +61,17 @@ export const getSecretSyncDestinationColValues = (secretSync: TSecretSync) => {
       primaryText = destinationConfig.scope;
       break;
     case SecretSync.Humanitec:
-      primaryText = destinationConfig.app;
-      secondaryText = `Org - ${destinationConfig.org}`;
+      switch (destinationConfig.scope) {
+        case HumanitecSyncScope.Application:
+          primaryText = destinationConfig.app;
+          break;
+        case HumanitecSyncScope.Environment:
+          primaryText = `${destinationConfig.app} / ${destinationConfig.env}`;
+          break;
+        default:
+          throw new Error(`Unhandled Humanitec Scope Destination Col Values ${destination}`);
+      }
+      secondaryText = `Organization - ${destinationConfig.org}`;
       break;
     default:
       throw new Error(`Unhandled Destination Col Values ${destination}`);

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/HumanitecSyncDestinationSection.tsx

@@ -1,19 +1,49 @@
+import { ReactNode } from "react";
+
 import { SecretSyncLabel } from "@app/components/secret-syncs";
-import { THumanitecSync } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
+import {
+  HumanitecSyncScope,
+  THumanitecSync
+} from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 type Props = {
   secretSync: THumanitecSync;
 };
 
 export const HumanitecSyncDestinationSection = ({ secretSync }: Props) => {
-  const {
-    destinationConfig: { app, org }
-  } = secretSync;
+  const { destinationConfig } = secretSync;
+
+  let Components: ReactNode;
+  switch (destinationConfig.scope) {
+    case HumanitecSyncScope.Application:
+      Components = (
+        <>
+          <SecretSyncLabel label="Application">{destinationConfig.app}</SecretSyncLabel>
+          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
+        </>
+      );
+      break;
+    case HumanitecSyncScope.Environment:
+      Components = (
+        <>
+          <SecretSyncLabel label="Application">{destinationConfig.app}</SecretSyncLabel>
+          <SecretSyncLabel label="Organization">{destinationConfig.org}</SecretSyncLabel>
+          <SecretSyncLabel label="Environment">{destinationConfig.env}</SecretSyncLabel>
+        </>
+      );
+      break;
+    default:
+      throw new Error(
+        `Uhandled Humanitec Sync Destination Section Scope ${secretSync.destinationConfig.scope}`
+      );
+  }
 
   return (
     <>
-      <SecretSyncLabel label="App">{app}</SecretSyncLabel>
-      <SecretSyncLabel label="Org">{org}</SecretSyncLabel>
+      <SecretSyncLabel className="capitalize" label="Scope">
+        {destinationConfig.scope.replace("-", " ")}
+      </SecretSyncLabel>
+      {Components}
     </>
   );
 };