- 
-
- );
- }
-
- return (
-
-
-
- {/* Create a new tag modal */}
- {
- handlePopUpToggle("addTag", open);
- }}
- >
-
-
-
- {/* Uploaded env override or not confirmation modal */}
- handlePopUpToggle("uploadedSecOpts", open)}
- >
- handlePopUpClose("uploadedSecOpts")}
- >
- Keep old
- ,
-
- ]}
- >
-
-
- handlePopUpToggle("folderForm", isOpen)}
- >
-
-
-
- handlePopUpToggle("addSecretImport", isOpen)}
- >
-
-
-
- handlePopUpToggle("deleteFolder", isOpen)}
- onDeleteApproved={handleFolderDelete}
- />
- handlePopUpToggle("deleteSecretImport", isOpen)}
- onDeleteApproved={handleSecretImportDelete}
- />
- handlePopUpToggle("compareSecrets", open)}
- >
-
-
-
- {subscription && (
- handlePopUpToggle("upgradePlan", isOpen)}
- text={
- subscription.slug === null
- ? "You can perform point-in-time recovery under an Enterprise license"
- : "You can perform point-in-time recovery if you switch to Infisical's Team plan"
- }
- />
- )}
-
- );
-};
diff --git a/frontend/src/views/DashboardPage/DashboardPage.utils.ts b/frontend/src/views/DashboardPage/DashboardPage.utils.ts
deleted file mode 100644
index bd0131e8e..000000000
--- a/frontend/src/views/DashboardPage/DashboardPage.utils.ts
+++ /dev/null
@@ -1,289 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import crypto from "crypto";
-
-import * as yup from "yup";
-
-import {
- decryptAssymmetric,
- encryptSymmetric
-} from "@app/components/utilities/cryptography/crypto";
-import { BatchSecretDTO, DecryptedSecret } from "@app/hooks/api/secrets/types";
-
-export enum SecretActionType {
- Created = "created",
- Modified = "modified",
- Deleted = "deleted"
-}
-
-export const DEFAULT_SECRET_VALUE = {
- _id: undefined,
- overrideAction: undefined,
- idOverride: undefined,
- valueOverride: undefined,
- comment: "",
- key: "",
- value: "",
- tags: []
-};
-
-const secretSchema = yup.object({
- _id: yup.string(),
- key: yup
- .string()
- .trim()
- .required()
- .label("Secret key")
- .test("starts-with-number", "Should start with an alphabet", (val) =>
- Boolean(val?.charAt(0)?.match(/[a-zA-Z]/i))
- )
- .test({
- name: "duplicate-keys",
- // TODO:(akhilmhdh) ts keeps throwing from not found need to see how to resolve this
- test: (val, ctx: any) => {
- const secrets: Array<{ key: string }> = ctx?.from?.[1]?.value?.secrets || [];
- const duplicateKeys: Record
-
- Your file contains following duplicate secrets
-
- {Object.keys((popUp?.uploadedSecOpts?.data as TSecOverwriteOpt)?.secrets || {})
- ?.map((key) => key)
- .join(", ")}
-
- Are you sure you want to overwrite these secrets?
-
- {envs.map(({ name, slug }) => (
-
- );
-};
diff --git a/frontend/src/views/DashboardPage/components/CompareSecret/index.tsx b/frontend/src/views/DashboardPage/components/CompareSecret/index.tsx
deleted file mode 100644
index 260a702df..000000000
--- a/frontend/src/views/DashboardPage/components/CompareSecret/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { CompareSecret } from "./CompareSecret";
diff --git a/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx b/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx
deleted file mode 100644
index b399ee886..000000000
--- a/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import {
- faCheck
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { Button, FormControl, Input, ModalClose, Tooltip } from "@app/components/v2";
-
-import { isValidHexColor } from "../../../../components/utilities/isValidHexColor";
-import { secretTagsColors } from "../../../../const"
-import { TagColor } from "../../../../hooks/api/tags/types";
-
-
-type Props = {
- onCreateTag: (tagName: string, tagColor: string) => Promise null}
- tabIndex={0}
- role="button"
- onClick={() => handleFolderOpen(id)}
- >
- {name}
-
-
-
- {(isAllowed) => (
-
-
- {(isAllowed) => (
-
-
-
-
- handleFolderUpdate(id, name)}
- ariaLabel="expand"
- >
-
-
-
- )}
-
-
- handleFolderDelete(id, name)}
- >
-
-
-
- )}
-
-
-
-
-
- {(isAllowed) => (
-
- )}
-
-
- {(isAllowed) => (
-
- )}
-
-
-
- }
- >
-
-
-
-
-
-
-
-
-
- setValue(`secrets.${index}.value`, val, { shouldDirty: true })
- }
- />
-
-
-
-
-
-
-
-
- setValue(`secrets.${index}.valueOverride`, val, { shouldDirty: true })
- }
- />
-
-
-
-
-
-
-
-
-
- Override with a personal value
-
-
-
-
- Version History
-
- {secretVersion?.map(({ createdAt, value, id }, i) => (
-
-
-
- ))}
-
-
-
-
-
- {new Date(createdAt).toLocaleDateString("en-US", {
- year: "numeric",
- month: "2-digit",
- day: "2-digit",
- hour: "2-digit",
- minute: "2-digit",
- second: "2-digit"
- })}
-
-
-
- Value:
- {value}
-
- {isLoading ? (
-
- );
-};
diff --git a/frontend/src/views/DashboardPage/components/SecretImportForm/SecretImportForm.tsx b/frontend/src/views/DashboardPage/components/SecretImportForm/SecretImportForm.tsx
deleted file mode 100644
index 27adbf24f..000000000
--- a/frontend/src/views/DashboardPage/components/SecretImportForm/SecretImportForm.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { Button, FormControl, Input, ModalClose, Select, SelectItem } from "@app/components/v2";
-
-type Props = {
- onCreate: (environment: string, secretPath: string) => Promise
-
-
- ) : (
-
- )}
-
-
-
-);
-
-export const SecretImportItem = ({
- importedEnv,
- importedSecPath,
- onDelete,
- importedSecrets = [],
- searchTerm = "",
- secretPath,
- environment
-}: Props) => {
- const [isExpanded, setIsExpanded] = useToggle();
- const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
- id: `${importedEnv}-${importedSecPath}`
- });
- const { currentWorkspace } = useWorkspace();
- const rowEnv = currentWorkspace?.environments?.find(({ slug }) => slug === importedEnv);
-
- useEffect(() => {
- const filteredSecrets = importedSecrets.filter((secret) =>
- secret.key.toUpperCase().includes(searchTerm.toUpperCase())
- );
-
- if (filteredSecrets.length > 0 && searchTerm) {
- setIsExpanded.on();
- } else {
- setIsExpanded.off();
- }
- }, [searchTerm]);
-
- useEffect(() => {
- if (isDragging) {
- setIsExpanded.off();
- }
- }, [isDragging]);
-
- const style = {
- transform: transform ? `translateY(${transform.y ? Math.round(transform.y) : 0}px)` : "",
- transition
- };
-
- return (
- <>
- {env || "-"}
- {secretPath && (
-
-
- )}
-
-
-
-
- {(isAllowed) => (
-
-
-
-
-
-
-
-
-
-
- {
- evt.stopPropagation();
- onDelete(importedEnv, importedSecPath);
- }}
- >
-
-
-
- )}
-
-
-
-
-
-
-
- | Key | -Value | -Override | -
|
- |
- ||
| - {key} - | -
- |
-
- |
-
{index + 1}
-
- {
- isKeySubDisabled.current = true;
- }}
- variant="plain"
- isDisabled={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
- className="w-full focus:text-bunker-100 focus:ring-transparent"
- {...field}
- onBlur={() => {
- isKeySubDisabled.current = false;
- field.onBlur();
- }}
- autoCapitalization={autoCapitalization}
- />
-
-
-
-
-
- {keyError}
-
- {isOverridden ? (
- (
- (
-
-
- {secretTags.map(({ id, slug, tagColor }) => {
- return (
- <>
-
-
-
- onSelectTag(wsTag)}
- handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
- handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
- checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
- handleOnCreateTagOpen={() => onCreateTagOpen()}
- />
-
-
- );
- })}
-
-
- remove(i)}
- key={id}
- className="cursor-pointer"
- >
-
-
-
-
- {slug}
-
-
-
-
-
-
-
- {!(isReadOnly || isAddOnly || isRollbackMode) && (
-
-
-
-
- onSelectTag(wsTag)}
- handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
- handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
- checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
- handleOnCreateTagOpen={() => onCreateTagOpen()}
- />
-
-
- )}
-
-
- {(isAllowed) => (
-
-
- )}
-
-
-
- {!isAddOnly && (
-
-
-
- {(isAllowed) => (
-
-
- )}
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(isAllowed) => (
-
-
- )}
-
-
-
-
-
- {!isAddOnly && (
-
-
-
- onRowExpand(secUniqId, index)}
- ariaLabel="expand"
- >
-
-
-
- )}
-
-
- {(isAllowed) => (
- {
- onSecretDelete(index, secKey, secId, idOverride);
- }}
- >
-
- )}
-
-
- {0}
-
-
-
- Key
-
-
-
-
-
-
- Value
-
+ handlePopUpToggle("snapshots", true)}
+ />
+ handlePopUpToggle("snapshots", true)}
+ />
+ )}
+ handlePopUpToggle("snapshots", isOpen)}
+ hasNextPage={hasNextSnapshotListPage}
+ fetchNextPage={fetchNextSnapshotList}
+ onSelectSnapshot={handleSelectSnapshot}
+ isFetchingNextPage={isFetchingNextSnapshotList}
+ />
+
+ );
+};
diff --git a/frontend/src/views/SecretMainPage/SecretMainPage.types.ts b/frontend/src/views/SecretMainPage/SecretMainPage.types.ts
new file mode 100644
index 000000000..1fda773f3
--- /dev/null
+++ b/frontend/src/views/SecretMainPage/SecretMainPage.types.ts
@@ -0,0 +1,14 @@
+export type Filter = {
+ tags: Record
+
+ {!isRollbackMode ? (
+ <>
+
+
+
+ {isNotEmtpy && (
+
+
+
+
+ )}
+ {canReadSecret && (
+ {
+ if (evt.key === "Enter") handleSortToggle();
+ }}
+ >
+ Key
+
+ Value
+
+
+
+ }
+ value={filter.searchFilter}
+ onChange={(evt) => onSearchChange(evt.target.value)}
+ />
+
+
+
+
+
+
+
+
+ Group By
+ Filter By
+
+
+ Apply tags to filter secrets
+ {tags.map(({ _id, name, tagColor }) => (
+ onToggleTagFilter(_id)}
+ key={_id}
+ icon={filter?.tags[_id] &&
+ ))}
+
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => handlePopUpOpen("addSecret")}
+ className="rounded-r-none h-10"
+ isDisabled={!isAllowed}
+ >
+ Add Secret
+
+ )}
+
+
+ handlePopUpToggle("misc", isOpen)}
+ >
+
+
+
+
+
+
+
+
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ handlePopUpOpen("addFolder");
+ handlePopUpClose("misc");
+ }}
+ isDisabled={!isAllowed}
+ variant="outline_bg"
+ className="h-10"
+ isFullWidth
+ >
+ Add Folder
+
+ )}
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ handlePopUpOpen("addSecretImport");
+ handlePopUpClose("misc");
+ }}
+ variant="outline_bg"
+ className="h-10"
+ isFullWidth
+ isDisabled={!isAllowed}
+ >
+ Add Import
+
+ )}
+
+
+
+
+ {/* all the side triggers from actions like modals etc */}
+
+
+
+
+
+
+ {(isAllowed) => (
+ handlePopUpOpen("bulkDeleteSecrets")}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+
+ {Object.keys(selectedSecrets).length} Secrets
+
+
+
+ ))}
+
+
+ {
+ if (evt.key === "Enter") handleFolderClick(name);
+ }}
+ onClick={() => handleFolderClick(name)}
+ >
+ {name}
+
+
+
+ {(isAllowed) => (
+ handlePopUpOpen("updateFolder", name)}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+ {(isAllowed) => (
+ handlePopUpOpen("deleteFolder", name)}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+
+ handlePopUpToggle("overlapKeyWarning", open)}
+ >
+ handlePopUpClose("overlapKeyWarning")}
+ variant="outline_bg"
+ isDisabled={isSubmitting}
+ >
+ Keep old
+ ,
+
+ ]}
+ >
+ {isUploadedDuplicateSecretsEmpty ? (
+
+
+
+ );
+};
diff --git a/frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx b/frontend/src/views/SecretMainPage/components/SecretDropzone/index.tsx
similarity index 100%
rename from frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx
rename to frontend/src/views/SecretMainPage/components/SecretDropzone/index.tsx
diff --git a/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
new file mode 100644
index 000000000..cbd4c3f84
--- /dev/null
+++ b/frontend/src/views/SecretMainPage/components/SecretImportListView/SecretImportItem.tsx
@@ -0,0 +1,190 @@
+import { useEffect } from "react";
+import { subject } from "@casl/ability";
+import { useSortable } from "@dnd-kit/sortable";
+import {
+ faClose,
+ faFileImport,
+ faFolder,
+ faKey,
+ faUpDown
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { EmptyState, IconButton, SecretInput, TableContainer } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+ onDelete: (environment: string, secretPath: string) => void;
+ environment: string;
+ secretPath?: string;
+ importedEnv: string;
+ importedSecPath: string;
+ importedSecrets: { key: string; value: string; overriden: { env: string; secretPath: string } }[];
+ searchTerm: string;
+};
+
+// to show the environment and folder icon
+export const EnvFolderIcon = ({ env, secretPath }: { env: string; secretPath: string }) => (
+
+ {isLoading ? (
+
+
+
+
+ ) : (
+
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+ )}
+
+
+
+
+ {t(isSmaller ? "common.drop-zone-keys" : "common.drop-zone")}
+
+
+
+ OR
+ +
+ handlePopUpToggle("importSecEnv", isOpen)}
+ onParsedEnv={handleParsedEnv}
+ environment={environment}
+ environments={environments}
+ workspaceId={workspaceId}
+ decryptFileKey={decryptFileKey}
+ secretPath={secretPath}
+ />
+ {!isSmaller && (
+
+ {(isAllowed) => (
+
+ )}
+
+ )}
+
+ Uploaded secrets will be created.
+ ) : (
+
+
+ )}
+ Your file contains following duplicate secrets
+
+ {Object.keys((popUp?.overlapKeyWarning?.data as TSecOverwriteOpt)?.update || {})
+ ?.map((key) => key)
+ .join(", ")}
+
+ Are you sure you want to overwrite these secrets and create other ones?
+
+
+);
+
+export const SecretImportItem = ({
+ importedEnv,
+ importedSecPath,
+ onDelete,
+ importedSecrets = [],
+ searchTerm = "",
+ secretPath,
+ environment
+}: Props) => {
+ const [isExpanded, setIsExpanded] = useToggle();
+ const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
+ id: `${importedEnv}-${importedSecPath}`
+ });
+ const { currentWorkspace } = useWorkspace();
+ const rowEnv = currentWorkspace?.environments?.find(({ slug }) => slug === importedEnv);
+
+ useEffect(() => {
+ const filteredSecrets = importedSecrets.filter((secret) =>
+ secret.key.toUpperCase().includes(searchTerm.toUpperCase())
+ );
+
+ if (filteredSecrets.length > 0 && searchTerm) {
+ setIsExpanded.on();
+ } else {
+ setIsExpanded.off();
+ }
+ }, [searchTerm]);
+
+ useEffect(() => {
+ if (isDragging) {
+ setIsExpanded.off();
+ }
+ }, [isDragging]);
+
+ const style = {
+ transform: transform ? `translateY(${transform.y ? Math.round(transform.y) : 0}px)` : "",
+ transition
+ };
+
+ return (
+ <>
+ {env || "-"}
+ {secretPath && (
+
+
+ )}
+ setIsExpanded.toggle()}
+ onKeyDown={() => setIsExpanded.toggle()}
+ >
+
+ {isExpanded && !isDragging && (
+
+
+
+
+
+
+ {(isAllowed) => (
+
+
+ )}
+
+
+ {(isAllowed) => (
+ {
+ evt.stopPropagation();
+ onDelete(importedEnv, importedSecPath);
+ }}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+
+
+
+
+
+
+
+ | Key | +Value | +Override | +
|
+ |
+ ||
| + {key} + | +
+ |
+
+ |
+
+
+ );
+ }
+ )}
+
+ {namespace}
+
+
+ {filteredSecrets.map((secret) => (
+ {
+ if (evt.key === "Enter") setIsExpanded.toggle();
+ }}
+ >
+
+ {isExpanded && (
+
+ {renderIcon(mode)}
+
+
+
+
+ {mode === "modified" ? (
+ <>
+
+ {preSecret?.key}
+
+ v{preSecret?.version}
+
+
+
+
+ v{postSecret?.version}
+
+
+ ) : (
+ postSecret.key
+ )}
+
+
+
+
+
+
+
+ )}
+
+ );
+};
diff --git a/frontend/src/views/SecretMainPage/components/SnapshotView/SnapshotView.tsx b/frontend/src/views/SecretMainPage/components/SnapshotView/SnapshotView.tsx
new file mode 100644
index 000000000..bf6523b4e
--- /dev/null
+++ b/frontend/src/views/SecretMainPage/components/SnapshotView/SnapshotView.tsx
@@ -0,0 +1,268 @@
+import { useMemo, useState } from "react";
+import {
+ faArrowLeft,
+ faChevronRight,
+ faCodeCommit,
+ faFolder,
+ faMagnifyingGlass,
+ faUndo
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, ContentLoader, Input, Tag, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useGetSnapshotSecrets, usePerformSecretRollback } from "@app/hooks/api";
+import { DecryptedSecret, TSecretFolder, UserWsKeyPair } from "@app/hooks/api/types";
+
+import { renderIcon, SecretItem, TDiffModes, TDiffView } from "./SecretItem";
+
+type Props = {
+ snapshotId: string;
+ environment: string;
+ workspaceId: string;
+ secretPath?: string;
+ decryptFileKey: UserWsKeyPair;
+ secrets?: DecryptedSecret[];
+ folders?: TSecretFolder[];
+ snapshotCount?: number;
+ onGoBack: () => void;
+ onClickListSnapshot: () => void;
+};
+
+const LOADER_TEXT = ["Fetching your snapshot", "Creating the difference view"];
+
+const deepCompareSecrets = (lhs: DecryptedSecret, rhs: DecryptedSecret) =>
+ lhs.key === rhs.key &&
+ lhs.value === rhs.value &&
+ lhs.comment === rhs.comment &&
+ lhs?.valueOverride === rhs?.valueOverride &&
+ JSON.stringify(lhs.tags) === JSON.stringify(rhs.tags);
+
+export const SnapshotView = ({
+ snapshotId,
+ environment,
+ workspaceId,
+ secretPath,
+ decryptFileKey,
+ secrets = [],
+ folders = [],
+ onGoBack,
+ snapshotCount,
+ onClickListSnapshot
+}: Props) => {
+ const { createNotification } = useNotificationContext();
+ const [search, setSearch] = useState("");
+ const { mutateAsync: performRollback, isLoading: isRollingBack } = usePerformSecretRollback();
+
+ const { data: snapshotData, isLoading: isSnapshotLoading } = useGetSnapshotSecrets({
+ snapshotId,
+ env: environment,
+ decryptFileKey
+ });
+
+ const rollingFolder = snapshotData?.folders || [];
+ const rollingSecrets = snapshotData?.secrets || [];
+
+ const folderDiffView = useMemo(() => {
+ const folderGroupById = folders.reduce| Type | + {isModified ? ( + <> +Before | +After | + + ) : ( +Value | + )} + + +
|---|---|---|
| Key | + {isModified && ( +{preSecret?.key} | + )} +{postSecret.key} | +
| Value | + {isModified && ( +
+ |
+ )}
+
+ |
+
| Override | + {isModified && ( +
+ |
+ )}
+
+ |
+
| Comment | + {isModified && ( +{preSecret?.comment} | + )} +{postSecret?.comment} | +
| Tags | + {isModified && ( +
+ {preSecret?.tags?.map(({ name, _id: tagId, tagColor }) => (
+ {name}
+ |
+ )}
+
+ {postSecret?.tags?.map(({ name, _id: tagId, tagColor }) => (
+ {name}
+ |
+
+ {new Date(snapshotData?.createdAt || "").toLocaleString()}
+
+ Snapshot
+
+
+
+ }
+ value={search}
+ onChange={(evt) => setSearch(evt.target.value)}
+ />
+
+
+
+ }
+ className="h-10"
+ isDisabled={isRollingBack}
+ >
+ {snapshotCount} Commits
+
+
+
+ }
+ className="h-10"
+ isDisabled={isRollingBack}
+ >
+ Go Back
+
+
+
+
+ {(isAllowed) => (
+ }
+ className="h-10"
+ >
+ Rollback
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/views/SecretMainPage/components/SnapshotView/index.tsx b/frontend/src/views/SecretMainPage/components/SnapshotView/index.tsx
new file mode 100644
index 000000000..0f5774398
--- /dev/null
+++ b/frontend/src/views/SecretMainPage/components/SnapshotView/index.tsx
@@ -0,0 +1 @@
+export { SnapshotView } from "./SnapshotView";
diff --git a/frontend/src/views/SecretMainPage/index.tsx b/frontend/src/views/SecretMainPage/index.tsx
new file mode 100644
index 000000000..6d8b45d23
--- /dev/null
+++ b/frontend/src/views/SecretMainPage/index.tsx
@@ -0,0 +1 @@
+export { SecretMainPage } from "./SecretMainPage";
diff --git a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
index 6da1ff557..ccaf0ac29 100644
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -98,7 +98,7 @@ export const SecretOverviewPage = () => {
const { folders, folderNames, isFolderPresentInEnv } = useGetFoldersByEnv({
workspaceId,
environments: userAvailableEnvs.map(({ slug }) => slug),
- parentFolderPath: secretPath
+ directory: secretPath
});
const { mutateAsync: createSecretV3 } = useCreateSecretV3();
@@ -190,17 +190,8 @@ export const SecretOverviewPage = () => {
const handleExploreEnvClick = (slug: string) => {
const query: Record
+
+
+
+
+
+ {folderDiffView
+ .sort((a, b) => a.post.name.toLowerCase().localeCompare(b.post.name.toLowerCase()))
+ .filter((a) => a.post.name.toLowerCase().includes(search.toLowerCase()))
+ .map(({ mode, pre, post }, index) => (
+ Changes
+
+
+ ))}
+ {secretDiffView
+ .sort((a, b) => a.post.key.toLowerCase().localeCompare(b.post.key.toLowerCase()))
+ .filter((a) => a.post.key.toLowerCase().includes(search.toLowerCase()))
+ .map(({ mode, pre, post }, index) => (
+
+ {renderIcon(mode)}
+
+
+
+
+ {mode === "modified" ? (
+ <>
+
+ {pre?.name}
+
+
+ {post?.name}
+
+ ) : (
+ post.name
+ )}
+