Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: add a button to expand/collapse all operations #8932

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

ncounter
Copy link

@ncounter ncounter commented Jun 15, 2023

This PR addresses #7964 : the list of entries is usually long and a handy button to collapse them all can be useful, at the same time a button to expand them all (to use a browser search functionality for instance) can be useful as well.

Description

This PR adds a button to the main page. This button lives with its own state that represents the value of its flag. Once the button gets hit, the flag is toggled and the value is passed as a prop to the <Operations> child. This one uses the flag to trigger the visibility of all the <OperationTag> accordingly. After that the components render lifecycle remains the same as before.

Motivation and Context

Fixes #7964

How Has This Been Tested?

Manual test:

  • load the page with the docExpansion set to list
  • click the expand/collapse button
  • all the entries are now collapsed
  • expand some entry by clicking on the tag name
  • click the expand/collapse button again
  • all the entries are now expanded
  • collapse some entry by clicking on the tag name
  • click the expand/collapse button again
  • all the entries are now collapsed

Screenshots (if appropriate):

swagger-ui-expand-collapse-all

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.

Notes

  • Tests are not yet implemented, but they'd rather be with no particular limitation. An initial feedback about the current implementation would be very nice before continuing down this path.
  • The button should load considering the docExpansion config value: if the entries are expanded on loading because of the config parameter, the global button should start with Collapse All, and the other way around that in other cases.

@ncounter ncounter force-pushed the ft/expand-collapse-operations-button branch from 2431f1c to 1fc32da Compare June 15, 2023 13:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

collapse all
1 participant