swagger-ui icon indicating copy to clipboard operation
swagger-ui copied to clipboard

aBug/10212 refactor unsafe components

Open jryanthe4th opened this issue 9 months ago • 2 comments

Description

OperationContainer changes:

  • The logic from UNSAFE_componentWillReceiveProps has been moved to componentDidUpdate so swagger-ui works with react 18.
  • It checks if response has changed and updates executeInProgress accordingly.
  • It ensures that requestResolvedSubtree() is only called when isShown changes from false to true.

ContentType changes:

  • Removed UNSAFE_componentWillReceiveProps as its logic has been handled properly in componentDidUpdate.
  • componentDidUpdate now watches for changes in contentTypes or value.
  • If contentTypes change or the current value is not included, it updates the value.
  • Improved readability and efficiency by ensuring onChange is only called when necessary.

root-injects.jsx changes: Fix reactDOM import error: Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

Motivation and Context

Swagger-ui throws errors when used with react 18 due to the deprecation of UNSAFE_componentWillReceiveProps.

https://github.com/swagger-api/swagger-ui/issues/10212

Fixes #10212

How Has This Been Tested?

Ran the app locally and clicked multiple links and buttons

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)
  • [x] Bug fixes (non-breaking change which fixes an issue)
  • [x] 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).
  • [x] 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

  • [x] 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.
  • [x] 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.

jryanthe4th avatar Mar 17 '25 04:03 jryanthe4th

Someone merge this please

Stanley-Jovel avatar Mar 24 '25 18:03 Stanley-Jovel

@jryanthe4th thank you for your contribution and the time spent on refactoring 🙏

A few changes are unrelated to the refactoring of unsafe components. We would appreciate it if you could create separate PRs for these, as it would make it easier to track the changes in the commit history

Addressing the ReactDOM warning would lead to the loss of support for React 16 and 17, given that the client API was introduced in React 18

robert-hebel-sb avatar Apr 25 '25 19:04 robert-hebel-sb

:tada: This PR is included in version 5.29.4 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

swagger-bot avatar Oct 10 '25 11:10 swagger-bot