add functionality for addition of existing issues to modules and cycles (#2913)

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -28,7 +28,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
 
   const {
-    cycleIssue: cycleIssueStore,
+    cycleIssues: cycleIssueStore,
     commandPalette: commandPaletteStore,
     trackEvent: { setTrackElement },
   } = useMobxStore();
@@ -40,9 +40,7 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
 
     const issueIds = data.map((i) => i.id);
 
-    await cycleIssueStore
+    await cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), cycleId.toString(), issueIds).catch(() => {
-      .addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
-      .catch(() => {
       setToastAlert({
         type: "error",
         title: "Error!",

web/components/issues/issue-layouts/empty-states/module.tsx

@@ -22,7 +22,11 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
   // states
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
 
-  const { moduleIssue: moduleIssueStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
+  const {
+    moduleIssues: moduleIssueStore,
+    commandPalette: commandPaletteStore,
+    trackEvent: { setTrackElement },
+  } = useMobxStore();
 
   const { setToastAlert } = useToast();
 
@@ -31,9 +35,7 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
 
     const issueIds = data.map((i) => i.id);
 
-    await moduleIssueStore
+    await moduleIssueStore.addIssueToModule(workspaceSlug.toString(), moduleId.toString(), issueIds).catch(() =>
-      .addIssueToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds)
-      .catch(() =>
       setToastAlert({
         type: "error",
         title: "Error!",
@@ -60,8 +62,8 @@ export const ModuleEmptyState: React.FC<Props> = observer((props) => {
             icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
             onClick: () => {
               setTrackElement("MODULE_EMPTY_STATE");
-              commandPaletteStore.toggleCreateIssueModal(true)
+              commandPaletteStore.toggleCreateIssueModal(true);
-            }
+            },
           }}
           secondaryButton={
             <Button

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -54,6 +54,7 @@ export interface IBaseKanBanLayout {
   showLoader?: boolean;
   viewId?: string;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
@@ -66,6 +67,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
     showLoader,
     viewId,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const {
@@ -186,6 +188,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               disableIssueCreation={!enableIssueCreation}
               isReadOnly={!enableInlineEditing}
               currentStore={currentStore}
+              addIssuesToView={addIssuesToView}
             />
           ) : (
             <KanBanSwimLanes
@@ -226,6 +229,11 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               enableQuickIssueCreate={enableQuickAdd}
               isReadOnly={!enableInlineEditing}
               currentStore={currentStore}
+              addIssuesToView={(issues) => {
+                console.log("kanban existingIds", issues);
+
+                return Promise.resolve({} as IIssue);
+              }}
             />
           )}
         </DragDropContext>

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

@@ -43,6 +43,7 @@ export interface IGroupByKanBan {
   viewId?: string;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
   isReadOnly: boolean;
 }
 
@@ -70,6 +71,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
     disableIssueCreation,
     isReadOnly,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const verticalAlignPosition = (_list: any) =>
@@ -95,6 +97,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
                   handleKanBanToggle={handleKanBanToggle}
                   disableIssueCreation={disableIssueCreation}
                   currentStore={currentStore}
+                  addIssuesToView={addIssuesToView}
                 />
               </div>
             )}
@@ -201,6 +204,7 @@ export interface IKanBan {
   viewId?: string;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
   isReadOnly: boolean;
 }
 
@@ -231,6 +235,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     disableIssueCreation,
     isReadOnly,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
@@ -262,6 +267,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           isReadOnly={isReadOnly}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -290,6 +296,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           isReadOnly={isReadOnly}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -318,6 +325,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           isReadOnly={isReadOnly}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -346,6 +354,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           isReadOnly={isReadOnly}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -374,6 +383,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           isReadOnly={isReadOnly}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -402,6 +412,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           isReadOnly={isReadOnly}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -430,6 +441,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           disableIssueCreation={disableIssueCreation}
           isReadOnly={isReadOnly}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </div>

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

@@ -6,6 +6,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // ui
 import { Avatar } from "@plane/ui";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IAssigneesHeader {
   column_id: string;
@@ -18,6 +19,7 @@ export interface IAssigneesHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
@@ -34,6 +36,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const assignee = column_value ?? null;
@@ -63,6 +66,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
             issuePayload={{ assignees: [assignee?.id] }}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         ))}
     </>

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

@@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { Icon } from "./assignee";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface ICreatedByHeader {
   column_id: string;
@@ -17,6 +18,7 @@ export interface ICreatedByHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
@@ -31,6 +33,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const createdBy = column_value ?? null;
@@ -60,6 +63,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
             issuePayload={{ created_by: createdBy?.id }}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         ))}
     </>

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

@@ -29,11 +29,9 @@ interface IHeaderGroupByCard {
   issuePayload: Partial<IIssue>;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
-const moduleService = new ModuleService();
-const issueService = new IssueService();
-
 export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
   const {
     sub_group_by,
@@ -46,6 +44,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
     issuePayload,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
   const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
 
@@ -60,34 +59,13 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
   const renderExistingIssueModal = moduleId || cycleId;
   const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
 
-  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+  const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId) return;
 
-    const payload = {
+    const issues = data.map((i) => i.id);
-      issues: data.map((i) => i.id),
-    };
 
-    await moduleService
+    addIssuesToView &&
-      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload)
+      addIssuesToView(issues)?.catch(() => {
-      .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)
-      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -109,7 +87,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
           isOpen={openExistingIssueListModal}
           handleClose={() => setOpenExistingIssueListModal(false)}
           searchParams={ExistingIssuesListModalPayload}
-          handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+          handleOnSubmit={handleAddIssuesToView}
         />
       )}
       <div

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

@@ -9,6 +9,7 @@ import { CreatedByHeader } from "./created_by";
 // mobx
 import { observer } from "mobx-react-lite";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IKanBanGroupByHeaderRoot {
   column_id: string;
@@ -20,6 +21,7 @@ export interface IKanBanGroupByHeaderRoot {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
@@ -33,6 +35,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
     disableIssueCreation,
     handleKanBanToggle,
     currentStore,
+    addIssuesToView,
   }) => (
     <>
       {group_by && group_by === "project" && (
@@ -47,6 +50,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -62,6 +66,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "state_detail.group" && (
@@ -76,6 +81,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "priority" && (
@@ -90,6 +96,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "labels" && (
@@ -104,6 +111,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "assignees" && (
@@ -118,6 +126,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "created_by" && (
@@ -132,6 +141,7 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface ILabelHeader {
   column_id: string;
@@ -16,6 +17,7 @@ export interface ILabelHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 const Icon = ({ color }: any) => (
@@ -34,6 +36,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const label = column_value ?? null;
@@ -63,6 +66,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
             issuePayload={{ labels: [label?.id] }}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         ))}
     </>

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

@@ -8,6 +8,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // Icons
 import { PriorityIcon } from "@plane/ui";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IPriorityHeader {
   column_id: string;
@@ -20,6 +21,7 @@ export interface IPriorityHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
@@ -34,6 +36,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const priority = column_value || null;
@@ -63,6 +66,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
             issuePayload={{ priority: priority?.key }}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         ))}
     </>

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

@@ -6,6 +6,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
 // emoji helper
 import { renderEmoji } from "helpers/emoji.helper";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IProjectHeader {
   column_id: string;
@@ -18,6 +19,7 @@ export interface IProjectHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
@@ -34,6 +36,7 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const project = column_value ?? null;
@@ -63,6 +66,7 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
             issuePayload={{ project: project?.id }}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         ))}
     </>

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

@@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { StateGroupIcon } from "@plane/ui";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IStateGroupHeader {
   column_id: string;
@@ -17,6 +18,7 @@ export interface IStateGroupHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@@ -37,6 +39,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const stateGroup = column_value || null;
@@ -66,6 +69,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
             issuePayload={{}}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         ))}
     </>

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

@@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
 import { Icon } from "./state-group";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IStateHeader {
   column_id: string;
@@ -17,6 +18,7 @@ export interface IStateHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const StateHeader: FC<IStateHeader> = observer((props) => {
@@ -31,6 +33,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const state = column_value ?? null;
@@ -60,6 +63,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
             issuePayload={{ state: state?.id }}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         ))}
     </>

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

@@ -8,6 +8,7 @@ import { PriorityHeader } from "./priority";
 import { LabelHeader } from "./label";
 import { CreatedByHeader } from "./created_by";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IKanBanSubGroupByHeaderRoot {
   column_id: string;
@@ -19,6 +20,7 @@ export interface IKanBanSubGroupByHeaderRoot {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer((props) => {
@@ -32,6 +34,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
     handleKanBanToggle,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   return (
@@ -48,6 +51,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {sub_group_by && sub_group_by === "state_detail.group" && (
@@ -62,6 +66,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {sub_group_by && sub_group_by === "priority" && (
@@ -76,6 +81,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {sub_group_by && sub_group_by === "labels" && (
@@ -90,6 +96,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {sub_group_by && sub_group_by === "assignees" && (
@@ -104,6 +111,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {sub_group_by && sub_group_by === "created_by" && (
@@ -118,6 +126,7 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
           handleKanBanToggle={handleKanBanToggle}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -50,6 +50,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
       QuickActions={CycleIssueQuickActions}
       viewId={cycleId}
       currentStore={EProjectStore.CYCLE}
+      addIssuesToView={(issues: string[]) => cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, issues)}
     />
   );
 });

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

@@ -72,6 +72,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
       QuickActions={ModuleIssueQuickActions}
       viewId={moduleId}
       currentStore={EProjectStore.MODULE}
+      addIssuesToView={(issues: string[]) => moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, issues)}
     />
   );
 });

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

@@ -23,6 +23,7 @@ interface ISubGroupSwimlaneHeader {
   handleKanBanToggle: any;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   issueIds,
@@ -34,6 +35,7 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
   handleKanBanToggle,
   disableIssueCreation,
   currentStore,
+  addIssuesToView,
 }) => {
   const calculateIssueCount = (column_id: string) => {
     let issueCount = 0;
@@ -60,6 +62,7 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
               handleKanBanToggle={handleKanBanToggle}
               disableIssueCreation={disableIssueCreation}
               currentStore={currentStore}
+              addIssuesToView={addIssuesToView}
             />
           </div>
         ))}
@@ -114,6 +117,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
     disableIssueCreation,
     enableQuickIssueCreate,
     isReadOnly,
+    addIssuesToView,
   } = props;
 
   const calculateIssueCount = (column_id: string) => {
@@ -142,6 +146,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   kanBanToggle={kanBanToggle}
                   handleKanBanToggle={handleKanBanToggle}
                   disableIssueCreation={disableIssueCreation}
+                  addIssuesToView={addIssuesToView}
                 />
               </div>
               <div className="w-full border-b border-custom-border-400 border-dashed" />
@@ -170,6 +175,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   enableQuickIssueCreate={enableQuickIssueCreate}
                   isDragStarted={isDragStarted}
                   isReadOnly={isReadOnly}
+                  addIssuesToView={addIssuesToView}
                 />
               </div>
             )}
@@ -200,6 +206,7 @@ export interface IKanBanSwimLanes {
   isDragStarted?: boolean;
   disableIssueCreation?: boolean;
   currentStore?: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
   enableQuickIssueCreate: boolean;
   isReadOnly: boolean;
 }
@@ -228,6 +235,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     enableQuickIssueCreate,
     isReadOnly,
     currentStore,
+    addIssuesToView,
   } = props;
 
   return (
@@ -245,6 +253,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             handleKanBanToggle={handleKanBanToggle}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         )}
 
@@ -260,6 +269,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             handleKanBanToggle={handleKanBanToggle}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         )}
 
@@ -275,6 +285,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             handleKanBanToggle={handleKanBanToggle}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         )}
 
@@ -289,6 +300,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             kanBanToggle={kanBanToggle}
             handleKanBanToggle={handleKanBanToggle}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         )}
 
