chore: issue click & peek overview improvement (#3157)

* improve issue popover to detect outside click

* chore: stopPropagation event added to prevent peekoverview triggering in action menu & issue properties

* chore: stopPropagation event added to prevent peekoverview triggering in issue properties

* chore: enable entire issue card clickability in list and kanban layout, introduce control-click functionality
to open issues in new tabs

* chore: build error fix and unused variable removed

* chore: build error fix

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -36,13 +36,17 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
 
   const menuActionRef = useRef<HTMLDivElement | null>(null);
 
-  const handleIssuePeekOverview = (issue: IIssue) => {
+  const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
@@ -75,7 +79,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                 {...provided.draggableProps}
                 {...provided.dragHandleProps}
                 ref={provided.innerRef}
-                onClick={() => handleIssuePeekOverview(issue)}
+                onClick={(e) => handleIssuePeekOverview(issue, e)}
               >
                 {issue?.tempId !== undefined && (
                   <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />

web/components/issues/issue-layouts/gantt/blocks.tsx

@@ -9,13 +9,17 @@ import { IIssue } from "types";
 export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
   const router = useRouter();
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${data?.workspace_detail.slug}/projects/${data?.project_detail.id}/issues/${data?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: data?.id, peekProjectId: data?.project },
       });
+    }
   };
 
   return (

web/components/issues/issue-layouts/kanban/block.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { Draggable } from "@hello-pangea/dnd";
+import { Draggable, DraggableStateSnapshot } from "@hello-pangea/dnd";
 import isEqual from "lodash/isEqual";
 // components
 import { KanBanProperties } from "./properties";
@@ -32,11 +32,23 @@ interface IssueDetailsBlockProps {
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties | null;
   isReadOnly: boolean;
+  snapshot: DraggableStateSnapshot;
+  isDragDisabled: boolean;
 }
 
 const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
-  const { sub_group_id, columnId, issue, showEmptyGroup, handleIssues, quickActions, displayProperties, isReadOnly } =
+  const {
-    props;
+    sub_group_id,
+    columnId,
+    issue,
+    showEmptyGroup,
+    handleIssues,
+    quickActions,
+    displayProperties,
+    isReadOnly,
+    snapshot,
+    isDragDisabled,
+  } = props;
 
   const router = useRouter();
 
@@ -44,20 +56,29 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
     if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, EIssueActions.UPDATE);
   };
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   return (
-    <>
+    <div
+      className={`flex flex-col space-y-2 cursor-pointer rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all w-full ${
+        isDragDisabled ? "" : "hover:cursor-grab"
+      } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
+      onClick={handleIssuePeekOverview}
+    >
       {displayProperties && displayProperties?.key && (
-        <div className="relative">
+        <div className="relative w-full ">
-          <div className="line-clamp-1 text-xs text-custom-text-300">
+          <div className="line-clamp-1 text-xs text-left text-custom-text-300">
             {issue.project_detail.identifier}-{issue.sequence_id}
           </div>
           <div className="absolute -top-1 right-0 hidden group-hover/kanban-block:block">
@@ -70,9 +91,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
         </div>
       )}
       <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-        <div className="line-clamp-2 text-sm font-medium text-custom-text-100" onClick={handleIssuePeekOverview}>
+        <div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
-          {issue.name}
-        </div>
       </Tooltip>
       <div>
         <KanBanProperties
@@ -85,7 +104,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = (props) => {
           isReadOnly={isReadOnly}
         />
       </div>
-    </>
+    </div>
   );
 };
 
@@ -132,11 +151,6 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
             {issue.tempId !== undefined && (
               <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
             )}
-            <div
-              className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
-                isDragDisabled ? "" : "hover:cursor-grab"
-              } ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
-            >
             <KanbanIssueMemoBlock
               sub_group_id={sub_group_id}
               columnId={columnId}
@@ -146,9 +160,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
               quickActions={quickActions}
               displayProperties={displayProperties}
               isReadOnly={!canEditIssueProperties}
+              snapshot={snapshot}
+              isDragDisabled={isDragDisabled}
             />
           </div>
-          </div>
         )}
       </Draggable>
     </>

web/components/issues/issue-layouts/list/block.tsx

@@ -25,20 +25,27 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
     handleIssues(issueToUpdate, EIssueActions.UPDATE);
   };
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   const canEditIssueProperties = canEditProperties(issue.project);
 
   return (
     <>
-      <div className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm">
+      <button
+        className="relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm w-full"
+        onClick={handleIssuePeekOverview}
+      >
         {displayProperties && displayProperties?.key && (
           <div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
             {issue?.project_detail?.identifier}-{issue.sequence_id}
@@ -49,10 +56,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
           <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
         )}
         <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-          <div
+          <div className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100 text-left">
-            className="line-clamp-1 w-full cursor-pointer text-sm font-medium text-custom-text-100"
-            onClick={handleIssuePeekOverview}
-          >
             {issue.name}
           </div>
         </Tooltip>
@@ -75,7 +79,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
             </div>
           )}
         </div>
-      </div>
+      </button>
     </>
   );
 };

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

@@ -142,7 +142,10 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
           className={`flex w-full items-center justify-between gap-1 text-xs ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
           } ${buttonClassName}`}
-          onClick={() => (!projectId || !_members[projectId]) && getProjectMembers()}
+          onClick={(e) => {
+            e.stopPropagation();
+            (!projectId || !_members[projectId]) && getProjectMembers();
+          }}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -178,6 +181,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                       active && !selected ? "bg-custom-background-80" : ""
                     } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                   }
+                  onClick={(e) => e.stopPropagation()}
                 >
                   {({ selected }) => (
                     <>

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

@@ -56,12 +56,14 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
         return (
           <>
             <Popover.Button
+              as="button"
               ref={dropdownBtn}
               className={`flex h-5 w-full items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 outline-none duration-300 ${
                 disabled
                   ? "pointer-events-none cursor-not-allowed text-custom-text-200"
                   : "cursor-pointer hover:bg-custom-background-80"
               }`}
+              onClick={(e) => e.stopPropagation()}
             >
               <div className="flex items-center justify-center gap-2 overflow-hidden">
                 <dateOptionDetails.icon className="h-3 w-3" strokeWidth={2} />
@@ -92,7 +94,8 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
                 {({ close }) => (
                   <DatePicker
                     selected={value ? new Date(value) : new Date()}
-                    onChange={(val: any) => {
+                    onChange={(val: any, e) => {
+                      e?.stopPropagation();
                       if (onChange && val) {
                         onChange(renderDateFormat(val));
                         close();

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

@@ -116,6 +116,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
           className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
+          onClick={(e) => e.stopPropagation()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -150,6 +151,7 @@ export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observe
                         active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
+                    onClick={(e) => e.stopPropagation()}
                   >
                     {({ selected }) => (
                       <>

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

@@ -177,7 +177,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
-          onClick={() => !storeLabels && fetchLabels()}
+          onClick={(e) => {
+            e.stopPropagation();
+            !storeLabels && fetchLabels();
+          }}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -214,6 +217,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                       selected ? "text-custom-text-100" : "text-custom-text-200"
                     }`
                   }
