fix: show empty group

web/components/issues/issue-layouts/list/block.tsx

@@ -12,10 +12,11 @@ interface IssueBlockProps {
   handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
   quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
   display_properties: any;
+  showEmptyGroup?: boolean;
 }
 
 export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
-  const { columnId, issue, handleIssues, quickActions, display_properties } = props;
+  const { columnId, issue, handleIssues, quickActions, display_properties, showEmptyGroup } = props;
 
   const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
     handleIssues(group_by, issueToUpdate, "update");
@@ -51,6 +52,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
             issue={issue}
             handleIssues={updateIssue}
             display_properties={display_properties}
+            showEmptyGroup={showEmptyGroup}
           />
           {quickActions(!columnId && columnId === "null" ? null : columnId, issue)}
         </div>

web/components/issues/issue-layouts/list/blocks-list.tsx

@@ -10,10 +10,11 @@ interface Props {
   handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
   quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
   display_properties: any;
+  showEmptyGroup?: boolean;
 }
 
 export const IssueBlocksList: FC<Props> = (props) => {
-  const { columnId, issues, handleIssues, quickActions, display_properties } = props;
+  const { columnId, issues, handleIssues, quickActions, display_properties, showEmptyGroup } = props;
 
   return (
     <div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
@@ -26,6 +27,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
             handleIssues={handleIssues}
             quickActions={quickActions}
             display_properties={display_properties}
+            showEmptyGroup={showEmptyGroup}
           />
         ))
       ) : (

web/components/issues/issue-layouts/list/default.tsx

@@ -18,6 +18,7 @@ export interface IGroupByList {
   display_properties: any;
   is_list?: boolean;
   enableQuickIssueCreate?: boolean;
+  showEmptyGroup?: boolean;
 }
 
 const GroupByList: React.FC<IGroupByList> = observer((props) => {
@@ -31,6 +32,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
     display_properties,
     is_list = false,
     enableQuickIssueCreate,
+    showEmptyGroup,
   } = props;
 
   return (
@@ -56,6 +58,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                 handleIssues={handleIssues}
                 quickActions={quickActions}
                 display_properties={display_properties}
+                showEmptyGroup={showEmptyGroup}
               />
             )}
             {enableQuickIssueCreate && (
@@ -88,6 +91,7 @@ export interface IList {
   priorities: any;
   enableQuickIssueCreate?: boolean;
   estimates: IEstimatePoint[] | null;
+  showEmptyGroup?: boolean;
 }
 
 export const List: React.FC<IList> = observer((props) => {
@@ -103,7 +107,7 @@ export const List: React.FC<IList> = observer((props) => {
     projects,
     stateGroups,
     priorities,
-
+    showEmptyGroup,
     enableQuickIssueCreate,
   } = props;
 
@@ -120,6 +124,7 @@ export const List: React.FC<IList> = observer((props) => {
           display_properties={display_properties}
           is_list
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -133,6 +138,7 @@ export const List: React.FC<IList> = observer((props) => {
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -146,6 +152,7 @@ export const List: React.FC<IList> = observer((props) => {
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -159,6 +166,7 @@ export const List: React.FC<IList> = observer((props) => {
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -172,6 +180,7 @@ export const List: React.FC<IList> = observer((props) => {
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -185,6 +194,7 @@ export const List: React.FC<IList> = observer((props) => {
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -198,6 +208,7 @@ export const List: React.FC<IList> = observer((props) => {
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -211,6 +222,7 @@ export const List: React.FC<IList> = observer((props) => {
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
     </div>

web/components/issues/issue-layouts/list/properties.tsx

@@ -18,10 +18,12 @@ export interface IKanBanProperties {
   issue: IIssue;
   handleIssues: (group_by: string | null, issue: IIssue) => void;
   display_properties: any;
+  isReadonly?: boolean;
+  showEmptyGroup?: boolean;
 }
 
 export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
-  const { columnId: group_id, issue, handleIssues, display_properties } = props;
+  const { columnId: group_id, issue, handleIssues, display_properties, isReadonly, showEmptyGroup } = props;
 
   const handleState = (state: IState) => {
     handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: state.id });
@@ -76,7 +78,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       )}
 
       {/* label */}
-      {display_properties && display_properties?.labels && (
+      {display_properties && display_properties?.labels && (showEmptyGroup || issue?.labels.length > 0) && (
         <IssuePropertyLabels
           projectId={issue?.project_detail?.id || null}
           value={issue?.labels || null}
@@ -87,19 +89,18 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       )}
 
       {/* assignee */}
-      {display_properties && display_properties?.assignee && (
+      {display_properties && display_properties?.assignee && (showEmptyGroup || issue?.assignees?.length > 0) && (
         <IssuePropertyAssignee
           projectId={issue?.project_detail?.id || null}
           value={issue?.assignees || null}
           hideDropdownArrow
           onChange={handleAssignee}
           disabled={false}
-          multiple
         />
       )}
 
       {/* start date */}
-      {display_properties && display_properties?.start_date && (
+      {display_properties && display_properties?.start_date && (showEmptyGroup || issue?.start_date) && (
         <IssuePropertyDate
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
@@ -109,7 +110,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
       )}
 
       {/* target/due date */}
-      {display_properties && display_properties?.due_date && (
+      {display_properties && display_properties?.due_date && (showEmptyGroup || issue?.target_date) && (
         <IssuePropertyDate
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}

web/components/issues/issue-layouts/list/roots/project-root.tsx

@@ -27,8 +27,8 @@ export const ListLayout: FC = observer(() => {
 
   const issues = issueStore?.getIssues;
 
-  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
-
+  const group_by: string | null = userDisplayFilters?.group_by || null;
   const display_properties = issueFilterStore?.userDisplayProperties || null;
 
   const handleIssues = useCallback(
@@ -77,6 +77,7 @@ export const ListLayout: FC = observer(() => {
         projects={projects}
         enableQuickIssueCreate
         estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+        showEmptyGroup={userDisplayFilters.show_empty_groups}
       />
     </div>
   );