feat: added a temporary combobox for identity addition to project

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityModal.tsx

@@ -5,15 +5,8 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
-import {
-  Button,
-  FormControl,
-  Modal,
-  ModalClose,
-  ModalContent,
-  Select,
-  SelectItem
-} from "@app/components/v2";
+import { Button, FormControl, Modal, ModalClose, ModalContent } from "@app/components/v2";
+import { ComboBox } from "@app/components/v2/ComboBox";
 import { useOrganization, useWorkspace } from "@app/context";
 import {
   useAddIdentityToWorkspace,
@@ -25,8 +18,14 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
   .object({
-    identityId: yup.string().required("Identity id is required"),
-    role: yup.string()
+    identity: yup.object({
+      id: yup.string().required("Identity id is required"),
+      name: yup.string().required("Identity name is required")
+    }),
+    role: yup.object({
+      slug: yup.string().required("role slug is required"),
+      name: yup.string().required("role name is required")
+    })
   })
   .required();
 
@@ -79,12 +78,12 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
     resolver: yupResolver(schema)
   });
 
-  const onFormSubmit = async ({ identityId, role }: FormData) => {
+  const onFormSubmit = async ({ identity, role }: FormData) => {
     try {
       await addIdentityToWorkspaceMutateAsync({
         workspaceId,
-        identityId,
-        role: role || undefined
+        identityId: identity.id,
+        role: role.slug || undefined
       });
 
       createNotification({
@@ -114,34 +113,41 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
         reset();
       }}
     >
-      <ModalContent title="Add Identity to Project">
+      <ModalContent title="Add Identity to Project" bodyClassName="overflow-hidden">
         {filteredIdentityMembershipOrgs.length ? (
           <form onSubmit={handleSubmit(onFormSubmit)}>
             <Controller
               control={control}
-              name="identityId"
-              defaultValue={filteredIdentityMembershipOrgs?.[0]?.id}
+              name="identity"
+              defaultValue={{
+                id: filteredIdentityMembershipOrgs?.[0]?.id,
+                name: filteredIdentityMembershipOrgs?.[0]?.identity?.name
+              }}
               render={({ field: { onChange, ...field }, fieldState: { error } }) => (
                 <FormControl label="Identity" errorText={error?.message} isError={Boolean(error)}>
-                  <Select
-                    defaultValue={field.value}
-                    {...field}
-                    onValueChange={(e) => onChange(e)}
+                  <ComboBox
                     className="w-full"
-                  >
-                    {filteredIdentityMembershipOrgs.map(({ identity }) => (
-                      <SelectItem value={identity.id} key={`org-identity-${identity.id}`}>
-                        {identity.name}
-                      </SelectItem>
-                    ))}
-                  </Select>
+                    by="id"
+                    value={{ id: field.value.id, name: field.value.name }}
+                    defaultValue={{ id: field.value.id, name: field.value.name }}
+                    onSelectChange={(value) => onChange({ id: value.id, name: value.name })}
+                    displayValue={(el) => el.name}
+                    onFilter={({ value }, filterQuery) =>
+                      value.name.toLowerCase().includes(filterQuery.toLowerCase())
+                    }
+                    items={filteredIdentityMembershipOrgs.map(({ identity }) => ({
+                      key: identity.id,
+                      value: { id: identity.id, name: identity.name },
+                      label: identity.name
+                    }))}
+                  />
                 </FormControl>
               )}
             />
             <Controller
               control={control}
               name="role"
-              defaultValue=""
+              defaultValue={{ name: "", slug: "" }}
               render={({ field: { onChange, ...field }, fieldState: { error } }) => (
                 <FormControl
                   label="Role"
@@ -149,18 +155,22 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
                   isError={Boolean(error)}
                   className="mt-4"
                 >
-                  <Select
-                    defaultValue={field.value}
-                    {...field}
-                    onValueChange={(e) => onChange(e)}
+                  <ComboBox
                     className="w-full"
-                  >
-                    {(roles || []).map(({ name, slug }) => (
-                      <SelectItem value={slug} key={`st-role-${slug}`}>
-                        {name}
-                      </SelectItem>
-                    ))}
-                  </Select>
+                    by="slug"
+                    value={{ slug: field.value.slug, name: field.value.name }}
+                    defaultValue={{ slug: field.value.slug, name: field.value.name }}
+                    onSelectChange={(value) => onChange({ slug: value.slug, name: value.name })}
+                    displayValue={(el) => el.name}
+                    onFilter={({ value }, filterQuery) =>
+                      value.name.toLowerCase().includes(filterQuery.toLowerCase())
+                    }
+                    items={(roles || []).map(({ slug, name }) => ({
+                      key: slug,
+                      value: { slug, name },
+                      label: name
+                    }))}
+                  />
                 </FormControl>
               )}
             />