chore: Issue poprties options in kanban are passing through props (#2490)

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

@@ -53,6 +53,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
                 <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2]">
                   <KanBanGroupByHeaderRoot
                     column_id={getValueFromObject(_list, listKey) as string}
+                    column_value={_list}
                     sub_group_by={sub_group_by}
                     group_by={group_by}
                     issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}

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

@@ -1,15 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-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;
   sub_group_by: string | null;
   group_by: string | null;
   header_type: "group_by" | "sub_group_by";
@@ -20,11 +18,19 @@ export interface IAssigneesHeader {
 
 export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
 
-export const AssigneesHeader: React.FC<IAssigneesHeader> = observer(
+export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
-  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+  const {
-    const { project: projectStore }: RootStore = useMobxStore();
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
 
-    const assignee = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+  const assignee = column_value ?? null;
 
   return (
     <>
@@ -52,5 +58,4 @@ export const AssigneesHeader: React.FC<IAssigneesHeader> = observer(
         ))}
     </>
   );
-  }
+});
-);

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

@@ -1,15 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-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;
   sub_group_by: string | null;
   group_by: string | null;
   header_type: "group_by" | "sub_group_by";
@@ -18,11 +16,19 @@ export interface ICreatedByHeader {
   handleKanBanToggle: any;
 }
 
-export const CreatedByHeader: React.FC<ICreatedByHeader> = observer(
+export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
-  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+  const {
-    const { project: projectStore }: RootStore = useMobxStore();
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
 
-    const createdBy = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+  const createdBy = column_value ?? null;
 
   return (
     <>
@@ -50,5 +56,4 @@ export const CreatedByHeader: React.FC<ICreatedByHeader> = observer(
         ))}
     </>
   );
-  }
+});
-);

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

@@ -1,4 +1,5 @@
 // components
+import { ProjectHeader } from "./project";
 import { StateHeader } from "./state";
 import { StateGroupHeader } from "./state-group";
 import { AssigneesHeader } from "./assignee";
