awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvements: address feedback

Browse Source
This commit is contained in:
Scott Wilson
2025-01-20 22:17:20 -08:00
parent 6341b7e989
commit 3c1fc024c2
57 changed files with 981 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/secret-syncs/CreateSecretSyncModal.tsx
View File

@@ -51,6 +51,7 @@ export const CreateSecretSyncModal = ({ onOpenChange, ...props }: Props) => {
"Add Sync"
)
}
onPointerDownOutside={(e) => e.preventDefault()}
className="max-w-2xl"
subTitle={selectedSync ? undefined : "Select a third-party service to sync secrets to."}
bodyClassName="overflow-visible"

23
frontend/src/components/secret-syncs/DeleteSecretSyncModal.tsx
View File

@@ -1,5 +1,7 @@
import { useState } from "react";
import { createNotification } from "@app/components/notifications";
import { DeleteActionModal } from "@app/components/v2";
import { DeleteActionModal, Switch } from "@app/components/v2";
import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
import { TSecretSync, useDeleteSecretSync } from "@app/hooks/api/secretSyncs";
@@ -12,6 +14,7 @@ type Props = {
export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComplete }: Props) => {
const deleteSync = useDeleteSecretSync();
const [removeSecrets, setRemoveSecrets] = useState(false);
if (!secretSync) return null;
@@ -23,7 +26,8 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
try {
await deleteSync.mutateAsync({
syncId,
destination
destination,
removeSecrets
});
createNotification({
@@ -37,7 +41,7 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
console.error(err);
createNotification({
text: `Failed remove ${destinationName} Sync`,
text: `Failed to remove ${destinationName} Sync`,
type: "error"
});
}
@@ -50,6 +54,17 @@ export const DeleteSecretSyncModal = ({ isOpen, onOpenChange, secretSync, onComp
title={`Are you sure want to delete ${name}?`}
deleteKey={name}
onDeleteApproved={handleDeleteSecretSync}
/>
>
<Switch
containerClassName="mt-4"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
thumbClassName="bg-mineshaft-800"
isChecked={removeSecrets}
onCheckedChange={setRemoveSecrets}
id="remove-secrets"
>
Remove Synced Secrets
</Switch>
</DeleteActionModal>
);
};

4
frontend/src/components/secret-syncs/SecretSyncStatusBadge.tsx
View File

@@ -21,7 +21,7 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
switch (status) {
case SecretSyncStatus.Failed:
variant = "danger";
text = "Failed";
text = "Failed to Sync";
icon = faExclamationTriangle;
break;
case SecretSyncStatus.Succeeded:
@@ -39,7 +39,7 @@ export const SecretSyncStatusBadge = ({ status }: Props) => {
}
return (
<Badge className="flex h-5 w-min items-center gap-1.5" variant={variant}>
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap" variant={variant}>
<FontAwesomeIcon icon={icon} />
<span>{text}</span>
</Badge>

9
frontend/src/components/secret-syncs/forms/EditSecretSyncForm.tsx
View File

@@ -8,7 +8,7 @@ import { Button, ModalClose } from "@app/components/v2";
import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
import { TSecretSync, useUpdateSecretSync } from "@app/hooks/api/secretSyncs";
import { SecretSyncFormSchema, TSecretSyncForm } from "./schemas";
import { TSecretSyncForm, UpdateSecretSyncFormSchema } from "./schemas";
import { SecretSyncDestinationFields } from "./SecretSyncDestinationFields";
import { SecretSyncDetailsFields } from "./SecretSyncDetailsFields";
import { SecretSyncOptionsFields } from "./SecretSyncOptionsFields";
@@ -25,10 +25,11 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
const { name: destinationName } = SECRET_SYNC_MAP[secretSync.destination];
const formMethods = useForm<TSecretSyncForm>({
resolver: zodResolver(SecretSyncFormSchema),
resolver: zodResolver(UpdateSecretSyncFormSchema),
defaultValues: {
...secretSync,
secretPath: secretSync.folder.path,
environment: secretSync.environment ?? undefined,
secretPath: secretSync.folder?.path,
description: secretSync.description ?? ""
},
reValidateMode: "onChange"
@@ -39,7 +40,7 @@ export const EditSecretSyncForm = ({ secretSync, fields, onComplete }: Props) =>
const updatedSecretSync = await updateSecretSync.mutateAsync({
syncId: secretSync.id,
...formData,
environment: environment.slug
environment: environment?.slug
});
createNotification({

5
frontend/src/components/secret-syncs/forms/SecretSyncConnectionField.tsx
View File

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from "@tanstack/react-router";
import { FilterableSelect, FormControl } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
import { OrgPermissionSubjects, useOrgPermission } from "@app/context";
import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
import { SECRET_SYNC_CONNECTION_MAP } from "@app/helpers/secretSyncs";
import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
@@ -27,7 +28,7 @@ export const SecretSyncConnectionField = ({ onChange: callback }: Props) => {
const connectionName = APP_CONNECTION_MAP[app].name;
const canCreateConnection = permission.can(
OrgPermissionActions.Create,
OrgPermissionAppConnectionActions.Create,
OrgPermissionSubjects.AppConnections
);

18
frontend/src/components/secret-syncs/forms/schemas/aws-parameter-store-sync-destination-schema.ts
View File

@@ -7,22 +7,10 @@ export const AwsParameterStoreSyncDestinationSchema = z.object({
destinationConfig: z.object({
path: z
.string()
.trim()
.min(1, "Parameter Store Path required")
.superRefine((val, ctx) => {
if (!/^\/([/]|(([\w-]+\/)+))?$/.test(val)) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'Invalid path - must follow "/example/path/" format'
});
}
if (val.length > 2048) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Cannot exceed 2048 characters"
});
}
}),
.max(2048, "Cannot exceed 2048 characters")
.regex(/^\/([/]|(([\w-]+\/)+))?$/),
region: z.string().min(1, "Region required")
})
});

22
frontend/src/components/secret-syncs/forms/schemas/github-sync-destination-schema.ts
View File

@@ -29,17 +29,17 @@ export const GitHubSyncDestinationSchema = z.object({
})
])
.superRefine((options, ctx) => {
if (options.scope !== GitHubSyncScope.Organization) return;
if (
options.visibility === GitHubSyncVisibility.Selected &&
!options.selectedRepositoryIds?.length
) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Select at least 1 repository",
path: ["selectedRepositoryIds"]
});
if (options.scope === GitHubSyncScope.Organization) {
if (
options.visibility === GitHubSyncVisibility.Selected &&
!options.selectedRepositoryIds?.length
) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "Select at least 1 repository",
path: ["selectedRepositoryIds"]
});
}
}
})
});

