chore: implemented assigned profiles issues and filters and updated workflow in list layout (#2462)

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

@@ -1,41 +1,52 @@
+import { FC } from "react";
 // components
 import { KanBanProperties } from "./properties";
+// ui
+import { Tooltip } from "@plane/ui";
 
 interface IssueBlockProps {
   columnId: string;
   issues: any;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  states: any;
+  labels: any;
+  members: any;
+  priorities: any;
 }
 
-export const IssueBlock = ({ columnId, issues, handleIssues, display_properties }: IssueBlockProps) => (
-  <>
-    {issues && issues.length > 0 ? (
-      <>
-        {issues.map((issue: any, index: any) => (
+export const IssueBlock: FC<IssueBlockProps> = (props) => {
+  const { columnId, issues, handleIssues, display_properties, states, labels, members, priorities } = props;
+
+  return (
+    <>
+      {issues &&
+        issues?.length > 0 &&
+        issues.map((issue: any, index: any) => (
           <div
             key={index}
-            className={`text-sm p-3 shadow-custom-shadow-2xs transition-all bg-custom-background-100 flex items-center flex-wrap gap-3 border-b border-custom-border-200`}
+            className={`text-sm p-3 shadow-custom-shadow-2xs transition-all bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200`}
           >
             {display_properties && display_properties?.key && (
               <div className="flex-shrink-0 text-xs text-custom-text-300">ONE-{issue.sequence_id}</div>
             )}
-            <div className="line-clamp-1 text-sm font-medium text-custom-text-100">{issue.name}</div>
+            <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+              <div className="line-clamp-1 text-sm font-medium text-custom-text-100">{issue.name}</div>
+            </Tooltip>
             <div className="ml-auto flex-shrink-0">
               <KanBanProperties
                 columnId={columnId}
                 issue={issue}
                 handleIssues={handleIssues}
                 display_properties={display_properties}
+                states={states}
+                labels={labels}
+                members={members}
+                priorities={priorities}
               />
             </div>
           </div>
         ))}
-      </>
-    ) : (
-      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
-        No issues are available
-      </div>
-    )}
-  </>
-);
+    </>
+  );
+};

web/components/issues/issue-layouts/list/cycle-root.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface ICycleListLayout {}
 
 export const CycleListLayout: React.FC = observer(() => {
-  const { issueFilter: issueFilterStore, cycleIssue: cycleIssueStore }: RootStore = useMobxStore();
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    cycleIssue: cycleIssueStore,
+  }: RootStore = useMobxStore();
 
   const issues = cycleIssueStore?.getIssues;
 
@@ -22,9 +27,29 @@ export const CycleListLayout: React.FC = observer(() => {
     cycleIssueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });

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

@@ -1,130 +1,256 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 // components
-import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { ListGroupByHeaderRoot } from "./headers/group-by-root";
 import { IssueBlock } from "./block";
 // constants
-import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
-// mobx
-import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
+import { getValueFromObject } from "constants/issue";
 
-export interface IGroupByKanBan {
+export interface IGroupByList {
   issues: any;
   group_by: string | null;
   list: any;
   listKey: string;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  is_list?: boolean;
+  states: any;
+  labels: any;
+  members: any;
+  projects: any;
+  stateGroups: any;
+  priorities: any;
+  estimates: any;
 }
 
-const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
-  ({ issues, group_by, list, listKey, handleIssues, display_properties }) => (
+const GroupByList: React.FC<IGroupByList> = observer((props) => {
+  const {
+    issues,
+    group_by,
+    list,
+    listKey,
+    handleIssues,
+    display_properties,
+    is_list = false,
+    states,
+    labels,
+    members,
+    projects,
+    stateGroups,
+    priorities,
+    estimates,
+  } = props;
+
+  return (
     <div className="relative w-full h-full">
       {list &&
         list.length > 0 &&
         list.map((_list: any) => (
-          <div className={`flex-shrink-0 flex flex-col`}>
-            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2] px-3">
-              <KanBanGroupByHeaderRoot
+          <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
+            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2] px-3 border-b border-custom-border-100">
+              <ListGroupByHeaderRoot
                 column_id={getValueFromObject(_list, listKey) as string}
+                column_value={_list}
                 group_by={group_by}
-                issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
+                issues_count={
+                  is_list ? issues?.length || 0 : issues?.[getValueFromObject(_list, listKey) as string]?.length || 0
+                }
               />
             </div>
             <div className={`w-full h-full relative transition-all`}>
               {issues && (
                 <IssueBlock
                   columnId={getValueFromObject(_list, listKey) as string}
-                  issues={issues[getValueFromObject(_list, listKey) as string]}
+                  issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
                   handleIssues={handleIssues}
                   display_properties={display_properties}
+                  states={states}
+                  labels={labels}
+                  members={members}
+                  priorities={priorities}
                 />
               )}
             </div>
           </div>
         ))}
     </div>
-  )
-);
+  );
+});
 
-export interface IKanBan {
+export interface IList {
   issues: any;
   group_by: string | null;
   handleDragDrop?: (result: any) => void | undefined;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  states: any;
+  labels: any;
+  members: any;
+  projects: any;
+  stateGroups: any;
+  priorities: any;
+  estimates: any;
 }
 
-export const List: React.FC<IKanBan> = observer(({ issues, group_by, handleIssues, display_properties }) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+export const List: React.FC<IList> = observer((props) => {
+  const {
+    issues,
+    group_by,
+    handleIssues,
+    display_properties,
+    states,
+    labels,
+    members,
+    projects,
+    stateGroups,
+    priorities,
+    estimates,
+  } = props;
 
   return (
     <div className="relative w-full h-full">
-      {group_by && group_by === "state" && (
-        <GroupByKanBan
+      {group_by === null && (
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={projectStore?.projectStates}
+          list={[{ id: "null", title: "All Issues" }]}
           listKey={`id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          is_list={true}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
-      {group_by && group_by === "state_detail.group" && (
-        <GroupByKanBan
+      {group_by && group_by === "project" && projects && (
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={ISSUE_STATE_GROUPS}
-          listKey={`key`}
-          handleIssues={handleIssues}
-          display_properties={display_properties}
-        />
-      )}
-
-      {group_by && group_by === "priority" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          list={ISSUE_PRIORITIES}
-          listKey={`key`}
-          handleIssues={handleIssues}
-          display_properties={display_properties}
-        />
-      )}
-
-      {group_by && group_by === "labels" && (
-        <GroupByKanBan
-          issues={issues}
-          group_by={group_by}
-          list={projectStore?.projectLabels}
+          list={projects}
           listKey={`id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
-      {group_by && group_by === "assignees" && (
-        <GroupByKanBan
+      {group_by && group_by === "state" && states && (
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={projectStore?.projectMembers}
-          listKey={`member.id`}
+          list={states}
+          listKey={`id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
 
-      {group_by && group_by === "created_by" && (
-        <GroupByKanBan
+      {group_by && group_by === "state_detail.group" && stateGroups && (
+        <GroupByList
           issues={issues}
           group_by={group_by}
-          list={projectStore?.projectMembers}
+          list={stateGroups}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "priority" && priorities && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={priorities}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "labels" && labels && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={labels}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={members}
           listKey={`member.id`}
           handleIssues={handleIssues}
           display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && members && (
+        <GroupByList
+          issues={issues}
+          group_by={group_by}
+          list={members}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+          states={states}
+          labels={labels}
+          members={members}
+          projects={projects}
+          stateGroups={stateGroups}
+          priorities={priorities}
+          estimates={estimates}
         />
       )}
     </div>

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

@@ -1,23 +1,21 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Avatar } from "components/ui";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface IAssigneesHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
 export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
 
-export const AssigneesHeader: React.FC<IAssigneesHeader> = observer(({ column_id, issues_count }) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
 
-  const assignee = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+  const assignee = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/created-by.tsx

@@ -1,21 +1,19 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./assignee";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface ICreatedByHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
-export const CreatedByHeader: React.FC<ICreatedByHeader> = observer(({ column_id, issues_count }) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
 
-  const createdBy = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+  const createdBy = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/empty-group.tsx

@@ -0,0 +1,15 @@
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+
+export interface IEmptyHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  return <HeaderGroupByCard title={column_value?.title || "All Issues"} count={issues_count} />;
+});

web/components/issues/issue-layouts/list/headers/group-by-card.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // lucide icons
-import { Circle } from "lucide-react";
+import { CircleDashed } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
 
@@ -20,7 +20,7 @@ export const HeaderGroupByCard = observer(({ icon, title, count }: IHeaderGroupB
       }`}
     >
       <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
-        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+        {icon ? icon : <CircleDashed width={14} strokeWidth={2} />}
       </div>
 
       <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>

web/components/issues/issue-layouts/list/headers/group-by-root.tsx

@@ -1,30 +1,52 @@
 // components
+import { EmptyHeader } from "./empty-group";
+import { ProjectHeader } from "./project";
 import { StateHeader } from "./state";
 import { StateGroupHeader } from "./state-group";
 import { AssigneesHeader } from "./assignee";
 import { PriorityHeader } from "./priority";
 import { LabelHeader } from "./label";
-import { CreatedByHeader } from "./created_by";
+import { CreatedByHeader } from "./created-by";
 // mobx
 import { observer } from "mobx-react-lite";
 
-export interface IKanBanGroupByHeaderRoot {
+export interface IListGroupByHeaderRoot {
   column_id: string;
+  column_value: any;
   group_by: string | null;
   issues_count: number;
 }
 
-export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
-  ({ column_id, group_by, issues_count }) => (
+export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
+  const { column_id, column_value, group_by, issues_count } = props;
+
+  return (
     <>
-      {group_by && group_by === "state" && <StateHeader column_id={column_id} issues_count={issues_count} />}
-      {group_by && group_by === "state_detail.group" && (
-        <StateGroupHeader column_id={column_id} issues_count={issues_count} />
+      {!group_by && group_by === null && (
+        <EmptyHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "project" && (
+        <ProjectHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+
+      {group_by && group_by === "state" && (
+        <StateHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "priority" && (
+        <PriorityHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "labels" && (
+        <LabelHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "assignees" && (
+        <AssigneesHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "created_by" && (
+        <CreatedByHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
       )}
-      {group_by && group_by === "priority" && <PriorityHeader column_id={column_id} issues_count={issues_count} />}
-      {group_by && group_by === "labels" && <LabelHeader column_id={column_id} issues_count={issues_count} />}
-      {group_by && group_by === "assignees" && <AssigneesHeader column_id={column_id} issues_count={issues_count} />}
-      {group_by && group_by === "created_by" && <CreatedByHeader column_id={column_id} issues_count={issues_count} />}
     </>
-  )
-);
+  );
+});

web/components/issues/issue-layouts/list/headers/label.tsx

@@ -1,13 +1,11 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface ILabelHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
@@ -15,10 +13,20 @@ const Icon = ({ color }: any) => (
   <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
 );
 
-export const LabelHeader: React.FC<ILabelHeader> = observer(({ column_id, issues_count }) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+export const LabelHeader: FC<ILabelHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
 
-  const label = (column_id && projectStore?.getProjectLabelById(column_id)) ?? null;
+  const label = column_value ?? null;
 
-  return <>{label && <HeaderGroupByCard icon={<Icon />} title={label?.name || ""} count={issues_count} />}</>;
+  return (
+    <>
+      {column_value && (
+        <HeaderGroupByCard
+          icon={<Icon color={label?.color || null} />}
+          title={column_value?.name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
 });

web/components/issues/issue-layouts/list/headers/priority.tsx

@@ -1,14 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // lucide icons
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
-// constants
-import { issuePriorityByKey } from "constants/issue";
 
 export interface IPriorityHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
@@ -38,8 +37,10 @@ const Icon = ({ priority }: any) => (
   </div>
 );
 
-export const PriorityHeader: React.FC<IPriorityHeader> = observer(({ column_id, issues_count }) => {
-  const priority = column_id && issuePriorityByKey(column_id);
+export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const priority = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/project.tsx

@@ -0,0 +1,28 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// emoji helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IProjectHeader {
+  column_id: string;
+  column_value: any;
+  issues_count: number;
+}
+
+const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
+
+export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const project = column_value ?? null;
+
+  return (
+    <>
+      {project && (
+        <HeaderGroupByCard icon={<Icon emoji={project?.emoji} />} title={project?.name || ""} count={issues_count} />
+      )}
+    </>
+  );
+});

web/components/issues/issue-layouts/list/headers/state-group.tsx

@@ -1,13 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
+// ui
 import { StateGroupIcon } from "@plane/ui";
-// constants
-import { issueStateGroupByKey } from "constants/issue";
 
 export interface IStateGroupHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
@@ -17,8 +17,10 @@ export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) =>
   </div>
 );
 
-export const StateGroupHeader: React.FC<IStateGroupHeader> = observer(({ column_id, issues_count }) => {
-  const stateGroup = column_id && issueStateGroupByKey(column_id);
+export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
+
+  const stateGroup = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/headers/state.tsx

@@ -1,21 +1,19 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./state-group";
-// store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export interface IStateHeader {
   column_id: string;
+  column_value: any;
   issues_count: number;
 }
 
-export const StateHeader: React.FC<IStateHeader> = observer(({ column_id, issues_count }) => {
-  const { project: projectStore }: RootStore = useMobxStore();
+export const StateHeader: FC<IStateHeader> = observer((props) => {
+  const { column_id, column_value, issues_count } = props;
 
-  const state = (column_id && projectStore?.getProjectStateById(column_id)) ?? null;
+  const state = column_value ?? null;
 
   return (
     <>

web/components/issues/issue-layouts/list/module-root.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IModuleListLayout {}
 
 export const ModuleListLayout: React.FC = observer(() => {
-  const { issueFilter: issueFilterStore, moduleIssue: moduleIssueStore }: RootStore = useMobxStore();
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+  }: RootStore = useMobxStore();
 
   const issues = moduleIssueStore?.getIssues;
 
@@ -22,9 +27,29 @@ export const ModuleListLayout: React.FC = observer(() => {
     moduleIssueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });

web/components/issues/issue-layouts/list/profile-issues-root.tsx

@@ -0,0 +1,56 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
+
+export interface IProfileIssuesListLayout {}
+
+export const ProfileIssuesListLayout: FC = observer(() => {
+  const {
+    workspace: workspaceStore,
+    project: projectStore,
+    profileIssueFilters: profileIssueFiltersStore,
+    profileIssues: profileIssuesIssueStore,
+  }: RootStore = useMobxStore();
+
+  const issues = profileIssuesIssueStore?.getIssues;
+
+  const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = profileIssueFiltersStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    profileIssuesIssueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = workspaceStore.workspaceLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.workspaceProjects || null;
+  const estimates = null;
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
+    </div>
+  );
+});

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

@@ -1,6 +1,5 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
-// lucide icons
 import { Layers, Link, Paperclip } from "lucide-react";
 // components
 import { IssuePropertyState } from "../properties/state";
@@ -8,7 +7,8 @@ import { IssuePropertyPriority } from "../properties/priority";
 import { IssuePropertyLabels } from "../properties/labels";
 import { IssuePropertyAssignee } from "../properties/assignee";
 import { IssuePropertyEstimates } from "../properties/estimates";
-import { IssuePropertyStartDate } from "../properties/date";
+import { IssuePropertyDate } from "../properties/date";
+// ui
 import { Tooltip } from "@plane/ui";
 
 export interface IKanBanProperties {
@@ -16,151 +16,159 @@ export interface IKanBanProperties {
   issue: any;
   handleIssues?: (group_by: string | null, issue: any) => void;
   display_properties: any;
+  states: any;
+  labels: any;
+  members: any;
+  priorities: any;
 }
 
-export const KanBanProperties: React.FC<IKanBanProperties> = observer(
-  ({ columnId: group_id, issue, handleIssues, display_properties }) => {
-    const handleState = (id: string) => {
-      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
-    };
+export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
+  const { columnId: group_id, issue, handleIssues, display_properties, states, labels, members, priorities } = props;
 
-    const handlePriority = (id: string) => {
-      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
-    };
+  const handleState = (id: string) => {
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
+  };
 
-    const handleLabel = (ids: string[]) => {
-      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
-    };
+  const handlePriority = (id: string) => {
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
+  };
 
-    const handleAssignee = (ids: string[]) => {
-      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
-    };
+  const handleLabel = (ids: string[]) => {
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
+  };
 
-    const handleStartDate = (date: string) => {
-      if (handleIssues)
-        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
-    };
+  const handleAssignee = (ids: string[]) => {
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
+  };
 
-    const handleTargetDate = (date: string) => {
-      if (handleIssues)
-        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
-    };
+  const handleStartDate = (date: string) => {
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
+  };
 
-    const handleEstimate = (id: string) => {
-      if (handleIssues)
-        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id });
-    };
+  const handleTargetDate = (date: string) => {
+    if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
+  };
 
-    return (
-      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
-        {/* basic properties */}
-        {/* state */}
-        {display_properties && display_properties?.state && (
-          <IssuePropertyState
-            value={issue?.state || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handleState(id)}
-            disabled={false}
-          />
-        )}
+  const handleEstimate = (id: string) => {
+    if (handleIssues)
+      handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id });
+  };
 
-        {/* priority */}
-        {display_properties && display_properties?.priority && (
-          <IssuePropertyPriority
-            value={issue?.priority || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handlePriority(id)}
-            disabled={false}
-          />
-        )}
+  return (
+    <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+      {/* basic properties */}
+      {/* state */}
+      {display_properties && display_properties?.state && states && (
+        <IssuePropertyState
+          value={issue?.state || null}
+          dropdownArrow={false}
+          onChange={(id: string) => handleState(id)}
+          disabled={false}
+          list={states}
+        />
+      )}
 
-        {/* label */}
-        {display_properties && display_properties?.labels && (
-          <IssuePropertyLabels
-            value={issue?.labels || null}
-            dropdownArrow={false}
-            onChange={(ids: string[]) => handleLabel(ids)}
-            disabled={false}
-          />
-        )}
+      {/* priority */}
+      {display_properties && display_properties?.priority && priorities && (
+        <IssuePropertyPriority
+          value={issue?.priority || null}
+          dropdownArrow={false}
+          onChange={(id: string) => handlePriority(id)}
+          disabled={false}
+          list={priorities}
+        />
+      )}
 
-        {/* assignee */}
-        {display_properties && display_properties?.assignee && (
-          <IssuePropertyAssignee
-            value={issue?.assignees || null}
-            dropdownArrow={false}
-            onChange={(ids: string[]) => handleAssignee(ids)}
-            disabled={false}
-          />
-        )}
+      {/* label */}
+      {display_properties && display_properties?.labels && labels && (
+        <IssuePropertyLabels
+          value={issue?.labels || null}
+          dropdownArrow={false}
+          onChange={(ids: string[]) => handleLabel(ids)}
+          disabled={false}
+          list={labels}
+        />
+      )}
 
-        {/* start date */}
-        {display_properties && display_properties?.start_date && (
-          <IssuePropertyStartDate
-            value={issue?.start_date || null}
-            onChange={(date: string) => handleStartDate(date)}
-            disabled={false}
-          />
-        )}
+      {/* assignee */}
+      {display_properties && display_properties?.assignee && members && (
+        <IssuePropertyAssignee
+          value={issue?.assignees || null}
+          dropdownArrow={false}
+          onChange={(ids: string[]) => handleAssignee(ids)}
+          disabled={false}
+          list={members}
+        />
+      )}
 
-        {/* target/due date */}
-        {display_properties && display_properties?.due_date && (
-          <IssuePropertyStartDate
-            value={issue?.target_date || null}
-            onChange={(date: string) => handleTargetDate(date)}
-            disabled={false}
-          />
-        )}
+      {/* start date */}
+      {display_properties && display_properties?.start_date && (
+        <IssuePropertyDate
+          value={issue?.start_date || null}
+          onChange={(date: string) => handleStartDate(date)}
+          disabled={false}
+          placeHolder={`Start date`}
+        />
+      )}
 
-        {/* estimates */}
-        {display_properties && display_properties?.estimate && (
-          <IssuePropertyEstimates
-            value={issue?.estimate_point?.toString() || null}
-            dropdownArrow={false}
-            onChange={(id: string) => handleEstimate(id)}
-            disabled={false}
-            workspaceSlug={issue?.workspace_detail?.slug || null}
-            projectId={issue?.project_detail?.id || null}
-          />
-        )}
+      {/* target/due date */}
+      {display_properties && display_properties?.due_date && (
+        <IssuePropertyDate
+          value={issue?.target_date || null}
+          onChange={(date: string) => handleTargetDate(date)}
+          disabled={false}
+          placeHolder={`Target date`}
+        />
+      )}
 
-        {/* extra render properties */}
-        {/* sub-issues */}
-        {display_properties && display_properties?.sub_issue_count && (
-          <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-                <Layers width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+      {/* estimates */}
+      {display_properties && display_properties?.estimate && (
+        <IssuePropertyEstimates
+          value={issue?.estimate_point?.toString() || null}
+          dropdownArrow={false}
+          onChange={(id: string) => handleEstimate(id)}
+          disabled={false}
+          workspaceSlug={issue?.workspace_detail?.slug || null}
+          projectId={issue?.project_detail?.id || null}
+        />
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {display_properties && display_properties?.sub_issue_count && (
+        <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+            <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+              <Layers width={10} strokeWidth={2} />
             </div>
-          </Tooltip>
-        )}
+            <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+          </div>
+        </Tooltip>
+      )}
 
-        {/* attachments */}
-        {display_properties && display_properties?.attachment_count && (
-          <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
-                <Paperclip width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+      {/* attachments */}
+      {display_properties && display_properties?.attachment_count && (
+        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+            <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+              <Paperclip width={10} strokeWidth={2} />
             </div>
-          </Tooltip>
-        )}
+            <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      )}
 
-        {/* link */}
-        {display_properties && display_properties?.link && (
-          <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
-              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
-                <Link width={10} strokeWidth={2} />
-              </div>
-              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+      {/* link */}
+      {display_properties && display_properties?.link && (
+        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+          <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+            <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+              <Link width={10} strokeWidth={2} />
             </div>
-          </Tooltip>
-        )}
-      </div>
-    );
-  }
-);
+            <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+});

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

@@ -1,16 +1,16 @@
-import React from "react";
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
-// store
+// hooks
 import { useMobxStore } from "lib/mobx/store-provider";
+// types
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
-export interface IListLayout {}
-
-export const ListLayout: React.FC = observer(() => {
-  const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+export const ListLayout: FC = observer(() => {
+  const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
 
   const issues = issueStore?.getIssues;
 
@@ -22,9 +22,29 @@ export const ListLayout: React.FC = observer(() => {
     issueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });

web/components/issues/issue-layouts/list/view-root.tsx

@@ -1,16 +1,17 @@
 import React from "react";
-// mobx
 import { observer } from "mobx-react-lite";
 // components
 import { List } from "./default";
 // store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
 
 export interface IViewListLayout {}
 
 export const ViewListLayout: React.FC = observer(() => {
-  const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+  const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
 
   const issues = issueStore?.getIssues;
 
@@ -22,9 +23,29 @@ export const ViewListLayout: React.FC = observer(() => {
     issueStore.updateIssueStructure(group_by, null, issue);
   };
 
+  const states = projectStore?.projectStates || null;
+  const priorities = ISSUE_PRIORITIES || null;
+  const labels = projectStore?.projectLabels || null;
+  const members = projectStore?.projectMembers || null;
+  const stateGroups = ISSUE_STATE_GROUPS || null;
+  const projects = projectStore?.projectStates || null;
+  const estimates = null;
+
   return (
     <div className={`relative w-full h-full bg-custom-background-90`}>
-      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+      <List
+        issues={issues}
+        group_by={group_by}
+        handleIssues={updateIssue}
+        display_properties={display_properties}
+        states={states}
+        stateGroups={stateGroups}
+        priorities={priorities}
+        labels={labels}
+        members={members}
+        projects={projects}
+        estimates={estimates}
+      />
     </div>
   );
 });