General improvements to Humanitec integration

frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx

@@ -1,13 +1,18 @@
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { SecretSyncConnectionField } from "@app/components/secret-syncs/forms/SecretSyncConnectionField";
-import { FilterableSelect, FormControl } from "@app/components/v2";
+import { FilterableSelect, FormControl, Select, SelectItem, Tooltip } from "@app/components/v2";
 import {
   THumanitecConnectionApp,
+  THumanitecConnectionEnvironment,
+  THumanitecConnectionOrganization,
   useHumanitecConnectionListOrganizations
 } from "@app/hooks/api/appConnections/humanitec";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 import { TSecretSyncForm } from "../schemas";
 
@@ -19,11 +24,17 @@ export const HumanitecSyncFields = () => {
   const connectionId = useWatch({ name: "connection.id", control });
   const currentOrg = watch("destinationConfig.org");
   const currentApp = watch("destinationConfig.app");
+  const currentScope = watch("destinationConfig.scope");
 
   const { data: organizations = [], isPending: isOrganizationsPending } =
     useHumanitecConnectionListOrganizations(connectionId, {
       enabled: Boolean(connectionId)
     });
+
+  const selectedOrg = organizations?.find((org) => org.id === currentOrg);
+  const selectedApp = selectedOrg?.apps?.find((app) => app.id === currentApp);
+  const environments = selectedApp?.envs || [];
+
   return (
     <>
       <SecretSyncConnectionField
@@ -32,6 +43,31 @@ export const HumanitecSyncFields = () => {
           setValue("destinationConfig.app", "");
         }}
       />
+      <Controller
+        name="destinationConfig.scope"
+        control={control}
+        defaultValue={HumanitecSyncScope.Application}
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl errorText={error?.message} isError={Boolean(error?.message)} label="Scope">
+            <Select
+              value={value}
+              onValueChange={(val) => {
+                onChange(val);
+              }}
+              className="w-full border border-mineshaft-500 capitalize"
+              position="popper"
+              placeholder="Select a scope..."
+              dropdownContainerClassName="max-w-none"
+            >
+              {Object.values(HumanitecSyncScope).map((scope) => (
+                <SelectItem className="capitalize" value={scope} key={scope}>
+                  {scope.replace("-", " ")}
+                </SelectItem>
+              ))}
+            </Select>
+          </FormControl>
+        )}
+      />
       <Controller
         name="destinationConfig.org"
         control={control}
