Group rotated secrets under rotation row on the UI dashboard

2026-10-08 16:28:11 +00:00 · 2025-11-17 23:23:13 -03:00
parent fa44c683b0
commit 3c3c859f12
5 changed files with 172 additions and 27 deletions
@@ -624,7 +624,10 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
                    secretValueHidden: z.boolean(),
                    secretPath: z.string().optional(),
                    secretMetadata: ResourceMetadataSchema.optional(),
-                    tags: SanitizedTagSchema.array().optional()
+                    tags: SanitizedTagSchema.array().optional(),
+                    reminder: RemindersSchema.extend({
+                      recipients: z.string().array()
+                    }).nullable()
                  })
                  .nullable()
                  .array()
@@ -743,6 +746,7 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
                ReturnType<typeof server.services.secretRotationV2.getDashboardSecretRotations>
              >[number]["secrets"][number] & {
                isEmpty: boolean;
+                reminder: Awaited<ReturnType<typeof server.services.reminder.getRemindersForDashboard>>[string] | null;
              }
            > | null)[];
          })[]
@@ -847,27 +851,38 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
        );

        if (remainingLimit > 0 && totalSecretRotationCount > adjustedOffset) {
-          secretRotations = (
-            await server.services.secretRotationV2.getDashboardSecretRotations(
-              {
-                projectId,
-                search,
-                orderBy,
-                orderDirection,
-                environments: [environment],
-                secretPath,
-                limit: remainingLimit,
-                offset: adjustedOffset
-              },
-              req.permission
-            )
-          ).map((rotation) => ({
+          const rawSecretRotations = await server.services.secretRotationV2.getDashboardSecretRotations(
+            {
+              projectId,
+              search,
+              orderBy,
+              orderDirection,
+              environments: [environment],
+              secretPath,
+              limit: remainingLimit,
+              offset: adjustedOffset
+            },
+            req.permission
+          );
+
+          const allRotationSecretIds = rawSecretRotations
+            .flatMap((rotation) => rotation.secrets)
+            .filter((secret) => Boolean(secret))
+            .map((secret) => secret.id);
+
+          const rotationReminders =
+            allRotationSecretIds.length > 0
+              ? await server.services.reminder.getRemindersForDashboard(allRotationSecretIds)
+              : {};
+
+          secretRotations = rawSecretRotations.map((rotation) => ({
            ...rotation,
            secrets: rotation.secrets.map((secret) =>
              secret
                ? {
                    ...secret,
-                    isEmpty: !secret.secretValue
+                    isEmpty: secret.secretValueHidden,
+                    reminder: rotationReminders[secret.id] ?? null
                  }
                : secret
            )
@@ -978,11 +993,26 @@ export const registerDashboardRouter = async (server: FastifyZodProvider) => {
              rawSecrets.map((secret) => secret.id)
            );

-            secrets = rawSecrets.map((secret) => ({
+            const rotationSecretIds =
+              includeSecretRotations && secretRotations?.length
+                ? new Set(
+                    secretRotations.flatMap((rotation) => rotation.secrets.filter(Boolean).map((secret) => secret.id))
+                  )
+                : new Set<string>();
+
+            const filteredSecrets = rawSecrets.filter((secret) => !rotationSecretIds.has(secret.id));
+
+            secrets = filteredSecrets.map((secret) => ({
              ...secret,
              isEmpty: !secret.secretValue,
              reminder: reminders[secret.id] ?? null
            }));
+
+            if (includeSecretRotations && secretRotations?.length && totalSecretCount && rotationSecretIds.size > 0) {
+              const filteredCount = rawSecrets.filter((secret) => !rotationSecretIds.has(secret.id)).length;
+              const originalCount = rawSecrets.length;
+              totalSecretCount = Math.max(0, totalSecretCount - (originalCount - filteredCount));
+            }
          }
        }
      } catch (error) {
@@ -656,12 +656,17 @@ const Page = () => {
    setDebouncedSearchFilter("");
  };

-  const getMergedSecretsWithPending = () => {
+  const getMergedSecretsWithPending = (
+    paramSecrets?: (SecretV3RawSanitized | null)[]
+  ): SecretV3RawSanitized[] => {
+    const sanitizedParamSecrets = paramSecrets?.filter(Boolean) as
+      | SecretV3RawSanitized[]
+      | undefined;
    if (!isBatchMode || pendingChanges.secrets.length === 0) {
-      return secrets;
+      return sanitizedParamSecrets || secrets || [];
    }

-    const mergedSecrets = [...(secrets || [])] as (SecretV3RawSanitized & {
+    const mergedSecrets = [...(sanitizedParamSecrets || secrets || [])] as (SecretV3RawSanitized & {
      originalKey?: string;
    })[];

@@ -1041,7 +1046,17 @@ const Page = () => {
                />
              )}
              {canReadSecretRotations && Boolean(secretRotations?.length) && (
-                <SecretRotationListView secretRotations={secretRotations} />
+                <SecretRotationListView
+                  secretRotations={secretRotations}
+                  colWidth={colWidth}
+                  tags={tags}
+                  projectId={projectId}
+                  secretPath={secretPath}
+                  isProtectedBranch={isProtectedBranch}
+                  importedBy={importedBy}
+                  usedBySecretSyncs={usedBySecretSyncs}
+                  getMergedSecretsWithPending={getMergedSecretsWithPending}
+                />
              )}
              {canReadSecret && Boolean(mergedSecrets?.length) && (
                <SecretListView
@@ -750,7 +750,7 @@ export const SecretItem = memo(
                    {(isAllowed) => (
                      <IconButton
                        ariaLabel="override-value"
-                        isDisabled={!isAllowed}
+                        isDisabled={!isAllowed || isRotatedSecret}
                        variant="plain"
                        size="sm"
                        onClick={handleOverrideClick}
@@ -759,7 +759,13 @@ export const SecretItem = memo(
                          isOverridden && "w-5 text-primary"
                        )}
                      >
-                        <Tooltip content={`${isOverridden ? "Remove" : "Add"} Override`}>
+                        <Tooltip
+                          content={
+                            isRotatedSecret
+                              ? "Unavailable for rotated secrets"
+                              : `${isOverridden ? "Remove" : "Add"} Override`
+                          }
+                        >
                          <FontAwesomeSymbol
                            symbolName={FontAwesomeSpriteName.Override}
                            className="h-3.5 w-3.5"
@@ -18,8 +18,11 @@ import { IconButton, Modal, ModalContent, TableContainer, Tag, Tooltip } from "@
 import { ProjectPermissionSub } from "@app/context";
 import { ProjectPermissionSecretRotationActions } from "@app/context/ProjectPermissionContext/types";
 import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
 import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+import { SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";

+import { SecretListView } from "../SecretListView";
 import { SecretRotationSecretRow } from "./SecretRotationSecretRow";

 type Props = {
@@ -28,6 +31,23 @@ type Props = {
  onRotate: () => void;
  onViewGeneratedCredentials: () => void;
  onDelete: () => void;
+  projectId: string;
+  secretPath?: string;
+  tags?: WsTag[];
+  isProtectedBranch?: boolean;
+  usedBySecretSyncs?: UsedBySecretSyncs[];
+  importedBy?: {
+    environment: { name: string; slug: string };
+    folders: {
+      name: string;
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
+      isImported: boolean;
+    }[];
+  }[];
+  colWidth: number;
+  getMergedSecretsWithPending: (
+    paramSecrets?: (SecretV3RawSanitized | null)[]
+  ) => SecretV3RawSanitized[];
 };

 export const SecretRotationItem = ({
@@ -35,16 +55,40 @@ export const SecretRotationItem = ({
  onEdit,
  onRotate,
  onViewGeneratedCredentials,
-  onDelete
+  onDelete,
+  projectId,
+  secretPath = "/",
+  tags = [],
+  isProtectedBranch = false,
+  usedBySecretSyncs,
+  importedBy,
+  colWidth,
+  getMergedSecretsWithPending
 }: Props) => {
  const { name, type, environment, folder, secrets, description } = secretRotation;

  const { name: rotationType, image } = SECRET_ROTATION_MAP[type];
  const [showSecrets, setShowSecrets] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(true);

  return (
    <>
-      <div className={twMerge("group flex border-b border-mineshaft-600 hover:bg-mineshaft-700")}>
+      <div
+        className={twMerge(
+          "group flex cursor-pointer border-b border-mineshaft-600 hover:bg-mineshaft-700"
+        )}
+        onClick={() => setIsExpanded(!isExpanded)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        aria-expanded={isExpanded}
+        aria-label={`${isExpanded ? "Collapse" : "Expand"} rotation secrets for ${name}`}
+      >
        <div className="text- flex w-11 items-center py-2 pl-5 text-mineshaft-400">
          <FontAwesomeIcon icon={faRotate} />
        </div>
@@ -198,6 +242,19 @@ export const SecretRotationItem = ({
          </motion.div>
        </AnimatePresence>
      </div>
+      {isExpanded && (
+        <SecretListView
+          colWidth={colWidth}
+          secrets={getMergedSecretsWithPending(secretRotation.secrets) || []}
+          tags={tags}
+          environment={environment.slug}
+          projectId={projectId}
+          secretPath={secretPath}
+          isProtectedBranch={isProtectedBranch}
+          importedBy={importedBy}
+          usedBySecretSyncs={usedBySecretSyncs}
+        />
+      )}
      <Modal onOpenChange={setShowSecrets} isOpen={showSecrets}>
        <ModalContent
          onOpenAutoFocus={(e) => e.preventDefault()}
@@ -3,15 +3,44 @@ import { EditSecretRotationV2Modal } from "@app/components/secret-rotations-v2/E
 import { RotateSecretRotationV2Modal } from "@app/components/secret-rotations-v2/RotateSecretRotationV2Modal";
 import { ViewSecretRotationV2GeneratedCredentialsModal } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials";
 import { usePopUp } from "@app/hooks";
+import { UsedBySecretSyncs } from "@app/hooks/api/dashboard/types";
 import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+import { SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";

 import { SecretRotationItem } from "./SecretRotationItem";

 type Props = {
  secretRotations?: TSecretRotationV2[];
+  projectId: string;
+  secretPath?: string;
+  tags?: WsTag[];
+  isProtectedBranch?: boolean;
+  usedBySecretSyncs?: UsedBySecretSyncs[];
+  importedBy?: {
+    environment: { name: string; slug: string };
+    folders: {
+      name: string;
+      secrets?: { secretId: string; referencedSecretKey: string; referencedSecretEnv: string }[];
+      isImported: boolean;
+    }[];
+  }[];
+  colWidth: number;
+  getMergedSecretsWithPending: (
+    secretParams?: (SecretV3RawSanitized | null)[]
+  ) => SecretV3RawSanitized[];
 };

-export const SecretRotationListView = ({ secretRotations }: Props) => {
+export const SecretRotationListView = ({
+  secretRotations,
+  projectId,
+  secretPath = "/",
+  tags = [],
+  isProtectedBranch = false,
+  usedBySecretSyncs,
+  importedBy,
+  colWidth,
+  getMergedSecretsWithPending
+}: Props) => {
  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
    "editSecretRotation",
    "rotateSecretRotation",
@@ -31,6 +60,14 @@ export const SecretRotationListView = ({ secretRotations }: Props) => {
            handlePopUpOpen("viewSecretRotationGeneratedCredentials", secretRotation)
          }
          onDelete={() => handlePopUpOpen("deleteSecretRotation", secretRotation)}
+          colWidth={colWidth}
+          tags={tags}
+          projectId={projectId}
+          secretPath={secretPath}
+          isProtectedBranch={isProtectedBranch}
+          importedBy={importedBy}
+          usedBySecretSyncs={usedBySecretSyncs}
+          getMergedSecretsWithPending={getMergedSecretsWithPending}
        />
      ))}
      <EditSecretRotationV2Modal