From c7db290718e91d44da4b06c6673772ca57f36c2a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 20 Feb 2024 13:41:38 +0530
Subject: [PATCH] fix: kanban layout empty group toggle fix (#3708)

---
 .../issue-layouts/kanban/base-kanban-root.tsx      |  2 +-
 .../issues/issue-layouts/kanban/default.tsx        | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 83f72d8ea..8bf31a28f 100644
--- a/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -288,7 +288,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               handleKanbanFilters={handleKanbanFilters}
               kanbanFilters={kanbanFilters}
               enableQuickIssueCreate={enableQuickAdd}
-              showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
+              showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
               quickAddCallback={issues?.quickAddIssue}
               viewId={viewId}
               disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
index f11321944..b645afe30 100644
--- a/web/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -48,6 +48,7 @@ export interface IGroupByKanBan {
   canEditProperties: (projectId: string | undefined) => boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   isDragStarted?: boolean;
+  showEmptyGroup?: boolean;
 }
 
 const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@@ -72,6 +73,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     canEditProperties,
     scrollableContainerRef,
     isDragStarted,
+    showEmptyGroup = true,
   } = props;
 
   const member = useMember();
@@ -84,6 +86,10 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
 
   if (!list) return null;
 
+  const groupWithIssues = list.filter((_list) => (issueIds as TGroupedIssues)[_list.id]?.length > 0);
+
+  const groupList = showEmptyGroup ? list : groupWithIssues;
+
   const visibilityGroupBy = (_list: IGroupByColumn) =>
     sub_group_by ? false : kanbanFilters?.group_by.includes(_list.id) ? true : false;
 
@@ -91,9 +97,9 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
 
   return (
     <div className={`relative w-full flex gap-3 ${sub_group_by ? "h-full" : "h-full"}`}>
-      {list &&
-        list.length > 0 &&
-        list.map((_list: IGroupByColumn) => {
+      {groupList &&
+        groupList.length > 0 &&
+        groupList.map((_list: IGroupByColumn) => {
           const groupByVisibilityToggle = visibilityGroupBy(_list);
 
           return (
@@ -196,6 +202,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     canEditProperties,
     scrollableContainerRef,
     isDragStarted,
+    showEmptyGroup,
   } = props;
 
   const issueKanBanView = useKanbanView();
@@ -222,6 +229,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
       canEditProperties={canEditProperties}
       scrollableContainerRef={scrollableContainerRef}
       isDragStarted={isDragStarted}
+      showEmptyGroup={showEmptyGroup}
     />
   );
 });