chore: add issue option added in header group (#2592)

* chore: add issue option added in list view group header

* chore: add issue option added in kanban view group header

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

@@ -55,6 +55,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ assignees: [assignee?.member?.id] }}
           />
         ))}
     </>

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

@@ -52,6 +52,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ created_by: createdBy?.member?.id }}
           />
         ))}
     </>

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

@@ -1,8 +1,22 @@
 import React, { FC } from "react";
+import { useRouter } from "next/router";
+
+// services
+import { ModuleService } from "services/module.service";
+import { IssueService } from "services/issue";
+// components
+import { CustomMenu } from "@plane/ui";
+import { CreateUpdateIssueModal } from "components/issues/modal";
+import { ExistingIssuesListModal } from "components/core";
 // lucide icons
-import { Minimize2, Maximize2, Circle } from "lucide-react";
+import { Minimize2, Maximize2, Circle, Plus } from "lucide-react";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
 // mobx
 import { observer } from "mobx-react-lite";
+// types
+import { IIssue, ISearchIssueResponse } from "types";
 
 interface IHeaderGroupByCard {
   sub_group_by: string | null;
@@ -13,43 +27,134 @@ interface IHeaderGroupByCard {
   count: number;
   kanBanToggle: any;
   handleKanBanToggle: any;
+  issuePayload: Partial<IIssue>;
 }
 
+const moduleService = new ModuleService();
+const issueService = new IssueService();
+
 export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
-  const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle } = props;
+  const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle, issuePayload } = props;
   const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
 
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
+  const renderExistingIssueModal = moduleId || cycleId;
+  const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
   return (
-    <div
+    <>
-      className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+      <CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
-        verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+      {renderExistingIssueModal && (
-      }`}
+        <ExistingIssuesListModal
-    >
+          isOpen={openExistingIssueListModal}
-      <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+          handleClose={() => setOpenExistingIssueListModal(false)}
-        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+          searchParams={ExistingIssuesListModalPayload}
-      </div>
+          handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
-
+        />
-      <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
-        <div className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}>
-          {title}
-        </div>
-        <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
-          {count || 0}
-        </div>
-      </div>
-
-      {sub_group_by === null && (
-        <div
-          className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
-          onClick={() => handleKanBanToggle("groupByHeaderMinMax", column_id)}
-        >
-          {verticalAlignPosition ? <Maximize2 width={14} strokeWidth={2} /> : <Minimize2 width={14} strokeWidth={2} />}
-        </div>
       )}
+      <div
+        className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+          verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+        }`}
+      >
+        <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} />}
+        </div>
 
-      {/* <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+        <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
-          <Plus width={14} strokeWidth={2} />
+          <div
-        </div> */}
+            className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
-    </div>
+          >
+            {title}
+          </div>
+          <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+            {count || 0}
+          </div>
+        </div>
+
+        {sub_group_by === null && (
+          <div
+            className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            onClick={() => handleKanBanToggle("groupByHeaderMinMax", column_id)}
+          >
+            {verticalAlignPosition ? (
+              <Maximize2 width={14} strokeWidth={2} />
+            ) : (
+              <Minimize2 width={14} strokeWidth={2} />
+            )}
+          </div>
+        )}
+
+        {renderExistingIssueModal ? (
+          <CustomMenu
+            width="auto"
+            customButton={
+              <span className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                <Plus height={14} width={14} strokeWidth={2} />
+              </span>
+            }
+          >
+            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <span className="flex items-center justify-start gap-2">Create issue</span>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        ) : (
+          <div
+            className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            onClick={() => setIsOpen(true)}
+          >
+            <Plus width={14} strokeWidth={2} />
+          </div>
+        )}
+      </div>
+    </>
   );
 });

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

@@ -55,6 +55,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ labels: [label?.id] }}
           />
         ))}
     </>

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

@@ -78,6 +78,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ priority: priority?.key }}
           />
         ))}
     </>

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

@@ -55,6 +55,7 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ project: project?.id }}
           />
         ))}
     </>

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

@@ -58,6 +58,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{}}
           />
         ))}
     </>

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

@@ -52,6 +52,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
             count={issues_count}
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
+            issuePayload={{ state: state?.id }}
           />
         ))}
     </>

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

@@ -21,7 +21,12 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
   return (
     <>
       {assignee && (
-        <HeaderGroupByCard icon={<Icon user={assignee} />} title={assignee?.display_name || ""} count={issues_count} />
+        <HeaderGroupByCard
+          icon={<Icon user={assignee} />}
+          title={assignee?.display_name || ""}
+          count={issues_count}
+          issuePayload={{ assignees: [assignee?.member?.id] }}
+        />
       )}
     </>
   );

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

@@ -22,6 +22,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
           icon={<Icon user={createdBy} />}
           title={createdBy?.display_name || ""}
           count={issues_count}
