chore: Improved Handling of Empty Properties for Labels and Assignees (#2616)

* fix: show empty group

* chore: handled None values for lables and assignees in list and kanban layouts

---------

Co-authored-by: dakshesh14 <dakshesh.jain14@gmail.com>

web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx

@@ -27,7 +27,7 @@ type Props = {
   states?: IStateResponse | undefined;
 };
 
-const membersFilters = ["assignees", "mentions" ,"created_by", "subscriber"];
+const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
 const dateFilters = ["start_date", "target_date"];
 
 export const AppliedFiltersList: React.FC<Props> = observer((props) => {

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

@@ -12,6 +12,7 @@ interface IssueBlockProps {
   index: number;
   issue: IIssue;
   isDragDisabled: boolean;
+  showEmptyGroup: boolean;
   handleIssues: (
     sub_group_by: string | null,
     group_by: string | null,
@@ -23,7 +24,17 @@ interface IssueBlockProps {
 }
 
 export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
-  const { sub_group_id, columnId, index, issue, isDragDisabled, handleIssues, quickActions, displayProperties } = props;
+  const {
+    sub_group_id,
+    columnId,
+    index,
+    issue,
+    isDragDisabled,
+    showEmptyGroup,
+    handleIssues,
+    quickActions,
+    displayProperties,
+  } = props;
 
   const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
     if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, "update");
@@ -83,6 +94,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
                   issue={issue}
                   handleIssues={updateIssue}
                   displayProperties={displayProperties}
+                  showEmptyGroup={showEmptyGroup}
                 />
               </div>
             </div>

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

@@ -7,6 +7,7 @@ interface IssueBlocksListProps {
   columnId: string;
   issues: IIssue[];
   isDragDisabled: boolean;
+  showEmptyGroup: boolean;
   handleIssues: (
     sub_group_by: string | null,
     group_by: string | null,
@@ -18,7 +19,16 @@ interface IssueBlocksListProps {
 }
 
 export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
-  const { sub_group_id, columnId, issues, isDragDisabled, handleIssues, quickActions, displayProperties } = props;
+  const {
+    sub_group_id,
+    columnId,
+    issues,
+    showEmptyGroup,
+    isDragDisabled,
+    handleIssues,
+    quickActions,
+    displayProperties,
+  } = props;
 
   return (
     <>
@@ -29,6 +39,7 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
               key={`kanban-issue-block-${issue.id}`}
               index={index}
               issue={issue}
+              showEmptyGroup={showEmptyGroup}
               handleIssues={handleIssues}
               quickActions={quickActions}
               displayProperties={displayProperties}

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

@@ -9,7 +9,7 @@ import { KanbanIssueBlocksList, BoardInlineCreateIssueForm } from "components/is
 // types
 import { IIssueDisplayProperties, IIssue } from "types";
 // constants
-import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
+import { getValueFromObject } from "constants/issue";
 
 export interface IGroupByKanBan {
   issues: any;
@@ -25,6 +25,7 @@ export interface IGroupByKanBan {
     issue: IIssue,
     action: "update" | "delete"
   ) => void;
+  showEmptyGroup: boolean;
   quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
   displayProperties: IIssueDisplayProperties;
   kanBanToggle: any;
@@ -42,6 +43,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     listKey,
     isDragDisabled,
     handleIssues,
+    showEmptyGroup,
     quickActions,
     displayProperties,
     kanBanToggle,
@@ -92,6 +94,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                         columnId={getValueFromObject(_list, listKey) as string}
                         issues={issues[getValueFromObject(_list, listKey) as string]}
                         isDragDisabled={isDragDisabled}
+                        showEmptyGroup={showEmptyGroup}
                         handleIssues={handleIssues}
                         quickActions={quickActions}
                         displayProperties={displayProperties}
@@ -140,6 +143,13 @@ export interface IKanBan {
   displayProperties: IIssueDisplayProperties;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  showEmptyGroup: boolean;
+  states: any;
+  stateGroups: any;
+  priorities: any;
+  labels: any;
+  members: any;
+  projects: any;
   enableQuickIssueCreate?: boolean;
 }
 
@@ -154,22 +164,50 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     displayProperties,
     kanBanToggle,
     handleKanBanToggle,
+    showEmptyGroup,
+    states,
+    stateGroups,
+    priorities,
+    labels,
+    members,
+    projects,
     enableQuickIssueCreate,
   } = props;
 
-  const { project: projectStore, issueKanBanView: issueKanBanViewStore } = useMobxStore();
+  const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
 
   return (
     <div className="relative w-full h-full">
+      {/* TODO: have to implement */}
+      {group_by && group_by === "projects" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          sub_group_id={sub_group_id}
+          list={projects}
+          listKey={`id`}
+          isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+        />
+      )}
+
       {group_by && group_by === "state" && (
         <GroupByKanBan
           issues={issues}
           group_by={group_by}
           sub_group_by={sub_group_by}
           sub_group_id={sub_group_id}
-          list={projectStore?.projectStates}
+          list={states}
           listKey={`id`}
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
@@ -185,9 +223,10 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           group_by={group_by}
           sub_group_by={sub_group_by}
           sub_group_id={sub_group_id}
-          list={ISSUE_STATE_GROUPS}
+          list={stateGroups}
           listKey={`key`}
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
@@ -203,9 +242,10 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           group_by={group_by}
           sub_group_by={sub_group_by}
           sub_group_id={sub_group_id}
-          list={ISSUE_PRIORITIES}
+          list={priorities}
           listKey={`key`}
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
@@ -221,9 +261,10 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           group_by={group_by}
           sub_group_by={sub_group_by}
           sub_group_id={sub_group_id}
-          list={projectStore?.projectLabels}
+          list={labels ? [...labels, { id: "None", name: "None" }] : labels}
           listKey={`id`}
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
@@ -239,9 +280,10 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           group_by={group_by}
           sub_group_by={sub_group_by}
           sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
+          list={members ? [...members, { id: "None", display_name: "None" }] : members}
-          listKey={`member.id`}
+          listKey={`id`}
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
@@ -257,9 +299,10 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           group_by={group_by}
           sub_group_by={sub_group_by}
           sub_group_id={sub_group_id}
-          list={projectStore?.projectMembers}
+          list={members}
-          listKey={`member.id`}
+          listKey={`id`}
           isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+          showEmptyGroup={showEmptyGroup}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}

web/components/issues/issue-layouts/kanban/headers/assignee.tsx

@@ -39,8 +39,8 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
         (sub_group_by && header_type === "sub_group_by" ? (
           <HeaderSubGroupByCard
             column_id={column_id}
-            icon={<Icon user={assignee?.member} />}
+            icon={<Icon user={assignee} />}
-            title={assignee?.member?.display_name || ""}
+            title={assignee?.display_name || ""}
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
@@ -50,12 +50,12 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
             sub_group_by={sub_group_by}
             group_by={group_by}
             column_id={column_id}
-            icon={<Icon user={assignee?.member} />}
+            icon={<Icon user={assignee} />}
-            title={assignee?.member?.display_name || ""}
+            title={assignee?.display_name || ""}
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            issuePayload={{ assignees: [assignee?.member?.id] }}
+            issuePayload={{ assignees: [assignee?.id] }}
           />
         ))}
     </>

web/components/issues/issue-layouts/kanban/headers/created_by.tsx

@@ -36,8 +36,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
         (sub_group_by && header_type === "sub_group_by" ? (
           <HeaderSubGroupByCard
             column_id={column_id}
-            icon={<Icon user={createdBy?.member} />}
+            icon={<Icon user={createdBy} />}
-            title={createdBy?.member?.display_name || ""}
+            title={createdBy?.display_name || ""}
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
@@ -47,12 +47,12 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
             sub_group_by={sub_group_by}
             group_by={group_by}
             column_id={column_id}
-            icon={<Icon user={createdBy?.member} />}
+            icon={<Icon user={createdBy} />}
-            title={createdBy?.member?.display_name || ""}
+            title={createdBy?.display_name || ""}
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            issuePayload={{ created_by: createdBy?.member?.id }}
+            issuePayload={{ created_by: createdBy?.id }}
           />
         ))}
     </>

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

@@ -18,10 +18,11 @@ export interface IKanBanProperties {
   issue: IIssue;
   handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void;
   displayProperties: IIssueDisplayProperties;
+  showEmptyGroup: boolean;
 }
 
 export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
-  const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties } = props;
+  const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, showEmptyGroup } = props;
 
   const handleState = (state: IState) => {
     handleIssues(
@@ -104,7 +105,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       )}
 
       {/* label */}
-      {displayProperties && displayProperties?.labels && (
+      {displayProperties && displayProperties?.labels && (showEmptyGroup || issue?.labels.length > 0) && (
         <IssuePropertyLabels
           projectId={issue?.project_detail?.id || null}
           value={issue?.labels || null}
@@ -115,7 +116,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       )}
 
       {/* start date */}
-      {displayProperties && displayProperties?.start_date && (
+      {displayProperties && displayProperties?.start_date && (showEmptyGroup || issue?.start_date) && (
         <IssuePropertyDate
           value={issue?.start_date || null}
           onChange={(date: string) => handleStartDate(date)}
@@ -125,7 +126,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       )}
 
       {/* target/due date */}
-      {displayProperties && displayProperties?.due_date && (
+      {displayProperties && displayProperties?.due_date && (showEmptyGroup || issue?.target_date) && (
         <IssuePropertyDate
           value={issue?.target_date || null}
           onChange={(date: string) => handleTargetDate(date)}
@@ -177,7 +178,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
       )}
 
       {/* assignee */}
-      {displayProperties && displayProperties?.assignee && (
+      {displayProperties && displayProperties?.assignee && (showEmptyGroup || issue?.assignees.length > 0) && (
         <IssuePropertyAssignee
           projectId={issue?.project_detail?.id || null}
           value={issue?.assignees || null}

web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx

@@ -37,6 +37,8 @@ export const CycleKanBanLayout: React.FC = observer(() => {
 
   const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
 
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
   const displayProperties = issueFilterStore?.userDisplayProperties || null;
 
   const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
@@ -116,6 +118,13 @@ export const CycleKanBanLayout: React.FC = observer(() => {
             displayProperties={displayProperties}
             kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members?.map((m) => m.member) ?? null}
+            projects={projects}
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         ) : (
           <KanBanSwimLanes
@@ -140,7 +149,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
             labels={labels}
             members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         )}
       </DragDropContext>

web/components/issues/issue-layouts/kanban/roots/module-root.tsx

@@ -36,6 +36,8 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
 
   const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
 
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
   const displayProperties = issueFilterStore?.userDisplayProperties || null;
 
   const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
@@ -115,6 +117,13 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
             displayProperties={displayProperties}
             kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members?.map((m) => m.member) ?? null}
+            projects={projects}
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         ) : (
           <KanBanSwimLanes
@@ -139,7 +148,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
             labels={labels}
             members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         )}
       </DragDropContext>

web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx

@@ -34,6 +34,8 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
 
   const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
 
+  const userDisplayFilters = profileIssueFiltersStore?.userDisplayFilters || null;
+
   const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null;
 
   const currentKanBanView: "swimlanes" | "default" = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by
@@ -99,6 +101,13 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
             displayProperties={displayProperties}
             kanBanToggle={issueKanBanViewStore?.kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members?.map((m) => m.member) ?? null}
+            projects={projects}
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         ) : (
           <KanBanSwimLanes
@@ -122,7 +131,7 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
             labels={labels}
             members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={null}
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         )}
       </DragDropContext>

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

@@ -8,8 +8,6 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { KanBanSwimLanes } from "../swimlanes";
 import { KanBan } from "../default";
 import { ProjectIssueQuickActions } from "components/issues";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IIssue } from "types";
 // constants
@@ -19,7 +17,7 @@ export interface IKanBanLayout {}
 
 export const KanBanLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug } = router.query;
+  const { workspaceSlug } = router.query as { workspaceSlug: string };
 
   const {
     project: projectStore,
@@ -36,6 +34,8 @@ export const KanBanLayout: React.FC = observer(() => {
 
   const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
 
+  const userDisplayFilters = issueFilterStore?.userDisplayFilters || null;
+
   const displayProperties = issueFilterStore?.userDisplayProperties || null;
 
   const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
@@ -80,7 +80,7 @@ export const KanBanLayout: React.FC = observer(() => {
   const labels = projectStore?.projectLabels || null;
   const members = projectStore?.projectMembers || null;
   const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
+  const projects = workspaceSlug ? projectStore?.projects?.[workspaceSlug] || null : null;
   const estimates =
     currentProjectDetails?.estimate !== null
       ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
@@ -105,7 +105,14 @@ export const KanBanLayout: React.FC = observer(() => {
             displayProperties={displayProperties}
             kanBanToggle={issueKanBanViewStore?.kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            states={states}
+            stateGroups={stateGroups}
+            priorities={priorities}
+            labels={labels}
+            members={members?.map((m) => m.member) ?? null}
+            projects={projects}
             enableQuickIssueCreate
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         ) : (
           <KanBanSwimLanes
@@ -129,7 +136,7 @@ export const KanBanLayout: React.FC = observer(() => {
             labels={labels}
             members={members?.map((m) => m.member) ?? null}
             projects={projects}
-            estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
+            showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
           />
         )}
       </DragDropContext>

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

@@ -1,15 +1,13 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
 import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
 import { KanBan } from "./default";
 // types
-import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
+import { IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
 // constants
-import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
+import { getValueFromObject } from "constants/issue";
 
 interface ISubGroupSwimlaneHeader {
   issues: any;
@@ -19,11 +17,6 @@ interface ISubGroupSwimlaneHeader {
   listKey: string;
   kanBanToggle: any;
   handleKanBanToggle: any;
-  states: IState[] | null;
-  labels: IIssueLabels[] | null;
-  members: IUserLite[] | null;
-  projects: IProject[] | null;
-  estimates: IEstimatePoint[] | null;
 }
 const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   issues,
@@ -65,6 +58,13 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
 };
 
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
+  showEmptyGroup: boolean;
+  states: IState[] | null;
+  stateGroups: any;
+  priorities: any;
+  labels: IIssueLabels[] | null;
+  members: IUserLite[] | null;
+  projects: IProject[] | null;
   issues: any;
   handleIssues: (
     sub_group_by: string | null,
@@ -76,13 +76,6 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   displayProperties: IIssueDisplayProperties;
   kanBanToggle: any;
   handleKanBanToggle: any;
-  states: IState[] | null;
-  stateGroups: any;
-  priorities: any;
-  labels: IIssueLabels[] | null;
-  members: IUserLite[] | null;
-  projects: IProject[] | null;
-  estimates: IEstimatePoint[] | null;
 }
 const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
   const {
@@ -96,13 +89,13 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     displayProperties,
     kanBanToggle,
     handleKanBanToggle,
+    showEmptyGroup,
     states,
     stateGroups,
     priorities,
     labels,
     members,
     projects,
-    estimates,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -146,6 +139,13 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   displayProperties={displayProperties}
                   kanBanToggle={kanBanToggle}
                   handleKanBanToggle={handleKanBanToggle}
+                  showEmptyGroup={showEmptyGroup}
+                  states={states}
+                  stateGroups={stateGroups}
+                  priorities={priorities}
+                  labels={labels}
+                  members={members}
+                  projects={projects}
                   enableQuickIssueCreate
                 />
               </div>
@@ -170,13 +170,13 @@ export interface IKanBanSwimLanes {
   displayProperties: IIssueDisplayProperties;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  showEmptyGroup: boolean;
   states: IState[] | null;
   stateGroups: any;
   priorities: any;
   labels: IIssueLabels[] | null;
   members: IUserLite[] | null;
   projects: IProject[] | null;
-  estimates: IEstimatePoint[] | null;
 }
 
 export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@@ -189,34 +189,39 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     displayProperties,
     kanBanToggle,
     handleKanBanToggle,
+    showEmptyGroup,
     states,
     stateGroups,
     priorities,
     labels,
     members,
     projects,
-    estimates,
   } = props;
 
-  const { project: projectStore } = useMobxStore();
-
   return (
     <div className="relative">
       <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
+        {group_by && group_by === "project" && (
+          <SubGroupSwimlaneHeader
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={projects}
+            listKey={`id`}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
         {group_by && group_by === "state" && (
           <SubGroupSwimlaneHeader
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
-            list={projectStore?.projectStates}
+            list={states}
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            states={states}
-            labels={labels}
-            members={members}
-            projects={projects}
-            estimates={estimates}
           />
         )}
 
@@ -225,15 +230,10 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
-            list={ISSUE_STATE_GROUPS}
+            list={stateGroups}
             listKey={`key`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            states={states}
-            labels={labels}
-            members={members}
-            projects={projects}
-            estimates={estimates}
           />
         )}
 
@@ -242,15 +242,10 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
-            list={ISSUE_PRIORITIES}
+            list={priorities}
             listKey={`key`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            states={states}
-            labels={labels}
-            members={members}
-            projects={projects}
-            estimates={estimates}
           />
         )}
 
@@ -259,15 +254,10 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
-            list={projectStore?.projectLabels}
+            list={labels ? [...labels, { id: "None", name: "None" }] : labels}
             listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            states={states}
-            labels={labels}
-            members={members}
-            projects={projects}
-            estimates={estimates}
           />
         )}
 
@@ -276,15 +266,10 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
-            list={projectStore?.projectMembers}
+            list={members ? [...members, { id: "None", display_name: "None" }] : members}
-            listKey={`member.id`}
+            listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            states={states}
-            labels={labels}
-            members={members}
-            projects={projects}
-            estimates={estimates}
           />
         )}
 
@@ -293,15 +278,10 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             issues={issues}
             sub_group_by={sub_group_by}
             group_by={group_by}
-            list={projectStore?.projectMembers}
+            list={members}
-            listKey={`member.id`}
+            listKey={`id`}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
-            states={states}
-            labels={labels}
-            members={members}
-            projects={projects}
-            estimates={estimates}
           />
         )}
       </div>
@@ -311,20 +291,42 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           issues={issues}
           sub_group_by={sub_group_by}
           group_by={group_by}
-          list={projectStore?.projectStates}
+          list={states}
           listKey={`id`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
+          states={states}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          labels={labels}
+          members={members}
+          projects={projects}
+        />
+      )}
+
+      {sub_group_by && sub_group_by === "state" && (
+        <SubGroupSwimlane
+          issues={issues}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          list={states}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          quickActions={quickActions}
+          displayProperties={displayProperties}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
           states={states}
           stateGroups={stateGroups}
           priorities={priorities}
           labels={labels}
           members={members}
           projects={projects}
-          estimates={estimates}
         />
       )}
 
@@ -333,20 +335,20 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           issues={issues}
           sub_group_by={sub_group_by}
           group_by={group_by}
-          list={ISSUE_STATE_GROUPS}
+          list={stateGroups}
           listKey={`key`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
           states={states}
           stateGroups={stateGroups}
           priorities={priorities}
           labels={labels}
           members={members}
           projects={projects}
-          estimates={estimates}
         />
       )}
 
@@ -355,20 +357,20 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           issues={issues}
           sub_group_by={sub_group_by}
           group_by={group_by}
-          list={ISSUE_PRIORITIES}
+          list={priorities}
           listKey={`key`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
           states={states}
           stateGroups={stateGroups}
           priorities={priorities}
           labels={labels}
           members={members}
           projects={projects}
-          estimates={estimates}
         />
       )}
 
@@ -377,20 +379,20 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           issues={issues}
           sub_group_by={sub_group_by}
           group_by={group_by}
-          list={projectStore?.projectLabels}
+          list={labels ? [...labels, { id: "None", name: "None" }] : labels}
           listKey={`id`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
           states={states}
           stateGroups={stateGroups}
           priorities={priorities}
           labels={labels}
           members={members}
           projects={projects}
-          estimates={estimates}
         />
       )}
 
@@ -399,20 +401,20 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           issues={issues}
           sub_group_by={sub_group_by}
           group_by={group_by}
-          list={projectStore?.projectMembers}
+          list={members ? [...members, { id: "None", display_name: "None" }] : members}
-          listKey={`member.id`}
+          listKey={`id`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
           states={states}
           stateGroups={stateGroups}
           priorities={priorities}
           labels={labels}
           members={members}
           projects={projects}
-          estimates={estimates}
         />
       )}
 
@@ -421,20 +423,20 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           issues={issues}
           sub_group_by={sub_group_by}
           group_by={group_by}
-          list={projectStore?.projectMembers}
+          list={members}
-          listKey={`member.id`}
+          listKey={`id`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           displayProperties={displayProperties}
           kanBanToggle={kanBanToggle}
           handleKanBanToggle={handleKanBanToggle}
+          showEmptyGroup={showEmptyGroup}
           states={states}
           stateGroups={stateGroups}
           priorities={priorities}
           labels={labels}
           members={members}
           projects={projects}
-          estimates={estimates}
         />
       )}
     </div>

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}
         />
       )}
 
@@ -179,12 +188,13 @@ export const List: React.FC<IList> = observer((props) => {
         <GroupByList
           issues={issues}
           group_by={group_by}
-          list={labels}
+          list={[...labels, { id: "None", name: "None" }]}
           listKey={`id`}
           handleIssues={handleIssues}
           quickActions={quickActions}
           display_properties={display_properties}
           enableQuickIssueCreate={enableQuickIssueCreate}
+          showEmptyGroup={showEmptyGroup}
         />
       )}
 
@@ -192,12 +202,13 @@ export const List: React.FC<IList> = observer((props) => {
         <GroupByList
           issues={issues}
           group_by={group_by}
-          list={members}
+          list={[...members, { id: "None", display_name: "None" }]}
           listKey={`id`}
           handleIssues={handleIssues}
           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>
   );

web/components/issues/issue-peek-overview/activity/card.tsx

@@ -37,99 +37,101 @@ export const IssueActivityCard: FC<IssueActivityCard> = (props) => {
   return (
     <div className="flow-root">
       <ul role="list" className="-mb-4">
-        {issueComments.map((activityItem: any, index: any) => {
+        {issueComments &&
-          // determines what type of action is performed
+          issueComments.length > 0 &&
-          const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
+          issueComments.map((activityItem: any, index: any) => {
+            // determines what type of action is performed
+            const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
 
-          if ("field" in activityItem && activityItem.field !== "updated_by") {
+            if ("field" in activityItem && activityItem.field !== "updated_by") {
-            return (
+              return (
-              <li key={activityItem.id}>
+                <li key={activityItem.id}>
-                <div className="relative pb-1">
+                  <div className="relative pb-1">
-                  {issueComments.length > 1 && index !== issueComments.length - 1 ? (
+                    {issueComments.length > 1 && index !== issueComments.length - 1 ? (
-                    <span
+                      <span
-                      className="absolute top-5 left-5 -ml-[1.5px] h-full w-0.5 bg-custom-background-100"
+                        className="absolute top-5 left-5 -ml-[1.5px] h-full w-0.5 bg-custom-background-100"
-                      aria-hidden="true"
+                        aria-hidden="true"
-                    />
+                      />
-                  ) : null}
+                    ) : null}
-                  <div className="relative flex items-start space-x-2">
+                    <div className="relative flex items-start space-x-2">
-                    <div>
+                      <div>
-                      <div className="relative px-1.5">
+                        <div className="relative px-1.5">
-                        <div className="mt-1.5">
+                          <div className="mt-1.5">
-                          <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-100 text-custom-text-200 ring-white">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-100 text-custom-text-200 ring-white">
-                            {activityItem.field ? (
+                              {activityItem.field ? (
-                              activityItem.new_value === "restore" ? (
+                                activityItem.new_value === "restore" ? (
-                                <History className="h-3.5 w-3.5 text-custom-text-200" />
+                                  <History className="h-3.5 w-3.5 text-custom-text-200" />
+                                ) : (
+                                  <ActivityIcon activity={activityItem} />
+                                )
+                              ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                                <img
+                                  src={activityItem.actor_detail.avatar}
+                                  alt={activityItem.actor_detail.display_name}
+                                  height={24}
+                                  width={24}
+                                  className="rounded-full h-full w-full object-cover"
+                                />
                               ) : (
-                                <ActivityIcon activity={activityItem} />
+                                <div
-                              )
+                                  className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
-                            ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
+                                >
-                              <img
+                                  {activityItem.actor_detail.is_bot
-                                src={activityItem.actor_detail.avatar}
+                                    ? activityItem.actor_detail.first_name.charAt(0)
-                                alt={activityItem.actor_detail.display_name}
+                                    : activityItem.actor_detail.display_name.charAt(0)}
-                                height={24}
+                                </div>
-                                width={24}
+                              )}
-                                className="rounded-full h-full w-full object-cover"
+                            </div>
-                              />
-                            ) : (
-                              <div
-                                className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-700 text-xs text-white`}
-                              >
-                                {activityItem.actor_detail.is_bot
-                                  ? activityItem.actor_detail.first_name.charAt(0)
-                                  : activityItem.actor_detail.display_name.charAt(0)}
-                              </div>
-                            )}
                           </div>
                         </div>
                       </div>
-                    </div>
+                      <div className="min-w-0 flex-1 py-3">
-                    <div className="min-w-0 flex-1 py-3">
+                        <div className="text-xs text-custom-text-200 break-words">
-                      <div className="text-xs text-custom-text-200 break-words">
+                          {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
-                        {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                            <span className="text-gray font-medium">Plane</span>
-                          <span className="text-gray font-medium">Plane</span>
+                          ) : activityItem.actor_detail.is_bot ? (
-                        ) : activityItem.actor_detail.is_bot ? (
+                            <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
-                          <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
+                          ) : (
-                        ) : (
+                            <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
-                          <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
+                              <a className="text-gray font-medium">
-                            <a className="text-gray font-medium">
+                                {activityItem.actor_detail.is_bot
-                              {activityItem.actor_detail.is_bot
+                                  ? activityItem.actor_detail.first_name
-                                ? activityItem.actor_detail.first_name
+                                  : activityItem.actor_detail.display_name}
-                                : activityItem.actor_detail.display_name}
+                              </a>
-                            </a>
+                            </Link>
-                          </Link>
+                          )}{" "}
-                        )}{" "}
+                          {message}{" "}
-                        {message}{" "}
+                          <Tooltip
-                        <Tooltip
+                            tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
-                          tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
+                              activityItem.created_at
-                            activityItem.created_at
+                            )}`}
-                          )}`}
+                          >
-                        >
+                            <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
-                          <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
+                          </Tooltip>
-                        </Tooltip>
+                        </div>
                       </div>
                     </div>
                   </div>
+                </li>
+              );
+            } else if ("comment_json" in activityItem)
+              return (
+                <div key={activityItem.id} className="mt-4">
+                  <IssueCommentCard
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issueId}
+                    user={user}
+                    comment={activityItem}
+                    onSubmit={issueCommentUpdate}
+                    handleCommentDeletion={issueCommentRemove}
+                    issueCommentReactionCreate={issueCommentReactionCreate}
+                    issueCommentReactionRemove={issueCommentReactionRemove}
+                    // showAccessSpecifier={showAccessSpecifier}
+                  />
                 </div>
-              </li>
+              );
-            );
+          })}
-          } else if ("comment_json" in activityItem)
-            return (
-              <div key={activityItem.id} className="mt-4">
-                <IssueCommentCard
-                  workspaceSlug={workspaceSlug}
-                  projectId={projectId}
-                  issueId={issueId}
-                  user={user}
-                  comment={activityItem}
-                  onSubmit={issueCommentUpdate}
-                  handleCommentDeletion={issueCommentRemove}
-                  issueCommentReactionCreate={issueCommentReactionCreate}
-                  issueCommentReactionRemove={issueCommentReactionRemove}
-                  // showAccessSpecifier={showAccessSpecifier}
-                />
-              </div>
-            );
-        })}
       </ul>
     </div>
   );