14
frontend/src/components/secret-syncs/forms/schemas/secret-sync-schema.ts
View File

@@ -28,11 +28,13 @@ const BaseSecretSyncSchema = z.object({
isEnabled: z.boolean()
});
export const SecretSyncFormSchema = z
.discriminatedUnion("destination", [
AwsParameterStoreSyncDestinationSchema,
GitHubSyncDestinationSchema
])
.and(BaseSecretSyncSchema);
const SecretSyncUnionSchema = z.discriminatedUnion("destination", [
AwsParameterStoreSyncDestinationSchema,
GitHubSyncDestinationSchema
]);
export const SecretSyncFormSchema = SecretSyncUnionSchema.and(BaseSecretSyncSchema);
export const UpdateSecretSyncFormSchema = SecretSyncUnionSchema.and(BaseSecretSyncSchema.partial());
export type TSecretSyncForm = z.infer<typeof SecretSyncFormSchema>;

2
frontend/src/context/OrgPermissionContext/types.ts
View File

@@ -61,7 +61,7 @@ export type OrgPermissionSet =
| [OrgPermissionAdminConsoleAction, OrgPermissionSubjects.AdminConsole]
| [OrgPermissionActions, OrgPermissionSubjects.AuditLogs]
| [OrgPermissionActions, OrgPermissionSubjects.ProjectTemplates]
| [OrgPermissionActions, OrgPermissionSubjects.AppConnections];
| [OrgPermissionAppConnectionActions, OrgPermissionSubjects.AppConnections];
// TODO(scott): add back once org UI refactored
// | [
// OrgPermissionAppConnectionActions,

12
frontend/src/context/ProjectPermissionContext/types.ts
View File

@@ -24,6 +24,16 @@ export enum ProjectPermissionCmekActions {
Decrypt = "decrypt"
}
export enum ProjectPermissionSecretSyncActions {
Read = "read",
Create = "create",
Edit = "edit",
Delete = "delete",
SyncSecrets = "sync-secrets",
ImportSecrets = "import-secrets",
RemoveSecrets = "remove-secrets"
}
export enum PermissionConditionOperators {
$IN = "$in",
$ALL = "$all",
@@ -174,7 +184,7 @@ export type ProjectPermissionSet =
| [ProjectPermissionActions, ProjectPermissionSub.SshCertificates]
| [ProjectPermissionActions, ProjectPermissionSub.PkiAlerts]
| [ProjectPermissionActions, ProjectPermissionSub.PkiCollections]
| [ProjectPermissionActions, ProjectPermissionSub.SecretSyncs]
| [ProjectPermissionSecretSyncActions, ProjectPermissionSub.SecretSyncs]
| [ProjectPermissionActions.Delete, ProjectPermissionSub.Project]
| [ProjectPermissionActions.Edit, ProjectPermissionSub.Project]
| [ProjectPermissionActions.Read, ProjectPermissionSub.SecretRollback]

4
frontend/src/helpers/secretSyncs.ts
View File

@@ -39,10 +39,10 @@ export const SECRET_SYNC_IMPORT_BEHAVIOR_MAP: Record<
> = {
[SecretSyncImportBehavior.PrioritizeSource]: (destinationName: string) => ({
name: "Prioritize Infisical Values",
description: `Infisical will import any secrets present in the ${destinationName} destination prior to syncing, prioritizing values present in Infisical over ${destinationName}.`
description: `Infisical will import any secrets present in the ${destinationName} destination, prioritizing values present in Infisical over ${destinationName}.`
}),
[SecretSyncImportBehavior.PrioritizeDestination]: (destinationName: string) => ({
name: `Prioritize ${destinationName} Values`,
description: `Infisical will import any secrets present in the ${destinationName} destination prior to syncing, prioritizing values present in ${destinationName} over Infisical.`
description: `Infisical will import any secrets present in the ${destinationName} destination, prioritizing values present in ${destinationName} over Infisical.`
})
};

6
frontend/src/hooks/api/secretSyncs/mutations.tsx
View File

@@ -48,8 +48,10 @@ export const useUpdateSecretSync = () => {
export const useDeleteSecretSync = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ syncId, destination }: TDeleteSecretSyncDTO) => {
const { data } = await apiRequest.delete(`/api/v1/secret-syncs/${destination}/${syncId}`);
mutationFn: async ({ syncId, destination, removeSecrets }: TDeleteSecretSyncDTO) => {
const { data } = await apiRequest.delete(`/api/v1/secret-syncs/${destination}/${syncId}`, {
params: { removeSecrets }
});
return data;
},

1
frontend/src/hooks/api/secretSyncs/types/index.ts
View File

@@ -37,6 +37,7 @@ export type TUpdateSecretSyncDTO = Partial<
export type TDeleteSecretSyncDTO = {
destination: SecretSync;
syncId: string;
removeSecrets: boolean;
};
export type TTriggerSecretSyncSyncSecretsDTO = {

6
frontend/src/hooks/api/secretSyncs/types/root-sync.ts
View File

@@ -6,7 +6,7 @@ export type TRootSecretSync = {
name: string;
description?: string | null;
version: number;
folderId: string;
folderId: string | null;
connectionId: string;
createdAt: string;
updatedAt: string;
@@ -38,9 +38,9 @@ export type TRootSecretSync = {
id: string;
name: string;
slug: string;
};
} | null;
folder: {
id: string;
path: string;
};
} | null;
};

