chore: delete label confirmation modal (#1069)

* fix: negative days displayed on upcoming issues on dashboard

* chore: show completed and cancelled states by default

* chore: delete label confirmation modal

apps/app/components/labels/delete-label-modal.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// icons
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// types
+import type { IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IIssueLabels | null;
+};
+
+export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    setIsDeleteLoading(true);
+
+    mutate<IIssueLabels[]>(
+      PROJECT_ISSUE_LABELS(projectId.toString()),
+      (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
+      false
+    );
+
+    await issuesService
+      .deleteIssueLabel(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => handleClose())
+      .catch(() => {
+        setIsDeleteLoading(false);
+
+        mutate(PROJECT_ISSUE_LABELS(projectId.toString()));
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Label could not be deleted. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.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-brand-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-base border border-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                      <ExclamationTriangleIcon
+                        className="h-6 w-6 text-red-600"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
+                        Delete Label
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-brand-secondary">
+                          Are you sure you want to delete label-{" "}
+                          <span className="font-medium text-brand-base">{data?.name}</span>? The
+                          label will be removed from all the issues.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    {isDeleteLoading ? "Deleting..." : "Delete"}
+                  </DangerButton>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/app/components/labels/index.ts

@@ -1,5 +1,6 @@
 export * from "./create-label-modal";
 export * from "./create-update-label-inline";
+export * from "./delete-label-modal";
 export * from "./labels-list-modal";
 export * from "./single-label-group";
 export * from "./single-label";

apps/app/components/labels/single-label-group.tsx

@@ -29,7 +29,7 @@ type Props = {
   labelChildren: IIssueLabels[];
   addLabelToGroup: (parentLabel: IIssueLabels) => void;
   editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: (labelId: string) => void;
+  handleLabelDelete: () => void;
 };
 
 export const SingleLabelGroup: React.FC<Props> = ({
@@ -94,7 +94,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                     <span>Edit label</span>
                   </span>
                 </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+                <CustomMenu.MenuItem onClick={handleLabelDelete}>
                   <span className="flex items-center justify-start gap-2">
                     <TrashIcon className="h-4 w-4" />
                     <span>Delete label</span>
@@ -150,7 +150,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                             <span>Edit label</span>
                           </span>
                         </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem onClick={() => handleLabelDelete(child.id)}>
+                        <CustomMenu.MenuItem onClick={handleLabelDelete}>
                           <span className="flex items-center justify-start gap-2">
                             <TrashIcon className="h-4 w-4" />
                             <span>Delete label</span>

apps/app/components/labels/single-label.tsx

@@ -11,7 +11,7 @@ type Props = {
   label: IIssueLabels;
   addLabelToGroup: (parentLabel: IIssueLabels) => void;
   editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: (labelId: string) => void;
+  handleLabelDelete: () => void;
 };
 
 export const SingleLabel: React.FC<Props> = ({
@@ -44,7 +44,7 @@ export const SingleLabel: React.FC<Props> = ({
             <span>Edit label</span>
           </span>
         </CustomMenu.MenuItem>
-        <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
+        <CustomMenu.MenuItem onClick={handleLabelDelete}>
           <span className="flex items-center justify-start gap-2">
             <TrashIcon className="h-4 w-4" />
             <span>Delete label</span>