fix: delete issue mutation & toast (#3079)

* fix: delete issue mutation

* fix: toast on delete issue

* fix: activity to issue detail redirection

web/components/issues/delete-issue-modal.tsx

@@ -3,6 +3,8 @@ import { Dialog, Transition } from "@headlessui/react";
 import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
+// hooks
+import useToast from "hooks/use-toast";
 // types
 import type { IIssue } from "types";
 
@@ -18,6 +20,8 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  const { setToastAlert } = useToast();
+
   useEffect(() => {
     setIsDeleteLoading(false);
   }, [isOpen]);
@@ -31,7 +35,21 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
     setIsDeleteLoading(true);
     if (onSubmit)
       await onSubmit()
-        .then(() => onClose())
+        .then(() => {
+          setToastAlert({
+            title: "Success",
+            type: "success",
+            message: "Issue deleted successfully",
+          });
+          onClose();
+        })
+        .catch(() => {
+          setToastAlert({
+            title: "Error",
+            type: "error",
+            message: "Failed to delete issue",
+          });
+        })
         .finally(() => setIsDeleteLoading(false));
   };
 

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -195,25 +195,12 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
 
   const handleDeleteIssue = async () => {
     if (!handleDragDrop) return;
-    await handleDragDrop(dragState.source, dragState.destination, sub_group_by, group_by, issues, issueIds)
+    await handleDragDrop(dragState.source, dragState.destination, sub_group_by, group_by, issues, issueIds).finally(
-      .then(() => {
+      () => {
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Issue deleted successfully",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          title: "Error",
-          type: "error",
-          message: "Failed to delete issue",
-        });
-      })
-      .finally(() => {
         setDeleteIssueModal(false);
         setDragState({});
-      });
+      }
+    );
   };
 
   const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -77,6 +77,13 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     };
   }, []);
 
+  if (!issues || issues.length === 0)
+    return (
+      <div className="grid h-full w-full place-items-center">
+        <Spinner />
+      </div>
+    );
+
   return (
     <div className="relative flex h-full w-full overflow-x-auto whitespace-nowrap rounded-lg bg-custom-background-200 text-custom-text-200">
       <div className="flex h-full w-full flex-col">
@@ -84,7 +91,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
           ref={containerRef}
           className="horizontal-scroll-enable flex divide-x-[0.5px] divide-custom-border-200 overflow-y-auto"
         >
-          {issues && issues.length > 0 ? (
+          {issues && issues.length > 0 && (
             <>
               <div className="sticky left-0 z-[2] w-[28rem]">
                 <div
@@ -134,10 +141,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                 states={states}
               />
             </>
-          ) : (
-            <div className="grid h-full w-full place-items-center">
-              <Spinner />
-            </div>
           )}
           <div /> {/* empty div to show right most border */}
         </div>

web/pages/profile/activity.tsx

@@ -100,7 +100,9 @@ const ProfileActivityPage: NextPageWithLayout = () => {
                 activityItem.field !== "estimate" ? (
                   <span className="text-custom-text-200">
                     created{" "}
-                    <Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}>
+                    <Link
+                      href={`/${activityItem.workspace_detail.slug}/projects/${activityItem.project}/issues/${activityItem.issue}`}
+                    >
                       <span className="inline-flex items-center hover:underline">
                         this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
                       </span>

web/store/issues/project-issues/cycle/issue.store.ts

@@ -257,6 +257,7 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
       if (!_issues) _issues = {};
       if (!_issues[cycleId]) _issues[cycleId] = {};
       delete _issues?.[cycleId]?.[issueId];
+      _issues[cycleId] = { ..._issues[cycleId] };
 
       runInAction(() => {
         this.issues = _issues;

web/store/issues/project-issues/module/issue.store.ts

@@ -250,6 +250,7 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
       if (!_issues) _issues = {};
       if (!_issues[moduleId]) _issues[moduleId] = {};
       delete _issues?.[moduleId]?.[issueId];
+      _issues[moduleId] = { ..._issues[moduleId] };
 
       runInAction(() => {
         this.issues = _issues;

web/store/issues/project-issues/project/issue.store.ts

@@ -175,6 +175,7 @@ export class ProjectIssuesStore extends IssueBaseStore implements IProjectIssues
       if (!_issues) _issues = {};
       if (!_issues[projectId]) _issues[projectId] = {};
       delete _issues?.[projectId]?.[issueId];
+      _issues[projectId] = { ..._issues[projectId] };
 
       runInAction(() => {
         this.issues = _issues;