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

@@ -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,

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;
       }
     }

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);

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;
   }
 

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])) {