SwaggerEditor@next: no specification loaded on page refresh

[glowcloud]

Content & configuration

Running Swagger Editor locally with the default env definition (https://raw.githubusercontent.com/asyncapi/spec/v2.6.0/examples/streetlights-kafka.yml)

Describe the bug you're encountering

The specification loads fine but refreshing the page causes it to disappear from the editor. Any changes made will be lost. This also happens for the GitHub Pages deployment but not for https://editor-next.swagger.io/

To reproduce...

Steps to reproduce the behavior:

1. Open https://ghpages-swagger-editor.swagger.io/ in incognito window
2. See that the specification is loaded
3. Refresh the page
4. See an empty {} specification

Expected behavior

The editor should retain the specification on refresh like in https://editor-next.swagger.io/

[glowcloud]

It looks like the issue happens with Swagger UI v5.17.6, most probably due to swagger-api/swagger-ui#9918. With 5.17.5 the page refreshes as it should.

[char0n]

I made a mistake when porting following conditions:

if(this.props.spec && (this.props.spec !== prevStateSpec || this.props.spec !== prevProps.spec)) {

if(this.props.url !== prevStateUrl || this.props.url !== prevProps.url) {

They key is that we're missing prevProps.spec/url comparison in new function component. We must use useRef hook to access the prev value of spec/url prop and use that in the comparison.

[char0n]

The core issues was that after converting swagger-ui-react from class to function component, the default for the spec prop became the {} (empty object) instead of before used "" (empty string). The code needs to compensate for that. The spec updated related hook needs to look like this:

 useEffect(() => {
    if (system) {
      const prevStateSpec = system.specSelectors.specStr();
       if (
        spec &&
        spec !== SwaggerUIConstructor.config.defaults.spec &&
        (spec !== prevStateSpec || spec !== prevSpec)
      ) {
        const updatedSpec = typeof spec === 'object' ? JSON.stringify(spec) : spec;
        system.specActions.updateSpec(updatedSpec);
      }
    }
  }, [system, spec]);

[char0n]

SwaggerUI regression remediation released as https://github.com/swagger-api/swagger-ui/releases/tag/v5.17.13

[char0n]

Addressed in #5080