mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-06 20:27:12 +00:00
feat(PIT-revamp): minor UI improvements on snapshots deprecation messages
This commit is contained in:
+15
@@ -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) => (
|
||||||
|
|||||||
+17
-15
@@ -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">
|
||||||
|
|||||||
+1
-1
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user