From 4c79aadc224d3c799fca29bf6fdbed32a17fb4a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Victor?=
 <68869379+JoaoVictor6@users.noreply.github.com>
Date: Thu, 5 Jan 2023 22:34:18 -0300
Subject: [PATCH] feat: create dialog and button for confirm delete

---
 .../components/basic/dialog/DeleteEnvVar.tsx  | 78 +++++++++++++++++++
 .../dashboard/DeleteActionButton.tsx          | 33 ++++++++
 2 files changed, 111 insertions(+)
 create mode 100644 frontend/components/basic/dialog/DeleteEnvVar.tsx
 create mode 100644 frontend/components/dashboard/DeleteActionButton.tsx

diff --git a/frontend/components/basic/dialog/DeleteEnvVar.tsx b/frontend/components/basic/dialog/DeleteEnvVar.tsx
new file mode 100644
index 000000000..14f5fde47
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/frontend/components/dashboard/DeleteActionButton.tsx b/frontend/components/dashboard/DeleteActionButton.tsx
new file mode 100644
index 000000000..db595ff03
--- /dev/null
+++ b/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>
+  )
+}