From e60ef36bfe62ead679c2e8ba9ce233516af68d86 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 24 Apr 2024 20:20:41 +0530
Subject: [PATCH] fix: module and cycle event propagation (#4280)

---
 .../cycles/board/cycles-board-card.tsx        |  28 +--
 .../cycles/list/cycles-list-item.tsx          | 107 +++++-----
 web/components/modules/module-card-item.tsx   | 183 +++++++++---------
 web/components/modules/module-list-item.tsx   | 142 +++++++-------
 4 files changed, 235 insertions(+), 225 deletions(-)

diff --git a/web/components/cycles/board/cycles-board-card.tsx b/web/components/cycles/board/cycles-board-card.tsx
index 3b596360a..a7ea62946 100644
--- a/web/components/cycles/board/cycles-board-card.tsx
+++ b/web/components/cycles/board/cycles-board-card.tsx
@@ -149,7 +149,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
-    <div>
+    <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}>
         <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
           <div className="flex items-center justify-between gap-2">
@@ -231,23 +231,23 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
               ) : (
                 <span className="text-xs text-custom-text-400">No due date</span>
               )}
-              <div className="z-[5] flex items-center gap-1.5">
-                {isEditingAllowed && (
-                  <FavoriteStar
-                    onClick={(e) => {
-                      if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                      else handleAddToFavorites(e);
-                    }}
-                    selected={!!cycleDetails.is_favorite}
-                  />
-                )}
-
-                <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
-              </div>
             </div>
           </div>
         </div>
       </Link>
+      <div className="absolute right-4 bottom-3.5 z-[5] flex items-center gap-1.5">
+        {isEditingAllowed && (
+          <FavoriteStar
+            onClick={(e) => {
+              if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+              else handleAddToFavorites(e);
+            }}
+            selected={!!cycleDetails.is_favorite}
+          />
+        )}
+
+        <CycleQuickActions cycleId={cycleId} projectId={projectId} workspaceSlug={workspaceSlug} />
+      </div>
     </div>
   );
 });
diff --git a/web/components/cycles/list/cycles-list-item.tsx b/web/components/cycles/list/cycles-list-item.tsx
index d6bc484b1..a7194ecbd 100644
--- a/web/components/cycles/list/cycles-list-item.tsx
+++ b/web/components/cycles/list/cycles-list-item.tsx
@@ -154,7 +154,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   return (
-    <>
+    <div className="relative">
       <Link
         href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
         onClick={(e) => {
@@ -199,58 +199,61 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
               {renderDate && `${renderFormattedDate(startDate) ?? `_ _`} - ${renderFormattedDate(endDate) ?? `_ _`}`}
             </div>
           </div>
-          <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 md:w-auto md:flex-shrink-0 md:justify-end">
-            {currentCycle && (
-              <div
-                className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
-                style={{
-                  color: currentCycle.color,
-                  backgroundColor: `${currentCycle.color}20`,
-                }}
-              >
-                {currentCycle.value === "current"
-                  ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
-                  : `${currentCycle.label}`}
-              </div>
-            )}
-
-            <div className="relative flex flex-shrink-0 items-center gap-3">
-              <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
-                <div className="flex w-10 cursor-default items-center justify-center">
-                  {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
-                    <AvatarGroup showTooltip={false}>
-                      {cycleDetails.assignee_ids?.map((assignee_id) => {
-                        const member = getUserDetails(assignee_id);
-                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                      })}
-                    </AvatarGroup>
-                  ) : (
-                    <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                      <User2 className="h-4 w-4 text-custom-text-400" />
-                    </span>
-                  )}
-                </div>
-              </Tooltip>
-
-              {isEditingAllowed && !isArchived && (
-                <FavoriteStar
-                  onClick={(e) => {
-                    if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
-                    else handleAddToFavorites(e);
-                  }}
-                  selected={!!cycleDetails.is_favorite}
-                />
-              )}
-              <CycleQuickActions
-                cycleId={cycleId}
-                projectId={projectId}
-                workspaceSlug={workspaceSlug}
-                isArchived={isArchived}
-              />
-            </div>
-          </div>
+          <span className="h-6 w-52 flex-shrink-0" />
         </div>
       </Link>
-    </>
+      <div className="absolute right-5 bottom-8 z-[5] flex items-center gap-1.5">
+        <div className="relative flex w-full flex-shrink-0 items-center justify-between gap-2.5 md:w-auto md:flex-shrink-0 md:justify-end">
+          {currentCycle && (
+            <div
+              className="relative flex h-6 w-20 flex-shrink-0 items-center justify-center rounded-sm text-center text-xs"
+              style={{
+                color: currentCycle.color,
+                backgroundColor: `${currentCycle.color}20`,
+              }}
+            >
+              {currentCycle.value === "current"
+                ? `${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`
+                : `${currentCycle.label}`}
+            </div>
+          )}
+
+          <div className="relative flex flex-shrink-0 items-center gap-3">
+            <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
+              <div className="flex w-10 cursor-default items-center justify-center">
+                {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {cycleDetails.assignee_ids?.map((assignee_id) => {
+                      const member = getUserDetails(assignee_id);
+                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                    })}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+
+            {isEditingAllowed && !isArchived && (
+              <FavoriteStar
+                onClick={(e) => {
+                  if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+                  else handleAddToFavorites(e);
+                }}
+                selected={!!cycleDetails.is_favorite}
+              />
+            )}
+            <CycleQuickActions
+              cycleId={cycleId}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+              isArchived={isArchived}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   );
 });
diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index 2f2601ce5..99af55bc3 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -144,106 +144,107 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
     : "0 Issue";
 
   return (
-    <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
-      <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
-        <div>
-          <div className="flex items-center justify-between gap-2">
-            <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
-              <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-            </Tooltip>
-            <div className="flex items-center gap-2">
-              {moduleStatus && (
-                <span
-                  className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
-                  style={{
-                    color: moduleStatus.color,
-                    backgroundColor: `${moduleStatus.color}20`,
-                  }}
-                >
-                  {moduleStatus.label}
-                </span>
-              )}
-              <button onClick={openModuleOverview}>
-                <Info className="h-4 w-4 text-custom-text-400" />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-1.5 text-custom-text-200">
-              <LayersIcon className="h-4 w-4 text-custom-text-300" />
-              <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
-            </div>
-            {moduleDetails.member_ids?.length > 0 && (
-              <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`} isMobile={isMobile}>
-                <div className="flex cursor-default items-center gap-1">
-                  <AvatarGroup showTooltip={false}>
-                    {moduleDetails.member_ids.map((member_id) => {
-                      const member = getUserDetails(member_id);
-                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                    })}
-                  </AvatarGroup>
-                </div>
+    <div className="relative">
+      <Link href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
+        <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+                <span className="truncate text-base font-medium">{moduleDetails.name}</span>
               </Tooltip>
-            )}
-          </div>
-
-          <Tooltip
-            isMobile={isMobile}
-            tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
-            position="top-left"
-          >
-            <div className="flex w-full items-center">
-              <div
-                className="bar relative h-1.5 w-full rounded bg-custom-background-90"
-                style={{
-                  boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
-                }}
-              >
-                <div
-                  className="absolute left-0 top-0 h-1.5 rounded bg-blue-600 duration-300"
-                  style={{
-                    width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
-                  }}
-                />
+              <div className="flex items-center gap-2">
+                {moduleStatus && (
+                  <span
+                    className="flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs"
+                    style={{
+                      color: moduleStatus.color,
+                      backgroundColor: `${moduleStatus.color}20`,
+                    }}
+                  >
+                    {moduleStatus.label}
+                  </span>
+                )}
+                <button onClick={openModuleOverview}>
+                  <Info className="h-4 w-4 text-custom-text-400" />
+                </button>
               </div>
             </div>
-          </Tooltip>
+          </div>
 
-          <div className="flex items-center justify-between">
-            {isDateValid ? (
-              <>
-                <span className="text-xs text-custom-text-300">
-                  {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-                </span>
-              </>
-            ) : (
-              <span className="text-xs text-custom-text-400">No due date</span>
-            )}
-
-            <div className="z-[5] flex items-center gap-1.5">
-              {isEditingAllowed && (
-                <FavoriteStar
-                  onClick={(e) => {
-                    if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                    else handleAddToFavorites(e);
-                  }}
-                  selected={!!moduleDetails.is_favorite}
-                />
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-custom-text-200">
+                <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
+              </div>
+              {moduleDetails.member_ids?.length > 0 && (
+                <Tooltip tooltipContent={`${moduleDetails.member_ids.length} Members`} isMobile={isMobile}>
+                  <div className="flex cursor-default items-center gap-1">
+                    <AvatarGroup showTooltip={false}>
+                      {moduleDetails.member_ids.map((member_id) => {
+                        const member = getUserDetails(member_id);
+                        return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                      })}
+                    </AvatarGroup>
+                  </div>
+                </Tooltip>
               )}
-              {workspaceSlug && projectId && (
-                <ModuleQuickActions
-                  moduleId={moduleId}
-                  projectId={projectId.toString()}
-                  workspaceSlug={workspaceSlug.toString()}
-                />
+            </div>
+
+            <Tooltip
+              isMobile={isMobile}
+              tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
+              position="top-left"
+            >
+              <div className="flex w-full items-center">
+                <div
+                  className="bar relative h-1.5 w-full rounded bg-custom-background-90"
+                  style={{
+                    boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
+                  }}
+                >
+                  <div
+                    className="absolute left-0 top-0 h-1.5 rounded bg-blue-600 duration-300"
+                    style={{
+                      width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            </Tooltip>
+
+            <div className="flex items-center justify-between py-0.5">
+              {isDateValid ? (
+                <>
+                  <span className="text-xs text-custom-text-300">
+                    {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+                  </span>
+                </>
+              ) : (
+                <span className="text-xs text-custom-text-400">No due date</span>
               )}
             </div>
           </div>
         </div>
+      </Link>
+      <div className="absolute right-4 bottom-3.5 z-[5] flex items-center gap-1.5">
+        {isEditingAllowed && (
+          <FavoriteStar
+            onClick={(e) => {
+              if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+              else handleAddToFavorites(e);
+            }}
+            selected={!!moduleDetails.is_favorite}
+          />
+        )}
+        {workspaceSlug && projectId && (
+          <ModuleQuickActions
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        )}
       </div>
-    </Link>
+    </div>
   );
 });
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 7503811fb..152ad8ca3 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -135,7 +135,7 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
   const completedModuleCheck = moduleDetails.status === "completed";
 
   return (
-    <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+    <div className="relative">
       <Link
         href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
         onClick={(e) => {
@@ -143,33 +143,39 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             openModuleOverview(e);
           }
         }}
-        className="relative flex w-full items-center justify-between gap-3 overflow-hidden"
       >
-        <div className="relative flex w-full items-center gap-3 overflow-hidden">
-          <div className="flex items-center gap-4 truncate">
-            <span className="flex-shrink-0">
-              <CircularProgressIndicator size={38} percentage={progress}>
-                {completedModuleCheck ? (
-                  progress === 100 ? (
-                    <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                  ) : (
-                    <span className="text-sm text-custom-primary-100">{`!`}</span>
-                  )
-                ) : progress === 100 ? (
-                  <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
-                ) : (
-                  <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
-                )}
-              </CircularProgressIndicator>
-            </span>
-            <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
-              <span className="truncate text-base font-medium">{moduleDetails.name}</span>
-            </Tooltip>
+        <div className="group flex w-full flex-col items-center justify-between gap-5 border-b border-custom-border-100 bg-custom-background-100 px-5 py-6 text-sm hover:bg-custom-background-90 sm:flex-row">
+          <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+            <div className="relative flex w-full items-center gap-3 overflow-hidden">
+              <div className="flex items-center gap-4 truncate">
+                <span className="flex-shrink-0">
+                  <CircularProgressIndicator size={38} percentage={progress}>
+                    {completedModuleCheck ? (
+                      progress === 100 ? (
+                        <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                      ) : (
+                        <span className="text-sm text-custom-primary-100">{`!`}</span>
+                      )
+                    ) : progress === 100 ? (
+                      <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+                    ) : (
+                      <span className="text-xs text-custom-text-300">{`${progress}%`}</span>
+                    )}
+                  </CircularProgressIndicator>
+                </span>
+                <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
+                  <span className="truncate text-base font-medium">{moduleDetails.name}</span>
+                </Tooltip>
+              </div>
+              <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
+                <Info className="h-4 w-4 text-custom-text-400" />
+              </button>
+            </div>
           </div>
-          <button onClick={openModuleOverview} className="z-[5] hidden flex-shrink-0 group-hover:flex">
-            <Info className="h-4 w-4 text-custom-text-400" />
-          </button>
+          <span className="h-6 w-52 flex-shrink-0" />
         </div>
+      </Link>
+      <div className="absolute right-5 bottom-8 z-[5] flex items-center gap-1.5">
         <div className="flex flex-shrink-0 items-center justify-center">
           {moduleStatus && (
             <span
@@ -183,51 +189,51 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             </span>
           )}
         </div>
-      </Link>
-      <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
-        <div className="text-xs text-custom-text-300">
-          {renderDate && (
-            <span className=" text-xs text-custom-text-300">
-              {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
-            </span>
-          )}
-        </div>
+        <div className="relative flex w-full items-center justify-between gap-2.5 sm:w-auto sm:flex-shrink-0 sm:justify-end ">
+          <div className="text-xs text-custom-text-300">
+            {renderDate && (
+              <span className=" text-xs text-custom-text-300">
+                {renderFormattedDate(startDate) ?? "_ _"} - {renderFormattedDate(endDate) ?? "_ _"}
+              </span>
+            )}
+          </div>
 
-        <div className="relative flex flex-shrink-0 items-center gap-3">
-          <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
-            <div className="flex w-10 cursor-default items-center justify-center gap-1">
-              {moduleDetails.member_ids.length > 0 ? (
-                <AvatarGroup showTooltip={false}>
-                  {moduleDetails.member_ids.map((member_id) => {
-                    const member = getUserDetails(member_id);
-                    return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
-                  })}
-                </AvatarGroup>
-              ) : (
-                <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                  <User2 className="h-4 w-4 text-custom-text-400" />
-                </span>
-              )}
-            </div>
-          </Tooltip>
+          <div className="relative flex flex-shrink-0 items-center gap-3">
+            <Tooltip tooltipContent={`${moduleDetails?.member_ids?.length || 0} Members`} isMobile={isMobile}>
+              <div className="flex w-10 cursor-default items-center justify-center gap-1">
+                {moduleDetails.member_ids.length > 0 ? (
+                  <AvatarGroup showTooltip={false}>
+                    {moduleDetails.member_ids.map((member_id) => {
+                      const member = getUserDetails(member_id);
+                      return <Avatar key={member?.id} name={member?.display_name} src={member?.avatar} />;
+                    })}
+                  </AvatarGroup>
+                ) : (
+                  <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
+                    <User2 className="h-4 w-4 text-custom-text-400" />
+                  </span>
+                )}
+              </div>
+            </Tooltip>
 
-          {isEditingAllowed && !isArchived && (
-            <FavoriteStar
-              onClick={(e) => {
-                if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
-                else handleAddToFavorites(e);
-              }}
-              selected={moduleDetails.is_favorite}
-            />
-          )}
-          {workspaceSlug && projectId && (
-            <ModuleQuickActions
-              moduleId={moduleId}
-              projectId={projectId.toString()}
-              workspaceSlug={workspaceSlug.toString()}
-              isArchived={isArchived}
-            />
-          )}
+            {isEditingAllowed && !isArchived && (
+              <FavoriteStar
+                onClick={(e) => {
+                  if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+                  else handleAddToFavorites(e);
+                }}
+                selected={moduleDetails.is_favorite}
+              />
+            )}
+            {workspaceSlug && projectId && (
+              <ModuleQuickActions
+                moduleId={moduleId}
+                projectId={projectId.toString()}
+                workspaceSlug={workspaceSlug.toString()}
+                isArchived={isArchived}
+              />
+            )}
+          </div>
         </div>
       </div>
     </div>