+          issuePayload={{ created_by: createdBy?.member?.id }}
         />
       )}
     </>

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

@@ -11,5 +11,5 @@ export interface IEmptyHeader {
 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} />;
+  return <HeaderGroupByCard title={column_value?.title || "All Issues"} count={issues_count} issuePayload={{}} />;
 });

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

@@ -1,40 +1,140 @@
 import React from "react";
+import { useRouter } from "next/router";
+
+// services
+import { ModuleService } from "services/module.service";
+import { IssueService } from "services/issue";
 // lucide icons
-import { CircleDashed } from "lucide-react";
+import { CircleDashed, Plus } from "lucide-react";
+// components
+import { CreateUpdateIssueModal } from "components/issues/modal";
+import { ExistingIssuesListModal } from "components/core";
+import { CustomMenu } from "@plane/ui";
+// hooks
+import useUser from "hooks/use-user";
+import useToast from "hooks/use-toast";
 // mobx
 import { observer } from "mobx-react-lite";
+// types
+import { IIssue, ISearchIssueResponse } from "types";
 
 interface IHeaderGroupByCard {
   icon?: React.ReactNode;
   title: string;
   count: number;
+  issuePayload: Partial<IIssue>;
 }
 
-export const HeaderGroupByCard = observer(({ icon, title, count }: IHeaderGroupByCard) => {
+const moduleService = new ModuleService();
+const issueService = new IssueService();
+
+export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }: IHeaderGroupByCard) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+
+  const { user } = useUser();
+
+  const { setToastAlert } = useToast();
+
   const verticalAlignPosition = false;
 
+  const renderExistingIssueModal = moduleId || cycleId;
+  const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      issues: data.map((i) => i.id),
+    };
+
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Selected issues could not be added to the cycle. Please try again.",
+        });
+      });
+  };
+
   return (
-    <div
+    <>
-      className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+      <CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
-        verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+      {renderExistingIssueModal && (
-      }`}
+        <ExistingIssuesListModal
-    >
+          isOpen={openExistingIssueListModal}
-      <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+          handleClose={() => setOpenExistingIssueListModal(false)}
-        {icon ? icon : <CircleDashed width={14} strokeWidth={2} />}
+          searchParams={ExistingIssuesListModalPayload}
-      </div>
+          handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
-
+        />
-      <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
+      )}
-        <div className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}>
+      <div
-          {title}
+        className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+          verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+        }`}
+      >
+        <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+          {icon ? icon : <CircleDashed width={14} strokeWidth={2} />}
         </div>
-        <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
-          {count || 0}
-        </div>
-      </div>
 
-      {/* <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+        <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
-          <Plus width={14} strokeWidth={2} />
+          <div
-        </div> */}
+            className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}
-    </div>
+          >
+            {title}
+          </div>
+          <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+            {count || 0}
+          </div>
+        </div>
+
+        {renderExistingIssueModal ? (
+          <CustomMenu
+            width="auto"
+            customButton={
+              <span className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+                <Plus width={14} strokeWidth={2} />
+              </span>
+            }
+          >
+            <CustomMenu.MenuItem onClick={() => setIsOpen(true)}>
+              <span className="flex items-center justify-start gap-2">Create issue</span>
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem onClick={() => setOpenExistingIssueListModal(true)}>
+              <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        ) : (
+          <div
+            className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+            onClick={() => setIsOpen(true)}
+          >
+            <Plus width={14} strokeWidth={2} />
+          </div>
+        )}
+      </div>
+    </>
   );
 });

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

@@ -25,6 +25,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
           icon={<Icon color={label?.color || null} />}
           title={column_value?.name || ""}
           count={issues_count}
+          issuePayload={{ labels: [label.id] }}
         />
       )}
     </>

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

@@ -48,6 +48,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
           icon={<Icon priority={priority?.key} />}
           title={priority?.title || ""}
           count={issues_count}
+          issuePayload={{ priority: priority?.key }}
         />
       )}
     </>

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

@@ -21,7 +21,12 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
   return (
     <>
       {project && (
-        <HeaderGroupByCard icon={<Icon emoji={project?.emoji} />} title={project?.name || ""} count={issues_count} />
+        <HeaderGroupByCard
+          icon={<Icon emoji={project?.emoji} />}
+          title={project?.name || ""}
+          count={issues_count}
+          issuePayload={{ project: project?.id ?? "" }}
+        />
       )}
     </>
   );

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

@@ -29,6 +29,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
           icon={<Icon stateGroup={stateGroup?.key} />}
           title={stateGroup?.key || ""}
           count={issues_count}
+          issuePayload={{}}
         />
       )}
     </>

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

@@ -22,6 +22,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
           icon={<Icon stateGroup={state?.group} color={state?.color} />}
           title={state?.name || ""}
           count={issues_count}
+          issuePayload={{ state: state?.id }}
         />
       )}
     </>