13
frontend/src/pages/organization/RoleByIDPage/components/OrgRoleModifySection.utils.ts
View File

@@ -2,6 +2,7 @@
import { z } from "zod";
import { OrgPermissionSubjects } from "@app/context";
import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
import { TPermission } from "@app/hooks/api/roles/types";
const generalPermissionSchema = z
@@ -13,6 +14,16 @@ const generalPermissionSchema = z
})
.optional();
const appConnectionsPermissionSchema = z
.object({
[OrgPermissionAppConnectionActions.Read]: z.boolean().optional(),
[OrgPermissionAppConnectionActions.Edit]: z.boolean().optional(),
[OrgPermissionAppConnectionActions.Create]: z.boolean().optional(),
[OrgPermissionAppConnectionActions.Delete]: z.boolean().optional(),
[OrgPermissionAppConnectionActions.Connect]: z.boolean().optional()
})
.optional();
const adminConsolePermissionSchmea = z
.object({
"access-all-projects": z.boolean().optional()
@@ -50,7 +61,7 @@ export const formSchema = z.object({
"organization-admin-console": adminConsolePermissionSchmea,
[OrgPermissionSubjects.Kms]: generalPermissionSchema,
[OrgPermissionSubjects.ProjectTemplates]: generalPermissionSchema,
[OrgPermissionSubjects.AppConnections]: generalPermissionSchema
"app-connections": appConnectionsPermissionSchema
})
.optional()
});

186
frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow.tsx Normal file
View File

@@ -0,0 +1,186 @@
import { useEffect, useMemo } from "react";
import { Control, Controller, UseFormSetValue, useWatch } from "react-hook-form";
import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
import { Checkbox, Select, SelectItem, Td, Tr } from "@app/components/v2";
import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
import { useToggle } from "@app/hooks";
import { TFormSchema } from "../OrgRoleModifySection.utils";
type Props = {
isEditable: boolean;
setValue: UseFormSetValue<TFormSchema>;
control: Control<TFormSchema>;
};
enum Permission {
NoAccess = "no-access",
ReadOnly = "read-only",
FullAccess = "full-access",
Custom = "custom"
}
const PERMISSION_ACTIONS = [
{ action: OrgPermissionAppConnectionActions.Read, label: "Read" },
{ action: OrgPermissionAppConnectionActions.Create, label: "Create" },
{ action: OrgPermissionAppConnectionActions.Edit, label: "Modify" },
{ action: OrgPermissionAppConnectionActions.Delete, label: "Remove" },
{ action: OrgPermissionAppConnectionActions.Connect, label: "Connect" }
] as const;
export const OrgPermissionAppConnectionRow = ({ isEditable, control, setValue }: Props) => {
const [isRowExpanded, setIsRowExpanded] = useToggle();
const [isCustom, setIsCustom] = useToggle();
const rule = useWatch({
control,
name: "permissions.app-connections"
});
const selectedPermissionCategory = useMemo(() => {
const actions = Object.keys(rule || {}) as Array<keyof typeof rule>;
const totalActions = PERMISSION_ACTIONS.length;
const score = actions.map((key) => (rule?.[key] ? 1 : 0)).reduce((a, b) => a + b, 0 as number);
if (isCustom) return Permission.Custom;
if (score === 0) return Permission.NoAccess;
if (score === totalActions) return Permission.FullAccess;
if (score === 1 && rule?.[OrgPermissionAppConnectionActions.Read]) return Permission.ReadOnly;
return Permission.Custom;
}, [rule, isCustom]);
useEffect(() => {
if (selectedPermissionCategory === Permission.Custom) setIsCustom.on();
else setIsCustom.off();
}, [selectedPermissionCategory]);
useEffect(() => {
const isRowCustom = selectedPermissionCategory === Permission.Custom;
if (isRowCustom) {
setIsRowExpanded.on();
}
}, []);
const handlePermissionChange = (val: Permission) => {
if (!val) return;
if (val === Permission.Custom) {
setIsRowExpanded.on();
setIsCustom.on();
return;
}
setIsCustom.off();
switch (val) {
case Permission.FullAccess:
setValue(
"permissions.app-connections",
{
[OrgPermissionAppConnectionActions.Read]: true,
[OrgPermissionAppConnectionActions.Edit]: true,
[OrgPermissionAppConnectionActions.Create]: true,
[OrgPermissionAppConnectionActions.Delete]: true,
[OrgPermissionAppConnectionActions.Connect]: true
},
{ shouldDirty: true }
);
break;
case Permission.ReadOnly:
setValue(
"permissions.app-connections",
{
[OrgPermissionAppConnectionActions.Read]: true,
[OrgPermissionAppConnectionActions.Edit]: false,
[OrgPermissionAppConnectionActions.Create]: false,
[OrgPermissionAppConnectionActions.Delete]: false,
[OrgPermissionAppConnectionActions.Connect]: false
},
{ shouldDirty: true }
);
break;
case Permission.NoAccess:
default:
setValue(
"permissions.app-connections",
{
[OrgPermissionAppConnectionActions.Read]: false,
[OrgPermissionAppConnectionActions.Edit]: false,
[OrgPermissionAppConnectionActions.Create]: false,
[OrgPermissionAppConnectionActions.Delete]: false,
[OrgPermissionAppConnectionActions.Connect]: false
},
{ shouldDirty: true }
);
}
};
return (
<>
<Tr
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
onClick={() => setIsRowExpanded.toggle()}
>
<Td>
<FontAwesomeIcon icon={isRowExpanded ? faChevronDown : faChevronRight} />
</Td>
<Td>App Connections</Td>
<Td>
<Select
value={selectedPermissionCategory}
className="w-40 bg-mineshaft-600"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={handlePermissionChange}
isDisabled={!isEditable}
>
<SelectItem value={Permission.NoAccess}>No Access</SelectItem>
<SelectItem value={Permission.ReadOnly}>Read Only</SelectItem>
<SelectItem value={Permission.FullAccess}>Full Access</SelectItem>
<SelectItem value={Permission.Custom}>Custom</SelectItem>
</Select>
</Td>
</Tr>
{isRowExpanded && (
<Tr>
<Td
colSpan={3}
className={`bg-bunker-600 px-0 py-0 ${isRowExpanded && "border-mineshaft-500 p-8"}`}
>
<div className="grid grid-cols-3 gap-4">
{PERMISSION_ACTIONS.map(({ action, label }) => {
return (
<Controller
name={`permissions.app-connections.${action}`}
key={`permissions.app-connections.${action}`}
control={control}
render={({ field }) => (
<Checkbox
isChecked={field.value}
onCheckedChange={(e) => {
if (!isEditable) {
createNotification({
type: "error",
text: "Failed to update default role"
});
return;
}
field.onChange(e);
}}
id={`permissions.app-connections.${action}`}
>
{label}
</Checkbox>
)}
/>
);
})}
</div>
</Td>
</Tr>
)}
</>
);
};