+                  onClick={(e) => e.stopPropagation()}
                 >
                   {({ selected }) => (
                     <>

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

@@ -121,7 +121,10 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
               className={`flex h-5 w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
               } ${buttonClassName}`}
-              onClick={() => !storeStates && fetchProjectStates()}
+              onClick={(e) => {
+                e.stopPropagation();
+                !storeStates && fetchProjectStates();
+              }}
             >
               {label}
               {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
@@ -157,6 +160,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
                           active ? "bg-custom-background-80" : ""
                         } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                       }
+                      onClick={(e) => e.stopPropagation()}
                     >
                       {({ selected }) => (
                         <>

web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx

@@ -58,7 +58,12 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         }}
         currentStore={EProjectStore.PROJECT}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx

@@ -40,7 +40,12 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         handleClose={() => setDeleteIssueModal(false)}
         onSubmit={handleDelete}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -58,7 +58,12 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         }}
         currentStore={EProjectStore.CYCLE}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -58,7 +58,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
         }}
         currentStore={EProjectStore.MODULE}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -68,7 +68,12 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
         }}
         currentStore={EProjectStore.PROJECT}
       />
-      <CustomMenu placement="bottom-start" customButton={customActionButton} ellipsis>
+      <CustomMenu
+        placement="bottom-start"
+        customButton={customActionButton}
+        ellipsis
+        menuButtonOnClick={(e) => e.stopPropagation()}
+      >
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

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

