From b814e4c9052c6928cb7240e4d7e5578b2c10a13a Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 13 Sep 2023 11:42:48 +0530
Subject: [PATCH 1/6] feat: issue linking

---
 .../issues/sidebar-select/blocked.tsx         |  62 +++++--
 .../issues/sidebar-select/blocker.tsx         |  65 +++++--
 .../issues/sidebar-select/duplicate.tsx       | 174 ++++++++++++++++++
 web/components/issues/sidebar-select/index.ts |   2 +
 .../issues/sidebar-select/relates-to.tsx      | 174 ++++++++++++++++++
 web/components/issues/sidebar.tsx             |  72 +++++++-
 web/hooks/my-issues/use-my-issues-filter.tsx  |  26 +--
 .../projects/[projectId]/issues/[issueId].tsx |   4 +-
 web/services/issues.service.ts                |  46 +++++
 web/services/track-event.service.ts           |  16 ++
 web/types/issues.d.ts                         |  27 ++-
 11 files changed, 614 insertions(+), 54 deletions(-)
 create mode 100644 web/components/issues/sidebar-select/duplicate.tsx
 create mode 100644 web/components/issues/sidebar-select/relates-to.tsx

diff --git a/web/components/issues/sidebar-select/blocked.tsx b/web/components/issues/sidebar-select/blocked.tsx
index 02cfd3b1691..21d5f3d71f2 100644
--- a/web/components/issues/sidebar-select/blocked.tsx
+++ b/web/components/issues/sidebar-select/blocked.tsx
@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 
 import { useRouter } from "next/router";
-
 // react-hook-form
 import { UseFormWatch } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// services
+import issuesService from "services/issues.service";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // icons
@@ -29,10 +31,11 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
 }) => {
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
+  const { user } = useUser();
   const { setToastAlert } = useToast();
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const handleClose = () => {
     setIsBlockedModalOpen(false);
@@ -62,15 +65,33 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
       },
     }));
 
-    const newBlocked = [...watch("blocked_issues"), ...selectedIssues];
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            relation_type: "blocked_by" as const,
+            related_issue_detail: issue.blocked_issue_detail,
+            related_issue: issue.blocked_issue_detail.id,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          related_issues: [
+            ...watch("related_issues")?.filter((i) => i.relation_type !== "blocked_by"),
+            ...response,
+          ],
+        });
+      });
 
-    submitChanges({
-      blocked_issues: newBlocked,
-      blocks_list: newBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
-    });
     handleClose();
   };
 