@@ -304,6 +316,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             handleKanBanToggle={handleKanBanToggle}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         )}
 
@@ -319,6 +332,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             handleKanBanToggle={handleKanBanToggle}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         )}
 
@@ -334,6 +348,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
             handleKanBanToggle={handleKanBanToggle}
             disableIssueCreation={disableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         )}
       </div>

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

@@ -54,10 +54,20 @@ interface IBaseListRoot {
   getProjects: (projectStore: IProjectStore) => IProject[] | null;
   viewId?: string;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const BaseListRoot = observer((props: IBaseListRoot) => {
-  const { issueFilterStore, issueStore, QuickActions, issueActions, getProjects, viewId, currentStore } = props;
+  const {
+    issueFilterStore,
+    issueStore,
+    QuickActions,
+    issueActions,
+    getProjects,
+    viewId,
+    currentStore,
+    addIssuesToView,
+  } = props;
 
   const {
     project: projectStore,
@@ -130,6 +140,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
             isReadonly={!enableInlineEditing}
             disableIssueCreation={!enableIssueCreation}
             currentStore={currentStore}
+            addIssuesToView={addIssuesToView}
           />
         </div>
       )}

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

@@ -32,6 +32,7 @@ export interface IGroupByList {
   ) => Promise<IIssue | undefined>;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
   viewId?: string;
 }
 
@@ -54,6 +55,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
     viewId,
     disableIssueCreation,
     currentStore,
+    addIssuesToView,
   } = props;
 
   const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
