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

test/e2e-cypress/tests/features/multiple-examples-core.js

@@ -606,6 +606,24 @@ describe("OpenAPI 3.0 Multiple Examples - core features", () => {
           summary: "A wonderful kitten's info",
         },
       })
+      it("should display an error message when input validation fails", () => {
+        cy.visit("/?url=/documents/features/multiple-examples-core.openapi.yaml")
+          // Expand the operation
+          .get("#operations-default-post_Object")
+          .click()
+          // Switch to Try-It-Out
+          .get(".try-out__btn")
+          .click()
+          // Set an invalid value
+          .get(".parameters-container > div > table > tbody > tr > td.parameters-col_description > div:nth-child(2) > textarea")
+          .type("{{{{ [[[[ <<<< invalid JSON here.")
+          // Execute the operation
+          .get(".execute")
+          .click()
+          // Verify that an error is shown
+          .get(".validation-errors")
+          .contains("Parameter string value must be valid JSON")
+      })
     })
     describe("in a Response", () => {
       ResponsePrimitiveTestCases({