feature secret rotations v2

2026-10-17 02:47:35 +00:00 · 2025-03-31 20:34:48 -07:00
parent da094383b8
commit 766c1242fd
275 changed files with 9692 additions and 783 deletions
@@ -0,0 +1,119 @@
+import { faBan, faRotate, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format, formatDistanceToNow } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { Tooltip } from "@app/components/v2";
+import { Badge, BadgeProps } from "@app/components/v2/Badge/Badge";
+import { SecretRotationStatus, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+
+type Props = {
+  secretRotation: TSecretRotationV2;
+  className?: string;
+};
+
+export const SecretRotationV2StatusBadge = ({ secretRotation, className }: Props) => {
+  const { isAutoRotationEnabled, rotationStatus, nextRotationAt, lastRotationMessage } =
+    secretRotation;
+
+  if (rotationStatus === SecretRotationStatus.Failed) {
+    let errorMessage = lastRotationMessage;
+    if (lastRotationMessage) {
+      try {
+        errorMessage = JSON.stringify(JSON.parse(lastRotationMessage), null, 2);
+      } catch {
+        errorMessage = lastRotationMessage;
+      }
+    }
+
+    return (
+      <Tooltip
+        position="left"
+        className="max-w-sm select-text"
+        content={
+          <div className="flex flex-col gap-2 whitespace-normal py-1">
+            <div>
+              <div className="mb-2 flex self-start text-red">
+                <FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
+                <div className="text-xs">Failure Reason</div>
+              </div>
+              <div className="break-words rounded bg-mineshaft-600 p-2 text-xs">{errorMessage}</div>
+            </div>
+            {nextRotationAt && (
+              <span className="text-xs text-mineshaft-300">
+                Next rotation attempt on {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
+                {format(nextRotationAt, "h:mm aa")}.
+              </span>
+            )}
+          </div>
+        }
+      >
+        <div>
+          <Badge
+            variant="danger"
+            className={twMerge("flex h-5 w-min items-center gap-1.5 whitespace-nowrap", className)}
+          >
+            <FontAwesomeIcon icon={faXmark} />
+            Rotation Failed
+          </Badge>
+        </div>
+      </Tooltip>
+    );
+  }
+
+  if (!isAutoRotationEnabled) {
+    return (
+      <Badge
+        className={twMerge(
+          "flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300",
+          className
+        )}
+      >
+        <FontAwesomeIcon icon={faBan} />
+        Auto-Rotation Disabled
+      </Badge>
+    );
+  }
+
+  const daysToRotation =
+    (new Date(nextRotationAt).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24);
+
+  let variant: BadgeProps["variant"];
+  let label: string;
+  let tooltipContent: string;
+
+  if (daysToRotation >= 7) {
+    variant = "success";
+    label = `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`;
+    tooltipContent = `Rotates ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
+  } else if (daysToRotation < 0) {
+    variant = "primary";
+    label = "Rotating";
+    tooltipContent = `Rotates on ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
+  } else if (daysToRotation < 1) {
+    variant = "primary";
+    label = `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`;
+    tooltipContent = `Rotates on ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
+  } else {
+    variant = "primary";
+    label = `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`;
+    tooltipContent = `Rotates on ${format(nextRotationAt, "MM/dd/yyyy")} at ${format(nextRotationAt, "h:mm aa")}.`;
+  }
+
+  return (
+    <Tooltip className="max-w-lg" content={tooltipContent}>
+      <div>
+        <Badge
+          variant={variant}
+          className={twMerge(
+            "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
+            className
+          )}
+        >
+          <FontAwesomeIcon icon={faRotate} />
+          {label}
+        </Badge>
+      </div>
+    </Tooltip>
+  );
+};