disable peek overview for temporary issues until it is confirmed (#3749)

Author: rahulramesha

packages/ui/src/control-link/control-link.tsx

@@ -5,10 +5,11 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   onClick: () => void;
   children: React.ReactNode;
   target?: string;
+  disabled?: boolean;
 };
 
 export const ControlLink: React.FC<TControlLink> = (props) => {
-  const { href, onClick, children, target = "_self", ...rest } = props;
+  const { href, onClick, children, target = "_self", disabled = false, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
   const _onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -19,6 +20,8 @@ export const ControlLink: React.FC<TControlLink> = (props) => {
     }
   };
 
+  if (disabled) return <>{children}</>;
+
   return (
     <a href={href} target={target} onClick={_onClick} {...rest}>
       {children}

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

@@ -79,6 +79,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
                   target="_blank"
                   onClick={() => handleIssuePeekOverview(issue)}
                   className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+                  disabled={!!issue?.tempId}
                 >
                   <>
                     {issue?.tempId !== undefined && (

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

@@ -29,6 +29,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
   const handleIssuePeekOverview = () =>
     workspaceSlug &&
     issueDetails &&
+    !issueDetails.tempId &&
     setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
 
   return (
@@ -89,8 +90,9 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
       target="_blank"
       onClick={handleIssuePeekOverview}
       className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+      disabled={!!issueDetails?.tempId}
     >
-      <div className="relative flex h-full w-full cursor-pointer items-center gap-2" onClick={handleIssuePeekOverview}>
+      <div className="relative flex h-full w-full cursor-pointer items-center gap-2">
         {stateDetails && <StateGroupIcon stateGroup={stateDetails?.group} color={stateDetails?.color} />}
         <div className="flex-shrink-0 text-xs text-custom-text-300">
           {projectDetails?.identifier} {issueDetails?.sequence_id}

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

@@ -82,6 +82,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           target="_blank"
           onClick={() => handleIssuePeekOverview(issue)}
           className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+          disabled={!!issue?.tempId}
         >
           <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
             <span>{issue.name}</span>

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

@@ -76,6 +76,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
           target="_blank"
           onClick={() => handleIssuePeekOverview(issue)}
           className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+          disabled={!!issue?.tempId}
         >
           <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
             <span>{issue.name}</span>

web/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -239,6 +239,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
           target="_blank"
           onClick={() => handleIssuePeekOverview(issueDetail)}
           className="clickable w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
+          disabled={!!issueDetail?.tempId}
         >
           <div className="w-full overflow-hidden">
             <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>