9
frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/RolePermissionsSection.tsx
View File

@@ -5,6 +5,7 @@ import { createNotification } from "@app/components/notifications";
import { Button, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2";
import { OrgPermissionSubjects, useOrganization } from "@app/context";
import { useGetOrgRole, useUpdateOrgRole } from "@app/hooks/api";
import { OrgPermissionAppConnectionRow } from "@app/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionAppConnectionRow";
import {
formRolePermission2API,
@@ -69,8 +70,7 @@ const SIMPLE_PERMISSION_OPTIONS = [
title: "External KMS",
formName: OrgPermissionSubjects.Kms
},
{ title: "Project Templates", formName: OrgPermissionSubjects.ProjectTemplates },
{ title: "App Connections", formName: OrgPermissionSubjects.AppConnections }
{ title: "Project Templates", formName: OrgPermissionSubjects.ProjectTemplates }
] as const;
type Props = {
@@ -165,6 +165,11 @@ export const RolePermissionsSection = ({ roleId }: Props) => {
/>
);
})}
<OrgPermissionAppConnectionRow
control={control}
setValue={setValue}
isEditable={isCustomRole}
/>
<OrgRoleWorkspaceRow
control={control}
setValue={setValue}

7
frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/AppConnectionsTab.tsx
View File

