fix: quick add not working for labels & assignee (#2689)

* fix: quick add not working for labels & assignee

* fix: build error on spreadsheet view

web/components/issues/issue-layouts/calendar/inline-create-issue-form.tsx

@@ -1,57 +1,27 @@
 import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-
-// store
 import { observer } from "mobx-react-lite";
+// store
 import { useMobxStore } from "lib/mobx/store-provider";
-
 // hooks
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useProjectDetails from "hooks/use-project-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-
-// constants
-import { createIssuePayload } from "constants/issue";
-
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
 // icons
 import { PlusIcon } from "lucide-react";
-
 // types
 import { IIssue } from "types";
 
 type Props = {
   groupId?: string;
-  dependencies?: any[];
   prePopulatedData?: Partial<IIssue>;
   onSuccess?: (data: IIssue) => Promise<void> | void;
 };
 
-const useCheckIfThereIsSpaceOnRight = (ref: React.RefObject<HTMLDivElement>, deps: any[]) => {
-  const [isThereSpaceOnRight, setIsThereSpaceOnRight] = useState(true);
-
-  const router = useRouter();
-  const { moduleId, cycleId, viewId } = router.query;
-
-  const container = document.getElementById(`calendar-view-${cycleId ?? moduleId ?? viewId}`);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    const { right } = ref.current.getBoundingClientRect();
-
-    const width = right;
-
-    const innerWidth = container?.getBoundingClientRect().width ?? window.innerWidth;
-
-    if (width > innerWidth) setIsThereSpaceOnRight(false);
-    else setIsThereSpaceOnRight(true);
-  }, [ref, deps, container]);
-
-  return isThereSpaceOnRight;
-};
-
 const defaultValues: Partial<IIssue> = {
   name: "",
 };
@@ -80,7 +50,7 @@ const Inputs = (props: any) => {
 };
 
 export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) => {
-  const { prePopulatedData, dependencies = [], groupId } = props;
+  const { prePopulatedData, groupId } = props;
 
   // router
   const router = useRouter();
@@ -135,8 +105,6 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = observer((props) =
     });
   }, [errors, setToastAlert]);
 
