awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 19:16:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

merge main

Browse Source
This commit is contained in:
Scott Wilson
2025-05-13 12:10:49 -07:00
parent 5b7627585f a34c74e958
commit f6e566a028
411 changed files with 18460 additions and 6770 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/projects/ProjectSettings/components/ProjectTemplatesTab/components/ProjectTemplatesTable.tsx
+10 -5
View File
@@ -25,6 +25,7 @@ import {
import { OrgPermissionActions, OrgPermissionSubjects, useSubscription } from "@app/context";
import { useGetProjectTypeFromRoute, usePopUp } from "@app/hooks";
import { TProjectTemplate, useListProjectTemplates } from "@app/hooks/api/projectTemplates";
import { ProjectType } from "@app/hooks/api/workspace/types";
import { DeleteProjectTemplateModal } from "./DeleteProjectTemplateModal";
@@ -40,6 +41,7 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
const { isPending, data: projectTemplates = [] } = useListProjectTemplates(projectType, {
enabled: subscription?.projectTemplates && Boolean(projectType)
});
const [search, setSearch] = useState("");
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteTemplate"] as const);
@@ -52,7 +54,9 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
[search, projectTemplates]
);
const isSecretManagerTemplates = projectType === "secret-manager";
const isSecretManagerTemplates = projectType === ProjectType.SecretManager;
const colSpan = isSecretManagerTemplates ? 4 : 3;
return (
<div>
@@ -73,10 +77,10 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
</Tr>
</THead>
<TBody>
{isPending && (
{subscription?.projectTemplates && isPending && (
<TableSkeleton
innerKey="project-templates-table"
columns={4}
columns={colSpan}
key="project-templates"
/>
)}
@@ -170,9 +174,10 @@ export const ProjectTemplatesTable = ({ onEdit }: Props) => {
</Tr>
);
})}
{!isPending && filteredTemplates?.length === 0 && (
{(!subscription?.projectTemplates ||
(!isPending && filteredTemplates?.length === 0)) && (
<Tr>
<Td colSpan={5}>
<Td colSpan={colSpan}>
<EmptyState
title={
search.trim()
frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx
+8 -1
View File
@@ -40,7 +40,14 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
return (
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
<FontAwesomeIcon icon={icon} />
<FontAwesomeIcon
icon={icon}
className={
[SecretSyncStatus.Pending, SecretSyncStatus.Running].includes(status)
? "animate-spin"
: ""
}
/>
<span>{text}</span>
</Badge>
);
frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/OCIVaultSyncFields.tsx
+175
View File
@@ -0,0 +1,175 @@
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, Tooltip } from "@app/components/v2";
import {
useOCIConnectionListCompartments,
useOCIConnectionListVaultKeys,
useOCIConnectionListVaults
} from "@app/hooks/api/appConnections/oci";
import { SecretSync } from "@app/hooks/api/secretSyncs";
import { TSecretSyncForm } from "../schemas";
export const OCIVaultSyncFields = () => {
const { control, setValue } = useFormContext<
TSecretSyncForm & { destination: SecretSync.OCIVault }
>();
const connectionId = useWatch({ name: "connection.id", control });
// Compartments
const { data: compartments, isLoading: isCompartmentsLoading } = useOCIConnectionListCompartments(
connectionId,
{
enabled: Boolean(connectionId)
}
);
// Vaults
const selectedCompartment = useWatch({ name: "destinationConfig.compartmentOcid", control });
const { data: vaults, isLoading: isVaultsLoading } = useOCIConnectionListVaults(
{ connectionId, compartmentOcid: selectedCompartment },
{
enabled: Boolean(connectionId && selectedCompartment)
}
);
// Keys
const selectedVault = useWatch({ name: "destinationConfig.vaultOcid", control });
const { data: keys, isLoading: isKeysLoading } = useOCIConnectionListVaultKeys(
{ connectionId, compartmentOcid: selectedCompartment, vaultOcid: selectedVault },
{
enabled: Boolean(connectionId && selectedCompartment && selectedVault)
}
);
return (
<>
<SecretSyncConnectionField
onChange={() => {
setValue("destinationConfig.compartmentOcid", "");
setValue("destinationConfig.vaultOcid", "");
setValue("destinationConfig.keyOcid", "");
}}
/>
<Controller
name="destinationConfig.compartmentOcid"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl
isError={Boolean(error)}
errorText={error?.message}
label="Compartment"
helperText={
<Tooltip
className="max-w-md"
content="Ensure the compartment exists and that the connection has permission to view it."
>
<div>
<span>Don&#39;t see the compartment you&#39;re looking for?</span>{" "}
<FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
</div>
</Tooltip>
}
>
<FilterableSelect
menuPlacement="top"
isLoading={isCompartmentsLoading && Boolean(connectionId)}
isDisabled={!connectionId}
value={compartments?.find((c) => c.id === value) ?? null}
onChange={(option) => {
onChange((option as SingleValue<{ id: string }>)?.id ?? null);
setValue("destinationConfig.vaultOcid", "");
setValue("destinationConfig.keyOcid", "");
}}
options={compartments}
placeholder="Select a compartment..."
getOptionLabel={(option) => option.name}
getOptionValue={(option) => option.id}
/>
</FormControl>
)}
/>
<Controller
name="destinationConfig.vaultOcid"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl
isError={Boolean(error)}
errorText={error?.message}
label="Vault"
helperText={
<Tooltip
className="max-w-md"
content="Ensure the vault exists in the selected compartment and that the connection has permission to view it."
>
<div>
<span>Don&#39;t see the vault you&#39;re looking for?</span>{" "}
<FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
</div>
</Tooltip>
}
>
<FilterableSelect
menuPlacement="top"
isLoading={isVaultsLoading && Boolean(connectionId)}
isDisabled={!connectionId || !selectedCompartment}
value={vaults?.find((v) => v.id === value) ?? null}
onChange={(option) => {
onChange((option as SingleValue<{ id: string }>)?.id ?? null);
setValue("destinationConfig.keyOcid", "");
}}
options={vaults}
placeholder="Select a vault..."
getOptionLabel={(option) => option.displayName}
getOptionValue={(option) => option.id}
/>
</FormControl>
)}
/>
<Controller
name="destinationConfig.keyOcid"
control={control}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl
isError={Boolean(error)}
errorText={error?.message}
label="Encryption Key"
helperText={
<Tooltip
className="max-w-md"
content="Ensure the key exists in the selected vault and that the connection has permission to view it."
>
<div>
<span>Don&#39;t see the key you&#39;re looking for?</span>{" "}
<FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
</div>
</Tooltip>
}
>
<FilterableSelect
menuPlacement="top"
isLoading={isKeysLoading && Boolean(connectionId)}
isDisabled={!connectionId || !selectedCompartment || !selectedVault}
value={keys?.find((v) => v.id === value) ?? null}
onChange={(option) => {
onChange((option as SingleValue<{ id: string }>)?.id ?? null);
}}
options={keys}
placeholder="Select a key..."
getOptionLabel={(option) => option.displayName}
getOptionValue={(option) => option.id}
/>
</FormControl>
)}
/>
</>
);
};
frontend/src/components/secret-syncs/forms/SecretSyncDestinationFields/SecretSyncDestinationFields.tsx
+3
View File
@@ -13,6 +13,7 @@ import { GcpSyncFields } from "./GcpSyncFields";
import { GitHubSyncFields } from "./GitHubSyncFields";
import { HCVaultSyncFields } from "./HCVaultSyncFields";
import { HumanitecSyncFields } from "./HumanitecSyncFields";
import { OCIVaultSyncFields } from "./OCIVaultSyncFields";
import { TeamCitySyncFields } from "./TeamCitySyncFields";
import { TerraformCloudSyncFields } from "./TerraformCloudSyncFields";
import { VercelSyncFields } from "./VercelSyncFields";
@@ -52,6 +53,8 @@ export const SecretSyncDestinationFields = () => {
return <HCVaultSyncFields />;
case SecretSync.TeamCity:
return <TeamCitySyncFields />;
case SecretSync.OCIVault:
return <OCIVaultSyncFields />;
default:
throw new Error(`Unhandled Destination Config Field: ${destination}`);
}
frontend/src/components/secret-syncs/forms/SecretSyncOptionsFields/SecretSyncOptionsFields.tsx
+1
View File
@@ -45,6 +45,7 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
case SecretSync.Windmill:
case SecretSync.HCVault:
case SecretSync.TeamCity:
case SecretSync.OCIVault:
AdditionalSyncOptionsFieldsComponent = null;
break;
default:
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx
+26
View File
@@ -0,0 +1,26 @@
import { useFormContext } from "react-hook-form";
import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
import { GenericFieldLabel } from "@app/components/v2";
import { SecretSync } from "@app/hooks/api/secretSyncs";
export const OCIVaultSyncReviewFields = () => {
const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.OCIVault }>();
const compartmentOcid = watch("destinationConfig.compartmentOcid");
const vaultOcid = watch("destinationConfig.vaultOcid");
const keyOcid = watch("destinationConfig.keyOcid");
return (
<>
<GenericFieldLabel label="Compartment OCID" truncate>
{compartmentOcid}
</GenericFieldLabel>
<GenericFieldLabel label="Vault OCID" truncate>
{vaultOcid}
</GenericFieldLabel>
<GenericFieldLabel label="Key OCID" truncate>
{keyOcid}
</GenericFieldLabel>
</>
);
};
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx
+4
View File
@@ -23,6 +23,7 @@ import { GcpSyncReviewFields } from "./GcpSyncReviewFields";
import { GitHubSyncReviewFields } from "./GitHubSyncReviewFields";
import { HCVaultSyncReviewFields } from "./HCVaultSyncReviewFields";
import { HumanitecSyncReviewFields } from "./HumanitecSyncReviewFields";
import { OCIVaultSyncReviewFields } from "./OCIVaultSyncReviewFields";
import { TeamCitySyncReviewFields } from "./TeamCitySyncReviewFields";
import { TerraformCloudSyncReviewFields } from "./TerraformCloudSyncReviewFields";
import { VercelSyncReviewFields } from "./VercelSyncReviewFields";
@@ -96,6 +97,9 @@ export const SecretSyncReviewFields = () => {
case SecretSync.TeamCity:
DestinationFieldsComponent = <TeamCitySyncReviewFields />;
break;
case SecretSync.OCIVault:
DestinationFieldsComponent = <OCIVaultSyncReviewFields />;
break;
default:
throw new Error(`Unhandled Destination Review Fields: ${destination}`);
}
frontend/src/components/secret-syncs/forms/schemas/oci-vault-sync-destination-schema.ts
+33
View File
@@ -0,0 +1,33 @@
import { z } from "zod";
import { BaseSecretSyncSchema } from "@app/components/secret-syncs/forms/schemas/base-secret-sync-schema";
import { SecretSync } from "@app/hooks/api/secretSyncs";
export const OCIVaultSyncDestinationSchema = BaseSecretSyncSchema().merge(
z.object({
destination: z.literal(SecretSync.OCIVault),
destinationConfig: z.object({
compartmentOcid: z
.string()
.trim()
.min(1, "Compartment OCID required")
.regex(
/^ocid1\.(tenancy|compartment)\.oc1\..+$/,
"Invalid Compartment OCID format. Must start with ocid1.tenancy.oc1. or ocid1.compartment.oc1."
),
vaultOcid: z
.string()
.trim()
.min(1, "Vault OCID required")
.regex(
/^ocid1\.vault\.oc1\..+$/,
"Invalid Vault OCID format. Must start with ocid1.vault.oc1."
),
keyOcid: z
.string()
.trim()
.min(1, "Key OCID required")
.regex(/^ocid1\.key\.oc1\..+$/, "Invalid Key OCID format. Must start with ocid1.key.oc1.")
})
})
);
frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts
+3 -1
View File
@@ -10,6 +10,7 @@ import { GcpSyncDestinationSchema } from "./gcp-sync-destination-schema";
import { GitHubSyncDestinationSchema } from "./github-sync-destination-schema";
import { HCVaultSyncDestinationSchema } from "./hc-vault-sync-destination-schema";
import { HumanitecSyncDestinationSchema } from "./humanitec-sync-destination-schema";
import { OCIVaultSyncDestinationSchema } from "./oci-vault-sync-destination-schema";
import { TeamCitySyncDestinationSchema } from "./teamcity-sync-destination-schema";
import { TerraformCloudSyncDestinationSchema } from "./terraform-cloud-destination-schema";
import { VercelSyncDestinationSchema } from "./vercel-sync-destination-schema";
@@ -29,7 +30,8 @@ const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
VercelSyncDestinationSchema,
WindmillSyncDestinationSchema,
HCVaultSyncDestinationSchema,
TeamCitySyncDestinationSchema
TeamCitySyncDestinationSchema,
OCIVaultSyncDestinationSchema
]);
export const SecretSyncFormSchema = SecretSyncUnionSchema;
frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
+10 -3
View File
@@ -6,14 +6,21 @@ type Props = {
children?: ReactNode;
className?: string;
labelClassName?: string;
truncate?: boolean;
};
export const GenericFieldLabel = ({ label, children, className, labelClassName }: Props) => {
export const GenericFieldLabel = ({
label,
children,
className,
labelClassName,
truncate
}: Props) => {
return (
<div className={className}>
<div className={twMerge("min-w-0", className)}>
<p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
{children ? (
<p className="text-sm text-mineshaft-100">{children}</p>
<p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
) : (
<p className="text-sm italic text-mineshaft-400/50">None</p>
)}
frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx
+3 -2
View File
@@ -7,9 +7,10 @@ type Props = {
title: string;
children: ReactNode;
className?: string;
titleClassName?: string;
};
export const NoticeBannerV2 = ({ title, children, className }: Props) => {
export const NoticeBannerV2 = ({ title, children, className, titleClassName }: Props) => {
return (
<div
className={twMerge(
@@ -17,7 +18,7 @@ export const NoticeBannerV2 = ({ title, children, className }: Props) => {
className
)}
>
<div className="mb-1 flex items-center text-sm">
<div className={twMerge("mb-1 flex items-center text-sm", titleClassName)}>
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
{title}
</div>