@@ -10,6 +11,7 @@ import { observer } from "mobx-react-lite";
 
 export interface IKanBanGroupByHeaderRoot {
   column_id: string;
+  column_value: any;
   sub_group_by: string | null;
   group_by: string | null;
   issues_count: number;
@@ -18,11 +20,25 @@ export interface IKanBanGroupByHeaderRoot {
 }
 
 export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
-  ({ column_id, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
+  ({ column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
     <>
+      {group_by && group_by === "project" && (
+        <ProjectHeader
+          column_id={column_id}
+          column_value={column_value}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+
       {group_by && group_by === "state" && (
         <StateHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`group_by`}
@@ -34,6 +50,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
       {group_by && group_by === "state_detail.group" && (
         <StateGroupHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`group_by`}
@@ -45,6 +62,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
       {group_by && group_by === "priority" && (
         <PriorityHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`group_by`}
@@ -56,6 +74,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
       {group_by && group_by === "labels" && (
         <LabelHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`group_by`}
@@ -67,6 +86,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
       {group_by && group_by === "assignees" && (
         <AssigneesHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`group_by`}
@@ -78,6 +98,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
       {group_by && group_by === "created_by" && (
         <CreatedByHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`group_by`}

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

@@ -1,14 +1,12 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-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;
   sub_group_by: string | null;
   group_by: string | null;
   header_type: "group_by" | "sub_group_by";
@@ -21,11 +19,19 @@ const Icon = ({ color }: any) => (
   <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
 );
 
-export const LabelHeader: React.FC<ILabelHeader> = observer(
+export const LabelHeader: FC<ILabelHeader> = observer((props) => {
-  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+  const {
-    const { project: projectStore }: RootStore = useMobxStore();
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
 
-    const label = (column_id && projectStore?.getProjectLabelById(column_id)) ?? null;
+  const label = column_value ?? null;
 
   return (
     <>
@@ -53,5 +59,4 @@ export const LabelHeader: React.FC<ILabelHeader> = observer(
         ))}
     </>
   );
-  }
+});
-);

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

@@ -1,13 +1,13 @@
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
-// constants
-import { issuePriorityByKey } from "constants/issue";
 
 export interface IPriorityHeader {
   column_id: string;
+  column_value: any;
   sub_group_by: string | null;
   group_by: string | null;
   header_type: "group_by" | "sub_group_by";
@@ -42,10 +42,19 @@ const Icon = ({ priority }: any) => (
   </div>
 );
 
-export const PriorityHeader: React.FC<IPriorityHeader> = observer((props) => {
+export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
-  const { column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle } = props;
+  const {
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
 
-  const priority = column_id && issuePriorityByKey(column_id);
+  const priority = column_value || null;
 
   return (
     <>

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

@@ -0,0 +1,62 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+// emoji helper
+import { renderEmoji } from "helpers/emoji.helper";
+
+export interface IProjectHeader {
+  column_id: string;
+  column_value: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+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,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
+
+  const project = column_value ?? null;
+
+  return (
+    <>
+      {project &&
+        (sub_group_by && header_type === "sub_group_by" ? (
+          <HeaderSubGroupByCard
+            column_id={column_id}
+            icon={<Icon emoji={project?.emoji} />}
+            title={project?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <HeaderGroupByCard
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            column_id={column_id}
+            icon={<Icon emoji={project?.emoji} />}
+            title={project?.name || ""}
+            count={issues_count}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ))}
+    </>
+  );
+});

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

@@ -1,14 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { StateGroupIcon } from "@plane/ui";
-// constants
-import { issueStateGroupByKey } from "constants/issue";
 
 export interface IStateGroupHeader {
   column_id: string;
+  column_value: any;
   sub_group_by: string | null;
   group_by: string | null;
   header_type: "group_by" | "sub_group_by";
@@ -23,11 +22,19 @@ export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) =>
   </div>
 );
 
-export const StateGroupHeader: React.FC<IStateGroupHeader> = observer(
+export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
-  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+  const {
-    const stateGroup = column_id && issueStateGroupByKey(column_id);
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
 
-    console.log("stateGroup", stateGroup);
+  const stateGroup = column_value || null;
 
   return (
     <>
@@ -55,5 +62,4 @@ export const StateGroupHeader: React.FC<IStateGroupHeader> = observer(
         ))}
     </>
   );
-  }
+});
-);

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

@@ -1,15 +1,13 @@
-// mobx
+import { FC } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-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;
   sub_group_by: string | null;
   group_by: string | null;
   header_type: "group_by" | "sub_group_by";
@@ -18,11 +16,19 @@ export interface IStateHeader {
   handleKanBanToggle: any;
 }
 
-export const StateHeader: React.FC<IStateHeader> = observer(
+export const StateHeader: FC<IStateHeader> = observer((props) => {
-  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+  const {
-    const { project: projectStore }: RootStore = useMobxStore();
+    column_id,
+    column_value,
+    sub_group_by,
+    group_by,
+    header_type,
+    issues_count,
+    kanBanToggle,
+    handleKanBanToggle,
+  } = props;
 
-    const state = (column_id && projectStore?.getProjectStateById(column_id)) ?? null;
+  const state = column_value ?? null;
 
   return (
     <>
@@ -50,5 +56,4 @@ export const StateHeader: React.FC<IStateHeader> = observer(
         ))}
     </>
   );
-  }
+});
-);

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

@@ -10,6 +10,7 @@ import { CreatedByHeader } from "./created_by";
 
 export interface IKanBanSubGroupByHeaderRoot {
   column_id: string;
+  column_value: any;
   sub_group_by: string | null;
   group_by: string | null;
   issues_count: number;
@@ -17,12 +18,15 @@ export interface IKanBanSubGroupByHeaderRoot {
   handleKanBanToggle: any;
 }
 
-export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer(
+export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer((props) => {
-  ({ column_id, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
+  const { column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle } = props;
+
+  return (
     <>
       {sub_group_by && sub_group_by === "state" && (
         <StateHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`sub_group_by`}
@@ -34,6 +38,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
       {sub_group_by && sub_group_by === "state_detail.group" && (
         <StateGroupHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`sub_group_by`}
@@ -45,6 +50,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
       {sub_group_by && sub_group_by === "priority" && (
         <PriorityHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`sub_group_by`}
@@ -56,6 +62,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
       {sub_group_by && sub_group_by === "labels" && (
         <LabelHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`sub_group_by`}
@@ -67,6 +74,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
       {sub_group_by && sub_group_by === "assignees" && (
         <AssigneesHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`sub_group_by`}
@@ -78,6 +86,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
       {sub_group_by && sub_group_by === "created_by" && (
         <CreatedByHeader
           column_id={column_id}
+          column_value={column_value}
           sub_group_by={sub_group_by}
           group_by={group_by}
           header_type={`sub_group_by`}
@@ -87,5 +96,5 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
         />
       )}
     </>
-  )
+  );
-);
+});

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

@@ -46,6 +46,7 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
           <div className="flex-shrink-0 flex flex-col w-[340px]">
             <KanBanGroupByHeaderRoot
               column_id={getValueFromObject(_list, listKey) as string}
+              column_value={_list}
               sub_group_by={sub_group_by}
               group_by={group_by}
               issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
@@ -111,6 +112,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
               <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
                 <KanBanSubGroupByHeaderRoot
                   column_id={getValueFromObject(_list, listKey) as string}
+                  column_value={_list}
                   sub_group_by={sub_group_by}
                   group_by={group_by}
                   issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}