Merge pull request #197 from JoaoVictor6/confirm-secret-key-delete

Add popup before secret delete

frontend/components/basic/dialog/DeleteEnvVar.tsx

@@ -0,0 +1,78 @@
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { Dialog, Transition } from "@headlessui/react";
+
+// #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: () => void 
+}
+
+export const DeleteEnvVar = ({ isOpen, onClose, onSubmit }: Props) => {
+  const { t } = useTranslation()
+  return (
+    <div>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={() => {}}>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-black bg-opacity-25" onClick={onClose} />
+            </Transition.Child>
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg font-medium leading-6 text-gray-400"
+                  >
+                    {t('dashboard:sidebar.delete-key-dialog.title')}
+                  </Dialog.Title>
+                  <div className="mt-2">
+                    <p className="text-sm text-gray-500">
+                      {t('dashboard:sidebar.delete-key-dialog.confirm-delete-message')}
+                    </p>
+                  </div>
+                  <div className="mt-6 flex justify-end">
+                    <button
+                      type="button"
+                      className="inline-flex justify-center rounded-md border border-transparent hover:border-white bg-red-800 hover:bg-red-600 px-4 py-2 text-sm font-medium text-gray-400 hover:text-white text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={onSubmit}
+                    >
+                      Delete
+                    </button>
+                    <button
+                      type="button"
+                      className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                      onClick={onClose}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};

frontend/components/dashboard/DeleteActionButton.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next';
+
+import Button from '../basic/buttons/Button';
+import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';
+
+type Props = {
+  onSubmit: () => void
+}
+
+export function DeleteActionButton({ onSubmit }: Props) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
+      <Button
+        text={String(t("Delete"))}
+        // onButtonPressed={onSubmit}
+        color="red"
+        size="md"
+        onButtonPressed={() => setOpen(true)}
+      />
+      <DeleteEnvVar 
+        isOpen={open}
+        onClose={() => {
+          setOpen(false)
+        }}
+        onSubmit={onSubmit}
+      />
+    </div>
+  )
+}

frontend/components/dashboard/SideBar.tsx

@@ -9,6 +9,7 @@ import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';
 import DashboardInputField from './DashboardInputField';
+import { DeleteActionButton } from './DeleteActionButton';
 import GenerateSecretMenu from './GenerateSecretMenu';
 
 
@@ -28,6 +29,10 @@ interface OverrideProps {
   pos: number;
   comment: string;
 }
+export interface DeleteRowFunctionProps { 
+  ids: string[]; 
+  secretName: string; 
+}
 
 interface SideBarProps {
   toggleSidebar: (value: string) => void; 
@@ -41,7 +46,7 @@ interface SideBarProps {
   savePush: () => void;
   sharedToHide: string[];
   setSharedToHide: (values: string[]) => void;
-  deleteRow: any;
+  deleteRow: (props: DeleteRowFunctionProps) => void;
 }
 
 /**
@@ -170,14 +175,9 @@ const SideBar = ({
         active={buttonReady}
         textDisabled="Saved"
       />
-      <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
-        <Button
-          text={String(t("Delete"))}
-          onButtonPressed={() => deleteRow({ ids: overrideEnabled ? data.map(secret => secret.id) : [data.filter(secret => secret.type == "shared")[0]?.id], secretName: data[0]?.key })}
-          color="red"
-          size="md"
-        />
-      </div>
+      <DeleteActionButton 
+        onSubmit={() => deleteRow({ ids: overrideEnabled ? data.map(secret => secret.id) : [data.filter(secret => secret.type == "shared")[0]?.id], secretName: data[0]?.key })}
+      />
     </div>
   </div>
 };

frontend/public/locales/en/dashboard.json

@@ -25,6 +25,11 @@
     "comments": "Comments & Notes",
     "personal-explanation": "This secret is personal. It is not shared with any of your teammates.",
     "generate-random-hex": "Generate Random Hex",
-    "digits": "digits"
+    "digits": "digits",
+    "delete-key-dialog": {
+      "title": "Delete Key",
+      "confirm-delete-message": "Are you sure you want to delete this secret? This cannot be undone."
+    }
   }
+
 }