From 686d0984e6848e980dc9858611e94c75ecbaffcc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 10 May 2024 17:39:59 +0530
Subject: [PATCH] fix: calendar and spreadsheet layout quick action toggle
 event propogation

---
 .../issue-layouts/calendar/issue-block.tsx    | 103 +++++++++--------
 .../issue-layouts/spreadsheet/issue-row.tsx   | 106 +++++++++---------
 2 files changed, 106 insertions(+), 103 deletions(-)

diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx
index b9cf59d0a..c23204273 100644
--- a/web/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -65,64 +65,61 @@ export const CalendarIssueBlock = observer(
     const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
 
     return (
-      <ControlLink
-        id={`issue-${issue.id}`}
-        href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
-        target="_blank"
-        onClick={() => handleIssuePeekOverview(issue)}
-        className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
-        disabled={!!issue?.tempId}
-        ref={ref}
-      >
-        <>
-          {issue?.tempId !== undefined && (
-            <div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
-          )}
-
-          <div
-            ref={blockRef}
-            className={cn(
-              "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded  md:px-1 px-4 py-1.5 ",
-              {
-                "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
-                "bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
-                "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
-              }
+      <div className="relative group/card">
+        <ControlLink
+          id={`issue-${issue.id}`}
+          href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
+          target="_blank"
+          onClick={() => handleIssuePeekOverview(issue)}
+          className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
+          disabled={!!issue?.tempId}
+          ref={ref}
+        >
+          <>
+            {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="flex h-full items-center gap-1.5 truncate">
-              <span
-                className="h-full w-0.5 flex-shrink-0 rounded"
-                style={{
-                  backgroundColor: stateColor,
-                }}
-              />
-              <div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
-                {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
-              </div>
-              <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
-                <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
-              </Tooltip>
-            </div>
+
             <div
-              className={`flex-shrink-0 md:hidden h-5 w-5 group-hover/calendar-block:block ${
-                isMenuActive ? "!block" : ""
-              }`}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
+              ref={blockRef}
+              className={cn(
+                "group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded  md:px-1 px-4 py-1.5 ",
+                {
+                  "bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
+                  "bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
+                  "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
+                }
+              )}
             >
-              {quickActions({
-                issue,
-                parentRef: blockRef,
-                customActionButton,
-                placement,
-              })}
+              <div className="flex h-full items-center gap-1.5 truncate">
+                <span
+                  className="h-full w-0.5 flex-shrink-0 rounded"
+                  style={{
+                    backgroundColor: stateColor,
+                  }}
+                />
+                <div className="flex-shrink-0 text-sm md:text-xs text-custom-text-300">
+                  {getProjectIdentifierById(issue?.project_id)}-{issue.sequence_id}
+                </div>
+                <Tooltip tooltipContent={issue.name} isMobile={isMobile}>
+                  <div className="truncate text-sm font-medium md:font-normal md:text-xs">{issue.name}</div>
+                </Tooltip>
+              </div>
+              <span className={`w-24 hidden group-hover:block ${isMenuActive ? "!block" : ""}`} />
             </div>
+          </>
+        </ControlLink>
+        <div className="absolute right-1 bottom-0 flex items-center gap-1.5">
+          <div className={` hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
+            {quickActions({
+              issue,
+              parentRef: blockRef,
+              customActionButton,
+              placement,
+            })}
           </div>
-        </>
-      </ControlLink>
+        </div>
+      </div>
     );
   })
 );
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index c58b82597..1956ee883 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -206,61 +206,67 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   return (
     <>
       <td id={`issue-${issueId}`} ref={cellRef} tabIndex={0} className="sticky left-0 z-10">
-        <ControlLink
-          href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
-          target="_blank"
-          onClick={() => handleIssuePeekOverview(issueDetail)}
-          className={cn(
-            "group clickable cursor-pointer h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200",
-            {
-              "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
-              "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id),
-              "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
-            }
-          )}
-          disabled={!!issueDetail?.tempId}
-        >
-          <div
-            className="flex min-w-min items-center gap-0.5 px-4 py-2.5 pl-1.5 pr-0"
-            style={nestingLevel !== 0 ? { paddingLeft } : {}}
+        <div className="group relative">
+          <ControlLink
+            href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
+            target="_blank"
+            onClick={() => handleIssuePeekOverview(issueDetail)}
+            className={cn(
+              "clickable cursor-pointer h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200",
+              {
+                "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
+                "border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id),
+                "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
+              }
+            )}
+            disabled={!!issueDetail?.tempId}
           >
-            <div className="flex items-center">
-              {/* bulk ops */}
-              <span className="size-3.5" />
-              <div className="flex size-4 items-center justify-center">
-                {subIssuesCount > 0 && (
-                  <button
-                    className="flex items-center justify-center size-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
-                    onClick={handleToggleExpand}
-                  >
-                    <ChevronRight className={`size-4 ${isExpanded ? "rotate-90" : ""}`} />
-                  </button>
-                )}
+            <div
+              className="flex min-w-min items-center gap-0.5 px-4 py-2.5 pl-1.5 pr-0"
+              style={nestingLevel !== 0 ? { paddingLeft } : {}}
+            >
+              <div className="flex items-center">
+                {/* bulk ops */}
+                <span className="size-3.5" />
+                <div className="flex size-4 items-center justify-center">
+                  {subIssuesCount > 0 && (
+                    <button
+                      className="flex items-center justify-center size-4 cursor-pointer rounded-sm text-custom-text-400 hover:text-custom-text-300"
+                      onClick={handleToggleExpand}
+                    >
+                      <ChevronRight className={`size-4 ${isExpanded ? "rotate-90" : ""}`} />
+                    </button>
+                  )}
+                </div>
               </div>
+
+              <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
+                <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
+                  <p className={`flex items-center justify-center font-medium leading-7`}>
+                    {getProjectIdentifierById(issueDetail.project_id)}-{issueDetail.sequence_id}
+                  </p>
+                </div>
+              </WithDisplayPropertiesHOC>
             </div>
 
-            <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
-              <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
-                <p className={`flex items-center justify-center font-medium leading-7`}>
-                  {getProjectIdentifierById(issueDetail.project_id)}-{issueDetail.sequence_id}
-                </p>
-              </div>
-            </WithDisplayPropertiesHOC>
-          </div>
-
-          <div className="flex items-center gap-2 justify-between h-full w-full pr-4 truncate">
-            <div className="w-full line-clamp-1 text-sm text-custom-text-100">
-              <div className="w-full overflow-hidden">
-                <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
-                  <div
-                    className="h-full w-full cursor-pointer truncate px-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
-                    tabIndex={-1}
-                  >
-                    {issueDetail.name}
-                  </div>
-                </Tooltip>
+            <div className="flex items-center gap-2 justify-between h-full w-full pr-4 truncate">
+              <div className="w-full line-clamp-1 text-sm text-custom-text-100">
+                <div className="w-full overflow-hidden">
+                  <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
+                    <div
+                      className="h-full w-full cursor-pointer truncate px-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
+                      tabIndex={-1}
+                    >
+                      {issueDetail.name}
+                    </div>
+                  </Tooltip>
+                </div>
               </div>
+              <span className={`size-1 hidden group-hover:block ${isMenuActive ? "!block" : ""}`} />
             </div>
+          </ControlLink>
+
+          <div className="absolute right-3 bottom-2.5 flex items-center gap-1.5">
             <div className={`hidden group-hover:block ${isMenuActive ? "!block" : ""}`}>
               {quickActions({
                 issue: issueDetail,
@@ -270,7 +276,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
               })}
             </div>
           </div>
-        </ControlLink>
+        </div>
       </td>
       {/* Rest of the columns */}
       {spreadsheetColumnsList.map((property) => (