+  const blockedByIssue = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by");
+
   return (
     <>
       <ExistingIssuesListModal
@@ -87,33 +108,42 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         </div>
         <div className="space-y-1 sm:basis-1/2">
           <div className="flex flex-wrap gap-1">
-            {watch("blocked_issues") && watch("blocked_issues").length > 0
-              ? watch("blocked_issues").map((issue) => (
+            {blockedByIssue && blockedByIssue.length > 0
+              ? blockedByIssue.map((relation) => (
                   <div
-                    key={issue.blocked_issue_detail?.id}
+                    key={relation.related_issue_detail?.id}
                     className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
                   >
                     <a
-                      href={`/${workspaceSlug}/projects/${issue.blocked_issue_detail?.project_detail.id}/issues/${issue.blocked_issue_detail?.id}`}
+                      href={`/${workspaceSlug}/projects/${relation.related_issue_detail?.project_detail.id}/issues/${relation.related_issue_detail?.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
                       <BlockedIcon height={10} width={10} />
-                      {`${issue.blocked_issue_detail?.project_detail.identifier}-${issue.blocked_issue_detail?.sequence_id}`}
+                      {`${relation.related_issue_detail?.project_detail.identifier}-${relation.related_issue_detail?.sequence_id}`}
                     </a>
                     <button
                       type="button"
                       className="opacity-0 duration-300 group-hover:opacity-100"
                       onClick={() => {
-                        const updatedBlocked = watch("blocked_issues").filter(
-                          (i) => i.blocked_issue_detail?.id !== issue.blocked_issue_detail?.id
+                        const updatedRelations = watch("related_issues")?.filter(
+                          (i) => i.id !== relation.id
                         );
 
                         submitChanges({
-                          blocked_issues: updatedBlocked,
-                          blocks_list: updatedBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
+                          related_issues: updatedRelations,
                         });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
                       }}
                     >
                       <XMarkIcon className="h-2 w-2" />
diff --git a/web/components/issues/sidebar-select/blocker.tsx b/web/components/issues/sidebar-select/blocker.tsx
index eb15e9adeb6..41836c9e0bf 100644
--- a/web/components/issues/sidebar-select/blocker.tsx
+++ b/web/components/issues/sidebar-select/blocker.tsx
@@ -6,8 +6,11 @@ import { useRouter } from "next/router";
 import { UseFormWatch } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
 // components
 import { ExistingIssuesListModal } from "components/core";
+// services
+import issuesService from "services/issues.service";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon } from "components/icons";
@@ -29,15 +32,19 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
 }) => {
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
+  const { user } = useUser();
   const { setToastAlert } = useToast();
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
   const handleClose = () => {
     setIsBlockerModalOpen(false);
   };
 
+  const blockerIssue =
+    watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
+
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
       setToastAlert({
@@ -62,15 +69,32 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
       },
     }));
 
-    const newBlockers = [...watch("blocker_issues"), ...selectedIssues];
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issue.blocker_issue_detail.id,
+            relation_type: "blocked_by" as const,
+            related_issue: issueId as string,
+            related_issue_detail: issue.blocker_issue_detail,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          issue_relations: [...blockerIssue, ...response],
+        });
+      });
 
-    submitChanges({
-      blocker_issues: newBlockers,
-      blockers_list: newBlockers.map((i) => i.blocker_issue_detail?.id ?? ""),
-    });
     handleClose();
   };
 
+  console.log(watch(), "watch");
+
+  console.log(blockerIssue);
+
   return (
     <>
       <ExistingIssuesListModal
@@ -87,35 +111,42 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         </div>
         <div className="space-y-1 sm:basis-1/2">
           <div className="flex flex-wrap gap-1">
-            {watch("blocker_issues") && watch("blocker_issues").length > 0
-              ? watch("blocker_issues").map((issue) => (
+            {blockerIssue && blockerIssue.length > 0
+              ? blockerIssue.map((relation) => (
                   <div
-                    key={issue.blocker_issue_detail?.id}
+                    key={relation.issue_detail?.id}
                     className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
                   >
                     <a
-                      href={`/${workspaceSlug}/projects/${issue.blocker_issue_detail?.project_detail.id}/issues/${issue.blocker_issue_detail?.id}`}
+                      href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
                       <BlockerIcon height={10} width={10} />
-                      {`${issue.blocker_issue_detail?.project_detail.identifier}-${issue.blocker_issue_detail?.sequence_id}`}
+                      {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
                     </a>
                     <button
                       type="button"
                       className="opacity-0 duration-300 group-hover:opacity-100"
                       onClick={() => {
-                        const updatedBlockers = watch("blocker_issues").filter(
-                          (i) => i.blocker_issue_detail?.id !== issue.blocker_issue_detail?.id
+                        const updatedBlockers = blockerIssue.filter(
+                          (i) => i.issue_detail?.id !== relation.issue_detail?.id
                         );
 
                         submitChanges({
-                          blocker_issues: updatedBlockers,
-                          blockers_list: updatedBlockers.map(
-                            (i) => i.blocker_issue_detail?.id ?? ""
-                          ),
+                          issue_relations: updatedBlockers,
                         });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
                       }}
                     >
                       <XMarkIcon className="h-2 w-2" />
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
new file mode 100644
index 00000000000..6787529547a
--- /dev/null
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// icons
+import { Copy } from "lucide-react";
+// components
+import { ExistingIssuesListModal } from "components/core";
+// services
+import issuesService from "services/issues.service";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { BlockerIcon } from "components/icons";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
+  const { issueId, submitChanges, watch, disabled = false } = props;
+
+  const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsDuplicateModalOpen(false);
+  };
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one issue.",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            related_issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "duplicate" as const,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          related_issues: [...watch("related_issues"), ...response.related_list],
+        });
+      });
+
+    handleClose();
+  };
+
+  const duplicateIssuesRelation = [
+    ...(watch("related_issues")?.filter((i) => i.relation_type === "duplicate") ?? []),
+    ...(watch("issue_relations") ?? [])
+      ?.filter((i) => i.relation_type === "duplicate")
+      .map((i) => ({
+        ...i,
+        related_issue_detail: i.issue_detail,
+        related_issue: i.issue_detail?.id,
+      })),
+  ];
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isDuplicateModalOpen}
+        handleClose={() => setIsDuplicateModalOpen(false)}
+        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <Copy className="h-4 w-4 flex-shrink-0" />
+          <p>Duplicate</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {duplicateIssuesRelation && duplicateIssuesRelation.length > 0
+              ? duplicateIssuesRelation.map((relation) => (
+                  <div
+                    key={relation.related_issue_detail?.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.related_issue_detail?.project_detail.id}/issues/${relation.related_issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <BlockerIcon height={10} width={10} />
+                      {`${relation.related_issue_detail?.project_detail.identifier}-${relation.related_issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        const updatedBlockers = duplicateIssuesRelation.filter(
+                          (i) => i.related_issue_detail?.id !== relation.related_issue_detail?.id
+                        );
+
+                        submitChanges({
+                          related_issues: updatedBlockers,
+                        });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
+                      }}
+                    >
+                      <XMarkIcon className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsDuplicateModalOpen(true)}
+            disabled={disabled}
+          >
+            Select issues
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/sidebar-select/index.ts b/web/components/issues/sidebar-select/index.ts
index 5035325fd98..8b083841eaf 100644
--- a/web/components/issues/sidebar-select/index.ts
+++ b/web/components/issues/sidebar-select/index.ts
@@ -8,3 +8,5 @@ export * from "./module";
 export * from "./parent";
 export * from "./priority";
 export * from "./state";
+export * from "./duplicate";
+export * from "./relates-to";
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
new file mode 100644
index 00000000000..5afeb8f788a
--- /dev/null
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+// react-hook-form
+import { UseFormWatch } from "react-hook-form";
+// hooks
+import useToast from "hooks/use-toast";
+import useUser from "hooks/use-user";
+// icons
+import { LocateFixed } from "lucide-react";
+// components
+import { ExistingIssuesListModal } from "components/core";
+// services
+import issuesService from "services/issues.service";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
+import { BlockerIcon } from "components/icons";
+// types
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+
+type Props = {
+  issueId?: string;
+  submitChanges: (formData: Partial<IIssue>) => void;
+  watch: UseFormWatch<IIssue>;
+  disabled?: boolean;
+};
+
+export const SidebarRelatesSelect: React.FC<Props> = (props) => {
+  const { issueId, submitChanges, watch, disabled = false } = props;
+
+  const [isRelatesToModalOpen, setIsRelatesToModalOpen] = useState(false);
+
+  const { user } = useUser();
+  const { setToastAlert } = useToast();
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const handleClose = () => {
+    setIsRelatesToModalOpen(false);
+  };
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Please select at least one issue.",
+      });
+
+      return;
+    }
+
+    const selectedIssues: { blocker_issue_detail: BlockeIssueDetail }[] = data.map((i) => ({
+      blocker_issue_detail: {
+        id: i.id,
+        name: i.name,
+        sequence_id: i.sequence_id,
+        project_detail: {
+          id: i.project_id,
+          identifier: i.project__identifier,
+          name: i.project__name,
+        },
+      },
+    }));
+
+    if (!user) return;
+
+    issuesService
+      .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
+        related_list: [
+          ...selectedIssues.map((issue) => ({
+            issue: issueId as string,
+            related_issue_detail: issue.blocker_issue_detail,
+            related_issue: issue.blocker_issue_detail.id,
+            relation_type: "relates_to" as const,
+          })),
+        ],
+      })
+      .then((response) => {
+        submitChanges({
+          related_issues: [...watch("related_issues"), ...response.related_list],
+        });
+      });
+
+    handleClose();
+  };
+
+  const relatedToIssueRelation = [
+    ...(watch("related_issues")?.filter((i) => i.relation_type === "relates_to") ?? []),
+    ...(watch("issue_relations") ?? [])
+      ?.filter((i) => i.relation_type === "relates_to")
+      .map((i) => ({
+        ...i,
+        related_issue_detail: i.issue_detail,
+        related_issue: i.issue_detail?.id,
+      })),
+  ];
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        isOpen={isRelatesToModalOpen}
+        handleClose={() => setIsRelatesToModalOpen(false)}
+        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+      <div className="flex flex-wrap items-start py-2">
+        <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+          <LocateFixed className="h-4 w-4 flex-shrink-0" />
+          <p>Relates to</p>
+        </div>
+        <div className="space-y-1 sm:basis-1/2">
+          <div className="flex flex-wrap gap-1">
+            {relatedToIssueRelation && relatedToIssueRelation.length > 0
+              ? relatedToIssueRelation.map((relation) => (
+                  <div
+                    key={relation.related_issue_detail?.id}
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                  >
+                    <a
+                      href={`/${workspaceSlug}/projects/${relation.related_issue_detail?.project_detail.id}/issues/${relation.related_issue_detail?.id}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-1"
+                    >
+                      <BlockerIcon height={10} width={10} />
+                      {`${relation.related_issue_detail?.project_detail.identifier}-${relation.related_issue_detail?.sequence_id}`}
+                    </a>
+                    <button
+                      type="button"
+                      className="opacity-0 duration-300 group-hover:opacity-100"
+                      onClick={() => {
+                        const updatedBlockers = relatedToIssueRelation.filter(
+                          (i) => i.related_issue_detail?.id !== relation.related_issue_detail?.id
+                        );
+
+                        submitChanges({
+                          related_issues: updatedBlockers,
+                        });
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          relation.id,
+                          user
+                        );
+                      }}
+                    >
+                      <XMarkIcon className="h-2 w-2" />
+                    </button>
+                  </div>
+                ))
+              : null}
+          </div>
+          <button
+            type="button"
+            className={`bg-custom-background-80 text-xs text-custom-text-200 rounded px-2.5 py-0.5 ${
+              disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+            }`}
+            onClick={() => setIsRelatesToModalOpen(true)}
+            disabled={disabled}
+          >
+            Select issues
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
index a33d17705e0..1f48f730792 100644
--- a/web/components/issues/sidebar.tsx
+++ b/web/components/issues/sidebar.tsx
@@ -30,6 +30,8 @@ import {
   SidebarStateSelect,
   SidebarEstimateSelect,
   SidebarLabelSelect,
+  SidebarDuplicateSelect,
+  SidebarRelatesSelect,
 } from "components/issues";
 // ui
 import { CustomDatePicker, Icon } from "components/ui";
@@ -76,6 +78,8 @@ type Props = {
     | "delete"
     | "all"
     | "subscribe"
+    | "duplicate"
+    | "relates_to"
   )[];
   uneditable?: boolean;
 };
@@ -464,7 +468,19 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
                   <SidebarBlockerSelect
                     issueId={issueId as string}
-                    submitChanges={submitChanges}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
                   />
@@ -472,7 +488,59 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
                   <SidebarBlockedSelect
                     issueId={issueId as string}
-                    submitChanges={submitChanges}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
+                    watch={watchIssue}
+                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
+                  <SidebarDuplicateSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
+                    watch={watchIssue}
+                    disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                  />
+                )}
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
+                  <SidebarRelatesSelect
+                    issueId={issueId as string}
+                    submitChanges={(data: any) => {
+                      mutate<IIssue>(
+                        ISSUE_DETAILS(issueId as string),
+                        (prevData) => {
+                          if (!prevData) return prevData;
+                          return {
+                            ...prevData,
+                            ...data,
+                          };
+                        },
+                        false
+                      );
+                    }}
                     watch={watchIssue}
                     disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
                   />
diff --git a/web/hooks/my-issues/use-my-issues-filter.tsx b/web/hooks/my-issues/use-my-issues-filter.tsx
index 2de72918f2d..86bba49cc0b 100644
--- a/web/hooks/my-issues/use-my-issues-filter.tsx
+++ b/web/hooks/my-issues/use-my-issues-filter.tsx
@@ -174,19 +174,19 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
   }, [myWorkspace, workspaceSlug]);
 
   const newProperties: Properties = {
-    assignee: myWorkspace?.view_props.properties.assignee ?? true,
-    start_date: myWorkspace?.view_props.properties.start_date ?? true,
-    due_date: myWorkspace?.view_props.properties.due_date ?? true,
-    key: myWorkspace?.view_props.properties.key ?? true,
-    labels: myWorkspace?.view_props.properties.labels ?? true,
-    priority: myWorkspace?.view_props.properties.priority ?? true,
-    state: myWorkspace?.view_props.properties.state ?? true,
-    sub_issue_count: myWorkspace?.view_props.properties.sub_issue_count ?? true,
-    attachment_count: myWorkspace?.view_props.properties.attachment_count ?? true,
-    link: myWorkspace?.view_props.properties.link ?? true,
-    estimate: myWorkspace?.view_props.properties.estimate ?? true,
-    created_on: myWorkspace?.view_props.properties.created_on ?? true,
-    updated_on: myWorkspace?.view_props.properties.updated_on ?? true,
+    assignee: myWorkspace?.view_props?.properties?.assignee ?? true,
+    start_date: myWorkspace?.view_props?.properties?.start_date ?? true,
+    due_date: myWorkspace?.view_props?.properties?.due_date ?? true,
+    key: myWorkspace?.view_props?.properties?.key ?? true,
+    labels: myWorkspace?.view_props?.properties?.labels ?? true,
+    priority: myWorkspace?.view_props?.properties?.priority ?? true,
+    state: myWorkspace?.view_props?.properties?.state ?? true,
+    sub_issue_count: myWorkspace?.view_props?.properties?.sub_issue_count ?? true,
+    attachment_count: myWorkspace?.view_props?.properties?.attachment_count ?? true,
+    link: myWorkspace?.view_props?.properties?.link ?? true,
+    estimate: myWorkspace?.view_props?.properties?.estimate ?? true,
+    created_on: myWorkspace?.view_props?.properties?.created_on ?? true,
+    updated_on: myWorkspace?.view_props?.properties?.updated_on ?? true,
   };
 
   return {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index c40f936de9f..d686fc3573c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -86,8 +86,8 @@ const IssueDetailsPage: NextPage = () => {
         ...formData,
       };
 
-      delete payload.blocker_issues;
-      delete payload.blocked_issues;
+      delete payload.related_issues;
+      delete payload.issue_relations;
 
       await issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
diff --git a/web/services/issues.service.ts b/web/services/issues.service.ts
index af5d722e3bf..86b1bb4edc0 100644
--- a/web/services/issues.service.ts
+++ b/web/services/issues.service.ts
@@ -150,6 +150,52 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
+  async createIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    user: ICurrentUserResponse,
+    data: {
+      related_list: Array<{
+        relation_type: "duplicate" | "relates_to" | "blocked_by";
+        related_issue: string;
+      }>;
+    }
+  ) {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/`,
+      data
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueRelationEvent(response.data, "ISSUE_RELATION_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationId: string,
+    user: ICurrentUserResponse
+  ) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/${relationId}/`
+    )
+      .then((response) => {
+        if (trackEvent)
+          trackEventServices.trackIssueRelationEvent(response.data, "ISSUE_RELATION_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
   async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
     return this.post(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`,
diff --git a/web/services/track-event.service.ts b/web/services/track-event.service.ts
index c59242f5083..30a74798b50 100644
--- a/web/services/track-event.service.ts
+++ b/web/services/track-event.service.ts
@@ -328,6 +328,22 @@ class TrackEventServices extends APIService {
     });
   }
 
+  async trackIssueRelationEvent(
+    data: any,
+    eventName: "ISSUE_RELATION_CREATE" | "ISSUE_RELATION_DELETE",
+    user: ICurrentUserResponse
+  ): Promise<any> {
+    return this.request({
+      url: "/api/track-event",
+      method: "POST",
+      data: {
+        eventName,
+        extra: data,
+        user: user,
+      },
+    });
+  }
+
   async trackIssueMovedToCycleOrModuleEvent(
     data: any,
     eventName:
diff --git a/web/types/issues.d.ts b/web/types/issues.d.ts
index cdc0a391ab2..5c3fea37f13 100644
--- a/web/types/issues.d.ts
+++ b/web/types/issues.d.ts
@@ -66,6 +66,15 @@ export interface linkDetails {
   url: string;
 }
 
+export type IssueRelationType = "duplicate" | "relates_to" | "blocked_by";
+
+export interface IssueRelation {
+  id: string;
+  issue: string;
+  related_issue: string;
+  relation_type: IssueRelationType;
+}
+
 export interface IIssue {
   archived_at: string;
   assignees: string[];
@@ -73,10 +82,20 @@ export interface IIssue {
   assignees_list: string[];
   attachment_count: number;
   attachments: any[];
-  blocked_issues: { blocked_issue_detail?: BlockeIssueDetail }[];
-  blocker_issues: { blocker_issue_detail?: BlockeIssueDetail }[];
-  blockers_list: string[];
-  blocks_list: string[];
+  issue_relations: {
+    id: string;
+    issue: string;
+    issue_detail: BlockeIssueDetail;
+    relation_type: IssueRelationType;
+    related_issue: string;
+  }[];
+  related_issues: {
+    id: string;
+    issue: string;
+    related_issue_detail: BlockeIssueDetail;
+    relation_type: IssueRelationType;
+    related_issue: string;
+  }[];
   bridge_id?: string | null;
   completed_at: Date;
   created_at: string;

From 51caac8c8fd4f879242a7c2468b5529999ea5538 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 13 Sep 2023 16:36:47 +0530
Subject: [PATCH 2/6] fix: search params to filter out selected issue

---
 .../issues/sidebar-select/blocked.tsx          |  2 +-
 .../issues/sidebar-select/blocker.tsx          | 18 +++++++++++-------
 .../issues/sidebar-select/duplicate.tsx        |  4 ++--
 .../issues/sidebar-select/relates-to.tsx       |  4 ++--
 web/types/projects.d.ts                        |  2 +-
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/components/issues/sidebar-select/blocked.tsx b/web/components/issues/sidebar-select/blocked.tsx
index 21d5f3d71f2..9554a83bae7 100644
--- a/web/components/issues/sidebar-select/blocked.tsx
+++ b/web/components/issues/sidebar-select/blocked.tsx
@@ -97,7 +97,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
       <ExistingIssuesListModal
         isOpen={isBlockedModalOpen}
         handleClose={() => setIsBlockedModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
diff --git a/web/components/issues/sidebar-select/blocker.tsx b/web/components/issues/sidebar-select/blocker.tsx
index 41836c9e0bf..5b8fd374d2a 100644
--- a/web/components/issues/sidebar-select/blocker.tsx
+++ b/web/components/issues/sidebar-select/blocker.tsx
@@ -84,23 +84,27 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
       })
       .then((response) => {
         submitChanges({
-          issue_relations: [...blockerIssue, ...response],
+          issue_relations: [
+            ...blockerIssue,
+            ...(response ?? []).map((i: any) => ({
+              id: i.id,
+              relation_type: i.relation_type,
+              issue_detail: i.related_issue_detail,
+              issue: i.related_issue,
+            })),
+          ],
         });
       });
 
     handleClose();
   };
 
-  console.log(watch(), "watch");
-
-  console.log(blockerIssue);
-
   return (
     <>
       <ExistingIssuesListModal
         isOpen={isBlockerModalOpen}
         handleClose={() => setIsBlockerModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
@@ -143,7 +147,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                         issuesService.deleteIssueRelation(
                           workspaceSlug as string,
                           projectId as string,
-                          issueId as string,
+                          relation.issue_detail?.id as string,
                           relation.id,
                           user
                         );
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index 6787529547a..66343928fff 100644
--- a/web/components/issues/sidebar-select/duplicate.tsx
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -79,7 +79,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
       })
       .then((response) => {
         submitChanges({
-          related_issues: [...watch("related_issues"), ...response.related_list],
+          related_issues: [...watch("related_issues"), ...(response ?? [])],
         });
       });
 
@@ -102,7 +102,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
       <ExistingIssuesListModal
         isOpen={isDuplicateModalOpen}
         handleClose={() => setIsDuplicateModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index 5afeb8f788a..7f39b5aaee5 100644
--- a/web/components/issues/sidebar-select/relates-to.tsx
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -79,7 +79,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
       })
       .then((response) => {
         submitChanges({
-          related_issues: [...watch("related_issues"), ...response.related_list],
+          related_issues: [...watch("related_issues"), ...(response ?? [])],
         });
       });
 
@@ -102,7 +102,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
       <ExistingIssuesListModal
         isOpen={isRelatesToModalOpen}
         handleClose={() => setIsRelatesToModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId }}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
diff --git a/web/types/projects.d.ts b/web/types/projects.d.ts
index 590fe5023e2..08b772b87f9 100644
--- a/web/types/projects.d.ts
+++ b/web/types/projects.d.ts
@@ -137,7 +137,7 @@ export interface GithubRepositoriesResponse {
 export type TProjectIssuesSearchParams = {
   search: string;
   parent?: boolean;
-  blocker_blocked_by?: boolean;
+  issue_relation?: boolean;
   cycle?: boolean;
   module?: boolean;
   sub_issue?: boolean;

From df8e29b28ec8a63fb7183b564ab40940f45cda8a Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 13 Sep 2023 17:58:17 +0530
Subject: [PATCH 3/6] style: changed icons

---
 web/components/icons/index.ts                 |  1 +
 web/components/icons/related-icon.tsx         | 41 +++++++++++++++++++
 .../issues/sidebar-select/duplicate.tsx       | 12 +++---
 .../issues/sidebar-select/relates-to.tsx      | 12 +++---
 4 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 web/components/icons/related-icon.tsx

diff --git a/web/components/icons/index.ts b/web/components/icons/index.ts
index d3be7f2a8a0..ab661a09249 100644
--- a/web/components/icons/index.ts
+++ b/web/components/icons/index.ts
@@ -83,3 +83,4 @@ export * from "./archive-icon";
 export * from "./clock-icon";
 export * from "./bell-icon";
 export * from "./single-comment-icon";
+export * from "./related-icon";
diff --git a/web/components/icons/related-icon.tsx b/web/components/icons/related-icon.tsx
new file mode 100644
index 00000000000..3abb4b1c3dc
--- /dev/null
+++ b/web/components/icons/related-icon.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const RelatedIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  color = "rgb(var(--color-text-200))",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M20 13L20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4L4 4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6L2 20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22L11 22"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.125 19.25L9 16.125L12.125 13"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index 66343928fff..d085dd87b3f 100644
--- a/web/components/issues/sidebar-select/duplicate.tsx
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -7,16 +7,14 @@ import { UseFormWatch } from "react-hook-form";
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // icons
-import { Copy } from "lucide-react";
+import { X, CopyPlus } from "lucide-react";
 // components
+import { BlockerIcon } from "components/icons";
 import { ExistingIssuesListModal } from "components/core";
 // services
 import issuesService from "services/issues.service";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockerIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   issueId?: string;
@@ -108,7 +106,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
       />
       <div className="flex flex-wrap items-start py-2">
         <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-          <Copy className="h-4 w-4 flex-shrink-0" />
+          <CopyPlus className="h-4 w-4 flex-shrink-0" />
           <p>Duplicate</p>
         </div>
         <div className="space-y-1 sm:basis-1/2">
@@ -151,7 +149,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index 7f39b5aaee5..fb878daee82 100644
--- a/web/components/issues/sidebar-select/relates-to.tsx
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -7,16 +7,14 @@ import { UseFormWatch } from "react-hook-form";
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // icons
-import { LocateFixed } from "lucide-react";
+import { X } from "lucide-react";
+import { BlockerIcon, RelatedIcon } from "components/icons";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // services
 import issuesService from "services/issues.service";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockerIcon } from "components/icons";
 // types
-import { BlockeIssueDetail, IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   issueId?: string;
@@ -108,7 +106,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
       />
       <div className="flex flex-wrap items-start py-2">
         <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-          <LocateFixed className="h-4 w-4 flex-shrink-0" />
+          <RelatedIcon className="h-4 w-4 flex-shrink-0" />
           <p>Relates to</p>
         </div>
         <div className="space-y-1 sm:basis-1/2">
@@ -151,7 +149,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))

From 2a6aeaebab86b9c9e4c454e1b22ca70eda014ef9 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 13 Sep 2023 18:49:01 +0530
Subject: [PATCH 4/6] fix: build error on web-view

---
 web/components/issues/confirm-form-close.tsx  | 140 +++++++++++++
 .../web-view/issue-properties-detail.tsx      | 192 +++++++++++++-----
 web/components/web-view/select-blocked.tsx    |   2 +-
 web/components/web-view/select-blocker.tsx    |   2 +-
 4 files changed, 283 insertions(+), 53 deletions(-)
 create mode 100644 web/components/issues/confirm-form-close.tsx

diff --git a/web/components/issues/confirm-form-close.tsx b/web/components/issues/confirm-form-close.tsx
new file mode 100644
index 00000000000..4444d5b1d36
--- /dev/null
+++ b/web/components/issues/confirm-form-close.tsx
@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import viewsService from "services/views.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { DangerButton, SecondaryButton } from "components/ui";
+// icons
+import { AlertTriangle } from "lucide-react";
+// types
+import type { ICurrentUserResponse, IView } from "types";
+// fetch-keys
+import { VIEWS_LIST } from "constants/fetch-keys";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onDiscard: () => void;
+  onSaveDraft: () => void;
+};
+
+export const DeleteViewModal: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, onDiscard, onSaveDraft } = props;
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { setToastAlert } = useToast();
+
+  const onClose = () => {
+    handleClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+    if (!workspaceSlug || !data || !projectId) return;
+
+    await viewsService
+      .deleteView(workspaceSlug as string, projectId as string, data.id, user)
+      .then(() => {
+        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
+          views?.filter((view) => view.id !== data.id)
+        );
+
+        handleClose();
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "View deleted successfully.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "View could not be deleted. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  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-custom-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 border border-custom-border-200 bg-custom-background-100 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-500/20 sm:mx-0 sm:h-10 sm:w-10">
+                      <AlertTriangle 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-custom-text-100"
+                      >
+                        Delete View
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Are you sure you want to delete view-{" "}
+                          <span className="break-words font-medium text-custom-text-100">
+                            {data?.name}
+                          </span>
+                          ? All of the data related to the view will be permanently removed. This
+                          action cannot be undone.
+                        </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>
+  );
+};
diff --git a/web/components/web-view/issue-properties-detail.tsx b/web/components/web-view/issue-properties-detail.tsx
index 2fe0356f57c..089f8950f75 100644
--- a/web/components/web-view/issue-properties-detail.tsx
+++ b/web/components/web-view/issue-properties-detail.tsx
@@ -4,9 +4,21 @@ import React, { useState } from "react";
 // next
 import { useRouter } from "next/router";
 
