Merge branch 'main' into feat/terraformCloudIntegration

frontend/src/components/secret-rotations-v2/CreateSecretRotationV2Modal.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+
+import { SecretRotationV2Form } from "@app/components/secret-rotations-v2/forms";
+import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
+import { SecretRotationV2Select } from "@app/components/secret-rotations-v2/SecretRotationV2Select";
+import { Modal, ModalContent } from "@app/components/v2";
+import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
+
+type SharedProps = {
+  secretPath: string;
+  environment?: string;
+  environments?: WorkspaceEnv[];
+};
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+} & SharedProps;
+
+type ContentProps = {
+  onComplete: (secretRotation: TSecretRotationV2) => void;
+  selectedRotation: SecretRotation | null;
+  setSelectedRotation: (selectedRotation: SecretRotation | null) => void;
+} & SharedProps;
+
+const Content = ({ setSelectedRotation, selectedRotation, ...props }: ContentProps) => {
+  if (selectedRotation) {
+    return (
+      <SecretRotationV2Form
+        onCancel={() => setSelectedRotation(null)}
+        type={selectedRotation}
+        {...props}
+      />
+    );
+  }
+
+  return <SecretRotationV2Select onSelect={setSelectedRotation} />;
+};
+
+export const CreateSecretRotationV2Modal = ({ onOpenChange, isOpen, ...props }: Props) => {
+  const [selectedRotation, setSelectedRotation] = useState<SecretRotation | null>(null);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) setSelectedRotation(null);
+        onOpenChange(open);
+      }}
+    >
+      <ModalContent
+        title={
+          selectedRotation ? (
+            <SecretRotationV2ModalHeader isConfigured={false} type={selectedRotation} />
+          ) : (
+            "Add Secret Rotation"
+          )
+        }
+        onPointerDownOutside={(e) => e.preventDefault()}
+        className={selectedRotation ? "max-w-2xl" : "max-w-3xl"}
+        subTitle={
+          selectedRotation ? undefined : "Select a provider to create a secret rotation for."
+        }
+        bodyClassName="overflow-visible"
+      >
+        <Content
+          onComplete={() => {
+            setSelectedRotation(null);
+            onOpenChange(false);
+          }}
+          selectedRotation={selectedRotation}
+          setSelectedRotation={setSelectedRotation}
+          {...props}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/secret-rotations-v2/DeleteSecretRotationV2Modal.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+
+import { createNotification } from "@app/components/notifications";
+import { DeleteActionModal, Switch } from "@app/components/v2";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+import { useDeleteSecretRotationV2 } from "@app/hooks/api/secretRotationsV2/mutations";
+
+type Props = {
+  secretRotation?: TSecretRotationV2;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onComplete?: () => void;
+};
+
+export const DeleteSecretRotationV2Modal = ({
+  isOpen,
+  onOpenChange,
+  secretRotation,
+  onComplete
+}: Props) => {
+  const deleteSecretRotation = useDeleteSecretRotationV2();
+  const [revokeGeneratedCredentials, setRevokeGeneratedCredentials] = useState(false);
+  const [deleteSecrets, setDeleteSecrets] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setRevokeGeneratedCredentials(false);
+      setDeleteSecrets(false);
+    }
+  }, [isOpen]);
+
+  if (!secretRotation) return null;
+
+  const { id: rotationId, name, type, projectId, folder } = secretRotation;
+
+  const handleDeleteSecretRotation = async () => {
+    const rotationType = SECRET_ROTATION_MAP[type].name;
+
+    try {
+      await deleteSecretRotation.mutateAsync({
+        rotationId,
+        type,
+        revokeGeneratedCredentials,
+        deleteSecrets,
+        projectId,
+        secretPath: folder.path
+      });
+
+      createNotification({
+        text: `Successfully deleted ${rotationType} Rotation`,
+        type: "success"
+      });
+
+      if (onComplete) onComplete();
+      onOpenChange(false);
+    } catch {
+      createNotification({
+        text: `Failed to delete ${rotationType} Rotation`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <DeleteActionModal
+      isOpen={isOpen}
+      onChange={onOpenChange}
+      title={`Are you sure want to delete ${name}?`}
+      deleteKey={name}
+      onDeleteApproved={handleDeleteSecretRotation}
+    >
+      <Switch
+        containerClassName="mt-4"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
+        thumbClassName="bg-mineshaft-800"
+        isChecked={revokeGeneratedCredentials}
+        onCheckedChange={setRevokeGeneratedCredentials}
+        id="revoke-credentials"
+      >
+        Revoke Credentials
+      </Switch>
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
+        Generated credentials will {revokeGeneratedCredentials ? "" : "not"} be revoked on deletion
+        {revokeGeneratedCredentials ? "" : " and remain active"}.
+      </p>
+      <Switch
+        containerClassName="mt-4"
+        className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-red/50"
+        thumbClassName="bg-mineshaft-800"
+        isChecked={deleteSecrets}
+        onCheckedChange={setDeleteSecrets}
+        id="delete-secrets"
+      >
+        Delete Secrets
+      </Switch>
+      <p className="mt-1 font-inter text-sm text-mineshaft-400">
+        Rotation secrets will {deleteSecrets ? "" : "not"} be removed from your project on deletion.
+      </p>
+    </DeleteActionModal>
+  );
+};

frontend/src/components/secret-rotations-v2/EditSecretRotationV2Modal.tsx

@@ -0,0 +1,34 @@
+import { SecretRotationV2ModalHeader } from "@app/components/secret-rotations-v2/SecretRotationV2ModalHeader";
+import { Modal, ModalContent } from "@app/components/v2";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationV2Form } from "./forms";
+
+type Props = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  secretRotation?: TSecretRotationV2;
+};
+
+export const EditSecretRotationV2Modal = ({ secretRotation, onOpenChange, ...props }: Props) => {
+  if (!secretRotation) return null;
+
+  return (
+    <Modal {...props} onOpenChange={onOpenChange}>
+      <ModalContent
+        title={<SecretRotationV2ModalHeader isConfigured type={secretRotation.type} />}
+        className="max-w-2xl"
+        bodyClassName="overflow-visible"
+      >
+        <SecretRotationV2Form
+          onComplete={() => onOpenChange(false)}
+          onCancel={() => onOpenChange(false)}
+          secretRotation={secretRotation}
+          type={secretRotation.type}
+          secretPath={secretRotation.folder.path}
+          environment={secretRotation.environment.slug}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/secret-rotations-v2/RotateSecretRotationV2Modal.tsx

@@ -0,0 +1,88 @@
+import { createNotification } from "@app/components/notifications";
+import { Button, Modal, ModalClose, ModalContent } from "@app/components/v2";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+import { useRotateSecretRotationV2 } from "@app/hooks/api/secretRotationsV2/mutations";
+
+type Props = {
+  secretRotation?: TSecretRotationV2;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+type ContentProps = {
+  secretRotation: TSecretRotationV2;
+  onComplete: () => void;
+};
+
+const Content = ({ secretRotation, onComplete }: ContentProps) => {
+  const rotateSecrets = useRotateSecretRotationV2();
+
+  const { id: rotationId, type, projectId, folder } = secretRotation;
+  const rotationType = SECRET_ROTATION_MAP[type].name;
+
+  const handleRotateSecrets = async () => {
+    try {
+      await rotateSecrets.mutateAsync({
+        rotationId,
+        type,
+        projectId,
+        secretPath: folder.path
+      });
+
+      createNotification({
+        text: `Successfully rotated ${rotationType} secrets`,
+        type: "success"
+      });
+
+      onComplete();
+    } catch (err) {
+      console.error(err);
+
+      createNotification({
+        text: `Failed to rotate ${rotationType} secrets`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div>
+      <p className="mb-8 text-sm text-mineshaft-200">
+        Are you sure you want to rotate the secrets for this {rotationType} Rotation?
+      </p>
+      <div className="mt-8 flex w-full items-center justify-between gap-2">
+        <ModalClose asChild>
+          <Button colorSchema="secondary" variant="plain">
+            Cancel
+          </Button>
+        </ModalClose>
+        <Button
+          onClick={handleRotateSecrets}
+          isDisabled={rotateSecrets.isPending}
+          isLoading={rotateSecrets.isPending}
+          colorSchema="secondary"
+        >
+          Rotate Secrets
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const RotateSecretRotationV2Modal = ({ isOpen, onOpenChange, secretRotation }: Props) => {
+  if (!secretRotation) return null;
+
+  const rotationType = SECRET_ROTATION_MAP[secretRotation.type].name;
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        title="Rotate Secrets"
+        subTitle={`Rotate the secrets for this ${rotationType}.`}
+      >
+        <Content secretRotation={secretRotation} onComplete={() => onOpenChange(false)} />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/secret-rotations-v2/SecretRotationV2ModalHeader.tsx

@@ -0,0 +1,49 @@
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+type Props = {
+  type: SecretRotation;
+  isConfigured: boolean;
+};
+
+export const SecretRotationV2ModalHeader = ({ type, isConfigured }: Props) => {
+  const destinationDetails = SECRET_ROTATION_MAP[type];
+
+  return (
+    <div className="flex w-full items-start gap-2">
+      <img
+        alt={`${destinationDetails.name} logo`}
+        src={`/images/integrations/${destinationDetails.image}`}
+        className="h-12 w-12 rounded-md bg-bunker-500 p-2"
+      />
+      <div>
+        <div className="flex items-center text-mineshaft-300">
+          {destinationDetails.name} Rotation
+          <a
+            target="_blank"
+            href={`https://infisical.com/docs/platform/secret-rotations/${type}`}
+            className="mb-1 ml-1"
+            rel="noopener noreferrer"
+          >
+            <div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+              <FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
+              <span>Docs</span>
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.07rem] ml-1 text-[10px]"
+              />
+            </div>
+          </a>
+        </div>
+        <p className="text-sm leading-4 text-mineshaft-400">
+          {isConfigured
+            ? `Edit ${destinationDetails.name} Rotation`
+            : `Rotate ${destinationDetails.name}`}
+        </p>
+      </div>
+    </div>
+  );
+};

frontend/src/components/secret-rotations-v2/SecretRotationV2Select.tsx

@@ -0,0 +1,98 @@
+import { faWrench } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Spinner, Tooltip } from "@app/components/v2";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import { SecretRotation, useSecretRotationV2Options } from "@app/hooks/api/secretRotationsV2";
+
+type Props = {
+  onSelect: (type: SecretRotation) => void;
+};
+
+export const SecretRotationV2Select = ({ onSelect }: Props) => {
+  const { isPending, data: secretRotationOptions } = useSecretRotationV2Options();
+
+  if (isPending) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center py-2.5">
+        <Spinner size="lg" className="text-mineshaft-500" />
+        <p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-2">
+      {secretRotationOptions?.map(({ type }) => {
+        const { image, name } = SECRET_ROTATION_MAP[type];
+
+        let size: number;
+
+        switch (type) {
+          case SecretRotation.MsSqlCredentials:
+            size = 50;
+            break;
+          default:
+            size = 45;
+        }
+
+        return (
+          <button
+            type="button"
+            key={type}
+            onClick={() => onSelect(type)}
+            className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
+          >
+            <img
+              src={`/images/integrations/${image}`}
+              width={size}
+              className="mt-auto"
+              alt={`${name} logo`}
+            />
+            <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              {name}
+            </div>
+          </button>
+        );
+      })}
+      <Tooltip
+        side="bottom"
+        className="max-w-sm py-4"
+        content={
+          <>
+            <p className="mb-2">Infisical is constantly adding support for more services.</p>
+            <p>
+              {`If you don't see the third-party
+            service you're looking for,`}{" "}
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://infisical.com/slack"
+                rel="noopener noreferrer"
+              >
+                let us know on Slack
+              </a>{" "}
+              or{" "}
+              <a
+                target="_blank"
+                className="underline hover:text-mineshaft-300"
+                href="https://github.com/Infisical/infisical/discussions"
+                rel="noopener noreferrer"
+              >
+                make a request on GitHub
+              </a>
+              .
+            </p>
+          </>
+        }
+      >
+        <div className="group relative flex h-28 flex-col items-center justify-center rounded-md border border-dashed border-mineshaft-600 bg-mineshaft-800 p-4 hover:bg-mineshaft-900/50">
+          <FontAwesomeIcon className="mt-auto text-3xl" icon={faWrench} />
+          <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+            Coming Soon
+          </div>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};

frontend/src/components/secret-rotations-v2/SecretRotationV2StatusBadge.tsx

@@ -0,0 +1,109 @@
+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 } 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);
+
+  return (
+    <Tooltip
+      className="max-w-lg"
+      content={
+        <>
+          <span>
+            Rotates on {format(nextRotationAt, "MM/dd/yyyy")} at {format(nextRotationAt, "h:mm aa")}
+          </span>{" "}
+          <span className="text-mineshaft-300">(Local Time)</span>
+        </>
+      }
+    >
+      <div>
+        <Badge
+          variant={daysToRotation >= 7 ? "success" : "primary"}
+          className={twMerge(
+            "flex h-5 w-min items-center gap-1.5 whitespace-nowrap capitalize",
+            className
+          )}
+        >
+          <FontAwesomeIcon icon={faRotate} />
+          {daysToRotation < 0
+            ? "Rotating"
+            : `Rotates ${formatDistanceToNow(nextRotationAt, { addSuffix: true })}`}
+        </Badge>
+      </div>
+    </Tooltip>
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -0,0 +1,105 @@
+import { ReactNode } from "react";
+import { faRotate } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { Modal, ModalContent, Spinner } from "@app/components/v2";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import {
+  SecretRotation,
+  TSecretRotationV2,
+  useViewSecretRotationV2GeneratedCredentials
+} from "@app/hooks/api/secretRotationsV2";
+
+import { ViewSqlRotationGeneratedCredentials } from "./shared";
+
+type Props = {
+  secretRotation?: TSecretRotationV2;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+};
+
+type ContentProps = {
+  secretRotation: TSecretRotationV2;
+};
+
+const Content = ({ secretRotation }: ContentProps) => {
+  const { id: rotationId, type, nextRotationAt } = secretRotation;
+
+  const { data: generatedCredentialsResponse, isPending } =
+    useViewSecretRotationV2GeneratedCredentials({
+      rotationId,
+      type
+    });
+
+  if (isPending) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center py-2.5">
+        <Spinner size="lg" className="text-mineshaft-500" />
+        <p className="mt-4 text-sm text-mineshaft-400">Loading generated credentials...</p>
+      </div>
+    );
+  }
+
+  if (!generatedCredentialsResponse) {
+    return (
+      <div className="flex w-full justify-center">
+        <p className="text-sm text-red">No generated credentials found for this rotation.</p>
+      </div>
+    );
+  }
+
+  let Component: ReactNode;
+  switch (generatedCredentialsResponse.type) {
+    case SecretRotation.PostgresCredentials:
+    case SecretRotation.MsSqlCredentials:
+      Component = (
+        <ViewSqlRotationGeneratedCredentials
+          generatedCredentialsResponse={generatedCredentialsResponse}
+        />
+      );
+      break;
+    default:
+      throw new Error("Unhandled View Generated Credential Rotation Type");
+  }
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      {Component}
+      {nextRotationAt && (
+        <div className="flex items-center gap-x-1.5 text-sm text-mineshaft-200">
+          <FontAwesomeIcon icon={faRotate} className="text-mineshaft-400" />
+          <span>
+            Next rotation occurs on: {format(nextRotationAt, "MM/dd/yyyy")} at{" "}
+            {format(nextRotationAt, "h:mm aa")}{" "}
+            <span className="text-mineshaft-300">(Local Time)</span>
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ViewSecretRotationV2GeneratedCredentialsModal = ({
+  isOpen,
+  onOpenChange,
+  secretRotation
+}: Props) => {
+  if (!secretRotation) return null;
+
+  const rotationType = SECRET_ROTATION_MAP[secretRotation.type].name;
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalContent
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+        }}
+        title="Generated Credentials"
+        subTitle={`View the current and retired ${rotationType}.`}
+      >
+        <Content secretRotation={secretRotation} />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/index.ts

@@ -0,0 +1 @@
+export * from "./ViewSecretRotationV2GeneratedCredentials";

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay.tsx

@@ -0,0 +1,55 @@
+import { useReducer } from "react";
+import { faCheck, faCopy, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { GenericFieldLabel, IconButton, Tooltip } from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+
+type Props = {
+  children?: string;
+  label: string;
+  isSensitive?: boolean;
+};
+
+export const CredentialDisplay = ({ children, label, isSensitive }: Props) => {
+  const [showCredential, toggleShowCredential] = useReducer((prev) => !prev, !isSensitive);
+
+  const [, isCopyingCredential, setCopyCredential] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  return (
+    <GenericFieldLabel label={label}>
+      {children ? (
+        <div className="flex w-full items-center gap-1 text-mineshaft-100">
+          {showCredential ? children : "****************************"}
+          <Tooltip content={`Copy ${label}`}>
+            <IconButton
+              onClick={() => {
+                setCopyCredential(children);
+                navigator.clipboard.writeText(children);
+              }}
+              ariaLabel="Copy credential"
+              variant="plain"
+              size="xs"
+            >
+              <FontAwesomeIcon icon={isCopyingCredential ? faCheck : faCopy} />
+            </IconButton>
+          </Tooltip>
+          {isSensitive && (
+            <Tooltip content={`Show ${label}`}>
+              <IconButton
+                variant="plain"
+                size="xs"
+                onClick={toggleShowCredential}
+                ariaLabel={`${showCredential ? "Hide" : "Show"} credential`}
+              >
+                <FontAwesomeIcon icon={faEyeSlash} />
+              </IconButton>
+            </Tooltip>
+          )}
+        </div>
+      ) : null}
+    </GenericFieldLabel>
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/ViewSqlRotationGeneratedCredentials.tsx

@@ -0,0 +1,57 @@
+import { faCheck, faClockRotateLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
+import { TViewSecretRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2";
+
+type Props = {
+  generatedCredentialsResponse: TViewSecretRotationGeneratedCredentialsResponse;
+};
+
+export const ViewSqlRotationGeneratedCredentials = ({
+  generatedCredentialsResponse: { generatedCredentials, activeIndex }
+}: Props) => {
+  const inactiveIndex = activeIndex === 0 ? 1 : 0;
+
+  const activeCredentials = generatedCredentials[activeIndex];
+  const inactiveCredentials = generatedCredentials[inactiveIndex];
+
+  return (
+    <>
+      <div className="flex flex-col gap-2">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-100">
+            <FontAwesomeIcon icon={faCheck} className="mr-1.5 text-green" />
+            Current Credentials
+          </span>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          The active credential set currently mapped to the rotation secrets.
+        </p>
+        <div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
+          <CredentialDisplay label="Username">{activeCredentials?.username}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {activeCredentials?.password}
+          </CredentialDisplay>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-100">
+            <FontAwesomeIcon icon={faClockRotateLeft} className="mr-1.5 text-yellow" />
+            Retired Credentials
+          </span>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          The retired credential set that will be revoked during the next rotation cycle.
+        </p>
+        <div className="flex flex-col gap-x-8 gap-y-2 rounded border border-mineshaft-600 bg-mineshaft-700 p-2">
+          <CredentialDisplay label="Username">{inactiveCredentials?.username}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Password">
+            {inactiveCredentials?.password}
+          </CredentialDisplay>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/index.ts

@@ -0,0 +1 @@
+export * from "./ViewSqlRotationGeneratedCredentials";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields.tsx

@@ -0,0 +1,122 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { format, setHours, setMinutes } from "date-fns";
+
+import { FilterableSelect, FormControl, Input, Switch } from "@app/components/v2";
+import { getRotateAtLocal } from "@app/helpers/secretRotationsV2";
+import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
+
+import { TSecretRotationV2Form } from "./schemas";
+import { SecretRotationV2ConnectionField } from "./SecretRotationV2ConnectionField";
+
+type Props = {
+  isUpdate: boolean;
+  environments?: WorkspaceEnv[];
+};
+
+export const SecretRotationV2ConfigurationFields = ({ isUpdate, environments }: Props) => {
+  const { control } = useFormContext<TSecretRotationV2Form>();
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Configure the connection rotation strategy for this Secret Rotation.
+      </p>
+      {!isUpdate && environments && (
+        <Controller
+          control={control}
+          name="environment"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl label="Environment" isError={Boolean(error)} errorText={error?.message}>
+              <FilterableSelect
+                value={value}
+                onChange={onChange}
+                options={environments}
+                placeholder="Select an environment..."
+                getOptionLabel={(option) => option?.name}
+                getOptionValue={(option) => option?.id}
+              />
+            </FormControl>
+          )}
+        />
+      )}
+
+      <SecretRotationV2ConnectionField isUpdate={isUpdate} />
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Rotation Interval (In Days)"
+          >
+            <Input
+              value={value}
+              type="number"
+              onChange={onChange}
+              min={1}
+              placeholder="my-secret-rotation"
+            />
+          </FormControl>
+        )}
+        control={control}
+        name="rotationInterval"
+      />
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => {
+          return (
+            <FormControl
+              label="Rotate At (Local Time)"
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Input
+                type="time"
+                value={format(getRotateAtLocal(value), "HH:mm")}
+                onChange={(e) => {
+                  const time = e.target.value;
+                  if (time) {
+                    const [hours, minutes] = time.split(":").map((str) => parseInt(str, 10));
+                    const newSelectedDate = setHours(setMinutes(new Date(), minutes), hours);
+                    onChange({
+                      hours: newSelectedDate.getUTCHours(),
+                      minutes: newSelectedDate.getUTCMinutes()
+                    });
+                  }
+                }}
+                className="bg-mineshaft-700 text-white [color-scheme:dark]"
+              />
+            </FormControl>
+          );
+        }}
+        control={control}
+        name="rotateAtUtc"
+      />
+      <Controller
+        control={control}
+        name="isAutoRotationEnabled"
+        render={({ field: { value, onChange }, fieldState: { error } }) => {
+          return (
+            <FormControl
+              helperText={
+                value
+                  ? "Secrets will automatically be rotated when the rotation interval specified above as elapsed."
+                  : "Secrets will not be rotated automatically. You can still rotate secrets manually."
+              }
+              isError={Boolean(error)}
+              errorText={error?.message}
+            >
+              <Switch
+                className="bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
+                id="auto-rotation-enabled"
+                thumbClassName="bg-mineshaft-800"
+                onCheckedChange={onChange}
+                isChecked={value}
+              >
+                <p className="w-[9.6rem]">Auto-Rotation {value ? "Enabled" : "Disabled"}</p>
+              </Switch>
+            </FormControl>
+          );
+        }}
+      />
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ConnectionField.tsx

@@ -0,0 +1,102 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
+
+import { FilterableSelect, FormControl } from "@app/components/v2";
+import { OrgPermissionSubjects, useOrgPermission } from "@app/context";
+import { OrgPermissionAppConnectionActions } from "@app/context/OrgPermissionContext/types";
+import { APP_CONNECTION_MAP } from "@app/helpers/appConnections";
+import { SECRET_ROTATION_CONNECTION_MAP } from "@app/helpers/secretRotationsV2";
+import { useListAvailableAppConnections } from "@app/hooks/api/appConnections";
+
+import { TSecretRotationV2Form } from "./schemas";
+
+type Props = {
+  onChange?: VoidFunction;
+  isUpdate: boolean;
+};
+
+export const SecretRotationV2ConnectionField = ({ onChange: callback, isUpdate }: Props) => {
+  const { permission } = useOrgPermission();
+  const { control, watch } = useFormContext<TSecretRotationV2Form>();
+
+  const rotationType = watch("type");
+  const app = SECRET_ROTATION_CONNECTION_MAP[rotationType];
+
+  const { data: availableConnections, isPending } = useListAvailableAppConnections(app);
+
+  const connectionName = APP_CONNECTION_MAP[app].name;
+
+  const canCreateConnection = permission.can(
+    OrgPermissionAppConnectionActions.Create,
+    OrgPermissionSubjects.AppConnections
+  );
+
+  const appName = APP_CONNECTION_MAP[app].name;
+
+  return (
+    <>
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            tooltipText="App Connections can be created from the Organization Settings page."
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label={`${connectionName} Connection`}
+            helperText={
+              isUpdate ? (
+                "Cannot be updated"
+              ) : (
+                <p>
+                  Check out{" "}
+                  <a
+                    href={`https://infisical.com/docs/integrations/app-connections/${app}`}
+                    target="_blank"
+                    className="underline"
+                    rel="noopener noreferrer"
+                  >
+                    our docs
+                  </a>{" "}
+                  to ensure your connection has the required permissions for secret rotation.
+                </p>
+              )
+            }
+          >
+            <FilterableSelect
+              value={value}
+              onChange={(newValue) => {
+                onChange(newValue);
+                if (callback) callback();
+              }}
+              isLoading={isPending}
+              options={availableConnections}
+              isDisabled={isUpdate}
+              placeholder="Select connection..."
+              getOptionLabel={(option) => option.name}
+              getOptionValue={(option) => option.id}
+            />
+          </FormControl>
+        )}
+        control={control}
+        name="connection"
+      />
+      {!isUpdate && availableConnections?.length === 0 && (
+        <p className="-mt-2.5 mb-2.5 text-xs text-yellow">
+          <FontAwesomeIcon className="mr-1" size="xs" icon={faInfoCircle} />
+          {canCreateConnection ? (
+            <>
+              You do not have access to any {appName} Connections. Create one from the{" "}
+              <Link to="/organization/app-connections" className="underline">
+                App Connections
+              </Link>{" "}
+              page.
+            </>
+          ) : (
+            `You do not have access to any ${appName} Connections. Contact an admin to create one.`
+          )}
+        </p>
+      )}
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields.tsx

@@ -0,0 +1,51 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { FormControl, Input, TextArea } from "@app/components/v2";
+
+import { TSecretRotationV2Form } from "./schemas";
+
+export const SecretRotationV2DetailsFields = () => {
+  const { control } = useFormContext<TSecretRotationV2Form>();
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Provide a name and description for this Secret Rotation.
+      </p>
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            helperText="Must be slug-friendly"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Name"
+          >
+            <Input autoFocus value={value} onChange={onChange} placeholder="my-secret-rotation" />
+          </FormControl>
+        )}
+        control={control}
+        name="name"
+      />
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            isOptional
+            errorText={error?.message}
+            label="Description"
+          >
+            <TextArea
+              value={value ?? ""}
+              onChange={onChange}
+              placeholder="Describe the purpose of this rotation..."
+              className="!resize-none"
+              rows={4}
+            />
+          </FormControl>
+        )}
+        control={control}
+        name="description"
+      />
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2Form.tsx

@@ -0,0 +1,231 @@
+import { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { Tab } from "@headlessui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { SecretRotationV2ConfigurationFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ConfigurationFields";
+import { SecretRotationV2DetailsFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2DetailsFields";
+import { SecretRotationV2ParametersFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields";
+import { SecretRotationV2ReviewFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields";
+import { SecretRotationV2SecretsMappingFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields";
+import { Button } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
+import {
+  SecretRotation,
+  TSecretRotationV2,
+  useSecretRotationV2Option
+} from "@app/hooks/api/secretRotationsV2";
+import {
+  useCreateSecretRotationV2,
+  useUpdateSecretRotationV2
+} from "@app/hooks/api/secretRotationsV2/mutations";
+import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
+
+import { SecretRotationV2FormSchema, TSecretRotationV2Form } from "./schemas";
+
+type Props = {
+  onComplete: (secretRotation: TSecretRotationV2) => void;
+  type: SecretRotation;
+  onCancel: () => void;
+  secretPath: string;
+  environment?: string;
+  environments?: WorkspaceEnv[];
+  secretRotation?: TSecretRotationV2;
+};
+
+const FORM_TABS: { name: string; key: string; fields: (keyof TSecretRotationV2Form)[] }[] = [
+  {
+    name: "Configuration",
+    key: "configuration",
+    fields: [
+      "isAutoRotationEnabled",
+      "environment",
+      "rotationInterval",
+      "connection",
+      "rotateAtUtc"
+    ]
+  },
+  { name: "Parameters", key: "parameters", fields: ["parameters"] },
+  { name: "Mappings", key: "secretsMapping", fields: ["secretsMapping"] },
+  { name: "Details", key: "details", fields: ["name", "description"] },
+  { name: "Review", key: "review", fields: [] }
+];
+
+const DEFAULT_ROTATION_INTERVAL = 30;
+
+export const SecretRotationV2Form = ({
+  type,
+  onComplete,
+  onCancel,
+  environment: envSlug,
+  secretPath,
+  secretRotation,
+  environments
+}: Props) => {
+  const createSecretRotation = useCreateSecretRotationV2();
+  const updateSecretRotation = useUpdateSecretRotationV2();
+  const { currentWorkspace } = useWorkspace();
+  const { name: rotationType } = SECRET_ROTATION_MAP[type];
+
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+
+  const { rotationOption } = useSecretRotationV2Option(type);
+
+  const formMethods = useForm<TSecretRotationV2Form>({
+    resolver: zodResolver(SecretRotationV2FormSchema),
+    defaultValues: secretRotation
+      ? {
+          ...secretRotation,
+          environment: currentWorkspace?.environments.find((env) => env.slug === envSlug),
+          secretPath
+        }
+      : {
+          type,
+          isAutoRotationEnabled: true,
+          rotationInterval: DEFAULT_ROTATION_INTERVAL,
+          rotateAtUtc: {
+            hours: 0,
+            minutes: 0
+          },
+          environment: currentWorkspace?.environments.find((env) => env.slug === envSlug),
+          secretPath,
+          ...rotationOption!.template
+        },
+    reValidateMode: "onChange"
+  });
+
+  const onSubmit = async ({
+    environment,
+    connection,
+
+    ...formData
+  }: TSecretRotationV2Form) => {
+    const mutation = secretRotation
+      ? updateSecretRotation.mutateAsync({
+          rotationId: secretRotation.id,
+          projectId: secretRotation.projectId,
+          ...formData
+        })
+      : createSecretRotation.mutateAsync({
+          ...formData,
+
+          connectionId: connection.id,
+          environment: environment.slug,
+          projectId: currentWorkspace.id
+        });
+    try {
+      const rotation = await mutation;
+
+      createNotification({
+        text: `Successfully ${secretRotation ? "updated" : "created"} ${rotationType} Rotation`,
+        type: "success"
+      });
+      onComplete(rotation);
+    } catch (err: any) {
+      createNotification({
+        title: `Failed to ${secretRotation ? "update" : "create"} ${rotationType} Rotation`,
+        text: err.message,
+        type: "error"
+      });
+    }
+  };
+
+  const handlePrev = () => {
+    if (selectedTabIndex === 0) {
+      onCancel();
+      return;
+    }
+
+    setSelectedTabIndex((prev) => prev - 1);
+  };
+
+  const { handleSubmit, trigger } = formMethods;
+
+  const isStepValid = async (index: number) => trigger(FORM_TABS[index].fields);
+
+  const isFinalStep = selectedTabIndex === FORM_TABS.length - 1;
+
+  const handleNext = async () => {
+    if (isFinalStep) {
+      handleSubmit(onSubmit)();
+      return;
+    }
+
+    const isValid = await isStepValid(selectedTabIndex);
+
+    if (!isValid) return;
+
+    setSelectedTabIndex((prev) => prev + 1);
+  };
+
+  const isTabEnabled = async (index: number) => {
+    let isEnabled = true;
+    for (let i = index - 1; i >= 0; i -= 1) {
+      // eslint-disable-next-line no-await-in-loop
+      isEnabled = isEnabled && (await isStepValid(i));
+    }
+
+    return isEnabled;
+  };
+
+  return (
+    <form className={twMerge(isFinalStep && "max-h-[70vh] overflow-y-auto")}>
+      <FormProvider {...formMethods}>
+        <Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
+          <Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
+            {FORM_TABS.map((tab, index) => (
+              <Tab
+                onClick={async (e) => {
+                  e.preventDefault();
+                  const isEnabled = await isTabEnabled(index);
+                  setSelectedTabIndex((prev) => (isEnabled ? index : prev));
+                }}
+                className={({ selected }) =>
+                  `w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
+                    selected
+                      ? "border-b-2 border-mineshaft-300 text-mineshaft-200"
+                      : "text-bunker-300"
+                  }`
+                }
+                key={tab.key}
+              >
+                {index + 1}. {tab.name}
+              </Tab>
+            ))}
+          </Tab.List>
+          <Tab.Panels>
+            <Tab.Panel>
+              <SecretRotationV2ConfigurationFields
+                isUpdate={Boolean(secretRotation)}
+                environments={environments}
+              />
+            </Tab.Panel>
+            <Tab.Panel>
+              <SecretRotationV2ParametersFields />
+            </Tab.Panel>
+            <Tab.Panel>
+              <SecretRotationV2SecretsMappingFields />
+            </Tab.Panel>
+            <Tab.Panel>
+              <SecretRotationV2DetailsFields />
+            </Tab.Panel>
+            <Tab.Panel>
+              <SecretRotationV2ReviewFields />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </FormProvider>
+      <div className="flex w-full flex-row-reverse justify-between gap-4 pt-4">
+        <Button onClick={handleNext} colorSchema="secondary">
+          {isFinalStep ? `${secretRotation ? "Update" : "Create"} Secret Rotation` : "Next"}
+        </Button>
+        <Button onClick={handlePrev} colorSchema="secondary">
+          Back
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx

@@ -0,0 +1,28 @@
+import { useFormContext } from "react-hook-form";
+
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { TSecretRotationV2Form } from "../schemas";
+import { SqlRotationParametersFields } from "./shared";
+
+const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
+  [SecretRotation.PostgresCredentials]: SqlRotationParametersFields,
+  [SecretRotation.MsSqlCredentials]: SqlRotationParametersFields
+};
+
+export const SecretRotationV2ParametersFields = () => {
+  const { watch } = useFormContext<TSecretRotationV2Form>();
+
+  const rotationType = watch("type");
+
+  const Component = COMPONENT_MAP[rotationType];
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Configure the required parameters for this Secret Rotation.
+      </p>
+      <Component />
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/index.ts

@@ -0,0 +1 @@
+export * from "./SecretRotationV2ParametersFields";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/SqlRotationParametersFields.tsx

@@ -0,0 +1,67 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
+import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
+
+export const SqlRotationParametersFields = () => {
+  const { control, watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
+    }
+  >();
+
+  const type = watch("type");
+
+  const { rotationOption } = useSecretRotationV2Option(type);
+
+  return (
+    <>
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Database Username 1"
+          >
+            <Input value={value} onChange={onChange} placeholder="infiscal_user_1" />
+          </FormControl>
+        )}
+        control={control}
+        name="parameters.username1"
+      />
+      <Controller
+        render={({ field: { value, onChange }, fieldState: { error } }) => (
+          <FormControl
+            isError={Boolean(error)}
+            errorText={error?.message}
+            label="Database Username 2"
+          >
+            <Input value={value} onChange={onChange} placeholder="infiscal_user_2" />
+          </FormControl>
+        )}
+        control={control}
+        name="parameters.username2"
+      />
+      <NoticeBannerV2 title="Example Create User Statement">
+        <p className="mb-3 text-sm text-mineshaft-300">
+          Infisical requires two database users to be created for rotation.
+        </p>
+        <p className="mb-3 text-sm text-mineshaft-300">
+          These users are intended to be solely managed by Infisical. Altering their login after
+          rotation may cause unexpected failure.
+        </p>
+        <p className="mb-3 text-sm text-mineshaft-300">
+          Below is an example statement for creating the required users. You may need to modify it
+          to suit your needs.
+        </p>
+        <p className="mb-3 text-sm">
+          <pre className="max-h-[10rem] overflow-y-auto whitespace-pre-wrap rounded border border-mineshaft-700 bg-mineshaft-800 p-2 text-mineshaft-300">
+            {rotationOption!.template.createUserStatement}
+          </pre>
+        </p>
+      </NoticeBannerV2>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/shared/index.ts

@@ -0,0 +1 @@
+export * from "./SqlRotationParametersFields";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx

@@ -0,0 +1,61 @@
+import { useFormContext } from "react-hook-form";
+import { format } from "date-fns";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { SqlRotationReviewFields } from "@app/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared";
+import { GenericFieldLabel } from "@app/components/v2";
+import { getRotateAtLocal } from "@app/helpers/secretRotationsV2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
+  [SecretRotation.PostgresCredentials]: SqlRotationReviewFields,
+  [SecretRotation.MsSqlCredentials]: SqlRotationReviewFields
+};
+
+export const SecretRotationV2ReviewFields = () => {
+  const { watch } = useFormContext<TSecretRotationV2Form>();
+
+  const {
+    environment,
+    secretPath,
+    connection,
+    type,
+    name,
+    description,
+    rotationInterval,
+    rotateAtUtc
+  } = watch();
+
+  const Component = COMPONENT_MAP[type];
+
+  return (
+    <div className="mb-4 flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Configuration</span>
+        </div>
+        <div className="flex flex-wrap gap-x-8 gap-y-2">
+          <GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>
+          <GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
+          <GenericFieldLabel label="Secret Path">{secretPath}</GenericFieldLabel>
+          <GenericFieldLabel label="Rotation Interval">
+            {rotationInterval} Day{rotationInterval > 1 ? "s" : ""}
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Rotate At">
+            {format(getRotateAtLocal(rotateAtUtc), "h:mm aa")}
+          </GenericFieldLabel>
+        </div>
+      </div>
+      <Component />
+      <div className="flex flex-col gap-3">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Details</span>
+        </div>
+        <div className="flex flex-wrap gap-x-8 gap-y-2">
+          <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
+          <GenericFieldLabel label="Description">{description}</GenericFieldLabel>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/index.ts

@@ -0,0 +1 @@
+export * from "./SecretRotationReviewFields";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/SqlRotationReviewFields.tsx

@@ -0,0 +1,41 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const SqlRotationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
+    }
+  >();
+
+  const [{ username1, username2 }, { username, password }] = watch([
+    "parameters",
+    "secretsMapping"
+  ]);
+
+  return (
+    <>
+      <div className="flex flex-col gap-3">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Parameters</span>
+        </div>
+        <div className="flex flex-wrap gap-x-8 gap-y-2">
+          <GenericFieldLabel label="Database Username 1">{username1}</GenericFieldLabel>
+          <GenericFieldLabel label="Database Username 2">{username2}</GenericFieldLabel>
+        </div>
+      </div>
+      <div className="flex flex-col gap-3">
+        <div className="w-full border-b border-mineshaft-600">
+          <span className="text-sm text-mineshaft-300">Secrets Mapping</span>
+        </div>
+        <div className="flex flex-wrap gap-x-8 gap-y-2">
+          <GenericFieldLabel label="Username">{username}</GenericFieldLabel>
+          <GenericFieldLabel label="Password">{password}</GenericFieldLabel>
+        </div>
+      </div>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/shared/index.ts

@@ -0,0 +1 @@
+export * from "./SqlRotationReviewFields";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx

@@ -0,0 +1,28 @@
+import { useFormContext } from "react-hook-form";
+
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { TSecretRotationV2Form } from "../schemas";
+import { SqlRotationSecretsMappingFields } from "./shared";
+
+const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
+  [SecretRotation.PostgresCredentials]: SqlRotationSecretsMappingFields,
+  [SecretRotation.MsSqlCredentials]: SqlRotationSecretsMappingFields
+};
+
+export const SecretRotationV2SecretsMappingFields = () => {
+  const { watch } = useFormContext<TSecretRotationV2Form>();
+
+  const rotationType = watch("type");
+
+  const Component = COMPONENT_MAP[rotationType];
+
+  return (
+    <>
+      <p className="mb-4 text-sm text-bunker-300">
+        Map the rotated credentials to secrets in your Infisical project.
+      </p>
+      <Component />
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/index.ts

@@ -0,0 +1 @@
+export * from "./SecretRotationV2SecretsMappingFields";

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/SqlRotationSecretsMappingFields.tsx

@@ -0,0 +1,88 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { faArrowRight, faKey } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { Badge, FormControl, FormLabel, Input } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const SqlRotationSecretsMappingFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.PostgresCredentials; // all sql rotations share these fields
+    }
+  >();
+
+  const items = [
+    {
+      name: "Username",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input value={value} onChange={onChange} placeholder="DB_USERNAME" />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.username"
+        />
+      )
+    },
+    {
+      name: "Password",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input value={value} onChange={onChange} placeholder="DB_PASSWORD" />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.password"
+        />
+      )
+    }
+  ];
+
+  return (
+    <div className="w-full overflow-hidden">
+      <table className="w-full table-auto">
+        <thead>
+          <tr className="text-left">
+            <th className="whitespace-nowrap">
+              <FormLabel label="Rotated Credentials" />
+            </th>
+            <th />
+            <th>
+              <FormLabel
+                tooltipClassName="max-w-sm"
+                tooltipText="The name of the secret that the active credentials will be mapped to."
+                label="Secret Name"
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map(({ name, input }) => (
+            <tr key={name}>
+              <td className="whitespace-nowrap">
+                <div className="mb-4 flex h-full items-start justify-center">
+                  <Badge className="pointer-events-none flex h-[36px] w-full items-center justify-center gap-1.5 whitespace-nowrap border border-mineshaft-600 bg-mineshaft-600 text-bunker-200">
+                    <FontAwesomeIcon icon={faKey} />
+                    <span>{name}</span>
+                  </Badge>
+                </div>
+              </td>
+              <td className="whitespace-nowrap pl-5 pr-5">
+                <div className="mb-4 flex items-center justify-center">
+                  <FontAwesomeIcon className="text-mineshaft-400" icon={faArrowRight} />
+                </div>
+              </td>
+              <td className="w-full">{input}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/shared/index.ts

@@ -0,0 +1 @@
+export * from "./SqlRotationSecretsMappingFields";

frontend/src/components/secret-rotations-v2/forms/index.ts

@@ -0,0 +1 @@
+export * from "./SecretRotationV2Form";

frontend/src/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+import { slugSchema } from "@app/lib/schemas";
+
+export const BaseSecretRotationSchema = z.object({
+  name: slugSchema({ field: "Name" }),
+  description: z.string().trim().max(256, "Cannot exceed 256 characters").nullish(),
+  connection: z.object({ name: z.string(), id: z.string().uuid() }),
+  environment: z.object({ slug: z.string(), id: z.string(), name: z.string() }),
+  secretPath: z.string().min(1, "Secret path required"),
+  isAutoRotationEnabled: z.boolean(),
+  rotationInterval: z.coerce.number(),
+  rotateAtUtc: z.object({
+    hours: z.number(),
+    minutes: z.number()
+  })
+});

frontend/src/components/secret-rotations-v2/forms/schemas/index.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+import { MsSqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/mssql-credentials-rotation-schema";
+import { PostgresCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/postgres-credentials-rotation-schema";
+
+const SecretRotationUnionSchema = z.discriminatedUnion("type", [
+  PostgresCredentialsRotationSchema,
+  MsSqlCredentialsRotationSchema
+]);
+
+export const SecretRotationV2FormSchema = SecretRotationUnionSchema;
+
+export type TSecretRotationV2Form = z.infer<typeof SecretRotationV2FormSchema>;

frontend/src/components/secret-rotations-v2/forms/schemas/mssql-credentials-rotation-schema.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
+import { SqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/shared";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const MsSqlCredentialsRotationSchema = z
+  .object({
+    type: z.literal(SecretRotation.MsSqlCredentials)
+  })
+  .merge(SqlCredentialsRotationSchema)
+  .merge(BaseSecretRotationSchema);

frontend/src/components/secret-rotations-v2/forms/schemas/postgres-credentials-rotation-schema.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
+import { SqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/shared";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const PostgresCredentialsRotationSchema = z
+  .object({
+    type: z.literal(SecretRotation.PostgresCredentials)
+  })
+  .merge(SqlCredentialsRotationSchema)
+  .merge(BaseSecretRotationSchema);

frontend/src/components/secret-rotations-v2/forms/schemas/shared/index.ts

@@ -0,0 +1 @@
+export * from "./sql-credentials-rotation-schema";

frontend/src/components/secret-rotations-v2/forms/schemas/shared/sql-credentials-rotation-schema.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+import { SecretNameSchema } from "@app/lib/schemas";
+
+export const SqlCredentialsRotationSchema = z.object({
+  parameters: z.object({
+    username1: z.string().trim().min(1, "Database Username 1 Required"),
+    username2: z.string().trim().min(1, "Database Username 2 Required")
+  }),
+  secretsMapping: z.object({
+    username: SecretNameSchema,
+    password: SecretNameSchema
+  })
+});

frontend/src/components/secret-rotations-v2/index.ts

@@ -0,0 +1 @@
+export * from "./CreateSecretRotationV2Modal";

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsParameterStoreSyncReviewFields.tsx

@@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form";
 import { faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
@@ -17,9 +17,9 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
 
   return (
     <>
-      {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
+      {keyId && <GenericFieldLabel label="KMS Key">{keyId}</GenericFieldLabel>}
       {tags && tags.length > 0 && (
-        <SecretSyncLabel label="Resource Tags">
+        <GenericFieldLabel label="Resource Tags">
           <Tooltip
             side="right"
             className="max-w-xl p-1"
@@ -49,12 +49,12 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
               </Badge>
             </div>
           </Tooltip>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
       )}
       {syncSecretMetadataAsTags && (
-        <SecretSyncLabel label="Sync Secret Metadata as Resource Tags">
+        <GenericFieldLabel label="Sync Secret Metadata as Resource Tags">
           <Badge variant="success">Enabled</Badge>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
       )}
     </>
   );
@@ -71,13 +71,13 @@ export const AwsParameterStoreDestinationReviewFields = () => {
 
   return (
     <>
-      <SecretSyncLabel label="Region">
+      <GenericFieldLabel label="Region">
         {awsRegion?.name}
         <Badge className="ml-1" variant="success">
           {awsRegion?.slug}{" "}
         </Badge>
-      </SecretSyncLabel>
-      <SecretSyncLabel label="Path">{path}</SecretSyncLabel>
+      </GenericFieldLabel>
+      <GenericFieldLabel label="Path">{path}</GenericFieldLabel>
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AwsSecretsManagerSyncReviewFields.tsx

@@ -2,7 +2,7 @@ import { useFormContext } from "react-hook-form";
 import { faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { Badge, Table, TBody, Td, Th, THead, Tooltip, Tr } from "@app/components/v2";
 import { AWS_REGIONS } from "@app/helpers/appConnections";
@@ -24,17 +24,17 @@ export const AwsSecretsManagerSyncReviewFields = () => {
 
   return (
     <>
-      <SecretSyncLabel label="Region">
+      <GenericFieldLabel label="Region">
         {awsRegion?.name}
         <Badge className="ml-1" variant="success">
           {awsRegion?.slug}{" "}
         </Badge>
-      </SecretSyncLabel>
-      <SecretSyncLabel className="capitalize" label="Mapping Behavior">
+      </GenericFieldLabel>
+      <GenericFieldLabel className="capitalize" label="Mapping Behavior">
         {mappingBehavior}
-      </SecretSyncLabel>
+      </GenericFieldLabel>
       {mappingBehavior === AwsSecretsManagerSyncMappingBehavior.ManyToOne && (
-        <SecretSyncLabel label="Secret Name">{secretName}</SecretSyncLabel>
+        <GenericFieldLabel label="Secret Name">{secretName}</GenericFieldLabel>
       )}
     </>
   );
@@ -49,9 +49,9 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
 
   return (
     <>
-      {keyId && <SecretSyncLabel label="KMS Key">{keyId}</SecretSyncLabel>}
+      {keyId && <GenericFieldLabel label="KMS Key">{keyId}</GenericFieldLabel>}
       {tags && tags.length > 0 && (
-        <SecretSyncLabel label="Tags">
+        <GenericFieldLabel label="Tags">
           <Tooltip
             side="right"
             className="max-w-xl p-1"
@@ -81,12 +81,12 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
               </Badge>
             </div>
           </Tooltip>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
       )}
       {syncSecretMetadataAsTags && (
-        <SecretSyncLabel label="Sync Secret Metadata as Resource Tags">
+        <GenericFieldLabel label="Sync Secret Metadata as Resource Tags">
           <Badge variant="success">Enabled</Badge>
-        </SecretSyncLabel>
+        </GenericFieldLabel>
       )}
     </>
   );

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AzureAppConfigurationSyncReviewFields.tsx

@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -13,8 +13,8 @@ export const AzureAppConfigurationSyncReviewFields = () => {
 
   return (
     <>
-      <SecretSyncLabel label="Configuration URL">{vaultBaseUrl}</SecretSyncLabel>
-      <SecretSyncLabel label="Label">{label}</SecretSyncLabel>
+      <GenericFieldLabel label="Configuration URL">{vaultBaseUrl}</GenericFieldLabel>
+      <GenericFieldLabel label="Label">{label}</GenericFieldLabel>
     </>
   );
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/AzureKeyVaultSyncReviewFields.tsx

@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -8,5 +8,5 @@ export const AzureKeyVaultSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.AzureKeyVault }>();
   const vaultBaseUrl = watch("destinationConfig.vaultBaseUrl");
 
-  return <SecretSyncLabel label="Vault URL">{vaultBaseUrl}</SecretSyncLabel>;
+  return <GenericFieldLabel label="Vault URL">{vaultBaseUrl}</GenericFieldLabel>;
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/DatabricksSyncReviewFields.tsx

@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -8,5 +8,5 @@ export const DatabricksSyncReviewFields = () => {
   const { watch } = useFormContext<TSecretSyncForm & { destination: SecretSync.Databricks }>();
   const scope = watch("destinationConfig.scope");
 
-  return <SecretSyncLabel label="Secret Scope">{scope}</SecretSyncLabel>;
+  return <GenericFieldLabel label="Secret Scope">{scope}</GenericFieldLabel>;
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/GcpSyncReviewFields.tsx

@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 
@@ -10,5 +10,5 @@ export const GcpSyncReviewFields = () => {
   >();
   const projectId = watch("destinationConfig.projectId");
 
-  return <SecretSyncLabel label="Project ID">{projectId}</SecretSyncLabel>;
+  return <GenericFieldLabel label="Project ID">{projectId}</GenericFieldLabel>;
 };

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/GitHubSyncReviewFields.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { GitHubSyncScope, TGitHubSync } from "@app/hooks/api/secretSyncs/types/github-sync";
@@ -16,30 +16,30 @@ export const GitHubSyncReviewFields = () => {
   switch (config.scope) {
     case GitHubSyncScope.Repository:
       ScopeComponents = (
-        <SecretSyncLabel label="Repository">
+        <GenericFieldLabel label="Repository">
           {config.owner}/{config.repo}
-        </SecretSyncLabel>
+        </GenericFieldLabel>
       );
       break;
     case GitHubSyncScope.Organization:
       ScopeComponents = (
         <>
-          <SecretSyncLabel label="Organization">{config.org}</SecretSyncLabel>
-          <SecretSyncLabel className="capitalize" label="Visibility">
+          <GenericFieldLabel label="Organization">{config.org}</GenericFieldLabel>
+          <GenericFieldLabel className="capitalize" label="Visibility">
             {config.visibility}
-          </SecretSyncLabel>
+          </GenericFieldLabel>
         </>
       );
       break;
     case GitHubSyncScope.RepositoryEnvironment:
       ScopeComponents = (
         <>
-          <SecretSyncLabel label="Repository">
+          <GenericFieldLabel label="Repository">
             {config.owner}/{config.repo}
-          </SecretSyncLabel>
-          <SecretSyncLabel className="capitalize" label="Environment">
+          </GenericFieldLabel>
+          <GenericFieldLabel className="capitalize" label="Environment">
             {config.env}
-          </SecretSyncLabel>
+          </GenericFieldLabel>
         </>
       );
 
@@ -52,9 +52,9 @@ export const GitHubSyncReviewFields = () => {
 
   return (
     <>
-      <SecretSyncLabel className="capitalize" label="Scope">
+      <GenericFieldLabel className="capitalize" label="Scope">
         {config.scope.replace("-", " ")}
-      </SecretSyncLabel>
+      </GenericFieldLabel>
       {ScopeComponents}
     </>
   );

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/HumanitecSyncReviewFields.tsx

@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
 import { HumanitecSyncScope } from "@app/hooks/api/secretSyncs/types/humanitec-sync";
@@ -14,10 +14,10 @@ export const HumanitecSyncReviewFields = () => {
 
   return (
     <>
-      <SecretSyncLabel label="Organization">{orgId}</SecretSyncLabel>
-      <SecretSyncLabel label="Application">{appId}</SecretSyncLabel>
+      <GenericFieldLabel label="Organization">{orgId}</GenericFieldLabel>
+      <GenericFieldLabel label="Application">{appId}</GenericFieldLabel>
       {scope === HumanitecSyncScope.Environment && (
-        <SecretSyncLabel label="Environment">{envId}</SecretSyncLabel>
+        <GenericFieldLabel label="Environment">{envId}</GenericFieldLabel>
       )}
     </>
   );

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/SecretSyncReviewFields.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { Badge } from "@app/components/v2";
 import { SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP, SECRET_SYNC_MAP } from "@app/helpers/secretSyncs";
@@ -87,8 +87,8 @@ export const SecretSyncReviewFields = () => {
           <span className="text-sm text-mineshaft-300">Source</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <SecretSyncLabel label="Environment">{environment.name}</SecretSyncLabel>
-          <SecretSyncLabel label="Secret Path">{secretPath}</SecretSyncLabel>
+          <GenericFieldLabel label="Environment">{environment.name}</GenericFieldLabel>
+          <GenericFieldLabel label="Secret Path">{secretPath}</GenericFieldLabel>
         </div>
       </div>
       <div className="flex flex-col gap-3">
@@ -96,7 +96,7 @@ export const SecretSyncReviewFields = () => {
           <span className="text-sm text-mineshaft-300">Destination</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <SecretSyncLabel label="Connection">{connection.name}</SecretSyncLabel>
+          <GenericFieldLabel label="Connection">{connection.name}</GenericFieldLabel>
           {DestinationFieldsComponent}
         </div>
       </div>
@@ -105,21 +105,21 @@ export const SecretSyncReviewFields = () => {
           <span className="text-sm text-mineshaft-300">Sync Options</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <SecretSyncLabel label="Auto-Sync">
+          <GenericFieldLabel label="Auto-Sync">
             <Badge variant={isAutoSyncEnabled ? "success" : "danger"}>
               {isAutoSyncEnabled ? "Enabled" : "Disabled"}
             </Badge>
-          </SecretSyncLabel>
-          <SecretSyncLabel label="Initial Sync Behavior">
+          </GenericFieldLabel>
+          <GenericFieldLabel label="Initial Sync Behavior">
             {SECRET_SYNC_INITIAL_SYNC_BEHAVIOR_MAP[initialSyncBehavior](destinationName).name}
-          </SecretSyncLabel>
+          </GenericFieldLabel>
           {/* <SecretSyncLabel label="Prepend Prefix">{prependPrefix}</SecretSyncLabel>
           <SecretSyncLabel label="Append Suffix">{appendSuffix}</SecretSyncLabel> */}
           {AdditionalSyncOptionsFieldsComponent}
           {disableSecretDeletion && (
-            <SecretSyncLabel label="Secret Deletion">
+            <GenericFieldLabel label="Secret Deletion">
               <Badge variant="primary">Disabled</Badge>
-            </SecretSyncLabel>
+            </GenericFieldLabel>
           )}
         </div>
       </div>
@@ -128,8 +128,8 @@ export const SecretSyncReviewFields = () => {
           <span className="text-sm text-mineshaft-300">Details</span>
         </div>
         <div className="flex flex-wrap gap-x-8 gap-y-2">
-          <SecretSyncLabel label="Name">{name}</SecretSyncLabel>
-          <SecretSyncLabel label="Description">{description}</SecretSyncLabel>
+          <GenericFieldLabel label="Name">{name}</GenericFieldLabel>
+          <GenericFieldLabel label="Description">{description}</GenericFieldLabel>
         </div>
       </div>
     </div>

frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/TerraformCloudSyncReviewFields.tsx

@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
-import { SecretSyncLabel } from "@app/components/secret-syncs";
+import { GenericFieldLabel } from "@app/components/secret-syncs";
 import { TSecretSyncForm } from "@app/components/secret-syncs/forms/schemas";
 import { TerraformCloudSyncScope } from "@app/hooks/api/appConnections/terraform-cloud";
 import { SecretSync } from "@app/hooks/api/secretSyncs";
@@ -14,14 +14,14 @@ export const TerraformCloudSyncReviewFields = () => {
 
   return (
     <>
-      <SecretSyncLabel label="Organization">{orgId}</SecretSyncLabel>
+      <GenericFieldLabel label="Organization">{orgId}</GenericFieldLabel>
       {scope === TerraformCloudSyncScope.VariableSet && (
-        <SecretSyncLabel label="Variable Set">{destinationName}</SecretSyncLabel>
+        <GenericFieldLabel label="Variable Set">{destinationName}</GenericFieldLabel>
       )}
       {scope === TerraformCloudSyncScope.Workspace && (
-        <SecretSyncLabel label="Workspace">{destinationName}</SecretSyncLabel>
+        <GenericFieldLabel label="Workspace">{destinationName}</GenericFieldLabel>
       )}
-      <SecretSyncLabel label="Category">{category}</SecretSyncLabel>
+      <GenericFieldLabel label="Category">{category}</GenericFieldLabel>
     </>
   );
 };

frontend/src/components/secret-syncs/index.ts

@@ -1,9 +1,9 @@
+export * from "../v2/GenericFieldLabel";
 export * from "./CreateSecretSyncModal";
 export * from "./DeleteSecretSyncModal";
 export * from "./EditSecretSyncModal";
 export * from "./SecretSyncImportSecretsModal";
 export * from "./SecretSyncImportStatusBadge";
-export * from "./SecretSyncLabel";
 export * from "./SecretSyncRemoveSecretsModal";
 export * from "./SecretSyncRemoveStatusBadge";
 export * from "./SecretSyncStatusBadge";

frontend/src/components/v2/Blur/Blur.tsx

@@ -9,7 +9,7 @@ interface IProps {
 
 export const Blur = ({ className, tooltipText }: IProps) => {
   return (
-    <Tooltip content={tooltipText} isDisabled={!tooltipText}>
+    <Tooltip content={tooltipText} className="max-w-md" isDisabled={!tooltipText}>
       <div
         className={twMerge("flex w-80 flex-grow items-center py-1 pl-4 pr-2", className)}
         tabIndex={0}

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -1,14 +1,17 @@
 import { ChangeEventHandler, useState } from "react";
-import { DayPicker, DayPickerProps } from "react-day-picker";
+import { DayPicker, DayPickerProps, getDefaultClassNames, UI } from "react-day-picker";
 import { faCalendar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverContentProps, PopoverProps } from "@radix-ui/react-popover";
 import { format, setHours, setMinutes } from "date-fns";
+import { twMerge } from "tailwind-merge";
 
 import { Button } from "../Button";
 import { Input } from "../Input";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popoverv2";
 
+const defaultClassNames = getDefaultClassNames();
+
 export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
   value?: Date;
   onChange: (date?: Date) => void;
@@ -58,7 +61,30 @@ export const DatePicker = ({
           {value ? format(value, dateFormat) : "Pick a date and time"}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-fit p-2" {...popUpContentProps}>
+      <PopoverContent
+        {...popUpContentProps}
+        className={twMerge(
+          "w-fit border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter",
+          popUpContentProps.className
+        )}
+      >
+        <div className="px-2 pt-4">
+          <DayPicker
+            {...props}
+            mode="single"
+            selected={value}
+            onSelect={handleDaySelect}
+            className="font-inter text-mineshaft-200"
+            classNames={{
+              today: "text-primary border-primary",
+              selected: " text-mineshaft-100 bg-mineshaft-500",
+              root: `text-mineshaft-300  ${defaultClassNames}`,
+              [UI.DayButton]: "p-3 rounded hover:text-mineshaft-100",
+              [UI.Weekday]: "px-3 pt-3",
+              [UI.Chevron]: "fill-mineshaft-300"
+            }}
+          />
+        </div>
         <div className="mx-4 my-4">
           <Input
             type="time"
@@ -67,17 +93,6 @@ export const DatePicker = ({
             className="bg-mineshaft-700 text-white [color-scheme:dark]"
           />
         </div>
-        <DayPicker
-          {...props}
-          mode="single"
-          selected={value}
-          onSelect={handleDaySelect}
-          modifiersStyles={{
-            selected: {
-              background: "#cad62d"
-            }
-          }}
-        />
       </PopoverContent>
     </Popover>
   );

frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx

@@ -8,7 +8,7 @@ type Props = {
   labelClassName?: string;
 };
 
-export const SecretSyncLabel = ({ label, children, className, labelClassName }: Props) => {
+export const GenericFieldLabel = ({ label, children, className, labelClassName }: Props) => {
   return (
     <div className={className}>
       <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>

frontend/src/components/v2/GenericFieldLabel/index.ts

@@ -0,0 +1 @@
+export * from "./GenericFieldLabel";

frontend/src/components/v2/NoticeBannerV2/NoticeBannerV2.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  title: string;
+  children: ReactNode;
+  className?: string;
+};
+
+export const NoticeBannerV2 = ({ title, children, className }: Props) => {
+  return (
+    <div
+      className={twMerge(
+        "flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5",
+        className
+      )}
+    >
+      <div className="mb-1 flex items-center text-sm">
+        <FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
+        {title}
+      </div>
+      {children}
+    </div>
+  );
+};

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -9,12 +9,12 @@ type Props = {
 };
 
 export const PageHeader = ({ title, description, children, className }: Props) => (
-  <div className={twMerge("mb-4", className)}>
+  <div className={twMerge("mb-4 w-full", className)}>
     <div className="flex w-full justify-between">
       <div className="w-full">
         <h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
       </div>
-      <div>{children}</div>
+      <div className="flex items-center">{children}</div>
     </div>
     <div className="mt-2 text-gray-400">{description}</div>
   </div>

frontend/src/components/v2/PasswordGenerator/PasswordGenerator.tsx

@@ -0,0 +1,273 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { faCheck, faCopy, faKey, faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, Checkbox, IconButton, Slider } from "@app/components/v2";
+import { useTimedReset } from "@app/hooks";
+
+type PasswordOptionsType = {
+  length: number;
+  useUppercase: boolean;
+  useLowercase: boolean;
+  useNumbers: boolean;
+  useSpecialChars: boolean;
+};
+
+type PasswordGeneratorModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onUsePassword?: (password: string) => void;
+  minLength?: number;
+  maxLength?: number;
+};
+
+const PasswordGeneratorModal = ({
+  isOpen,
+  onClose,
+  onUsePassword,
+  minLength = 12,
+  maxLength = 64
+}: PasswordGeneratorModalProps) => {
+  const [copyText, isCopying, setCopyText] = useTimedReset<string>({
+    initialState: "Copy"
+  });
+  const [refresh, setRefresh] = useState(false);
+  const [passwordOptions, setPasswordOptions] = useState<PasswordOptionsType>({
+    length: minLength,
+    useUppercase: true,
+    useLowercase: true,
+    useNumbers: true,
+    useSpecialChars: true
+  });
+
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const generatePassword = () => {
+    const charset = {
+      uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+      lowercase: "abcdefghijklmnopqrstuvwxyz",
+      numbers: "0123456789",
+      specialChars: "-_.~!*"
+    };
+
+    let availableChars = "";
+    if (passwordOptions.useUppercase) availableChars += charset.uppercase;
+    if (passwordOptions.useLowercase) availableChars += charset.lowercase;
+    if (passwordOptions.useNumbers) availableChars += charset.numbers;
+    if (passwordOptions.useSpecialChars) availableChars += charset.specialChars;
+
+    if (availableChars === "") availableChars = charset.lowercase + charset.numbers;
+
+    let newPassword = "";
+    for (let i = 0; i < passwordOptions.length; i += 1) {
+      const randomIndex = Math.floor(Math.random() * availableChars.length);
+      newPassword += availableChars[randomIndex];
+    }
+
+    return newPassword;
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+          onClose();
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {};
+  }, [isOpen, onClose]);
+
+  const password = useMemo(() => {
+    return generatePassword();
+  }, [passwordOptions, refresh]);
+
+  const copyToClipboard = () => {
+    navigator.clipboard
+      .writeText(password)
+      .then(() => {
+        setCopyText("Copied");
+      })
+      .catch(() => {
+        setCopyText("Copy failed");
+      });
+  };
+
+  const usePassword = () => {
+    if (onUsePassword) {
+      onUsePassword(password);
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4">
+      <div
+        ref={modalRef}
+        className="w-full max-w-lg rounded-lg border border-mineshaft-600 bg-mineshaft-800 shadow-xl"
+      >
+        <div className="p-6">
+          <h2 className="mb-1 text-xl font-semibold text-bunker-200">Password Generator</h2>
+          <p className="mb-6 text-sm text-bunker-400">Generate strong unique passwords</p>
+
+          <div className="relative mb-4 rounded-md bg-mineshaft-900 p-4">
+            <div className="flex items-center justify-between">
+              <div className="w-4/5 select-all break-all pr-2 font-mono text-lg">{password}</div>
+              <div className="flex flex-col gap-1">
+                <Button
+                  size="xs"
+                  colorSchema="secondary"
+                  variant="outline_bg"
+                  onClick={() => setRefresh((prev) => !prev)}
+                  className="w-full text-bunker-300 hover:text-bunker-100"
+                >
+                  <FontAwesomeIcon icon={faRefresh} className="mr-1 h-3 w-3" />
+                  Refresh
+                </Button>
+
+                <Button
+                  size="xs"
+                  colorSchema="secondary"
+                  variant="outline_bg"
+                  onClick={copyToClipboard}
+                  className="w-full text-bunker-300 hover:text-bunker-100"
+                >
+                  <FontAwesomeIcon icon={isCopying ? faCheck : faCopy} className="mr-1 h-3 w-3" />
+                  {copyText}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <div className="mb-1 flex items-center justify-between">
+              <label htmlFor="password-length" className="text-sm text-bunker-300">
+                Password length: {passwordOptions.length}
+              </label>
+            </div>
+            <Slider
+              id="password-length"
+              min={minLength}
+              max={maxLength}
+              value={passwordOptions.length}
+              onChange={(value) => setPasswordOptions({ ...passwordOptions, length: value })}
+              className="mb-1"
+              aria-labelledby="password-length-label"
+            />
+          </div>
+
+          <div className="mb-6 flex flex-row justify-between gap-2">
+            <Checkbox
+              id="useUppercase"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useUppercase}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useUppercase: checked as boolean })
+              }
+            >
+              A-Z
+            </Checkbox>
+
+            <Checkbox
+              id="useLowercase"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useLowercase}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useLowercase: checked as boolean })
+              }
+            >
+              a-z
+            </Checkbox>
+
+            <Checkbox
+              id="useNumbers"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useNumbers}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useNumbers: checked as boolean })
+              }
+            >
+              0-9
+            </Checkbox>
+
+            <Checkbox
+              id="useSpecialChars"
+              className="mr-2 data-[state=checked]:bg-primary"
+              isChecked={passwordOptions.useSpecialChars}
+              onCheckedChange={(checked) =>
+                setPasswordOptions({ ...passwordOptions, useSpecialChars: checked as boolean })
+              }
+            >
+              -_.~!*
+            </Checkbox>
+          </div>
+
+          <div className="flex justify-end">
+            <Button size="sm" colorSchema="primary" variant="outline_bg" onClick={onClose}>
+              Close
+            </Button>
+            {onUsePassword && (
+              <Button
+                size="sm"
+                colorSchema="primary"
+                variant="outline_bg"
+                onClick={usePassword}
+                className="ml-2"
+              >
+                Use Password
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export type PasswordGeneratorProps = {
+  onUsePassword?: (password: string) => void;
+  isDisabled?: boolean;
+  minLength?: number;
+  maxLength?: number;
+};
+
+export const PasswordGenerator = ({
+  onUsePassword,
+  isDisabled = false,
+  minLength = 12,
+  maxLength = 64
+}: PasswordGeneratorProps) => {
+  const [showGenerator, setShowGenerator] = useState(false);
+
+  const toggleGenerator = () => {
+    setShowGenerator(!showGenerator);
+  };
+
+  return (
+    <>
+      <IconButton
+        ariaLabel="generate password"
+        colorSchema="secondary"
+        size="sm"
+        onClick={toggleGenerator}
+        isDisabled={isDisabled}
+        className="rounded text-bunker-400 transition-colors duration-150 hover:bg-mineshaft-700 hover:text-bunker-200"
+      >
+        <FontAwesomeIcon icon={faKey} />
+      </IconButton>
+
+      <PasswordGeneratorModal
+        isOpen={showGenerator}
+        onClose={() => setShowGenerator(false)}
+        onUsePassword={onUsePassword}
+        minLength={minLength}
+        maxLength={maxLength}
+      />
+    </>
+  );
+};

frontend/src/components/v2/PasswordGenerator/index.tsx

@@ -0,0 +1,2 @@
+export type { PasswordGeneratorProps } from "./PasswordGenerator";
+export { PasswordGenerator } from "./PasswordGenerator";

frontend/src/components/v2/Slider/Slider.tsx

@@ -0,0 +1,237 @@
+import {
+  forwardRef,
+  InputHTMLAttributes,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { cva, VariantProps } from "cva";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+  min: number;
+  max: number;
+  step?: number;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  showValue?: boolean;
+  valuePosition?: "top" | "right";
+  containerClassName?: string;
+  trackClassName?: string;
+  fillClassName?: string;
+  thumbClassName?: string;
+  onChange?: (value: number) => void;
+  onChangeComplete?: (value: number) => void;
+};
+
+const sliderTrackVariants = cva("h-1 w-full bg-mineshaft-600 rounded-full relative", {
+  variants: {
+    variant: {
+      default: "",
+      thin: "h-0.5",
+      thick: "h-1.5"
+    },
+    isDisabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: ""
+    }
+  }
+});
+
+const sliderFillVariants = cva("absolute h-full rounded-full", {
+  variants: {
+    variant: {
+      default: "bg-primary-500",
+      secondary: "bg-secondary-500",
+      danger: "bg-red-500"
+    },
+    isDisabled: {
+      true: "opacity-50",
+      false: ""
+    }
+  }
+});
+
+const sliderThumbVariants = cva(
+  "absolute w-4 h-4 rounded-full shadow transform -translate-x-1/2 -mt-1.5 focus:outline-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-500 focus:ring-2 focus:ring-primary-400/50",
+        secondary: "bg-secondary-500 focus:ring-2 focus:ring-secondary-400/50",
+        danger: "bg-red-500 focus:ring-2 focus:ring-red-400/50"
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "cursor-pointer"
+      },
+      size: {
+        sm: "w-3 h-3 -mt-1",
+        md: "w-4 h-4 -mt-1.5",
+        lg: "w-5 h-5 -mt-2"
+      }
+    }
+  }
+);
+
+const sliderContainerVariants = cva("relative inline-flex font-inter", {
+  variants: {
+    isFullWidth: {
+      true: "w-full",
+      false: ""
+    }
+  }
+});
+
+export type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> &
+  VariantProps<typeof sliderTrackVariants> &
+  VariantProps<typeof sliderThumbVariants> &
+  VariantProps<typeof sliderContainerVariants> &
+  Props;
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      className,
+      containerClassName,
+      trackClassName,
+      fillClassName,
+      thumbClassName,
+      min = 0,
+      max = 100,
+      step = 1,
+      value,
+      defaultValue,
+      isDisabled = false,
+      isFullWidth = true,
+      isRequired = false,
+      showValue = false,
+      valuePosition = "top",
+      variant = "default",
+      size = "md",
+      onChange,
+      onChangeComplete,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    let initialValue = min;
+    if (value !== undefined) {
+      initialValue = Number(value);
+    } else if (defaultValue !== undefined) {
+      initialValue = Number(defaultValue);
+    }
+
+    const [currentValue, setCurrentValue] = useState<number>(initialValue);
+    const [isDragging, setIsDragging] = useState(false);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const percentage = Math.max(0, Math.min(100, ((currentValue - min) / (max - min)) * 100));
+
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
+
+    useEffect(() => {
+      if (value !== undefined && Number(value) !== currentValue) {
+        setCurrentValue(Number(value));
+      }
+    }, [value, currentValue]);
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = Number(e.target.value);
+        setCurrentValue(newValue);
+        onChange?.(newValue);
+      },
+      [onChange]
+    );
+
+    const handleMouseDown = useCallback(() => {
+      if (!isDisabled) {
+        setIsDragging(true);
+      }
+    }, [isDisabled]);
+
+    const handleChangeComplete = useCallback(() => {
+      if (isDragging) {
+        onChangeComplete?.(currentValue);
+        setIsDragging(false);
+      }
+    }, [isDragging, currentValue, onChangeComplete]);
+
+    useEffect(() => {
+      if (isDragging) {
+        const handleGlobalMouseUp = () => handleChangeComplete();
+
+        document.addEventListener("mouseup", handleGlobalMouseUp);
+        document.addEventListener("touchend", handleGlobalMouseUp);
+
+        return () => {
+          document.removeEventListener("mouseup", handleGlobalMouseUp);
+          document.removeEventListener("touchend", handleGlobalMouseUp);
+        };
+      }
+      return () => {};
+    }, [isDragging, handleChangeComplete]);
+
+    const ValueDisplay = showValue ? (
+      <div className="text-xs text-bunker-300">{currentValue}</div>
+    ) : null;
+
+    return (
+      <div
+        className={twMerge(
+          sliderContainerVariants({ isFullWidth, className: containerClassName }),
+          "my-2"
+        )}
+      >
+        {showValue && valuePosition === "top" && ValueDisplay}
+
+        <div className="relative flex w-full items-center">
+          <div
+            className={twMerge(
+              sliderTrackVariants({ variant, isDisabled, className: trackClassName })
+            )}
+          >
+            <div
+              className={twMerge(
+                sliderFillVariants({ variant, isDisabled, className: fillClassName }),
+                "left-0"
+              )}
+              style={{ width: `${percentage}%` }}
+            />
+
+            <div
+              className={twMerge(
+                sliderThumbVariants({ variant, isDisabled, size, className: thumbClassName })
+              )}
+              style={{ left: `${percentage}%` }}
+            />
+          </div>
+
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={currentValue}
+            onChange={handleChange}
+            onMouseDown={handleMouseDown}
+            onTouchStart={handleMouseDown}
+            disabled={isDisabled}
+            required={isRequired}
+            ref={inputRef}
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            {...props}
+          />
+
+          {showValue && valuePosition === "right" && (
+            <div className="ml-2 text-xs text-bunker-300">{currentValue}</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+Slider.displayName = "Slider";

frontend/src/components/v2/Slider/index.tsx

@@ -0,0 +1,2 @@
+export type { SliderProps } from "./Slider";
+export { Slider } from "./Slider";

frontend/src/components/v2/index.tsx

@@ -16,18 +16,22 @@ export * from "./EmptyState";
 export * from "./FilterableSelect";
 export * from "./FontAwesomeSymbol";
 export * from "./FormControl";
+export * from "./GenericFieldLabel";
 export * from "./HoverCardv2";
 export * from "./IconButton";
 export * from "./Input";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./NoticeBanner";
+export * from "./NoticeBannerV2";
 export * from "./PageHeader";
 export * from "./Pagination";
+export * from "./PasswordGenerator";
 export * from "./Popoverv2";
 export * from "./SecretInput";
 export * from "./Select";
 export * from "./Skeleton";
+export * from "./Slider";
 export * from "./Spinner";
 export * from "./Stepper";
 export * from "./Switch";

frontend/src/context/ProjectPermissionContext/types.ts

@@ -75,6 +75,15 @@ export enum ProjectPermissionGroupActions {
   GrantPrivileges = "grant-privileges"
 }
 
+export enum ProjectPermissionSecretRotationActions {
+  Read = "read",
+  ReadGeneratedCredentials = "read-generated-credentials",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete",
+  RotateSecrets = "rotate-secrets"
+}
+
 export enum PermissionConditionOperators {
   $IN = "$in",
   $ALL = "$all",
@@ -169,6 +178,11 @@ export type SecretImportSubjectFields = {
   secretPath: string;
 };
 
+export type SecretRotationSubjectFields = {
+  environment: string;
+  secretPath: string;
+};
+
 export type ProjectPermissionSet =
   | [
       ProjectPermissionSecretActions,
@@ -198,6 +212,13 @@ export type ProjectPermissionSet =
         | (ForcedSubject<ProjectPermissionSub.SecretImports> & SecretImportSubjectFields)
       )
     ]
+  | [
+      ProjectPermissionSecretRotationActions,
+      (
+        | ProjectPermissionSub.SecretRotation
+        | (ForcedSubject<ProjectPermissionSub.SecretRotation> & SecretRotationSubjectFields)
+      )
+    ]
   | [ProjectPermissionActions, ProjectPermissionSub.Role]
   | [ProjectPermissionActions, ProjectPermissionSub.Tags]
   | [ProjectPermissionActions, ProjectPermissionSub.Member]
@@ -210,7 +231,6 @@ export type ProjectPermissionSet =
   | [ProjectPermissionActions, ProjectPermissionSub.Settings]
   | [ProjectPermissionActions, ProjectPermissionSub.ServiceTokens]
   | [ProjectPermissionActions, ProjectPermissionSub.SecretApproval]
-  | [ProjectPermissionActions, ProjectPermissionSub.SecretRotation]
   | [
       ProjectPermissionActions,
       (

frontend/src/helpers/appConnections.ts

@@ -1,18 +1,20 @@
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-import { faKey, faPassport, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faKey, faLock, faPassport, faUser } from "@fortawesome/free-solid-svg-icons";
 
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import {
   AwsConnectionMethod,
   AzureAppConfigurationConnectionMethod,
   AzureKeyVaultConnectionMethod,
+  DatabricksConnectionMethod,
   GcpConnectionMethod,
   GitHubConnectionMethod,
+  HumanitecConnectionMethod,
+  MsSqlConnectionMethod,
+  PostgresConnectionMethod,
   TAppConnection,
   TerraformCloudConnectionMethod
 } from "@app/hooks/api/appConnections/types";
-import { DatabricksConnectionMethod } from "@app/hooks/api/appConnections/types/databricks-connection";
-import { HumanitecConnectionMethod } from "@app/hooks/api/appConnections/types/humanitec-connection";
 
 export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: string }> = {
   [AppConnection.AWS]: { name: "AWS", image: "Amazon Web Services.png" },
@@ -28,7 +30,9 @@ export const APP_CONNECTION_MAP: Record<AppConnection, { name: string; image: st
   },
   [AppConnection.Databricks]: { name: "Databricks", image: "Databricks.png" },
   [AppConnection.Humanitec]: { name: "Humanitec", image: "Humanitec.png" },
-  [AppConnection.TerraformCloud]: { name: "Terraform Cloud", image: "Terraform Cloud.png" }
+  [AppConnection.TerraformCloud]: { name: "Terraform Cloud", image: "Terraform Cloud.png" },
+  [AppConnection.Postgres]: { name: "PostgreSQL", image: "Postgres.png" },
+  [AppConnection.MsSql]: { name: "Microsoft SQL Server", image: "MsSql.png" }
 };
 
 export const getAppConnectionMethodDetails = (method: TAppConnection["method"]) => {
@@ -47,10 +51,13 @@ export const getAppConnectionMethodDetails = (method: TAppConnection["method"])
       return { name: "Service Account Impersonation", icon: faUser };
     case DatabricksConnectionMethod.ServicePrincipal:
       return { name: "Service Principal", icon: faUser };
-    case HumanitecConnectionMethod.API_TOKEN:
+    case HumanitecConnectionMethod.ApiToken:
       return { name: "API Token", icon: faKey };
-    case TerraformCloudConnectionMethod.API_TOKEN:
+    case TerraformCloudConnectionMethod.ApiToken:
       return { name: "API Token", icon: faKey };
+    case PostgresConnectionMethod.UsernameAndPassword:
+    case MsSqlConnectionMethod.UsernameAndPassword:
+      return { name: "Username & Password", icon: faLock };
     default:
       throw new Error(`Unhandled App Connection Method: ${method}`);
   }

frontend/src/helpers/secretRotationsV2.ts

@@ -0,0 +1,24 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretRotation, TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
+
+export const SECRET_ROTATION_MAP: Record<SecretRotation, { name: string; image: string }> = {
+  [SecretRotation.PostgresCredentials]: { name: "PostgreSQL Credentials", image: "Postgres.png" },
+  [SecretRotation.MsSqlCredentials]: {
+    name: "Microsoft SQL Server Credentials",
+    image: "MsSql.png"
+  }
+};
+
+export const SECRET_ROTATION_CONNECTION_MAP: Record<SecretRotation, AppConnection> = {
+  [SecretRotation.PostgresCredentials]: AppConnection.Postgres,
+  [SecretRotation.MsSqlCredentials]: AppConnection.MsSql
+};
+
+export const getRotateAtLocal = ({ hours, minutes }: TSecretRotationV2["rotateAtUtc"]) => {
+  const now = new Date();
+
+  // convert utc rotation time to local datetime
+  return new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), hours, minutes, 0, 0)
+  );
+};

frontend/src/hooks/api/appConnections/enums.ts

@@ -6,5 +6,7 @@ export enum AppConnection {
   AzureAppConfiguration = "azure-app-configuration",
   Databricks = "databricks",
   Humanitec = "humanitec",
-  TerraformCloud = "terraform-cloud"
+  TerraformCloud = "terraform-cloud",
+  Postgres = "postgres",
+  MsSql = "mssql"
 }

frontend/src/hooks/api/appConnections/types/app-options.ts

@@ -3,6 +3,7 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 export type TAppConnectionOptionBase = {
   name: string;
   methods: string[];
+  supportsPlatformManagement?: boolean;
 };
 
 export type TAwsConnectionOption = TAppConnectionOptionBase & {
@@ -42,6 +43,14 @@ export type TTerraformCloudConnectionOption = TAppConnectionOptionBase & {
   app: AppConnection.TerraformCloud;
 };
 
+export type TPostgresConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.Postgres;
+};
+
+export type TMsSqlConnectionOption = TAppConnectionOptionBase & {
+  app: AppConnection.MsSql;
+};
+
 export type TAppConnectionOption =
   | TAwsConnectionOption
   | TGitHubConnectionOption
@@ -50,7 +59,9 @@ export type TAppConnectionOption =
   | TAzureKeyVaultConnectionOption
   | TDatabricksConnectionOption
   | THumanitecConnectionOption
-  | TTerraformCloudConnectionOption;
+  | TTerraformCloudConnectionOption
+  | TPostgresConnectionOption
+  | TMsSqlConnectionOption;
 
 export type TAppConnectionOptionMap = {
   [AppConnection.AWS]: TAwsConnectionOption;
@@ -61,4 +72,6 @@ export type TAppConnectionOptionMap = {
   [AppConnection.Databricks]: TDatabricksConnectionOption;
   [AppConnection.Humanitec]: THumanitecConnectionOption;
   [AppConnection.TerraformCloud]: TTerraformCloudConnectionOption;
+  [AppConnection.Postgres]: TPostgresConnectionOption;
+  [AppConnection.MsSql]: TMsSqlConnectionOption;
 };

frontend/src/hooks/api/appConnections/types/humanitec-connection.ts

@@ -2,11 +2,11 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
 
 export enum HumanitecConnectionMethod {
-  API_TOKEN = "api-token"
+  ApiToken = "api-token"
 }
 
 export type THumanitecConnection = TRootAppConnection & { app: AppConnection.Humanitec } & {
-  method: HumanitecConnectionMethod.API_TOKEN;
+  method: HumanitecConnectionMethod.ApiToken;
   credentials: {
     apiToken: string;
   };

frontend/src/hooks/api/appConnections/types/index.ts

@@ -1,21 +1,25 @@
-import { AppConnection } from "@app/hooks/api/appConnections/enums";
-import { TAppConnectionOption } from "@app/hooks/api/appConnections/types/app-options";
-import { TAwsConnection } from "@app/hooks/api/appConnections/types/aws-connection";
-import { TDatabricksConnection } from "@app/hooks/api/appConnections/types/databricks-connection";
-import { TGitHubConnection } from "@app/hooks/api/appConnections/types/github-connection";
-import { THumanitecConnection } from "@app/hooks/api/appConnections/types/humanitec-connection";
-
+import { AppConnection } from "../enums";
+import { TAppConnectionOption } from "./app-options";
+import { TAwsConnection } from "./aws-connection";
 import { TAzureAppConfigurationConnection } from "./azure-app-configuration-connection";
 import { TAzureKeyVaultConnection } from "./azure-key-vault-connection";
+import { TDatabricksConnection } from "./databricks-connection";
 import { TGcpConnection } from "./gcp-connection";
+import { TGitHubConnection } from "./github-connection";
+import { THumanitecConnection } from "./humanitec-connection";
+import { TMsSqlConnection } from "./mssql-connection";
+import { TPostgresConnection } from "./postgres-connection";
 import { TTerraformCloudConnection } from "./terraform-cloud-connection";
 
 export * from "./aws-connection";
 export * from "./azure-app-configuration-connection";
 export * from "./azure-key-vault-connection";
+export * from "./databricks-connection";
 export * from "./gcp-connection";
 export * from "./github-connection";
 export * from "./humanitec-connection";
+export * from "./mssql-connection";
+export * from "./postgres-connection";
 export * from "./terraform-cloud-connection";
 
 export type TAppConnection =
@@ -26,7 +30,9 @@ export type TAppConnection =
   | TAzureAppConfigurationConnection
   | TDatabricksConnection
   | THumanitecConnection
-  | TTerraformCloudConnection;
+  | TTerraformCloudConnection
+  | TPostgresConnection
+  | TMsSqlConnection;
 
 export type TAvailableAppConnection = Pick<TAppConnection, "name" | "id">;
 
@@ -38,11 +44,11 @@ export type TAvailableAppConnectionsResponse = { appConnections: TAvailableAppCo
 
 export type TCreateAppConnectionDTO = Pick<
   TAppConnection,
-  "name" | "credentials" | "method" | "app" | "description"
+  "name" | "credentials" | "method" | "app" | "description" | "isPlatformManagedCredentials"
 >;
 
 export type TUpdateAppConnectionDTO = Partial<
-  Pick<TAppConnection, "name" | "credentials" | "description">
+  Pick<TAppConnection, "name" | "credentials" | "description" | "isPlatformManagedCredentials">
 > & {
   connectionId: string;
   app: AppConnection;
@@ -62,4 +68,6 @@ export type TAppConnectionMap = {
   [AppConnection.Databricks]: TDatabricksConnection;
   [AppConnection.Humanitec]: THumanitecConnection;
   [AppConnection.TerraformCloud]: TTerraformCloudConnection;
+  [AppConnection.Postgres]: TPostgresConnection;
+  [AppConnection.MsSql]: TMsSqlConnection;
 };

frontend/src/hooks/api/appConnections/types/mssql-connection.ts

@@ -0,0 +1,13 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+import { TBaseSqlConnectionCredentials } from "./shared";
+
+export enum MsSqlConnectionMethod {
+  UsernameAndPassword = "username-and-password"
+}
+
+export type TMsSqlConnection = TRootAppConnection & { app: AppConnection.MsSql } & {
+  method: MsSqlConnectionMethod.UsernameAndPassword;
+  credentials: TBaseSqlConnectionCredentials;
+};

frontend/src/hooks/api/appConnections/types/postgres-connection.ts

@@ -0,0 +1,13 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
+
+import { TBaseSqlConnectionCredentials } from "./shared";
+
+export enum PostgresConnectionMethod {
+  UsernameAndPassword = "username-and-password"
+}
+
+export type TPostgresConnection = TRootAppConnection & { app: AppConnection.Postgres } & {
+  method: PostgresConnectionMethod.UsernameAndPassword;
+  credentials: TBaseSqlConnectionCredentials;
+};

frontend/src/hooks/api/appConnections/types/root-connection.ts

@@ -6,4 +6,5 @@ export type TRootAppConnection = {
   orgId: string;
   createdAt: string;
   updatedAt: string;
+  isPlatformManagedCredentials?: boolean;
 };

frontend/src/hooks/api/appConnections/types/shared/index.ts

@@ -0,0 +1 @@
+export * from "./sql-connection";

frontend/src/hooks/api/appConnections/types/shared/sql-connection.ts

@@ -0,0 +1,9 @@
+export type TBaseSqlConnectionCredentials = {
+  host: string;
+  port: number;
+  username: string;
+  password: string;
+  database: string;
+  sslEnabled: boolean;
+  sslRejectUnauthorized: boolean;
+};

frontend/src/hooks/api/appConnections/types/terraform-cloud-connection.ts

@@ -2,13 +2,13 @@ import { AppConnection } from "@app/hooks/api/appConnections/enums";
 import { TRootAppConnection } from "@app/hooks/api/appConnections/types/root-connection";
 
 export enum TerraformCloudConnectionMethod {
-  API_TOKEN = "api-token"
+  ApiToken = "api-token"
 }
 
 export type TTerraformCloudConnection = TRootAppConnection & {
   app: AppConnection.TerraformCloud;
 } & {
-  method: TerraformCloudConnectionMethod.API_TOKEN;
+  method: TerraformCloudConnectionMethod.ApiToken;
   credentials: {
     apiToken: string;
   };

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -121,7 +121,7 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.CREATE_APP_CONNECTION]: "Create App Connection",
   [EventType.UPDATE_APP_CONNECTION]: "Update App Connection",
   [EventType.DELETE_APP_CONNECTION]: "Delete App Connection",
-  [EventType.GET_SECRET_SYNCS]: "List Secret Syncs",
+  [EventType.GET_SECRET_SYNCS]: "List secret syncs",
   [EventType.GET_SECRET_SYNC]: "Get Secret Sync",
   [EventType.CREATE_SECRET_SYNC]: "Create Secret Sync",
   [EventType.UPDATE_SECRET_SYNC]: "Update Secret Sync",
@@ -150,7 +150,15 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.KMIP_OPERATION_ACTIVATE]: "KMIP operation activate",
   [EventType.KMIP_OPERATION_REVOKE]: "KMIP operation revoke",
   [EventType.KMIP_OPERATION_LOCATE]: "KMIP operation locate",
-  [EventType.KMIP_OPERATION_REGISTER]: "KMIP operation register"
+  [EventType.KMIP_OPERATION_REGISTER]: "KMIP operation register",
+  [EventType.GET_SECRET_ROTATIONS]: "List Secret Rotations",
+  [EventType.GET_SECRET_ROTATION]: "Get Secret Rotation",
+  [EventType.GET_SECRET_ROTATION_GENERATED_CREDENTIALS]:
+    "Get Secret Rotation generated credentials",
+  [EventType.CREATE_SECRET_ROTATION]: "Create Secret Rotation",
+  [EventType.UPDATE_SECRET_ROTATION]: "Update Secret Rotation",
+  [EventType.DELETE_SECRET_ROTATION]: "Delete Secret Rotation",
+  [EventType.SECRET_ROTATION_ROTATE_SECRETS]: "Secret Rotation secrets rotated"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -151,5 +151,12 @@ export enum EventType {
   KMIP_OPERATION_REVOKE = "kmip-operation-revoke",
   KMIP_OPERATION_LOCATE = "kmip-operation-locate",
   KMIP_OPERATION_REGISTER = "kmip-operation-register",
-  SECRET_APPROVAL_REQUEST_REVIEW = "secret-approval-request-review"
+  SECRET_APPROVAL_REQUEST_REVIEW = "secret-approval-request-review",
+  GET_SECRET_ROTATIONS = "get-secret-rotations",
+  GET_SECRET_ROTATION = "get-secret-rotation",
+  GET_SECRET_ROTATION_GENERATED_CREDENTIALS = "get-secret-rotation-generated-credentials",
+  CREATE_SECRET_ROTATION = "create-secret-rotation",
+  UPDATE_SECRET_ROTATION = "update-secret-rotation",
+  DELETE_SECRET_ROTATION = "delete-secret-rotation",
+  SECRET_ROTATION_ROTATE_SECRETS = "secret-rotation-rotate-secrets"
 }

frontend/src/hooks/api/dashboard/queries.tsx

@@ -132,6 +132,21 @@ export const fetchDashboardProjectSecretsByKeys = async ({
   return data;
 };
 
+const mergePersonalRotationSecrets = (secrets: (SecretV3Raw | null)[]) => {
+  const actualSecrets: SecretV3Raw[] = [];
+  const dummySecrets: null[] = [];
+
+  secrets.forEach((secret) => {
+    if (secret !== null) {
+      actualSecrets.push(secret);
+    } else {
+      dummySecrets.push(secret);
+    }
+  });
+
+  return [...mergePersonalSecrets(actualSecrets), ...dummySecrets];
+};
+
 export const useGetProjectSecretsOverview = (
   {
     projectId,
@@ -145,6 +160,7 @@ export const useGetProjectSecretsOverview = (
     includeFolders,
     includeImports,
     includeDynamicSecrets,
+    includeSecretRotations,
     environments
   }: TGetDashboardProjectSecretsOverviewDTO,
   options?: Omit<
@@ -173,6 +189,7 @@ export const useGetProjectSecretsOverview = (
       includeFolders,
       includeImports,
       includeDynamicSecrets,
+      includeSecretRotations,
       environments
     }),
     queryFn: () =>
@@ -188,10 +205,11 @@ export const useGetProjectSecretsOverview = (
         includeFolders,
         includeImports,
         includeDynamicSecrets,
+        includeSecretRotations,
         environments
       }),
     select: useCallback((data: Awaited<ReturnType<typeof fetchProjectSecretsOverview>>) => {
-      const { secrets, ...select } = data;
+      const { secrets, secretRotations, ...select } = data;
       const uniqueSecrets = secrets ? unique(secrets, (i) => i.secretKey) : [];
 
       const uniqueFolders = select.folders ? unique(select.folders, (i) => i.name) : [];
@@ -201,14 +219,22 @@ export const useGetProjectSecretsOverview = (
         : [];
 
       const uniqueSecretImports = select.imports ? unique(select.imports, (i) => i.id) : [];
+      const uniqueSecretRotations = secretRotations ? unique(secretRotations, (i) => i.name) : [];
 
       return {
         ...select,
         secrets: secrets ? mergePersonalSecrets(secrets) : undefined,
+        secretRotations: secretRotations?.map((rotation) => {
+          return {
+            ...rotation,
+            secrets: mergePersonalRotationSecrets(rotation.secrets)
+          };
+        }),
         totalUniqueSecretsInPage: uniqueSecrets.length,
         totalUniqueDynamicSecretsInPage: uniqueDynamicSecrets.length,
         totalUniqueFoldersInPage: uniqueFolders.length,
-        totalUniqueSecretImportsInPage: uniqueSecretImports.length
+        totalUniqueSecretImportsInPage: uniqueSecretImports.length,
+        totalUniqueSecretRotationsInPage: uniqueSecretRotations.length
       };
     }, []),
     placeholderData: (previousData) => previousData
@@ -230,6 +256,7 @@ export const useGetProjectSecretsDetails = (
     viewSecretValue,
     includeImports,
     includeDynamicSecrets,
+    includeSecretRotations,
     tags
   }: TGetDashboardProjectSecretsDetailsDTO,
   options?: Omit<
@@ -260,6 +287,7 @@ export const useGetProjectSecretsDetails = (
       includeFolders,
       includeImports,
       includeDynamicSecrets,
+      includeSecretRotations,
       tags
     }),
     queryFn: () =>
@@ -277,12 +305,17 @@ export const useGetProjectSecretsDetails = (
         includeFolders,
         includeImports,
         includeDynamicSecrets,
+        includeSecretRotations,
         tags
       }),
     select: useCallback(
       (data: Awaited<ReturnType<typeof fetchProjectSecretsDetails>>) => ({
         ...data,
-        secrets: data.secrets ? mergePersonalSecrets(data.secrets) : undefined
+        secrets: data.secrets ? mergePersonalSecrets(data.secrets) : undefined,
+        secretRotations: data.secretRotations?.map((rotation) => ({
+          ...rotation,
+          secrets: mergePersonalRotationSecrets(rotation.secrets)
+        }))
       }),
       []
     ),
@@ -372,7 +405,7 @@ export const useGetProjectSecretsQuickSearch = (
         tags
       }),
     select: useCallback((data: Awaited<ReturnType<typeof fetchProjectSecretsQuickSearch>>) => {
-      const { secrets, folders, dynamicSecrets } = data;
+      const { secrets, folders, dynamicSecrets, secretRotations } = data;
 
       const groupedFolders = groupBy(folders, (folder) => folder.path);
       const groupedSecrets = groupBy(
@@ -384,11 +417,16 @@ export const useGetProjectSecretsQuickSearch = (
         (dynamicSecret) =>
           `${dynamicSecret.path === "/" ? "" : dynamicSecret.path}/${dynamicSecret.name}`
       );
+      const groupedRotations = groupBy(
+        secretRotations,
+        (rotation) => `${rotation.folder.path === "/" ? "" : rotation.folder.path}/${rotation.name}`
+      );
 
       return {
         folders: groupedFolders,
         secrets: groupedSecrets,
-        dynamicSecrets: groupedDynamicSecrets
+        dynamicSecrets: groupedDynamicSecrets,
+        secretRotations: groupedRotations
       };
     }, []),
     placeholderData: (previousData) => previousData

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

@@ -3,6 +3,7 @@ import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { TSecretFolder } from "@app/hooks/api/secretFolders/types";
 import { TSecretImport } from "@app/hooks/api/secretImports/types";
+import { TSecretRotationV2 } from "@app/hooks/api/secretRotationsV2";
 import { SecretV3Raw, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 
 export type DashboardProjectSecretsOverviewResponse = {
@@ -14,11 +15,16 @@ export type DashboardProjectSecretsOverviewResponse = {
   totalFolderCount?: number;
   totalDynamicSecretCount?: number;
   totalImportCount?: number;
+  secretRotations?: (TSecretRotationV2 & {
+    secrets: (SecretV3Raw | null)[];
+  })[];
+  totalSecretRotationCount?: number;
   totalCount: number;
   totalUniqueSecretsInPage: number;
   totalUniqueDynamicSecretsInPage: number;
   totalUniqueFoldersInPage: number;
   totalUniqueSecretImportsInPage: number;
+  totalUniqueSecretRotationsInPage: number;
 };
 
 export type DashboardProjectSecretsDetailsResponse = {
@@ -26,10 +32,14 @@ export type DashboardProjectSecretsDetailsResponse = {
   folders?: TSecretFolder[];
   dynamicSecrets?: TDynamicSecret[];
   secrets?: SecretV3Raw[];
+  secretRotations?: (TSecretRotationV2 & {
+    secrets: (SecretV3Raw | null)[];
+  })[];
   totalImportCount?: number;
   totalFolderCount?: number;
   totalDynamicSecretCount?: number;
   totalSecretCount?: number;
+  totalSecretRotationCount?: number;
   totalCount: number;
 };
 
@@ -39,9 +49,12 @@ export type DashboardProjectSecretsByKeys = {
 
 export type DashboardProjectSecretsOverview = Omit<
   DashboardProjectSecretsOverviewResponse,
-  "secrets"
+  "secrets" | "secretRotations"
 > & {
   secrets?: SecretV3RawSanitized[];
+  secretRotations?: (TSecretRotationV2 & {
+    secrets: (SecretV3RawSanitized | null)[];
+  })[];
 };
 
 export type DashboardProjectSecretsDetails = Omit<
@@ -49,6 +62,9 @@ export type DashboardProjectSecretsDetails = Omit<
   "secrets"
 > & {
   secrets?: SecretV3RawSanitized[];
+  secretRotations?: (TSecretRotationV2 & {
+    secrets: (SecretV3RawSanitized | null)[];
+  })[];
 };
 
 export enum DashboardSecretsOrderBy {
@@ -67,6 +83,7 @@ export type TGetDashboardProjectSecretsOverviewDTO = {
   includeFolders?: boolean;
   includeDynamicSecrets?: boolean;
   includeImports?: boolean;
+  includeSecretRotations?: boolean;
   environments: string[];
 };
 
@@ -83,6 +100,7 @@ export type TGetDashboardProjectSecretsDetailsDTO = Omit<
 export type TDashboardProjectSecretsQuickSearchResponse = {
   folders: (TSecretFolder & { envId: string; path: string })[];
   dynamicSecrets: (TDynamicSecret & { environment: string; path: string })[];
+  secretRotations: TSecretRotationV2[];
   secrets: SecretV3Raw[];
 };
 
@@ -90,6 +108,7 @@ export type TDashboardProjectSecretsQuickSearch = {
   folders: Record<string, TDashboardProjectSecretsQuickSearchResponse["folders"]>;
   secrets: Record<string, SecretV3RawSanitized[]>;
   dynamicSecrets: Record<string, TDashboardProjectSecretsQuickSearchResponse["dynamicSecrets"]>;
+  secretRotations: Record<string, TDashboardProjectSecretsQuickSearchResponse["secretRotations"]>;
 };
 
 export type TGetDashboardProjectSecretsQuickSearchDTO = {

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

@@ -32,6 +32,7 @@ export type TSecretApprovalSecChange = {
   secretKey: string;
   secretValue?: string;
   secretComment?: string;
+  isRotatedSecret?: boolean;
   tags?: string[];
 };
 

frontend/src/hooks/api/secretRotationsV2/enums.ts

@@ -0,0 +1,9 @@
+export enum SecretRotation {
+  PostgresCredentials = "postgres-credentials",
+  MsSqlCredentials = "mssql-credentials"
+}
+
+export enum SecretRotationStatus {
+  Success = "success",
+  Failed = "failed"
+}

frontend/src/hooks/api/secretRotationsV2/index.ts

@@ -0,0 +1,3 @@
+export * from "./enums";
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/secretRotationsV2/mutations.tsx

@@ -0,0 +1,91 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
+import {
+  TCreateSecretRotationV2DTO,
+  TDeleteSecretRotationV2DTO,
+  TRotateSecretRotationV2DTO,
+  TSecretRotationV2Response,
+  TUpdateSecretRotationV2DTO
+} from "@app/hooks/api/secretRotationsV2/types";
+
+export const useCreateSecretRotationV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ type, ...params }: TCreateSecretRotationV2DTO) => {
+      const { data } = await apiRequest.post<TSecretRotationV2Response>(
+        `/api/v2/secret-rotations/${type}`,
+        params
+      );
+
+      return data.secretRotation;
+    },
+    onSuccess: (_, { projectId, secretPath }) =>
+      queryClient.invalidateQueries({
+        queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
+      })
+  });
+};
+
+export const useUpdateSecretRotationV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ type, rotationId, ...params }: TUpdateSecretRotationV2DTO) => {
+      const { data } = await apiRequest.patch<TSecretRotationV2Response>(
+        `/api/v2/secret-rotations/${type}/${rotationId}`,
+        params
+      );
+
+      return data.secretRotation;
+    },
+    onSuccess: (_, { projectId, secretPath }) =>
+      queryClient.invalidateQueries({
+        queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
+      })
+  });
+};
+
+export const useRotateSecretRotationV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ type, rotationId }: TRotateSecretRotationV2DTO) => {
+      const { data } = await apiRequest.post<TSecretRotationV2Response>(
+        `/api/v2/secret-rotations/${type}/${rotationId}/rotate-secrets`
+      );
+
+      return data.secretRotation;
+    },
+    onSuccess: (_, { projectId, secretPath }) =>
+      queryClient.invalidateQueries({
+        queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
+      }),
+    onError: (_, { projectId, secretPath }) =>
+      queryClient.invalidateQueries({
+        queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
+      })
+  });
+};
+
+export const useDeleteSecretRotationV2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      type,
+      rotationId,
+      deleteSecrets,
+      revokeGeneratedCredentials
+    }: TDeleteSecretRotationV2DTO) => {
+      const { data } = await apiRequest.delete<TSecretRotationV2Response>(
+        `/api/v2/secret-rotations/${type}/${rotationId}`,
+        { params: { deleteSecrets, revokeGeneratedCredentials } }
+      );
+
+      return data.secretRotation;
+    },
+    onSuccess: (_, { projectId, secretPath }) =>
+      queryClient.invalidateQueries({
+        queryKey: dashboardKeys.getDashboardSecrets({ projectId, secretPath })
+      })
+  });
+};

frontend/src/hooks/api/secretRotationsV2/queries.tsx

@@ -0,0 +1,73 @@
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2/enums";
+import {
+  TListSecretRotationV2Options,
+  TSecretRotationV2Option,
+  TViewSecretRotationGeneratedCredentialsResponse,
+  TViewSecretRotationV2GeneratedCredentialsDTO
+} from "@app/hooks/api/secretRotationsV2/types";
+
+export const secretRotationV2Keys = {
+  all: ["secret-rotations-v2"] as const,
+  options: () => [...secretRotationV2Keys.all, "options"] as const,
+  viewGeneratedCredentials: ({ type, rotationId }: TViewSecretRotationV2GeneratedCredentialsDTO) =>
+    [...secretRotationV2Keys.all, type, rotationId] as const
+};
+
+export const useSecretRotationV2Options = (
+  options?: Omit<
+    UseQueryOptions<
+      TSecretRotationV2Option[],
+      unknown,
+      TSecretRotationV2Option[],
+      ReturnType<typeof secretRotationV2Keys.options>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: secretRotationV2Keys.options(),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TListSecretRotationV2Options>(
+        "/api/v2/secret-rotations/options"
+      );
+
+      return data.secretRotationOptions;
+    },
+    ...options
+  });
+};
+
+export const useSecretRotationV2Option = (type: SecretRotation) => {
+  const { data: rotationOptions, isPending } = useSecretRotationV2Options();
+  const rotationOption = rotationOptions?.find((option) => option.type === type);
+
+  return { rotationOption, isPending };
+};
+
+export const useViewSecretRotationV2GeneratedCredentials = (
+  { rotationId, type }: TViewSecretRotationV2GeneratedCredentialsDTO,
+  options?: Omit<
+    UseQueryOptions<
+      TViewSecretRotationGeneratedCredentialsResponse,
+      unknown,
+      TViewSecretRotationGeneratedCredentialsResponse,
+      ReturnType<typeof secretRotationV2Keys.viewGeneratedCredentials>
+    >,
+    "queryKey" | "queryFn"
+  >
+) => {
+  return useQuery({
+    queryKey: secretRotationV2Keys.viewGeneratedCredentials({ rotationId, type }),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TViewSecretRotationGeneratedCredentialsResponse>(
+        `/api/v2/secret-rotations/${type}/${rotationId}/generated-credentials`
+      );
+
+      return data;
+    },
+    ...options
+  });
+};

frontend/src/hooks/api/secretRotationsV2/types/index.ts

@@ -0,0 +1,73 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import {
+  TMsSqlCredentialsRotation,
+  TMsSqlCredentialsRotationGeneratedCredentialsResponse
+} from "@app/hooks/api/secretRotationsV2/types/mssql-credentials-rotation";
+import {
+  TPostgresCredentialsRotation,
+  TPostgresCredentialsRotationGeneratedCredentialsResponse
+} from "@app/hooks/api/secretRotationsV2/types/postgres-credentials-rotation";
+import { TSqlOptionTemplate } from "@app/hooks/api/secretRotationsV2/types/shared";
+import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+import { DiscriminativePick } from "@app/types";
+
+export type TSecretRotationV2 = (TPostgresCredentialsRotation | TMsSqlCredentialsRotation) & {
+  secrets: (SecretV3RawSanitized | null)[];
+};
+
+export type TSecretRotationV2Option = {
+  name: string;
+  type: SecretRotation;
+  connection: AppConnection;
+  template: TSqlOptionTemplate;
+};
+
+export type TListSecretRotationV2Options = { secretRotationOptions: TSecretRotationV2Option[] };
+
+export type TSecretRotationV2Response = { secretRotation: TSecretRotationV2 };
+
+export type TViewSecretRotationGeneratedCredentialsResponse =
+  | TPostgresCredentialsRotationGeneratedCredentialsResponse
+  | TMsSqlCredentialsRotationGeneratedCredentialsResponse;
+
+export type TCreateSecretRotationV2DTO = DiscriminativePick<
+  TSecretRotationV2,
+  | "name"
+  | "parameters"
+  | "secretsMapping"
+  | "description"
+  | "connectionId"
+  | "type"
+  | "isAutoRotationEnabled"
+  | "rotationInterval"
+  | "rotateAtUtc"
+> & { environment: string; secretPath: string; projectId: string };
+
+export type TUpdateSecretRotationV2DTO = Partial<
+  Omit<TCreateSecretRotationV2DTO, "type" | "secretPath" | "projectId">
+> & {
+  type: SecretRotation;
+  rotationId: string;
+  // required for query invalidation
+  projectId: string;
+  secretPath: string;
+};
+
+export type TRotateSecretRotationV2DTO = {
+  rotationId: string;
+  type: SecretRotation;
+  // required for query invalidation
+  secretPath: string;
+  projectId: string;
+};
+
+export type TDeleteSecretRotationV2DTO = TRotateSecretRotationV2DTO & {
+  revokeGeneratedCredentials: boolean;
+  deleteSecrets: boolean;
+};
+
+export type TViewSecretRotationV2GeneratedCredentialsDTO = {
+  rotationId: string;
+  type: SecretRotation;
+};

frontend/src/hooks/api/secretRotationsV2/types/mssql-credentials-rotation.ts

@@ -0,0 +1,17 @@
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import {
+  TSecretRotationV2Base,
+  TSecretRotationV2GeneratedCredentialsResponseBase,
+  TSqlCredentialsRotationGeneratedCredentials,
+  TSqlCredentialsRotationProperties
+} from "@app/hooks/api/secretRotationsV2/types/shared";
+
+export type TMsSqlCredentialsRotation = TSecretRotationV2Base & {
+  type: SecretRotation.MsSqlCredentials;
+} & TSqlCredentialsRotationProperties;
+
+export type TMsSqlCredentialsRotationGeneratedCredentialsResponse =
+  TSecretRotationV2GeneratedCredentialsResponseBase<
+    SecretRotation.MsSqlCredentials,
+    TSqlCredentialsRotationGeneratedCredentials
+  >;

frontend/src/hooks/api/secretRotationsV2/types/postgres-credentials-rotation.ts

@@ -0,0 +1,17 @@
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+import {
+  TSecretRotationV2Base,
+  TSecretRotationV2GeneratedCredentialsResponseBase,
+  TSqlCredentialsRotationGeneratedCredentials,
+  TSqlCredentialsRotationProperties
+} from "@app/hooks/api/secretRotationsV2/types/shared";
+
+export type TPostgresCredentialsRotation = TSecretRotationV2Base & {
+  type: SecretRotation.PostgresCredentials;
+} & TSqlCredentialsRotationProperties;
+
+export type TPostgresCredentialsRotationGeneratedCredentialsResponse =
+  TSecretRotationV2GeneratedCredentialsResponseBase<
+    SecretRotation.PostgresCredentials,
+    TSqlCredentialsRotationGeneratedCredentials
+  >;

frontend/src/hooks/api/secretRotationsV2/types/shared/index.ts

@@ -0,0 +1,2 @@
+export * from "./secret-rotation-base";
+export * from "./sql-credentials-rotation";

frontend/src/hooks/api/secretRotationsV2/types/shared/secret-rotation-base.ts

@@ -0,0 +1,53 @@
+import { AppConnection } from "@app/hooks/api/appConnections/enums";
+import { SecretRotationStatus } from "@app/hooks/api/secretRotationsV2";
+
+export type TSecretRotationV2Base = {
+  id: string;
+  name: string;
+  description?: string | null;
+  folderId: string;
+  connectionId: string;
+  createdAt: string;
+  updatedAt: string;
+  rotationInterval: number;
+  rotateAtUtc: {
+    hours: number;
+    minutes: number;
+  };
+  projectId: string;
+  rotationStatus: SecretRotationStatus | null;
+  lastRotationJobId: string | null;
+  lastRotatedAt: string;
+  lastRotationAttemptedAt: string;
+  lastRotationMessage?: string | null;
+  connection: {
+    app: AppConnection;
+    id: string;
+    name: string;
+  };
+  environment: {
+    id: string;
+    name: string;
+    slug: string;
+  };
+  folder: {
+    id: string;
+    path: string;
+  };
+} & (
+  | {
+      nextRotationAt: string;
+      isAutoRotationEnabled: true;
+    }
+  | {
+      nextRotationAt?: null;
+      isAutoRotationEnabled: false;
+    }
+);
+
+export type TSecretRotationV2GeneratedCredentialsResponseBase<U, T> = {
+  activeIndex: 0 | 1;
+  generatedCredentials: [T, T | undefined];
+  type: U;
+  rotationId: string;
+};

frontend/src/hooks/api/secretRotationsV2/types/shared/sql-credentials-rotation.ts

@@ -0,0 +1,20 @@
+export type TSqlCredentialsRotationProperties = {
+  parameters: {
+    username1: string;
+    username2: string;
+  };
+  secretsMapping: {
+    username: string;
+    password: string;
+  };
+};
+
+export type TSqlOptionTemplate = {
+  secretsMapping: TSqlCredentialsRotationProperties["secretsMapping"];
+  createUserStatement: string;
+};
+
+export type TSqlCredentialsRotationGeneratedCredentials = {
+  username: string;
+  password: string;
+};

frontend/src/hooks/api/secretSnapshots/queries.tsx

@@ -2,6 +2,7 @@
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
+import { dashboardKeys } from "@app/hooks/api/dashboard/queries";
 
 import { SecretType, SecretV3RawSanitized } from "../secrets/types";
 import {
@@ -82,7 +83,8 @@ export const useGetSnapshotSecrets = ({ snapshotId }: TSnapshotDataProps) =>
           createdAt: secretVersion.createdAt,
           updatedAt: secretVersion.updatedAt,
           type: "modified",
-          version: secretVersion.version
+          version: secretVersion.version,
+          isRotatedSecret: secretVersion.isRotatedSecret
         };
 
         if (secretVersion.type === SecretType.Personal) {
@@ -162,6 +164,12 @@ export const usePerformSecretRollback = () => {
       queryClient.invalidateQueries({
         queryKey: secretSnapshotKeys.count({ workspaceId, environment, directory })
       });
+      queryClient.invalidateQueries({
+        queryKey: dashboardKeys.getDashboardSecrets({
+          projectId: workspaceId,
+          secretPath: directory ?? "/"
+        })
+      });
     }
   });
 };

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

@@ -11,7 +11,7 @@ export type TSecretSnapshot = {
 
 export type TSnapshotData = Omit<TSecretSnapshot, "secretVersions"> & {
   id: string;
-  secretVersions: SecretVersions[];
+  secretVersions: (SecretVersions & { isRotatedSecret?: boolean })[];
   folderVersion: Array<{ name: string; id: string }>;
   environment: WorkspaceEnv;
 };

frontend/src/hooks/api/secrets/queries.tsx

@@ -85,7 +85,9 @@ export const mergePersonalSecrets = (rawSecrets: SecretV3Raw[]) => {
       version: el.version,
       skipMultilineEncoding: el.skipMultilineEncoding,
       path: el.secretPath,
-      secretMetadata: el.secretMetadata
+      secretMetadata: el.secretMetadata,
+      isRotatedSecret: el.isRotatedSecret,
+      rotationId: el.rotationId
     };
 
     if (el.type === SecretType.Personal) {

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

@@ -54,6 +54,8 @@ export type SecretV3RawSanitized = {
   skipMultilineEncoding?: boolean;
   secretMetadata?: { key: string; value: string }[];
   isReminderEvent?: boolean;
+  isRotatedSecret?: boolean;
+  rotationId?: string;
 };
 
 export type SecretV3Raw = {
@@ -76,6 +78,8 @@ export type SecretV3Raw = {
   tags?: WsTag[];
   createdAt: string;
   updatedAt: string;
+  isRotatedSecret?: boolean;
+  rotationId?: string;
 };
 
 export type SecretV3RawResponse = {
@@ -167,7 +171,7 @@ export type TUpdateSecretsV3DTO = {
   skipMultilineEncoding?: boolean;
   newSecretName?: string;
   secretKey: string;
-  secretValue: string;
+  secretValue?: string;
   secretComment?: string;
   secretReminderRepeatDays?: number | null;
   secretReminderNote?: string | null;

frontend/src/hooks/api/workspace/index.tsx

@@ -3,6 +3,7 @@ export {
   useDeleteGroupFromWorkspace,
   useLeaveProject,
   useMigrateProjectToV3,
+  useRequestProjectAccess,
   useUpdateGroupWorkspaceRole
 } from "./mutations";
 export {
@@ -36,6 +37,7 @@ export {
   useListWorkspaceSshCertificates,
   useListWorkspaceSshCertificateTemplates,
   useNameWorkspaceSecrets,
+  useSearchProjects,
   useToggleAutoCapitalization,
   useUpdateIdentityWorkspaceRole,
   useUpdateProject,

frontend/src/hooks/api/workspace/mutations.tsx

@@ -107,3 +107,13 @@ export const useMigrateProjectToV3 = () => {
     }
   });
 };
+
+export const useRequestProjectAccess = () => {
+  return useMutation<object, object, { projectId: string; comment: string }>({
+    mutationFn: ({ projectId, comment }) => {
+      return apiRequest.post(`/api/v1/workspace/${projectId}/project-access`, {
+        comment
+      });
+    }
+  });
+};

frontend/src/hooks/api/workspace/queries.tsx

@@ -32,6 +32,7 @@ import {
   TGetUpgradeProjectStatusDTO,
   TListProjectIdentitiesDTO,
   ToggleAutoCapitalizationDTO,
+  TSearchProjectsDTO,
   TUpdateWorkspaceIdentityRoleDTO,
   TUpdateWorkspaceUserRoleDTO,
   UpdateAuditLogsRetentionDTO,
@@ -145,14 +146,31 @@ export const useGetWorkspaceById = (
 
 export const useGetUserWorkspaces = ({
   includeRoles,
-  type = "all"
+  type = "all",
+  options = {}
 }: {
   includeRoles?: boolean;
   type?: ProjectType | "all";
+  options?: { enabled?: boolean };
 } = {}) =>
   useQuery({
     queryKey: workspaceKeys.getAllUserWorkspace(type),
-    queryFn: () => fetchUserWorkspaces(includeRoles, type)
+    queryFn: () => fetchUserWorkspaces(includeRoles, type),
+    ...options
+  });
+
+export const useSearchProjects = ({ options, ...dto }: TSearchProjectsDTO) =>
+  useQuery({
+    queryKey: workspaceKeys.searchWorkspace(dto),
+    queryFn: async () => {
+      const { data } = await apiRequest.post<{
+        projects: (Workspace & { isMember: boolean })[];
+        totalCount: number;
+      }>("/api/v1/workspace/search", dto);
+
+      return data;
+    },
+    ...options
   });
 
 const fetchUserWorkspaceMemberships = async (orgId: string) => {

frontend/src/hooks/api/workspace/query-keys.tsx

@@ -1,4 +1,4 @@
-import { TListProjectIdentitiesDTO } from "@app/hooks/api/workspace/types";
+import { TListProjectIdentitiesDTO, TSearchProjectsDTO } from "@app/hooks/api/workspace/types";
 
 import type { CaStatus } from "../ca";
 
@@ -28,6 +28,7 @@ export const workspaceKeys = {
     ...params
   }: TListProjectIdentitiesDTO) =>
     [...workspaceKeys.getWorkspaceIdentityMemberships(workspaceId), params] as const,
+  searchWorkspace: (dto: TSearchProjectsDTO) => ["search-projects", dto] as const,
   getWorkspaceGroupMemberships: (workspaceId: string) =>
     [{ workspaceId }, "workspace-groups"] as const,
   getWorkspaceCas: ({ projectSlug }: { projectSlug: string }) =>