@@ -46,7 +82,7 @@ export const HumanitecSyncFields = () => {
               isDisabled={!connectionId}
               value={organizations ? (organizations.find((org) => org.id === value) ?? []) : []}
               onChange={(option) =>
-                onChange((option as SingleValue<THumanitecConnectionApp>)?.id ?? null)
+                onChange((option as SingleValue<THumanitecConnectionOrganization>)?.id ?? null)
               }
               options={organizations}
               placeholder="Select an organization..."
@@ -60,7 +96,22 @@ export const HumanitecSyncFields = () => {
         name="destinationConfig.app"
         control={control}
         render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl isError={Boolean(error)} errorText={error?.message} label="App">
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="App"
+            helperText={
+              <Tooltip
+                className="max-w-md"
+                content="Ensure that the app exists in the selected organization and the service account used on this connection has write permissions for the specified app."
+              >
+                <div>
+                  <span>Don&#39;t see the app you&#39;re looking for?</span>{" "}
+                  <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+                </div>
+              </Tooltip>
+            }
+          >
             <FilterableSelect
               menuPlacement="top"
               isLoading={isOrganizationsPending && Boolean(connectionId) && Boolean(currentOrg)}
@@ -70,9 +121,10 @@ export const HumanitecSyncFields = () => {
                   .find((org) => org.id === currentOrg)
                   ?.apps?.find((app) => app.id === value) ?? null
               }
-              onChange={(option) =>
-                onChange((option as SingleValue<THumanitecConnectionApp>)?.id ?? null)
-              }
+              onChange={(option) => {
+                onChange((option as SingleValue<THumanitecConnectionApp>)?.id ?? null);
+                setValue("destinationConfig.env", "");
+              }}
               options={
                 currentOrg ? (organizations.find((org) => org.id === currentOrg)?.apps ?? []) : []
               }
@@ -83,43 +135,34 @@ export const HumanitecSyncFields = () => {
           </FormControl>
         )}
       />
-      <Controller
-        name="destinationConfig.env"
-        control={control}
-        render={({ field: { value, onChange }, fieldState: { error } }) => (
-          <FormControl isError={Boolean(error)} errorText={error?.message} label="Environment">
-            <FilterableSelect
-              menuPlacement="top"
-              isLoading={
-                isOrganizationsPending &&
-                Boolean(connectionId) &&
-                Boolean(currentOrg) &&
-                Boolean(currentApp)
-              }
-              isDisabled={!connectionId || !currentApp}
-              value={
-                organizations
-                  .find((org) => org.id === currentOrg)
-                  ?.apps?.find((app) => app.id === currentApp)
-                  ?.envs?.find((env) => env.id === value) ?? null
-              }
-              onChange={(option) =>
-                onChange((option as SingleValue<THumanitecConnectionApp>)?.id ?? null)
-              }
-              options={
-                currentApp
-                  ? ((organizations.find((org) => org.id === currentOrg)?.apps ?? [])?.find(
-                      (app) => app.id === currentApp
-                    )?.envs ?? [])
-                  : []
-              }
-              placeholder="Select an env..."
-              getOptionLabel={(option) => option.name}
-              getOptionValue={(option) => option.id.toString()}
-            />
-          </FormControl>
-        )}
-      />
+      {currentScope === HumanitecSyncScope.Environment && (
+        <Controller
+          name="destinationConfig.env"
+          control={control}
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} label="Environment">
+              <FilterableSelect
+                menuPlacement="top"
+                isLoading={
+                  isOrganizationsPending &&
+                  Boolean(connectionId) &&
+                  Boolean(currentOrg) &&
+                  Boolean(currentApp)
+                }
+                isDisabled={!connectionId || !currentApp}
+                value={environments.find((env) => env.id === value) ?? null}
+                onChange={(option) =>
+                  onChange((option as SingleValue<THumanitecConnectionEnvironment>)?.id ?? null)
+                }
+                options={environments}
+                placeholder="Select an env..."
+                getOptionLabel={(option) => option.name}
+                getOptionValue={(option) => option.id.toString()}
+              />
+            </FormControl>
+          )}
+        />
+      )}
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/HumanitecSyncReviewFields.tsx

@@ -3,18 +3,22 @@ import { useFormContext } from "react-hook-form";
 import { SecretSyncLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 export const HumanitecSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Humanitec }>();
   const orgId = watch("destinationConfig.org");
   const appId = watch("destinationConfig.app");
   const envId = watch("destinationConfig.env");
+  const scope = watch("destinationConfig.scope");
 
   return (
     <>
       <SecretSyncLabel label="Organization">{orgId}</SecretSyncLabel>
-      <SecretSyncLabel label="App">{appId}</SecretSyncLabel>
-      <SecretSyncLabel label="Environment">{envId}</SecretSyncLabel>
+      <SecretSyncLabel label="Application">{appId}</SecretSyncLabel>
+      {scope === HumanitecSyncScope.Environment && (
+        <SecretSyncLabel label="Environment">{envId}</SecretSyncLabel>
+      )}
     </>
   );
 };

frontend/src/components/secret-syncs/forms/schemas/humanitec-sync-destination-schema.ts

@@ -2,14 +2,23 @@ import { z } from "zod";
 
 import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
+import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
 
 export const HumanitecSyncDestinationSchema = BaseSecretSyncSchema().merge(
   z.object({
     destination: z.literal(SecretSync.Humanitec),
-    destinationConfig: z.object({
-      org: z.string().trim().min(1, "Organization required"),
-      app: z.string().trim().min(1, "App required"),
-      env: z.string().trim().min(1, "Environment required")
-    })
+    destinationConfig: z.discriminatedUnion("scope", [
+      z.object({
+        scope: z.literal(HumanitecSyncScope.Application),
+        org: z.string().trim().min(1, "Organization required"),
+        app: z.string().trim().min(1, "Application required")
+      }),
+      z.object({
+        scope: z.literal(HumanitecSyncScope.Environment),
+        org: z.string().trim().min(1, "Organization required"),
+        app: z.string().trim().min(1, "Application required"),
+        env: z.string().trim().min(1, "Environment required")
+      })
+    ])
   })
 );