feat(secrets-ui): improve warning message and logic for secret-sync on secret imports

backend/src/server/routes/index.ts

@@ -1541,6 +1541,7 @@ export const registerRoutes = async (
 
   const secretSyncService = secretSyncServiceFactory({
     secretSyncDAL,
+    secretImportDAL,
     permissionService,
     appConnectionService,
     folderDAL,

backend/src/server/routes/v1/dashboard-router.ts

@@ -155,7 +155,7 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
                         .object({
                           secretId: z.string(),
                           referencedSecretKey: z.string(),
-                          referencedSecretId: z.string()
+                          referencedSecretEnv: z.string()
                         })
                         .array()
                         .optional()
@@ -658,7 +658,7 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
                     .object({
                       secretId: z.string(),
                       referencedSecretKey: z.string(),
-                      referencedSecretId: z.string()
+                      referencedSecretEnv: z.string()
                     })
                     .array()
                     .optional()
@@ -945,7 +945,7 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
       const usedBySecretSyncs = secretSyncs.map((sync) => ({
         name: sync.name,
         destination: sync.destination,
-        environment
+        environment: sync.environment?.name || environment
       }));
 
       if (secrets?.length || secretRotations?.length) {

backend/src/services/secret-import/secret-import-dal.ts

@@ -171,6 +171,19 @@ export const secretImportDALFactory = (db: TDbClient) => {
     }
   };
 
+  const getFolderImports = async (secretPath: string, environmentId: string, tx?: Knex) => {
+    try {
+      const folderImports = await (tx || db.replicaNode())(TableName.SecretImport)
+        .where({ importPath: secretPath, importEnv: environmentId })
+        .join(TableName.SecretFolder, `${TableName.SecretImport}.folderId`, `${TableName.SecretFolder}.id`)
+        .join(TableName.Environment, `${TableName.SecretFolder}.envId`, `${TableName.Environment}.id`)
+        .select(db.ref("id").withSchema(TableName.SecretFolder).as("folderId"));
+      return folderImports;
+    } catch (error) {
+      throw new DatabaseError({ error, name: "get secret imports" });
+    }
+  };
+
   const getFolderIsImportedBy = async (
     secretPath: string,
     environmentId: string,
@@ -204,7 +217,7 @@ export const secretImportDALFactory = (db: TDbClient) => {
           db.ref("slug").withSchema(TableName.Environment).as("envSlug"),
           db.ref("id").withSchema(TableName.SecretFolder).as("folderId"),
           db.ref("secretKey").withSchema(TableName.SecretReferenceV2).as("referencedSecretKey"),
-          db.ref("id").withSchema(TableName.SecretV2).as("referencedSecretId")
+          db.ref("environment").withSchema(TableName.SecretReferenceV2).as("referencedSecretEnv")
         );
 
       const folderResults = folderImports.map(({ envName, envSlug, folderName, folderId }) => ({
@@ -215,14 +228,14 @@ export const secretImportDALFactory = (db: TDbClient) => {
       }));
 
       const secretResults = secretReferences.map(
-        ({ envName, envSlug, secretId, folderName, folderId, referencedSecretKey, referencedSecretId }) => ({
+        ({ envName, envSlug, secretId, folderName, folderId, referencedSecretKey, referencedSecretEnv }) => ({
           envName,
           envSlug,
           secretId,
           folderName,
           folderId,
           referencedSecretKey,
-          referencedSecretId
+          referencedSecretEnv
         })
       );
 
@@ -237,7 +250,7 @@ export const secretImportDALFactory = (db: TDbClient) => {
               secrets: {
                 secretId: string;
                 referencedSecretKey: string;
-                referencedSecretId: string;
+                referencedSecretEnv: string;
               }[];
               folderId: string;
               folderImported: boolean;
@@ -270,7 +283,7 @@ export const secretImportDALFactory = (db: TDbClient) => {
             {
               secretId: item.secretId,
               referencedSecretKey: item.referencedSecretKey,
-              referencedSecretId: item.referencedSecretId
+              referencedSecretEnv: item.referencedSecretEnv
             }
           ];
         } else {
@@ -316,6 +329,7 @@ export const secretImportDALFactory = (db: TDbClient) => {
     findLastImportPosition,
     updateAllPosition,
     getProjectImportCount,
-    getFolderIsImportedBy
+    getFolderIsImportedBy,
+    getFolderImports
   };
 };

backend/src/services/secret-import/secret-import-service.ts

@@ -878,7 +878,7 @@ export const secretImportServiceFactory = ({
             .map((otherSecret) => ({
               secretId: secret.secretKey,
               referencedSecretKey: otherSecret.secretKey,
-              referencedSecretId: otherSecret.id
+              referencedSecretEnv: environment
             }));
         }) || [];
     if (locallyReferenced.length > 0) {

backend/src/services/secret-import/secret-import-types.ts

@@ -56,12 +56,12 @@ export type FolderResult = {
 export type SecretResult = {
   secretId: string;
   referencedSecretKey: string;
-  referencedSecretId: string;
+  referencedSecretEnv: string;
 } & FolderResult;
 
 export type FolderInfo = {
   folderName: string;
-  secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+  secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
   folderId: string;
   folderImported: boolean;
   envSlug?: string;

backend/src/services/secret-sync/secret-sync-service.ts

@@ -32,12 +32,14 @@ import {
   TUpdateSecretSyncDTO
 } from "@app/services/secret-sync/secret-sync-types";
 
+import { TSecretImportDALFactory } from "../secret-import/secret-import-dal";
 import { TSecretSyncDALFactory } from "./secret-sync-dal";
 import { SECRET_SYNC_CONNECTION_MAP, SECRET_SYNC_NAME_MAP } from "./secret-sync-maps";
 import { TSecretSyncQueueFactory } from "./secret-sync-queue";
 
 type TSecretSyncServiceFactoryDep = {
   secretSyncDAL: TSecretSyncDALFactory;
+  secretImportDAL: TSecretImportDALFactory;
   appConnectionService: Pick<TAppConnectionServiceFactory, "connectAppConnectionById">;
   permissionService: Pick<TPermissionServiceFactory, "getProjectPermission" | "getOrgPermission">;
   projectBotService: Pick<TProjectBotServiceFactory, "getBotKey">;
@@ -54,6 +56,7 @@ export type TSecretSyncServiceFactory = ReturnType<typeof secretSyncServiceFacto
 export const secretSyncServiceFactory = ({
   secretSyncDAL,
   folderDAL,
+  secretImportDAL,
   permissionService,
   appConnectionService,
   projectBotService,
@@ -87,7 +90,7 @@ export const secretSyncServiceFactory = ({
   };
 
   const listSecretSyncsBySecretPath = async (
-    { projectId, secretPath, environment, destination }: TListSecretSyncsByFolderId,
+    { projectId, secretPath, environment }: TListSecretSyncsByFolderId,
     actor: OrgServiceActor
   ) => {
     const { permission } = await permissionService.getProjectPermission({
@@ -106,9 +109,12 @@ export const secretSyncServiceFactory = ({
     const folder = await folderDAL.findBySecretPath(projectId, environment, secretPath);
     if (!folder) return [];
 
+    const folderImports = await secretImportDAL.getFolderImports(secretPath, folder.envId);
+
     const secretSyncs = await secretSyncDAL.find({
-      ...(destination && { destination }),
+      $in: {
-      folderId: folder.id
+        folderId: folderImports.map((folderImport) => folderImport.folderId).concat(folder.id)
+      }
     });
 
     return secretSyncs as TSecretSync[];

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -33,7 +33,7 @@ export const DeleteActionModal = ({
   buttonText = "Delete",
   formContent,
   deletionMessage,
-  buttonColorSchema,
+  buttonColorSchema = "danger",
   children
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
@@ -69,7 +69,7 @@ export const DeleteActionModal = ({
           <div className="mx-2 flex items-center">
             <Button
               className="mr-4"
-              colorSchema={buttonColorSchema || "danger"}
+              colorSchema={buttonColorSchema}
               isDisabled={!(deleteKey === inputData) || isLoading}
               onClick={onDelete}
               isLoading={isLoading}

frontend/src/hooks/api/dashboard/types.ts

@@ -51,7 +51,7 @@ export type ProjectSecretsImportedBy = {
   environment: { name: string; slug: string };
   folders: {
     name: string;
-    secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+    secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
     isImported: boolean;
   }[];
 };

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -769,7 +769,7 @@ export const OverviewPage = () => {
         const uniqueSecrets: {
           secretId: string;
           referencedSecretKey: string;
-          referencedSecretId: string;
+          referencedSecretEnv: string;
         }[] = [];
         const secretIds = new Set<string>();
 

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -59,7 +59,7 @@ type Props = {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];
@@ -133,7 +133,10 @@ export const SecretEditRow = ({
           importedBy &&
           importedBy.some(({ folders }) =>
             folders?.some(({ secrets }) =>
-              secrets?.some(({ referencedSecretId }) => referencedSecretId === secretId)
+              secrets?.some(
+                ({ referencedSecretKey, referencedSecretEnv }) =>
+                  referencedSecretKey === secretName && referencedSecretEnv === environment
+              )
             )
           )
         ) {

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -54,7 +54,7 @@ type Props = {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -118,7 +118,7 @@ type Props = {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/CollapsibleSecretImports.tsx

@@ -26,7 +26,7 @@ interface CollapsibleSecretImportsProps {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];
@@ -179,15 +179,27 @@ export const CollapsibleSecretImports: React.FC<CollapsibleSecretImportsProps> =
     return null;
   }
 
+  const alertColors = onlyReferences
+    ? {
+        border: "border-yellow-700/30",
+        bg: "bg-yellow-900/20",
+        text: "text-yellow-500"
+      }
+    : {
+        border: "border-red-700/30",
+        bg: "bg-red-900/20",
+        text: "text-red-500"
+      };
+
   return (
     <div className="mb-4 w-full">
-      <div className="mb-4 rounded-md border border-red-700/30 bg-red-900/20">
+      <div className={`mb-4 rounded-md border ${alertColors.border} ${alertColors.bg}`}>
         <div className="flex items-start gap-3 p-4">
-          <div className="mt-0.5 flex-shrink-0 text-red-500">
+          <div className={`mt-0.5 flex-shrink-0 ${alertColors.text}`}>
             <FontAwesomeIcon icon={faWarning} className="h-5 w-5" aria-hidden="true" />
           </div>
           <div className="w-full">
-            <p className="text-sm font-semibold text-red-500">
+            <p className={`text-sm font-semibold ${alertColors.text}`}>
               The following resources will be affected by this change
             </p>
           </div>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -81,7 +81,7 @@ type Props = {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];
@@ -227,13 +227,12 @@ export const SecretItem = memo(
     };
 
     const handleFormSubmit = async (data: TFormSchema) => {
-      const hasDirectReferences =
+      const hasDirectReferences = importedBy?.some(({ folders }) =>
-        importedBy &&
+        folders?.some(({ secrets }) =>
-        importedBy.some(({ folders }) =>
+          secrets?.some(({ referencedSecretKey }) => referencedSecretKey === secret.key)
-          folders?.some(({ secrets }) =>
+        )
-            secrets?.some(({ referencedSecretId }) => referencedSecretId === secret.id)
+      );
-          )
+
-        );
       if (hasDirectReferences) {
         handlePopUpOpen("editSecret", data);
         return;

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretListView.tsx

@@ -34,7 +34,7 @@ type Props = {
     environment: { name: string; slug: string };
     folders: {
       name: string;
-      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretId: string }[];
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
       isImported: boolean;
     }[];
   }[];