@@ -34,13 +34,17 @@ export const IssueColumn: React.FC<Props> = ({
 
   const menuActionRef = useRef<HTMLDivElement | null>(null);
 
-  const handleIssuePeekOverview = (issue: IIssue) => {
+  const handleIssuePeekOverview = (issue: IIssue, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   const paddingLeft = `${nestingLevel * 54}px`;
@@ -99,7 +103,7 @@ export const IssueColumn: React.FC<Props> = ({
           <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
             <div
               className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
-              onClick={() => handleIssuePeekOverview(issue)}
+              onClick={(e) => handleIssuePeekOverview(issue, e)}
             >
               {issue.name}
             </div>

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

@@ -6,8 +6,6 @@ import { IssuePropertyState } from "../../properties";
 import useSubIssue from "hooks/use-sub-issue";
 // types
 import { IIssue, IState } from "types";
-import { mutate } from "swr";
-import { SUB_ISSUES } from "constants/fetch-keys";
 
 type Props = {
   issue: IIssue;

web/components/issues/peek-overview/view.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useState } from "react";
+import { FC, ReactNode, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -14,6 +14,8 @@ import {
   PeekOverviewIssueDetails,
   PeekOverviewProperties,
 } from "components/issues";
+// hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
 import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
 // types
@@ -107,6 +109,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  // ref
+  const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
 
   const updateRoutePeekId = () => {
     if (issueId != peekIssueId) {
@@ -151,6 +155,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
   const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
 
+  useOutsideClickDetector(issuePeekOverviewRef, () => removeRoutePeekId());
+
   return (
     <>
       {issue && !isArchived && (
@@ -178,6 +184,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
         {issueId === peekIssueId && (
           <div
+            ref={issuePeekOverviewRef}
             className={`fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300 
           ${peekMode === "side-peek" ? `bottom-0 right-0 top-0 w-full md:w-[50%]` : ``}
           ${peekMode === "modal" ? `left-[50%] top-[50%] h-5/6 w-5/6 -translate-x-[50%] -translate-y-[50%]` : ``}

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

@@ -49,13 +49,17 @@ export const SubIssues: React.FC<ISubIssues> = ({
   const router = useRouter();
   const { peekProjectId, peekIssueId } = router.query;
 
-  const handleIssuePeekOverview = () => {
+  const handleIssuePeekOverview = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     const { query } = router;
-
+    if (event.ctrlKey || event.metaKey) {
+      const issueUrl = `/${issue.workspace_detail.slug}/projects/${issue.project_detail.id}/issues/${issue?.id}`;
+      window.open(issueUrl, "_blank"); // Open link in a new tab
+    } else {
       router.push({
         pathname: router.pathname,
         query: { ...query, peekIssueId: issue?.id, peekProjectId: issue?.project },
       });
+    }
   };
 
   return (

web/components/project/priority-select.tsx

@@ -93,6 +93,7 @@ export const PrioritySelect: React.FC<Props> = ({
           className={`flex h-full w-full items-center justify-between gap-1 ${
             disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
           } ${buttonClassName}`}
+          onClick={(e) => e.stopPropagation()}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
@@ -127,6 +128,7 @@ export const PrioritySelect: React.FC<Props> = ({
                         active ? "bg-custom-background-80" : ""
                       } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
                     }
+                    onClick={(e) => e.stopPropagation()}
                   >
                     {({ selected }) => (
                       <>