From 377aa9afa4fe8e76690533aafdbaac6e4973f97b Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Fri, 24 Sep 2021 10:44:28 +0200 Subject: [PATCH] F #5422: Add switch component (#1480) --- .../FormControl/SwitchController.js | 83 +++++++++++++++++++ .../client/components/FormControl/index.js | 2 + .../client/components/Forms/FormWithSchema.js | 1 + .../Steps/AdvancedOptions/schema.js | 20 ++++- .../BasicConfiguration/informationSchema.js | 4 +- src/fireedge/src/client/constants/index.js | 1 + 6 files changed, 107 insertions(+), 4 deletions(-) create mode 100644 src/fireedge/src/client/components/FormControl/SwitchController.js diff --git a/src/fireedge/src/client/components/FormControl/SwitchController.js b/src/fireedge/src/client/components/FormControl/SwitchController.js new file mode 100644 index 0000000000..096fbb1cbd --- /dev/null +++ b/src/fireedge/src/client/components/FormControl/SwitchController.js @@ -0,0 +1,83 @@ +/* ------------------------------------------------------------------------- * + * 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. * + * ------------------------------------------------------------------------- */ +import { memo } from 'react' +import PropTypes from 'prop-types' + +import { FormControl, FormControlLabel, Switch } from '@material-ui/core' +import { Controller } from 'react-hook-form' + +import { ErrorHelper, Tooltip } from 'client/components/FormControl' +import { Tr } from 'client/components/HOC' + +const SwitchController = memo( + ({ control, cy, name, label, tooltip, error, fieldProps }) => ( + ( + + onChange(e.target.checked)} + name={name} + checked={Boolean(value)} + color='secondary' + inputProps={{ 'data-cy': cy }} + {...fieldProps} + /> + } + label={ + + {Tr(label)} + {tooltip && } + + } + labelPlacement='end' + /> + {Boolean(error) && } + + )} + name={name} + control={control} + /> + ), + (prevProps, nextProps) => prevProps.error === nextProps.error +) + +SwitchController.propTypes = { + control: PropTypes.object, + cy: PropTypes.string, + name: PropTypes.string.isRequired, + label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + tooltip: PropTypes.string, + error: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.objectOf(PropTypes.any) + ]), + fieldProps: PropTypes.object +} + +SwitchController.defaultProps = { + control: {}, + cy: 'cy', + name: '', + label: '', + values: [], + error: false +} + +SwitchController.displayName = 'SwitchController' + +export default SwitchController diff --git a/src/fireedge/src/client/components/FormControl/index.js b/src/fireedge/src/client/components/FormControl/index.js index cc6a9c2de1..6cad2420cd 100644 --- a/src/fireedge/src/client/components/FormControl/index.js +++ b/src/fireedge/src/client/components/FormControl/index.js @@ -19,6 +19,7 @@ import FileController from 'client/components/FormControl/FileController' import PasswordController from 'client/components/FormControl/PasswordController' import SelectController from 'client/components/FormControl/SelectController' import SliderController from 'client/components/FormControl/SliderController' +import SwitchController from 'client/components/FormControl/SwitchController' import TextController from 'client/components/FormControl/TextController' import TimeController from 'client/components/FormControl/TimeController' @@ -34,6 +35,7 @@ export { PasswordController, SelectController, SliderController, + SwitchController, TextController, TimeController, diff --git a/src/fireedge/src/client/components/Forms/FormWithSchema.js b/src/fireedge/src/client/components/Forms/FormWithSchema.js index 62e0c181b3..7a519fe243 100644 --- a/src/fireedge/src/client/components/Forms/FormWithSchema.js +++ b/src/fireedge/src/client/components/Forms/FormWithSchema.js @@ -40,6 +40,7 @@ const INPUT_CONTROLLER = { [INPUT_TYPES.PASSWORD]: FC.PasswordController, [INPUT_TYPES.SELECT]: FC.SelectController, [INPUT_TYPES.SLIDER]: FC.SliderController, + [INPUT_TYPES.SWITCH]: FC.SwitchController, [INPUT_TYPES.CHECKBOX]: FC.CheckboxController, [INPUT_TYPES.AUTOCOMPLETE]: FC.AutocompleteController, [INPUT_TYPES.FILE]: FC.FileController, diff --git a/src/fireedge/src/client/components/Forms/Vm/AttachNicForm/Steps/AdvancedOptions/schema.js b/src/fireedge/src/client/components/Forms/Vm/AttachNicForm/Steps/AdvancedOptions/schema.js index 159f2e24d4..adfdedbc37 100644 --- a/src/fireedge/src/client/components/Forms/Vm/AttachNicForm/Steps/AdvancedOptions/schema.js +++ b/src/fireedge/src/client/components/Forms/Vm/AttachNicForm/Steps/AdvancedOptions/schema.js @@ -22,7 +22,22 @@ import { INPUT_TYPES } from 'client/constants' const RDP_FIELD = { name: 'RDP', label: 'RDP connection', - type: INPUT_TYPES.CHECKBOX, + type: INPUT_TYPES.SWITCH, + validation: yup + .boolean() + .transform(value => { + if (typeof value === 'boolean') return value + + return String(value).toUpperCase() === 'YES' + }) + .default(false), + grid: { md: 12 } +} + +const SSH_FIELD = { + name: 'SSH', + label: 'SSH connection', + type: INPUT_TYPES.SWITCH, validation: yup .boolean() .transform(value => { @@ -65,7 +80,7 @@ const ALIAS_FIELD = ({ nics = [] } = {}) => ({ const EXTERNAL_FIELD = { name: 'EXTERNAL', label: 'External', - type: INPUT_TYPES.CHECKBOX, + type: INPUT_TYPES.SWITCH, tooltip: 'The NIC will be attached as an external alias of the VM', dependOf: ALIAS_FIELD().name, htmlType: type => !type?.length ? INPUT_TYPES.HIDDEN : undefined, @@ -81,6 +96,7 @@ const EXTERNAL_FIELD = { export const FIELDS = props => [ RDP_FIELD, + SSH_FIELD, ALIAS_FIELD(props), EXTERNAL_FIELD ] diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/BasicConfiguration/informationSchema.js b/src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/BasicConfiguration/informationSchema.js index 7bb047ea77..5d4d04b48f 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/BasicConfiguration/informationSchema.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/BasicConfiguration/informationSchema.js @@ -45,7 +45,7 @@ const INSTANCES = { const HOLD = { name: 'hold', label: 'Start VM on hold state', - type: INPUT_TYPES.CHECKBOX, + type: INPUT_TYPES.SWITCH, tooltip: ` Sets the new VM to hold state, instead of pending. The scheduler will not deploy VMs in this state. @@ -57,7 +57,7 @@ const HOLD = { const PERSISTENT = { name: 'persistent', label: 'Instantiate as persistent', - type: INPUT_TYPES.CHECKBOX, + type: INPUT_TYPES.SWITCH, tooltip: ` Creates a private persistent copy of the template plus any image defined in DISK, and instantiates that copy.`, diff --git a/src/fireedge/src/client/constants/index.js b/src/fireedge/src/client/constants/index.js index 2ec55b8c17..73c100ea15 100644 --- a/src/fireedge/src/client/constants/index.js +++ b/src/fireedge/src/client/constants/index.js @@ -60,6 +60,7 @@ export const FILTER_POOL = { export const INPUT_TYPES = { AUTOCOMPLETE: 'autocomplete', CHECKBOX: 'checkbox', + SWITCH: 'switch', FILE: 'file', TIME: 'time', HIDDEN: 'hidden',