From 3ae52c2adf18599d8a7e39bf3c8c69ab86c912f2 Mon Sep 17 00:00:00 2001 From: "Jingwei.Zhang" Date: Thu, 25 Aug 2022 11:52:27 +0800 Subject: [PATCH] fix: fix port/port_range required check when create/edit port forwarding 1. Fix port/port_range required check when create/edit port forwarding 2. Update FormItem component required check: when the required property of formItem is true, it will check whether the value exists by default, also can cancel this check Change-Id: Idbc6d84361e1fd4670327eb96c60dbd4f5a32c13 --- src/components/FormItem/PortRange/index.jsx | 11 ++++++++--- src/components/FormItem/index.jsx | 7 ++++--- .../Detail/PortForwarding/actions/Create.jsx | 10 +++++----- .../FloatingIp/Detail/PortForwarding/actions/Edit.jsx | 9 +++++++-- src/utils/validate.js | 6 +++++- 5 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/components/FormItem/PortRange/index.jsx b/src/components/FormItem/PortRange/index.jsx index 39bf2e03..a25d576f 100644 --- a/src/components/FormItem/PortRange/index.jsx +++ b/src/components/FormItem/PortRange/index.jsx @@ -19,22 +19,27 @@ import { portRangeValidate, portRangeMessage } from 'utils/validate'; export default class index extends Component { static isFormItem = true; - getRules(rules) { + getRules(rules, required, requiredMessage) { const newRules = { validator: portRangeValidate, }; + if (required) { + newRules.required = required; + newRules.message = requiredMessage; + } return [newRules, ...rules]; } render() { const { componentProps, formItemProps } = this.props; - const placeholder = t('Please input port range'); + const { required, label } = componentProps || {}; + const placeholder = t('Please input') + label; const props = { placeholder, ...componentProps, }; const { rules, extra, ...rest } = formItemProps; - const newRules = this.getRules(rules); + const newRules = this.getRules(rules, required, placeholder); const newFormItemProps = { ...rest, rules: newRules, diff --git a/src/components/FormItem/index.jsx b/src/components/FormItem/index.jsx index acf5d411..56c48f77 100644 --- a/src/components/FormItem/index.jsx +++ b/src/components/FormItem/index.jsx @@ -126,6 +126,7 @@ export default class FormItem extends React.Component { onChange: PropTypes.func, dependencies: PropTypes.array, formref: PropTypes.object, + hasRequiredCheck: PropTypes.bool, }; static defaultProps = { @@ -289,11 +290,11 @@ export default class FormItem extends React.Component { validator, type = '', otherRule, - tip, name, hidden, label, placeholder, + hasRequiredCheck = true, } = this.props; if (hidden) { return []; @@ -312,10 +313,10 @@ export default class FormItem extends React.Component { } else if (type && type.includes('select')) { requiredRule.required = true; requiredRule.message = placeholder || `${t('Please select') + label}!`; - } else if (tip) { + } else if (hasRequiredCheck) { requiredRule.required = true; requiredRule.message = placeholder || `${t('Please input') + label}!`; - } else { + } else if (validator) { newRule.required = required; } } diff --git a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Create.jsx b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Create.jsx index 3af4e2d5..93a8b75a 100644 --- a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Create.jsx +++ b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Create.jsx @@ -15,7 +15,7 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; import { ModalAction } from 'containers/Action'; -import { isNull, isObject, isString } from 'lodash'; +import { isNull, isObject } from 'lodash'; import { getCanReachSubnetIdsWithRouterIdInComponent } from 'resources/neutron/router'; import { PortStore } from 'stores/neutron/port-extension'; import { @@ -411,8 +411,7 @@ export class CreatePortForwarding extends ModalAction { }; validateExternalPort = (rule, val) => { - const value = - val === undefined ? '' : isString(val) ? val : val.toString() || ''; + const value = val === undefined || val === null ? '' : `${val}`; const { internal_port: internalPort } = this.formRef.current.getFieldsValue( ['internal_port'] ); @@ -469,8 +468,7 @@ export class CreatePortForwarding extends ModalAction { }; validateInternalPort = (_, val) => { - const value = - val === undefined ? '' : isString(val) ? val : val.toString() || ''; + const value = val === undefined || val === null ? '' : `${val}`; if (!portRangeRegex.test(value)) { return Promise.resolve(true); } @@ -588,6 +586,7 @@ export class CreatePortForwarding extends ModalAction { dependencies: ['protocol', 'internal_port'], placeholder: externalPortExtra, extra: externalPortExtra, + hasRequiredCheck: false, }, { name: 'internal_port', @@ -599,6 +598,7 @@ export class CreatePortForwarding extends ModalAction { dependencies: ['protocol', 'external_port'], placeholder: internalPortExtra, extra: internalPortExtra, + hasRequiredCheck: false, }, ]; const [virtualAdapterItem, fixedIpItem] = getPortFormItem.call(this); diff --git a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Edit.jsx b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Edit.jsx index 78e81b48..0e88f099 100644 --- a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Edit.jsx +++ b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Edit.jsx @@ -193,9 +193,14 @@ export class Edit extends Base { min: 1, max: 65535, extra: t('Enter an integer value between 1 and 65535.'), + hasRequiredCheck: true, }; - Object.assign(externalPortItem, inputConfig); - Object.assign(internalPortItem, inputConfig); + Object.assign(externalPortItem, inputConfig, { + placeholder: t('Please input') + externalPortItem.label, + }); + Object.assign(internalPortItem, inputConfig, { + placeholder: t('Please input') + internalPortItem.label, + }); return items; } diff --git a/src/utils/validate.js b/src/utils/validate.js index d071071b..1631f3d5 100644 --- a/src/utils/validate.js +++ b/src/utils/validate.js @@ -558,9 +558,13 @@ export const macAddressValidate = (rule, value) => { }; export const portRangeValidate = (rule, value) => { - if (!value && !rule.required) { + const { required, message } = rule || {}; + if (!value && !required) { return Promise.resolve(); } + if (!value && required) { + return Promise.reject(message || t('Please input')); + } if (portRangeRegex.test(value)) { const ports = value.split(':'); if (Number(ports[0]) > Number(ports[1])) {