-  const isSpaceOnRight = useCheckIfThereIsSpaceOnRight(ref, dependencies);
-
   const onSubmitHandler = async (formData: IIssue) => {
     if (isSubmitting || !workspaceSlug || !projectId) return;
 

web/components/issues/issue-layouts/gantt/inline-create-issue-form.tsx

@@ -14,8 +14,8 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import { renderDateFormat } from "helpers/date-time.helper";
 // types
 import { IIssue } from "types";
-// constants
-import { createIssuePayload } from "constants/issue";
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
 
 type Props = {
   prePopulatedData?: Partial<IIssue>;

web/components/issues/issue-layouts/kanban/inline-create-issue-form.tsx

@@ -2,19 +2,16 @@ import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import { PlusIcon } from "lucide-react";
-// store
 import { observer } from "mobx-react-lite";
+// store
 import { useMobxStore } from "lib/mobx/store-provider";
-
 // hooks
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useProjectDetails from "hooks/use-project-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-
-// constants
-import { createIssuePayload } from "constants/issue";
-
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
 // types
 import { IIssue } from "types";
 

web/components/issues/issue-layouts/list/inline-create-issue-form.tsx

@@ -1,23 +1,19 @@
 import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useProjectDetails from "hooks/use-project-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-
 // store
-import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
-
-// constants
-import { createIssuePayload } from "constants/issue";
-
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
 // types
 import { IIssue } from "types";
-import { PlusIcon } from "lucide-react";
 
 type Props = {
   groupId?: string;

web/components/issues/issue-layouts/spreadsheet/inline-create-issue-form.tsx

@@ -1,23 +1,19 @@
 import { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
-
+import { observer } from "mobx-react-lite";
+import { PlusIcon } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 import useKeypress from "hooks/use-keypress";
 import useProjectDetails from "hooks/use-project-details";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-
 // store
-import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
-
-// constants
-import { createIssuePayload } from "constants/issue";
-
+// helpers
+import { createIssuePayload } from "helpers/issue.helper";
 // types
 import { IIssue } from "types";
-import { PlusIcon } from "lucide-react";
 
 type Props = {
   groupId?: string;

web/constants/issue.ts

@@ -1,4 +1,3 @@
-import { v4 as uuidv4 } from "uuid";
 // icons
 import { Calendar, GanttChartSquare, Kanban, List, Sheet } from "lucide-react";
 // types
@@ -12,9 +11,6 @@ import {
   TIssuePriorities,
   TIssueTypeFilters,
   TStateGroups,
-  IIssue,
-  IProject,
-  IWorkspace,
 } from "types";
 
 export const ISSUE_PRIORITIES: {
@@ -420,72 +416,3 @@ export const groupReactionEmojis = (reactions: any) => {
 
   return _groupedEmojis;
 };
-
-/**
- *
- * @param workspaceDetail workspace detail to be added in the issue payload
- * @param projectDetail project detail to be added in the issue payload
- * @param formData partial issue data from the form. This will override the default values
- * @returns full issue payload with some default values
- */
-
-export const createIssuePayload: (
-  workspaceDetail: IWorkspace,
-  projectDetail: IProject,
-  formData: Partial<IIssue>
-) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial<IIssue>) => {
-  const payload = {
-    archived_at: null,
-    assignees: [],
-    assignee_details: [],
-    attachment_count: 0,
-    attachments: [],
-    issue_relations: [],
-    related_issues: [],
-    bridge_id: null,
-    completed_at: new Date(),
-    created_at: "",
-    created_by: "",
-    cycle: null,
-    cycle_id: null,
-    cycle_detail: null,
-    description: {},
-    description_html: "",
-    description_stripped: "",
-    estimate_point: null,
-    issue_cycle: null,
-    issue_link: [],
-    issue_module: null,
-    labels: [],
-    label_details: [],
-    is_draft: false,
-    links_list: [],
-    link_count: 0,
-    module: null,
-    module_id: null,
-    name: "",
-    parent: null,
-    parent_detail: null,
-    priority: "none",
-    project: projectDetail.id,
-    project_detail: projectDetail,
-    sequence_id: 0,
-    sort_order: 0,
-    sprints: null,
-    start_date: null,
-    state: projectDetail.default_state,
-    state_detail: {} as any,
-    sub_issues_count: 0,
-    target_date: null,
-    updated_at: "",
-    updated_by: "",
-    workspace: workspaceDetail.id,
-    workspace_detail: workspaceDetail,
-    id: uuidv4(),
-    tempId: uuidv4(),
-    // to be overridden by the form data
-    ...formData,
-  } as IIssue;
-
-  return payload;
-};

web/helpers/issue.helper.ts

@@ -1,7 +1,16 @@
+import { v4 as uuidv4 } from "uuid";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { IIssue, TIssueGroupByOptions, TIssueLayouts, TIssueOrderByOptions, TIssueParams } from "types";
+import {
+  IIssue,
+  TIssueGroupByOptions,
+  TIssueLayouts,
+  TIssueOrderByOptions,
+  TIssueParams,
+  IProject,
+  IWorkspace,
+} from "types";
 // constants
 import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
@@ -109,3 +118,82 @@ export const handleIssueQueryParamsByLayout = (
 
   return queryParams;
 };
+
+/**
+ *
+ * @description create a full issue payload with some default values. This function also parse the form field
+ * like assignees, labels, etc. and add them to the payload
+ * @param workspaceDetail workspace detail to be added in the issue payload
+ * @param projectDetail project detail to be added in the issue payload
+ * @param formData partial issue data from the form. This will override the default values
+ * @returns full issue payload with some default values
+ */
+
+export const createIssuePayload: (
+  workspaceDetail: IWorkspace,
+  projectDetail: IProject,
+  formData: Partial<IIssue>
+) => IIssue = (workspaceDetail: IWorkspace, projectDetail: IProject, formData: Partial<IIssue>) => {
+  const payload = {
+    archived_at: null,
+    assignee_details: [],
+    attachment_count: 0,
+    attachments: [],
+    issue_relations: [],
+    related_issues: [],
+    bridge_id: null,
+    completed_at: new Date(),
+    created_at: "",
+    created_by: "",
+    cycle: null,
+    cycle_id: null,
+    cycle_detail: null,
+    description: {},
+    description_html: "",
+    description_stripped: "",
+    estimate_point: null,
+    issue_cycle: null,
+    issue_link: [],
+    issue_module: null,
+    label_details: [],
+    is_draft: false,
+    links_list: [],
+    link_count: 0,
+    module: null,
+    module_id: null,
+    name: "",
+    parent: null,
+    parent_detail: null,
+    priority: "none",
+    project: projectDetail.id,
+    project_detail: projectDetail,
+    sequence_id: 0,
+    sort_order: 0,
+    sprints: null,
+    start_date: null,
+    state: projectDetail.default_state,
+    state_detail: {} as any,
+    sub_issues_count: 0,
+    target_date: null,
+    updated_at: "",
+    updated_by: "",
+    workspace: workspaceDetail.id,
+    workspace_detail: workspaceDetail,
+    id: uuidv4(),
+    tempId: uuidv4(),
+    // to be overridden by the form data
+    ...formData,
+    assignees: Array.isArray(formData.assignees)
+      ? formData.assignees
+      : formData.assignees && formData.assignees !== "none" && formData.assignees !== null
+      ? [formData.assignees]
+      : [],
+    labels: Array.isArray(formData.labels)
+      ? formData.labels
+      : formData.labels && formData.labels !== "none" && formData.labels !== null
+      ? [formData.labels]
+      : [],
+  } as IIssue;
+
+  return payload;
+};