F OpenNebula/one#5422: Fix provision form styles

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

@@ -14,30 +14,49 @@
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
 /* eslint-disable jsdoc/require-jsdoc */
-import React, { useEffect } from 'react'
-import { Redirect } from 'react-router'
+import React, { useEffect, useState, memo } from 'react'
+import { Redirect, useHistory } from 'react-router'
 
-import { makeStyles, Container, LinearProgress } from '@material-ui/core'
+import { NavArrowLeft as ArrowBackIcon } from 'iconoir-react'
+import { makeStyles, Container, LinearProgress, IconButton, Typography } from '@material-ui/core'
 
-import { useFetch } from 'client/hooks'
+import { useFetch, useSocket } from 'client/hooks'
 import { useProviderApi } from 'client/features/One'
+import DebugLog from 'client/components/DebugLog'
 import ProvisionForm from 'client/containers/Provisions/Form/ProvisionForm'
 import { PATH } from 'client/apps/provision/routes'
+import { Translate } from 'client/components/HOC'
+import { T } from 'client/constants'
 
 const useStyles = makeStyles({
   container: {
     display: 'flex',
     flexDirection: 'column'
+  },
+  title: {
+    marginBottom: '1em',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.8em'
   }
 })
 
 function ProvisionCreateForm () {
   const classes = useStyles()
+  const [uuid, setUuid] = useState(undefined)
+
+  const { getProvisionSocket: socket } = useSocket()
   const { getProviders } = useProviderApi()
   const { data, fetchRequest, loading, error } = useFetch(getProviders)
 
+  const handleSetUuid = response => response && setUuid(response)
+
   useEffect(() => { fetchRequest() }, [])
 
+  if (uuid) {
+    return <DebugLog {...{ uuid, socket, title: <Title /> }} />
+  }
+
   if (error) {
     return <Redirect to={PATH.PROVISIONS.LIST} />
   }
@@ -46,9 +65,28 @@ function ProvisionCreateForm () {
     <LinearProgress color='secondary' />
   ) : (
     <Container className={classes.container} disableGutters>
-      <ProvisionForm />
+      <ProvisionForm handleAfterCreate={handleSetUuid} />
     </Container>
   )
 }
 
+const Title = memo(() => {
+  const classes = useStyles()
+  const history = useHistory()
+  const backToProvisionList = () => history.push(PATH.PROVISIONS.LIST)
+
+  return (
+    <div className={classes.title}>
+      <IconButton size='medium' onClick={backToProvisionList}>
+        <ArrowBackIcon />
+      </IconButton>
+      <Typography variant='body1' component='span'>
+        <Translate word={T.BackToList} values={T.Provisions} />
+      </Typography>
+    </div>
+  )
+})
+
+Title.displayName = 'BackToProvisionList'
+
 export default ProvisionCreateForm

src/fireedge/src/client/containers/Provisions/Form/ProvisionForm/Log.js

@@ -1,67 +0,0 @@
-/* ------------------------------------------------------------------------- *
- * Copyright 2002-2021, OpenNebula Project, OpenNebula Systems               *
- *                                                                           *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
- * not use this file except in compliance with the License. You may obtain   *
- * a copy of the License at                                                  *
- *                                                                           *
- * http://www.apache.org/licenses/LICENSE-2.0                                *
- *                                                                           *
- * Unless required by applicable law or agreed to in writing, software       *
- * distributed under the License is distributed on an "AS IS" BASIS,         *
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
- * See the License for the specific language governing permissions and       *
- * limitations under the License.                                            *
- * ------------------------------------------------------------------------- */
-/* eslint-disable jsdoc/require-jsdoc */
-import * as React from 'react'
-import PropTypes from 'prop-types'
-import { useHistory } from 'react-router'
-
-import { makeStyles, IconButton, Typography } from '@material-ui/core'
-import { NavArrowLeft as ArrowBackIcon } from 'iconoir-react'
-
-import { useSocket } from 'client/hooks'
-import DebugLog from 'client/components/DebugLog'
-import { Translate } from 'client/components/HOC'
-import { PATH } from 'client/apps/provision/routes'
-import { T } from 'client/constants'
-
-const useStyles = makeStyles({
-  title: {
-    marginBottom: '1em',
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: '0.8em'
-  }
-})
-
-const LogAfterCreateAction = ({ uuid }) => {
-  const classes = useStyles()
-  const history = useHistory()
-  const { getProvisionSocket } = useSocket()
-  const backToProvisionList = () => history.push(PATH.PROVISIONS.LIST)
-
-  return (
-    <DebugLog
-      uuid={uuid}
-      socket={getProvisionSocket}
-      title={(
-        <div className={classes.title}>
-          <IconButton size='medium' onClick={backToProvisionList}>
-            <ArrowBackIcon />
-          </IconButton>
-          <Typography variant='body1' component='span'>
-            <Translate word={T.BackToList} values={T.Provisions} />
-          </Typography>
-        </div>
-      )}
-    />
-  )
-}
-
-LogAfterCreateAction.propTypes = {
-  uuid: PropTypes.string.isRequired
-}
-
-export default LogAfterCreateAction

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

@@ -22,14 +22,12 @@ import { yupResolver } from '@hookform/resolvers'
 
 import FormStepper from 'client/components/FormStepper'
 import Steps from 'client/containers/Provisions/Form/ProvisionForm/Steps'
-import LogAfterCreateAction from 'client/containers/Provisions/Form/ProvisionForm/Log'
 
 import { useProvisionApi } from 'client/features/One'
 import { useGeneralApi } from 'client/features/General'
 import { set, cloneObject, mapUserInputs } from 'client/utils'
 
-const ProvisionForm = () => {
-  const [uuid, setUuid] = useState(undefined)
+const ProvisionForm = ({ handleAfterCreate }) => {
   const { createProvision } = useProvisionApi()
   const { enqueueInfo } = useGeneralApi()
 
@@ -41,7 +39,7 @@ const ProvisionForm = () => {
     resolver: yupResolver(resolvers())
   })
 
-  const onSubmit = formData => {
+  const onSubmit = async formData => {
     const { template, provider, configuration, inputs } = formData
     const { name, description } = configuration
     const providerName = provider?.[0]?.NAME
@@ -68,13 +66,10 @@ const ProvisionForm = () => {
         ?.map(input => ({ ...input, value: `${parseInputs[input?.name]}` }))
     }
 
-    createProvision(formatData)
-      .then(res => res && setUuid(res))
-      .then(() => enqueueInfo('Creating provision'))
-  }
+    const response = await createProvision(formatData)
+    enqueueInfo('Creating provision')
 
-  if (uuid) {
-    return <LogAfterCreateAction uuid={uuid} />
+    handleAfterCreate?.(response)
   }
 
   return (
@@ -85,9 +80,7 @@ const ProvisionForm = () => {
 }
 
 ProvisionForm.propTypes = {
-  id: PropTypes.string,
-  preloadedData: PropTypes.object,
-  initialValues: PropTypes.object
+  handleAfterCreate: PropTypes.func
 }
 
 export default ProvisionForm