From 0e4ce2baa56cafc6578003e75f1585484b264609 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 8 Jul 2024 15:51:59 +0530
Subject: [PATCH] chore: issue widgets added to issue peek overview (#5069)

---
 .../issues/peek-overview/properties.tsx       | 85 +------------------
 .../components/issues/peek-overview/view.tsx  | 42 +++------
 2 files changed, 12 insertions(+), 115 deletions(-)

diff --git a/web/core/components/issues/peek-overview/properties.tsx b/web/core/components/issues/peek-overview/properties.tsx
index d135a889d..2f43ea822 100644
--- a/web/core/components/issues/peek-overview/properties.tsx
+++ b/web/core/components/issues/peek-overview/properties.tsx
@@ -2,22 +2,10 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import {
-  Signal,
-  Tag,
-  Triangle,
-  LayoutPanelTop,
-  CircleDot,
-  CopyPlus,
-  XCircle,
-  CalendarClock,
-  CalendarCheck2,
-  Users,
-  UserCircle2,
-} from "lucide-react";
+import { Signal, Tag, Triangle, LayoutPanelTop, CalendarClock, CalendarCheck2, Users, UserCircle2 } from "lucide-react";
 // hooks
 // ui icons
-import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon, Tooltip } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, ContrastIcon, Tooltip } from "@plane/ui";
 // components
 import {
   DateDropdown,
@@ -28,13 +16,11 @@ import {
 } from "@/components/dropdowns";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import {
-  IssueLinkRoot,
   IssueCycleSelect,
   IssueModuleSelect,
   IssueParentSelect,
   IssueLabel,
   TIssueOperations,
-  IssueRelationSelect,
 } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -287,70 +273,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           />
         </div>
 
-        {/* relates to */}
-        <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <RelatedIcon className="h-4 w-4 flex-shrink-0" />
-            <span>Relates to</span>
-          </div>
-          <IssueRelationSelect
-            className="w-3/4 flex-grow min-h-8 h-full"
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            relationKey="relates_to"
-            disabled={disabled}
-          />
-        </div>
-
-        {/* blocking */}
-        <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <XCircle className="h-4 w-4 flex-shrink-0" />
-            <span>Blocking</span>
-          </div>
-          <IssueRelationSelect
-            className="w-3/4 flex-grow min-h-8 h-full"
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            relationKey="blocking"
-            disabled={disabled}
-          />
-        </div>
-
-        {/* blocked by */}
-        <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <CircleDot className="h-4 w-4 flex-shrink-0" />
-            <span>Blocked by</span>
-          </div>
-          <IssueRelationSelect
-            className="w-3/4 flex-grow min-h-8 h-full"
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            relationKey="blocked_by"
-            disabled={disabled}
-          />
-        </div>
-
-        {/* duplicate of */}
-        <div className="flex gap-3 min-h-8">
-          <div className="flex pt-2 gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <CopyPlus className="h-4 w-4 flex-shrink-0" />
-            <span>Duplicate of</span>
-          </div>
-          <IssueRelationSelect
-            className="w-3/4 flex-grow min-h-8 h-full"
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
-            issueId={issueId}
-            relationKey="duplicate"
-            disabled={disabled}
-          />
-        </div>
-
         {/* label */}
         <div className="flex w-full items-center gap-3 min-h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
@@ -362,9 +284,6 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           </div>
         </div>
       </div>
-      <div className="w-full pt-3">
-        <IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
-      </div>
     </div>
   );
 });
diff --git a/web/core/components/issues/peek-overview/view.tsx b/web/core/components/issues/peek-overview/view.tsx
index dbefba4a9..c92c431b1 100644
--- a/web/core/components/issues/peek-overview/view.tsx
+++ b/web/core/components/issues/peek-overview/view.tsx
@@ -8,19 +8,18 @@ import {
   PeekOverviewProperties,
   TIssueOperations,
   ArchiveIssueModal,
-  PeekOverviewIssueAttachments,
   IssuePeekOverviewLoader,
   IssuePeekOverviewError,
+  IssueDetailWidgets,
 } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useIssueDetail, useUser } from "@/hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 import useKeypress from "@/hooks/use-keypress";
 import usePeekOverviewOutsideClickDetector from "@/hooks/use-peek-overview-outside-click";
 // store hooks
 import { IssueActivity } from "../issue-detail/issue-activity";
-import { SubIssuesRoot } from "../sub-issues";
 
 interface IIssueView {
   workspaceSlug: string;
@@ -52,7 +51,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
   // store hooks
-  const { data: currentUser } = useUser();
   const {
     setPeekIssue,
     isAnyModalOpen,
@@ -181,21 +179,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                         setIsSubmitting={(value) => setIsSubmitting(value)}
                       />
 
-                      {currentUser && (
-                        <SubIssuesRoot
-                          workspaceSlug={workspaceSlug}
-                          projectId={projectId}
-                          parentIssueId={issueId}
-                          currentUser={currentUser}
-                          disabled={disabled || is_archived}
-                        />
-                      )}
-
-                      <PeekOverviewIssueAttachments
-                        disabled={disabled || is_archived}
-                        issueId={issueId}
-                        projectId={projectId}
+                      <IssueDetailWidgets
                         workspaceSlug={workspaceSlug}
+                        projectId={projectId}
+                        issueId={issueId}
+                        disabled={disabled}
                       />
 
                       <PeekOverviewProperties
@@ -228,21 +216,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                             setIsSubmitting={(value) => setIsSubmitting(value)}
                           />
 
-                          {currentUser && (
-                            <SubIssuesRoot
-                              workspaceSlug={workspaceSlug}
-                              projectId={projectId}
-                              parentIssueId={issueId}
-                              currentUser={currentUser}
-                              disabled={disabled || is_archived}
-                            />
-                          )}
-
-                          <PeekOverviewIssueAttachments
-                            disabled={disabled || is_archived}
-                            issueId={issueId}
-                            projectId={projectId}
+                          <IssueDetailWidgets
                             workspaceSlug={workspaceSlug}
+                            projectId={projectId}
+                            issueId={issueId}
+                            disabled={disabled}
                           />
 
                           <IssueActivity