awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 14:27:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

General improvements to Humanitec integration

Browse Source
This commit is contained in:
carlosmonastyrski
2025-03-13 09:41:12 -03:00
parent 568aadef75
commit b0b55344ce
27 changed files with 340 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/HumanitecSyncFields.tsx
+86 -43
View File
@@ -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
+6 -2
View File
@@ -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
+14 -5
View File
@@ -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")
})
])
})
);
frontend/src/helpers/appConnections.ts
+2 -2
View File
@@ -45,8 +45,8 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
return { name: "Service Account Impersonation", icon: faUser };
case DatabricksConnectionMethod.ServicePrincipal:
return { name: "Service Principal", icon: faUser };
case HumanitecConnectionMethod.AccessKey:
return { name: "Access Key", icon: faKey };
case HumanitecConnectionMethod.API_TOKEN:
return { name: "API Token", icon: faKey };
default:
throw new Error(`Unhandled App Connection Method: ${method}`);
}
frontend/src/hooks/api/appConnections/humanitec/types.ts
+13
View File
@@ -12,4 +12,17 @@ export type THumanitecApp = {
export type THumanitecConnectionApp = {
id: string;
name: string;
envs: THumanitecConnectionEnvironment[];
};
export type THumanitecConnectionEnvironment = {
id: string;
name: string;
};
export type THumanitecConnectionOrganization = {
id: string;
name: string;
apps: THumanitecConnectionApp[];
};
frontend/src/hooks/api/appConnections/types/app-options.ts
+2 -1
View File
@@ -44,7 +44,8 @@ export type TAppConnectionOption =
| TGcpConnectionOption
| TAzureAppConfigurationConnectionOption
| TAzureKeyVaultConnectionOption
| TDatabricksConnectionOption;
| TDatabricksConnectionOption
| THumanitecConnectionOption;
export type TAppConnectionOptionMap = {
[AppConnection.AWS]: TAwsConnectionOption;
frontend/src/hooks/api/appConnections/types/humanitec-connection.ts
+3 -3
View File
@@ -2,12 +2,12 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
export enum HumanitecConnectionMethod {
AccessKey = "access-key"
API_TOKEN = "api-token"
}
export type THumanitecConnection = TRootAppConnection & { app: AppConnection.Humanitec } & {
method: HumanitecConnectionMethod.AccessKey;
method: HumanitecConnectionMethod.API_TOKEN;
credentials: {
accessKeyId: string;
apiToken: string;
};
};
frontend/src/hooks/api/secretSyncs/types/humanitec-sync.ts
+17 -4
View File
@@ -4,13 +4,26 @@ import { TRootSecretSync } from "@app/hooks/api/secretSyncs/types/root-sync";
export type THumanitecSync = TRootSecretSync & {
destination: SecretSync.Humanitec;
destinationConfig: {
org: string;
app: string;
};
destinationConfig:
| {
scope: HumanitecSyncScope.Application;
org: string;
app: string;
}
| {
scope: HumanitecSyncScope.Environment;
org: string;
app: string;
env: string;
};
connection: {
app: AppConnection.Humanitec;
name: string;
id: string;
};
};
export enum HumanitecSyncScope {
Application = "application",
Environment = "environment"
}
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/HumanitecConnectionForm.tsx
+5 -5
View File
@@ -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
+12 -2
View File
@@ -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
+36 -6
View File
@@ -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}
</>
);
};