refactor: quick add (#2541)

* refactor: store and helper setup for quick-add

* refactor: kanban quick add with optimistic issue create

* refactor: added function definition

* refactor: list quick add with optimistic issue create

* refactor: spreadsheet quick add with optimistic issue create

* refactor: calender quick add with optimistic issue create

* refactor: gantt quick add with optimistic issue create

* refactor: input component and pre-loading data logic

* style: calender quick-add height and content shift

* feat: sub-group quick-add issue

* feat: displaying loading state when issue is being created

* fix: setting string null to null

web/components/issues/issue-layouts/spreadsheet/index.ts

@@ -2,3 +2,4 @@ export * from "./columns";
 export * from "./roots";
 export * from "./spreadsheet-column";
 export * from "./spreadsheet-view";
+export * from "./inline-create-issue-form";

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

@@ -0,0 +1,207 @@
+import { useEffect, useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+import { Transition } from "@headlessui/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";
+
+// types
+import { IIssue } from "types";
+import { PlusIcon } from "lucide-react";
+
+type Props = {
+  groupId?: string;
+  prePopulatedData?: Partial<IIssue>;
+  onSuccess?: (data: IIssue) => Promise<void> | void;
+};
+
+const defaultValues: Partial<IIssue> = {
+  name: "",
+};
+
+const Inputs = (props: any) => {
+  const { register, setFocus, projectDetails } = props;
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  return (
+    <>
+      <h4 className="text-sm font-medium leading-5 text-custom-text-400">{projectDetails?.identifier ?? "..."}</h4>
+      <input
+        type="text"
+        autoComplete="off"
+        placeholder="Issue Title"
+        {...register("name", {
+          required: "Issue title is required.",
+        })}
+        className="w-full px-2 py-3 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+      />
+    </>
+  );
+};
+
+export const SpreadsheetInlineCreateIssueForm: React.FC<Props> = observer((props) => {
+  const { prePopulatedData, groupId } = props;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { workspace: workspaceStore, quickAddIssue: quickAddStore } = useMobxStore();
+
+  const { projectDetails } = useProjectDetails();
+
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<IIssue>({ defaultValues });
+
+  // ref
+  const ref = useRef<HTMLFormElement>(null);
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => setIsOpen(false);
+
+  // hooks
+  useKeypress("Escape", handleClose);
+  useOutsideClickDetector(ref, handleClose);
+  const { setToastAlert } = useToast();
+
+  // derived values
+  const workspaceDetail = workspaceStore.getWorkspaceBySlug(workspaceSlug?.toString()!);
+
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus, isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  useEffect(() => {
+    if (!errors) return;
+
+    Object.keys(errors).forEach((key) => {
+      const error = errors[key as keyof IIssue];
+
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: error?.message?.toString() || "Some error occurred. Please try again.",
+      });
+    });
+  }, [errors, setToastAlert]);
+
+  const onSubmitHandler = async (formData: IIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    // resetting the form so that user can add another issue quickly
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(workspaceDetail!, projectDetails!, {
+      ...(prePopulatedData ?? {}),
+      ...formData,
+      labels_list:
+        formData.labels_list && formData.labels_list?.length !== 0
+          ? formData.labels_list
+          : prePopulatedData?.labels && prePopulatedData?.labels.toString() !== "none"
+          ? [prePopulatedData.labels as any]
+          : [],
+      assignees_list:
+        formData.assignees_list && formData.assignees_list?.length !== 0
+          ? formData.assignees_list
+          : prePopulatedData?.assignees && prePopulatedData?.assignees.toString() !== "none"
+          ? [prePopulatedData.assignees as any]
+          : [],
+    });
+
+    try {
+      quickAddStore.createIssue(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        {
+          group_id: groupId ?? null,
+          sub_group_id: null,
+        },
+        payload
+      );
+
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Issue created successfully.",
+      });
+    } catch (err: any) {
+      Object.keys(err || {}).forEach((key) => {
+        const error = err?.[key];
+        const errorTitle = error ? (Array.isArray(error) ? error.join(", ") : error) : null;
+
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: errorTitle || "Some error occurred. Please try again.",
+        });
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Transition
+        show={isOpen}
+        enter="transition ease-in-out duration-200 transform"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in-out duration-200 transform"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div>
+          <form
+            ref={ref}
+            onSubmit={handleSubmit(onSubmitHandler)}
+            className="flex border-[0.5px] border-t-0 border-custom-border-100 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
+          >
+            <Inputs register={register} setFocus={setFocus} projectDetails={projectDetails} />
+          </form>
+        </div>
+      </Transition>
+
+      {isOpen && (
+        <p className="text-xs ml-3 mt-3 italic text-custom-text-200">
+          Press {"'"}Enter{"'"} to add another issue
+        </p>
+      )}
+
+      {!isOpen && (
+        <button
+          type="button"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          onClick={() => setIsOpen(true)}
+        >
+          <PlusIcon className="h-4 w-4" />
+          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+        </button>
+      )}
+    </div>
+  );
+});

web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx

@@ -66,6 +66,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
       handleIssueAction={() => {}}
       handleUpdateIssue={handleUpdateIssue}
       disableUserActions={false}
+      enableQuickCreateIssue
     />
   );
 });

web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx

@@ -3,11 +3,7 @@ import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import { PlusIcon } from "lucide-react";
 // components
-import {
-  SpreadsheetColumnsList,
-  // ListInlineCreateIssueForm,
-  SpreadsheetIssuesColumn,
-} from "components/issues";
+import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreateIssueForm } from "components/issues";
 import { CustomMenu, Spinner } from "@plane/ui";
 // types
 import {
@@ -31,6 +27,7 @@ type Props = {
   handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
   openIssuesListModal?: (() => void) | null;
   disableUserActions: boolean;
+  enableQuickCreateIssue?: boolean;
 };
 
 export const SpreadsheetView: React.FC<Props> = observer((props) => {
@@ -46,6 +43,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     handleUpdateIssue,
     openIssuesListModal,
     disableUserActions,
+    enableQuickCreateIssue,
   } = props;
 
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
@@ -138,17 +136,10 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
 
         <div className="border-t border-custom-border-100">
           <div className="mb-3 z-50 sticky bottom-0 left-0">
-            {/* <ListInlineCreateIssueForm
-                isOpen={isInlineCreateIssueFormOpen}
-                handleClose={() => setIsInlineCreateIssueFormOpen(false)}
-                prePopulatedData={{
-                  ...(cycleId && { cycle: cycleId.toString() }),
-                  ...(moduleId && { module: moduleId.toString() }),
-                }}
-              /> */}
+            {enableQuickCreateIssue && <SpreadsheetInlineCreateIssueForm />}
           </div>
 
-          {!disableUserActions &&
+          {/* {!disableUserActions &&
             !isInlineCreateIssueFormOpen &&
             (type === "issue" ? (
               <button
@@ -180,7 +171,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
                 )}
               </CustomMenu>
-            ))}
+            ))} */}
         </div>
       </div>
     </div>