[WEB-465] improvement: redirect to issue detail on click on the sub-issue count property. (#3731)

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
 // hooks
-import { useEventTracker, useEstimate, useLabel } from "hooks/store";
+import { useEventTracker, useEstimate, useLabel, useApplication } from "hooks/store";
 // components
 import { IssuePropertyLabels } from "../properties/labels";
 import { Tooltip } from "@plane/ui";
@@ -35,6 +35,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   // store hooks
   const { labelMap } = useLabel();
   const { captureIssueEvent } = useEventTracker();
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
   // router
   const router = useRouter();
   const { areEstimatesEnabledForCurrentProject } = useEstimate();
@@ -137,6 +140,15 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
     });
   };
 
+  const redirectToIssueDetail = () => {
+    router.push({
+      pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
+        issue.id
+      }`,
+      hash: "sub-issues",
+    });
+  };
+
   if (!displayProperties) return null;
 
   const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
@@ -261,7 +273,10 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         shouldRenderProperty={!!issue?.sub_issues_count}
       >
         <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
-          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1">
+          <div
+            onClick={redirectToIssueDetail}
+            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 px-2.5 py-1 cursor-pointer"
+          >
             <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.sub_issues_count}</div>
           </div>

web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
 // hooks
+import { useApplication } from "hooks/store";
+// types
 import { TIssue } from "@plane/types";
 
 type Props = {
@@ -9,9 +12,27 @@ type Props = {
 
 export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props) => {
   const { issue } = props;
+  // router
+  const router = useRouter();
+  // hooks
+  const {
+    router: { workspaceSlug },
+  } = useApplication();
+
+  const redirectToIssueDetail = () => {
+    router.push({
+      pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archived-issues" : "issues"}/${
+        issue.id
+      }`,
+      hash: "sub-issues",
+    });
+  };
 
   return (
-    <div className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80">
+    <div
+      onClick={redirectToIssueDetail}
+      className="flex h-11 w-full items-center px-2.5 py-1 text-xs border-b-[0.5px] border-custom-border-200 hover:bg-custom-background-80 cursor-pointer"
+    >
       {issue?.sub_issues_count} {issue?.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
     </div>
   );

web/components/issues/sub-issues/root.tsx

@@ -89,6 +89,25 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
     },
   });
 
+  const scrollToSubIssuesView = useCallback(() => {
+    if (router.asPath.split("#")[1] === "sub-issues") {
+      setTimeout(() => {
+        const subIssueDiv = document.getElementById(`sub-issues`);
+        if (subIssueDiv)
+          subIssueDiv.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+          });
+      }, 200);
+    }
+  }, [router.asPath]);
+
+  useEffect(() => {
+    if (router.asPath) {
+      scrollToSubIssuesView();
+    }
+  }, [router.asPath, scrollToSubIssuesView]);
+
   const handleIssueCrudState = (
     key: "create" | "existing" | "update" | "delete",
     _parentIssueId: string | null,
@@ -287,7 +306,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
 
   if (!issue) return <></>;
   return (
-    <div className="h-full w-full space-y-2">
+    <div id="sub-issues" className="h-full w-full space-y-2">
       {!subIssues ? (
         <div className="py-3 text-center text-sm  font-medium text-custom-text-300">Loading...</div>
       ) : (