Compare commits

...

3 Commits

25 changed files with 3193 additions and 495 deletions

View File

@ -3,11 +3,14 @@ import { z } from "zod";
import { EventType } from "@app/ee/services/audit-log/audit-log-types";
import { removeTrailingSlash } from "@app/lib/fn";
import { readLimit } from "@app/server/config/rateLimiter";
import { isValidFolderName } from "@app/lib/validator";
import { readLimit, secretsLimit } from "@app/server/config/rateLimiter";
import { SecretNameSchema } from "@app/server/lib/schemas";
import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
import { booleanSchema } from "@app/server/routes/sanitizedSchemas";
import { AuthMode } from "@app/services/auth/auth-type";
import { commitChangesResponseSchema, resourceChangeSchema } from "@app/services/folder-commit/folder-commit-schemas";
import { ResourceMetadataSchema } from "@app/services/resource-metadata/resource-metadata-schema";
const commitHistoryItemSchema = z.object({
id: z.string(),
@ -413,4 +416,140 @@ export const registerPITRouter = async (server: FastifyZodProvider) => {
return result;
}
});
server.route({
method: "POST",
url: "/batch/commit",
config: {
rateLimit: secretsLimit
},
schema: {
hide: true,
description: "Commit changes",
security: [
{
bearerAuth: []
}
],
body: z.object({
projectId: z.string().trim(),
environment: z.string().trim(),
secretPath: z.string().trim().default("/").transform(removeTrailingSlash),
message: z
.string()
.trim()
.min(1)
.max(255)
.refine((message) => message.trim() !== "", {
message: "Commit message cannot be empty"
}),
changes: z.object({
secrets: z.object({
create: z
.array(
z.object({
secretKey: SecretNameSchema,
secretValue: z.string().transform((val) => (val.at(-1) === "\n" ? `${val.trim()}\n` : val.trim())),
secretComment: z.string().trim().optional().default(""),
skipMultilineEncoding: z.boolean().optional(),
metadata: z.record(z.string()).optional(),
secretMetadata: ResourceMetadataSchema.optional(),
tagIds: z.string().array().optional()
})
)
.optional(),
update: z
.array(
z.object({
secretKey: SecretNameSchema,
newSecretName: SecretNameSchema.optional(),
secretValue: z
.string()
.transform((val) => (val.at(-1) === "\n" ? `${val.trim()}\n` : val.trim()))
.optional(),
secretComment: z.string().trim().optional().default(""),
skipMultilineEncoding: z.boolean().optional(),
metadata: z.record(z.string()).optional(),
secretMetadata: ResourceMetadataSchema.optional(),
tagIds: z.string().array().optional()
})
)
.optional(),
delete: z
.array(
z.object({
secretKey: SecretNameSchema
})
)
.optional()
}),
folders: z.object({
create: z
.array(
z.object({
folderName: z
.string()
.trim()
.refine((name) => isValidFolderName(name), {
message: "Invalid folder name. Only alphanumeric characters, dashes, and underscores are allowed."
}),
description: z.string().optional()
})
)
.optional(),
update: z
.array(
z.object({
folderName: z
.string()
.trim()
.refine((name) => isValidFolderName(name), {
message: "Invalid folder name. Only alphanumeric characters, dashes, and underscores are allowed."
}),
description: z.string().nullable().optional(),
id: z.string()
})
)
.optional(),
delete: z
.array(
z.object({
folderName: z
.string()
.trim()
.refine((name) => isValidFolderName(name), {
message: "Invalid folder name. Only alphanumeric characters, dashes, and underscores are allowed."
}),
id: z.string()
})
)
.optional()
})
})
}),
response: {
200: z.object({
message: z.string()
})
}
},
onRequest: verifyAuth([AuthMode.JWT]),
handler: async (req) => {
await server.services.pit.processNewCommitRaw({
actorId: req.permission.id,
actor: req.permission.type,
actorOrgId: req.permission.orgId,
actorAuthMethod: req.permission.authMethod,
projectId: req.body.projectId,
environment: req.body.environment,
secretPath: req.body.secretPath,
message: req.body.message,
changes: {
secrets: req.body.changes.secrets,
folders: req.body.changes.folders
}
});
return { message: "success" };
}
});
};

View File

