+ return (
+ <>
{t('common:head-title', { title: t('dashboard:title') })}
@@ -818,417 +15,13 @@ export default function Dashboard() {
-
- ) : (
-
- setDropZoneData(undefined)}
- onOverwriteConfirm={(preserve) => {
- addDataWithMerge(dropZoneData!, preserve);
- setDropZoneData(undefined);
- }}
- duplicateKeys={
- dropZoneData
- ?.filter((newDataPoint) =>
- data?.find((dataPoint) => dataPoint.key === newDataPoint.key)
- )
- .map((duplicate) => duplicate.key) ?? []
- }
- />
- row.id === sidebarSecretId && row.value !== undefined
- )}
- modifyKey={listenChangeKey}
- modifyValue={listenChangeValue}
- modifyValueOverride={listenChangeValueOverride}
- modifyComment={listenChangeComment}
- buttonReady={hasUnsavedChanges}
- workspaceEnvs={workspaceEnvs}
- selectedEnv={selectedEnv!}
- workspaceId={workspaceId}
- savePush={savePush}
- sharedToHide={sharedToHide}
- setSharedToHide={setSharedToHide}
- deleteRow={deleteCertainRow}
- />
- )}
- {PITSidebarOpen && (
-
-
-
- {sidebarSecretId !== 'None' && (
-
- {snapshotData && (
-
-
-
- )}
-
- name)}
- onChange={handleOnEnvironmentChange}
- />
- )}
-
-
-
- {!snapshotData && data?.length === 0 && selectedEnv && (
- {snapshotData ? 'Secret Snapshot' : t('dashboard:title')}
- {snapshotData && ( - - {new Date(snapshotData.createdAt).toLocaleString()} - - )} - {selectedEnv?.isReadDenied && ( - - Add Only Mode - - )} -
-
-
- {!selectedEnv?.isReadDenied && (
-
- {(data?.length !== 0 || hasUnsavedChanges) && !snapshotData && (
-
-
-
- )}
- {snapshotData && selectedEnv && (
-
-
- )}
-
-
-
-
- {isLoading ? (
-
- {(snapshotData || data?.length !== 0) && selectedEnv && (
- <>
- {!snapshotData ? (
- name)}
- onChange={handleOnEnvironmentChange}
- />
- ) : (
- name)}
- onChange={handleOnEnvironmentChange}
- />
- )}
-
-
-
- {!snapshotData && !selectedEnv.isReadDenied && (
-
-
- )}
-
-
-
- {!snapshotData && (
-
-
- {isNew && (
-
-
-
-
- )}
-
- )}
-
- )}
-
-
- ) : (data?.length !== 0 || snapshotData?.secretVersions) ? (
-
-
- ) : (
-
-
-
-
-
-
-
-
- reorderRows(1)}
- >
- {sortMethod === 'alphabetical' ? }
-
- 0
- Key
- {!snapshotData &&
-
-
-
-
- Value
-
-
-
-
-
-
- Comment
-
-
-
-
-
-
-
- Tags
-
-
-
- null}
- role="none"
- onClick={() => { }}
- className="invisible group-hover:visible"
- >
-
-
- {!snapshotData &&
- data
- ?.filter((row) =>
- row.key?.toUpperCase().includes(searchKeys.toUpperCase())
- || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase())
- || row.comment?.toUpperCase().includes(searchKeys.toUpperCase()))
- .filter((row) => !sharedToHide.includes(row.id))
- // .filter((row) => row.value !== undefined)
- .map((keyPair) => (
- item.key))?.includes(
- keyPair.key
- )}
- toggleSidebar={toggleSidebar}
- togglePITSidebar={togglePITSidebar}
- sidebarSecretId={sidebarSecretId}
- isSnapshot={false}
- deleteRow={deleteCertainRow}
- tags={projectTags}
- />
- ))}
- {snapshotData &&
- snapshotData.secretVersions
- ?.sort((a, b) => a.key.localeCompare(b.key))
- .filter((row) => row.environment === selectedSnapshotEnv?.slug)
- .filter((row) => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
- .map((keyPair) => (
- item.key))?.includes(
- keyPair.key
- )}
- toggleSidebar={toggleSidebar}
- sidebarSecretId={sidebarSecretId}
- isSnapshot
- tags={projectTags}
- />
- ))}
-
- {!snapshotData && (
-
-
-
-
-
-
- )}
-
- {isKeyAvailable && !snapshotData && (
-
- )}
- To view this file, contact your administrator for permission.
-They need to grant you access in the team tab.
- - )} -
-
+
+ 
+
+ );
+ }
+
+ // when secrets is not loading and secrets list is empty
+ const isDashboardSecretEmpty = !isSecretsLoading && !formSecrets?.length;
+ // when using snapshot mode and snapshot is loading and snapshot list is empty
+ const isSnapshotSecretEmtpy =
+ isRollbackMode && !isSnapshotSecretsLoading && !snapshotSecret?.secrets?.length;
+ const isSecretEmpty = (!isRollbackMode && isDashboardSecretEmpty) || isSnapshotSecretEmtpy;
+
+ const userAvailableEnvs = wsEnv?.filter(
+ ({ isReadDenied, isWriteDenied }) => !isReadDenied || !isWriteDenied
+ );
+
+ return (
+
+
+
+
+ {/* Create a new tag modal */}
+ {
+ handlePopUpToggle('addTag', open);
+ }}
+ >
+
+
+
+ {/* Uploaded env override or not confirmation modal */}
+ handlePopUpToggle('uploadedSecOpts', open)}
+ >
+ handlePopUpClose('uploadedSecOpts')}
+ >
+ Keep old
+ ,
+
+ ]}
+ >
+
+
+ handlePopUpToggle('compareSecrets', open)}
+ >
+
+
+
+
+
+ );
+};
diff --git a/frontend/src/views/DashboardPage/DashboardPage.utils.ts b/frontend/src/views/DashboardPage/DashboardPage.utils.ts
new file mode 100644
index 000000000..ef754d1c5
--- /dev/null
+++ b/frontend/src/views/DashboardPage/DashboardPage.utils.ts
@@ -0,0 +1,231 @@
+import crypto from 'crypto';
+
+import * as yup from 'yup';
+
+import {
+ decryptAssymmetric,
+ encryptSymmetric
+} from '@app/components/utilities/cryptography/crypto';
+import { BatchSecretDTO } 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
new file mode 100644
index 000000000..871a6529d
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/CompareSecret/index.tsx
@@ -0,0 +1 @@
+export { CompareSecret } from './CompareSecret';
diff --git a/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx b/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx
new file mode 100644
index 000000000..541417cbc
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx
@@ -0,0 +1,55 @@
+import { Controller, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+
+import { Button, FormControl, Input, ModalClose } from '@app/components/v2';
+
+type Props = {
+ onCreateTag: (tagName: string) => Promise
+ {secretSnaphots?.pages?.map((group, i) => (
+
+ {group.map(({ _id, createdAt }, index) => (
+
+ ))}
+
+ ))}
+
+
+
+ }
+ onClick={onGenerateRandomHex}
+ >
+ {t('dashboard:sidebar.generate-random-hex')}
+
+
+ );
+};
diff --git a/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
new file mode 100644
index 000000000..1fac85361
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx
@@ -0,0 +1,211 @@
+import { useFormContext } from 'react-hook-form';
+import { faCircle, faCircleDot, faShuffle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import {
+ Button,
+ Drawer,
+ DrawerContent,
+ FormControl,
+ Input,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Switch,
+ TextArea
+} from '@app/components/v2';
+import { useToggle } from '@app/hooks';
+
+import { FormData, SecretActionType } from '../../DashboardPage.utils';
+import { GenRandomNumber } from './GenRandomNumber';
+
+type Props = {
+ isDrawerOpen: boolean;
+ onOpenChange: (isOpen: boolean) => void;
+ index: number;
+ isReadOnly?: boolean;
+ onEnvCompare: (secretKey: string) => void;
+ secretVersion?: Array<{ id: string; createdAt: string; value: string }>;
+ // to record the ids of deleted ones
+ onSecretDelete: (index: number, id?: string, overrideId?: string) => void;
+ onSave: () => void;
+};
+
+export const SecretDetailDrawer = ({
+ isDrawerOpen,
+ onOpenChange,
+ index,
+ secretVersion = [],
+ isReadOnly,
+ onSecretDelete,
+ onSave,
+ onEnvCompare
+}: Props): JSX.Element => {
+ const [canRevealSecVal, setCanRevealSecVal] = useToggle();
+ const [canRevealSecOverride, setCanRevealSecOverride] = useToggle();
+
+ const { register, setValue, watch } = useFormContext
+
+
+
+ setValue(parseInt(e.target.value, 10))}
+ />
+
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+ 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/SecretDropzone/index.tsx b/frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx
new file mode 100644
index 000000000..dc1752390
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx
@@ -0,0 +1 @@
+export { SecretDropzone } from './SecretDropzone';
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
new file mode 100644
index 000000000..9358569c9
--- /dev/null
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -0,0 +1,343 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+import {
+ faCodeBranch,
+ faEllipsis,
+ faInfoCircle,
+ faPlus,
+ faSquare,
+ faSquareCheck,
+ faTrash
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { cx } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+import {
+ Button,
+ FormControl,
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+ IconButton,
+ Input,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Tag,
+ TextArea,
+ Tooltip
+} from '@app/components/v2';
+import { useToggle } from '@app/hooks';
+import { WsTag } from '@app/hooks/api/types';
+
+import { FormData, SecretActionType } from '../../DashboardPage.utils';
+
+type Props = {
+ index: number;
+ // permission and external state's that decided to hide or show
+ isReadOnly?: boolean;
+ isAddOnly?: boolean;
+ isRollbackMode?: boolean;
+ isCommentColumnCollapsed: boolean;
+ isSecretValueHidden: boolean;
+ searchTerm: string;
+ // to record the ids of deleted ones
+ onSecretDelete: (index: number, id?: string, overrideId?: string) => void;
+ // sidebar control props
+ onRowExpand: () => void;
+ // tag props
+ wsTags?: WsTag[];
+ onCreateTagOpen: () => void;
+};
+
+const tagColors = [
+ { bg: 'bg-[#f1c40f]/40', text: 'text-[#fcf0c3]/70' },
+ { bg: 'bg-[#cb1c8d]/40', text: 'text-[#f2c6e3]/70' },
+ { bg: 'bg-[#badc58]/40', text: 'text-[#eef6d5]/70' },
+ { bg: 'bg-[#ff5400]/40', text: 'text-[#ffddcc]/70' },
+ { bg: 'bg-[#3AB0FF]/40', text: 'text-[#f0fffd]/70' },
+ { bg: 'bg-[#6F1AB6]/40', text: 'text-[#FFE5F1]/70' },
+ { bg: 'bg-[#C40B13]/40', text: 'text-[#FFDEDE]/70' },
+ { bg: 'bg-[#332FD0]/40', text: 'text-[#DFF6FF]/70' }
+];
+
+export const SecretInputRow = ({
+ index,
+ isCommentColumnCollapsed,
+ isSecretValueHidden,
+ onRowExpand,
+ isReadOnly,
+ isRollbackMode,
+ isAddOnly,
+ wsTags,
+ onCreateTagOpen,
+ onSecretDelete,
+ searchTerm
+}: Props): JSX.Element => {
+ const { register, setValue, control } = useFormContext
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ {!isSmaller && (
+ <>
+ {t(isSmaller ? 'common:drop-zone-keys' : 'common:drop-zone')}
+
+
+
+ OR
+ +
+
+
+
+ )}{' '}
+
+ )}
+
+
+ {!isAddOnly && (
+
+
+ )}
+
+
+
+
+
+
+
+ {error?.message}
+
+ {hasComment &&
+ ) : (
+
+ {secret.comment || '-'}
+
+ )}
+
+ {!isOverridden && (
+
+ )}
+ {isOverridden && (
+
+ )}
+
+
+ {secretTags.map(({ id, slug }, i) => (
+ remove(i)}
+ key={id}
+ >
+ {slug}
+
+ ))}
+ {!(isReadOnly || isAddOnly || isRollbackMode) && (
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ Add tags to this secret
+
+ {wsTags?.map((wsTag) => (
+
+ ))}
+ }
+ >
+ Add new tag
+
+
+
+
+ onSecretDelete(index, secret._id, secret?.idOverride)}
+ >
+
+
+ {!isAddOnly && (
+
+
+
+
+ )}
+
+
+ Key
+
+
+
+
+ {isCommentColumnCollapsed ?
+