+// swr
+import { mutate } from "swr";
+
 // react hook forms
 import { Control, Controller, useWatch } from "react-hook-form";
 
+// services
+import issuesService from "services/issues.service";
+
+// hooks
+import useUser from "hooks/use-user";
+
+// fetch keys
+import { ISSUE_DETAILS } from "constants/fetch-keys";
+
 // icons
 import { BlockedIcon, BlockerIcon } from "components/icons";
 import { ChevronDown, PlayIcon, User, X, CalendarDays, LayoutGrid, Users } from "lucide-react";
@@ -26,6 +38,7 @@ import {
   EstimateSelect,
   ParentSelect,
   BlockerSelect,
+  BlockedSelect,
 } from "components/web-view";
 
 // types
@@ -39,15 +52,16 @@ type Props = {
 export const IssuePropertiesDetail: React.FC<Props> = (props) => {
   const { control, submitChanges } = props;
 
-  const blockerIssue = useWatch({
-    control,
-    name: "blocker_issues",
-  });
+  const blockerIssue =
+    useWatch({
+      control,
+      name: "issue_relations",
+    })?.filter((i) => i.relation_type === "blocked_by") || [];
 
   const blockedIssue = useWatch({
     control,
-    name: "blocked_issues",
-  });
+    name: "related_issues",
+  })?.filter((i) => i.relation_type === "blocked_by");
 
   const startDate = useWatch({
     control,
@@ -55,12 +69,28 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
   });
 
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug, projectId, issueId } = router.query;
+
+  const { user } = useUser();
 
   const [isViewAllOpen, setIsViewAllOpen] = useState(false);
 
   const { isEstimateActive } = useEstimateOption();
 