@@ -91,6 +93,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
                     }
                     disableIssueCreation={disableIssueCreation}
                     currentStore={currentStore}
+                    addIssuesToView={addIssuesToView}
                   />
                 </div>
 
@@ -147,6 +150,7 @@ export interface IList {
   viewId?: string;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const List: React.FC<IList> = (props) => {
@@ -170,6 +174,7 @@ export const List: React.FC<IList> = (props) => {
     members,
     projects,
     currentStore,
+    addIssuesToView,
   } = props;
 
   return (
@@ -193,6 +198,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -214,6 +220,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -235,6 +242,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -256,6 +264,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -277,6 +286,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -298,6 +308,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -319,6 +330,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -340,6 +352,7 @@ export const List: React.FC<IList> = (props) => {
           viewId={viewId}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </div>

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

@@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
 // ui
 import { Avatar } from "@plane/ui";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IAssigneesHeader {
   column_id: string;
@@ -12,12 +13,13 @@ export interface IAssigneesHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
 
 export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
-  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const assignee = column_value ?? null;
 
@@ -31,6 +33,7 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
           issuePayload={{ assignees: [assignee?.member?.id] }}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./assignee";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface ICreatedByHeader {
   column_id: string;
@@ -11,10 +12,11 @@ export interface ICreatedByHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
-  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const createdBy = column_value ?? null;
 
@@ -28,6 +30,7 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
           issuePayload={{ created_by: createdBy?.member?.id }}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -2,6 +2,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IEmptyHeader {
   column_id: string;
@@ -9,10 +10,11 @@ export interface IEmptyHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
-  const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_id, column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   return (
     <HeaderGroupByCard
@@ -21,6 +23,7 @@ export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
       issuePayload={{}}
       disableIssueCreation={disableIssueCreation}
       currentStore={currentStore}
+      addIssuesToView={addIssuesToView}
     />
   );
 });

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

@@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
 // types
 import { IIssue, ISearchIssueResponse } from "types";
 import { EProjectStore } from "store/command-palette.store";
+import useToast from "hooks/use-toast";
 
 interface IHeaderGroupByCard {
   icon?: React.ReactNode;
@@ -19,10 +20,11 @@ interface IHeaderGroupByCard {
   issuePayload: Partial<IIssue>;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const HeaderGroupByCard = observer(
-  ({ icon, title, count, issuePayload, disableIssueCreation, currentStore }: IHeaderGroupByCard) => {
+  ({ icon, title, count, issuePayload, disableIssueCreation, currentStore, addIssuesToView }: IHeaderGroupByCard) => {
     const router = useRouter();
     const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
 
@@ -30,43 +32,24 @@ export const HeaderGroupByCard = observer(
 
     const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
 
+    const { setToastAlert } = useToast();
+
     const renderExistingIssueModal = moduleId || cycleId;
     const ExistingIssuesListModalPayload = moduleId ? { module: true } : { cycle: true };
 
-    const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
       if (!workspaceSlug || !projectId) return;
 
-      const payload = {
+      const issues = data.map((i) => i.id);
-        issues: data.map((i) => i.id),
-      };
 
-      // await moduleService
+      addIssuesToView &&
-      //   .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
+        addIssuesToView(issues)?.catch(() => {
-      //   .catch(() =>
+          setToastAlert({
-      //     setToastAlert({
+            type: "error",
-      //       type: "error",
+            title: "Error!",
-      //       title: "Error!",
+            message: "Selected issues could not be added to the cycle. Please try again.",
-      //       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 (
@@ -119,7 +102,7 @@ export const HeaderGroupByCard = observer(
               isOpen={openExistingIssueListModal}
               handleClose={() => setOpenExistingIssueListModal(false)}
               searchParams={ExistingIssuesListModalPayload}
-              handleOnSubmit={moduleId ? handleAddIssuesToModule : handleAddIssuesToCycle}
+              handleOnSubmit={handleAddIssuesToView}
             />
           )}
         </div>

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

@@ -10,6 +10,7 @@ import { CreatedByHeader } from "./created-by";
 // mobx
 import { observer } from "mobx-react-lite";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IListGroupByHeaderRoot {
   column_id: string;
@@ -18,10 +19,12 @@ export interface IListGroupByHeaderRoot {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
-  const { column_id, column_value, group_by, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_id, column_value, group_by, issues_count, disableIssueCreation, currentStore, addIssuesToView } =
+    props;
 
   return (
     <>
@@ -32,6 +35,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "project" && (
@@ -41,6 +45,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
 
@@ -51,6 +56,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "state_detail.group" && (
@@ -60,6 +66,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "priority" && (
@@ -69,6 +76,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "labels" && (
@@ -78,6 +86,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "assignees" && (
@@ -87,6 +96,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
       {group_by && group_by === "created_by" && (
@@ -96,6 +106,7 @@ export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer(
           issues_count={issues_count}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface ILabelHeader {
   column_id: string;
@@ -10,6 +11,7 @@ export interface ILabelHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 const Icon = ({ color }: any) => (
@@ -17,7 +19,7 @@ const Icon = ({ color }: any) => (
 );
 
 export const LabelHeader: FC<ILabelHeader> = observer((props) => {
-  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const label = column_value ?? null;
 
@@ -31,6 +33,7 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
           issuePayload={{ labels: [label.id] }}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -4,6 +4,7 @@ import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-re
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IPriorityHeader {
   column_id: string;
@@ -11,6 +12,7 @@ export interface IPriorityHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 const Icon = ({ priority }: any) => (
@@ -40,7 +42,7 @@ const Icon = ({ priority }: any) => (
 );
 
 export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
-  const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_id, column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const priority = column_value ?? null;
 
@@ -54,6 +56,7 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
           issuePayload={{ priority: priority?.key }}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
 // emoji helper
 import { renderEmoji } from "helpers/emoji.helper";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IProjectHeader {
   column_id: string;
@@ -12,12 +13,13 @@ export interface IProjectHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
 
 export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
-  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const project = column_value ?? null;
 
@@ -31,6 +33,7 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
           issuePayload={{ project: project?.id ?? "" }}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -7,6 +7,7 @@ import { StateGroupIcon } from "@plane/ui";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IStateGroupHeader {
   column_id: string;
@@ -14,6 +15,7 @@ export interface IStateGroupHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@@ -23,7 +25,7 @@ export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) =>
 );
 
 export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
-  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const stateGroup = column_value ?? null;
 
@@ -37,6 +39,7 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
           issuePayload={{}}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import { HeaderGroupByCard } from "./group-by-card";
 import { Icon } from "./state-group";
 import { EProjectStore } from "store/command-palette.store";
+import { IIssue } from "types";
 
 export interface IStateHeader {
   column_id: string;
@@ -11,10 +12,11 @@ export interface IStateHeader {
   issues_count: number;
   disableIssueCreation?: boolean;
   currentStore: EProjectStore;
+  addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
 }
 
 export const StateHeader: FC<IStateHeader> = observer((props) => {
-  const { column_value, issues_count, disableIssueCreation, currentStore } = props;
+  const { column_value, issues_count, disableIssueCreation, currentStore, addIssuesToView } = props;
 
   const state = column_value ?? null;
 
@@ -28,6 +30,7 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
           issuePayload={{ state: state?.id }}
           disableIssueCreation={disableIssueCreation}
           currentStore={currentStore}
+          addIssuesToView={addIssuesToView}
         />
       )}
     </>

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

@@ -49,6 +49,7 @@ export const CycleListLayout: React.FC = observer(() => {
       getProjects={getProjects}
       viewId={cycleId}
       currentStore={EProjectStore.CYCLE}
+      addIssuesToView={(issues: string[]) => cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, issues)}
     />
   );
 });

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

@@ -50,6 +50,7 @@ export const ModuleListLayout: React.FC = observer(() => {
       getProjects={getProjects}
       viewId={moduleId}
       currentStore={EProjectStore.MODULE}
+      addIssuesToView={(issues: string[]) => moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, issues)}
     />
   );
 });

web/components/issues/modal.tsx

@@ -220,13 +220,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   const addIssueToCycle = async (issue: IIssue, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    cycleIssueStore.addIssueToCycle(workspaceSlug, activeProject, cycleId, issue);
+    cycleIssueStore.addIssueToCycle(workspaceSlug, cycleId, [issue.id]);
   };
 
   const addIssueToModule = async (issue: IIssue, moduleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    moduleIssueStore.addIssueToModule(workspaceSlug, activeProject, moduleId, issue);
+    moduleIssueStore.addIssueToModule(workspaceSlug, moduleId, [issue.id]);
   };
 
   const createIssue = async (payload: Partial<IIssue>) => {
@@ -240,7 +240,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
         if (handleSubmit) {
           await handleSubmit(res);
         } else {
-          currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation");
+          currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation", viewId);
 
           if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
           if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);

web/store/issues/profile/issue.store.ts

@@ -28,6 +28,7 @@ export interface IProfileIssuesStore {
     workspaceSlug: string,
     userId: string,
     loadType: TLoader,
+    _?: string,
     type?: "assigned" | "created" | "subscribed"
   ) => Promise<IIssueResponse>;
   createIssue: (workspaceSlug: string, userId: string, data: Partial<IIssue>) => Promise<IIssue | undefined>;
@@ -138,6 +139,7 @@ export class ProfileIssuesStore extends IssueBaseStore implements IProfileIssues
     workspaceSlug: string,
     userId: string,
     loadType: TLoader = "init-loader",
+    _?: string,
     type?: "assigned" | "created" | "subscribed"
   ) => {
     try {

web/store/issues/project-issues/cycle/issue.store.ts

@@ -5,7 +5,7 @@ import { IssueBaseStore } from "store/issues";
 import { IssueService } from "services/issue";
 import { CycleService } from "services/cycle.service";
 // types
-import { TIssueGroupByOptions } from "types";
+import { CycleIssueResponse, TIssueGroupByOptions } from "types";
 import { IIssue } from "types/issues";
 import { IIssueResponse, TLoader, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues, ViewFlags } from "../../types";
 import { RootStore } from "store/root";
@@ -49,7 +49,12 @@ export interface ICycleIssuesStore {
     data: IIssue,
     cycleId?: string | undefined
   ) => Promise<IIssue | undefined>;
-  addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, data: IIssue) => Promise<IIssue>;
+  addIssueToCycle: (
+    workspaceSlug: string,
+    cycleId: string,
+    issueIds: string[],
+    fetchAfterAddition?: boolean
+  ) => Promise<IIssue>;
   removeIssueFromCycle: (
     workspaceSlug: string,
     projectId: string,
@@ -70,6 +75,9 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
   cycleService;
   issueService;
 
+  //projectId
+  currentProjectId: string | undefined;
+
   //viewData
   viewFlags = {
     enableQuickAdd: true,
@@ -157,6 +165,8 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
     try {
       this.loader = loadType;
 
+      this.currentProjectId = projectId;
+
       const params = this.rootStore?.cycleIssuesFilter?.appliedFilters;
       const response = await this.cycleService.getV3CycleIssues(workspaceSlug, projectId, cycleId, params);
 
@@ -185,7 +195,16 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
 
     try {
       const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
-      const issueToCycle = await this.addIssueToCycle(workspaceSlug, projectId, cycleId, response);
+      const issueToCycle = await this.addIssueToCycle(workspaceSlug, cycleId, [response.id], false);
+
+      let _issues = this.issues;
+      if (!_issues) _issues = {};
+      if (!_issues[cycleId]) _issues[cycleId] = {};
+      _issues[cycleId] = { ..._issues[cycleId], ...{ [response.id]: response } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
 
       return issueToCycle;
     } catch (error) {
@@ -287,24 +306,19 @@ export class CycleIssuesStore extends IssueBaseStore implements ICycleIssuesStor
     }
   };
 
-  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, data: IIssue) => {
+  addIssueToCycle = async (workspaceSlug: string, cycleId: string, issueIds: string[], fetchAfterAddition = true) => {
+    if (!this.currentProjectId) return;
+
     try {
-      const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, projectId, cycleId, {
+      const issueToCycle = await this.issueService.addIssueToCycle(workspaceSlug, this.currentProjectId, cycleId, {
-        issues: [data.id],
+        issues: issueIds,
       });
 
-      let _issues = this.issues;
+      if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
-      if (!_issues) _issues = {};
-      if (!_issues[cycleId]) _issues[cycleId] = {};
-      _issues[cycleId] = { ..._issues[cycleId], ...{ [data.id]: data } };
-
-      runInAction(() => {
-        this.issues = _issues;
-      });
 
       return issueToCycle;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation", cycleId);
+      this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", cycleId);
       throw error;
     }
   };

web/store/issues/project-issues/module/issue.store.ts

@@ -49,7 +49,12 @@ export interface IModuleIssuesStore {
     data: IIssue,
     moduleId?: string | undefined
   ) => Promise<IIssue | undefined>;
-  addIssueToModule: (workspaceSlug: string, projectId: string, moduleId: string, data: IIssue) => Promise<IIssue>;
+  addIssueToModule: (
+    workspaceSlug: string,
+    moduleId: string,
+    issueIds: string[],
+    fetchAfterAddition?: boolean
+  ) => Promise<IIssue>;
   removeIssueFromModule: (
     workspaceSlug: string,
     projectId: string,
@@ -70,6 +75,8 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
   moduleService;
   issueService;
 
+  currentProjectId: string | undefined;
+
   //viewData
   viewFlags = {
     enableQuickAdd: true,
@@ -154,6 +161,7 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
   ) => {
     if (!moduleId) return undefined;
 
+    this.currentProjectId = projectId;
     try {
       this.loader = loadType;
 
@@ -185,7 +193,16 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
 
     try {
       const response = await this.rootStore.projectIssues.createIssue(workspaceSlug, projectId, data);
-      const issueToModule = await this.addIssueToModule(workspaceSlug, projectId, moduleId, response);
+      const issueToModule = await this.addIssueToModule(workspaceSlug, moduleId, [response.id], false);
+
+      let _issues = this.issues;
+      if (!_issues) _issues = {};
+      if (!_issues[moduleId]) _issues[moduleId] = {};
+      _issues[moduleId] = { ..._issues[moduleId], ...{ [response.id]: response } };
+
+      runInAction(() => {
+        this.issues = _issues;
+      });
 
       return issueToModule;
     } catch (error) {
@@ -289,24 +306,19 @@ export class ModuleIssuesStore extends IssueBaseStore implements IModuleIssuesSt
     }
   };
 
-  addIssueToModule = async (workspaceSlug: string, projectId: string, moduleId: string, data: IIssue) => {
+  addIssueToModule = async (workspaceSlug: string, moduleId: string, issueIds: string[], fetchAfterAddition = true) => {
+    if (!this.currentProjectId) return;
+
     try {
-      const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, projectId, moduleId, {
+      const issueToModule = await this.moduleService.addIssuesToModule(workspaceSlug, this.currentProjectId, moduleId, {
-        issues: [data.id],
+        issues: issueIds,
       });
 
-      let _issues = this.issues;
+      if (fetchAfterAddition) this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
-      if (!_issues) _issues = {};
-      if (!_issues[moduleId]) _issues[moduleId] = {};
-      _issues[moduleId] = { ..._issues[moduleId], ...{ [data.id]: data } };
-
-      runInAction(() => {
-        this.issues = _issues;
-      });
 
       return issueToModule;
     } catch (error) {
-      this.fetchIssues(workspaceSlug, projectId, "mutation", moduleId);
+      this.fetchIssues(workspaceSlug, this.currentProjectId, "mutation", moduleId);
       throw error;
     }
   };