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

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 =
-        importedBy &&
-        importedBy.some(({ folders }) =>
-          folders?.some(({ secrets }) =>
-            secrets?.some(({ referencedSecretId }) => referencedSecretId === secret.id)
-          )
-        );
+      const hasDirectReferences = importedBy?.some(({ folders }) =>
+        folders?.some(({ secrets }) =>
+          secrets?.some(({ referencedSecretKey }) => referencedSecretKey === secret.key)
+        )
+      );
+
       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;
     }[];
   }[];