feat: request snippets plugin

[mathis-m]

Description

Swagger ui internally stores the body some times as string e.g. when application/json.
If this is the case and the stored string is parsable to a JSON object or array it will use the parsed version for the request.
This sounds little bit weird so I removed the util and conditional path to parse the input, before creating the request.
This is to ensure that the user entered request body is NEVER overridden with the parsed value of itself.

I have refactored curlify.js to a snippets plugin (#6256):

mmwkQVxRhq.mp4

TODO:

add tests for snippet plugin clean curlify leftovers.

Default Configuration for plugin:

requestSnippets: {
  generators: {
	"curl_bash": {
	  title: "cURL (bash)",
	  syntax: "bash"
	},
	"curl_powershell": {
	  title: "cURL (PowerShell)",
	  syntax: "powershell"
	},
	"curl_cmd": {
	  title: "cURL (CMD)",
	  syntax: "bash"
	},
	"node_native": {
	  title: "Node.js (Native)",
	  syntax: "javascript"
	},
  },
  defaultExpanded: true,
  languagesMask: null, // e.g. only show curl bash = ["curl_bash"]
},

Motivation and Context

Fixes #6908
Fixes #6256

How Has This Been Tested?

Screenshots (if appropriate):

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

[mathis-m]

@tim-lai Is the curlify refactor something you like? I think it would be best to cap the height at some point and make it expandable.
In addition #6256 would be nice to see.

[mathis-m]

failing due to webpack maxAssetSize: 1072000

[tim-lai]

@mathis-m I think this is a great feature. Some comments:

• Fyi, regarding (not) using a parsed version, I think this PR helps, though I believe the source data is coming from mutatedRequest state via swagger-client. I also believe that the existing Curl component is the only user of the mutatedRequest state. I'm not sure we should be changing the interface between swagger-client and mutatedRequest, so my opinion is that this PR is fine for this concern.

• I don't know enough about the actual various environment escaping differences. Otherwise it looks good that you've covered for their differences.

• bundlesize... I'm curious, how much it is due to adding more syntax highlighting languages, vs. new plugin?

[mathis-m]

@tim-lai

Highlight
javascript - 14.04 KB
powershell - 7.93 KB
plugin
request-snippets - 18.4 KB

[mathis-m]

the old curlify is not cleaned. So bundle size will be reduced by 5.97 KB + x for jsx.

[mathis-m]

@tim-lai what do you think of creating group by eg. ( cURL > bash | powershell | cmd, node.js > native | node-fetch, powershell > Invoke-WebRequest | Invoke-RestMethod | HttpClient from .Net Namespace)

[tim-lai]

@tim-lai what do you think of creating group by eg. ( cURL > bash | powershell | cmd, node.js > native | node-fetch, powershell > Invoke-WebRequest | Invoke-RestMethod | HttpClient from .Net Namespace)

Not sure I understand the question... can you clarify/rephrase the question? Thanks!

[tim-lai]

the old curlify is not cleaned. So bundle size will be reduced by 5.97 KB + x for jsx.

Ok, thanks. In a separate PR, I am inclined to bump the bundlesize limit by a small amount.

[mathis-m]

@tim-lai what do you think of creating group by eg. ( cURL > bash | powershell | cmd, node.js > native | node-fetch, powershell > Invoke-WebRequest | Invoke-RestMethod | HttpClient from .Net Namespace)

Not sure I understand the question... can you clarify/rephrase the question? Thanks!

I thought it might look better if we add the opportunity to group several request snippets under a drop-down menu.
Eg. :

cURL

• bash
• powershell
• cmd

Node

• native
• node-fetch
  ...

[tim-lai]

I thought it might look better if we add the opportunity to group several request snippets under a drop-down menu.

I think adding dropdowns at this time adds additional ux considerations. So for now, I suggest keeping a flat tab menu.

[mathis-m]

@tim-lai
I have:

• cleaned the old leftovers.
• redirected curlify tests to new fn

Should we add tests for new snippet generator functions(curl powershell, curl cmd, nodejs native)?

[andrei572]

From documentation perspective, would it be possible to post a complete working example configuration or step by step recipe to demo how to enable requestSnippets? I am not able to make it work with SwaggerUI, "Snippets" section is not showing up. See my index.html below. What am I doing wrong?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="SwaggerUI"
    />
    <title>SwaggerUI</title>
    <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.14.0/swagger-ui.css" />
  </head>
  <body>
  <div id="swagger-ui"></div>
  <script src="https://unpkg.com/swagger-ui-dist@4.14.0/swagger-ui-bundle.js" crossorigin></script>
  <script src="https://unpkg.com/swagger-ui-dist@4.14.0/swagger-ui-standalone-preset.js" crossorigin></script>
  <script>
    window.onload = () => {
      window.ui = SwaggerUIBundle({
        url: './openapi.yaml',
        dom_id: '#swagger-ui',
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
           SwaggerUIBundle.plugins.requestSnippets
        ],
        layout: "StandaloneLayout",
        supportedSubmitMethods: [],
        displayOperationId: true,
        requestSnippetsEnabled: true,
  requestSnippets: {
    generators: {
      "curl_bash": {
        title: "cURL (bash)",
        syntax: "bash"
      },
      "curl_powershell": {
        title: "cURL (PowerShell)",
        syntax: "powershell"
      },
      "curl_cmd": {
        title: "cURL (CMD)",
        syntax: "bash"
      },
      "node_native": {
        title: "Node.js (Native)",
        syntax: "javascript"
      }
    },
    defaultExpanded: true,
    languagesMask: null // e.g. only show curl bash = ["curl_bash"]
  }
      });
    };
  </script>
  </body>
</html>

[mathis-m]

From documentation perspective, would it be possible to post a complete working example configuration or step by step recipe to demo how to enable requestSnippets? I am not able to make it work with SwaggerUI, "Snippets" section is not showing up. See my index.html below. What am I doing wrong?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="SwaggerUI"
    />
    <title>SwaggerUI</title>
    <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@4.14.0/swagger-ui.css" />
  </head>
  <body>
  <div id="swagger-ui"></div>
  <script src="https://unpkg.com/swagger-ui-dist@4.14.0/swagger-ui-bundle.js" crossorigin></script>
  <script src="https://unpkg.com/swagger-ui-dist@4.14.0/swagger-ui-standalone-preset.js" crossorigin></script>
  <script>
    window.onload = () => {
      window.ui = SwaggerUIBundle({
        url: './openapi.yaml',
        dom_id: '#swagger-ui',
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
           SwaggerUIBundle.plugins.requestSnippets
        ],
        layout: "StandaloneLayout",
        supportedSubmitMethods: [],
        displayOperationId: true,
        requestSnippetsEnabled: true,
  requestSnippets: {
    generators: {
      "curl_bash": {
        title: "cURL (bash)",
        syntax: "bash"
      },
      "curl_powershell": {
        title: "cURL (PowerShell)",
        syntax: "powershell"
      },
      "curl_cmd": {
        title: "cURL (CMD)",
        syntax: "bash"
      },
      "node_native": {
        title: "Node.js (Native)",
        syntax: "javascript"
      }
    },
    defaultExpanded: true,
    languagesMask: null // e.g. only show curl bash = ["curl_bash"]
  }
      });
    };
  </script>
  </body>
</html>

Have a look at swagger ui docs

Tested is working.