Merge pull request #1056 from topcoder-platform/diazz-admin-f2f-30376659

Topcoder Admin App - Roles Management Update

Author: jmgasper

src/apps/admin/src/lib/components/FieldSingleSelect/FieldSingleSelect.tsx

@@ -9,20 +9,22 @@ import {
     useMemo,
     useRef,
 } from 'react'
-import ReactSelect, { components, SingleValue } from 'react-select'
+import { components, SingleValue } from 'react-select'
+import CreatableReactSelect from 'react-select/creatable'
 import classNames from 'classnames'
 
 import { IconOutline, InputWrapper, LoadingSpinner } from '~/libs/ui'
 
 import { SelectOption } from '../../models'
+import ReactSelect from '../common/ReactSelectExport'
 
 import styles from './FieldSingleSelect.module.scss'
 
 interface Props {
     label?: string
     className?: string
     placeholder?: string
-    readonly value?: SelectOption
+    readonly value?: SelectOption | null
     readonly onChange?: (event: SelectOption) => void
     readonly disabled?: boolean
     readonly dirty?: boolean
@@ -32,6 +34,10 @@ interface Props {
     readonly onBlur?: (event: FocusEvent<HTMLInputElement>) => void
     readonly options: SelectOption[]
     readonly isLoading?: boolean
+    readonly classNameWrapper?: string
+    readonly onSearchChange?: (value: string) => void
+    readonly creatable?: boolean
+    readonly createLabel?: (inputValue: string) => string
 }
 
 // eslint-disable-next-line react/function-component-definition
@@ -60,6 +66,10 @@ export const FieldSingleSelect: FC<Props> = (props: Props) => {
         [],
     )
 
+    const Input = useMemo(() => (
+        props.creatable ? CreatableReactSelect : ReactSelect
+    ), [props.creatable])
+
     return (
         <InputWrapper
             {...props}
@@ -72,7 +82,7 @@ export const FieldSingleSelect: FC<Props> = (props: Props) => {
             hideInlineErrors={props.hideInlineErrors}
             ref={wrapRef as MutableRefObject<HTMLDivElement>}
         >
-            <ReactSelect
+            <Input
                 components={asyncSelectComponents}
                 className={classNames(props.className, styles.select)}
                 placeholder={props.placeholder ?? 'Enter'}
@@ -88,9 +98,13 @@ export const FieldSingleSelect: FC<Props> = (props: Props) => {
                     }
                 }}
                 value={props.value}
+                defaultValue={props.value}
                 isDisabled={props.disabled || props.isLoading}
                 onBlur={props.onBlur}
                 options={props.options}
+                onInputChange={props.onSearchChange}
+                createOptionPosition='first'
+                formatCreateLabel={props.createLabel}
             />
             {props.isLoading && (
                 <div className={styles.blockActionLoading}>

src/apps/admin/src/lib/components/RoleMembersFilters/RoleMembersFilters.tsx

@@ -66,6 +66,17 @@ export const RoleMembersFilters: FC<Props> = props => {
                     inputControl={register('userHandle')}
                     disabled={props.isLoading}
                 />
+                <InputText
+                    type='text'
+                    name='email'
+                    label='Email'
+                    placeholder='Enter'
+                    tabIndex={0}
+                    onChange={_.noop}
+                    classNameWrapper={styles.field}
+                    inputControl={register('email')}
+                    disabled={props.isLoading}
+                />
             </div>
 
             <div className={styles.blockBottom}>

src/apps/admin/src/lib/components/RoleMembersTable/RoleMembersTable.tsx

@@ -1,16 +1,15 @@
 /**
  * Role members table.
  */
-import { FC, useContext, useEffect, useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import _ from 'lodash'
 import classNames from 'classnames'
 
 import { useWindowSize, WindowSize } from '~/libs/shared'
 import { Button, InputCheckbox, Table, TableColumn } from '~/libs/ui'
 
-import { AdminAppContext } from '../../contexts'
 import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
-import { AdminAppContextType, RoleMemberInfo } from '../../models'
+import { RoleMemberInfo } from '../../models'
 import { MobileTableColumn } from '../../models/MobileTableColumn.model'
 import { Pagination } from '../common/Pagination'
 import { TableMobile } from '../common/TableMobile'
@@ -28,8 +27,6 @@ interface Props {
 }
 
 export const RoleMembersTable: FC<Props> = (props: Props) => {
-    const { loadUser, usersMapping, cancelLoadUser }: AdminAppContextType
-        = useContext(AdminAppContext)
     const {
         page,
         setPage,
@@ -51,27 +48,6 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
         unselectAll,
     }: useTableSelectionProps<string> = useTableSelection<string>(datasIds)
 
-    useEffect(() => {
-        // clear queue of currently loading user handles
-        cancelLoadUser()
-        // load user handles for members visible on the current page
-        _.forEach(results, result => {
-            loadUser(result.id)
-        })
-
-        return () => {
-            // clear queue of currently loading user handles after exit ui
-            cancelLoadUser()
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [results])
-
-    useEffect(() => {
-        _.forEach(results, result => {
-            result.handle = usersMapping[result.id]
-        })
-    }, [usersMapping, results])
-
     const columns = useMemo<TableColumn<RoleMemberInfo>[]>(
         () => [
             {
@@ -108,20 +84,12 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
             {
                 label: 'Handle',
                 propertyName: 'handle',
-                renderer: (data: RoleMemberInfo) => {
-                    if (!data.id) {
-                        return <></>
-                    }
-
-                    return (
-                        <>
-                            {!usersMapping[data.id]
-                                ? 'loading...'
-                                : usersMapping[data.id]}
-                        </>
-                    )
-                },
-                type: 'element',
+                type: 'text',
+            },
+            {
+                label: 'Email',
+                propertyName: 'email',
+                type: 'text',
             },
             {
                 className: styles.blockColumnAction,
@@ -145,7 +113,6 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
         [
             isSelectAll,
             selectedDatas,
-            usersMapping,
             props.isRemoving,
             props.isRemovingBool,
             props.doRemoveRoleMember,
@@ -171,12 +138,30 @@ export const RoleMembersTable: FC<Props> = (props: Props) => {
                 ),
                 type: 'element',
             },
+        ], [
+            {
+                ...columns[3],
+                className: '',
+                label: `${columns[3].label as string} label`,
+                mobileType: 'label',
+                renderer: () => (
+                    <div>
+                        {columns[3].label as string}
+                        :
+                    </div>
+                ),
+                type: 'element',
+            },
+            {
+                ...columns[3],
+                mobileType: 'last-value',
+            },
         ],
         [
             {
-                ...columns[3],
+                ...columns[4],
                 className: classNames(
-                    columns[3].className,
+                    columns[4].className,
                     styles.blockRightColumn,
                 ),
                 colSpan: 2,