+  const handleMutation = (data: any) => {
+    mutate<IIssue>(
+      ISSUE_DETAILS(issueId as string),
+      (prevData) => {
+        if (!prevData) return prevData;
+        return {
+          ...prevData,
+          ...data,
+        };
+      },
+      false
+    );
+  };
+
   return (
     <div>
       <Label>Details</Label>
@@ -188,51 +218,80 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                   <span className="text-sm text-custom-text-400">Blocking</span>
                 </div>
                 <div>
-                  <Controller
-                    control={control}
-                    name="blocker_issues"
-                    render={({ field: { value } }) => (
-                      <BlockerSelect
-                        value={value}
-                        onChange={(val) =>
-                          submitChanges({
-                            blocker_issues: val,
-                            blockers_list: val?.map((i: any) => i.blocker_issue_detail?.id ?? ""),
-                          })
-                        }
-                      />
-                    )}
+                  <BlockerSelect
+                    value={null}
+                    onChange={(val) => {
+                      if (!user || !workspaceSlug || !projectId || !issueId) return;
+
+                      issuesService
+                        .createIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          user,
+                          {
+                            related_list: [
+                              ...val.map((issue: any) => ({
+                                issue: issue.blocker_issue_detail.id,
+                                relation_type: "blocked_by" as const,
+                                related_issue: issueId as string,
+                                related_issue_detail: issue.blocker_issue_detail,
+                              })),
+                            ],
+                          }
+                        )
+                        .then((response) => {
+                          handleMutation({
+                            issue_relations: [
+                              ...blockerIssue,
+                              ...(response ?? []).map((i: any) => ({
+                                id: i.id,
+                                relation_type: i.relation_type,
+                                issue_detail: i.related_issue_detail,
+                                issue: i.related_issue,
+                              })),
+                            ],
+                          });
+                        });
+                    }}
                   />
                 </div>
               </div>
               {blockerIssue &&
                 blockerIssue.map((issue) => (
                   <div
-                    key={issue.blocker_issue_detail?.id}
+                    key={issue.issue_detail?.id}
                     className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
                   >
                     <a
-                      href={`/${workspaceSlug}/projects/${issue.blocker_issue_detail?.project_detail.id}/issues/${issue.blocker_issue_detail?.id}`}
+                      href={`/${workspaceSlug}/projects/${issue.issue_detail?.project_detail.id}/issues/${issue.issue_detail?.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
                       <BlockerIcon height={10} width={10} />
-                      {`${issue.blocker_issue_detail?.project_detail.identifier}-${issue.blocker_issue_detail?.sequence_id}`}
+                      {`${issue.issue_detail?.project_detail.identifier}-${issue.issue_detail?.sequence_id}`}
                     </a>
                     <button
                       type="button"
                       className="duration-300"
                       onClick={() => {
                         const updatedBlockers = blockerIssue.filter(
-                          (i) => i.blocker_issue_detail?.id !== issue.blocker_issue_detail?.id
+                          (i) => i.issue_detail?.id !== issue.issue_detail?.id
+                        );
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          issue.id,
+                          user
                         );
 
-                        submitChanges({
-                          blocker_issues: updatedBlockers,
-                          blockers_list: updatedBlockers.map(
-                            (i) => i.blocker_issue_detail?.id ?? ""
-                          ),
+                        handleMutation({
+                          issue_relations: updatedBlockers,
                         });
                       }}
                     >
@@ -250,49 +309,80 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                   <span className="text-sm text-custom-text-400">Blocked by</span>
                 </div>
                 <div>
-                  <Controller
-                    control={control}
-                    name="blocked_issues"
-                    render={({ field: { value } }) => (
-                      <BlockerSelect
-                        value={value}
-                        onChange={(val) =>
-                          submitChanges({
-                            blocked_issues: val,
-                            blocks_list: val?.map((i: any) => i.blocker_issue_detail?.id ?? ""),
-                          })
-                        }
-                      />
-                    )}
+                  <BlockedSelect
+                    value={null}
+                    onChange={(val) => {
+                      if (!user || !workspaceSlug || !projectId || !issueId) return;
+
+                      issuesService
+                        .createIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          user,
+                          {
+                            related_list: [
+                              ...val.map((issue: any) => ({
+                                issue: issue.blocked_issue_detail.id,
+                                relation_type: "blocked_by" as const,
+                                related_issue: issueId as string,
+                                related_issue_detail: issue.blocked_issue_detail,
+                              })),
+                            ],
+                          }
+                        )
+                        .then((response) => {
+                          handleMutation({
+                            related_issues: [
+                              ...blockedIssue,
+                              ...(response ?? []).map((i: any) => ({
+                                id: i.id,
+                                relation_type: i.relation_type,
+                                issue_detail: i.related_issue_detail,
+                                issue: i.related_issue,
+                              })),
+                            ],
+                          });
+                        });
+                    }}
                   />
                 </div>
               </div>
               {blockedIssue &&
                 blockedIssue.map((issue) => (
                   <div
-                    key={issue.blocked_issue_detail?.id}
+                    key={issue.related_issue_detail?.id}
                     className="group inline-flex mr-1 cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-red-500 duration-300 hover:border-red-500/20 hover:bg-red-500/20"
                   >
                     <a
-                      href={`/${workspaceSlug}/projects/${issue.blocked_issue_detail?.project_detail.id}/issues/${issue.blocked_issue_detail?.id}`}
+                      href={`/${workspaceSlug}/projects/${issue.related_issue_detail?.project_detail.id}/issues/${issue.related_issue_detail?.id}`}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
                       <BlockedIcon height={10} width={10} />
-                      {`${issue?.blocked_issue_detail?.project_detail?.identifier}-${issue?.blocked_issue_detail?.sequence_id}`}
+                      {`${issue?.related_issue_detail?.project_detail?.identifier}-${issue?.related_issue_detail?.sequence_id}`}
                     </a>
                     <button
                       type="button"
                       className="duration-300"
                       onClick={() => {
                         const updatedBlocked = blockedIssue.filter(
-                          (i) => i.blocked_issue_detail?.id !== issue.blocked_issue_detail?.id
+                          (i) => i.related_issue_detail?.id !== issue.related_issue_detail?.id
+                        );
+
+                        if (!user) return;
+
+                        issuesService.deleteIssueRelation(
+                          workspaceSlug as string,
+                          projectId as string,
+                          issueId as string,
+                          issue.id,
+                          user
                         );
 
-                        submitChanges({
-                          blocked_issues: updatedBlocked,
-                          blocks_list: updatedBlocked.map((i) => i.blocked_issue_detail?.id ?? ""),
+                        handleMutation({
+                          related_issues: updatedBlocked,
                         });
                       }}
                     >
diff --git a/web/components/web-view/select-blocked.tsx b/web/components/web-view/select-blocked.tsx
index 0056cad5c0c..9569c5240bc 100644
--- a/web/components/web-view/select-blocked.tsx
+++ b/web/components/web-view/select-blocked.tsx
@@ -66,7 +66,7 @@ export const BlockedSelect: React.FC<Props> = (props) => {
       <ExistingIssuesListModal
         isOpen={isBlockedModalOpen}
         handleClose={() => setIsBlockedModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId!.toString() }}
+        searchParams={{ issue_relation: true, issue_id: issueId!.toString() }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />
diff --git a/web/components/web-view/select-blocker.tsx b/web/components/web-view/select-blocker.tsx
index a46cdfcaa43..39b20ac8ecc 100644
--- a/web/components/web-view/select-blocker.tsx
+++ b/web/components/web-view/select-blocker.tsx
@@ -66,7 +66,7 @@ export const BlockerSelect: React.FC<Props> = (props) => {
       <ExistingIssuesListModal
         isOpen={isBlockerModalOpen}
         handleClose={() => setIsBlockerModalOpen(false)}
-        searchParams={{ blocker_blocked_by: true, issue_id: issueId!.toString() }}
+        searchParams={{ issue_relation: true, issue_id: issueId!.toString() }}
         handleOnSubmit={onSubmit}
         workspaceLevelToggle
       />

From 2fe97a8d28f4dd5a5ef279d07392886fba14cad1 Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 13 Sep 2023 18:51:17 +0530
Subject: [PATCH 5/6] fix: build error

---
 web/components/issues/confirm-form-close.tsx | 140 -------------------
 1 file changed, 140 deletions(-)
 delete mode 100644 web/components/issues/confirm-form-close.tsx

diff --git a/web/components/issues/confirm-form-close.tsx b/web/components/issues/confirm-form-close.tsx
deleted file mode 100644
index 4444d5b1d36..00000000000
--- a/web/components/issues/confirm-form-close.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import viewsService from "services/views.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { DangerButton, SecondaryButton } from "components/ui";
-// icons
-import { AlertTriangle } from "lucide-react";
-// types
-import type { ICurrentUserResponse, IView } from "types";
-// fetch-keys
-import { VIEWS_LIST } from "constants/fetch-keys";
-
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  onDiscard: () => void;
-  onSaveDraft: () => void;
-};
-
-export const DeleteViewModal: React.FC<Props> = (props) => {
-  const { isOpen, handleClose, onDiscard, onSaveDraft } = props;
-
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const onClose = () => {
-    handleClose();
-    setIsDeleteLoading(false);
-  };
-
-  const handleDeletion = async () => {
-    setIsDeleteLoading(true);
-    if (!workspaceSlug || !data || !projectId) return;
-
-    await viewsService
-      .deleteView(workspaceSlug as string, projectId as string, data.id, user)
-      .then(() => {
-        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
-          views?.filter((view) => view.id !== data.id)
-        );
-
-        handleClose();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "View deleted successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "View could not be deleted. Please try again.",
-        });
-      })
-      .finally(() => {
-        setIsDeleteLoading(false);
-      });
-  };
-
-  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-custom-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 border border-custom-border-200 bg-custom-background-100 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-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <AlertTriangle 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-custom-text-100"
-                      >
-                        Delete View
-                      </Dialog.Title>
-                      <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the view will be permanently removed. This
-                          action cannot be undone.
-                        </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>
-  );
-};

From 052b98a32d8e3d509bb7d302c4fb07ac84e5f08d Mon Sep 17 00:00:00 2001
From: dakshesh14 <dakshesh.jain14@gmail.com>
Date: Wed, 13 Sep 2023 18:58:23 +0530
Subject: [PATCH 6/6] fix: build error on web-view component

---
 web/pages/[workspaceSlug]/editor.tsx                          | 4 ++--
 .../[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/pages/[workspaceSlug]/editor.tsx b/web/pages/[workspaceSlug]/editor.tsx
index 73f0932eaad..711e4a16678 100644
--- a/web/pages/[workspaceSlug]/editor.tsx
+++ b/web/pages/[workspaceSlug]/editor.tsx
@@ -95,8 +95,8 @@ const Editor: NextPage = () => {
       ...formData,
     };
 
-    delete payload.blocker_issues;
-    delete payload.blocked_issues;
+    delete payload.issue_relations;
+    delete payload.related_issues;
     await issuesService
       .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
       .catch((e) => {
diff --git a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index ede258c73b1..6ac0eda76c8 100644
--- a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -110,8 +110,8 @@ const MobileWebViewIssueDetail = () => {
         ...formData,
       };
 
-      delete payload.blocker_issues;
-      delete payload.blocked_issues;
+      delete payload.issue_relations;
+      delete payload.related_issues;
 
       await issuesService
         .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)