From 8fa45a8347bd8e091b5996ff6dca7270b8525d4d Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Thu, 17 Sep 2020 16:23:26 +0200 Subject: [PATCH] F #3951: Add tooltip & some fixes (#223) --- .../FormControl/CheckboxController.js | 45 +++++++++++-------- .../components/FormStepper/FormListSelect.js | 4 +- .../public/components/Forms/FormWithSchema.js | 3 +- .../Create/Steps/BasicConfiguration/schema.js | 5 ++- .../Create/Steps/Clusters/index.js | 1 - .../Steps/{Networks => Networking}/index.js | 2 +- .../Steps/{Networks => Networking}/schema.js | 0 .../Roles/Steps/BasicConfiguration/index.js | 2 +- .../Roles/Steps/BasicConfiguration/schema.js | 2 +- .../Steps/Roles/Steps/Template/index.js | 2 +- .../Application/Create/Steps/index.js | 8 ++-- .../containers/Application/Create/index.js | 2 +- 12 files changed, 43 insertions(+), 33 deletions(-) rename src/fireedge/src/public/containers/Application/Create/Steps/{Networks => Networking}/index.js (97%) rename src/fireedge/src/public/containers/Application/Create/Steps/{Networks => Networking}/schema.js (100%) diff --git a/src/fireedge/src/public/components/FormControl/CheckboxController.js b/src/fireedge/src/public/components/FormControl/CheckboxController.js index e4460668398..c618a4b64a5 100644 --- a/src/fireedge/src/public/components/FormControl/CheckboxController.js +++ b/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 }) => ( ( - - onChange(e.target.checked)} - name={name} - checked={value} - color="primary" - inputProps={{ 'data-cy': cy }} - /> - } - label={label} - labelPlacement="end" - /> - {Boolean(error) && } - + + + onChange(e.target.checked)} + name={name} + checked={value} + color="primary" + inputProps={{ 'data-cy': cy }} + /> + } + label={label} + labelPlacement="end" + /> + {Boolean(error) && } + + )} 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 }; diff --git a/src/fireedge/src/public/components/FormStepper/FormListSelect.js b/src/fireedge/src/public/components/FormStepper/FormListSelect.js index 62e082ee088..1cb806cbf96 100644 --- a/src/fireedge/src/public/components/FormStepper/FormListSelect.js +++ b/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 => diff --git a/src/fireedge/src/public/components/Forms/FormWithSchema.js b/src/fireedge/src/public/components/Forms/FormWithSchema.js index 5c538f099c6..98f462f4c72 100644 --- a/src/fireedge/src/public/components/Forms/FormWithSchema.js +++ b/src/fireedge/src/public/components/Forms/FormWithSchema.js @@ -22,7 +22,7 @@ const FormWithSchema = ({ id, cy, fields }) => { return ( - {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 })} diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/BasicConfiguration/schema.js b/src/fireedge/src/public/containers/Application/Create/Steps/BasicConfiguration/schema.js index d6c52cec144..06f6821c8c1 100644 --- a/src/fireedge/src/public/containers/Application/Create/Steps/BasicConfiguration/schema.js +++ b/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) } diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/Clusters/index.js b/src/fireedge/src/public/containers/Application/Create/Steps/Clusters/index.js index a4f1a79bb61..b67b45358a2 100644 --- a/src/fireedge/src/public/containers/Application/Create/Steps/Clusters/index.js +++ b/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 diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/Networks/index.js b/src/fireedge/src/public/containers/Application/Create/Steps/Networking/index.js similarity index 97% rename from src/fireedge/src/public/containers/Application/Create/Steps/Networks/index.js rename to src/fireedge/src/public/containers/Application/Create/Steps/Networking/index.js index 4b5b544987c..759d0758d41 100644 --- a/src/fireedge/src/public/containers/Application/Create/Steps/Networks/index.js +++ b/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( diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/Networks/schema.js b/src/fireedge/src/public/containers/Application/Create/Steps/Networking/schema.js similarity index 100% rename from src/fireedge/src/public/containers/Application/Create/Steps/Networks/schema.js rename to src/fireedge/src/public/containers/Application/Create/Steps/Networking/schema.js diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/index.js b/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/index.js index 2c4f44a19bb..27704c53d59 100644 --- a/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/index.js +++ b/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: () => ( diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/schema.js b/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/schema.js index 2145d19ba3a..49ed2899775 100644 --- a/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/BasicConfiguration/schema.js +++ b/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', diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/Template/index.js b/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/Template/index.js index be1f85a028e..6d9edd92dff 100644 --- a/src/fireedge/src/public/containers/Application/Create/Steps/Roles/Steps/Template/index.js +++ b/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 }) diff --git a/src/fireedge/src/public/containers/Application/Create/Steps/index.js b/src/fireedge/src/public/containers/Application/Create/Steps/index.js index 2e6b6464b61..70d810977bd 100644 --- a/src/fireedge/src/public/containers/Application/Create/Steps/index.js +++ b/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 }); diff --git a/src/fireedge/src/public/containers/Application/Create/index.js b/src/fireedge/src/public/containers/Application/Create/index.js index 81141995898..63f1a90e603 100644 --- a/src/fireedge/src/public/containers/Application/Create/index.js +++ b/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) });