diff --git a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx new file mode 100644 index 000000000..d3fad6511 --- /dev/null +++ b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx @@ -0,0 +1,42 @@ +import { Button, Modal, ModalContent } from '../v2'; + +type Props = { + isOpen: boolean; + onClose: () => void; + onOverwriteConfirm: (preserve: 'old' | 'new') => void; + duplicateKeys: string[]; +}; + +const ConfirmEnvOverwriteModal = ({ + isOpen, + onClose, + duplicateKeys, + onOverwriteConfirm +}: Props): JSX.Element => { + return ( + + + + + + } + onClose={onClose} + > +
+

Your file contains the following duplicate secrets:

+

{duplicateKeys.join(', ')}

+

Are you sure you want to overwrite these secrets?

+
+
+
+ ); +}; + +export default ConfirmEnvOverwriteModal; diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend/src/components/dashboard/DashboardInputField.tsx index 5b8cf9b69..d64658b67 100644 --- a/frontend/src/components/dashboard/DashboardInputField.tsx +++ b/frontend/src/components/dashboard/DashboardInputField.tsx @@ -231,7 +231,8 @@ function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInput prev.position === next.position && prev.blurred === next.blurred && prev.overrideEnabled === next.overrideEnabled && - prev.isDuplicate === next.isDuplicate + prev.isDuplicate === next.isDuplicate && + prev.isSideBarOpen === next.isSideBarOpen ); } diff --git a/frontend/src/components/v2/Button/Button.tsx b/frontend/src/components/v2/Button/Button.tsx index e16e09128..df12c25f7 100644 --- a/frontend/src/components/v2/Button/Button.tsx +++ b/frontend/src/components/v2/Button/Button.tsx @@ -158,7 +158,7 @@ export const Button = forwardRef( className={twMerge( 'shrink-0 cursor-pointer transition-all', loadingToggleClass, - size === 'xs' ? 'ml-1' : 'ml-2' + size === 'xs' ? 'ml-1' : 'ml-3' )} > {rightIcon} diff --git a/frontend/src/pages/dashboard/[id].tsx b/frontend/src/pages/dashboard/[id].tsx index 2fbcaa7da..1b668e6e4 100644 --- a/frontend/src/pages/dashboard/[id].tsx +++ b/frontend/src/pages/dashboard/[id].tsx @@ -24,6 +24,7 @@ import Button from '@app/components/basic/buttons/Button'; import ListBox from '@app/components/basic/Listbox'; import BottonRightPopup from '@app/components/basic/popups/BottomRightPopup'; import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider'; +import ConfirmEnvOverwriteModal from '@app/components/dashboard/ConfirmEnvOverwriteModal'; import DownloadSecretMenu from '@app/components/dashboard/DownloadSecretsMenu'; import DropZone from '@app/components/dashboard/DropZone'; import KeyPair from '@app/components/dashboard/KeyPair'; @@ -131,6 +132,7 @@ export default function Dashboard() { const [snapshotData, setSnapshotData] = useState(); const [numSnapshots, setNumSnapshots] = useState(); const [saveLoading, setSaveLoading] = useState(false); + const [dropZoneData, setDropZoneData] = useState(); const [projectTags, setProjectTags] = useState([]); const { t } = useTranslation(); @@ -546,11 +548,33 @@ export default function Dashboard() { return undefined; }; - const addData = (newData: SecretDataProps[]) => { - setData(data!.concat(newData)); + const addDataWithMerge = (newData: SecretDataProps[], preserve?: 'old' | 'new') => { + setData((oldData) => { + let filteredOldData = oldData!; + let filteredNewData = newData; + if (preserve === 'new') + filteredOldData = oldData!.filter( + (oldDataPoint) => !newData.find((newDataPoint) => newDataPoint.key === oldDataPoint.key) + ); + if (preserve === 'old') + filteredNewData = newData.filter( + (newDataPoint) => !oldData?.find((oldDataPoint) => oldDataPoint.key === newDataPoint.key) + ); + return filteredOldData.concat(filteredNewData); + }); setButtonReady(true); }; + const addData = (newData: SecretDataProps[]) => { + if ( + newData.some((newDataPoint) => data?.find((dataPoint) => dataPoint.key === newDataPoint.key)) // if newData contains duplicates + ) { + setDropZoneData(newData); + return; + } + addDataWithMerge(newData); + }; + const changeBlurred = () => { setBlurred(!blurred); }; @@ -568,7 +592,22 @@ 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) ?? [] + } + />
{checkDocsPopUpVisible && (