Custom Plugin: Using wrapComponents to override container behavior

[johnjacobkenny]

Q&A (please complete the following information)

• Swagger-UI version: [e.g. 3.15.0]

Content & configuration

No change in the default configuration except for including my custom plugin

Screenshots

How can we help?

I was trying to understand the plugin system to configure Swagger for my use case. As an experiment, I wanted to try and disable the collapse feature. I created a custom plugin with the following code.

export default function (toolbox) {
    return {
        wrapComponents: {
            OperationContainer: (OriginalComponent, system) => (props) => {
                OriginalComponent.prototype.toggleShown = () => { console.log("Success") }
                return <OriginalComponent {...props} ></OriginalComponent>
            }
        }
    }
}

This results in swagger showing errors which include

Warning: Failed prop type: The prop `jumpToKey` is marked as required in `OperationContainer`, but its value is `undefined`.
Warning: Failed prop type: The prop `isDeepLinkingEnabled` is marked as required in `OperationContainer`, but its value is `undefined`.

I'm guessing this is because container components need to be obtained with getComponent(<name>, true). Is it possible to override container components' behavior?

Thanks!

P.S. @ponelat Your blog post helped a lot!

[shockey]

Hey @johnjacobkenny,

You can't wrap the container component because it maps the Redux state to props that it gives itself. The exact mechanism of failure isn't clear, but when you wrap the component, it breaks 😄

Fortunately, you can get at the toggleShown prop from OperationWrapper:

() => {
  {
    return {
      wrapComponents: {
        operation: (OriginalComponent, system) => (props) => {
          const fn = () => {
            props.toggleShown && props.toggleShown() // call original if it exists
            console.log("Success")
          }
          return <OriginalComponent {...props} toggleShown={fn} />
        }
      }
    }
  }
}

[shockey]

Closing due to inactivity.

This is simply to keep our issue tracker clean - feel free to comment if there are any further thoughts or concerns, and we'll be happy to reopen this issue.

[lock]

Locking due to inactivity.
This is done to avoid resurrecting old issues and bumping long threads with new, possibly unrelated content.
If you think you're experiencing something similar to what you've found here: please open a new issue, follow the template, and reference this issue in your report.
Thanks!