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/analytics/scope-and-demand/scope.tsx

@@ -29,7 +29,6 @@ export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
               return (
                 <div className="rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs">
                   <span className="font-medium text-brand-secondary">
-                    Issue count-{" "}
                     {assignee
                       ? assignee.assignees__first_name + " " + assignee.assignees__last_name
                       : "No assignee"}

apps/app/components/core/board-view/single-board.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -60,11 +60,6 @@ export const SingleBoard: React.FC<Props> = ({
 
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
 
-  useEffect(() => {
-    if (currentState?.group === "completed" || currentState?.group === "cancelled")
-      setIsCollapsed(false);
-  }, [currentState]);
-
   return (
     <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
       <BoardHeader

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>

apps/app/components/workspace/issues-list.tsx

@@ -23,11 +23,12 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
   const getDateDifference = (date: Date) => {
     const today = new Date();
 
-    let diffDays = 0;
+    let diffTime = 0;
-    if (type === "overdue") {
+
-      const diffTime = Math.abs(today.valueOf() - date.valueOf());
+    if (type === "overdue") diffTime = Math.abs(today.valueOf() - date.valueOf());
-      diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    else diffTime = Math.abs(date.valueOf() - today.valueOf());
-    } else return date.getDate() - today.getDate();
+
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
 
     return diffDays;
   };

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx

@@ -12,6 +12,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // components
 import {
   CreateUpdateLabelInline,
+  DeleteLabelModal,
   LabelsListModal,
   SingleLabel,
   SingleLabelGroup,
@@ -40,6 +41,9 @@ const LabelsSettings: NextPage = () => {
   const [labelsListModal, setLabelsListModal] = useState(false);
   const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
 
+  // delete label
+  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -52,7 +56,7 @@ const LabelsSettings: NextPage = () => {
       : null
   );
 
-  const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
+  const { data: issueLabels } = useSWR(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId
       ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
@@ -75,15 +79,6 @@ const LabelsSettings: NextPage = () => {
     setLabelToUpdate(label);
   };
 
-  const handleLabelDelete = (labelId: string) => {
-    if (workspaceSlug && projectDetails) {
-      mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
-      issuesService
-        .deleteIssueLabel(workspaceSlug as string, projectDetails.id, labelId)
-        .catch((e) => console.log(e));
-    }
-  };
-
   return (
     <>
       <LabelsListModal
@@ -91,6 +86,11 @@ const LabelsSettings: NextPage = () => {
         handleClose={() => setLabelsListModal(false)}
         parent={parentLabel}
       />
+      <DeleteLabelModal
+        isOpen={!!selectDeleteLabel}
+        data={selectDeleteLabel ?? null}
+        onClose={() => setSelectDeleteLabel(null)}
+      />
       <ProjectAuthorizationWrapper
         breadcrumbs={
           <Breadcrumbs>
@@ -143,7 +143,7 @@ const LabelsSettings: NextPage = () => {
                                 behavior: "smooth",
                               });
                             }}
-                            handleLabelDelete={handleLabelDelete}
+                            handleLabelDelete={() => setSelectDeleteLabel(label)}
                           />
                         );
                     } else
@@ -159,7 +159,7 @@ const LabelsSettings: NextPage = () => {
                               behavior: "smooth",
                             });
                           }}
-                          handleLabelDelete={handleLabelDelete}
+                          handleLabelDelete={() => setSelectDeleteLabel(label)}
                         />
                       );
                   })