@ -2,28 +2,50 @@
import { ForbiddenError } from "@casl/ability";
import { ProjectPermissionCommitsActions, ProjectPermissionSub } from "@app/ee/services/permission/project-permission";
import { NotFoundError } from "@app/lib/errors";
import { BadRequestError, NotFoundError } from "@app/lib/errors";
import { logger } from "@app/lib/logger";
import { ActorAuthMethod, ActorType } from "@app/services/auth/auth-type";
import { ResourceType, TFolderCommitServiceFactory } from "@app/services/folder-commit/folder-commit-service";
import { TFolderCommitDALFactory } from "@app/services/folder-commit/folder-commit-dal";
import {
ResourceType,
TCommitResourceChangeDTO,
TFolderCommitServiceFactory
} from "@app/services/folder-commit/folder-commit-service";
import {
isFolderCommitChange,
isSecretCommitChange
} from "@app/services/folder-commit-changes/folder-commit-changes-dal";
import { TProjectDALFactory } from "@app/services/project/project-dal";
import { TProjectEnvDALFactory } from "@app/services/project-env/project-env-dal";
import { TSecretServiceFactory } from "@app/services/secret/secret-service";
import { SecretProtectionType, TProcessNewCommitRawDTO } from "@app/services/secret/secret-types";
import { TSecretFolderDALFactory } from "@app/services/secret-folder/secret-folder-dal";
import { TSecretFolderServiceFactory } from "@app/services/secret-folder/secret-folder-service";
import { TSecretV2BridgeServiceFactory } from "@app/services/secret-v2-bridge/secret-v2-bridge-service";
import { SecretOperations, SecretUpdateMode } from "@app/services/secret-v2-bridge/secret-v2-bridge-types";
import { TPermissionServiceFactory } from "../permission/permission-service-types";
import { TSecretApprovalPolicyServiceFactory } from "../secret-approval-policy/secret-approval-policy-service";
import { TSecretApprovalRequestServiceFactory } from "../secret-approval-request/secret-approval-request-service";
type TPitServiceFactoryDep = {
folderCommitService: TFolderCommitServiceFactory;
secretService: Pick<TSecretServiceFactory, "getSecretVersionsV2ByIds" | "getChangeVersions">;
folderService: Pick<TSecretFolderServiceFactory, "getFolderById" | "getFolderVersions">;
folderService: Pick<
TSecretFolderServiceFactory,
"getFolderById" | "getFolderVersions" | "createManyFolders" | "updateManyFolders" | "deleteManyFolders"
>;
permissionService: Pick<TPermissionServiceFactory, "getProjectPermission">;
folderDAL: Pick<TSecretFolderDALFactory, "findSecretPathByFolderIds">;
folderDAL: Pick<TSecretFolderDALFactory, "findSecretPathByFolderIds" | "findBySecretPath">;
projectEnvDAL: Pick<TProjectEnvDALFactory, "findOne">;
secretApprovalRequestService: Pick<
TSecretApprovalRequestServiceFactory,
"generateSecretApprovalRequest" | "generateSecretApprovalRequestV2Bridge"
>;
secretApprovalPolicyService: Pick<TSecretApprovalPolicyServiceFactory, "getSecretApprovalPolicy">;
projectDAL: Pick<TProjectDALFactory, "checkProjectUpgradeStatus" | "findProjectBySlug" | "findById">;
secretV2BridgeService: TSecretV2BridgeServiceFactory;
folderCommitDAL: Pick<TFolderCommitDALFactory, "transaction">;
};
export type TPitServiceFactory = ReturnType<typeof pitServiceFactory>;
@ -34,7 +56,12 @@ export const pitServiceFactory = ({
folderService,
permissionService,
folderDAL,
projectEnvDAL
projectEnvDAL,
secretApprovalRequestService,
secretApprovalPolicyService,
projectDAL,
secretV2BridgeService,
folderCommitDAL
}: TPitServiceFactoryDep) => {
const getCommitsCount = async ({
actor,
@ -471,6 +498,238 @@ export const pitServiceFactory = ({
});
};
const processNewCommitRaw = async ({
actorId,
projectId,
environment,
actor,
actorOrgId,
actorAuthMethod,
secretPath,
message,
changes = {
secrets: {
create: [],
update: [],
delete: []
},
folders: {
create: [],
update: [],
delete: []
}
}
}: {
actorId: string;
projectId: string;
environment: string;
actor: ActorType;
actorOrgId: string;
actorAuthMethod: ActorAuthMethod;
secretPath: string;
message: string;
changes: TProcessNewCommitRawDTO;
}) => {
const policy =
actor === ActorType.USER
? await secretApprovalPolicyService.getSecretApprovalPolicy(projectId, environment, secretPath)
: undefined;
const project = await projectDAL.findById(projectId);
if (project.enforceCapitalization) {
const caseViolatingSecretKeys = [
// Check create operations
...(changes.secrets?.create
?.filter((sec) => sec.secretKey !== sec.secretKey.toUpperCase())
.map((sec) => sec.secretKey) ?? []),
// Check update operations
...(changes.secrets?.update
?.filter(
(sec) =>
sec.secretKey !== sec.secretKey.toUpperCase() ||
(sec.newSecretKey && sec.newSecretKey !== sec.newSecretKey.toUpperCase())
)
.map((sec) => sec.secretKey) ?? [])
];
if (caseViolatingSecretKeys.length) {
throw new BadRequestError({
message: `Secret names must be in UPPERCASE per project requirements: ${caseViolatingSecretKeys.join(
", "
)}. You can disable this requirement in project settings`
});
}
}
await folderCommitDAL.transaction(async (trx) => {
const targetFolder = await folderDAL.findBySecretPath(projectId, environment, secretPath);
if (!targetFolder)
throw new NotFoundError({
message: `Folder with path '${secretPath}' in environment with slug '${environment}' not found`,
name: "CreateManySecret"
});
const commitChanges: TCommitResourceChangeDTO[] = [];
if ((changes.folders?.create?.length ?? 0) > 0) {
await folderService.createManyFolders({
projectId,
actor,
actorId,
actorOrgId,
actorAuthMethod,
folders:
changes.folders?.create?.map((folder) => ({
name: folder.folderName,
environment,
path: secretPath,
description: folder.description
})) ?? [],
tx: trx,
commitChanges
});
}
if ((changes.folders?.update?.length ?? 0) > 0) {
await folderService.updateManyFolders({
projectId,
actor,
actorId,
actorOrgId,
actorAuthMethod,
folders:
changes.folders?.update?.map((folder) => ({
environment,
path: secretPath,
id: folder.id,
name: folder.folderName,
description: folder.description
})) ?? [],
tx: trx,
commitChanges
});
}
if ((changes.folders?.delete?.length ?? 0) > 0) {
await folderService.deleteManyFolders({
projectId,
actor,
actorId,
actorOrgId,
actorAuthMethod,
folders:
changes.folders?.delete?.map((folder) => ({
environment,
path: secretPath,
idOrName: folder.id
})) ?? [],
tx: trx,
commitChanges
});
}
if (policy) {
const approval = await secretApprovalRequestService.generateSecretApprovalRequestV2Bridge({
policy,
secretPath,
environment,
projectId,
actor,
actorId,
actorOrgId,
actorAuthMethod,
data: {
[SecretOperations.Create]:
changes.secrets?.create?.map((el) => ({
tagIds: el.tagIds,
secretValue: el.secretValue,
secretComment: el.secretComment,
metadata: el.metadata,
skipMultilineEncoding: el.skipMultilineEncoding,
secretKey: el.secretKey,
secretMetadata: el.secretMetadata
})) ?? [],
[SecretOperations.Update]:
changes.secrets?.update?.map((el) => ({
tagIds: el.tagIds,
secretValue: el.secretValue,
secretComment: el.secretComment,
metadata: el.metadata,
skipMultilineEncoding: el.skipMultilineEncoding,
secretKey: el.secretKey,
secretMetadata: el.secretMetadata
})) ?? [],
[SecretOperations.Delete]:
changes.secrets?.delete?.map((el) => ({
secretKey: el.secretKey
})) ?? []
}
});
return { type: SecretProtectionType.Approval as const, approval };
}
if ((changes.secrets?.create?.length ?? 0) > 0) {
await secretV2BridgeService.createManySecret({
secretPath,
environment,
projectId,
actorAuthMethod,
actorOrgId,
actor,
actorId,
secrets: changes.secrets?.create ?? [],
tx: trx,
commitChanges
});
}
if ((changes.secrets?.update?.length ?? 0) > 0) {
await secretV2BridgeService.updateManySecret({
secretPath,
environment,
projectId,
actorAuthMethod,
actorOrgId,
actor,
actorId,
secrets: changes.secrets?.update ?? [],
mode: SecretUpdateMode.FailOnNotFound,
tx: trx,
commitChanges
});
}
if ((changes.secrets?.delete?.length ?? 0) > 0) {
await secretV2BridgeService.deleteManySecret({
secretPath,
environment,
projectId,
actorAuthMethod,
actorOrgId,
actor,
actorId,
secrets: changes.secrets?.delete ?? [],
tx: trx,
commitChanges
});
}
if (commitChanges?.length > 0) {
await folderCommitService.createCommit(
{
actor: {
type: actor || ActorType.PLATFORM,
metadata: {
id: actorId
}
},
message,
folderId: targetFolder.id,
changes: commitChanges
},
trx
);
}
});
};
return {
getCommitsCount,
getCommitsForFolder,
@ -478,6 +737,7 @@ export const pitServiceFactory = ({
compareCommitChanges,
rollbackToCommit,
revertCommit,
getFolderStateAtCommit
getFolderStateAtCommit,
processNewCommitRaw
};
};

View File

@ -1,5 +1,6 @@
/* eslint-disable no-nested-ternary */
import { ForbiddenError, subject } from "@casl/ability";
import { Knex } from "knex";
import {
ProjectMembershipRole,
@ -1260,8 +1261,9 @@ export const secretApprovalRequestServiceFactory = ({
policy,
projectId,
secretPath,
environment
}: TGenerateSecretApprovalRequestV2BridgeDTO) => {
environment,
trx: providedTx
}: TGenerateSecretApprovalRequestV2BridgeDTO & { trx?: Knex }) => {
if (actor === ActorType.SERVICE || actor === ActorType.Machine)
throw new BadRequestError({ message: "Cannot use service token or machine token over protected branches" });
@ -1487,7 +1489,7 @@ export const secretApprovalRequestServiceFactory = ({
);
});
const secretApprovalRequest = await secretApprovalRequestDAL.transaction(async (tx) => {
const executeApprovalRequestCreation = async (tx: Knex) => {
const doc = await secretApprovalRequestDAL.create(
{
folderId,
@ -1549,7 +1551,11 @@ export const secretApprovalRequestServiceFactory = ({
}
return { ...doc, commits: approvalCommits };
});
};
const secretApprovalRequest = providedTx
? await executeApprovalRequestCreation(providedTx)
: await secretApprovalRequestDAL.transaction(executeApprovalRequestCreation);
const user = await userDAL.findById(secretApprovalRequest.committerUserId);
const env = await projectEnvDAL.findOne({ id: policy.envId });

View File

@ -1536,7 +1536,12 @@ export const registerRoutes = async (
folderService,
permissionService,
folderDAL,
projectEnvDAL
projectEnvDAL,
secretApprovalRequestService,
secretApprovalPolicyService,
projectDAL,
secretV2BridgeService,
folderCommitDAL
});
const identityOidcAuthService = identityOidcAuthServiceFactory({

View File

@ -47,6 +47,14 @@ export enum ResourceType {
FOLDER = "folder"
}
export type TCommitResourceChangeDTO = {
type: string;
secretVersionId?: string;
folderVersionId?: string;
isUpdate?: boolean;
folderId?: string;
};
type TCreateCommitDTO = {
actor: {
type: string;
@ -57,13 +65,7 @@ type TCreateCommitDTO = {
};
message?: string;
folderId: string;
changes: {
type: string;
secretVersionId?: string;
folderVersionId?: string;
isUpdate?: boolean;
folderId?: string;
}[];
changes: TCommitResourceChangeDTO[];
omitIgnoreFilter?: boolean;
};

View File

@ -1,4 +1,6 @@
/* eslint-disable no-await-in-loop */
import { ForbiddenError, subject } from "@casl/ability";
import { Knex } from "knex";
import path from "path";
import { v4 as uuidv4, validate as uuidValidate } from "uuid";
@ -12,14 +14,21 @@ import { BadRequestError, NotFoundError } from "@app/lib/errors";
import { OrderByDirection, OrgServiceActor } from "@app/lib/types";
import { buildFolderPath } from "@app/services/secret-folder/secret-folder-fns";
import { ChangeType, CommitType, TFolderCommitServiceFactory } from "../folder-commit/folder-commit-service";
import {
ChangeType,
CommitType,
TCommitResourceChangeDTO,
TFolderCommitServiceFactory
} from "../folder-commit/folder-commit-service";
import { TProjectDALFactory } from "../project/project-dal";
import { TProjectEnvDALFactory } from "../project-env/project-env-dal";
import { TSecretV2BridgeDALFactory } from "../secret-v2-bridge/secret-v2-bridge-dal";
import { TSecretFolderDALFactory } from "./secret-folder-dal";
import {
TCreateFolderDTO,
TCreateManyFoldersDTO,
TDeleteFolderDTO,
TDeleteManyFoldersDTO,
TGetFolderByIdDTO,
TGetFolderDTO,
TGetFoldersDeepByEnvsDTO,
@ -236,19 +245,29 @@ export const secretFolderServiceFactory = ({
actor,
actorId,
projectSlug,
projectId: providedProjectId,
actorAuthMethod,
actorOrgId,
folders
}: TUpdateManyFoldersDTO) => {
const project = await projectDAL.findProjectBySlug(projectSlug, actorOrgId);
if (!project) {
throw new NotFoundError({ message: `Project with slug '${projectSlug}' not found` });
folders,
tx: providedTx,
commitChanges
}: TUpdateManyFoldersDTO & { tx?: Knex; commitChanges?: TCommitResourceChangeDTO[]; projectId?: string }) => {
let projectId = providedProjectId;
if (!projectId && projectSlug) {
const project = await projectDAL.findProjectBySlug(projectSlug, actorOrgId);
if (!project) {
throw new NotFoundError({ message: `Project with slug '${projectSlug}' not found` });
}
projectId = project.id;
}
if (!projectId) {
throw new BadRequestError({ message: "Must provide either project slug or projectId" });
}
const { permission } = await permissionService.getProjectPermission({
actor,
actorId,
projectId: project.id,
projectId,
actorAuthMethod,
actorOrgId
});
@ -260,12 +279,12 @@ export const secretFolderServiceFactory = ({
);
});
const result = await folderDAL.transaction(async (tx) =>
Promise.all(
const executeBulkUpdate = async (tx: Knex) => {
return Promise.all(
folders.map(async (newFolder) => {
const { environment, path: secretPath, id, name, description } = newFolder;
const parentFolder = await folderDAL.findBySecretPath(project.id, environment, secretPath);
const parentFolder = await folderDAL.findBySecretPath(projectId as string, environment, secretPath, tx);
if (!parentFolder) {
throw new NotFoundError({
message: `Folder with path '${secretPath}' in environment with slug '${environment}' not found`,
@ -273,10 +292,10 @@ export const secretFolderServiceFactory = ({
});
}
const env = await projectEnvDAL.findOne({ projectId: project.id, slug: environment });
const env = await projectEnvDAL.findOne({ projectId, slug: environment });
if (!env) {
throw new NotFoundError({
message: `Environment with slug '${environment}' in project with ID '${project.id}' not found`,
message: `Environment with slug '${environment}' in project with ID '${projectId}' not found`,
name: "UpdateManyFolders"
});
}
@ -323,26 +342,34 @@ export const secretFolderServiceFactory = ({
},
tx
);
await folderCommitService.createCommit(
{
actor: {
type: actor,
metadata: {
id: actorId
}
if (commitChanges) {
commitChanges.push({
type: CommitType.ADD,
isUpdate: true,
folderVersionId: folderVersion.id
});
} else {
await folderCommitService.createCommit(
{
actor: {
type: actor,
metadata: {
id: actorId
}
},
message: "Folder updated",
folderId: parentFolder.id,
changes: [
{
type: CommitType.ADD,
isUpdate: true,
folderVersionId: folderVersion.id
}
]
},
message: "Folder updated",
folderId: parentFolder.id,
changes: [
{
type: CommitType.ADD,
isUpdate: true,
folderVersionId: folderVersion.id
}
]
},
tx
);
tx
);
}
if (!doc) {
throw new NotFoundError({
message: `Failed to update folder with id '${id}', not found`,
@ -352,13 +379,16 @@ export const secretFolderServiceFactory = ({
return { oldFolder: folder, newFolder: doc };
})
)
);
);
};
// Execute with provided transaction or create new one
const result = providedTx ? await executeBulkUpdate(providedTx) : await folderDAL.transaction(executeBulkUpdate);
await Promise.all(result.map(async (res) => snapshotService.performSnapshot(res.newFolder.parentId as string)));
return {
projectId: project.id,
projectId,
newFolders: result.map((res) => res.newFolder),
oldFolders: result.map((res) => res.oldFolder)
};
@ -974,6 +1004,361 @@ export const secretFolderServiceFactory = ({
}));
};
const createManyFolders = async ({
projectId,
actor,
actorId,
actorAuthMethod,
actorOrgId,
folders,
tx: providedTx,
commitChanges
}: TCreateManyFoldersDTO & { tx?: Knex; commitChanges?: TCommitResourceChangeDTO[] }) => {
const { permission } = await permissionService.getProjectPermission({
actor,
actorId,
projectId,
actorAuthMethod,
actorOrgId
});
folders.forEach(({ environment, path: secretPath }) => {
ForbiddenError.from(permission).throwUnlessCan(
ProjectPermissionActions.Create,
subject(ProjectPermissionSub.SecretFolders, { environment, secretPath })
);
});
const foldersByEnv = folders.reduce(
(acc, folder) => {
if (!acc[folder.environment]) {
acc[folder.environment] = [];
}
acc[folder.environment].push(folder);
return acc;
},
{} as Record<string, typeof folders>
);
const executeBulkCreate = async (tx: Knex) => {
const createdFolders = [];
for (const [environment, envFolders] of Object.entries(foldersByEnv)) {
const env = await projectEnvDAL.findOne({ projectId, slug: environment });
if (!env) {
throw new NotFoundError({
message: `Environment with slug '${environment}' in project with ID '${projectId}' not found`
});
}
await tx.raw("SELECT pg_advisory_xact_lock(?)", [PgSqlLock.CreateFolder(env.id, env.projectId)]);
for (const folderSpec of envFolders) {
const { name, path: secretPath, description } = folderSpec;
const pathWithFolder = path.join(secretPath, name);
const parentFolder = await folderDAL.findClosestFolder(projectId, environment, pathWithFolder, tx);
if (!parentFolder) {
throw new NotFoundError({
message: `Parent folder for path '${pathWithFolder}' not found`
});
}
// Check if the exact folder already exists
const existingFolder = await folderDAL.findOne(
{
envId: env.id,
parentId: parentFolder.id,
name,
isReserved: false
},
tx
);
if (existingFolder) {
createdFolders.push(existingFolder);
// eslint-disable-next-line no-continue
continue;
}
// Handle exact folder case
if (parentFolder.path === pathWithFolder) {
createdFolders.push(parentFolder);
// eslint-disable-next-line no-continue
continue;
}
let currentParentId = parentFolder.id;
// Build the full path we need by processing each segment
if (parentFolder.path !== secretPath) {
const missingSegments = secretPath.substring(parentFolder.path.length).split("/").filter(Boolean);
const newFolders: TSecretFoldersInsert[] = [];
for (const segment of missingSegments) {
const existingSegment = await folderDAL.findOne(
{
name: segment,
parentId: currentParentId,
envId: env.id,
isReserved: false
},
tx
);
if (existingSegment) {
currentParentId = existingSegment.id;
} else {
const newFolder = {
name: segment,
parentId: currentParentId,
id: uuidv4(),
envId: env.id,
version: 1
};
currentParentId = newFolder.id;
newFolders.push(newFolder);
}
}
if (newFolders.length) {
const docs = await folderDAL.insertMany(newFolders, tx);
const folderVersions = await folderVersionDAL.insertMany(
docs.map((doc) => ({
name: doc.name,
envId: doc.envId,
version: doc.version,
folderId: doc.id,
description: doc.description
})),
tx
);
await folderCommitService.createCommit(
{
actor: {
type: actor,
metadata: {
id: actorId
}
},
message: "Folders created (batch)",
folderId: currentParentId,
changes: folderVersions.map((fv) => ({
type: CommitType.ADD,
folderVersionId: fv.id
}))
},
tx
);
}
}
// Create the target folder
const doc = await folderDAL.create(
{ name, envId: env.id, version: 1, parentId: currentParentId, description },
tx
);
const folderVersion = await folderVersionDAL.create(
{
name: doc.name,
envId: doc.envId,
version: doc.version,
folderId: doc.id,
description: doc.description
},
tx
);
if (commitChanges) {
commitChanges.push({
type: CommitType.ADD,
folderVersionId: folderVersion.id
});
} else {
await folderCommitService.createCommit(
{
actor: {
type: actor,
metadata: {
id: actorId
}
},
message: "Folder created (batch)",
folderId: doc.id,
changes: [
{
type: CommitType.ADD,
folderVersionId: folderVersion.id
}
]
},
tx
);
}
createdFolders.push(doc);
}
}
return createdFolders;
};
const result = providedTx ? await executeBulkCreate(providedTx) : await folderDAL.transaction(executeBulkCreate);
const uniqueParentIds = [...new Set(result.map((folder) => folder.parentId).filter(Boolean))];
await Promise.all(uniqueParentIds.map((parentId) => snapshotService.performSnapshot(parentId as string)));
return {
folders: result,
count: result.length
};
};
const deleteManyFolders = async ({
projectId,
actor,
actorId,
actorOrgId,
actorAuthMethod,
folders,
tx: providedTx,
commitChanges
}: TDeleteManyFoldersDTO & { tx?: Knex; commitChanges?: TCommitResourceChangeDTO[] }) => {
const { permission } = await permissionService.getProjectPermission({
actor,
actorId,
projectId,
actorAuthMethod,
actorOrgId
});
folders.forEach(({ environment, path: secretPath }) => {
ForbiddenError.from(permission).throwUnlessCan(
ProjectPermissionActions.Delete,
subject(ProjectPermissionSub.SecretFolders, { environment, secretPath })
);
});
const foldersByEnv = folders.reduce(
(acc, folder) => {
if (!acc[folder.environment]) {
acc[folder.environment] = [];
}
acc[folder.environment].push(folder);
return acc;
},
{} as Record<string, typeof folders>
);
const executeBulkDelete = async (tx: Knex) => {
const deletedFolders = [];
for (const [environment, envFolders] of Object.entries(foldersByEnv)) {
const env = await projectEnvDAL.findOne({ projectId, slug: environment });
if (!env) {
throw new NotFoundError({
message: `Environment with slug '${environment}' not found`
});
}
for (const folderSpec of envFolders) {
const { path: secretPath, idOrName } = folderSpec;
const parentFolder = await folderDAL.findBySecretPath(projectId, environment, secretPath, tx);
if (!parentFolder) {
throw new NotFoundError({
message: `Folder with path '${secretPath}' in environment with slug '${environment}' not found`
});
}
await $checkFolderPolicy({ projectId, env, parentId: parentFolder.id, idOrName });
let folderToDelete = await folderDAL
.findOne({
envId: env.id,
name: idOrName,
parentId: parentFolder.id,
isReserved: false
})
.catch(() => null);
if (!folderToDelete && uuidValidate(idOrName)) {
folderToDelete = await folderDAL
.findOne({
envId: env.id,
id: idOrName,
parentId: parentFolder.id,
isReserved: false
})
.catch(() => null);
}
if (!folderToDelete) {
throw new NotFoundError({
message: `Folder with ID/name '${idOrName}' not found`
});
}
const [doc] = await folderDAL.delete(
{
envId: env.id,
id: folderToDelete.id,
parentId: parentFolder.id,
isReserved: false
},
tx
);
const folderVersions = await folderVersionDAL.findLatestFolderVersions([doc.id], tx);
if (commitChanges) {
commitChanges.push({
type: CommitType.DELETE,
folderVersionId: folderVersions[doc.id].id,
folderId: doc.id
});
} else {
await folderCommitService.createCommit(
{
actor: {
type: actor,
metadata: {
id: actorId
}
},
message: "Folder deleted (batch)",
folderId: parentFolder.id,
changes: [
{
type: CommitType.DELETE,
folderVersionId: folderVersions[doc.id].id,
folderId: doc.id
}
]
},
tx
);
}
deletedFolders.push(doc);
}
}
return deletedFolders;
};
const result = providedTx ? await executeBulkDelete(providedTx) : await folderDAL.transaction(executeBulkDelete);
const uniqueParentIds = [...new Set(result.map((folder) => folder.parentId).filter(Boolean))];
await Promise.all(uniqueParentIds.map((parentId) => snapshotService.performSnapshot(parentId as string)));
return {
folders: result,
count: result.length
};
};
return {
createFolder,
updateFolder,
@ -986,6 +1371,8 @@ export const secretFolderServiceFactory = ({
getFoldersDeepByEnvs,
getProjectEnvironmentsFolders,
getFolderVersionsByIds,
getFolderVersions
getFolderVersions,
createManyFolders,
deleteManyFolders
};
};

View File

@ -1,6 +1,8 @@
import { OrderByDirection, TProjectPermission } from "@app/lib/types";
import { SecretsOrderBy } from "@app/services/secret/secret-types";
import { ActorAuthMethod, ActorType } from "../auth/auth-type";
export enum ReservedFolders {
SecretReplication = "__reserve_replication_"
}
@ -21,7 +23,7 @@ export type TUpdateFolderDTO = {
} & TProjectPermission;
export type TUpdateManyFoldersDTO = {
projectSlug: string;
projectSlug?: string;
folders: {
environment: string;
path: string;
@ -62,3 +64,30 @@ export type TGetFoldersDeepByEnvsDTO = {
export type TFindFoldersDeepByParentIdsDTO = {
parentIds: string[];
};
export type TCreateManyFoldersDTO = {
projectId: string;
actor: ActorType;
actorId: string;
actorAuthMethod: ActorAuthMethod;
actorOrgId?: string;
folders: Array<{
name: string;
environment: string;
path: string;
description?: string | null;
}>;
};
export type TDeleteManyFoldersDTO = {
projectId: string;
actor: ActorType;
actorId: string;
actorAuthMethod: ActorAuthMethod;
actorOrgId?: string;
folders: Array<{
environment: string;
path: string;
idOrName: string;
}>;
};

View File

@ -67,6 +67,7 @@ export const getAllSecretReferences = (maybeSecretReference: string) => {
export const fnSecretBulkInsert = async ({
// TODO: Pick types here
folderId,
commitChanges,
orgId,
inputSecrets,
secretDAL,
@ -134,28 +135,32 @@ export const fnSecretBulkInsert = async ({
tx
);
const commitChanges = secretVersions
const changes = secretVersions
.filter(({ type }) => type === SecretType.Shared)
.map((sv) => ({
type: CommitType.ADD,
secretVersionId: sv.id
}));
if (commitChanges.length > 0) {
await folderCommitService.createCommit(
{
actor: {
type: actorType || ActorType.PLATFORM,
metadata: {
id: actor?.actorId
}
if (changes.length > 0) {
if (commitChanges) {
commitChanges.push(...changes);
} else {
await folderCommitService.createCommit(
{
actor: {
type: actorType || ActorType.PLATFORM,
metadata: {
id: actor?.actorId
}
},
message: "Secret Created",
folderId,
changes
},
message: "Secret Created",
folderId,
changes: commitChanges
},
tx
);
tx
);
}
}
await secretDAL.upsertSecretReferences(
@ -209,6 +214,7 @@ export const fnSecretBulkUpdate = async ({
tx,
inputSecrets,
folderId,
commitChanges,
orgId,
secretDAL,
secretVersionDAL,
@ -359,28 +365,32 @@ export const fnSecretBulkUpdate = async ({
{ tx }
);
const commitChanges = secretVersions
const changes = secretVersions
.filter(({ type }) => type === SecretType.Shared)
.map((sv) => ({
type: CommitType.ADD,
isUpdate: true,
secretVersionId: sv.id
}));
if (commitChanges.length > 0) {
await folderCommitService.createCommit(
{
actor: {
type: actorType || ActorType.PLATFORM,
metadata: {
id: actor?.actorId
}
if (changes.length > 0) {
if (commitChanges) {
commitChanges.push(...changes);
} else {
await folderCommitService.createCommit(
{
actor: {
type: actorType || ActorType.PLATFORM,
metadata: {
id: actor?.actorId
}
},
message: "Secret Updated",
folderId,
changes
},
message: "Secret Updated",
folderId,
changes: commitChanges
},
tx
);
tx
);
}
}
return secretsWithTags.map((secret) => ({ ...secret, _id: secret.id }));
@ -395,7 +405,8 @@ export const fnSecretBulkDelete = async ({
secretDAL,
secretQueueService,
folderCommitService,
secretVersionDAL
secretVersionDAL,
commitChanges
}: TFnSecretBulkDelete) => {
const deletedSecrets = await secretDAL.deleteMany(
inputSecrets.map(({ type, secretKey }) => ({
@ -421,27 +432,31 @@ export const fnSecretBulkDelete = async ({
tx
);
const commitChanges = deletedSecrets
const changes = deletedSecrets
.filter(({ type }) => type === SecretType.Shared)
.map(({ id }) => ({
type: CommitType.DELETE,
secretVersionId: secretVersions[id].id
}));
if (commitChanges.length > 0) {
await folderCommitService.createCommit(
{
actor: {
type: actorType || ActorType.PLATFORM,
metadata: {
id: actorId
}
if (changes.length > 0) {
if (commitChanges) {
commitChanges.push(...changes);
} else {
await folderCommitService.createCommit(
{
actor: {
type: actorType || ActorType.PLATFORM,
metadata: {
id: actorId
}
},
message: "Secret Deleted",
folderId,
changes
},
message: "Secret Deleted",
folderId,
changes: commitChanges
},
tx
);
tx
);
}
}
return deletedSecrets;

View File

@ -28,7 +28,7 @@ import { logger } from "@app/lib/logger";
import { alphaNumericNanoId } from "@app/lib/nanoid";
import { ActorType } from "../auth/auth-type";
import { TFolderCommitServiceFactory } from "../folder-commit/folder-commit-service";
import { TCommitResourceChangeDTO, TFolderCommitServiceFactory } from "../folder-commit/folder-commit-service";
import { TKmsServiceFactory } from "../kms/kms-service";
import { KmsDataKey } from "../kms/kms-types";
import { TProjectEnvDALFactory } from "../project-env/project-env-dal";
@ -1474,8 +1474,10 @@ export const secretV2BridgeServiceFactory = ({
actorOrgId,
environment,
projectId,
secrets: inputSecrets
}: TCreateManySecretDTO) => {
secrets: inputSecrets,
tx: providedTx,
commitChanges
}: TCreateManySecretDTO & { tx?: Knex; commitChanges?: TCommitResourceChangeDTO[] }) => {
const { permission } = await permissionService.getProjectPermission({
actor,
actorId,
@ -1558,8 +1560,8 @@ export const secretV2BridgeServiceFactory = ({
const { encryptor: secretManagerEncryptor, decryptor: secretManagerDecryptor } =
await kmsService.createCipherPairWithDataKey({ type: KmsDataKey.SecretManager, projectId });
const newSecrets = await secretDAL.transaction(async (tx) =>
fnSecretBulkInsert({
const executeBulkInsert = async (tx: Knex) => {
return fnSecretBulkInsert({
inputSecrets: inputSecrets.map((el) => {
const references = secretReferencesGroupByInputSecretKey[el.secretKey]?.nestedReferences;
@ -1581,6 +1583,7 @@ export const secretV2BridgeServiceFactory = ({
};
}),
folderId,
commitChanges,
orgId: actorOrgId,
secretDAL,
resourceMetadataDAL,
@ -1593,8 +1596,13 @@ export const secretV2BridgeServiceFactory = ({
actorId
},
tx
})
);
});
};
const newSecrets = providedTx
? await executeBulkInsert(providedTx)
: await secretDAL.transaction(executeBulkInsert);
await secretDAL.invalidateSecretCacheByProjectId(projectId);
await snapshotService.performSnapshot(folderId);
await secretQueueService.syncSecrets({
@ -1641,8 +1649,10 @@ export const secretV2BridgeServiceFactory = ({
projectId,
secretPath: defaultSecretPath = "/",
secrets: inputSecrets,
mode: updateMode
}: TUpdateManySecretDTO) => {
mode: updateMode,
tx: providedTx,
commitChanges
}: TUpdateManySecretDTO & { tx?: Knex; commitChanges?: TCommitResourceChangeDTO[] }) => {
const { permission } = await permissionService.getProjectPermission({
actor,
actorId,
@ -1671,18 +1681,20 @@ export const secretV2BridgeServiceFactory = ({
const { encryptor: secretManagerEncryptor, decryptor: secretManagerDecryptor } =
await kmsService.createCipherPairWithDataKey({ type: KmsDataKey.SecretManager, projectId });
const updatedSecrets: Array<
TSecretsV2 & {
secretPath: string;
tags: {
id: string;
slug: string;
color?: string | null;
name: string;
}[];
}
> = [];
await secretDAL.transaction(async (tx) => {
// Function to execute the bulk update operation
const executeBulkUpdate = async (tx: Knex) => {
const updatedSecrets: Array<
TSecretsV2 & {
secretPath: string;
tags: {
id: string;
slug: string;
color?: string | null;
name: string;
}[];
}
> = [];
for await (const folder of folders) {
if (!folder) throw new NotFoundError({ message: "Folder not found" });
@ -1801,7 +1813,7 @@ export const secretV2BridgeServiceFactory = ({
{
operator: "eq",
field: `${TableName.SecretV2}.key` as "key",
value: el.secretKey
value: el.newSecretName as string
},
{
operator: "eq",
@ -1855,6 +1867,7 @@ export const secretV2BridgeServiceFactory = ({
orgId: actorOrgId,
folderCommitService,
tx,
commitChanges,
inputSecrets: secretsToUpdate.map((el) => {
const originalSecret = secretsToUpdateInDBGroupedByKey[el.secretKey][0];
const encryptedValue =
@ -1934,7 +1947,13 @@ export const secretV2BridgeServiceFactory = ({
updatedSecrets.push(...bulkInsertedSecrets.map((el) => ({ ...el, secretPath: folder.path })));
}
}
});
return updatedSecrets;
};
const updatedSecrets = providedTx
? await executeBulkUpdate(providedTx)
: await secretDAL.transaction(executeBulkUpdate);
await secretDAL.invalidateSecretCacheByProjectId(projectId);
await Promise.allSettled(folders.map((el) => (el?.id ? snapshotService.performSnapshot(el.id) : undefined)));
@ -1991,8 +2010,10 @@ export const secretV2BridgeServiceFactory = ({
actor,
actorId,
actorAuthMethod,
actorOrgId
}: TDeleteManySecretDTO) => {
actorOrgId,
tx: providedTx,
commitChanges
}: TDeleteManySecretDTO & { tx?: Knex; commitChanges?: TCommitResourceChangeDTO[] }) => {
const { permission } = await permissionService.getProjectPermission({
actor,
actorId,
@ -2051,24 +2072,29 @@ export const secretV2BridgeServiceFactory = ({
);
});
const executeBulkDelete = async (tx: Knex) => {
return fnSecretBulkDelete({
secretDAL,
secretQueueService,
folderCommitService,
secretVersionDAL,
inputSecrets: inputSecrets.map(({ type, secretKey }) => ({
secretKey,
type: type || SecretType.Shared
})),
projectId,
folderId,
actorId,
actorType: actor,
commitChanges,
tx
});
};
try {
const secretsDeleted = await secretDAL.transaction(async (tx) =>
fnSecretBulkDelete({
secretDAL,
secretQueueService,
folderCommitService,
secretVersionDAL,
inputSecrets: inputSecrets.map(({ type, secretKey }) => ({
secretKey,
type: type || SecretType.Shared
})),
projectId,
folderId,
actorId,
actorType: actor,
tx
})
);
const secretsDeleted = providedTx
? await executeBulkDelete(providedTx)
: await secretDAL.transaction(executeBulkDelete);
await secretDAL.invalidateSecretCacheByProjectId(projectId);
await snapshotService.performSnapshot(folderId);

View File

@ -8,7 +8,7 @@ import { SecretsOrderBy } from "@app/services/secret/secret-types";
import { TSecretFolderDALFactory } from "@app/services/secret-folder/secret-folder-dal";
import { TSecretTagDALFactory } from "@app/services/secret-tag/secret-tag-dal";
import { TFolderCommitServiceFactory } from "../folder-commit/folder-commit-service";
import { TCommitResourceChangeDTO, TFolderCommitServiceFactory } from "../folder-commit/folder-commit-service";
import { TResourceMetadataDALFactory } from "../resource-metadata/resource-metadata-dal";
import { ResourceMetadataDTO } from "../resource-metadata/resource-metadata-schema";
import { TSecretV2BridgeDALFactory } from "./secret-v2-bridge-dal";
@ -167,6 +167,7 @@ export type TFnSecretBulkInsert = {
folderId: string;
orgId: string;
tx?: Knex;
commitChanges?: TCommitResourceChangeDTO[];
inputSecrets: Array<
Omit<TSecretsV2Insert, "folderId"> & {
tagIds?: string[];
@ -214,6 +215,7 @@ export type TFnSecretBulkUpdate = {
actorId?: string;
};
tx?: Knex;
commitChanges?: TCommitResourceChangeDTO[];
};
export type TFnSecretBulkDelete = {
@ -223,6 +225,7 @@ export type TFnSecretBulkDelete = {
actorId: string;
actorType?: string;
tx?: Knex;
commitChanges?: TCommitResourceChangeDTO[];
secretDAL: Pick<TSecretV2BridgeDALFactory, "deleteMany">;
secretQueueService: {
removeSecretReminder: (data: TRemoveSecretReminderDTO, tx?: Knex) => Promise<void>;

View File

@ -544,3 +544,33 @@ export enum SecretProtectionType {
}
export type TStartSecretsV2MigrationDTO = TProjectPermission;
export type TProcessNewCommitRawDTO = {
secrets: {
create?: {
secretKey: string;
secretValue: string;
secretComment?: string;
skipMultilineEncoding?: boolean;
tagIds?: string[];
secretMetadata?: ResourceMetadataDTO;
metadata?: { source?: string };
}[];
update?: {
secretKey: string;
newSecretKey?: string;
secretValue?: string;
secretComment?: string;
skipMultilineEncoding?: boolean;
tagIds?: string[];
secretMetadata?: ResourceMetadataDTO;
metadata?: { source?: string };
}[];
delete?: { secretKey: string }[];
};
folders: {
create?: { folderName: string; description?: string }[];
update?: { folderName: string; description?: string | null; id: string }[];
delete?: { folderName: string; id: string }[];
};
};

View File

@ -4,11 +4,19 @@ export enum ReservedFolders {
SecretReplication = "__reserve_replication_"
}
export enum PendingAction {
Create = "create",
Update = "update",
Delete = "delete"
}
export type TSecretFolder = {
id: string;
name: string;
description?: string;
parentId?: string | null;
isPending?: boolean;
pendingAction?: PendingAction;
};
export type TSecretFolderWithPath = TSecretFolder & { path: string };

View File

@ -2,9 +2,14 @@ import { MutationOptions, useMutation, useQueryClient } from "@tanstack/react-qu
import { apiRequest } from "@app/config/request";
import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
import {
PendingChanges,
PendingSecretUpdate
} from "@app/pages/secret-manager/SecretDashboardPage/SecretMainPage.store";
import { commitKeys } from "../folderCommits/queries";
import { secretApprovalRequestKeys } from "../secretApprovalRequest/queries";
import { PendingAction } from "../secretFolders/types";
import { secretSnapshotKeys } from "../secretSnapshots/queries";
import { secretKeys } from "./queries";
import {
@ -420,3 +425,120 @@ export const useBackfillSecretReference = () =>
return data.message;
}
});
export const useCreateCommit = () => {
const queryClient = useQueryClient();
return useMutation<
object,
object,
{
workspaceId: string;
environment: string;
secretPath: string;
pendingChanges: PendingChanges;
message: string;
}
>({
mutationFn: async ({ workspaceId, environment, secretPath, pendingChanges, message }) => {
const transformedSecretUpdates = pendingChanges.secrets
.filter((change) => change.type === PendingAction.Update)
.map((change: PendingSecretUpdate) => {
const updatePayload: {
secretKey: string;
newSecretName?: string;
secretValue?: string;
secretComment?: string;
skipMultilineEncoding?: boolean;
tagIds?: string[];
secretMetadata?: {
key: string;
value: string;
}[];
} = {
secretKey: change.secretKey
};
// Only include fields that actually changed
if (change.newSecretName) {
updatePayload.newSecretName = change.newSecretName;
}
if (change.secretValue !== undefined) {
updatePayload.secretValue = change.secretValue;
}
if (change.secretComment !== undefined) {
updatePayload.secretComment = change.secretComment;
}
if (change.skipMultilineEncoding !== undefined) {
updatePayload.skipMultilineEncoding = change.skipMultilineEncoding;
}
if (change.tags) {
updatePayload.tagIds = change.tags.map((tag) => tag.id);
}
if (change.secretMetadata) {
updatePayload.secretMetadata = change.secretMetadata;
}
return updatePayload;
});
const { data } = await apiRequest.post("/api/v1/pit/batch/commit", {
projectId: workspaceId,
environment,
secretPath,
changes: {
secrets: {
create:
pendingChanges.secrets
.filter((change) => change.type === PendingAction.Create)
.map((change) => ({
secretKey: change.secretKey,
secretValue: change.secretValue,
secretComment: change.secretComment,
skipMultilineEncoding: change.skipMultilineEncoding,
tagIds: change.tags?.map((tag) => tag.id),
secretMetadata: change.secretMetadata
})) || [],
update: transformedSecretUpdates || [],
delete:
pendingChanges.secrets.filter((change) => change.type === PendingAction.Delete) || []
},
folders: {
create:
pendingChanges.folders.filter((change) => change.type === PendingAction.Create) || [],
update:
pendingChanges.folders
.filter((change) => change.type === PendingAction.Update)
.map((change) => ({
...change,
description: change.description || null
})) || [],
delete:
pendingChanges.folders.filter((change) => change.type === PendingAction.Delete) || []
}
},
message
});
return data;
},
onSuccess: (_, { workspaceId, environment, secretPath }) => {
queryClient.invalidateQueries({
queryKey: dashboardKeys.getDashboardSecrets({ projectId: workspaceId, secretPath })
});
queryClient.invalidateQueries({
queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath })
});
queryClient.invalidateQueries({
queryKey: secretSnapshotKeys.list({ environment, workspaceId, directory: secretPath })
});
queryClient.invalidateQueries({
queryKey: secretSnapshotKeys.count({ environment, workspaceId, directory: secretPath })
});
queryClient.invalidateQueries({
queryKey: commitKeys.count({ workspaceId, environment, directory: secretPath })
});
queryClient.invalidateQueries({
queryKey: commitKeys.history({ workspaceId, environment, directory: secretPath })
});
queryClient.invalidateQueries({ queryKey: secretApprovalRequestKeys.count({ workspaceId }) });
}
});
};

View File

@ -1,5 +1,6 @@
import { ProjectPermissionActions } from "@app/context";
import { PendingAction } from "../secretFolders/types";
import type { WsTag } from "../tags/types";
export enum SecretType {
@ -66,6 +67,8 @@ export type SecretV3RawSanitized = {
isRotatedSecret?: boolean;
secretReminderRecipients?: SecretReminderRecipient[];
rotationId?: string;
isPending?: boolean;
pendingAction?: PendingAction;
};
export type SecretV3Raw = {

View File

@ -72,7 +72,7 @@ export const generateCommitText = (commits: { op: CommitType }[] = [], isReplica
if (score[CommitType.DELETE])
text.push(
<span className="deleted-commit">
{Boolean(text.length) && "and"}
{Boolean(text.length) && " and "}
{score[CommitType.DELETE]} Secret{score[CommitType.DELETE] !== 1 && "s"}
<span className="text-red-600"> Deleted</span>
</span>

View File

@ -1,3 +1,4 @@
/* eslint-disable no-case-declarations */
import { useCallback, useEffect, useMemo, useState } from "react";
import { Helmet } from "react-helmet";
import { useTranslation } from "react-i18next";
@ -46,12 +47,16 @@ import { useGetProjectSecretsDetails } from "@app/hooks/api/dashboard";
import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
import { useGetFolderCommitsCount } from "@app/hooks/api/folderCommits";
import { OrderByDirection } from "@app/hooks/api/generic/types";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import { useCreateCommit } from "@app/hooks/api/secrets/mutations";
import { SecretV3RawSanitized } from "@app/hooks/api/types";
import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
import { SecretRotationListView } from "@app/pages/secret-manager/SecretDashboardPage/components/SecretRotationListView";
import { SecretTableResourceCount } from "../OverviewPage/components/SecretTableResourceCount";
import { SecretV2MigrationSection } from "../OverviewPage/components/SecretV2MigrationSection";
import { ActionBar } from "./components/ActionBar";
import { CommitForm } from "./components/CommitForm";
import { CreateSecretForm } from "./components/CreateSecretForm";
import { DynamicSecretListView } from "./components/DynamicSecretListView";
import { FolderListView } from "./components/FolderListView";
@ -61,8 +66,11 @@ import { SecretImportListView } from "./components/SecretImportListView";
import { SecretListView, SecretNoAccessListView } from "./components/SecretListView";
import { SnapshotView } from "./components/SnapshotView";
import {
PendingChanges,
PopUpNames,
StoreProvider,
useBatchMode,
useBatchModeActions,
usePopUpAction,
usePopUpState,
useSelectedSecretActions,
@ -90,8 +98,11 @@ const Page = () => {
});
const { permission } = useProjectPermission();
const { mutateAsync: createCommit } = useCreateCommit();
const [isVisible, setIsVisible] = useState(false);
const { isBatchMode, pendingChanges } = useBatchMode();
const { loadPendingChanges, setExistingKeys } = useBatchModeActions();
const {
offset,
@ -121,6 +132,30 @@ const Page = () => {
const projectSlug = currentWorkspace?.slug || "";
const secretPath = (routerQueryParams.secretPath as string) || "/";
useEffect(() => {
if (isBatchMode && workspaceId && environment && secretPath) {
loadPendingChanges({ workspaceId, environment, secretPath });
}
}, [isBatchMode, workspaceId, environment, secretPath, loadPendingChanges]);
const handleCreateCommit = async (changes: PendingChanges, message: string) => {
try {
await createCommit({
workspaceId,
environment,
secretPath,
pendingChanges: changes,
message
});
} catch (error) {
createNotification({
text: "Failed to commit changes",
type: "error"
});
console.error(error);
}
};
const canReadSecret = hasSecretReadValueOrDescribePermission(
permission,
ProjectPermissionSecretActions.DescribeSecret,
@ -350,6 +385,16 @@ const Page = () => {
noAccessSecretCount
);
useEffect(() => {
if (data && isBatchMode) {
const existingSecretKeys = [...(secrets?.map((s) => s.key) || [])];
const existingFolderNames = folders?.map((f) => f.name) || [];
setExistingKeys(existingSecretKeys, existingFolderNames);
}
}, [data, isBatchMode, setExistingKeys, secrets, importedSecrets, folders]);
const handleSortToggle = () =>
setOrderDirection((state) =>
state === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
@ -476,6 +521,134 @@ const Page = () => {
setFilter(defaultFilterState);
setDebouncedSearchFilter("");
};
const getMergedSecretsWithPending = () => {
if (!isBatchMode || pendingChanges.secrets.length === 0) {
return secrets;
}
const mergedSecrets = [...(secrets || [])];
pendingChanges.secrets.forEach((change) => {
switch (change.type) {
case PendingAction.Create:
mergedSecrets.unshift({
id: change.id,
key: change.secretKey,
value: change.secretValue,
comment: change.secretComment || "",
skipMultilineEncoding: change.skipMultilineEncoding || false,
tags: change.tags?.map((tag) => ({ id: tag.id, slug: tag.slug })) || [],
secretMetadata: change.secretMetadata || [],
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
version: 1,
isPending: true,
pendingAction: PendingAction.Create
} as unknown as SecretV3RawSanitized);
break;
case PendingAction.Update:
const updateIndex = mergedSecrets.findIndex((s) => s.key === change.secretKey);
if (updateIndex >= 0) {
mergedSecrets[updateIndex] = {
...mergedSecrets[updateIndex],
key: change.newSecretName || change.secretKey,
value:
change.secretValue !== undefined
? change.secretValue
: mergedSecrets[updateIndex].value,
comment:
change.secretComment !== undefined
? change.secretComment
: mergedSecrets[updateIndex].comment,
skipMultilineEncoding:
change.skipMultilineEncoding !== undefined
? change.skipMultilineEncoding
: mergedSecrets[updateIndex].skipMultilineEncoding,
secretMetadata: change.secretMetadata || mergedSecrets[updateIndex].secretMetadata,
isPending: true,
pendingAction: PendingAction.Update
};
}
break;
case PendingAction.Delete:
const deleteIndex = mergedSecrets.findIndex((s) => s.key === change.secretKey);
if (deleteIndex >= 0) {
mergedSecrets[deleteIndex] = {
...mergedSecrets[deleteIndex],
isPending: true,
pendingAction: PendingAction.Delete
};
}
break;
default:
break;
}
});
return mergedSecrets;
};
const getMergedFoldersWithPending = () => {
if (!isBatchMode || pendingChanges.folders.length === 0) {
return folders;
}
const mergedFolders = [...(folders || [])];
pendingChanges.folders.forEach((change) => {
switch (change.type) {
case PendingAction.Create:
mergedFolders.unshift({
id: change.id,
name: change.folderName,
description: change.description,
parentId: null,
isPending: true,
pendingAction: PendingAction.Create
} as any);
break;
case PendingAction.Update:
const updateIndex = mergedFolders.findIndex((f) => f.id === change.id);
if (updateIndex >= 0) {
mergedFolders[updateIndex] = {
...mergedFolders[updateIndex],
name: change.folderName,
description:
change.description !== undefined
? change.description
: mergedFolders[updateIndex].description,
isPending: true,
pendingAction: PendingAction.Update
};
}
break;
case PendingAction.Delete:
const deleteIndex = mergedFolders.findIndex((f) => f.id === change.id);
if (deleteIndex >= 0) {
mergedFolders[deleteIndex] = {
...mergedFolders[deleteIndex],
isPending: true,
pendingAction: PendingAction.Delete
};
}
break;
default:
break;
}
});
return mergedFolders;
};
const mergedSecrets = getMergedSecretsWithPending();
const mergedFolders = getMergedFoldersWithPending();
return (
<div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:[color-scheme:dark]">
<SecretV2MigrationSection />
@ -487,6 +660,7 @@ const Page = () => {
projectSlug={projectSlug}
secretPath={secretPath}
isVisible={isVisible}
isBatchMode={isBatchMode}
filter={filter}
tags={tags}
onVisibilityToggle={handleToggleVisibility}
@ -559,9 +733,9 @@ const Page = () => {
importedSecrets={importedSecrets}
/>
)}
{Boolean(folders?.length) && (
{Boolean(mergedFolders?.length) && (
<FolderListView
folders={folders}
folders={mergedFolders}
environment={environment}
workspaceId={workspaceId}
secretPath={secretPath}
@ -579,9 +753,9 @@ const Page = () => {
{canReadSecretRotations && Boolean(secretRotations?.length) && (
<SecretRotationListView secretRotations={secretRotations} />
)}
{canReadSecret && Boolean(secrets?.length) && (
{canReadSecret && Boolean(mergedSecrets?.length) && (
<SecretListView
secrets={secrets}
secrets={mergedSecrets}
tags={tags}
isVisible={isVisible}
environment={environment}
@ -592,6 +766,15 @@ const Page = () => {
usedBySecretSyncs={usedBySecretSyncs}
/>
)}
{(pendingChanges.secrets.length > 0 || pendingChanges.folders.length > 0) && (
<CommitForm
onCommit={handleCreateCommit}
environment={environment}
workspaceId={workspaceId}
secretPath={secretPath}
isCommitting={false}
/>
)}
{noAccessSecretCount > 0 && <SecretNoAccessListView count={noAccessSecretCount} />}
{!canReadSecret &&
!canReadDynamicSecret &&
@ -633,6 +816,7 @@ const Page = () => {
secretPath={secretPath}
autoCapitalize={currentWorkspace?.autoCapitalization}
isProtectedBranch={isProtectedBranch}
isBatchMode={isBatchMode}
/>
</ModalContent>
</Modal>

View File

@ -1,13 +1,167 @@
/* eslint-disable no-nested-ternary */
import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
import { useRouter } from "@tanstack/react-router";
import { createStore, StateCreator, StoreApi, useStore } from "zustand";
import { useShallow } from "zustand/react/shallow";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
// akhilmhdh: Don't remove this file if ur thinking why use zustand just for selected selects state
// This is first step and the whole secret crud will be moved to this global page scope state
// this will allow more stuff like undo grouping stuffs etc
// Base interface for all pending changes
export interface BasePendingChange {
id: string;
timestamp: number;
}
// Secret-related change types
export interface PendingSecretCreate extends BasePendingChange {
resourceType: "secret";
type: PendingAction.Create;
secretKey: string;
secretValue: string;
secretComment?: string;
skipMultilineEncoding?: boolean;
tags?: { id: string; slug: string }[];
secretMetadata?: { key: string; value: string }[];
originalKey?: string;
}
export interface PendingSecretUpdate extends BasePendingChange {
resourceType: "secret";
type: PendingAction.Update;
secretKey: string;
newSecretName?: string;
originalValue?: string;
secretValue?: string;
originalComment?: string;
secretComment?: string;
originalSkipMultilineEncoding?: boolean;
skipMultilineEncoding?: boolean;
originalTags?: { id: string; slug: string }[];
tags?: { id: string; slug: string }[];
originalSecretMetadata?: { key: string; value: string }[];
secretMetadata?: { key: string; value: string }[];
}
export interface PendingSecretDelete extends BasePendingChange {
resourceType: "secret";
type: PendingAction.Delete;
secretKey: string;
secretValue: string;
}
// Folder-related change types
export interface PendingFolderCreate extends BasePendingChange {
resourceType: "folder";
type: PendingAction.Create;
id: string;
folderName: string;
description?: string;
parentPath: string;
}
export interface PendingFolderUpdate extends BasePendingChange {
resourceType: "folder";
type: PendingAction.Update;
originalFolderName: string;
folderName: string;
id: string;
originalDescription?: string;
description?: string;
}
export interface PendingFolderDelete extends BasePendingChange {
resourceType: "folder";
type: PendingAction.Delete;
id: string;
folderName: string;
folderPath: string;
}
// Union types for each resource
export type PendingSecretChange = PendingSecretCreate | PendingSecretUpdate | PendingSecretDelete;
export type PendingFolderChange = PendingFolderCreate | PendingFolderUpdate | PendingFolderDelete;
export type PendingChange = PendingSecretChange | PendingFolderChange;
// Grouped changes for better processing
export interface PendingChanges {
secrets: PendingSecretChange[];
folders: PendingFolderChange[];
}
// Context interface for batch operations
export interface BatchContext {
workspaceId: string;
environment: string;
secretPath: string;
}
const STORAGE_KEY = "infisical_pending_changes";
const generateContextKey = (workspaceId: string, environment: string, secretPath: string) => {
return `${workspaceId}_${environment}_${secretPath}`;
};
const savePendingChangesToStorage = (
changes: PendingChanges,
workspaceId: string,
environment: string,
secretPath: string
) => {
const key = `${STORAGE_KEY}_${generateContextKey(workspaceId, environment, secretPath)}`;
try {
localStorage.setItem(key, JSON.stringify(changes));
} catch (error) {
console.warn("Failed to save pending changes to localStorage:", error);
}
};
const loadPendingChangesFromStorage = (
workspaceId: string,
environment: string,
secretPath: string
): PendingChanges => {
const key = `${STORAGE_KEY}_${generateContextKey(workspaceId, environment, secretPath)}`;
const stored = localStorage.getItem(key);
if (!stored) return { secrets: [], folders: [] };
try {
const parsed = JSON.parse(stored);
if (Array.isArray(parsed)) {
return {
secrets: parsed.filter(
(change: any) => !change.resourceType || change.resourceType === "secret"
),
folders: []
};
}
return {
secrets: parsed.secrets || [],
folders: parsed.folders || []
};
} catch (error) {
console.warn("Failed to parse pending changes from localStorage:", error);
return { secrets: [], folders: [] };
}
};
const clearPendingChangesFromStorage = (
workspaceId: string,
environment: string,
secretPath: string
) => {
const key = `${STORAGE_KEY}_${generateContextKey(workspaceId, environment, secretPath)}`;
try {
localStorage.removeItem(key);
} catch (error) {
console.warn("Failed to clear pending changes from localStorage:", error);
}
};
type SelectedSecretState = {
selectedSecret: Record<string, SecretV3RawSanitized>;
action: {
@ -16,14 +170,16 @@ type SelectedSecretState = {
set: (secrets: Record<string, SecretV3RawSanitized>) => void;
};
};
const createSelectedSecretStore: StateCreator<SelectedSecretState> = (set) => ({
const createSelectedSecretStore: StateCreator<CombinedState, [], [], SelectedSecretState> = (
set
) => ({
selectedSecret: {},
action: {
toggle: (secret) =>
set((state) => {
const isChecked = Boolean(state.selectedSecret?.[secret.id]);
const newChecks = { ...state.selectedSecret };
// remove selection if its present else add it
if (isChecked) delete newChecks[secret.id];
else newChecks[secret.id] = secret;
return { selectedSecret: newChecks };
@ -33,6 +189,334 @@ const createSelectedSecretStore: StateCreator<SelectedSecretState> = (set) => ({
}
});
const cleanupRevertedFields = (update: PendingSecretUpdate): PendingSecretUpdate => {
const cleaned = { ...update };
if (cleaned.secretValue === cleaned.originalValue) {
cleaned.secretValue = undefined;
}
if (cleaned.secretComment === cleaned.originalComment) {
cleaned.secretComment = undefined;
}
if (cleaned.skipMultilineEncoding === cleaned.originalSkipMultilineEncoding) {
cleaned.skipMultilineEncoding = undefined;
}
// For arrays, compare stringified versions
if (JSON.stringify(cleaned.tags) === JSON.stringify(cleaned.originalTags)) {
cleaned.tags = undefined;
}
if (JSON.stringify(cleaned.secretMetadata) === JSON.stringify(cleaned.originalSecretMetadata)) {
cleaned.secretMetadata = undefined;
}
// If the new name is the same as original key, remove it
if (cleaned.newSecretName === cleaned.secretKey) {
cleaned.newSecretName = undefined;
}
return cleaned;
};
type BatchModeState = {
isBatchMode: boolean;
pendingChanges: PendingChanges;
existingSecretKeys: Set<string>;
existingFolderNames: Set<string>;
currentContext: BatchContext | null;
batchActions: {
addPendingChange: (change: PendingChange, context: BatchContext) => void;
loadPendingChanges: (context: BatchContext) => void;
clearAllPendingChanges: (context: BatchContext) => void;
setExistingKeys: (secretKeys: string[], folderNames: string[]) => void;
getTotalPendingChangesCount: () => number;
removePendingChange: (changeId: string, resourceType: string, context: BatchContext) => void;
};
};
const createBatchModeStore: StateCreator<CombinedState, [], [], BatchModeState> = (set, get) => ({
isBatchMode: true, // Always enabled by default
pendingChanges: { secrets: [], folders: [] },
currentContext: null,
existingSecretKeys: new Set<string>(),
existingFolderNames: new Set<string>(),
batchActions: {
addPendingChange: (change: PendingChange, context: BatchContext) =>
set((state) => {
const newChanges = { ...state.pendingChanges };
if (change.resourceType === "folder") {
const existingFolder =
state.existingFolderNames.has(change.folderName) ||
newChanges.folders.some((f) => f.folderName === change.folderName);
if (change.type === PendingAction.Create && existingFolder) {
return { pendingChanges: newChanges };
}
if (
change.type === PendingAction.Update &&
change.folderName !== change.originalFolderName &&
existingFolder
) {
return { pendingChanges: newChanges };
}
}
if (change.resourceType === "secret") {
const existingSecret =
state.existingSecretKeys.has(change.secretKey) ||
newChanges.secrets.some((s) => s.secretKey === change.secretKey);
if (change.type === PendingAction.Create && existingSecret) {
return { pendingChanges: newChanges };
}
const existingNewSecretName =
change.type === PendingAction.Update &&
change.newSecretName &&
change.newSecretName !== change.secretKey &&
(state.existingSecretKeys.has(change.newSecretName) ||
newChanges.secrets.some(
(s) =>
(s.secretKey === change.newSecretName ||
(s.type === PendingAction.Update &&
s.newSecretName === change.newSecretName)) &&
s.id !== change.id
));
if (existingNewSecretName) {
return { pendingChanges: newChanges };
}
}
if (change.resourceType === "secret") {
const secretChanges = [...newChanges.secrets];
if (change.type === PendingAction.Create) {
const existingCreateIndex = secretChanges.findIndex(
(c) =>
c.type === PendingAction.Create &&
(c.secretKey === change.secretKey || c.secretKey === change.originalKey)
);
if (existingCreateIndex >= 0) {
secretChanges[existingCreateIndex] = {
...secretChanges[existingCreateIndex],
...change,
timestamp: Date.now()
};
} else {
secretChanges.push(change);
}
} else if (change.type === PendingAction.Update) {
const existingCreateIndex = secretChanges.findIndex(
(c) => c.type === PendingAction.Create && c.id === change.id
);
if (existingCreateIndex >= 0) {
const existingCreate = secretChanges[existingCreateIndex] as PendingSecretCreate;
secretChanges[existingCreateIndex] = {
...existingCreate,
secretKey: change.newSecretName || change.secretKey || existingCreate.secretKey,
secretValue:
change.secretValue !== undefined
? change.secretValue
: existingCreate.secretValue,
secretComment:
change.secretComment !== undefined
? change.secretComment
: existingCreate.secretComment,
skipMultilineEncoding:
change.skipMultilineEncoding !== undefined
? change.skipMultilineEncoding
: existingCreate.skipMultilineEncoding,
tags: change.tags !== undefined ? change.tags : existingCreate.tags,
secretMetadata:
change.secretMetadata !== undefined
? change.secretMetadata
: existingCreate.secretMetadata,
timestamp: Date.now()
};
} else {
const existingUpdateIndex = secretChanges.findIndex(
(c) => c.type === PendingAction.Update && c.id === change.id
);
if (existingUpdateIndex >= 0) {
const existingUpdate = secretChanges[existingUpdateIndex] as PendingSecretUpdate;
const improvedUpdate: PendingSecretUpdate = {
...existingUpdate,
secretKey: existingUpdate.secretKey,
originalValue: existingUpdate.originalValue,
originalComment: existingUpdate.originalComment,
originalSkipMultilineEncoding: existingUpdate.originalSkipMultilineEncoding,
originalTags: existingUpdate.originalTags,
originalSecretMetadata: existingUpdate.originalSecretMetadata,
newSecretName:
change.newSecretName !== undefined
? change.newSecretName
: existingUpdate.newSecretName,
secretValue:
change.secretValue !== undefined
? change.secretValue
: existingUpdate.secretValue,
secretComment:
change.secretComment !== undefined
? change.secretComment
: existingUpdate.secretComment,
skipMultilineEncoding:
change.skipMultilineEncoding !== undefined
? change.skipMultilineEncoding
: existingUpdate.skipMultilineEncoding,
tags: change.tags !== undefined ? change.tags : existingUpdate.tags,
secretMetadata:
change.secretMetadata !== undefined
? change.secretMetadata
: existingUpdate.secretMetadata,
timestamp: Date.now()
};
const cleanedUpdate = cleanupRevertedFields(improvedUpdate);
secretChanges[existingUpdateIndex] = cleanedUpdate;
} else {
secretChanges.push(change);
}
}
} else {
secretChanges.push(change);
}
newChanges.secrets = secretChanges;
} else if (change.resourceType === "folder") {
const folderChanges = [...newChanges.folders];
if (change.type === PendingAction.Create) {
const existingCreateIndex = folderChanges.findIndex(
(c) => c.type === PendingAction.Create && c.folderName === change.folderName
);
if (existingCreateIndex >= 0) {
folderChanges[existingCreateIndex] = {
...folderChanges[existingCreateIndex],
...change,
timestamp: Date.now()
};
} else {
folderChanges.push(change);
}
} else if (change.type === PendingAction.Update) {
const existingCreateIndex = folderChanges.findIndex(
(c) => c.type === PendingAction.Create && c.folderName === change.originalFolderName
);
if (existingCreateIndex >= 0) {
const existingCreate = folderChanges[existingCreateIndex] as PendingFolderCreate;
folderChanges[existingCreateIndex] = {
...existingCreate,
folderName: change.folderName || existingCreate.folderName,
description:
change.description !== undefined
? change.description
: existingCreate.description,
timestamp: Date.now()
};
} else {
const existingUpdateIndex = folderChanges.findIndex(
(c) => c.type === PendingAction.Update && c.id === change.id
);
if (existingUpdateIndex >= 0) {
const existingUpdate = folderChanges[existingUpdateIndex] as PendingFolderUpdate;
folderChanges[existingUpdateIndex] = {
...existingUpdate,
originalFolderName: existingUpdate.originalFolderName,
originalDescription: existingUpdate.originalDescription,
folderName:
change.folderName !== undefined ? change.folderName : existingUpdate.folderName,
description:
change.description !== undefined
? change.description
: existingUpdate.description,
timestamp: Date.now()
};
} else {
folderChanges.push(change);
}
}
} else {
folderChanges.push(change);
}
newChanges.folders = folderChanges;
}
savePendingChangesToStorage(
newChanges,
context.workspaceId,
context.environment,
context.secretPath
);
return { pendingChanges: newChanges };
}),
removePendingChange: (changeId: string, resourceType: string, context: BatchContext) =>
set((state) => {
const newChanges = { ...state.pendingChanges };
if (resourceType === "secret") {
newChanges.secrets = newChanges.secrets.filter((c) => c.id !== changeId);
} else if (resourceType === "folder") {
newChanges.folders = newChanges.folders.filter((c) => c.id !== changeId);
}
savePendingChangesToStorage(
newChanges,
context.workspaceId,
context.environment,
context.secretPath
);
return { pendingChanges: newChanges };
}),
loadPendingChanges: (context) => {
const changes = loadPendingChangesFromStorage(
context.workspaceId,
context.environment,
context.secretPath
);
set({ pendingChanges: changes });
},
clearAllPendingChanges: (context) => {
clearPendingChangesFromStorage(context.workspaceId, context.environment, context.secretPath);
set({
pendingChanges: { secrets: [], folders: [] }
});
},
setExistingKeys: (secretKeys, folderNames) =>
set({
existingSecretKeys: new Set(secretKeys),
existingFolderNames: new Set(folderNames)
}),
getTotalPendingChangesCount: () => {
const state = get();
return state.pendingChanges.secrets.length + state.pendingChanges.folders.length;
}
}
});
export enum PopUpNames {
CreateSecretForm = "create-secret-form"
}
@ -58,13 +542,14 @@ const createPopUpStore: StateCreator<PopUpState> = (set) => ({
}
});
type CombinedState = SelectedSecretState & PopUpState;
type CombinedState = SelectedSecretState & PopUpState & BatchModeState;
const StoreContext = createContext<StoreApi<CombinedState> | null>(null);
export const StoreProvider = ({ children }: { children: ReactNode }) => {
const storeRef = useRef<StoreApi<CombinedState>>(
createStore<CombinedState>((...a) => ({
...createSelectedSecretStore(...a),
...createPopUpStore(...a)
...createPopUpStore(...a),
...createBatchModeStore(...a)
}))
);
const router = useRouter();
@ -99,3 +584,17 @@ export const useSelectedSecretActions = () => useStoreContext(useShallow((state)
export const usePopUpState = (id: PopUpNames) =>
useStoreContext(useShallow((state) => state.popUp?.[id] || { isOpen: false }));
export const usePopUpAction = () => useStoreContext(useShallow((state) => state.popUpActions));
export const useBatchMode = () =>
useStoreContext(
useShallow((state) => ({
isBatchMode: state.isBatchMode,
pendingChanges: state.pendingChanges,
currentContext: state.currentContext,
totalChangesCount: state.batchActions.getTotalPendingChangesCount(),
secretChangesCount: state.pendingChanges.secrets.length,
folderChangesCount: state.pendingChanges.folders.length
}))
);
export const useBatchModeActions = () => useStoreContext(useShallow((state) => state.batchActions));

View File

@ -74,12 +74,15 @@ import {
} from "@app/hooks/api/dashboard/queries";
import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import { fetchProjectSecrets, secretKeys } from "@app/hooks/api/secrets/queries";
import { ApiErrorTypes, SecretType, TApiErrors, WsTag } from "@app/hooks/api/types";
import { SecretSearchInput } from "@app/pages/secret-manager/OverviewPage/components/SecretSearchInput";
import {
PendingFolderCreate,
PopUpNames,
useBatchModeActions,
usePopUpAction,
useSelectedSecretActions,
useSelectedSecrets
@ -109,6 +112,7 @@ type Props = {
filter: Filter;
tags?: WsTag[];
isVisible?: boolean;
isBatchMode?: boolean;
snapshotCount: number;
isSnapshotCountLoading?: boolean;
protectedBranchPolicyName?: string;
@ -137,6 +141,7 @@ export const ActionBar = ({
filter,
tags = [],
isVisible,
isBatchMode,
snapshotCount,
isSnapshotCountLoading,
onSearchChange,
@ -174,6 +179,7 @@ export const ActionBar = ({
options: { onSuccess: undefined }
});
const queryClient = useQueryClient();
const { addPendingChange } = useBatchModeActions();
const selectedSecrets = useSelectedSecrets();
const { reset: resetSelectedSecret } = useSelectedSecretActions();
@ -183,6 +189,28 @@ export const ActionBar = ({
const handleFolderCreate = async (folderName: string, description: string | null) => {
try {
if (isBatchMode) {
const folderId = `${folderName}`;
const pendingFolderCreate: PendingFolderCreate = {
id: folderId,
resourceType: "folder",
type: PendingAction.Create,
folderName,
description: description || undefined,
parentPath: secretPath,
timestamp: Date.now()
};
addPendingChange(pendingFolderCreate, {
workspaceId,
environment,
secretPath
});
handlePopUpClose("addFolder");
return;
}
await createFolder({
name: folderName,
path: secretPath,

View File

@ -8,7 +8,12 @@ import { TextArea } from "@app/components/v2/TextArea/TextArea";
type Props = {
onCreateFolder?: (folderName: string, description: string | null) => Promise<void>;
onUpdateFolder?: (folderName: string, description: string | null) => Promise<void>;
onUpdateFolder?: (
folderName: string,
description: string | null,
oldFolderName?: string,
oldFolderDescription?: string
) => Promise<void>;
isEdit?: boolean;
defaultFolderName?: string;
defaultDescription?: string;
@ -69,7 +74,7 @@ export const FolderForm = ({
const descriptionShaped = description && description.trim() !== "" ? description : null;
if (isEdit) {
await onUpdateFolder?.(name, descriptionShaped);
await onUpdateFolder?.(name, descriptionShaped, defaultFolderName, defaultDescription);
} else {
await onCreateFolder?.(name, descriptionShaped);
}

View File

@ -0,0 +1,567 @@
/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useState } from "react";
import { faCodeCommit, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
Badge,
Button,
FontAwesomeSymbol,
IconButton,
Input,
Modal,
ModalContent
} from "@app/components/v2";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import {
PendingChange,
PendingChanges,
useBatchMode,
useBatchModeActions
} from "../../SecretMainPage.store";
import { FontAwesomeSpriteName } from "../SecretListView/SecretListView.utils";
interface CommitFormProps {
onCommit: (changes: PendingChanges, commitMessage: string) => Promise<void>;
isCommitting?: boolean;
environment: string;
workspaceId: string;
secretPath: string;
}
interface ChangeTableProps {
change: PendingChange;
environment: string;
workspaceId: string;
secretPath: string;
}
const TagsList: React.FC<{ tags?: { id: string; slug: string }[]; className?: string }> = ({
tags,
className = ""
}) => {
if (!tags || tags.length === 0) {
return <span className={`italic text-mineshaft-400 ${className}`}>(no tags)</span>;
}
return (
<div className={`flex flex-wrap gap-1 ${className}`}>
{tags.map((tag) => (
<Badge key={tag.id} variant="primary" className="text-xs">
{tag.slug}
</Badge>
))}
</div>
);
};
const MetadataList: React.FC<{
metadata?: { key: string; value: string }[];
className?: string;
}> = ({ metadata, className = "" }) => {
if (!metadata || metadata.length === 0) {
return <span className={`italic text-mineshaft-400 ${className}`}>(no metadata)</span>;
}
return (
<div className={`space-y-1 ${className}`}>
{metadata.map((item) => (
<div key={item.key} className="flex items-center gap-2 text-xs">
<span className="font-medium text-mineshaft-300">{item.key}:</span>
<span className="font-mono text-mineshaft-100">{item.value}</span>
</div>
))}
</div>
);
};
const ComparisonTableRow: React.FC<{
label: string;
previousValue: React.ReactNode;
newValue: React.ReactNode;
hideIfSame?: boolean;
}> = ({ label, previousValue, newValue, hideIfSame = false }) => {
const isSame = hideIfSame && String(previousValue) === String(newValue);
if (isSame) return null;
return (
<tr className="border-b border-mineshaft-700 last:border-b-0">
<td className="w-24 py-3 pl-4 align-top font-medium text-mineshaft-300">{label}:</td>
<td className="w-1/2 px-3 py-3 align-top">
<div className="text-red-400 opacity-80">{previousValue}</div>
</td>
<td className="w-1/2 py-3 pr-4 align-top">
<div className="text-green-400">{newValue}</div>
</td>
</tr>
);
};
const ChangeTable: React.FC<ChangeTableProps> = ({
change,
environment,
workspaceId,
secretPath
}) => {
const getChangeBadge = (type: PendingChange["type"]) => {
switch (type) {
case PendingAction.Create:
return <Badge variant="success">Created</Badge>;
case PendingAction.Update:
return <Badge variant="primary">Updated</Badge>;
case PendingAction.Delete:
return <Badge variant="danger">Deleted</Badge>;
default:
return null;
}
};
const renderSecretChanges = () => {
if (change.resourceType !== "secret") return null;
if (change.type === PendingAction.Create) {
return (
<div className="mt-3 overflow-hidden rounded-md border border-mineshaft-700 bg-mineshaft-900">
<table className="w-full text-sm">
<tbody>
<tr className="border-b border-mineshaft-700">
<td className="w-24 py-3 pl-4 font-medium text-mineshaft-300">Key:</td>
<td className="px-3 py-3 font-mono text-mineshaft-100" colSpan={2}>
{change.secretKey}
</td>
</tr>
<tr className="border-b border-mineshaft-700">
<td className="w-24 py-3 pl-4 font-medium text-mineshaft-300">Value:</td>
<td className="px-3 py-3" colSpan={2}>
<div className="max-w-md break-all px-2 py-1 font-mono text-xs text-mineshaft-100">
{change.secretValue || (
<span className="italic text-mineshaft-400">(empty)</span>
)}
</div>
</td>
</tr>
{change.secretComment !== undefined && change.secretComment !== "" && (
<tr className="border-b border-mineshaft-700">
<td className="w-24 py-3 pl-4 font-medium text-mineshaft-300">Comment:</td>
<td className="px-3 py-3 text-mineshaft-100" colSpan={2}>
{change.secretComment}
</td>
</tr>
)}
{change.tags && change.tags.length > 0 && (
<tr className="border-b border-mineshaft-700">
<td className="w-24 py-3 pl-4 font-medium text-mineshaft-300">Tags:</td>
<td className="px-3 py-3" colSpan={2}>
<TagsList tags={change.tags} />
</td>
</tr>
)}
{change.secretMetadata && change.secretMetadata.length > 0 && (
<tr className="border-b border-mineshaft-700 last:border-b-0">
<td className="w-24 py-3 pl-4 font-medium text-mineshaft-300">Metadata:</td>
<td className="px-3 py-3" colSpan={2}>
<MetadataList metadata={change.secretMetadata} />
</td>
</tr>
)}
</tbody>
</table>
</div>
);
}
if (change.type === PendingAction.Update) {
const hasKeyChange = change.newSecretName && change.secretKey !== change.newSecretName;
const hasValueChange = change.secretValue !== change.originalValue;
const hasCommentChange = change.secretComment !== change.originalComment;
const hasMultilineChange =
change.skipMultilineEncoding !== change.originalSkipMultilineEncoding;
const hasTagsChange = JSON.stringify(change.tags) !== JSON.stringify(change.originalTags);
const hasMetadataChange =
JSON.stringify(change.secretMetadata) !== JSON.stringify(change.originalSecretMetadata);
const hasChanges = [
hasKeyChange,
hasValueChange,
hasCommentChange,
hasMultilineChange,
hasTagsChange,
hasMetadataChange
].some(Boolean);
if (!hasChanges) return null;
return (
<div className="mt-3 overflow-hidden rounded-md border border-mineshaft-700 bg-mineshaft-900">
<table className="w-full text-sm">
<tbody>
{hasKeyChange && (
<ComparisonTableRow
label="Key"
previousValue={<span className="font-mono">{change.secretKey}</span>}
newValue={<span className="font-mono">{change.newSecretName}</span>}
/>
)}
{hasValueChange && (
<ComparisonTableRow
label="Value"
previousValue={
<div className="max-w-md break-all rounded">
{change.originalValue || <span className="italic">(empty)</span>}
</div>
}
newValue={
<div className="max-w-md break-all rounded">
{change.secretValue || <span className="italic">(empty)</span>}
</div>
}
/>
)}
{hasCommentChange && (
<ComparisonTableRow
label="Comment"
previousValue={change.originalComment || <span className="italic">(empty)</span>}
newValue={change.secretComment || <span className="italic">(empty)</span>}
/>
)}
{hasMultilineChange && (
<ComparisonTableRow
label="Multiline"
previousValue={change.originalSkipMultilineEncoding ? "Enabled" : "Disabled"}
newValue={change.skipMultilineEncoding ? "Enabled" : "Disabled"}
/>
)}
{hasTagsChange && (
<ComparisonTableRow
label="Tags"
previousValue={<TagsList tags={change.originalTags} />}
newValue={<TagsList tags={change.tags} />}
/>
)}
{hasMetadataChange && (
<ComparisonTableRow
label="Metadata"
previousValue={<MetadataList metadata={change.originalSecretMetadata} />}
newValue={<MetadataList metadata={change.secretMetadata} />}
/>
)}
</tbody>
</table>
</div>
);
}
if (change.type === PendingAction.Delete) {
return (
<div className="mt-3 overflow-hidden rounded-md border border-mineshaft-700 bg-mineshaft-900">
<table className="w-full text-sm">
<tbody>
<tr className="border-b border-mineshaft-700">
<td className="w-24 py-3 pl-4 font-medium text-red-400">Key:</td>
<td className="px-3 py-3 font-mono text-red-400 line-through" colSpan={2}>
{change.secretKey}
</td>
</tr>
</tbody>
</table>
</div>
);
}
return null;
};
const renderFolderChanges = () => {
if (change.resourceType !== "folder") return null;
if (change.type === PendingAction.Create) {
return (
<div className="mt-3 overflow-hidden rounded-md border border-mineshaft-700 bg-mineshaft-900">
<table className="w-full text-sm">
<tbody>
<tr className="border-b border-mineshaft-700">
<td className="w-24 py-3 pl-4 font-medium text-mineshaft-300">Name:</td>
<td className="px-3 py-3 font-mono text-mineshaft-100" colSpan={2}>
{change.folderName}
</td>
</tr>
{change.description !== undefined && change.description !== "" && (
<tr className="border-b border-mineshaft-700 last:border-b-0">
<td className="w-24 py-3 pl-4 font-medium text-mineshaft-300">Description:</td>
<td className="px-3 py-3 text-mineshaft-100" colSpan={2}>
{change.description}
</td>
</tr>
)}
</tbody>
</table>
</div>
);
}
if (change.type === PendingAction.Update) {
const hasNameChange = change.folderName !== change.originalFolderName;
const hasDescriptionChange = change.description !== change.originalDescription;
const hasChanges = [hasNameChange, hasDescriptionChange].some(Boolean);
if (!hasChanges) return null;
return (
<div className="mt-3 overflow-hidden rounded-md border border-mineshaft-700 bg-mineshaft-900">
<table className="w-full text-sm">
<tbody>
{hasNameChange && (
<ComparisonTableRow
label="Name"
previousValue={<span className="font-mono">{change.originalFolderName}</span>}
newValue={<span className="font-mono">{change.folderName}</span>}
/>
)}
{hasDescriptionChange && (
<ComparisonTableRow
label="Description"
previousValue={
change.originalDescription || <span className="italic">(empty)</span>
}
newValue={change.description || <span className="italic">(empty)</span>}
/>
)}
</tbody>
</table>
</div>
);
}
if (change.type === PendingAction.Delete) {
return (
<div className="mt-3 overflow-hidden rounded-md border border-mineshaft-700 bg-mineshaft-900">
<table className="w-full text-sm">
<tbody>
<tr className="border-b border-mineshaft-700">
<td className="w-24 py-3 pl-4 font-medium text-red-400">Name:</td>
<td className="px-3 py-3 font-mono text-red-400 line-through" colSpan={2}>
{change.folderName}
</td>
</tr>
</tbody>
</table>
</div>
);
}
return null;
};
const getChangeName = () => {
if (change.resourceType === "secret") {
return change.type === PendingAction.Update
? change.newSecretName || change.secretKey
: change.secretKey;
}
if (change.resourceType === "folder") {
return change.type === PendingAction.Update ? change.originalFolderName : change.folderName;
}
return "Unknown";
};
const { removePendingChange } = useBatchModeActions();
const handleDeletePending = (changeType: string, id: string) => {
removePendingChange(id, changeType, {
workspaceId,
environment,
secretPath
});
};
return (
<div className="py-2 shadow-sm">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span className="font-medium text-mineshaft-100">{getChangeName()}</span>
{getChangeBadge(change.type)}
</div>
<IconButton
ariaLabel="delete-change"
variant="plain"
colorSchema="danger"
size="sm"
onClick={() => handleDeletePending(change.resourceType, change.id)}
>
<FontAwesomeSymbol symbolName={FontAwesomeSpriteName.Close} className="h-4 w-4" />
</IconButton>
</div>
{change.resourceType === "secret" ? renderSecretChanges() : renderFolderChanges()}
</div>
);
};
export const CommitForm: React.FC<CommitFormProps> = ({
onCommit,
isCommitting = false,
environment,
workspaceId,
secretPath
}) => {
const { isBatchMode, pendingChanges, totalChangesCount } = useBatchMode();
const [isModalOpen, setIsModalOpen] = useState(false);
const [commitMessage, setCommitMessage] = useState("");
const { clearAllPendingChanges } = useBatchModeActions();
if (!isBatchMode || totalChangesCount === 0) {
return null;
}
const handleCommit = async () => {
if (!commitMessage.trim()) {
return;
}
await onCommit(pendingChanges, commitMessage);
clearAllPendingChanges({
workspaceId,
environment,
secretPath
});
setIsModalOpen(false);
setCommitMessage("");
};
return (
<>
{/* Floating Panel */}
{!isModalOpen && (
<div className="fixed bottom-4 z-40 w-80 self-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-2xl">
<div className="flex w-full justify-center border-b border-mineshaft-600 px-4 py-3">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2">
<FontAwesomeIcon icon={faCodeCommit} className="text-primary" />
<span className="font-medium text-mineshaft-100">Ready to Commit</span>
</div>
<Badge variant="primary" className="text-xs">
{totalChangesCount} change{totalChangesCount !== 1 ? "s" : ""}
</Badge>
</div>
</div>
<div className="p-3">
<Button
onClick={() => setIsModalOpen(true)}
className="w-full"
isDisabled={totalChangesCount === 0}
colorSchema="secondary"
>
Review & Commit
</Button>
</div>
</div>
)}
{/* Commit Modal */}
<Modal isOpen={isModalOpen} onOpenChange={setIsModalOpen}>
<ModalContent
title={
<div className="flex items-center gap-2">
<FontAwesomeIcon icon={faCodeCommit} className="text-primary" />
Commit Changes
<Badge variant="primary" className="ml-2">
{totalChangesCount} change{totalChangesCount !== 1 ? "s" : ""}
</Badge>
</div>
}
className="max-h-[90vh] max-w-5xl"
>
<div className="space-y-6">
<p className="text-mineshaft-300">
Write a commit message and review the changes you&apos;re about to commit.
</p>
{/* Changes List */}
<div className="space-y-6">
<div className="max-h-96 space-y-4 overflow-y-auto pr-2">
{/* Folder Changes */}
{pendingChanges.folders.length > 0 && (
<div>
<h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-semibold text-mineshaft-200">
<FontAwesomeIcon icon={faFolder} className="text-mineshaft-300" />
Folders ({pendingChanges.folders.length})
</h4>
<div className="space-y-3">
{pendingChanges.folders.map((change) => (
<ChangeTable
key={change.id}
change={change}
environment={environment}
workspaceId={workspaceId}
secretPath={secretPath}
/>
))}
</div>
</div>
)}
{/* Secret Changes */}
{pendingChanges.secrets.length > 0 && (
<div>
<h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-semibold text-mineshaft-200">
<FontAwesomeIcon icon={faKey} className="text-mineshaft-300" />
Secrets ({pendingChanges.secrets.length})
</h4>
<div className="space-y-3">
{pendingChanges.secrets.map((change) => (
<ChangeTable
key={change.id}
change={change}
environment={environment}
workspaceId={workspaceId}
secretPath={secretPath}
/>
))}
</div>
</div>
)}
</div>
</div>
{/* Commit Message */}
<div>
<label className="mb-2 block text-sm font-medium text-mineshaft-200">
Commit Message <span className="text-red-400">*</span>
</label>
<Input
value={commitMessage}
onChange={(e) => setCommitMessage(e.target.value)}
placeholder="Describe your changes..."
className="w-full"
required
/>
</div>
{/* Action Buttons */}
<div className="flex justify-end gap-3 border-t border-mineshaft-600 pt-4">
<Button
variant="outline_bg"
onClick={() => setIsModalOpen(false)}
isDisabled={isCommitting}
>
Cancel
</Button>
<Button
onClick={handleCommit}
isLoading={isCommitting}
isDisabled={isCommitting || !commitMessage.trim()}
leftIcon={<FontAwesomeIcon icon={faCodeCommit} />}
colorSchema="primary"
>
{isCommitting ? "Committing..." : "Commit Changes"}
</Button>
</div>
</div>
</ModalContent>
</Modal>
</>
);
};

View File

@ -0,0 +1 @@
export { CommitForm } from "./CommitForm";

View File

@ -12,9 +12,15 @@ import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
import { getKeyValue } from "@app/helpers/parseEnvVar";
import { useCreateSecretV3, useCreateWsTag, useGetWsTags } from "@app/hooks/api";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import { SecretType } from "@app/hooks/api/types";
import { PopUpNames, usePopUpAction } from "../../SecretMainPage.store";
import {
PendingSecretCreate,
PopUpNames,
useBatchModeActions,
usePopUpAction
} from "../../SecretMainPage.store";
const typeSchema = z.object({
key: z.string().trim().min(1, { message: "Secret key is required" }),
@ -31,6 +37,7 @@ type Props = {
// modal props
autoCapitalize?: boolean;
isProtectedBranch?: boolean;
isBatchMode?: boolean;
};
export const CreateSecretForm = ({
@ -38,7 +45,8 @@ export const CreateSecretForm = ({
workspaceId,
secretPath = "/",
autoCapitalize = true,
isProtectedBranch = false
isProtectedBranch = false,
isBatchMode = false
}: Props) => {
const {
register,
@ -53,6 +61,7 @@ export const CreateSecretForm = ({
const { mutateAsync: createSecretV3 } = useCreateSecretV3();
const createWsTag = useCreateWsTag();
const { addPendingChange } = useBatchModeActions();
const { permission } = useProjectPermission();
const canReadTags = permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags);
@ -85,6 +94,26 @@ export const CreateSecretForm = ({
const handleFormSubmit = async ({ key, value, tags }: TFormSchema) => {
try {
if (isBatchMode) {
const pendingSecretCreate: PendingSecretCreate = {
id: key,
type: PendingAction.Create,
secretKey: key,
secretValue: value || "",
secretComment: "",
tags: tags?.map((el) => ({ id: el.value, slug: el.label })),
timestamp: Date.now(),
resourceType: "secret"
};
addPendingChange(pendingSecretCreate, {
workspaceId,
environment,
secretPath
});
closePopUp(PopUpNames.CreateSecretForm);
reset();
return;
}
await createSecretV3({
environment,
workspaceId,

View File

@ -2,6 +2,7 @@ import { subject } from "@casl/ability";
import { faClose, faFolder, faInfoCircle, faPencilSquare } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useNavigate, useSearch } from "@tanstack/react-router";
import { twMerge } from "tailwind-merge";
import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions";
@ -11,8 +12,15 @@ import { ROUTE_PATHS } from "@app/const/routes";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { usePopUp } from "@app/hooks";
import { useDeleteFolder, useUpdateFolder } from "@app/hooks/api";
import { TSecretFolder } from "@app/hooks/api/secretFolders/types";
import { PendingAction, TSecretFolder } from "@app/hooks/api/secretFolders/types";
import {
PendingFolderCreate,
PendingFolderDelete,
PendingFolderUpdate,
useBatchMode,
useBatchModeActions
} from "../../SecretMainPage.store";
import { FolderForm } from "../ActionBar/FolderForm";
type Props = {
@ -42,10 +50,62 @@ export const FolderListView = ({
const { mutateAsync: updateFolder } = useUpdateFolder();
const { mutateAsync: deleteFolder } = useDeleteFolder();
const { isBatchMode } = useBatchMode();
const { addPendingChange, removePendingChange } = useBatchModeActions();
const handleFolderUpdate = async (newFolderName: string, newFolderDescription: string | null) => {
const handleFolderUpdate = async (
newFolderName: string,
newFolderDescription: string | null,
oldFolderName?: string,
oldFolderDescription?: string
) => {
try {
const { id: folderId } = popUp.updateFolder.data as TSecretFolder;
const updateFolderData = popUp.updateFolder.data;
if (!updateFolderData) throw new Error("Update folder data is required");
const { id: folderId, pendingAction, isPending } = updateFolderData as TSecretFolder;
if (isBatchMode) {
const isEditingPendingCreation = isPending && pendingAction === PendingAction.Create;
if (isEditingPendingCreation) {
const updatedCreate: PendingFolderCreate = {
id: folderId,
type: PendingAction.Create,
folderName: newFolderName,
description: newFolderDescription || undefined,
parentPath: secretPath,
timestamp: Date.now(),
resourceType: "folder"
};
addPendingChange(updatedCreate, {
workspaceId,
environment,
secretPath
});
} else {
const updateChange: PendingFolderUpdate = {
id: folderId,
type: PendingAction.Update,
originalFolderName: oldFolderName || "",
folderName: newFolderName,
originalDescription: oldFolderDescription,
description: newFolderDescription || undefined,
timestamp: Date.now(),
resourceType: "folder"
};
addPendingChange(updateChange, {
workspaceId,
environment,
secretPath
});
}
handlePopUpClose("updateFolder");
return;
}
await updateFolder({
folderId,
name: newFolderName,
@ -68,15 +128,45 @@ export const FolderListView = ({
}
};
const handleDeletePending = (id: string) => {
removePendingChange(id, "folder", {
workspaceId,
environment,
secretPath
});
};
const handleFolderDelete = async () => {
try {
const { id: folderId } = popUp.deleteFolder.data as TSecretFolder;
const folderData = popUp.deleteFolder?.data as TSecretFolder;
if (isBatchMode) {
const pendingFolderDelete: PendingFolderDelete = {
id: folderData.id,
folderName: folderData.name,
folderPath: secretPath,
resourceType: "folder",
type: PendingAction.Delete,
timestamp: Date.now()
};
addPendingChange(pendingFolderDelete, {
workspaceId,
environment,
secretPath
});
handlePopUpClose("deleteFolder");
return;
}
await deleteFolder({
folderId,
folderId: folderData.id,
path: secretPath,
environment,
projectId: workspaceId
});
handlePopUpClose("deleteFolder");
createNotification({
type: "success",
@ -91,7 +181,10 @@ export const FolderListView = ({
}
};
const handleFolderClick = (name: string) => {
const handleFolderClick = (name: string, isPending?: boolean) => {
if (isPending) {
return;
}
const path = `${secretPathQueryparam === "/" ? "" : secretPathQueryparam}/${name}`;
navigate({
search: (el) => ({ ...el, secretPath: path })
@ -100,10 +193,16 @@ export const FolderListView = ({
return (
<>
{folders.map(({ name, id, description }) => (
{folders.map(({ name, id, description, pendingAction, isPending }) => (
<div
key={id}
className="group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
className={twMerge(
"group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700",
isPending && "bg-mineshaft-700/60",
pendingAction === PendingAction.Delete && "border-l-2 border-l-red-600/75",
pendingAction === PendingAction.Update && "border-l-2 border-l-yellow-600/75",
pendingAction === PendingAction.Create && "border-l-2 border-l-green-600/75"
)}
>
<div className="flex w-11 items-center px-5 py-3 text-yellow-700">
<FontAwesomeIcon icon={faFolder} />
@ -113,9 +212,9 @@ export const FolderListView = ({
role="button"
tabIndex={0}
onKeyDown={(evt) => {
if (evt.key === "Enter") handleFolderClick(name);
if (evt.key === "Enter") handleFolderClick(name, isPending);
}}
onClick={() => handleFolderClick(name)}
onClick={() => handleFolderClick(name, isPending)}
>
{name}
{description && (
@ -128,46 +227,71 @@ export const FolderListView = ({
</Tooltip>
)}
</div>
<div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.SecretFolders, { environment, secretPath })}
renderTooltip
allowedLabel="Edit"
>
{(isAllowed) => (
<IconButton
ariaLabel="edit-folder"
variant="plain"
size="sm"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => handlePopUpOpen("updateFolder", { id, name, description })}
isDisabled={!isAllowed}
>
<FontAwesomeIcon icon={faPencilSquare} size="lg" />
</IconButton>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
a={subject(ProjectPermissionSub.SecretFolders, { environment, secretPath })}
renderTooltip
allowedLabel="Delete"
>
{(isAllowed) => (
<IconButton
ariaLabel="delete-folder"
variant="plain"
size="md"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => handlePopUpOpen("deleteFolder", { id, name })}
isDisabled={!isAllowed}
>
<FontAwesomeIcon icon={faClose} size="lg" />
</IconButton>
)}
</ProjectPermissionCan>
</div>
{isPending ? (
<div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
<IconButton
ariaLabel="edit-folder"
variant="plain"
size="sm"
className="p-0 opacity-0 group-hover:opacity-100"
isDisabled
onClick={() => {}}
>
<FontAwesomeIcon icon={faPencilSquare} size="lg" />
</IconButton>
<IconButton
ariaLabel="delete-folder"
variant="plain"
size="md"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => handleDeletePending(id)}
>
<FontAwesomeIcon icon={faClose} size="lg" />
</IconButton>
</div>
) : (
<div className="flex items-center space-x-4 border-l border-mineshaft-600 px-3 py-3">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.SecretFolders, { environment, secretPath })}
renderTooltip
allowedLabel="Edit"
>
{(isAllowed) => (
<IconButton
ariaLabel="edit-folder"
variant="plain"
size="sm"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => handlePopUpOpen("updateFolder", { id, name, description })}
isDisabled={!isAllowed}
>
<FontAwesomeIcon icon={faPencilSquare} size="lg" />
</IconButton>
)}
</ProjectPermissionCan>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
a={subject(ProjectPermissionSub.SecretFolders, { environment, secretPath })}
renderTooltip
allowedLabel="Delete"
>
{(isAllowed) => (
<IconButton
ariaLabel="delete-folder"
variant="plain"
size="md"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => handlePopUpOpen("deleteFolder", { id, name })}
isDisabled={!isAllowed}
>
<FontAwesomeIcon icon={faClose} size="lg" />
</IconButton>
)}
</ProjectPermissionCan>
</div>
)}
</div>
))}
<Modal

View File

@ -50,6 +50,7 @@ import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionCo
import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEyeSlash, faKey, faRotate } from "@fortawesome/free-solid-svg-icons";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import {
FontAwesomeSpriteName,
formSchema,
@ -57,6 +58,7 @@ import {
TFormSchema
} from "./SecretListView.utils";
import { CollapsibleSecretImports } from "./CollapsibleSecretImports";
import { useBatchModeActions } from "../../SecretMainPage.store";
export const HIDDEN_SECRET_VALUE = "******";
export const HIDDEN_SECRET_VALUE_API_MASK = "<hidden-by-infisical>";
@ -86,6 +88,8 @@ type Props = {
isImported: boolean;
}[];
}[];
isPending?: boolean;
pendingAction?: PendingAction;
};
export const SecretItem = memo(
@ -102,7 +106,9 @@ export const SecretItem = memo(
environment,
secretPath,
handleSecretShare,
importedBy
importedBy,
isPending,
pendingAction
}: Props) => {
const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
"editSecret"
@ -110,6 +116,15 @@ export const SecretItem = memo(
const { currentWorkspace } = useWorkspace();
const { permission } = useProjectPermission();
const { isRotatedSecret } = secret;
const { removePendingChange } = useBatchModeActions();
const handleDeletePending = (pendingSecret: SecretV3RawSanitized) => {
removePendingChange(pendingSecret.id, "secret", {
workspaceId: currentWorkspace.id,
environment,
secretPath
});
};
const canEditSecretValue = permission.can(
ProjectPermissionSecretActions.Edit,
@ -187,6 +202,8 @@ export const SecretItem = memo(
secretTags: selectedTagSlugs
})
);
const isReadOnlySecret =
isReadOnly || isRotatedSecret || (isPending && pendingAction !== PendingAction.Update);
const { secretValueHidden } = secret;
@ -273,14 +290,19 @@ export const SecretItem = memo(
className={twMerge(
"border-b border-mineshaft-600 bg-mineshaft-800 shadow-none hover:bg-mineshaft-700",
isDirty && "border-primary-400/50",
isRotatedSecret && "bg-mineshaft-700/60"
isRotatedSecret && "bg-mineshaft-700/60",
isPending && "bg-mineshaft-700/60",
pendingAction === PendingAction.Delete && "border-l-2 border-l-red-600/75",
pendingAction === PendingAction.Update && "border-l-2 border-l-yellow-600/75",
pendingAction === PendingAction.Create && "border-l-2 border-l-green-600/75"
)}
>
<div className="group flex">
<div
className={twMerge(
"flex h-11 w-11 items-center justify-center px-4 py-3 text-mineshaft-300",
isDirty && "text-primary"
isDirty && "text-primary",
isPending && "ml-[-2px]"
)}
>
{secret.isRotatedSecret ? (
@ -364,7 +386,7 @@ export const SecretItem = memo(
control={control}
render={({ field }) => (
<InfisicalSecretInput
isReadOnly={isReadOnly || isRotatedSecret}
isReadOnly={isReadOnlySecret}
key="secret-value"
isVisible={isVisible && !secretValueHidden}
canEditButNotView={secretValueHidden && !isOverriden}
@ -377,275 +399,161 @@ export const SecretItem = memo(
)}
/>
)}
<div
key="actions"
className="flex h-full flex-shrink-0 self-start transition-all group-hover:gap-x-2"
>
<Tooltip content="Copy secret">
<IconButton
isDisabled={secret.secretValueHidden}
ariaLabel="copy-value"
variant="plain"
size="sm"
className="w-0 overflow-hidden p-0 group-hover:w-5"
onClick={copyTokenToClipboard}
>
<FontAwesomeSymbol
className="h-3.5 w-3"
symbolName={
isSecValueCopied
? FontAwesomeSpriteName.Check
: FontAwesomeSpriteName.ClipboardCopy
}
/>
</IconButton>
</Tooltip>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
{/* Only allow to open the side panel if the secret is not in a pending create or delete state */}
{pendingAction !== PendingAction.Create && pendingAction !== PendingAction.Delete && (
<div
key="actions"
className="flex h-full flex-shrink-0 self-start transition-all group-hover:gap-x-2"
>
{(isAllowed) => (
<Modal>
<ModalTrigger asChild>
<IconButton
className="w-0 overflow-hidden p-0 group-hover:w-5"
variant="plain"
size="md"
ariaLabel="reference-tree"
isDisabled={!isAllowed || !hasSecretReference(secret?.value)}
>
<Tooltip
content={
hasSecretReference(secret?.value)
? "Secret Reference Tree"
: "Secret does not contain references"
}
>
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.SecretReferenceTree}
/>
</Tooltip>
</IconButton>
</ModalTrigger>
<ModalContent
title="Secret Reference Details"
subTitle="Visual breakdown of secrets referenced by this secret."
onOpenAutoFocus={(e) => e.preventDefault()} // prevents secret input from displaying value on open
>
<SecretReferenceTree
secretPath={secretPath}
environment={environment}
secretKey={secret?.key}
/>
</ModalContent>
</Modal>
)}
</ProjectPermissionCan>
<DropdownMenu>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
>
{(isAllowed) => (
<DropdownMenuTrigger asChild disabled={!isAllowed}>
<IconButton
ariaLabel="tags"
variant="plain"
size="sm"
className={twMerge(
"w-0 overflow-hidden p-0 group-hover:w-5 data-[state=open]:w-5",
hasTagsApplied && "w-5 text-primary"
)}
isDisabled={!isAllowed}
>
<Tooltip content="Tags">
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.Tags}
/>
</Tooltip>
</IconButton>
</DropdownMenuTrigger>
)}
</ProjectPermissionCan>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
{tags.map((tag) => {
const { id: tagId, slug, color } = tag;
const isTagSelected = selectedTagsGroupById?.[tagId];
return (
<DropdownMenuItem
onClick={() => handleTagSelect(tag)}
key={`${secret.id}-${tagId}`}
icon={
isTagSelected && (
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.CheckedCircle}
className="h-3 w-3"
/>
)
}
iconPos="right"
>
<div className="flex items-center">
<div
className="mr-2 h-2 w-2 rounded-full"
style={{ background: color || "#bec2c8" }}
/>
{slug}
</div>
</DropdownMenuItem>
);
})}
<DropdownMenuItem className="px-1.5" asChild>
<Button
size="xs"
className="w-full"
colorSchema="primary"
variant="outline_bg"
leftIcon={
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.Tags}
className="h-3 w-3"
/>
}
onClick={onCreateTag}
>
Create a tag
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
renderTooltip
allowedLabel="Override"
>
{(isAllowed) => (
<Tooltip content="Copy secret">
<IconButton
ariaLabel="override-value"
isDisabled={!isAllowed}
isDisabled={secret.secretValueHidden}
ariaLabel="copy-value"
variant="plain"
size="sm"
onClick={handleOverrideClick}
className={twMerge(
"w-0 overflow-hidden p-0 group-hover:w-5",
isOverriden && "w-5 text-primary"
)}
className="w-0 overflow-hidden p-0 group-hover:w-5"
onClick={copyTokenToClipboard}
>
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.Override}
className="h-3.5 w-3.5"
/>
</IconButton>
)}
</ProjectPermissionCan>
<Popover>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
>
{(isAllowed) => (
<PopoverTrigger asChild disabled={!isAllowed}>
<IconButton
className={twMerge(
"w-0 overflow-hidden p-0 group-hover:w-5",
hasComment && "w-5 text-primary"
)}
variant="plain"
size="md"
ariaLabel="add-comment"
isDisabled={!isAllowed}
>
<Tooltip content="Comment">
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.Comment}
/>
</Tooltip>
</IconButton>
</PopoverTrigger>
)}
</ProjectPermissionCan>
<IconButton
isDisabled={secret.secretValueHidden || !currentWorkspace.secretSharing}
className="w-0 overflow-hidden p-0 group-hover:w-5"
variant="plain"
size="md"
ariaLabel="share-secret"
onClick={handleSecretShare}
>
<Tooltip content="Share Secret">
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.ShareSecret}
/>
</Tooltip>
</IconButton>
<PopoverContent
className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
sticky="always"
>
<FormControl label="Comment" className="mb-0">
<TextArea
className="border border-mineshaft-600 text-sm"
rows={8}
cols={30}
{...register("comment")}
/>
</FormControl>
</PopoverContent>
</Popover>
</div>
</div>
<AnimatePresence mode="wait">
{!isDirty ? (
<motion.div
key="options"
className="flex h-10 flex-shrink-0 items-center space-x-4 px-[0.64rem]"
initial={{ x: 0, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }}
>
<Tooltip content="More">
<IconButton
ariaLabel="more"
variant="plain"
size="md"
className="h-5 w-4 p-0 opacity-0 group-hover:opacity-100"
onClick={() => onDetailViewSecret(secret)}
>
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.More}
className="h-5 w-4"
className="h-3.5 w-3"
symbolName={
isSecValueCopied
? FontAwesomeSpriteName.Check
: FontAwesomeSpriteName.ClipboardCopy
}
/>
</IconButton>
</Tooltip>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
>
{(isAllowed) => (
<Modal>
<ModalTrigger asChild>
<IconButton
className="w-0 overflow-hidden p-0 group-hover:w-5"
variant="plain"
size="md"
ariaLabel="reference-tree"
isDisabled={!isAllowed || !hasSecretReference(secret?.value)}
>
<Tooltip
content={
hasSecretReference(secret?.value)
? "Secret Reference Tree"
: "Secret does not contain references"
}
>
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.SecretReferenceTree}
/>
</Tooltip>
</IconButton>
</ModalTrigger>
<ModalContent
title="Secret Reference Details"
subTitle="Visual breakdown of secrets referenced by this secret."
onOpenAutoFocus={(e) => e.preventDefault()} // prevents secret input from displaying value on open
>
<SecretReferenceTree
secretPath={secretPath}
environment={environment}
secretKey={secret?.key}
/>
</ModalContent>
</Modal>
)}
</ProjectPermissionCan>
<DropdownMenu>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
>
{(isAllowed) => (
<DropdownMenuTrigger asChild disabled={!isAllowed}>
<IconButton
ariaLabel="tags"
variant="plain"
size="sm"
className={twMerge(
"w-0 overflow-hidden p-0 group-hover:w-5 data-[state=open]:w-5",
hasTagsApplied && "w-5 text-primary"
)}
isDisabled={!isAllowed}
>
<Tooltip content="Tags">
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.Tags}
/>
</Tooltip>
</IconButton>
</DropdownMenuTrigger>
)}
</ProjectPermissionCan>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
{tags.map((tag) => {
const { id: tagId, slug, color } = tag;
const isTagSelected = selectedTagsGroupById?.[tagId];
return (
<DropdownMenuItem
onClick={() => handleTagSelect(tag)}
key={`${secret.id}-${tagId}`}
icon={
isTagSelected && (
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.CheckedCircle}
className="h-3 w-3"
/>
)
}
iconPos="right"
>
<div className="flex items-center">
<div
className="mr-2 h-2 w-2 rounded-full"
style={{ background: color || "#bec2c8" }}
/>
{slug}
</div>
</DropdownMenuItem>
);
})}
<DropdownMenuItem className="px-1.5" asChild>
<Button
size="xs"
className="w-full"
colorSchema="primary"
variant="outline_bg"
leftIcon={
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.Tags}
className="h-3 w-3"
/>
}
onClick={onCreateTag}
>
Create a tag
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
@ -653,26 +561,183 @@ export const SecretItem = memo(
secretTags: selectedTagSlugs
})}
renderTooltip
allowedLabel={isRotatedSecret ? "Cannot Delete Rotated Secret" : "Delete"} // just using label for isRotatedSecret, disabled below
allowedLabel="Override"
>
{(isAllowed) => (
<IconButton
ariaLabel="delete-value"
ariaLabel="override-value"
isDisabled={!isAllowed}
variant="plain"
colorSchema="danger"
size="md"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => onDeleteSecret(secret)}
isDisabled={!isAllowed || isRotatedSecret}
size="sm"
onClick={handleOverrideClick}
className={twMerge(
"w-0 overflow-hidden p-0 group-hover:w-5",
isOverriden && "w-5 text-primary"
)}
>
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.Close}
className="h-5 w-4"
symbolName={FontAwesomeSpriteName.Override}
className="h-3.5 w-3.5"
/>
</IconButton>
)}
</ProjectPermissionCan>
</motion.div>
<Popover>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
>
{(isAllowed) => (
<PopoverTrigger asChild disabled={!isAllowed}>
<IconButton
className={twMerge(
"w-0 overflow-hidden p-0 group-hover:w-5",
hasComment && "w-5 text-primary"
)}
variant="plain"
size="md"
ariaLabel="add-comment"
isDisabled={!isAllowed}
>
<Tooltip content="Comment">
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.Comment}
/>
</Tooltip>
</IconButton>
</PopoverTrigger>
)}
</ProjectPermissionCan>
<IconButton
isDisabled={secret.secretValueHidden || !currentWorkspace.secretSharing}
className="w-0 overflow-hidden p-0 group-hover:w-5"
variant="plain"
size="md"
ariaLabel="share-secret"
onClick={handleSecretShare}
>
<Tooltip content="Share Secret">
<FontAwesomeSymbol
className="h-3.5 w-3.5"
symbolName={FontAwesomeSpriteName.ShareSecret}
/>
</Tooltip>
</IconButton>
<PopoverContent
className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
sticky="always"
>
<FormControl label="Comment" className="mb-0">
<TextArea
className="border border-mineshaft-600 text-sm"
rows={8}
cols={30}
{...register("comment")}
/>
</FormControl>
</PopoverContent>
</Popover>
</div>
)}
</div>
<AnimatePresence mode="wait">
{!isDirty ? (
isPending ? (
<motion.div
key="options"
className="flex h-10 flex-shrink-0 items-center space-x-4 px-[0.64rem]"
initial={{ x: 0, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }}
>
<Tooltip content="More">
<IconButton
ariaLabel="more"
variant="plain"
size="md"
className="h-5 w-4 p-0 opacity-0 group-hover:opacity-100"
onClick={() => onDetailViewSecret(secret)}
isDisabled={pendingAction !== "update"}
>
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.More}
className="h-5 w-4"
/>
</IconButton>
</Tooltip>
<IconButton
ariaLabel="delete-value"
variant="plain"
colorSchema="danger"
size="md"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => handleDeletePending(secret)}
>
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.Close}
className="h-5 w-4"
/>
</IconButton>
</motion.div>
) : (
<motion.div
key="options"
className="flex h-10 flex-shrink-0 items-center space-x-4 px-[0.64rem]"
initial={{ x: 0, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }}
>
<Tooltip content="More">
<IconButton
ariaLabel="more"
variant="plain"
size="md"
className="h-5 w-4 p-0 opacity-0 group-hover:opacity-100"
onClick={() => onDetailViewSecret(secret)}
>
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.More}
className="h-5 w-4"
/>
</IconButton>
</Tooltip>
<ProjectPermissionCan
I={ProjectPermissionActions.Delete}
a={subject(ProjectPermissionSub.Secrets, {
environment,
secretPath,
secretName,
secretTags: selectedTagSlugs
})}
renderTooltip
allowedLabel={isRotatedSecret ? "Cannot Delete Rotated Secret" : "Delete"} // just using label for isRotatedSecret, disabled below
>
{(isAllowed) => (
<IconButton
ariaLabel="delete-value"
variant="plain"
colorSchema="danger"
size="md"
className="p-0 opacity-0 group-hover:opacity-100"
onClick={() => onDeleteSecret(secret)}
isDisabled={!isAllowed || isRotatedSecret}
>
<FontAwesomeSymbol
symbolName={FontAwesomeSpriteName.Close}
className="h-5 w-4"
/>
</IconButton>
)}
</ProjectPermissionCan>
</motion.div>
)
) : (
<motion.div
key="options-save"

View File

@ -11,13 +11,23 @@ import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
import { commitKeys } from "@app/hooks/api/folderCommits/queries";
import { secretApprovalRequestKeys } from "@app/hooks/api/secretApprovalRequest/queries";
import { PendingAction } from "@app/hooks/api/secretFolders/types";
import { secretKeys } from "@app/hooks/api/secrets/queries";
import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
import { secretSnapshotKeys } from "@app/hooks/api/secretSnapshots/queries";
import { WsTag } from "@app/hooks/api/types";
import { AddShareSecretModal } from "@app/pages/organization/SecretSharingPage/components/ShareSecret/AddShareSecretModal";
import { useSelectedSecretActions, useSelectedSecrets } from "../../SecretMainPage.store";
import {
PendingSecretChange,
PendingSecretCreate,
PendingSecretDelete,
PendingSecretUpdate,
useBatchMode,
useBatchModeActions,
useSelectedSecretActions,
useSelectedSecrets
} from "../../SecretMainPage.store";
import { CollapsibleSecretImports } from "./CollapsibleSecretImports";
import { SecretDetailSidebar } from "./SecretDetailSidebar";
import { HIDDEN_SECRET_VALUE, HIDDEN_SECRET_VALUE_API_MASK, SecretItem } from "./SecretItem";
@ -63,22 +73,19 @@ export const SecretListView = ({
// strip of side effect queries
const { mutateAsync: createSecretV3 } = useCreateSecretV3({
options: {
onSuccess: undefined
}
options: { onSuccess: undefined }
});
const { mutateAsync: updateSecretV3 } = useUpdateSecretV3({
options: {
onSuccess: undefined
}
options: { onSuccess: undefined }
});
const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3({
options: {
onSuccess: undefined
}
options: { onSuccess: undefined }
});
const selectedSecrets = useSelectedSecrets();
const { toggle: toggleSelectedSecret } = useSelectedSecretActions();
const { isBatchMode, pendingChanges } = useBatchMode();
const { addPendingChange } = useBatchModeActions();
const handleSecretOperation = async (
operation: "create" | "update" | "delete",
@ -170,11 +177,56 @@ export const SecretListView = ({
);
};
function getTrueOriginalSecret(
currentSecret: SecretV3RawSanitized,
pendingSecrets: PendingSecretChange[]
): Omit<SecretV3RawSanitized, "tags"> & {
tags?: { id: string; slug: string }[];
} {
// Find if there's already a pending change for this secret
const existingChange = pendingSecrets.find((change) => change.id === currentSecret.id);
if (!existingChange || existingChange.type === "create") {
// If no existing change or it's a creation, current secret is the original
return {
...currentSecret,
tags: currentSecret.tags?.map((tag) => ({
id: tag.id,
slug: tag.slug
}))
};
}
if (existingChange.type === "update") {
// If there's an existing update, reconstruct the original from the stored original values
return {
...currentSecret,
key: existingChange.secretKey, // Original key
value: existingChange.originalValue || currentSecret.value,
comment: existingChange.originalComment || currentSecret.comment,
skipMultilineEncoding:
existingChange.originalSkipMultilineEncoding ?? currentSecret.skipMultilineEncoding,
tags:
existingChange.originalTags?.map((tag) => ({
id: tag.id,
slug: tag.slug
})) || currentSecret.tags,
secretMetadata: existingChange.originalSecretMetadata || currentSecret.secretMetadata
};
}
return {
...currentSecret,
tags: currentSecret.tags?.map((tag) => ({ id: tag.id, slug: tag.slug }))
};
}
// Improved handleSaveSecret function
const handleSaveSecret = useCallback(
async (
orgSecret: SecretV3RawSanitized,
modSecret: Omit<SecretV3RawSanitized, "tags"> & {
tags?: { id: string }[];
tags?: { id: string; name?: string }[];
secretMetadata?: { key: string; value: string }[];
},
cb?: () => void
@ -192,7 +244,9 @@ export const SecretListView = ({
reminderNote,
reminderRecipients,
secretMetadata,
isReminderEvent
isReminderEvent,
isPending,
pendingAction
} = modSecret;
const hasKeyChanged = oldKey !== key && key;
@ -246,6 +300,79 @@ export const SecretListView = ({
// shared secret change
if (!isSharedSecUnchanged && !personalAction) {
if (isBatchMode) {
const isEditingPendingCreation = isPending && pendingAction === PendingAction.Create;
if (isEditingPendingCreation) {
const updatedCreate: PendingSecretCreate = {
id: orgSecret.id,
type: PendingAction.Create,
secretKey: key,
secretValue: value || "",
secretComment: comment || "",
skipMultilineEncoding: modSecret.skipMultilineEncoding || false,
tags: tags?.map((tag) => ({ id: tag.id, slug: tag.name || "" })) || [],
secretMetadata: secretMetadata || [],
timestamp: Date.now(),
resourceType: "secret",
originalKey: oldKey
};
addPendingChange(updatedCreate, {
workspaceId,
environment,
secretPath
});
} else {
const trueOriginalSecret = getTrueOriginalSecret(orgSecret, pendingChanges.secrets);
const updateChange: PendingSecretUpdate = {
id: orgSecret.id,
type: PendingAction.Update,
secretKey: trueOriginalSecret.key,
...(key !== trueOriginalSecret.key && { newSecretName: key }),
...(value !== trueOriginalSecret.value && {
originalValue: trueOriginalSecret.value,
secretValue: value
}),
...(comment !== trueOriginalSecret.comment && {
originalComment: trueOriginalSecret.comment,
secretComment: comment
}),
...(modSecret.skipMultilineEncoding !==
trueOriginalSecret.skipMultilineEncoding && {
originalSkipMultilineEncoding: trueOriginalSecret.skipMultilineEncoding,
skipMultilineEncoding: modSecret.skipMultilineEncoding
}),
...(!isSameTags && {
originalTags:
trueOriginalSecret.tags?.map((tag) => ({ id: tag.id, slug: tag.slug })) || [],
tags: tags?.map((tag) => ({ id: tag.id, slug: tag.name || "" })) || []
}),
...(JSON.stringify(secretMetadata) !==
JSON.stringify(trueOriginalSecret.secretMetadata) && {
originalSecretMetadata: trueOriginalSecret.secretMetadata || [],
secretMetadata: secretMetadata || []
}),
timestamp: Date.now(),
resourceType: "secret"
};
addPendingChange(updateChange, {
workspaceId,
environment,
secretPath
});
}
if (!isReminderEvent) {
handlePopUpClose("secretDetail");
}
if (cb) cb();
return;
}
await handleSecretOperation("update", SecretType.Shared, oldKey, {
value,
tags: tagIds,
@ -314,12 +441,41 @@ export const SecretListView = ({
});
}
},
[environment, secretPath, isProtectedBranch]
[
environment,
secretPath,
isProtectedBranch,
isBatchMode,
workspaceId,
addPendingChange,
pendingChanges.secrets
]
);
const handleSecretDelete = useCallback(async () => {
const { key, id: secretId } = popUp.deleteSecret?.data as SecretV3RawSanitized;
const { key, id: secretId, value } = popUp.deleteSecret?.data as SecretV3RawSanitized;
try {
if (isBatchMode) {
const deleteChange: PendingSecretDelete = {
id: `${secretId}`,
type: PendingAction.Delete,
secretKey: key,
secretValue: value || "",
timestamp: Date.now(),
resourceType: "secret"
};
addPendingChange(deleteChange, {
workspaceId,
environment,
secretPath
});
handlePopUpClose("deleteSecret");
handlePopUpClose("secretDetail");
return;
}
await handleSecretOperation("delete", SecretType.Shared, key, { secretId });
// wrap this in another function and then reuse
queryClient.invalidateQueries({
@ -362,7 +518,10 @@ export const SecretListView = ({
(popUp.deleteSecret?.data as SecretV3RawSanitized)?.key,
environment,
secretPath,
isProtectedBranch
isProtectedBranch,
isBatchMode,
workspaceId,
addPendingChange
]);
// for optimization on minimise re-rendering of secret items
@ -401,6 +560,8 @@ export const SecretListView = ({
value: secret.valueOverride ?? secret.value
})
}
isPending={secret.isPending}
pendingAction={secret.pendingAction}
/>
))}
<DeleteActionModal