F #3951: Add tooltip & some fixes (#223)

src/fireedge/src/public/components/FormControl/CheckboxController.js

@@ -1,31 +1,38 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 
-import { FormControl, FormControlLabel, Checkbox } from '@material-ui/core';
+import {
+  FormControl,
+  FormControlLabel,
+  Checkbox,
+  Tooltip
+} from '@material-ui/core';
 import { Controller } from 'react-hook-form';
 
 import ErrorHelper from 'client/components/FormControl/ErrorHelper';
 
 const CheckboxController = memo(
-  ({ control, cy, name, label, error }) => (
+  ({ control, cy, name, label, tooltip, error }) => (
     <Controller
       render={({ onChange, value }) => (
-        <FormControl error={Boolean(error)}>
-          <FormControlLabel
-            control={
-              <Checkbox
-                onChange={e => onChange(e.target.checked)}
-                name={name}
-                checked={value}
-                color="primary"
-                inputProps={{ 'data-cy': cy }}
-              />
-            }
-            label={label}
-            labelPlacement="end"
-          />
-          {Boolean(error) && <ErrorHelper label={error?.message} />}
-        </FormControl>
+        <Tooltip title={tooltip ?? ''}>
+          <FormControl error={Boolean(error)}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  onChange={e => onChange(e.target.checked)}
+                  name={name}
+                  checked={value}
+                  color="primary"
+                  inputProps={{ 'data-cy': cy }}
+                />
+              }
+              label={label}
+              labelPlacement="end"
+            />
+            {Boolean(error) && <ErrorHelper label={error?.message} />}
+          </FormControl>
+        </Tooltip>
       )}
       name={name}
       control={control}
@@ -39,6 +46,7 @@ CheckboxController.propTypes = {
   cy: PropTypes.string,
   name: PropTypes.string.isRequired,
   label: PropTypes.string,
+  tooltip: PropTypes.string,
   error: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.objectOf(PropTypes.any)
@@ -50,6 +58,7 @@ CheckboxController.defaultProps = {
   cy: 'cy',
   name: '',
   label: '',
+  tooltip: undefined,
   values: [],
   error: false
 };

src/fireedge/src/public/components/FormStepper/FormListSelect.js

@@ -9,7 +9,7 @@ import { EmptyCard } from 'client/components/Cards';
 
 function FormListSelect({ step, data, setFormData }) {
   const { errors } = useFormContext();
-  const { id, onlyOneSelect, preRender, list, ItemComponent } = step;
+  const { id, multiple, preRender, list, ItemComponent } = step;
 
   useEffect(() => {
     if (preRender) preRender();
@@ -18,7 +18,7 @@ function FormListSelect({ step, data, setFormData }) {
   const handleSelect = index =>
     setFormData(prevData => ({
       ...prevData,
-      [id]: onlyOneSelect ? [index] : [...prevData[id], index]
+      [id]: multiple ? [...prevData[id], index] : [index]
     }));
 
   const handleUnselect = indexRemove =>

src/fireedge/src/public/components/Forms/FormWithSchema.js

@@ -22,7 +22,7 @@ const FormWithSchema = ({ id, cy, fields }) => {
 
   return (
     <Grid container spacing={1}>
-      {fields?.map(({ name, type, label, values, dependOf }) => {
+      {fields?.map(({ name, type, label, values, dependOf, tooltip }) => {
         const dataCy = `${cy}-${name}`;
         const inputName = id ? `${id}.${name}` : name;
         const formError = id ? errors[id] : errors;
@@ -39,6 +39,7 @@ const FormWithSchema = ({ id, cy, fields }) => {
                 cy: dataCy,
                 name: inputName,
                 label,
+                tooltip,
                 values: dependOf ? values(dependValue) : values,
                 error: inputError
               })}

src/fireedge/src/public/containers/Application/Create/Steps/BasicConfiguration/schema.js

@@ -58,8 +58,9 @@ export const FORM_FIELDS = [
   },
   {
     name: 'ready_status_gate',
-    label:
-      'Wait for VMs to report that they are READY via OneGate to consider them running',
+    label: 'Wait for Tier Full Boot',
+    tooltip:
+      'Wait for VM/containers to finish their boot process to report that they are READY and allow children tiers to spawn',
     type: TYPE_INPUT.CHECKBOX,
     validation: yup.boolean().default(false)
   }

src/fireedge/src/public/containers/Application/Create/Steps/Clusters/index.js

@@ -17,7 +17,6 @@ const Clusters = () => {
       label: 'Where will it run?',
       content: FormListSelect,
       resolver: STEP_FORM_SCHEMA,
-      onlyOneSelect: true,
       preRender: getClusters,
       list: clusters?.sort((a, b) => a.ID - b.ID),
       ItemComponent: ClusterCard

src/fireedge/src/public/containers/Application/Create/Steps/Networks/index.js → src/fireedge/src/public/containers/Application/Create/Steps/Networking/index.js

@@ -12,7 +12,7 @@ import ListCards from 'client/components/List/ListCards';
 import { FORM_FIELDS, NETWORK_FORM_SCHEMA, STEP_FORM_SCHEMA } from './schema';
 
 const Networks = () => {
-  const STEP_ID = 'networks';
+  const STEP_ID = 'networking';
   const { getVNetworks, getVNetworksTemplates } = useOpennebula();
 
   return useMemo(

src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/index.js

@@ -10,7 +10,7 @@ const BasicConfiguration = () => {
 
   return {
     id: STEP_ID,
-    label: 'Role configuration',
+    label: 'Configuration',
     content: FormStep,
     resolver: STEP_FORM_SCHEMA,
     FormComponent: () => (

src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/schema.js

@@ -12,7 +12,7 @@ export const FORM_FIELDS = [
       .min(1)
       .trim()
       .required('Name field is required')
-      .default('Main')
+      .default('')
   },
   {
     name: 'cardinality',

src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/Template/index.js

@@ -34,7 +34,7 @@ const Template = () => {
 
   return {
     id: STEP_ID,
-    label: 'Template VM',
+    label: 'Template',
     content: FormStep,
     resolver: STEP_FORM_SCHEMA,
     FormComponent: props => ProcessScreen({ screens: SCREENS, ...props })

src/fireedge/src/public/containers/Application/Create/Steps/index.js

@@ -2,21 +2,21 @@ import * as yup from 'yup';
 
 import BasicConfiguration from './BasicConfiguration';
 import Clusters from './Clusters';
-import Networks from './Networks';
+import Networking from './Networking';
 import Roles from './Roles';
 
 const Steps = () => {
   const basic = BasicConfiguration();
   const clusters = Clusters();
-  const networks = Networks();
+  const networking = Networking();
   const roles = Roles();
 
-  const steps = [basic, clusters, networks, roles];
+  const steps = [basic, clusters, networking, roles];
 
   const resolvers = yup.object({
     [basic.id]: basic.resolver,
     [clusters.id]: clusters.resolver,
-    [networks.id]: networks.resolver,
+    [networking.id]: networking.resolver,
     [roles.id]: roles.resolver
   });
 

src/fireedge/src/public/containers/Application/Create/index.js

@@ -11,7 +11,7 @@ function ApplicationCreate() {
   const { steps, defaultValues, resolvers } = Steps();
 
   const methods = useForm({
-    mode: 'onBlur',
+    mode: 'onSubmit',
     defaultValues,
     resolver: yupResolver(resolvers)
   });