From fb1cf3eb0206d7df64a86a0c387f0e71053c3cbe Mon Sep 17 00:00:00 2001
From: carlosmonastyrski <charly.monastyrski@gmail.com>
Date: Fri, 6 Jun 2025 18:30:53 -0300
Subject: [PATCH] feat(PIT-revamp): minor UI improvements on snapshots
 deprecation messages

---
 .../components/PitDrawer/PitDrawer.tsx        | 15 +++++
 .../components/SnapshotView/SnapshotView.tsx  | 66 ++++++++++---------
 .../SecretSnapshotsLegacySection.tsx          |  2 +-
 3 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx
index 37a1188ff..c3d2bbf66 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/PitDrawer/PitDrawer.tsx
@@ -3,6 +3,7 @@ import { InfiniteData } from "@tanstack/react-query";
 import { formatDistance } from "date-fns";
 
 import { Button, Drawer, DrawerContent } from "@app/components/v2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { TSecretSnapshot } from "@app/hooks/api/secretSnapshots/types";
 
 type Props = {
@@ -39,6 +40,20 @@ export const PitDrawer = ({
         subTitle="Note: This will recover secrets for all environments in this project"
       >
         <div className="flex flex-col space-y-2">
+          <NoticeBannerV2 title="Snapshots are being deprecated" className="mb-2">
+            <p className="my-1 text-sm text-mineshaft-300">
+              Snapshots are being deprecated in favor of{" "}
+              <a
+                target="_blank"
+                href="https://infisical.com/docs/documentation/platform/pit-recovery"
+                rel="noopener noreferrer"
+                className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+              >
+                Commits
+              </a>
+              . This feature will be officially removed in November 2025.
+            </p>
+          </NoticeBannerV2>
           {secretSnaphots?.pages?.map((group, i) => (
             <Fragment key={`snapshot-item-${i + 1}`}>
               {group.map(({ id, createdAt }, index) => (
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
index aefb18736..7e7a5f8c8 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
@@ -5,14 +5,14 @@ import {
   faCodeCommit,
   faFolder,
   faMagnifyingGlass,
-  faUndo,
-  faWarning
+  faUndo
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, ContentLoader, Input, Tag, Tooltip } from "@app/components/v2";
+import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { useGetSnapshotSecrets, usePerformSecretRollback } from "@app/hooks/api";
 import { SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
@@ -155,20 +155,24 @@ export const SnapshotView = ({
 
   return (
     <>
-      <div className="my-2 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
-        <FontAwesomeIcon icon={faWarning} className="pr-6 text-4xl text-white/80" />
-        <div className="flex w-full flex-col text-sm">
-          <span className="mb-1 text-lg font-semibold">Deprecation Notice</span>
-          <p>
-            Snapshots are being deprecated in favor of Commits. They will be officially removed on
-            November 2025.
-          </p>
-        </div>
-      </div>
       <div className="flex items-center space-x-4">
         <h6 className="text-2xl">Snapshot</h6>
         <Tag colorSchema="green">{new Date(snapshotData?.createdAt || "").toLocaleString()}</Tag>
       </div>
+      <NoticeBannerV2 title="Snapshots are being deprecated" className="my-2">
+        <p className="my-1 text-sm text-mineshaft-300">
+          Snapshots are being deprecated in favor of{" "}
+          <a
+            target="_blank"
+            href="https://infisical.com/docs/documentation/platform/pit-recovery"
+            rel="noopener noreferrer"
+            className="underline decoration-primary underline-offset-2 hover:text-mineshaft-200"
+          >
+            Commits
+          </a>
+          . This feature will be officially removed in November 2025.
+        </p>
+      </NoticeBannerV2>
       <div className="mt-4 flex items-center space-x-2">
         <div className="w-2/5">
           <Input
@@ -204,26 +208,24 @@ export const SnapshotView = ({
             Go Back
           </Button>
         </div>
-        {isAllowedRollback && (
-          <div>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Create}
-              a={ProjectPermissionSub.SecretRollback}
-            >
-              {(isAllowed) => (
-                <Button
-                  onClick={handleClickRollback}
-                  isDisabled={isRollingBack || !isAllowed}
-                  isLoading={isRollingBack}
-                  leftIcon={<FontAwesomeIcon icon={faUndo} />}
-                  className="h-10"
-                >
-                  Rollback
-                </Button>
-              )}
-            </ProjectPermissionCan>
-          </div>
-        )}
+        <div>
+          <ProjectPermissionCan
+            I={ProjectPermissionActions.Create}
+            a={ProjectPermissionSub.SecretRollback}
+          >
+            {(isAllowed) => (
+              <Button
+                onClick={handleClickRollback}
+                isDisabled={isRollingBack || !isAllowed || !isAllowedRollback}
+                isLoading={isRollingBack}
+                leftIcon={<FontAwesomeIcon icon={faUndo} />}
+                className="h-10"
+              >
+                Rollback
+              </Button>
+            )}
+          </ProjectPermissionCan>
+        </div>
       </div>
       <div className="mt-4 rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300">
         <div className="flex flex-col">
diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
index 6bd5d76b6..5a2cda664 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/components/SecretSnapshotsLegacySection/SecretSnapshotsLegacySection.tsx
@@ -43,7 +43,7 @@ export const SecretSnapshotsLegacySection = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-3 text-xl font-semibold">Show Secret Snapshots Legacy</p>
+      <p className="mb-3 text-xl font-semibold">Show Secret Snapshots ( legacy )</p>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
         {(isAllowed) => (
           <div className="w-max">