fix: resolved rendering issues in list and kanban layout when we apply group-by filter (#4028)

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;

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;

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;

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>
 

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,

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 && (

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 (
     <>