feat: sub-issues, fix: loading screen after sign out

apps/app/components/command-palette/addAsSubIssue.tsx

@@ -0,0 +1,196 @@
+import React, { useState } from "react";
+// swr
+import { mutate } from "swr";
+// react hook form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Combobox, Dialog, Transition } from "@headlessui/react";
+// hooks
+import useUser from "lib/hooks/useUser";
+// icons
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { FolderIcon } from "@heroicons/react/24/outline";
+// commons
+import { classNames } from "constants/common";
+// types
+import { IIssue, IssueResponse } from "types";
+import { Button } from "ui";
+import { PROJECT_ISSUES_DETAILS, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
+import issuesServices from "lib/services/issues.services";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  parentId: string;
+};
+
+type FormInput = {
+  issue_ids: string[];
+  cycleId: string;
+};
+
+const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parentId }) => {
+  const [query, setQuery] = useState("");
+
+  const { activeWorkspace, activeProject, issues } = useUser();
+
+  const filteredIssues: IIssue[] =
+    query === ""
+      ? issues?.results ?? []
+      : issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
+        [];
+
+  const {
+    register,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+    setError,
+  } = useForm<FormInput>();
+
+  const handleCommandPaletteClose = () => {
+    setIsOpen(false);
+    setQuery("");
+    reset();
+  };
+
+  const addAsSubIssue = (issueId: string) => {
+    if (activeWorkspace && activeProject) {
+      issuesServices
+        .patchIssue(activeWorkspace.slug, activeProject.id, issueId, { parent: parentId })
+        .then((res) => {
+          mutate<IssueResponse>(
+            PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
+            (prevData) => ({
+              ...(prevData as IssueResponse),
+              results: (prevData?.results ?? []).map((p) =>
+                p.id === issueId ? { ...p, ...res } : p
+              ),
+            }),
+            false
+          );
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+  };
+
+  return (
+    <>
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
+        <Dialog as="div" className="relative z-10" onClose={handleCommandPaletteClose}>
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
+                <Combobox
+                // onChange={(item: ItemType) => {
+                //   const { url, onClick } = item;
+                //   if (url) router.push(url);
+                //   else if (onClick) onClick();
+                //   handleCommandPaletteClose();
+                // }}
+                >
+                  <div className="relative m-1">
+                    <MagnifyingGlassIcon
+                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                      aria-hidden="true"
+                    />
+                    <Combobox.Input
+                      className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
+                      placeholder="Search..."
+                      onChange={(e) => setQuery(e.target.value)}
+                    />
+                  </div>
+
+                  <Combobox.Options
+                    static
+                    className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                  >
+                    {filteredIssues.length > 0 && (
+                      <>
+                        <li className="p-2">
+                          {query === "" && (
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
+                              Issues
+                            </h2>
+                          )}
+                          <ul className="text-sm text-gray-700">
+                            {filteredIssues.map((issue) => {
+                              if (issue.parent === "" || issue.parent === null)
+                                return (
+                                  <Combobox.Option
+                                    key={issue.id}
+                                    value={{
+                                      name: issue.name,
+                                    }}
+                                    className={({ active }) =>
+                                      classNames(
+                                        "flex items-center gap-2 cursor-pointer select-none rounded-md px-3 py-2",
+                                        active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
+                                      )
+                                    }
+                                    onClick={() => {
+                                      addAsSubIssue(issue.id);
+                                      setIsOpen(false);
+                                    }}
+                                  >
+                                    <span
+                                      className={`h-1.5 w-1.5 block rounded-full`}
+                                      style={{
+                                        backgroundColor: issue.state_detail.color,
+                                      }}
+                                    />
+                                    {issue.name}
+                                  </Combobox.Option>
+                                );
+                            })}
+                          </ul>
+                        </li>
+                      </>
+                    )}
+                  </Combobox.Options>
+
+                  {query !== "" && filteredIssues.length === 0 && (
+                    <div className="py-14 px-6 text-center sm:px-14">
+                      <FolderIcon
+                        className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
+                        aria-hidden="true"
+                      />
+                      <p className="mt-4 text-sm text-gray-900">
+                        We couldn{"'"}t find any issue with that term. Please try again.
+                      </p>
+                    </div>
+                  )}
+                </Combobox>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+};
+
+export default AddAsSubIssue;

apps/app/components/lexical/editor.tsx

@@ -1,4 +1,3 @@
-import { FC } from "react";
 import { EditorState, LexicalEditor, $getRoot, $getSelection } from "lexical";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -25,12 +24,15 @@ export interface RichTextEditorProps {
   onChange: (state: string) => void;
   id: string;
   value: string;
+  placeholder?: string;
 }
 
-const RichTextEditor: FC<RichTextEditorProps> = (props) => {
+const RichTextEditor: React.FC<RichTextEditorProps> = ({
-  // props
+  onChange,
-  const { onChange, value, id } = props;
+  id,
-
+  value,
+  placeholder = "Enter some text...",
+}) => {
   function handleChange(state: EditorState, editor: LexicalEditor) {
     state.read(() => {
       onChange(JSON.stringify(state.toJSON()));
@@ -54,8 +56,8 @@ const RichTextEditor: FC<RichTextEditorProps> = (props) => {
             }
             ErrorBoundary={LexicalErrorBoundary}
             placeholder={
-              <div className="absolute top-[15px] left-[10px] pointer-events-none select-none text-gray-400">
+              <div className="absolute top-4 left-3 pointer-events-none select-none text-gray-400">
-                Enter some text...
+                {placeholder}
               </div>
             }
           />

apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx

@@ -262,7 +262,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
                       render={({ field: { value, onChange } }) => (
                         <input
                           type="date"
-                          value={value ?? new Date().toString()}
+                          value={""}
                           onChange={(e: any) => {
                             submitChanges({ target_date: e.target.value });
                             onChange(e.target.value);

apps/app/layouts/AdminLayout.tsx

@@ -1,5 +1,9 @@
 // react
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+// next
+import { useRouter } from "next/router";
+// hooks
+import useUser from "lib/hooks/useUser";
 // layouts
 import Container from "layouts/Container";
 import Sidebar from "layouts/Navbar/Sidebar";
@@ -11,6 +15,14 @@ import type { Props } from "./types";
 const AdminLayout: React.FC<Props> = ({ meta, children }) => {
   const [isOpen, setIsOpen] = useState(false);
 
+  const router = useRouter();
+
+  const { user, isUserLoading } = useUser();
+
+  useEffect(() => {
+    if (!isUserLoading && (!user || user === null)) router.push("/signin");
+  }, [isUserLoading, user, router]);
+
   return (
     <Container meta={meta}>
       <CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />

apps/app/lib/services/issues.services.ts

@@ -22,8 +22,8 @@ class ProjectIssuesServices extends APIService {
     super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
   }
 
-  async createIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
+  async createIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
-    return this.post(ISSUES_ENDPOINT(workspace_slug, projectId), data)
+    return this.post(ISSUES_ENDPOINT(workspaceSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -32,8 +32,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async getIssues(workspace_slug: string, projectId: string): Promise<any> {
+  async getIssues(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.get(ISSUES_ENDPOINT(workspace_slug, projectId))
+    return this.get(ISSUES_ENDPOINT(workspaceSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -42,8 +42,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async getIssue(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
+  async getIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.get(ISSUE_DETAIL(workspace_slug, projectId, issueId))
+    return this.get(ISSUE_DETAIL(workspaceSlug, projectId, issueId))
       .then((response) => {
         return response?.data;
       })
@@ -53,11 +53,11 @@ class ProjectIssuesServices extends APIService {
   }
 
   async getIssueActivities(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     issueId: string
   ): Promise<any> {
-    return this.get(ISSUE_ACTIVITIES(workspace_slug, projectId, issueId))
+    return this.get(ISSUE_ACTIVITIES(workspaceSlug, projectId, issueId))
       .then((response) => {
         return response?.data;
       })
@@ -66,8 +66,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async getIssueComments(workspace_slug: string, projectId: string, issueId: string): Promise<any> {
+  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.get(ISSUE_COMMENTS(workspace_slug, projectId, issueId))
+    return this.get(ISSUE_COMMENTS(workspaceSlug, projectId, issueId))
       .then((response) => {
         return response?.data;
       })
@@ -76,8 +76,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async getIssueProperties(workspace_slug: string, projectId: string): Promise<any> {
+  async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.get(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId))
+    return this.get(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -87,14 +87,14 @@ class ProjectIssuesServices extends APIService {
   }
 
   async addIssueToSprint(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     cycleId: string,
     data: {
       issue: string;
     }
   ) {
-    return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
+    return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)
       .then((response) => {
         return response?.data;
       })
@@ -103,8 +103,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async createIssueProperties(workspace_slug: string, projectId: string, data: any): Promise<any> {
+  async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
-    return this.post(ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId), data)
+    return this.post(ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -114,13 +114,13 @@ class ProjectIssuesServices extends APIService {
   }
 
   async patchIssueProperties(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     issuePropertyId: string,
     data: any
   ): Promise<any> {
     return this.patch(
-      ISSUE_PROPERTIES_ENDPOINT(workspace_slug, projectId) + `${issuePropertyId}/`,
+      ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) + `${issuePropertyId}/`,
       data
     )
 
@@ -133,12 +133,12 @@ class ProjectIssuesServices extends APIService {
   }
 
   async createIssueComment(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: any
   ): Promise<any> {
-    return this.post(ISSUE_COMMENTS(workspace_slug, projectId, issueId), data)
+    return this.post(ISSUE_COMMENTS(workspaceSlug, projectId, issueId), data)
       .then((response) => {
         return response?.data;
       })
@@ -148,13 +148,13 @@ class ProjectIssuesServices extends APIService {
   }
 
   async patchIssueComment(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     issueId: string,
     commentId: string,
     data: IIssueComment
   ): Promise<any> {
-    return this.patch(ISSUE_COMMENT_DETAIL(workspace_slug, projectId, issueId, commentId), data)
+    return this.patch(ISSUE_COMMENT_DETAIL(workspaceSlug, projectId, issueId, commentId), data)
       .then((response) => {
         return response?.data;
       })
@@ -164,12 +164,12 @@ class ProjectIssuesServices extends APIService {
   }
 
   async deleteIssueComment(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     issueId: string,
     commentId: string
   ): Promise<any> {
-    return this.delete(ISSUE_COMMENT_DETAIL(workspace_slug, projectId, issueId, commentId))
+    return this.delete(ISSUE_COMMENT_DETAIL(workspaceSlug, projectId, issueId, commentId))
       .then((response) => {
         return response?.data;
       })
@@ -178,8 +178,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async getIssueLabels(workspace_slug: string, projectId: string): Promise<any> {
+  async getIssueLabels(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.get(ISSUE_LABELS(workspace_slug, projectId))
+    return this.get(ISSUE_LABELS(workspaceSlug, projectId))
       .then((response) => {
         return response?.data;
       })
@@ -188,8 +188,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async createIssueLabel(workspace_slug: string, projectId: string, data: any): Promise<any> {
+  async createIssueLabel(workspaceSlug: string, projectId: string, data: any): Promise<any> {
-    return this.post(ISSUE_LABELS(workspace_slug, projectId), data)
+    return this.post(ISSUE_LABELS(workspaceSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -199,12 +199,12 @@ class ProjectIssuesServices extends APIService {
   }
 
   async updateIssue(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: any
   ): Promise<any> {
-    return this.put(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
+    return this.put(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
       .then((response) => {
         return response?.data;
       })
@@ -214,12 +214,12 @@ class ProjectIssuesServices extends APIService {
   }
 
   async patchIssue(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     issueId: string,
     data: Partial<IIssue>
   ): Promise<any> {
-    return this.patch(ISSUE_DETAIL(workspace_slug, projectId, issueId), data)
+    return this.patch(ISSUE_DETAIL(workspaceSlug, projectId, issueId), data)
       .then((response) => {
         return response?.data;
       })
@@ -228,8 +228,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async deleteIssue(workspace_slug: string, projectId: string, issuesId: string): Promise<any> {
+  async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
-    return this.delete(ISSUE_DETAIL(workspace_slug, projectId, issuesId))
+    return this.delete(ISSUE_DETAIL(workspaceSlug, projectId, issuesId))
       .then((response) => {
         return response?.data;
       })
@@ -238,8 +238,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async bulkDeleteIssues(workspace_slug: string, projectId: string, data: any): Promise<any> {
+  async bulkDeleteIssues(workspaceSlug: string, projectId: string, data: any): Promise<any> {
-    return this.delete(BULK_DELETE_ISSUES(workspace_slug, projectId), data)
+    return this.delete(BULK_DELETE_ISSUES(workspaceSlug, projectId), data)
       .then((response) => {
         return response?.data;
       })
@@ -249,12 +249,12 @@ class ProjectIssuesServices extends APIService {
   }
 
   async bulkAddIssuesToCycle(
-    workspace_slug: string,
+    workspaceSlug: string,
     projectId: string,
     cycleId: string,
     data: any
   ): Promise<any> {
-    return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspace_slug, projectId, cycleId), data)
+    return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspaceSlug, projectId, cycleId), data)
       .then((response) => {
         return response?.data;
       })

apps/app/pages/projects/[projectId]/issues/[issueId].tsx

@@ -1,19 +1,26 @@
 // next
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
 // react
 import React, { useCallback, useEffect, useState } from "react";
 // swr
-import useSWR from "swr";
+import useSWR, { mutate } from "swr";
 // react hook form
-import { useForm } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 // headless ui
-import { Tab } from "@headlessui/react";
+import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
 // services
 import issuesServices from "lib/services/issues.services";
 import stateServices from "lib/services/state.services";
 // fetch keys
-import { PROJECT_ISSUES_ACTIVITY, PROJECT_ISSUES_COMMENTS, STATE_LIST } from "constants/fetch-keys";
+import {
+  PROJECT_ISSUES_ACTIVITY,
+  PROJECT_ISSUES_COMMENTS,
+  PROJECT_ISSUES_DETAILS,
+  PROJECT_ISSUES_LIST,
+  STATE_LIST,
+} from "constants/fetch-keys";
 // hooks
 import useUser from "lib/hooks/useUser";
 // layouts
@@ -34,7 +41,14 @@ import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
 // types
 import { IIssue, IIssueComment, IssueResponse, IState } from "types";
 // icons
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  EllipsisHorizontalIcon,
+  PlusIcon,
+} from "@heroicons/react/24/outline";
+import Link from "next/link";
+import AddAsSubIssue from "components/command-palette/addAsSubIssue";
 
 const IssueDetail: NextPage = () => {
   const router = useRouter();
@@ -44,9 +58,24 @@ const IssueDetail: NextPage = () => {
   const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
 
   const [issueDetail, setIssueDetail] = useState<IIssue | undefined>(undefined);
 
+  const [preloadedData, setPreloadedData] = useState<
+    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+  >(undefined);
+
+  const [issueDescriptionValue, setIssueDescriptionValue] = useState("");
+  const handleDescriptionChange: any = (value: any) => {
+    console.log(value);
+    setIssueDescriptionValue(value);
+  };
+
+  const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
+    ssr: false,
+  });
+
   const {
     register,
     formState: { errors },
@@ -151,14 +180,44 @@ const IssueDetail: NextPage = () => {
   const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
   const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
 
+  const subIssues = (issues && issues.results.filter((i) => i.parent === issueDetail?.id)) ?? [];
+
+  const handleRemove = (issueId: string) => {
+    if (activeWorkspace && activeProject) {
+      issuesServices
+        .patchIssue(activeWorkspace.slug, activeProject.id, issueId, { parent: null })
+        .then((res) => {
+          mutate<IssueResponse>(
+            PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id),
+            (prevData) => ({
+              ...(prevData as IssueResponse),
+              results: (prevData?.results ?? []).map((p) =>
+                p.id === issueId ? { ...p, ...res } : p
+              ),
+            }),
+            false
+          );
+        })
+        .catch((e) => {
+          console.log(e);
+        });
+    }
+  };
+
   return (
     <AdminLayout>
       <CreateUpdateIssuesModal
         isOpen={isOpen}
         setIsOpen={setIsOpen}
         projectId={projectId as string}
-        data={isOpen ? issueDetail : undefined}
+        prePopulateData={{
-        isUpdatingSingleIssue
+          ...preloadedData,
+        }}
+      />
+      <AddAsSubIssue
+        isOpen={isAddAsSubIssueOpen}
+        setIsOpen={setIsAddAsSubIssueOpen}
+        parentId={issueDetail?.id ?? ""}
       />
 
       <div className="flex items-center justify-between w-full mb-5">
@@ -200,33 +259,235 @@ const IssueDetail: NextPage = () => {
         <div className="grid grid-cols-4 gap-5">
           <div className="col-span-3 space-y-5">
             <div className="bg-secondary rounded-lg p-4">
-              <TextArea
+              {/* <Controller
-                id="name"
+                control={control}
-                placeholder="Enter issue name"
-                name="name"
-                autoComplete="off"
-                validations={{ required: true }}
-                register={register}
-                onChange={debounce(() => {
-                  handleSubmit(submitChanges)();
-                }, 5000)}
-                mode="transparent"
-                className="text-xl font-medium"
-              />
-              <TextArea
-                id="description"
                 name="description"
-                error={errors.description}
+                render={({ field: { value, onChange } }) => (
-                validations={{
+                  <RichTextEditor
-                  required: true,
+                    onChange={(state: string) => {
-                }}
+                      handleDescriptionChange(state);
-                onChange={debounce(() => {
+                      onChange(issueDescriptionValue);
-                  handleSubmit(submitChanges)();
+                    }}
-                }, 5000)}
+                    value={issueDescriptionValue}
-                placeholder="Enter issue description"
+                    id="editor"
-                mode="transparent"
+                  />
-                register={register}
+                )}
-              />
+              /> */}
+              <div>
+                <TextArea
+                  id="name"
+                  placeholder="Enter issue name"
+                  name="name"
+                  autoComplete="off"
+                  validations={{ required: true }}
+                  register={register}
+                  onChange={debounce(() => {
+                    handleSubmit(submitChanges)();
+                  }, 5000)}
+                  mode="transparent"
+                  className="text-xl font-medium"
+                />
+                <TextArea
+                  id="description"
+                  name="description"
+                  error={errors.description}
+                  validations={{
+                    required: true,
+                  }}
+                  onChange={debounce(() => {
+                    handleSubmit(submitChanges)();
+                  }, 5000)}
+                  placeholder="Enter issue description"
+                  mode="transparent"
+                  register={register}
+                />
+              </div>
+              <div className="mt-2">
+                {subIssues && subIssues.length > 0 ? (
+                  <Disclosure>
+                    {({ open }) => (
+                      <>
+                        <div className="flex justify-between items-center">
+                          <Disclosure.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
+                            <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
+                            Sub-issues{" "}
+                            <span className="text-gray-600 ml-1">{subIssues.length}</span>
+                          </Disclosure.Button>
+                          {open ? (
+                            <div className="flex items-center">
+                              <button
+                                type="button"
+                                className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
+                                onClick={() => {
+                                  setIsOpen(true);
+                                  setPreloadedData({
+                                    parent: issueDetail.id,
+                                    actionType: "createIssue",
+                                  });
+                                }}
+                              >
+                                <PlusIcon className="h-3 w-3" />
+                                Add new
+                              </button>
+
+                              <Menu as="div" className="relative inline-block">
+                                <Menu.Button className="grid relative place-items-center rounded p-1 hover:bg-gray-100 focus:outline-none">
+                                  <EllipsisHorizontalIcon className="h-4 w-4" />
+                                </Menu.Button>
+
+                                <Transition
+                                  as={React.Fragment}
+                                  enter="transition ease-out duration-100"
+                                  enterFrom="transform opacity-0 scale-95"
+                                  enterTo="transform opacity-100 scale-100"
+                                  leave="transition ease-in duration-75"
+                                  leaveFrom="transform opacity-100 scale-100"
+                                  leaveTo="transform opacity-0 scale-95"
+                                >
+                                  <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
+                                    <div className="p-1">
+                                      <Menu.Item as="div">
+                                        {(active) => (
+                                          <button
+                                            className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                                            onClick={() => setIsAddAsSubIssueOpen(true)}
+                                          >
+                                            Add an existing issue
+                                          </button>
+                                        )}
+                                      </Menu.Item>
+                                    </div>
+                                  </Menu.Items>
+                                </Transition>
+                              </Menu>
+                            </div>
+                          ) : null}
+                        </div>
+                        <Transition
+                          enter="transition duration-100 ease-out"
+                          enterFrom="transform scale-95 opacity-0"
+                          enterTo="transform scale-100 opacity-100"
+                          leave="transition duration-75 ease-out"
+                          leaveFrom="transform scale-100 opacity-100"
+                          leaveTo="transform scale-95 opacity-0"
+                        >
+                          <Disclosure.Panel className="flex flex-col gap-y-1 mt-3">
+                            {subIssues.map((subIssue) => (
+                              <Link
+                                key={subIssue.id}
+                                href={`/projects/${activeProject.id}/issues/${subIssue.id}`}
+                              >
+                                <a className="p-2 flex justify-between items-center rounded text-xs hover:bg-gray-100">
+                                  <div className="flex items-center gap-2">
+                                    <span
+                                      className={`h-1.5 w-1.5 block rounded-full`}
+                                      style={{
+                                        backgroundColor: subIssue.state_detail.color,
+                                      }}
+                                    />
+                                    <span className="text-gray-600">
+                                      {activeProject.identifier}-{subIssue.sequence_id}
+                                    </span>
+                                    <span className="font-medium">{subIssue.name}</span>
+                                  </div>
+                                  <div>
+                                    <Menu as="div" className="relative inline-block">
+                                      <Menu.Button className="grid relative place-items-center focus:outline-none">
+                                        <EllipsisHorizontalIcon className="h-4 w-4" />
+                                      </Menu.Button>
+
+                                      <Transition
+                                        as={React.Fragment}
+                                        enter="transition ease-out duration-100"
+                                        enterFrom="transform opacity-0 scale-95"
+                                        enterTo="transform opacity-100 scale-100"
+                                        leave="transition ease-in duration-75"
+                                        leaveFrom="transform opacity-100 scale-100"
+                                        leaveTo="transform opacity-0 scale-95"
+                                      >
+                                        <Menu.Items className="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
+                                          <div className="p-1">
+                                            <Menu.Item as="div">
+                                              {(active) => (
+                                                <button
+                                                  className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                                                  onClick={() => handleRemove(subIssue.id)}
+                                                >
+                                                  Remove as sub-issue
+                                                </button>
+                                              )}
+                                            </Menu.Item>
+                                          </div>
+                                        </Menu.Items>
+                                      </Transition>
+                                    </Menu>
+                                  </div>
+                                </a>
+                              </Link>
+                            ))}
+                          </Disclosure.Panel>
+                        </Transition>
+                      </>
+                    )}
+                  </Disclosure>
+                ) : (
+                  <Menu as="div" className="relative inline-block">
+                    <Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
+                      <PlusIcon className="h-3 w-3" />
+                      Add sub-issue
+                    </Menu.Button>
+
+                    <Transition
+                      as={React.Fragment}
+                      enter="transition ease-out duration-100"
+                      enterFrom="transform opacity-0 scale-95"
+                      enterTo="transform opacity-100 scale-100"
+                      leave="transition ease-in duration-75"
+                      leaveFrom="transform opacity-100 scale-100"
+                      leaveTo="transform opacity-0 scale-95"
+                    >
+                      <Menu.Items className="origin-top-right absolute left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                        <div className="p-1">
+                          <Menu.Item as="div">
+                            {(active) => (
+                              <button
+                                type="button"
+                                className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                                onClick={() => {
+                                  setIsOpen(true);
+                                  setPreloadedData({
+                                    parent: issueDetail.id,
+                                    actionType: "createIssue",
+                                  });
+                                }}
+                              >
+                                Add new
+                              </button>
+                            )}
+                          </Menu.Item>
+                          <Menu.Item as="div">
+                            {(active) => (
+                              <button
+                                type="button"
+                                className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                                onClick={() => {
+                                  setIsAddAsSubIssueOpen(true);
+                                  setPreloadedData({
+                                    parent: issueDetail.id,
+                                    actionType: "createIssue",
+                                  });
+                                }}
+                              >
+                                Add an existing issue
+                              </button>
+                            )}
+                          </Menu.Item>
+                        </div>
+                      </Menu.Items>
+                    </Transition>
+                  </Menu>
+                )}
+              </div>
             </div>
             <div className="bg-secondary rounded-lg p-4 space-y-5">
               <Tab.Group>

apps/app/pages/projects/[projectId]/issues/index.tsx

@@ -51,7 +51,7 @@ const ProjectIssues: NextPage = () => {
   const [editIssue, setEditIssue] = useState<string | undefined>();
   const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
 
-  const { activeWorkspace, activeProject } = useUser();
+  const { activeWorkspace, activeProject, issues } = useUser();
 
   const router = useRouter();