feat(try-it-out): display validation error messages (#8212)

src/core/components/operation.jsx

@@ -112,6 +112,8 @@ export default class Operation extends PureComponent {
 
     let onChangeKey = [ path, method ] // Used to add values to _this_ operation ( indexed by path and method )
 
+    const validationErrors = specSelectors.validationErrors([path, method])
+
     return (
         <div className={deprecated ? "opblock opblock-deprecated" : isShown ? `opblock opblock-${method} is-open` : `opblock opblock-${method}`} id={escapeDeepLinkPath(isShownKey.join("-"))} >
           <OperationSummary operationProps={operationProps} isShown={isShown} toggleShown={toggleShown} getComponent={getComponent} authActions={authActions} authSelectors={authSelectors} specPath={specPath} />
@@ -189,6 +191,14 @@ export default class Operation extends PureComponent {
                   </div> : null
               }
 
+              { !tryItOutEnabled || !allowTryItOut || validationErrors.length <= 0 ? null : <div className="validation-errors errors-wrapper">
+                  Please correct the following validation errors and try again.
+                  <ul>
+                    { validationErrors.map((error, index) => <li key={index}> { error } </li>) }
+                  </ul>
+                </div>
+              }
+
             <div className={(!tryItOutEnabled || !response || !allowTryItOut) ? "execute-wrapper" : "btn-group"}>
               { !tryItOutEnabled || !allowTryItOut ? null :
 

src/core/plugins/spec/selectors.js

@@ -477,19 +477,23 @@ export const canExecuteScheme = ( state, path, method ) => {
   return ["http", "https"].indexOf(operationScheme(state, path, method)) > -1
 }
 
-export const validateBeforeExecute = ( state, pathMethod ) => {
+export const validationErrors = (state, pathMethod) => {
   pathMethod = pathMethod || []
   let paramValues = state.getIn(["meta", "paths", ...pathMethod, "parameters"], fromJS([]))
-  let isValid = true
+  const result = []
 
   paramValues.forEach( (p) => {
     let errors = p.get("errors")
     if ( errors && errors.count() ) {
-      isValid = false
+      errors.forEach( e => result.push(e))
     }
   })
 
-  return isValid
+  return result
+}
+
+export const validateBeforeExecute = (state, pathMethod) => {
+  return validationErrors(state, pathMethod).length === 0
 }
 
 export const getOAS3RequiredRequestBodyContentType = (state, pathMethod) => {