Standardized input control for admin panel

packages/client-core/i18n/en/admin.json

@@ -347,8 +347,9 @@
       "updatePersonalInfo": "Update personal Information",
       "name": "Name",
       "avatar": "Avatar",
+      "role": "Role",
       "selectAvatar": "Select avatar",
-      "userRole": "User role",
+      "userRole": "User Role",
       "grantScope": "Grant Scope",
       "personalInfo": "Personal Information",
       "location": "Location",

packages/client-core/i18n/es/admin.json

@@ -347,6 +347,7 @@
       "updatePersonalInfo" : "Actualizar la información personal ",
       "name" : "Nombre ",
       "avatar" : "Avatar ",
+      "role": "Rol ",
       "selectAvatar" : "Seleccionar avatar ",
       "userRole" : "Rol de usuario ",
       "grantScope" : "Ámbito de concesión ",

packages/client-core/src/admin/adminRoutes.tsx

@@ -1,10 +1,7 @@
 import React, { Fragment, Suspense, useEffect } from 'react'
 import { Redirect, Switch } from 'react-router-dom'
 
-import { Engine } from '@xrengine/engine/src/ecs/classes/Engine'
-import { EngineActions } from '@xrengine/engine/src/ecs/classes/EngineState'
 import { initializeCoreSystems, initializeSceneSystems } from '@xrengine/engine/src/initializeEngine'
-import { dispatchAction } from '@xrengine/hyperflux'
 
 import CircularProgress from '@mui/material/CircularProgress'
 

packages/client-core/src/admin/common/AutoComplete.tsx

@@ -1,3 +1,4 @@
+import _ from 'lodash'
 import * as React from 'react'
 
 import { AutocompleteGetTagProps, useAutocomplete } from '@mui/base/AutocompleteUnstyled'
