feat(ux): enhance media-type switching experience in RequestBodyEditor (#6837)

* feat(ux): enhance media-type switching experience in RequestBodyEditor

1. When canceling the try-out mode the request body will be reset to its initial state.
2. When the user switches the media-type in the try-out mode, the experience is as follows:
   - If the user did edit the request body the body wont be touched and only media type is updated. This is to ensure that user content is NEVER accidentally overwritten with a default value.
   - If the user did not edit the request body it is safe to be replaced by the default value of the target media-type.

Multiple example needed some care in order to allow the retain example value to function properly

* fix(test): workaround cypress issue that can't be reproduced manually

* test: added new feature to ensure enhanced user editing flow

Signed-off-by: mathis-m <mathis.michel@outlook.de>

test/e2e-cypress/tests/features/oas3-multiple-media-type.js

@@ -22,13 +22,17 @@ describe("OpenAPI 3.0 Multiple Media Types with different schemas", () => {
     cy.get(".opblock-section-request-body .content-type").as("selectMediaType")
   })
 
-  // In all cases, 
+  // In all cases,
   // - assume that examples are populated based on schema (not explicitly tested)
   // - assume validation passes based on successful "execute"
   // - expect final cURL command result doees not contain unexpected artifacts from other content-type schemas
   describe("multipart/form-data (only 'bar')", () => {
     it("should execute multipart/form-data", () => {
       cy.get("@selectMediaType")
+        .select(mediaTypeUrlencoded)
+        .get("@executeBtn")
+        .click()
+        .get("@selectMediaType")
         .select(mediaTypeFormData)
         .get("@executeBtn")
         .click()

test/e2e-cypress/tests/features/oas3-user-edit-request-body-flows.js

@@ -0,0 +1,87 @@
+const getRequestBodyFromCY = (page = null) =>
+  (page || cy.visit(
+    "/?url=/documents/features/petstore-only-pet.openapi.yaml",
+  ))
+    .get("#operations-pet-addPet")
+    .click()
+    // Expand Try It Out
+    .get(".try-out__btn")
+    .click()
+    // get textarea
+    .get(".opblock-body .opblock-section .opblock-section-request-body .body-param textarea")
+
+const xmlIndicator = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"
+const userEditXmlSample = xmlIndicator +
+  "<pet>\n" +
+  "\t<id>420</id>\n" +
+  "\t<name>doggie<3</name>\n" +
+  "\t<category>\n" +
+  "\t\t<id>99999999999</id>\n" +
+  "\t\t<name>Dogiiiiiiiieeee</name>\n" +
+  "\t</category>\n" +
+  "\t<photoUrls>\n" +
+  "\t\t<photoUrl>string</photoUrl>\n" +
+  "\t</photoUrls>\n" +
+  "\t<tags>\n" +
+  "\t\t<tag>\n" +
+  "\t\t\t<id>0</id>\n" +
+  "\t\t\t<name>string</name>\n" +
+  "\t\t</tag>\n" +
+  "\t</tags>\n" +
+  "\t<status>available</status>\n" +
+  "</pet>"
+
+describe("OAS3 Request Body user edit flows", () => {
+  // Case: Copy xml from email, paste into request body editor, change media-type to xml
+  it("it should never overwrite user edited value in case of media-type change", () => {
+    getRequestBodyFromCY()
+      // replace default sample with xml edited value
+      .type(`{selectall}${userEditXmlSample}`)
+      // change media type to xml, because I have forgotten it
+      .get(".opblock-section .opblock-section-request-body .body-param-content-type > select")
+      .select("application/xml")
+      // Ensure user edited body is not overwritten
+      .get(".opblock-section-request-body")
+      .within(() => {
+        cy
+          .get("textarea")
+          .should(($div) => {
+            expect($div.get(0).textContent).to.eq(userEditXmlSample)
+          })
+      })
+  })
+  // Case: User really wants to try out the brand new xml content-type
+  it("it should overwrite default value in case of content-type change, even within request body editor(#6836)", () => {
+    getRequestBodyFromCY()
+      // change media type to xml, because I have forgotten it (sry really wanted to try out the new xml content-type)
+      .get(".opblock-section .opblock-section-request-body .body-param-content-type > select")
+      .select("application/xml")
+      // Ensure default value is xml after content type change
+      .get(".opblock-section-request-body")
+      .within(() => {
+        cy
+          .get("textarea")
+          .should(($div) => {
+            expect($div.get(0).textContent).to.contain(xmlIndicator)
+          })
+      })
+  })
+  // Case: User wants to get the default value back
+  it("it reset the user edited value and render the default value in case of try out reset. (#6517)", () => {
+    getRequestBodyFromCY()
+      // replace default sample with bad value
+      .type("{selectall}ups that should not have happened")
+      // Cancel Try It Out
+      .get(".try-out__btn.reset")
+      .click()
+      // Ensure default value is xml after content type change
+      .get(".opblock-section-request-body")
+      .within(() => {
+        cy
+          .get("textarea")
+          .should(($div) => {
+            expect($div.get(0).textContent).to.not.contain("ups that should not have happened")
+          })
+      })
+  })
+})