F #3951: Add a way to go back from the log (#859)

src/fireedge/src/client/components/FormControl/SelectController.js

@@ -8,14 +8,14 @@ import ErrorHelper from 'client/components/FormControl/ErrorHelper'
 import { Tr } from 'client/components/HOC/Translate'
 
 const SelectController = memo(
-  ({ control, cy, name, label, multiple, native, values, error, fieldProps }) => (
-    <Controller
-      render={({ value: renderValue, onChange, onBlur }) => {
-        const defaultValue = multiple ? [values?.[0]?.value] : values?.[0]?.value
+  ({ control, cy, name, label, multiple, native, values, error, fieldProps }) => {
+    const defaultValue = multiple ? [values?.[0]?.value] : values?.[0]?.value
 
-        return (
+    return (
+      <Controller
+        render={({ value: optionSelected, onChange, onBlur }) => (
           <TextField
-            value={renderValue ?? defaultValue}
+            value={optionSelected ?? defaultValue}
             onBlur={onBlur}
             onChange={onChange}
             color='secondary'
@@ -35,12 +35,12 @@ const SelectController = memo(
               text
             ))}
           </TextField>
-        )
-      }}
-      name={name}
-      control={control}
-    />
-  ),
+        )}
+        name={name}
+        control={control}
+      />
+    )
+  },
   (prevProps, nextProps) => prevProps.error === nextProps.error
 )
 

src/fireedge/src/client/constants/translates.js

@@ -23,6 +23,7 @@ module.exports = {
   Select: 'Select',
   SelectGroup: 'Select a group',
   SelectRequest: 'Select request',
+  BackToList: 'Back to %s list',
 
   /* dashboard */
   InTotal: 'In Total',

src/fireedge/src/client/containers/Provisions/Form/Create/Steps/Provider/index.js

@@ -40,7 +40,7 @@ const Provider = () => ({
       setFormData(prev => ({ ...prev, [INPUTS_ID]: undefined }))
 
       isSelected
-        ? handleUnselect(ID, item => item.ID === ID)
+        ? handleUnselect(ID, item => item.ID !== ID)
         : handleSelect(provider)
     }
 

src/fireedge/src/client/containers/Provisions/Form/Create/index.js

@@ -1,19 +1,27 @@
 import React, { useState, useEffect } from 'react'
-import { Redirect } from 'react-router'
+import { Redirect, useHistory } from 'react-router'
 
-import { Container, LinearProgress } from '@material-ui/core'
+import { Container, IconButton, LinearProgress } from '@material-ui/core'
+import ArrowBackIcon from '@material-ui/icons/ChevronLeftRounded'
 import { useForm, FormProvider } from 'react-hook-form'
 import { yupResolver } from '@hookform/resolvers'
 
 import FormStepper from 'client/components/FormStepper'
 import Steps from 'client/containers/Provisions/Form/Create/Steps'
+import FormCreateStyles from 'client/containers/Provisions/Form/Create/styles'
 import DebugLog from 'client/components/DebugLog'
 
 import { useProvision, useSocket, useFetch } from 'client/hooks'
 import { PATH } from 'client/router/provision'
 import { set, mapUserInputs } from 'client/utils'
 
+import { Tr, Translate } from 'client/components/HOC'
+import { T } from 'client/constants'
+
 function ProvisionCreateForm () {
+  const classes = FormCreateStyles()
+  const history = useHistory()
+
   const [uuid, setUuid] = useState(undefined)
   const { getProvision } = useSocket()
 
@@ -60,17 +68,31 @@ function ProvisionCreateForm () {
   useEffect(() => { fetchRequest() }, [])
 
   if (uuid) {
-    return <DebugLog uuid={uuid} socket={getProvision} />
+    return (
+      <div className={classes.rootLog}>
+        <div className={classes.titleWrapper}>
+          <IconButton aria-label='back-to-list' size='medium'
+            onClick={() => history.push(PATH.PROVISIONS.LIST)}
+          >
+            <ArrowBackIcon fontSize='large' />
+          </IconButton>
+          <span className={classes.titleText}>
+            <Translate word={T.BackToList} values={T.Provisions} />
+          </span>
+        </div>
+        <DebugLog uuid={uuid} socket={getProvision} />
+      </div>
+    )
   }
 
   if (error) {
-    return <Redirect to={PATH.PROVIDERS.LIST} />
+    return <Redirect to={PATH.PROVISIONS.LIST} />
   }
 
   return (!data) || loading ? (
     <LinearProgress color='secondary' />
   ) : (
-    <Container style={{ display: 'flex', flexFlow: 'column' }} disableGutters>
+    <Container className={classes.root} disableGutters>
       <FormProvider {...methods}>
         <FormStepper steps={steps} schema={resolvers} onSubmit={onSubmit} />
       </FormProvider>

src/fireedge/src/client/containers/Provisions/Form/Create/styles.js

@@ -0,0 +1,22 @@
+import { makeStyles } from '@material-ui/core'
+
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexFlow: 'column'
+  },
+  rootLog: {
+    display: 'flex',
+    flexFlow: 'column',
+    height: '100%'
+  },
+  titleWrapper: {
+    marginBottom: '1em',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.8em'
+  },
+  titleText: {
+    ...theme.typography.body1
+  }
+}))

src/fireedge/src/client/containers/Settings/index.js

@@ -61,7 +61,7 @@ const Settings = () => {
   const { handleSubmit, setError, reset, formState, ...methods } = useForm({
     reValidateMode: 'onSubmit',
     defaultValues: settings,
-    resolver: yupResolver(FORM_SCHEMA)
+    resolver: () => yupResolver(FORM_SCHEMA)
   })
 
   React.useEffect(() => {
@@ -70,7 +70,7 @@ const Settings = () => {
       FORM_SCHEMA.cast(settings),
       { isSubmitted: false, error: false }
     )
-  }, [])
+  }, [settings])
 
   const onSubmit = dataForm => {
     const inputs = mapUserInputs(dataForm)

src/fireedge/src/client/utils/schema.js

@@ -60,6 +60,7 @@ export const schemaUserInput = ({ mandatory, name, type, options, defaultValue }
     }
     case 'list': {
       const values = getOptionsFromList(options)
+      const firstOption = values?.[0]?.value ?? undefined
 
       return {
         values,
@@ -68,7 +69,7 @@ export const schemaUserInput = ({ mandatory, name, type, options, defaultValue }
           .trim()
           .concat(requiredSchema(mandatory, name, yup.string()))
           .oneOf(values.map(({ value }) => value))
-          .default(defaultValue ?? undefined)
+          .default(defaultValue ?? firstOption)
       }
     }
     case 'array': {