@@ -24,7 +25,6 @@ function Tag(props: TagProps) {
 export default function AutoComplete({ data, label, handleChangeScopeType, scopes = [] }) {
   const {
     getRootProps,
-    getInputLabelProps,
     getInputProps,
     getTagProps,
     getListboxProps,
@@ -47,29 +47,29 @@ export default function AutoComplete({ data, label, handleChangeScopeType, scope
     isOptionEqualToValue: (option, value) => option.type === value.type
   })
   return (
-    <div className={styles.root}>
-      <div {...getRootProps()}>
-        <label className={styles.label} {...getInputLabelProps()}>
-          {label}
-        </label>
-        <div ref={setAnchorEl} className={`${styles.inputWrapper} ${focused ? 'focused' : ''}`}>
-          {value.map((option: DataType, index: number) => (
-            <Tag className={styles.tag} label={option.type} {...getTagProps({ index })} />
-          ))}
-          <input {...getInputProps()} />
+    <React.Fragment>
+      <label>{_.upperFirst(label)}</label>
+      <div className={styles.root}>
+        <div {...getRootProps()}>
+          <div ref={setAnchorEl} className={`${styles.inputWrapper} ${focused ? 'focused' : ''}`}>
+            {value.map((option: DataType, index: number) => (
+              <Tag className={styles.tag} label={option.type} {...getTagProps({ index })} />
+            ))}
+            <input {...getInputProps()} />
+          </div>
         </div>
+        {groupedOptions.length > 0 && (
+          <ul className={styles.listbox} {...getListboxProps()}>
+            {(groupedOptions as typeof data).map((option, index) => (
+              <li {...getOptionProps({ option, index })}>
+                <span>{option.type}</span>
+                <CheckIcon fontSize="small" />
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
-      {groupedOptions.length > 0 ? (
-        <ul className={styles.listbox} {...getListboxProps()}>
-          {(groupedOptions as typeof data).map((option, index) => (
-            <li {...getOptionProps({ option, index })}>
-              <span>{option.type}</span>
-              <CheckIcon fontSize="small" />
-            </li>
-          ))}
-        </ul>
-      ) : null}
-    </div>
+    </React.Fragment>
   )
 }
 

packages/client-core/src/admin/common/InputSelect.tsx

@@ -1,6 +1,8 @@
-import React from 'react'
+import _ from 'lodash'
+import React, { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
 import MenuItem from '@mui/material/MenuItem'
 import Paper from '@mui/material/Paper'
@@ -9,55 +11,68 @@ import Select from '@mui/material/Select'
 import styles from '../styles/admin.module.scss'
 
 interface Props {
-  formErrors: any
   value: string
   handleInputChange: (e: any) => void
   name: string
-  menu: any
+  menu: InputSelectProps[]
+  error?: string
+  label?: string
+  endControl?: ReactNode
 }
 
-const InputSelect = ({ formErrors, value, handleInputChange, name, menu }: Props) => {
+export interface InputSelectProps {
+  value: string
+  label: string
+}
+
+const InputSelect = ({ error, value, handleInputChange, name, menu, label, endControl }: Props) => {
   const { t } = useTranslation()
 
   return (
-    <Paper component="div" className={formErrors.length > 0 ? styles.redBorder : styles.createInput}>
-      <FormControl fullWidth disabled={menu.length > 0 ? false : true}>
-        <Select
-          labelId="demo-controlled-open-select-label"
-          id="demo-controlled-open-select"
-          value={value}
-          fullWidth
-          onChange={handleInputChange}
-          name={name}
-          displayEmpty
-          className={styles.select}
-          MenuProps={{ classes: { paper: styles.selectPaper } }}
-        >
-          <MenuItem
-            value=""
-            disabled
-            classes={{
-              root: styles.menuItem
-            }}
-          >
-            <em>
-              {t('admin:components.common.select')} {name}
-            </em>
-          </MenuItem>
-          {menu.map((el, index) => (
-            <MenuItem
-              value={el.value}
-              key={index}
-              classes={{
-                root: styles.menuItem
-              }}
+    <React.Fragment>
+      {label && <label>{_.upperFirst(label)}</label>}
+      <Box sx={{ display: 'flex' }}>
+        <Paper component="div" className={error ? styles.redBorder : styles.createInput} sx={{ flexGrow: 1 }}>
+          <FormControl fullWidth disabled={menu.length > 0 ? false : true}>
+            <Select
+              labelId="demo-controlled-open-select-label"
+              id="demo-controlled-open-select"
+              value={value}
+              fullWidth
+              onChange={handleInputChange}
+              name={name}
+              displayEmpty
+              className={styles.select}
+              MenuProps={{ classes: { paper: styles.selectPaper } }}
             >
-              {el.label}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </Paper>
+              <MenuItem
+                value=""
+                disabled
+                classes={{
+                  root: styles.menuItem
+                }}
+              >
+                <em>
+                  {t('admin:components.common.select')} {label}
+                </em>
+              </MenuItem>
+              {menu.map((el, index) => (
+                <MenuItem
+                  value={el.value}
+                  key={index}
+                  classes={{
+                    root: styles.menuItem
+                  }}
+                >
+                  {el.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Paper>
+        {endControl}
+      </Box>
+    </React.Fragment>
   )
 }
 

packages/client-core/src/admin/common/InputText.tsx

@@ -8,20 +8,21 @@ import styles from '../styles/admin.module.scss'
 
 interface Props {
   value: string
-  formErrors: string
   handleInputChange: (e: any) => void
   name: string
+  label?: string
+  error?: string
 }
 
-const InputText = ({ value, handleInputChange, formErrors, name }: Props) => {
+const InputText = ({ value, handleInputChange, name, label, error }: Props) => {
   return (
     <React.Fragment>
-      <label>{_.upperFirst(name)}</label>
-      <Paper component="div" className={formErrors.length > 0 ? styles.redBorder : styles.createInput}>
+      {label && <label>{_.upperFirst(label)}</label>}
+      <Paper component="div" className={error ? styles.redBorder : styles.createInput}>
         <InputBase
           name={name}
           className={styles.input}
-          placeholder={`Enter ${name}`}
+          placeholder={`Enter ${label}`}
           value={value}
           onChange={handleInputChange}
         />

packages/client-core/src/admin/components/Bots/CreateBot.tsx

@@ -10,7 +10,6 @@ import { Autorenew, Face, Save } from '@mui/icons-material'
 import Button from '@mui/material/Button'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
-import Grid from '@mui/material/Grid'
 import IconButton from '@mui/material/IconButton'
 import Paper from '@mui/material/Paper'
 import Typography from '@mui/material/Typography'
@@ -20,19 +19,14 @@ import AddCommand from '../../common/AddCommand'
 import AlertMessage from '../../common/AlertMessage'
 import { useFetchAdminInstance } from '../../common/hooks/Instance.hooks'
 import { useFetchAdminLocations } from '../../common/hooks/Location.hooks'
-import InputSelect from '../../common/InputSelect'
+import InputSelect, { InputSelectProps } from '../../common/InputSelect'
 import InputText from '../../common/InputText'
 import { validateForm } from '../../common/validation/formValidation'
 import { BotService } from '../../services/BotsService'
 import { InstanceService, useInstanceState } from '../../services/InstanceService'
 import { LocationService, useLocationState } from '../../services/LocationService'
 import styles from '../../styles/admin.module.scss'
 
-interface Menu {
-  value: string
-  label: string
-}
-
 const CreateBot = () => {
   const [command, setCommand] = useState<BotCommands>({
     id: '',
@@ -165,14 +159,14 @@ const CreateBot = () => {
     setState({ ...state, [names]: value })
   }
 
-  const locationMenu: Menu[] = locationData.value.map((el) => {
+  const locationMenu: InputSelectProps[] = locationData.value.map((el) => {
     return {
       value: el.id,
       label: el.name
     }
   })
 
-  const instanceMenu: Menu[] = currentInstance.map((el) => {
+  const instanceMenu: InputSelectProps[] = currentInstance.map((el) => {
     return {
       value: el.id,
       label: el.ipAddress
@@ -198,57 +192,47 @@ const CreateBot = () => {
         <form style={{ marginTop: '40px' }}>
           <InputText
             name="name"
+            label={t('admin:components.bot.name')}
             handleInputChange={handleInputChange}
             value={state.name}
-            formErrors={formErrors.name}
+            error={formErrors.name}
           />
 
           <InputText
             name="description"
-            handleInputChange={handleInputChange}
+            label={t('admin:components.bot.description')}
             value={state.description}
-            formErrors={formErrors.description}
+            error={formErrors.description}
+            handleInputChange={handleInputChange}
           />
 
-          <label> {t('admin:components.bot.location')}</label>
-          <Grid container spacing={1}>
-            <Grid item xs={10}>
-              <InputSelect
-                formErrors={formErrors.location}
-                value={state.location}
-                handleInputChange={handleInputChange}
-                name="location"
-                menu={locationMenu}
-              />
-            </Grid>
-            <Grid item xs={2} style={{ display: 'flex' }}>
-              <div style={{ marginLeft: 'auto' }}>
-                <IconButton onClick={fetchAdminLocations} size="large">
-                  <Autorenew style={{ color: 'var(--iconButtonColor)' }} />
-                </IconButton>
-              </div>
-            </Grid>
-          </Grid>
+          <InputSelect
+            name="location"
+            label={t('admin:components.bot.location')}
+            value={state.location}
+            error={formErrors.location}
+            menu={locationMenu}
+            handleInputChange={handleInputChange}
+            endControl={
+              <IconButton onClick={fetchAdminLocations} size="large">
+                <Autorenew style={{ color: 'var(--iconButtonColor)' }} />
+              </IconButton>
+            }
+          />
 
-          <label> {t('admin:components.bot.instance')}</label>
-          <Grid container spacing={1}>
-            <Grid item xs={10}>
-              <InputSelect
-                formErrors={formErrors.location}
-                value={state.instance}
-                handleInputChange={handleInputChange}
-                name="instance"
-                menu={instanceMenu}
-              />
-            </Grid>
-            <Grid item xs={2} style={{ display: 'flex' }}>
-              <div style={{ marginLeft: 'auto' }}>
-                <IconButton onClick={fetchAdminInstances} size="large">
-                  <Autorenew style={{ color: 'var(--iconButtonColor)' }} />
-                </IconButton>
-              </div>
-            </Grid>
-          </Grid>
+          <InputSelect
+            name="instance"
+            label={t('admin:components.bot.instance')}
+            value={state.instance}
+            error={formErrors.location}
+            menu={instanceMenu}
+            handleInputChange={handleInputChange}
+            endControl={
+              <IconButton onClick={fetchAdminInstances} size="large">
+                <Autorenew style={{ color: 'var(--iconButtonColor)' }} />
+              </IconButton>
+            }
+          />
 
           <AddCommand
             command={command}