chore: group by assignees option for project issues (#1957)

* dev: group by assignees option for project issues

* fix: no assignee title

---------

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>

apps/app/components/core/views/board-view/board-header.tsx

@@ -12,7 +12,7 @@ import useProjects from "hooks/use-projects";
 // component
 import { Avatar, Icon } from "components/ui";
 // icons
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 import { getPriorityIcon, getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -56,10 +56,10 @@ export const BoardHeader: React.FC<Props> = ({
   );
 
   const { data: members } = useSWR(
-    workspaceSlug && projectId && selectedGroup === "created_by"
+    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
       ? PROJECT_MEMBERS(projectId.toString())
       : null,
-    workspaceSlug && projectId && selectedGroup === "created_by"
+    workspaceSlug && projectId && (selectedGroup === "created_by" || selectedGroup === "assignees")
       ? () => projectService.projectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
@@ -79,9 +79,11 @@ export const BoardHeader: React.FC<Props> = ({
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member?.display_name ?? "";
+        title = member ? member.display_name : "None";
+
         break;
     }
 
@@ -122,9 +124,10 @@ export const BoardHeader: React.FC<Props> = ({
           />
         );
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
 
         break;
     }

apps/app/components/core/views/issues-view.tsx

@@ -514,7 +514,8 @@ export const IssuesView: React.FC<Props> = ({
         dragDisabled={
           selectedGroup === "created_by" ||
           selectedGroup === "labels" ||
-          selectedGroup === "state_detail.group"
+          selectedGroup === "state_detail.group" ||
+          selectedGroup === "assignees"
         }
         emptyState={{
           title: cycleId

apps/app/components/core/views/list-view/single-list.tsx

@@ -94,9 +94,10 @@ export const SingleList: React.FC<Props> = ({
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        title = member?.display_name ?? "";
+        title = member ? member.display_name : "None";
         break;
     }
 
@@ -137,9 +138,10 @@ export const SingleList: React.FC<Props> = ({
           />
         );
         break;
+      case "assignees":
       case "created_by":
         const member = members?.find((member) => member.member.id === groupTitle)?.member;
-        icon = <Avatar user={member} height="24px" width="24px" fontSize="12px" />;
+        icon = member ? <Avatar user={member} height="24px" width="24px" fontSize="12px" /> : <></>;
 
         break;
     }

apps/app/components/issues/my-issues/my-issues-view-options.tsx

@@ -156,7 +156,11 @@ export const MyIssuesViewOptions: React.FC = () => {
                             >
                               {GROUP_BY_OPTIONS.map((option) => {
                                 if (issueView === "kanban" && option.key === null) return null;
-                                if (option.key === "state" || option.key === "created_by")
+                                if (
+                                  option.key === "state" ||
+                                  option.key === "created_by" ||
+                                  option.key === "assignees"
+                                )
                                   return null;
 
                                 return (

apps/app/components/profile/profile-issues-view-options.tsx

@@ -183,7 +183,11 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                             >
                               {GROUP_BY_OPTIONS.map((option) => {
                                 if (issueView === "kanban" && option.key === null) return null;
-                                if (option.key === "state" || option.key === "created_by")
+                                if (
+                                  option.key === "state" ||
+                                  option.key === "created_by" ||
+                                  option.key === "assignees"
+                                )
                                   return null;
 
                                 return (

apps/app/constants/issue.ts

@@ -7,6 +7,7 @@ export const GROUP_BY_OPTIONS: Array<{
   { name: "Priority", key: "priority" },
   { name: "Project", key: "project" },
   { name: "Labels", key: "labels" },
+  { name: "Assignees", key: "assignees" },
   { name: "Created by", key: "created_by" },
   { name: "None", key: null },
 ];

apps/app/types/issues.d.ts

@@ -234,6 +234,7 @@ export type TIssueGroupByOptions =
   | "created_by"
   | "state_detail.group"
   | "project"
+  | "assignees"
   | null;
 
 export type TIssueOrderByOptions =