feat(PIT-revamp): minor UI improvements on snapshots deprecation messages

This commit is contained in:
carlosmonastyrski
2025-06-06 18:30:53 -03:00
parent 55efa00b8c
commit fb1cf3eb02
3 changed files with 50 additions and 33 deletions
@@ -3,6 +3,7 @@ import { InfiniteData } from "@tanstack/react-query";
import { formatDistance } from "date-fns"; import { formatDistance } from "date-fns";
import { Button, Drawer, DrawerContent } from "@app/components/v2"; import { Button, Drawer, DrawerContent } from "@app/components/v2";
import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
import { TSecretSnapshot } from "@app/hooks/api/secretSnapshots/types"; import { TSecretSnapshot } from "@app/hooks/api/secretSnapshots/types";
type Props = { type Props = {
@@ -39,6 +40,20 @@ export const PitDrawer = ({
subTitle="Note: This will recover secrets for all environments in this project" subTitle="Note: This will recover secrets for all environments in this project"
> >
<div className="flex flex-col space-y-2"> <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) => ( {secretSnaphots?.pages?.map((group, i) => (
<Fragment key={`snapshot-item-${i + 1}`}> <Fragment key={`snapshot-item-${i + 1}`}>
{group.map(({ id, createdAt }, index) => ( {group.map(({ id, createdAt }, index) => (
@@ -5,14 +5,14 @@ import {
faCodeCommit, faCodeCommit,
faFolder, faFolder,
faMagnifyingGlass, faMagnifyingGlass,
faUndo, faUndo
faWarning
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { ProjectPermissionCan } from "@app/components/permissions"; import { ProjectPermissionCan } from "@app/components/permissions";
import { Button, ContentLoader, Input, Tag, Tooltip } from "@app/components/v2"; 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 { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { useGetSnapshotSecrets, usePerformSecretRollback } from "@app/hooks/api"; import { useGetSnapshotSecrets, usePerformSecretRollback } from "@app/hooks/api";
import { SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types"; import { SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
@@ -155,20 +155,24 @@ export const SnapshotView = ({
return ( 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"> <div className="flex items-center space-x-4">
<h6 className="text-2xl">Snapshot</h6> <h6 className="text-2xl">Snapshot</h6>
<Tag colorSchema="green">{new Date(snapshotData?.createdAt || "").toLocaleString()}</Tag> <Tag colorSchema="green">{new Date(snapshotData?.createdAt || "").toLocaleString()}</Tag>
</div> </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="mt-4 flex items-center space-x-2">
<div className="w-2/5"> <div className="w-2/5">
<Input <Input
@@ -204,7 +208,6 @@ export const SnapshotView = ({
Go Back Go Back
</Button> </Button>
</div> </div>
{isAllowedRollback && (
<div> <div>
<ProjectPermissionCan <ProjectPermissionCan
I={ProjectPermissionActions.Create} I={ProjectPermissionActions.Create}
@@ -213,7 +216,7 @@ export const SnapshotView = ({
{(isAllowed) => ( {(isAllowed) => (
<Button <Button
onClick={handleClickRollback} onClick={handleClickRollback}
isDisabled={isRollingBack || !isAllowed} isDisabled={isRollingBack || !isAllowed || !isAllowedRollback}
isLoading={isRollingBack} isLoading={isRollingBack}
leftIcon={<FontAwesomeIcon icon={faUndo} />} leftIcon={<FontAwesomeIcon icon={faUndo} />}
className="h-10" className="h-10"
@@ -223,7 +226,6 @@ export const SnapshotView = ({
)} )}
</ProjectPermissionCan> </ProjectPermissionCan>
</div> </div>
)}
</div> </div>
<div className="mt-4 rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300"> <div className="mt-4 rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300">
<div className="flex flex-col"> <div className="flex flex-col">
@@ -43,7 +43,7 @@ export const SecretSnapshotsLegacySection = () => {
return ( return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"> <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}> <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
{(isAllowed) => ( {(isAllowed) => (
<div className="w-max"> <div className="w-max">