fix: project list and made new request form restricted route

Author: hentrymartin

src/apps/copilots/src/copilots.routes.tsx

@@ -32,6 +32,7 @@ export const childRoutes = [
         authRequired: true,
         element: <CopilotsRequestForm />,
         id: 'CopilotRequestForm',
+        rolesRequired: [UserRole.administrator, UserRole.projectManager] as UserRole[],
         route: '/requests/new',
     },
     {

src/apps/copilots/src/pages/copilot-request-form/index.tsx

@@ -1,14 +1,14 @@
 import { FC, useContext, useMemo, useState } from 'react'
-import { bind, isEmpty } from 'lodash'
+import { bind, debounce, isEmpty } from 'lodash'
 import { toast } from 'react-toastify'
 import classNames from 'classnames'
 
 import { profileContext, ProfileContextData } from '~/libs/core'
 import { Button, IconSolid, InputDatePicker, InputMultiselectOption,
-    InputRadio, InputSelect, InputSelectOption, InputSelectReact, InputText, InputTextarea } from '~/libs/ui'
+    InputRadio, InputSelect, InputSelectReact, InputText, InputTextarea } from '~/libs/ui'
 import { InputSkillSelector } from '~/libs/shared'
 
-import { ProjectsResponse, useProjects } from '../../services/projects'
+import { getProjects } from '../../services/projects'
 import { ProjectTypes, ProjectTypeValues } from '../../constants'
 import { saveCopilotRequest } from '../../services/copilot-requests'
 
@@ -20,20 +20,9 @@ const CopilotRequestForm: FC<{}> = () => {
     const [formValues, setFormValues] = useState<any>({})
     const [isFormChanged, setIsFormChanged] = useState(false)
     const [formErrors, setFormErrors] = useState<any>({})
-    const [searchTerm, setSearchTerm] = useState<string>('')
-    const { data: projectsData }: ProjectsResponse = useProjects(searchTerm)
     const [existingCopilot, setExistingCopilot] = useState<string>('')
     const [paymentType, setPaymentType] = useState<string>('')
 
-    const projects = useMemo(
-        () => (
-            projectsData
-                ? projectsData.map(project => ({ label: project.name, value: project.id }))
-                : []
-        ),
-        [projectsData],
-    )
-
     const projectTypes = ProjectTypes ? ProjectTypes.map(project => ({
         label: project,
         value: ProjectTypeValues[project],
@@ -63,18 +52,12 @@ const CopilotRequestForm: FC<{}> = () => {
         setPaymentType(t)
     }
 
-    function filterProjects(option: InputSelectOption, value: string): boolean {
-        setSearchTerm(value)
-        return (
-            option.label
-                ?.toString()
-                .toLowerCase()
-                .includes(value.toLowerCase()) ?? false
-        )
-    }
-
-    function handleProjectSearch(inputValue: string): void {
-        setSearchTerm(inputValue)
+    async function handleProjectSearch(inputValue: string): Promise<Array<{
+        label: string;
+        value: string;
+    }>> {
+        const response = await getProjects(inputValue)
+        return response.map(project => ({ label: project.name, value: project.id }))
     }
 
     function handleProjectSelect(option: React.ChangeEvent<HTMLInputElement>): void {
@@ -268,6 +251,11 @@ const CopilotRequestForm: FC<{}> = () => {
         setFormErrors(updatedFormErrors)
     }
 
+    const debouncedProjectSearch = useMemo(() => debounce((inputValue: string, callback: (options: any[]) => void) => {
+        handleProjectSearch(inputValue)
+            .then(callback)
+    }, 300), [])
+
     return (
         <div className={classNames('d-flex flex-column justify-content-center align-items-center', styles.container)}>
             <div className={styles.form}>
@@ -290,15 +278,14 @@ const CopilotRequestForm: FC<{}> = () => {
                     <p className={styles.formRow}>Select the project you want the copilot for</p>
                     <InputSelectReact
                         tabIndex={0}
-                        options={projects}
                         value={formValues.projectId || ''}
                         onChange={handleProjectSelect}
-                        onInputChange={handleProjectSearch}
+                        loadOptions={debouncedProjectSearch}
+                        async
                         name='project'
                         label='Project'
                         placeholder='Start typing the name of the project'
                         dirty
-                        filterOption={filterProjects}
                         error={formErrors.projectId}
                     />
                     <p className={styles.formRow}>

src/apps/copilots/src/services/projects.ts

@@ -42,3 +42,9 @@ export const useProjects = (search?: string, config?: {isPaused?: () => boolean,
         revalidateOnFocus: false,
     })
 }
+
+export const getProjects = (search?: string, filter?: any): Promise<Project[]> => {
+    const params = { name: `"${search}"`, ...filter }
+    const url = buildUrl(baseUrl, params)
+    return xhrGetAsync<Project[]>(url)
+}

src/libs/ui/lib/components/form/form-groups/form-input/input-select-react/InputSelectReact.tsx

@@ -8,6 +8,8 @@ import {
     useRef,
 } from 'react'
 import { find } from 'lodash'
+import AsyncCreatable from 'react-select/async-creatable'
+import AsyncSelect from 'react-select/async'
 import CreatableSelect from 'react-select/creatable'
 import ReactSelect, { GroupBase, OptionsOrGroups } from 'react-select'
 import classNames from 'classnames'
@@ -33,7 +35,7 @@ interface InputSelectReactProps {
     readonly name: string
     readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void
     readonly onInputChange?: (newValue: string) => void
-    readonly options: OptionsOrGroups<unknown, GroupBase<unknown>>
+    readonly options?: OptionsOrGroups<unknown, GroupBase<unknown>>
     readonly placeholder?: string
     readonly tabIndex?: number
     readonly value?: string
@@ -43,6 +45,8 @@ interface InputSelectReactProps {
     readonly onBlur?: (event: FocusEvent<HTMLInputElement>) => void
     readonly openMenuOnClick?: boolean
     readonly openMenuOnFocus?: boolean
+    readonly async?: boolean
+    readonly loadOptions?: (inputValue: string, callback: (option: any) => void) => void
     readonly filterOption?: (option: InputSelectOption, value: string) => boolean
 }
 
@@ -120,9 +124,13 @@ const InputSelectReact: FC<InputSelectReactProps> = props => {
         } as FocusEvent<HTMLInputElement>)
     }
 
-    const Input = useMemo(() => (
-        props.creatable ? CreatableSelect : ReactSelect
-    ), [props.creatable])
+    const Input = useMemo(() => {
+        if (props.async) {
+            return props.creatable ? AsyncCreatable : AsyncSelect
+        }
+
+        return props.creatable ? CreatableSelect : ReactSelect
+    }, [props.creatable, props.async])
 
     return (
         <InputWrapper
@@ -144,6 +152,7 @@ const InputSelectReact: FC<InputSelectReactProps> = props => {
                         styles.select,
                     )
                 }
+                loadOptions={props.loadOptions}
                 onChange={handleSelect}
                 onInputChange={props.onInputChange}
                 menuPortalTarget={menuPortalTarget}