fix: assignee and labels field while editing an issue (#296)

* fix: assignee and labels field while editing an issue

* chore: remove unused declarations

apps/app/components/issues/form.tsx

@@ -117,6 +117,8 @@ export const IssueForm: FC<IssueFormProps> = ({
       ...defaultValues,
       ...initialData,
       project: projectId,
+      assignees_list: initialData?.assignees ?? [],
+      labels_list: initialData?.labels ?? [],
     });
   }, [initialData, reset, projectId]);
 
@@ -276,13 +278,6 @@ export const IssueForm: FC<IssueFormProps> = ({
                     <IssuePrioritySelect value={value} onChange={onChange} />
                   )}
                 />
-                <Controller
-                  control={control}
-                  name="assignees_list"
-                  render={({ field: { value, onChange } }) => (
-                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
-                  )}
-                />
                 <Controller
                   control={control}
                   name="labels_list"
@@ -308,6 +303,13 @@ export const IssueForm: FC<IssueFormProps> = ({
                     )}
                   />
                 </div>
+                <Controller
+                  control={control}
+                  name="assignees_list"
+                  render={({ field: { value, onChange } }) => (
+                    <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
+                  )}
+                />
                 <IssueParentSelect
                   control={control}
                   isOpen={parentIssueListModalOpen}

apps/app/components/issues/modal.tsx

@@ -4,8 +4,6 @@ import { useRouter } from "next/router";
 
 import useSWR, { mutate } from "swr";
 
-// react-hook-form
-import { useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
@@ -72,11 +70,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     workspaceSlug ? () => projectService.getProjects(workspaceSlug as string) : null
   );
 
-  const { setError } = useForm<IIssue>({
-    mode: "all",
-    reValidateMode: "onChange",
-  });
-
   useEffect(() => {
     if (projects && projects.length > 0)
       setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);

apps/app/components/issues/select/assignee.tsx

@@ -9,9 +9,7 @@ import { Transition, Combobox } from "@headlessui/react";
 // services
 import projectServices from "services/project.service";
 // ui
-import { Avatar } from "components/ui";
+import { AssigneesList, Avatar } from "components/ui";
-// icons
-import { UserIcon } from "@heroicons/react/24/outline";
 // fetch keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -63,22 +61,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
     >
       {({ open }: any) => (
         <>
-          <Combobox.Label className="sr-only">Assignees</Combobox.Label>
+          <Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md">
-          <Combobox.Button
+            <div className="flex items-center gap-1 text-xs">
-            className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
+              {value && Array.isArray(value) ? <AssigneesList userIds={value} length={10} /> : null}
-          >
+            </div>
-            <UserIcon className="h-3 w-3 text-gray-500" />
-            <span
-              className={`hidden truncate sm:block ${
-                value === null || value === undefined ? "" : "text-gray-900"
-              }`}
-            >
-              {Array.isArray(value)
-                ? value
-                    .map((v) => options?.find((option) => option.value === v)?.display)
-                    .join(", ") || "Assignees"
-                : options?.find((option) => option.value === value)?.display || "Assignees"}
-            </span>
           </Combobox.Button>
 
           <Transition

apps/app/components/issues/sidebar-select/assignee.tsx

@@ -66,17 +66,11 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges,
                       isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
                     } items-center gap-1 text-xs`}
                   >
-                    <span
+                    <div className="flex items-center gap-1 text-xs">
-                      className={`hidden truncate text-left sm:block ${
+                      {value && Array.isArray(value) ? (
-                        value ? "" : "text-gray-900"
+                        <AssigneesList userIds={value} length={10} />
-                      }`}
+                      ) : null}
-                    >
+                    </div>
-                      <div className="flex items-center gap-1 text-xs">
-                        {value && Array.isArray(value) ? (
-                          <AssigneesList userIds={value} length={10} />
-                        ) : null}
-                      </div>
-                    </span>
                   </Listbox.Button>
 
                   <Transition

apps/app/types/issues.d.ts

@@ -66,7 +66,7 @@ export interface IIssueLink {
 }
 
 export interface IIssue {
-  assignees: any[] | null;
+  assignees: string[] | null;
   assignee_details: IUser[];
   assignees_list: string[];
   attachments: any[];