Custom Plugin: Using wrapComponents to modify operation description

[skorper]

Q&A

• Method of installation: dist assets
• Swagger-UI version: 3.23.11
• Swagger/OpenAPI version: OpenAPI 3.0

Content & configuration

I'm trying to write a custom plugin that will append to the description for a particular endpoint, using wrapComponents.

const ModifyDescriptionPlugin = function() {
     return {
         wrapComponents: {
         operation: (Original, { React }) => (props) => {
             // ???
             return React.createElement(Original, props)
            }
        }
    }
}

I saw this which seems to indicate I can't wrap OperationContainer, so now I'm at a loss. I also cannot find any examples of anyone trying to modify the description of an endpoint in a plugin.

I have tried looking through operation props and I can't seem to find any way to access description.

[shockey]

Hey @skorper!

This is possible, but the operation component interface just happens to be the most convoluted interface in the entire app (😓) so it's not immediately obvious how to do it.

Here's my implementation:

const ModifyDescriptionPlugin = function() {
  return {
    wrapComponents: {
      operation: (Original, { React }) => props => {
        const { operation } = props
        if (
          operation.get("path") === "/pet/findByStatus" &&
          operation.get("method") === "get" &&
          operation.get("op").size // i.e., resolved Operation has been provided
        ) {
          const originalDescription = operation.getIn(["op", "description"])
          return React.createElement(Original, {
            ...props,
            operation: operation.setIn(
              ["op", "description"],
              originalDescription + "\n\n*Hello world!*"
            )
          })
        }
        return React.createElement(Original, props)
      }
    }
  }
}

Hope this helps!

[skorper]

@shockey Brilliant, thank you so much! Works great!