From 86ae79f851da001433c428086fc27df12d70f860 Mon Sep 17 00:00:00 2001
From: guru_sainath <gurusainath007@gmail.com>
Date: Thu, 21 Mar 2024 20:47:36 +0530
Subject: [PATCH] fix: resolved rendering issues in list and kanban layout when
 we apply group-by filter (#4028)

---
 web/components/issues/issue-layouts/kanban/default.tsx |  6 ++++--
 .../issues/issue-layouts/kanban/swimlanes.tsx          | 10 +++++++---
 web/components/issues/issue-layouts/list/default.tsx   |  7 +++----
 .../issue-layouts/list/headers/group-by-card.tsx       |  4 ++--
 web/components/issues/issue-layouts/utils.tsx          |  5 ++++-
 web/components/workspace/views/header.tsx              |  4 +++-
 .../[workspaceSlug]/workspace-views/[globalViewId].tsx |  4 ++--
 7 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index 63925c21c..ee1ceef53 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -25,7 +25,7 @@ import {
 } from "@/hooks/store";
 // types
 // parent components
-import { getGroupByColumns } from "../utils";
+import { getGroupByColumns, isWorkspaceLevel } from "../utils";
 // components
 import { KanbanStoreType } from "./base-kanban-root";
 import { HeaderGroupByCard } from "./headers/group-by-card";
@@ -102,7 +102,9 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     moduleInfo,
     label,
     projectState,
-    member
+    member,
+    true,
+    isWorkspaceLevel(storeType)
   );
 
   if (!list) return null;
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
index e83103e89..197d8d293 100644
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -13,7 +13,7 @@ import {
 } from "@plane/types";
 // components
 import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
-import { getGroupByColumns } from "../utils";
+import { getGroupByColumns, isWorkspaceLevel } from "../utils";
 import { KanbanStoreType } from "./base-kanban-root";
 import { KanBan } from "./default";
 import { HeaderGroupByCard } from "./headers/group-by-card";
@@ -291,7 +291,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     projectModule,
     label,
     projectState,
-    member
+    member,
+    true,
+    isWorkspaceLevel(storeType)
   );
   const subGroupByList = getGroupByColumns(
     sub_group_by as GroupByColumnTypes,
@@ -300,7 +302,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     projectModule,
     label,
     projectState,
-    member
+    member,
+    true,
+    isWorkspaceLevel(storeType)
   );
 
   if (!groupByList || !subGroupByList) return null;
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
index 41cc755a0..2fcadaa13 100644
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -13,9 +13,8 @@ import { IssueBlocksList, ListQuickAddIssueForm } from "@/components/issues";
 // hooks
 import { EIssuesStoreType } from "@/constants/issue";
 import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
-// constants
-// types
-import { getGroupByColumns } from "../utils";
+// utils
+import { getGroupByColumns, isWorkspaceLevel } from "../utils";
 import { HeaderGroupByCard } from "./headers/group-by-card";
 
 export interface IGroupByList {
@@ -78,7 +77,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     projectState,
     member,
     true,
-    true
+    isWorkspaceLevel(storeType)
   );
 
   if (!groups) return null;
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
index c53719f7f..3d089e42e 100644
--- a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -70,8 +70,8 @@ export const HeaderGroupByCard = observer(
             {icon ? icon : <CircleDashed className="h-3.5 w-3.5" strokeWidth={2} />}
           </div>
 
-          <div className="flex w-full flex-row items-center gap-1">
-            <div className="line-clamp-1 font-medium text-custom-text-100">{title}</div>
+          <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
+            <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
             <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
           </div>
 
diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx
index c98a942f6..12025a682 100644
--- a/web/components/issues/issue-layouts/utils.tsx
+++ b/web/components/issues/issue-layouts/utils.tsx
@@ -4,7 +4,7 @@ import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "
 // components
 import { ProjectLogo } from "@/components/project";
 // stores
-import { ISSUE_PRIORITIES } from "@/constants/issue";
+import { ISSUE_PRIORITIES, EIssuesStoreType } from "@/constants/issue";
 import { STATE_GROUPS } from "@/constants/state";
 import { ICycleStore } from "@/store/cycle.store";
 import { ILabelStore } from "@/store/label.store";
@@ -16,6 +16,9 @@ import { IStateStore } from "@/store/state.store";
 // constants
 // types
 
+export const isWorkspaceLevel = (type: EIssuesStoreType) =>
+  [EIssuesStoreType.PROFILE, EIssuesStoreType.GLOBAL].includes(type) ? true : false;
+
 export const getGroupByColumns = (
   groupBy: GroupByColumnTypes | null,
   project: IProjectStore,
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index fd9bc42f0..35c01481b 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -96,7 +96,9 @@ export const GlobalViewsHeader: React.FC = observer(() => {
             </Link>
           ))}
 
-          {currentWorkspaceViews?.map((viewId) => <ViewTab key={viewId} viewId={viewId} />)}
+          {currentWorkspaceViews?.map((viewId) => (
+            <ViewTab key={viewId} viewId={viewId} />
+          ))}
         </div>
 
         {isAuthorizedUser && (
diff --git a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
index 4fb459d3e..5979755a9 100644
--- a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
@@ -29,8 +29,8 @@ const GlobalViewIssuesPage: NextPageWithLayout = observer(() => {
     currentWorkspace?.name && defaultView?.label
       ? `${currentWorkspace?.name} - ${defaultView?.label}`
       : currentWorkspace?.name && globalViewDetails?.name
-        ? `${currentWorkspace?.name} - ${globalViewDetails?.name}`
-        : undefined;
+      ? `${currentWorkspace?.name} - ${globalViewDetails?.name}`
+      : undefined;
 
   return (
     <>