chore: implementing new combo box for member select

web/components/project/index.ts

@@ -9,7 +9,7 @@ export * from "./form";
 export * from "./join-project-modal";
 export * from "./leave-project-modal";
 export * from "./member-select";
-export * from "./members-select";
+export * from "./members-autocomplete";
 export * from "./priority-select";
 export * from "./sidebar-list-item";
 export * from "./sidebar-list";
@@ -17,5 +17,5 @@ export * from "./integration-card";
 export * from "./member-list";
 export * from "./member-list-item";
 export * from "./project-settings-member-defaults";
-export * from "./send-project-invitation-modal";
+export * from "./project-member-invite-modal";
 export * from "./confirm-project-member-remove";

web/components/project/member-list.tsx

@@ -21,10 +21,8 @@ export const ProjectMemberList: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
   // store
   const {
-    project: projectStore,
     projectMember: { projectMembers, fetchProjectMembers },
   } = useMobxStore();
 

web/components/project/members-autocomplete.tsx

@@ -0,0 +1,91 @@
+import { FC, useState, Fragment } from "react";
+import { usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
+import { Combobox, Transition } from "@headlessui/react";
+import { Check, ChevronDown, Search, User2 } from "lucide-react";
+// types
+import { IUserLite } from "types";
+
+export type MembersAutocompleteProps = {
+  value: IUserLite;
+  onChange: (value: IUserLite) => void;
+  members: IUserLite[];
+};
+
+export const MembersAutocomplete: FC<MembersAutocompleteProps> = (props) => {
+  const { value, onChange, members } = props;
+  // states
+  const [query, setQuery] = useState("");
+
+  const filteredMembers =
+    query === ""
+      ? members
+      : members.filter((person) =>
+          person.first_name.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
+        );
+
+  return (
+    <Combobox value={value} onChange={onChange}>
+      <div className="relative mt-1">
+        <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+          <Combobox.Input
+            className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+            placeholder="Select your Member"
+            displayValue={(person: string) => {
+              console.log(typeof person, person.length);
+              return person ? person.first_name : query;
+            }}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+          <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronDown className="h-5 w-5 text-gray-400" aria-hidden="true" />
+          </Combobox.Button>
+        </div>
+        <Transition
+          as={Fragment}
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+          afterLeave={() => setQuery("")}
+        >
+          <Combobox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+            {filteredMembers.length === 0 && query !== "" ? (
+              <div className="relative cursor-default select-none py-2 px-4 text-gray-700">
+                Enter email to invite the user to your project.
+              </div>
+            ) : (
+              filteredMembers.map((person) => (
+                <Combobox.Option
+                  key={person.id}
+                  className={({ active }) =>
+                    `relative cursor-default select-none py-2 pl-10 pr-4 ${
+                      active ? "bg-teal-600 text-white" : "text-gray-900"
+                    }`
+                  }
+                  value={person}
+                >
+                  {({ selected, active }) => (
+                    <>
+                      <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
+                        {person.first_name}
+                      </span>
+                      {selected ? (
+                        <span
+                          className={`absolute inset-y-0 left-0 flex items-center pl-3 ${
+                            active ? "text-white" : "text-teal-600"
+                          }`}
+                        >
+                          <Check className="h-5 w-5" aria-hidden="true" />
+                        </span>
+                      ) : null}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            )}
+          </Combobox.Options>
+        </Transition>
+      </div>
+    </Combobox>
+  );
+};

web/components/project/members-select.tsx

@@ -1,179 +0,0 @@
-import React, { useState } from "react";
-import { usePopper } from "react-popper";
-import { Placement } from "@popperjs/core";
-import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown, Search, User2 } from "lucide-react";
-// ui
-import { Avatar, AvatarGroup, Tooltip } from "@plane/ui";
-// types
-import { IUserLite } from "types";
-
-type Props = {
-  members: IUserLite[] | undefined;
-  className?: string;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  placement?: Placement;
-  hideDropdownArrow?: boolean;
-  disabled?: boolean;
-} & (
-  | {
-      value: string[];
-      onChange: (data: string[]) => void;
-      multiple: true;
-    }
-  | {
-      value: string;
-      onChange: (data: string) => void;
-      multiple: false;
-    }
-);
-
-export const MembersSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  members,
-  className = "",
-  buttonClassName = "",
-  optionsClassName = "",
-  placement,
-  hideDropdownArrow = false,
-  disabled = false,
-  multiple = true,
-}) => {
-  const [query, setQuery] = useState("");
-
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-
-  const options = members?.map((member) => ({
-    value: member.id,
-    query: member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar name={member.display_name} src={member.avatar} />
-        {member.display_name}
-      </div>
-    ),
-  }));
-
-  const filteredOptions =
-    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
-
-  const label = (
-    <Tooltip
-      tooltipHeading="Assignee"
-      tooltipContent={
-        value && value.length > 0
-          ? members
-              ?.filter((m) => value.includes(m.display_name))
-              .map((m) => m.display_name)
-              .join(", ")
-          : "No Assignee"
-      }
-      position="top"
-    >
-      <div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
-        {value && value.length > 0 && Array.isArray(value) ? (
-          <AvatarGroup showTooltip={false}>
-            {value.map((assigneeId) => {
-              const member = members?.find((m) => m.id === assigneeId);
-
-              if (!member) return null;
-
-              return <Avatar key={member.id} name={member.display_name} src={member.avatar} />;
-            })}
-          </AvatarGroup>
-        ) : (
-          <span
-            className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
-          "
-          >
-            <User2 className="h-3 w-3" />
-          </span>
-        )}
-      </div>
-    </Tooltip>
-  );
-
-  const comboboxProps: any = { value, onChange, disabled };
-  if (multiple) comboboxProps.multiple = true;
-
-  return (
-    <Combobox as="div" className={`flex-shrink-0 text-left ${className}`} {...comboboxProps}>
-      <Combobox.Button as={React.Fragment}>
-        <button
-          ref={setReferenceElement}
-          type="button"
-          className={`flex items-center justify-between gap-1 w-full text-xs ${
-            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-          } ${buttonClassName}`}
-        >
-          {label}
-          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
-        </button>
-      </Combobox.Button>
-      <Combobox.Options className="fixed z-10">
-        <div
-          className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
-          ref={setPopperElement}
-          style={styles.popper}
-          {...attributes.popper}
-        >
-          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-            <Search className="h-3.5 w-3.5 text-custom-text-300" />
-            <Combobox.Input
-              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search"
-              displayValue={(assigned: any) => assigned?.name}
-            />
-          </div>
-          <div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
-            {filteredOptions ? (
-              filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ active, selected }) =>
-                      `flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                        active ? "bg-custom-background-80" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && <Check className={`h-3.5 w-3.5`} />}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : (
-                <span className="flex items-center gap-2 p-1">
-                  <p className="text-left text-custom-text-200 ">No matching results</p>
-                </span>
-              )
-            ) : (
-              <p className="text-center text-custom-text-200">Loading...</p>
-            )}
-          </div>
-        </div>
-      </Combobox.Options>
-    </Combobox>
-  );
-};

web/components/project/project-member-invite-modal.tsx

@@ -20,6 +20,7 @@ import { IUser, TUserProjectRole } from "types";
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
+import { MembersAutocomplete } from "./members-autocomplete";
 
 type Props = {
   isOpen: boolean;
@@ -53,38 +54,31 @@ const workspaceService = new WorkspaceService();
 
 export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
   const { isOpen, setIsOpen, members, user, onSuccess } = props;
-
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
+  // hooks
   const { setToastAlert } = useToast();
+  // store
+  const {
+    user: { currentProjectRole },
+    projectMember: { projectMembers },
+  } = useMobxStore();
 
-  const { user: userStore } = useMobxStore();
-  const userRole = userStore.currentProjectRole;
-
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug as string) : null
-  );
+  const projectUsers = projectMembers?.map((m) => m.member) || [];
 
   const {
     formState: { errors, isSubmitting },
     reset,
     handleSubmit,
     control,
-  } = useForm<FormValues>();
+  } = useForm<FormValues>({ defaultValues });
 
   const { fields, append, remove } = useFieldArray({
     control,
     name: "members",
   });
 
-  const uninvitedPeople = people?.filter((person) => {
-    const isInvited = members?.find((member) => member.memberId === person.member.id);
-
-    return !isInvited;
-  });
-
   const onSubmit = async (formData: FormValues) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
 
@@ -124,28 +118,6 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
     });
   };
 
-  useEffect(() => {
-    if (fields.length === 0) {
-      append([
-        {
-          role: 5,
-          member_id: "",
-        },
-      ]);
-    }
-  }, [fields, append]);
-
-  const options = uninvitedPeople?.map((person) => ({
-    value: person.member.id,
-    query: person.member.display_name,
-    content: (
-      <div className="flex items-center gap-2">
-        <Avatar name={person.member?.display_name} src={person.member?.avatar} />
-        {person.member.display_name} ({person.member.first_name + " " + person.member.last_name})
-      </div>
-    ),
-  }));
-
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -187,6 +159,14 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                         <div key={field.id} className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start">
                           <div className="flex flex-col gap-1 col-span-7">
                             <Controller
+                              control={control}
+                              name={`members.${index}.member_id`}
+                              rules={{ required: "Please select a member" }}
+                              render={({ field: { value, onChange } }) => (
+                                <MembersAutocomplete value={value} onChange={onChange} members={projectUsers} />
+                              )}
+                            />
+                            {/* <Controller
                               control={control}
                               name={`members.${index}.member_id`}
                               rules={{ required: "Please select a member" }}
@@ -217,7 +197,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                   />
                                 );
                               }}
-                            />
+                            /> */}
                             {errors.members && errors.members[index]?.member_id && (
                               <span className="text-sm px-1 text-red-500">
                                 {errors.members[index]?.member_id?.message}
@@ -246,7 +226,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                     width="w-full"
                                   >
                                     {Object.entries(ROLE).map(([key, label]) => {
-                                      if (parseInt(key) > (userRole ?? 5)) return null;
+                                      if (parseInt(key) > (currentProjectRole ?? 5)) return null;
 
                                       return (
                                         <CustomSelect.Option key={key} value={key}>