feat: Allow to skip submitting empty values in form data (#5830)

src/core/components/parameter-include-empty.jsx

@@ -1,24 +1,19 @@
 import React from "react"
 import cx from "classnames"
 import PropTypes from "prop-types"
-import ImPropTypes from "react-immutable-proptypes"
 
-export const ParameterIncludeEmpty = ({ param, isIncluded, onChange, isDisabled }) => {
+export const ParameterIncludeEmpty = ({ isIncluded, onChange, isDisabled }) => {
   const onCheckboxChange = e => {
     onChange(e.target.checked)
   }
-  if(!param.get("allowEmptyValue")) {
-    return null
-  }
-  return <div className={cx("parameter__empty_value_toggle", {
+  return <label className={cx("parameter__empty_value_toggle", {
     "disabled": isDisabled
   })}>
     <input type="checkbox" disabled={isDisabled} checked={!isDisabled && isIncluded} onChange={onCheckboxChange} />
     Send empty value
-  </div>
+  </label>
 }
 ParameterIncludeEmpty.propTypes = {
-  param: ImPropTypes.map.isRequired,
   isIncluded: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,

src/core/components/parameter-row.jsx

@@ -3,7 +3,7 @@ import { Map, List } from "immutable"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import win from "core/window"
-import { getSampleSchema, getExtensions, getCommonExtensions, numberToString, stringify } from "core/utils"
+import { getSampleSchema, getExtensions, getCommonExtensions, numberToString, stringify, isEmptyValue } from "core/utils"
 import getParameterSchema from "../../helpers/get-parameter-schema.js"
 
 export default class ParameterRow extends Component {
@@ -336,12 +336,11 @@ export default class ParameterRow extends Component {
           }
 
           {
-            !bodyParam && isExecute ?
+            !bodyParam && isExecute && param.get("allowEmptyValue") ?
             <ParameterIncludeEmpty
               onChange={this.onChangeIncludeEmpty}
               isIncluded={specSelectors.parameterInclusionSettingFor(pathMethod, param.get("name"), param.get("in"))}
-              isDisabled={value && value.size !== 0}
-              param={param} />
+              isDisabled={!isEmptyValue(value)} />
             : null
           }
 

src/core/components/parameters/parameters.jsx

@@ -196,6 +196,7 @@ export default class Parameters extends Component {
                 specPath={specPath.slice(0, -1).push("requestBody")}
                 requestBody={requestBody}
                 requestBodyValue={oas3Selectors.requestBodyValue(...pathMethod)}
+                requestBodyInclusionSetting={oas3Selectors.requestBodyInclusionSetting(...pathMethod)}
                 isExecute={isExecute}
                 activeExamplesKey={oas3Selectors.activeExamplesMember(
                   ...pathMethod,
@@ -222,6 +223,13 @@ export default class Parameters extends Component {
                   }
                   oas3Actions.setRequestBodyValue({ value, pathMethod })
                 }}
+                onChangeIncludeEmpty={(name, value) => {
+                  oas3Actions.setRequestBodyInclusion({
+                    pathMethod,
+                    value,
+                    name,
+                  })
+                }}
                 contentType={oas3Selectors.requestContentType(...pathMethod)}/>
             </div>
           </div>

src/core/plugins/oas3/actions.js

@@ -3,6 +3,7 @@
 
 export const UPDATE_SELECTED_SERVER = "oas3_set_servers"
 export const UPDATE_REQUEST_BODY_VALUE = "oas3_set_request_body_value"
+export const UPDATE_REQUEST_BODY_INCLUSION = "oas3_set_request_body_inclusion"
 export const UPDATE_ACTIVE_EXAMPLES_MEMBER = "oas3_set_active_examples_member"
 export const UPDATE_REQUEST_CONTENT_TYPE = "oas3_set_request_content_type"
 export const UPDATE_RESPONSE_CONTENT_TYPE = "oas3_set_response_content_type"
@@ -22,6 +23,13 @@ export function setRequestBodyValue ({ value, pathMethod }) {
   }
 }
 
+export function setRequestBodyInclusion ({ value, pathMethod, name }) {
+  return {
+    type: UPDATE_REQUEST_BODY_INCLUSION,
+    payload: { value, pathMethod, name }
+  }
+}
+
 export function setActiveExamplesMember ({ name, pathMethod, contextType, contextName }) {
   return {
     type: UPDATE_ACTIVE_EXAMPLES_MEMBER,

src/core/plugins/oas3/components/request-body.jsx

@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { Map, OrderedMap, List } from "immutable"
-import { getCommonExtensions, getSampleSchema, stringify } from "core/utils"
+import { getCommonExtensions, getSampleSchema, stringify, isEmptyValue } from "core/utils"
 
 function getDefaultRequestBodyValue(requestBody, mediaType, activeExamplesKey) {
   let mediaTypeValue = requestBody.getIn(["content", mediaType])
@@ -37,6 +37,7 @@ function getDefaultRequestBodyValue(requestBody, mediaType, activeExamplesKey) {
 const RequestBody = ({
   requestBody,
   requestBodyValue,
+  requestBodyInclusionSetting,
   getComponent,
   getConfigs,
   specSelectors,
@@ -45,6 +46,7 @@ const RequestBody = ({
   isExecute,
   specPath,
   onChange,
+  onChangeIncludeEmpty,
   activeExamplesKey,
   updateActiveExamplesKey,
 }) => {
@@ -58,6 +60,7 @@ const RequestBody = ({
   const HighlightCode = getComponent("highlightCode")
   const ExamplesSelectValueRetainer = getComponent("ExamplesSelectValueRetainer")
   const Example = getComponent("Example")
+  const ParameterIncludeEmpty = getComponent("ParameterIncludeEmpty")
 
   const { showCommonExtensions } = getConfigs()
 
@@ -155,17 +158,26 @@ const RequestBody = ({
                       </td>
                       <td className="parameters-col_description">
                         <Markdown source={ description }></Markdown>
-                        {isExecute ? <div><JsonSchemaForm
-                          fn={fn}
-                          dispatchInitialValue={!isFile}
-                          schema={prop}
-                          description={key}
-                          getComponent={getComponent}
-                          value={currentValue === undefined ? initialValue : currentValue}
-                          onChange={(value) => {
-                            onChange(value, [key])
-                          }}
-                        /></div> : null }
+                        {isExecute ? <div>
+                          <JsonSchemaForm
+                            fn={fn}
+                            dispatchInitialValue={!isFile}
+                            schema={prop}
+                            description={key}
+                            getComponent={getComponent}
+                            value={currentValue === undefined ? initialValue : currentValue}
+                            onChange={(value) => {
+                              onChange(value, [key])
+                            }}
+                          />
+                          {required ? null : (
+                            <ParameterIncludeEmpty
+                              onChange={(value) => onChangeIncludeEmpty(key, value)}
+                              isIncluded={requestBodyInclusionSetting.get(key)}
+                              isDisabled={!isEmptyValue(currentValue)}
+                            />
+                          )}
+                        </div> : null }
                       </td>
                       </tr>
             })
@@ -242,6 +254,7 @@ const RequestBody = ({
 RequestBody.propTypes = {
   requestBody: ImPropTypes.orderedMap.isRequired,
   requestBodyValue: ImPropTypes.orderedMap.isRequired,
+  requestBodyInclusionSetting: ImPropTypes.Map.isRequired,
   getComponent: PropTypes.func.isRequired,
   getConfigs: PropTypes.func.isRequired,
   fn: PropTypes.object.isRequired,
@@ -249,6 +262,7 @@ RequestBody.propTypes = {
   contentType: PropTypes.string,
   isExecute: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
+  onChangeIncludeEmpty: PropTypes.func.isRequired,
   specPath: PropTypes.array.isRequired,
   activeExamplesKey: PropTypes.string,
   updateActiveExamplesKey: PropTypes.func,

src/core/plugins/oas3/reducers.js

@@ -1,6 +1,7 @@
 import {
   UPDATE_SELECTED_SERVER,
   UPDATE_REQUEST_BODY_VALUE,
+  UPDATE_REQUEST_BODY_INCLUSION,
   UPDATE_ACTIVE_EXAMPLES_MEMBER,
   UPDATE_REQUEST_CONTENT_TYPE,
   UPDATE_SERVER_VARIABLE_VALUE,
@@ -16,6 +17,10 @@ export default {
     let [path, method] = pathMethod
     return state.setIn( [ "requestData", path, method, "bodyValue" ], value)
   },
+  [UPDATE_REQUEST_BODY_INCLUSION]: (state, { payload: { value, pathMethod, name } } ) =>{
+    let [path, method] = pathMethod
+    return state.setIn( [ "requestData", path, method, "bodyInclusion", name ], value)
+  },
   [UPDATE_ACTIVE_EXAMPLES_MEMBER]: (state, { payload: { name, pathMethod, contextType, contextName } } ) =>{
     let [path, method] = pathMethod
     return state.setIn( [ "examples", path, method, contextType, contextName, "activeExample" ], name)

src/core/plugins/oas3/selectors.js

@@ -1,4 +1,4 @@
-import { OrderedMap } from "immutable"
+import { OrderedMap, Map } from "immutable"
 import { isOAS3 as isOAS3Helper } from "./helpers"
 
 
@@ -26,6 +26,11 @@ export const requestBodyValue = onlyOAS3((state, path, method) => {
   }
 )
 
+export const requestBodyInclusionSetting = onlyOAS3((state, path, method) => {
+    return state.getIn(["requestData", path, method, "bodyInclusion"]) || Map()
+  }
+)
+
 export const activeExamplesMember = onlyOAS3((state, path, method, type, name) => {
     return state.getIn(["examples", path, method, type, name, "activeExample"]) || null
   }

src/core/plugins/spec/actions.js

@@ -5,7 +5,7 @@ import serializeError from "serialize-error"
 import isString from "lodash/isString"
 import debounce from "lodash/debounce"
 import set from "lodash/set"
-import { isJSONObject, paramToValue } from "core/utils"
+import { isJSONObject, paramToValue, isEmptyValue } from "core/utils"
 
 // Actions conform to FSA (flux-standard-actions)
 // {type: string,payload: Any|Error, meta: obj, error: bool}
@@ -401,11 +401,12 @@ export const executeRequest = (req) =>
       req.requestContentType = oas3Selectors.requestContentType(pathName, method)
       req.responseContentType = oas3Selectors.responseContentType(pathName, method) || "*/*"
       const requestBody = oas3Selectors.requestBodyValue(pathName, method)
+      const requestBodyInclusionSetting = oas3Selectors.requestBodyInclusionSetting(pathName, method)
 
       if(isJSONObject(requestBody)) {
         req.requestBody = JSON.parse(requestBody)
       } else if(requestBody && requestBody.toJS) {
-        req.requestBody = requestBody.toJS()
+        req.requestBody = requestBody.filter((value, key) => !isEmptyValue(value) || requestBodyInclusionSetting.get(key)).toJS()
       } else{
         req.requestBody = requestBody
       }

src/core/utils.js

@@ -947,3 +947,15 @@ function b64toB64UrlEncoded(str) {
     .replace(/\//g, "_")
     .replace(/=/g, "")
 }
+
+export const isEmptyValue = (value) => {
+  if (!value) {
+    return true
+  }
+
+  if (isImmutable(value) && value.isEmpty()) {
+    return true
+  }
+
+  return false
+}

src/style/_table.scss

@@ -146,6 +146,7 @@ table
 }
 
 .parameter__empty_value_toggle {
+    display: block;
     font-size: 13px;
     padding-top: 5px;
     padding-bottom: 12px;