[WEB-1596] fix: empty groups for issue list and kanban (#4829)

* fix empty groups in kanban and list

* fix build error

web/core/components/issues/issue-layouts/kanban/default.tsx

@@ -52,7 +52,6 @@ export interface IKanBan {
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   showEmptyGroup?: boolean;
-  subGroupIssueHeaderCount?: (listId: string) => number;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -77,7 +76,6 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     scrollableContainerRef,
     handleOnDrop,
     showEmptyGroup = true,
-    subGroupIssueHeaderCount,
     orderBy,
     isDropDisabled,
     dropErrorMessage,
@@ -116,7 +114,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
         showIssues: true,
       };
       if (!showEmptyGroup) {
-        groupVisibility.showGroup = subGroupIssueHeaderCount ? subGroupIssueHeaderCount(_list.id) > 0 : true;
+        groupVisibility.showGroup = (getGroupIssueCount(_list.id, undefined, false) ?? 0) > 0;
       }
       return groupVisibility;
     } else {
@@ -172,7 +170,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
                 <KanbanGroup
                   groupId={subList.id}
                   issuesMap={issuesMap}
-groupedIssueIds={groupedIssueIds}
+                  groupedIssueIds={groupedIssueIds}
                   displayProperties={displayProperties}
                   sub_group_by={sub_group_by}
                   group_by={group_by}

web/core/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -212,7 +212,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
     ? (groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[sub_group_id] ?? []
     : (groupedIssueIds as TGroupedIssues)?.[groupId] ?? [];
 
-  const groupIssueCount = getGroupIssueCount(groupId, sub_group_id, false);
+  const groupIssueCount = getGroupIssueCount(groupId, sub_group_id, false) ?? 0;
 
   const nextPageResults = getPaginationData(groupId, sub_group_id)?.nextPageResults;
 
@@ -230,10 +230,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
     </div>
   );
 
-  const shouldLoadMore =
-    nextPageResults === undefined && groupIssueCount !== undefined
-      ? issueIds?.length < groupIssueCount
-      : !!nextPageResults;
+  const shouldLoadMore = nextPageResults === undefined ? issueIds?.length < groupIssueCount : !!nextPageResults;
       const canOverlayBeVisible = orderBy !== "sort_order" || isDropDisabled;
   const shouldOverlayBeVisible = isDraggingOverColumn && canOverlayBeVisible;
 

web/core/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -196,9 +196,6 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                     orderBy={orderBy}
                     isDropDisabled={_list.isDropDisabled}
                     dropErrorMessage={_list.dropErrorMessage}
-                    subGroupIssueHeaderCount={(groupByListId: string) =>
-                      getGroupIssueCount(groupByListId, _list.id, true) ?? 0
-                    }
                   />
                 </div>
               )}

web/core/components/issues/issue-layouts/list/list-group.tsx

@@ -3,7 +3,6 @@
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { isNil } from "lodash";
 import { observer } from "mobx-react";
 import { cn } from "@plane/editor-core";
 // plane packages
@@ -64,7 +63,7 @@ interface Props {
 
 export const ListGroup = observer((props: Props) => {
   const {
-    groupIssueIds,
+    groupIssueIds = [],
     group,
     issuesMap,
     group_by,
@@ -101,7 +100,7 @@ export const ListGroup = observer((props: Props) => {
 
   useIntersectionObserver(containerRef, intersectionElement, loadMoreIssues, `50% 0% 50% 0%`);
 
-  const groupIssueCount = getGroupIssueCount(group.id, undefined, false);
+  const groupIssueCount = getGroupIssueCount(group.id, undefined, false) ?? 0;
   const nextPageResults = getPaginationData(group.id, undefined)?.nextPageResults;
   const isPaginating = !!getIssueLoader(group.id);
 
@@ -223,7 +222,7 @@ export const ListGroup = observer((props: Props) => {
   const isGroupByCreatedBy = group_by === "created_by";
   const shouldExpand = (!!groupIssueCount && isExpanded) || !group_by;
 
-  return groupIssueIds && !isNil(groupIssueCount) && validateEmptyIssueGroups(groupIssueCount) ? (
+  return validateEmptyIssueGroups(groupIssueCount) ? (
     <div
       ref={groupRef}
       className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`, {