General improvements to Humanitec integration

frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HumanitecConnectionForm.tsx

@@ -30,9 +30,9 @@ const rootSchema = genericAppConnectionFieldsSchema.extend({
 
 const formSchema = z.discriminatedUnion("method", [
   rootSchema.extend({
-    method: z.literal(HumanitecConnectionMethod.AccessKey),
+    method: z.literal(HumanitecConnectionMethod.API_TOKEN),
     credentials: z.object({
-      accessKeyId: z.string().trim().min(1, "Service API Token required")
+      apiToken: z.string().trim().min(1, "Service API Token required")
     })
   })
 ]);
@@ -46,7 +46,7 @@ export const HumanitecConnectionForm = ({ appConnection, onSubmit }: Props) => {
     resolver: zodResolver(formSchema),
     defaultValues: appConnection ?? {
       app: AppConnection.Humanitec,
-      method: HumanitecConnectionMethod.AccessKey
+      method: HumanitecConnectionMethod.API_TOKEN
     }
   });
 
@@ -66,7 +66,7 @@ export const HumanitecConnectionForm = ({ appConnection, onSubmit }: Props) => {
           render={({ field: { value, onChange }, fieldState: { error } }) => (
             <FormControl
               tooltipText={`The method you would like to use to connect with ${
-                APP_CONNECTION_MAP[AppConnection.AWS].name
+                APP_CONNECTION_MAP[AppConnection.Humanitec].name
               }. This field cannot be changed after creation.`}
               errorText={error?.message}
               isError={Boolean(error?.message)}
@@ -92,7 +92,7 @@ export const HumanitecConnectionForm = ({ appConnection, onSubmit }: Props) => {
           )}
         />
         <Controller
-          name="credentials.accessKeyId"
+          name="credentials.apiToken"
           control={control}
           shouldUnregister
           render={({ field: { value, onChange }, fieldState: { error } }) => (

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