@@ -3,7 +3,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { OrgPermissionCan } from "@app/components/permissions";
import { Button } from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionSubjects } from "@app/context";
import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
import { withPermission } from "@app/hoc";
import { usePopUp } from "@app/hooks";
@@ -41,7 +42,7 @@ export const AppConnectionsTab = withPermission(
</p>
</div>
<OrgPermissionCan
I={OrgPermissionActions.Create}
I={OrgPermissionAppConnectionActions.Create}
a={OrgPermissionSubjects.AppConnections}
>
{(isAllowed) => (
@@ -70,7 +71,7 @@ export const AppConnectionsTab = withPermission(
);
},
{
action: OrgPermissionActions.Read,
action: OrgPermissionAppConnectionActions.Read,
subject: OrgPermissionSubjects.AppConnections
}
);

9
frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/components/AppConnectionRow.tsx
View File

@@ -23,7 +23,8 @@ import {
Tooltip,
Tr
} from "@app/components/v2";
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
import { OrgPermissionSubjects } from "@app/context";
import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
import { useToggle } from "@app/hooks";
import { TAppConnection } from "@app/hooks/api/appConnections";
@@ -119,7 +120,7 @@ export const AppConnectionRow = ({
Copy Connection ID
</DropdownMenuItem>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionAppConnectionActions.Edit}
a={OrgPermissionSubjects.AppConnections}
>
{(isAllowed: boolean) => (
@@ -133,7 +134,7 @@ export const AppConnectionRow = ({
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Edit}
I={OrgPermissionAppConnectionActions.Edit}
a={OrgPermissionSubjects.AppConnections}
>
{(isAllowed: boolean) => (
@@ -147,7 +148,7 @@ export const AppConnectionRow = ({
)}
</OrgPermissionCan>
<OrgPermissionCan
I={OrgPermissionActions.Delete}
I={OrgPermissionAppConnectionActions.Delete}
a={OrgPermissionSubjects.AppConnections}
>
{(isAllowed: boolean) => (

2
frontend/src/pages/organization/SettingsPage/components/AppConnectionsTab/components/DeleteAppConnectionModal.tsx
View File

@@ -33,7 +33,7 @@ export const DeleteAppConnectionModal = ({ isOpen, onOpenChange, appConnection }
console.error(err);
createNotification({
text: `Failed remove ${APP_CONNECTION_MAP[app].name} connection`,
text: `Failed to remove ${APP_CONNECTION_MAP[app].name} connection`,
type: "error"
});
}

58
frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx
View File

@@ -8,6 +8,7 @@ import {
import {
PermissionConditionOperators,
ProjectPermissionDynamicSecretActions,
ProjectPermissionSecretSyncActions,
TPermissionCondition,
TPermissionConditionOperators
} from "@app/context/ProjectPermissionContext/types";
@@ -37,6 +38,16 @@ const DynamicSecretPolicyActionSchema = z.object({
[ProjectPermissionDynamicSecretActions.Lease]: z.boolean().optional()
});
const SecretSyncPolicyActionSchema = z.object({
[ProjectPermissionSecretSyncActions.Read]: z.boolean().optional(),
[ProjectPermissionSecretSyncActions.Create]: z.boolean().optional(),
[ProjectPermissionSecretSyncActions.Edit]: z.boolean().optional(),
[ProjectPermissionSecretSyncActions.Delete]: z.boolean().optional(),
[ProjectPermissionSecretSyncActions.SyncSecrets]: z.boolean().optional(),
[ProjectPermissionSecretSyncActions.ImportSecrets]: z.boolean().optional(),
[ProjectPermissionSecretSyncActions.RemoveSecrets]: z.boolean().optional()
});
const SecretRollbackPolicyActionSchema = z.object({
read: z.boolean().optional(),
create: z.boolean().optional()
@@ -138,7 +149,7 @@ export const projectRoleFormSchema = z.object({
[ProjectPermissionSub.SecretRotation]: GeneralPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Kms]: GeneralPolicyActionSchema.array().default([]),
[ProjectPermissionSub.Cmek]: CmekPolicyActionSchema.array().default([]),
[ProjectPermissionSub.SecretSyncs]: GeneralPolicyActionSchema.array().default([])
[ProjectPermissionSub.SecretSyncs]: SecretSyncPolicyActionSchema.array().default([])
})
.partial()
.optional()
@@ -219,8 +230,7 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
ProjectPermissionSub.SecretApproval,
ProjectPermissionSub.Tags,
ProjectPermissionSub.SecretRotation,
ProjectPermissionSub.Kms,
ProjectPermissionSub.SecretSyncs
ProjectPermissionSub.Kms
].includes(subject)
) {
// from above statement we are sure it won't be undefined
@@ -333,6 +343,31 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
if (canDelete) formVal[subject]![0].delete = true;
if (canEncrypt) formVal[subject]![0].encrypt = true;
if (canDecrypt) formVal[subject]![0].decrypt = true;
return;
}
if (subject === ProjectPermissionSub.SecretSyncs) {
const canRead = action.includes(ProjectPermissionSecretSyncActions.Read);
const canEdit = action.includes(ProjectPermissionSecretSyncActions.Edit);
const canDelete = action.includes(ProjectPermissionSecretSyncActions.Delete);
const canCreate = action.includes(ProjectPermissionSecretSyncActions.Create);
const canSyncSecrets = action.includes(ProjectPermissionSecretSyncActions.SyncSecrets);
const canImportSecrets = action.includes(ProjectPermissionSecretSyncActions.ImportSecrets);
const canRemoveSecrets = action.includes(ProjectPermissionSecretSyncActions.RemoveSecrets);
if (!formVal[subject]) formVal[subject] = [{}];
// from above statement we are sure it won't be undefined
if (canRead) formVal[subject]![0][ProjectPermissionSecretSyncActions.Read] = true;
if (canEdit) formVal[subject]![0][ProjectPermissionSecretSyncActions.Edit] = true;
if (canCreate) formVal[subject]![0][ProjectPermissionSecretSyncActions.Create] = true;
if (canDelete) formVal[subject]![0][ProjectPermissionSecretSyncActions.Delete] = true;
if (canSyncSecrets)
formVal[subject]![0][ProjectPermissionSecretSyncActions.SyncSecrets] = true;
if (canImportSecrets)
formVal[subject]![0][ProjectPermissionSecretSyncActions.ImportSecrets] = true;
if (canRemoveSecrets)
formVal[subject]![0][ProjectPermissionSecretSyncActions.RemoveSecrets] = true;
}
});
return formVal;
@@ -676,10 +711,19 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
[ProjectPermissionSub.SecretSyncs]: {
title: "Secret Syncs",
actions: [
{ label: "Read", value: "read" },
{ label: "Create", value: "create" },
{ label: "Modify", value: "edit" },
{ label: "Remove", value: "delete" }
{ label: "Read", value: ProjectPermissionSecretSyncActions.Read },
{ label: "Create", value: ProjectPermissionSecretSyncActions.Create },
{ label: "Modify", value: ProjectPermissionSecretSyncActions.Edit },
{ label: "Remove", value: ProjectPermissionSecretSyncActions.Delete },
{ label: "Trigger Syncs", value: ProjectPermissionSecretSyncActions.SyncSecrets },
{
label: "Import Secrets from Destination",
value: ProjectPermissionSecretSyncActions.ImportSecrets
},
{
label: "Remove Secrets from Destination",
value: ProjectPermissionSecretSyncActions.RemoveSecrets
}
]
}
};

1
frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/index.ts
View File

@@ -0,0 +1 @@
export * from "./SecretSyncDestinationCol";

180
frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncRow.tsx
View File

@@ -12,6 +12,7 @@ import {
faToggleOff,
faToggleOn,
faTrash,
faTriangleExclamation,
faXmark
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -38,12 +39,13 @@ import {
Tr
} from "@app/components/v2";
import { ROUTE_PATHS } from "@app/const/routes";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
import { useToggle } from "@app/hooks";
import { SecretSyncStatus, TSecretSync, useSecretSyncOption } from "@app/hooks/api/secretSyncs";
import { SecretSyncDestinationCol } from "@app/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncDestinationCol/SecretSyncDestinationCol";
import { SecretSyncDestinationCol } from "./SecretSyncDestinationCol";
import { SecretSyncTableCell } from "./SecretSyncTableCell";
type Props = {
@@ -66,7 +68,7 @@ export const SecretSyncRow = ({
const navigate = useNavigate();
const {
id,
folder: { path: secretPath },
folder,
lastSyncMessage,
destination,
lastSyncedAt,
@@ -130,7 +132,7 @@ export const SecretSyncRow = ({
className={twMerge(
"group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700",
syncStatus === SecretSyncStatus.Failed && "bg-red/5 hover:bg-red/10",
!isEnabled && "bg-mineshaft-400/15 opacity-50"
!isEnabled && "bg-mineshaft-400/15 opacity-50 hover:opacity-100"
)}
key={`sync-${id}`}
>
@@ -158,7 +160,23 @@ export const SecretSyncRow = ({
<p className="truncate text-xs leading-4 text-bunker-300">{destinationDetails.name}</p>
</div>
</Td>
<SecretSyncTableCell primaryText={secretPath} secondaryText={environment.name} />
{folder && environment ? (
<SecretSyncTableCell primaryText={folder.path} secondaryText={environment.name} />
) : (
<Td>
<Tooltip content="The source location for this sync has been deleted. Configure a new source or remove this sync.">
<div className="w-min">
<Badge
className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
variant="primary"
>
<FontAwesomeIcon icon={faTriangleExclamation} />
<span>Source Folder Deleted</span>
</Badge>
</div>
</Tooltip>
</Td>
)}
<SecretSyncDestinationCol secretSync={secretSync} />
<Td>
<div className="flex items-center gap-1">
@@ -242,64 +260,100 @@ export const SecretSyncRow = ({
>
Copy Sync ID
</DropdownMenuItem>
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faRotate} />}
onClick={(e) => {
e.stopPropagation();
onTriggerSyncSecrets(secretSync);
}}
>
<Tooltip
position="left"
sideOffset={42}
content={`Manually trigger a sync for this ${destinationName} destination.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span> Trigger Sync</span>
<FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
</div>
</Tooltip>
</DropdownMenuItem>
{syncOption?.canImportSecrets && (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faDownload} />}
onClick={(e) => {
e.stopPropagation();
onTriggerImportSecrets(secretSync);
}}
>
<Tooltip
position="left"
sideOffset={42}
content={`Import secrets from this ${destinationName} destination into Infisical.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Import Secrets</span>
<FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
</div>
</Tooltip>
</DropdownMenuItem>
)}
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faEraser} />}
onClick={(e) => {
e.stopPropagation();
onTriggerRemoveSecrets(secretSync);
}}
>
<Tooltip
position="left"
sideOffset={42}
content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Remove Secrets</span>
<FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
</div>
</Tooltip>
</DropdownMenuItem>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
I={ProjectPermissionSecretSyncActions.SyncSecrets}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faRotate} />}
onClick={(e) => {
e.stopPropagation();
onTriggerSyncSecrets(secretSync);
}}
isDisabled={!isAllowed}
>
<Tooltip
position="left"
sideOffset={42}
content={`Manually trigger a sync for this ${destinationName} destination.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span> Trigger Sync</span>
<FontAwesomeIcon
className="text-bunker-300"
size="sm"
icon={faInfoCircle}
/>
</div>
</Tooltip>
</DropdownMenuItem>
)}
</ProjectPermissionCan>
{syncOption?.canImportSecrets && (
<ProjectPermissionCan
I={ProjectPermissionSecretSyncActions.ImportSecrets}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faDownload} />}
onClick={(e) => {
e.stopPropagation();
onTriggerImportSecrets(secretSync);
}}
isDisabled={!isAllowed}
>
<Tooltip
position="left"
sideOffset={42}
content={`Import secrets from this ${destinationName} destination into Infisical.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Import Secrets</span>
<FontAwesomeIcon
className="text-bunker-300"
size="sm"
icon={faInfoCircle}
/>
</div>
</Tooltip>
</DropdownMenuItem>
)}
</ProjectPermissionCan>
)}
<ProjectPermissionCan
I={ProjectPermissionSecretSyncActions.RemoveSecrets}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faEraser} />}
onClick={(e) => {
e.stopPropagation();
onTriggerRemoveSecrets(secretSync);
}}
isDisabled={!isAllowed}
>
<Tooltip
position="left"
sideOffset={42}
content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Remove Secrets</span>
<FontAwesomeIcon
className="text-bunker-300"
size="sm"
icon={faInfoCircle}
/>
</div>
</Tooltip>
</DropdownMenuItem>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionSecretSyncActions.Edit}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (
@@ -316,7 +370,7 @@ export const SecretSyncRow = ({
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
I={ProjectPermissionSecretSyncActions.Delete}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (

43
frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncTable/SecretSyncsTable.tsx
View File

@@ -43,6 +43,7 @@ import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
import { OrderByDirection } from "@app/hooks/api/generic/types";
import {
SecretSync,
SecretSyncStatus,
TSecretSync,
useTriggerSecretSyncSyncSecrets,
useUpdateSecretSync
@@ -71,6 +72,20 @@ enum SecretSyncStatusCol {
Disabled = "disabled"
}
const getSyncStatusOrderValue = (syncStatus: SecretSyncStatus | null) => {
switch (syncStatus) {
case SecretSyncStatus.Failed:
return 0;
case SecretSyncStatus.Pending:
case SecretSyncStatus.Running:
return 1;
case SecretSyncStatus.Succeeded:
return 2;
default:
return 3;
}
};
type Props = {
secretSyncs: TSecretSync[];
};
@@ -124,7 +139,11 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
if (filters.destinations.length && !filters.destinations.includes(destination))
return false;
if (filters.environmentIds.length && !filters.environmentIds.includes(environment.id))
if (
filters.environmentIds.length &&
environment?.id &&
!filters.environmentIds.includes(environment.id)
)
return false;
const status = isEnabled ? syncStatus : SecretSyncStatusCol.Disabled;
@@ -143,8 +162,8 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
return (
SECRET_SYNC_MAP[destination].name.toLowerCase().includes(searchValue) ||
name.toLowerCase().includes(searchValue) ||
folder.path.toLowerCase().includes(searchValue) ||
environment.name.toLowerCase().includes(searchValue) ||
folder?.path.toLowerCase().includes(searchValue) ||
environment?.name.toLowerCase().includes(searchValue) ||
connection.name.toLowerCase().includes(searchValue) ||
destinationValues.primaryText.toLowerCase().includes(searchValue) ||
destinationValues.secondaryText?.toLowerCase().includes(searchValue)
@@ -155,9 +174,9 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
switch (orderBy) {
case SecretSyncsOrderBy.Source:
return syncOne.folder.path
return (syncOne.folder?.path ?? "")
.toLowerCase()
.localeCompare(syncTwo.folder.path.toLowerCase());
.localeCompare(syncTwo.folder?.path.toLowerCase() ?? "");
case SecretSyncsOrderBy.Destination:
return getSecretSyncDestinationColValues(syncOne)
.primaryText.toLowerCase()
@@ -165,9 +184,17 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
getSecretSyncDestinationColValues(syncTwo).primaryText.toLowerCase()
);
case SecretSyncsOrderBy.Status:
return syncOne.connection.name
.toLowerCase()
.localeCompare(syncTwo.connection.name.toLowerCase());
if (!syncOne.isEnabled && syncTwo.isEnabled) return 1;
if (syncOne.isEnabled && !syncTwo.isEnabled) return -1;
if (!syncOne.syncStatus && syncTwo.syncStatus) return 1;
if (syncOne.syncStatus && !syncTwo.syncStatus) return -1;
if (!syncOne.syncStatus && !syncTwo.syncStatus) return 0;
return (
getSyncStatusOrderValue(syncOne.syncStatus) -
getSyncStatusOrderValue(syncTwo.syncStatus)
);
case SecretSyncsOrderBy.Name:
default:
return syncOne.name.toLowerCase().localeCompare(syncTwo.name.toLowerCase());

5
frontend/src/pages/secret-manager/IntegrationsListPage/components/SecretSyncsTab/SecretSyncsTab.tsx
View File

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ProjectPermissionCan } from "@app/components/permissions";
import { CreateSecretSyncModal } from "@app/components/secret-syncs";
import { Button, Spinner } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
import { ProjectPermissionSub, useWorkspace } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { usePopUp } from "@app/hooks";
import { useListSecretSyncs } from "@app/hooks/api/secretSyncs";
@@ -56,7 +57,7 @@ export const SecretSyncsTab = () => {
</p>
</div>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
I={ProjectPermissionSecretSyncActions.Create}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed) => (

4
frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx
View File

@@ -7,7 +7,9 @@ import { IntegrationsListPageTabs } from "@app/types/integrations";
import { IntegrationsListPage } from "./IntegrationsListPage";
const IntegrationsListPageQuerySchema = z.object({
selectedTab: z.string().catch(IntegrationsListPageTabs.NativeIntegrations)
selectedTab: z
.nativeEnum(IntegrationsListPageTabs)
.catch(IntegrationsListPageTabs.NativeIntegrations)
});
export const Route = createFileRoute(

5
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/SecretSyncDetailsByIDPage.tsx
View File

@@ -8,7 +8,8 @@ import { EditSecretSyncModal } from "@app/components/secret-syncs";
import { SecretSyncEditFields } from "@app/components/secret-syncs/types";
import { Button, ContentLoader, EmptyState } from "@app/components/v2";
import { ROUTE_PATHS } from "@app/const/routes";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
import { usePopUp } from "@app/hooks";
import { SecretSync, useGetSecretSync } from "@app/hooks/api/secretSyncs";
@@ -140,7 +141,7 @@ export const SecretSyncDetailsByIDPage = () => {
<ProjectPermissionCan
renderGuardBanner
passThrough={false}
I={ProjectPermissionActions.Read}
I={ProjectPermissionSecretSyncActions.Read}
a={ProjectPermissionSub.SecretSyncs}
>
<PageContent />

111
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncActionTriggers.tsx
View File

@@ -33,7 +33,8 @@ import {
Tooltip
} from "@app/components/v2";
import { ROUTE_PATHS } from "@app/const/routes";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
import { usePopUp, useToggle } from "@app/hooks";
import {
@@ -129,14 +130,22 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
<SecretSyncImportStatusBadge secretSync={secretSync} />
<SecretSyncRemoveStatusBadge secretSync={secretSync} />
<div>
<Button
variant="outline_bg"
leftIcon={<FontAwesomeIcon icon={faRotate} />}
onClick={handleTriggerSync}
className="h-9 rounded-r-none bg-mineshaft-500"
<ProjectPermissionCan
I={ProjectPermissionSecretSyncActions.SyncSecrets}
a={ProjectPermissionSub.SecretSyncs}
>
Trigger Sync
</Button>
{(isAllowed: boolean) => (
<Button
variant="outline_bg"
leftIcon={<FontAwesomeIcon icon={faRotate} />}
onClick={handleTriggerSync}
className="h-9 rounded-r-none bg-mineshaft-500"
isDisabled={!isAllowed}
>
Trigger Sync
</Button>
)}
</ProjectPermissionCan>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<IconButton
@@ -158,39 +167,63 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
Copy Sync ID
</DropdownMenuItem>
{syncOption?.canImportSecrets && (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faDownload} />}
onClick={() => handlePopUpOpen("importSecrets")}
<ProjectPermissionCan
I={ProjectPermissionSecretSyncActions.ImportSecrets}
a={ProjectPermissionSub.SecretSyncs}
>
<Tooltip
position="left"
sideOffset={42}
content={`Import secrets from this ${destinationName} destination into Infisical.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Import Secrets</span>
<FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
</div>
</Tooltip>
</DropdownMenuItem>
{(isAllowed: boolean) => (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faDownload} />}
onClick={() => handlePopUpOpen("importSecrets")}
isDisabled={!isAllowed}
>
<Tooltip
position="left"
sideOffset={42}
content={`Import secrets from this ${destinationName} destination into Infisical.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Import Secrets</span>
<FontAwesomeIcon
className="text-bunker-300"
size="sm"
icon={faInfoCircle}
/>
</div>
</Tooltip>
</DropdownMenuItem>
)}
</ProjectPermissionCan>
)}
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faEraser} />}
onClick={() => handlePopUpOpen("removeSecrets")}
>
<Tooltip
position="left"
sideOffset={42}
content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Remove Secrets</span>
<FontAwesomeIcon className="text-bunker-300" size="sm" icon={faInfoCircle} />
</div>
</Tooltip>
</DropdownMenuItem>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
I={ProjectPermissionSecretSyncActions.RemoveSecrets}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (
<DropdownMenuItem
icon={<FontAwesomeIcon icon={faEraser} />}
onClick={() => handlePopUpOpen("removeSecrets")}
isDisabled={!isAllowed}
>
<Tooltip
position="left"
sideOffset={42}
content={`Remove secrets synced by Infisical from this ${destinationName} destination.`}
>
<div className="flex h-full w-full items-center justify-between gap-1">
<span>Remove Secrets</span>
<FontAwesomeIcon
className="text-bunker-300"
size="sm"
icon={faInfoCircle}
/>
</div>
</Tooltip>
</DropdownMenuItem>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionSecretSyncActions.Edit}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (
@@ -206,7 +239,7 @@ export const SecretSyncActionTriggers = ({ secretSync }: Props) => {
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
I={ProjectPermissionSecretSyncActions.Delete}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed: boolean) => (

5
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/SecretSyncDestinatonSection.tsx
View File

@@ -5,7 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ProjectPermissionCan } from "@app/components/permissions";
import { SecretSyncLabel } from "@app/components/secret-syncs";
import { IconButton } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
import { SecretSync, TSecretSync } from "@app/hooks/api/secretSyncs";
import { AwsParameterStoreSyncDestinationSection } from "@app/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/AwsParameterStoreSyncDestinationSection";
@@ -38,7 +39,7 @@ export const SecretSyncDestinationSection = ({ secretSync, onEditDestination }:
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Destination Configuration</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
I={ProjectPermissionSecretSyncActions.Edit}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed) => (

24
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx
View File

@@ -1,3 +1,4 @@
import { useMemo } from "react";
import { faBan, faEdit } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { format } from "date-fns";
@@ -5,7 +6,8 @@ import { format } from "date-fns";
import { ProjectPermissionCan } from "@app/components/permissions";
import { SecretSyncLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
import { Badge, IconButton } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
type Props = {
@@ -16,12 +18,26 @@ type Props = {
export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) => {
const { syncStatus, lastSyncMessage, lastSyncedAt, name, description, isEnabled } = secretSync;
const failureMessage = useMemo(() => {
if (syncStatus === SecretSyncStatus.Failed) {
if (lastSyncMessage)
try {
return JSON.stringify(JSON.parse(lastSyncMessage), null, 2);
} catch {
return lastSyncMessage;
}
return "An Unknown Error Occurred.";
}
return null;
}, [syncStatus, lastSyncMessage]);
return (
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Details</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
I={ProjectPermissionSecretSyncActions.Edit}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed) => (
@@ -56,9 +72,9 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
{format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
</SecretSyncLabel>
)}
{syncStatus === SecretSyncStatus.Failed && lastSyncMessage && (
{syncStatus === SecretSyncStatus.Failed && failureMessage && (
<SecretSyncLabel labelClassName="text-red" label="Last Sync Error">
<p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{lastSyncMessage}</p>
<p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</p>
</SecretSyncLabel>
)}
</div>

5
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncOptionsSection.tsx
View File

@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ProjectPermissionCan } from "@app/components/permissions";
import { SecretSyncLabel } from "@app/components/secret-syncs";
import { IconButton } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP } from "@app/helpers/secretSyncs";
import { TSecretSync } from "@app/hooks/api/secretSyncs";
@@ -26,7 +27,7 @@ export const SecretSyncOptionsSection = ({ secretSync, onEditOptions }: Props) =
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
I={ProjectPermissionSecretSyncActions.Edit}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed) => (

56
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncSourceSection.tsx
View File

@@ -1,10 +1,11 @@
import { faEdit } from "@fortawesome/free-solid-svg-icons";
import { faEdit, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ProjectPermissionCan } from "@app/components/permissions";
import { SecretSyncLabel } from "@app/components/secret-syncs";
import { IconButton } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { Badge, IconButton, Tooltip } from "@app/components/v2";
import { ProjectPermissionSub } from "@app/context";
import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
import { TSecretSync } from "@app/hooks/api/secretSyncs";
type Props = {
@@ -20,27 +21,42 @@ export const SecretSyncSourceSection = ({ secretSync, onEditSource }: Props) =>
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Source</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed) => (
<IconButton
variant="plain"
colorSchema="secondary"
isDisabled={!isAllowed}
ariaLabel="Edit sync source"
onClick={onEditSource}
>
<FontAwesomeIcon icon={faEdit} />
</IconButton>
<div>
{(!folder || !environment) && (
<Tooltip content="The source location for this sync has been deleted. Configure a new source or remove this sync.">
<div className="mr-1 inline-block w-min">
<Badge
className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap"
variant="primary"
>
<FontAwesomeIcon icon={faTriangleExclamation} />
<span>Folder Deleted</span>
</Badge>
</div>
</Tooltip>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionSecretSyncActions.Edit}
a={ProjectPermissionSub.SecretSyncs}
>
{(isAllowed) => (
<IconButton
variant="plain"
colorSchema="secondary"
isDisabled={!isAllowed}
ariaLabel="Edit sync source"
onClick={onEditSource}
>
<FontAwesomeIcon icon={faEdit} />
</IconButton>
)}
</ProjectPermissionCan>
</div>
</div>
<div>
<div className="space-y-3">
<SecretSyncLabel label="Environment">{environment.name}</SecretSyncLabel>
<SecretSyncLabel label="Path">{folder.path}</SecretSyncLabel>
<SecretSyncLabel label="Environment">{environment?.name}</SecretSyncLabel>
<SecretSyncLabel label="Path">{folder?.path}</SecretSyncLabel>
</div>
</div>
</div>