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

Update packages and OpenApi styling #23700

Merged
merged 20 commits into from
Oct 25, 2023
Merged

Conversation

Monkeychip
Copy link
Contributor

@Monkeychip Monkeychip commented Oct 17, 2023

This PR updates packages that needed addressing after running yarn npm audit.

For the package swagger-ui-dist, the update broke the CSS. It did this by wrapping elements in buttons, changing the elements nesting structure, and replacing spans with divs. After some consideration, I decided on doing the following:

Edit: It also broke the filtering functionality because of a React update behind the scenes. I decided it was cleaner, easier, less bug prone to use Swagger's filtering input. See the updated screenshot for how this looks. This also means queryParam for URL sharing is no long available.

  1. Remove the old swagger-ui css styling.
  2. Create a new SCSS file and put into the uitls/ folder. This file now has access to any variables we may want. The only CSS I kept was hiding a header and removing a container padding for alignment reasons.
  3. All the old styling is removed aside for what is mentioned in 2. What is left is the default swagger styling. The swagger package needed to be updated and there are too many design considerations for trying to match the old styling to this new layout. This is especially true as we move towards HDS. Considerations include trying to match colors, title sizes and card layouts. A design ticket will address how to restyle this view for a later PR.

Old OpenAPI view
Screenshot 2023-10-17 at 12-39-46 Vault

After update
Screenshot 2023-10-19 at 16-11-57 Vault

@Monkeychip Monkeychip added the ui label Oct 17, 2023
@Monkeychip Monkeychip added this to the 1.16.0-rc1 milestone Oct 17, 2023
@github-actions github-actions bot added the hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed label Oct 17, 2023
@github-actions
Copy link

Build Results:
All builds succeeded! ✅

Copy link
Contributor

@hashishaw hashishaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work on this! LGTM

Copy link
Contributor

@zofskeez zofskeez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work thanks! I like the look of the default Swagger styling.

ui/lib/open-api-explorer/addon/components/swagger-ui.js Outdated Show resolved Hide resolved
Co-authored-by: Jordan Reimer <zofskeez@gmail.com>
@Monkeychip Monkeychip enabled auto-merge (squash) October 24, 2023 23:06
@Monkeychip Monkeychip merged commit 6de5b2f into main Oct 25, 2023
64 of 66 checks passed
@Monkeychip Monkeychip deleted the ui/VAULT-21121/outdated-packages branch October 25, 2023 17:06
Monkeychip added a commit that referenced this pull request Oct 25, 2023
* update packages

* changelog

* wip better

* clean up

* and it works, it always worked we just hid it working :/

* clean up

* playing around with adding the queryparam, not working

* the fix no queryparams

* lets just see how this works out.

* maybe this will help

* remove copy/pasta

* Update ui/lib/open-api-explorer/addon/components/swagger-ui.js

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

---------

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>
Monkeychip added a commit that referenced this pull request Oct 26, 2023
* Update packages and OpenApi styling (#23700)

* update packages

* changelog

* wip better

* clean up

* and it works, it always worked we just hid it working :/

* clean up

* playing around with adding the queryparam, not working

* the fix no queryparams

* lets just see how this works out.

* maybe this will help

* remove copy/pasta

* Update ui/lib/open-api-explorer/addon/components/swagger-ui.js

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

---------

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>

* Update swagger-ui-test.js

---------

Co-authored-by: Jordan Reimer <zofskeez@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
hashicorp-contributed-pr If the PR is HashiCorp (i.e. not-community) contributed ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants