chore: object select dropdown for the create issue modal

web/components/custom-attributes/attribute-forms/file-attribute-form.tsx

@@ -1,7 +1,5 @@
 // react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// headless ui
-import { Disclosure } from "@headlessui/react";
+import { Controller } from "react-hook-form";
 // components
 import { FileFormatsDropdown, FormComponentProps, Input } from "components/custom-attributes";
 

web/components/custom-attributes/index.ts

@@ -4,3 +4,4 @@ export * from "./delete-object-modal";
 export * from "./input";
 export * from "./object-modal";
 export * from "./objects-list";
+export * from "./objects-select";

web/components/custom-attributes/objects-select.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+
+import { useRouter } from "next/router";
+
+// mobx
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { CustomSearchSelect } from "components/ui";
+
+type Props = {
+  onChange: (val: string | null) => void;
+  projectId: string;
+  value: string | null;
+};
+
+export const ObjectsSelect: React.FC<Props> = observer(({ onChange, projectId, value }) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { customAttributes: customAttributesStore } = useMobxStore();
+  const { entities, fetchEntities } = customAttributesStore;
+
+  const options:
+    | {
+        value: any;
+        query: string;
+        content: string;
+      }[]
+    | undefined = entities?.map((entity) => ({
+    value: entity.id,
+    query: entity.display_name,
+    content: entity.display_name,
+  }));
+  options?.unshift({ value: null, query: "default", content: "Default" });
+
+  useEffect(() => {
+    if (!workspaceSlug) return;
+
+    if (!entities) fetchEntities(workspaceSlug.toString(), projectId);
+  }, [entities, fetchEntities, projectId, workspaceSlug]);
+
+  return (
+    <CustomSearchSelect
+      label={entities?.find((e) => e.id === value)?.display_name ?? "Default"}
+      value={value}
+      maxHeight="md"
+      optionsClassName="!min-w-[10rem]"
+      onChange={onChange}
+      options={options}
+      position="right"
+    />
+  );
+});

web/components/issues/form.tsx

@@ -22,6 +22,7 @@ import {
 } from "components/issues/select";
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
+import { ObjectsSelect } from "components/custom-attributes";
 // ui
 import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
 import { TipTapEditor } from "components/tiptap";
@@ -33,15 +34,8 @@ import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
 const defaultValues: Partial<IIssue> = {
   project: "",
   name: "",
-  description: {
-    type: "doc",
-    content: [
-      {
-        type: "paragraph",
-      },
-    ],
-  },
   description_html: "<p></p>",
+  entity: null,
   estimate_point: null,
   state: "",
   parent: null,
@@ -68,6 +62,7 @@ export interface IssueFormProps {
     | "project"
     | "name"
     | "description"
+    | "entity"
     | "state"
     | "priority"
     | "assignee"
@@ -249,6 +244,7 @@ export const IssueForm: FC<IssueFormProps> = ({
       )}
       <form onSubmit={handleSubmit(handleCreateUpdateIssue)}>
         <div className="space-y-5">
+          <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-x-2">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
                 <Controller
@@ -269,6 +265,18 @@ export const IssueForm: FC<IssueFormProps> = ({
                 {status ? "Update" : "Create"} Issue
               </h3>
             </div>
+            <div className="flex-shrink-0">
+              {(fieldsToShow.includes("all") || fieldsToShow.includes("project")) && (
+                <Controller
+                  control={control}
+                  name="entity"
+                  render={({ field: { value, onChange } }) => (
+                    <ObjectsSelect onChange={onChange} projectId={projectId} value={value} />
+                  )}
+                />
+              )}
+            </div>
+          </div>
           {watch("parent") &&
             (fieldsToShow.includes("all") || fieldsToShow.includes("parent")) &&
             selectedParentIssue && (
@@ -407,6 +415,9 @@ export const IssueForm: FC<IssueFormProps> = ({
                     )}
                   />
                 )}
+                {/* default object properties */}
+                {watch("entity") === null && (
+                  <>
                     {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
                       <Controller
                         control={control}
@@ -530,6 +541,8 @@ export const IssueForm: FC<IssueFormProps> = ({
                         )}
                       </CustomMenu>
                     )}
+                  </>
+                )}
               </div>
             </div>
           </div>

web/types/issues.d.ts

@@ -2,19 +2,13 @@ import { KeyedMutator } from "swr";
 import type {
   IState,
   IUser,
-  IProject,
   ICycle,
   IModule,
   IUserLite,
   IProjectLite,
   IWorkspaceLite,
   IStateLite,
-  TStateGroups,
   Properties,
-  IIssueFilterOptions,
-  TIssueGroupByOptions,
-  TIssueViewOptions,
-  TIssueOrderByOptions,
   IIssueDisplayFilterOptions,
 } from "types";
 
@@ -87,6 +81,7 @@ export interface IIssue {
   assignees_list: string[];
   attachment_count: number;
   attachments: any[];
+  entity: string | null;
   issue_relations: {
     id: string;
     issue: string;