From dd2a05cfc718b598fdd44969d4cd756ff61988ff Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 18 Oct 2024 20:41:09 +0530
Subject: [PATCH] [WEB-2674] chore: open parent issues in peek-overview from
 the parent badge.

---
 .../issues/issue-detail/parent/root.tsx           | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/core/components/issues/issue-detail/parent/root.tsx b/web/core/components/issues/issue-detail/parent/root.tsx
index 1e8fbb01cd9..b299c970645 100644
--- a/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/web/core/components/issues/issue-detail/parent/root.tsx
@@ -2,14 +2,15 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
 import { MinusCircle } from "lucide-react";
 import { TIssue } from "@plane/types";
 // component
 // ui
-import { CustomMenu } from "@plane/ui";
+import { ControlLink, CustomMenu } from "@plane/ui";
 // hooks
 import { useIssues, useProjectState } from "@/hooks/store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
 // types
@@ -29,6 +30,8 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
   // hooks
   const { issueMap } = useIssues();
   const { getProjectStates } = useProjectState();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { isMobile } = usePlatformOS();
 
   const parentIssue = issueMap?.[issue.parent_id || ""] || undefined;
 
@@ -42,7 +45,11 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
   return (
     <>
       <div className="mb-5 flex w-min items-center gap-3 whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 px-2.5 py-1 text-xs">
-        <Link href={`/${workspaceSlug}/projects/${parentIssue?.project_id}/issues/${parentIssue.id}`} target="_blank">
+        <ControlLink
+          href={`/${workspaceSlug}/projects/${parentIssue?.project_id}/issues/${parentIssue.id}`}
+          target="_blank"
+          onClick={() => handleRedirection(workspaceSlug, parentIssue, isMobile)}
+        >
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-2.5">
               <span className="block h-2 w-2 rounded-full" style={{ backgroundColor: stateColor }} />
@@ -56,7 +63,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
             </div>
             <span className="truncate text-custom-text-100">{(parentIssue?.name ?? "").substring(0, 50)}</span>
           </div>
-        </Link>
+        </ControlLink>
 
         <CustomMenu ellipsis optionsClassName="p-1.5">
           <div className="border-b border-custom-border-300 text-xs font-medium text-custom-text-200">