General improvements to Humanitec integration

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}
     </>
   );
 };