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.

Sign up for GitHub

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

Jump to bottom

Update swagger UI to 5.10.3 #26960

Merged
merged 3 commits into from
Dec 7, 2023
Merged

Update swagger UI to 5.10.3 #26960

merged 3 commits into from
Dec 7, 2023

Conversation

abutch3r
Copy link
Contributor

@abutch3r abutch3r commented Nov 15, 2023 •
edited

Update swagger UI 5.10.3 and update associated dependencies.

Update openapi-ui github action to work with Swagger-ui v5 and resolves node12 deprecations

Fixes #26948
Fixes #24487

@abutch3r
Copy link
Contributor Author

#build
#spawn.fullfat.buckets=io.openliberty.microprofile.openapi.ui.internal_fat,com.ibm.ws.openapi.ui_fat

@LibbyBot
Copy link

Your personal build request is at https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=c34fe8a2-7a74-47fc-b1b6-e66ac8e62283

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

Your personal build request is at https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_nqZRgIPFEe6tffXfLjKGSA

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=c34fe8a2-7a74-47fc-b1b6-e66ac8e62283 has errors/failures.

@LibbyBot
Copy link

The build abutch3r-26960-20231115-0756
https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_nqZRgIPFEe6tffXfLjKGSA
completed and has errors or failures.

For help analyzing your personal build, go to https://libh-proxy1.fyre.ibm.com/cognitive/buildAnalysis.html?uuid=_nqZRgIPFEe6tffXfLjKGSA

@Azquelt
Copy link
Member

Azquelt commented Nov 17, 2023

From the build results it looks like they have changed the way the lock icons are rendered such that the button element no longer gets the locked or unlocked class - instead the child svg element has this class. There's no obvious change in the way it appears so I think the test just needs updated to match.

From manual testing, the OAS version has disappeared. This looks to be due to it having been moved to a separate component. Our simple-info.jsx will need updating to include the new component as well. Also those elements are in a <span> now in the upstream code.

@Azquelt
Copy link
Member

Azquelt commented Nov 17, 2023

#libby
#build
#spawn.fullfat.buckets=io.openliberty.microprofile.openapi.ui.internal_fat,com.ibm.ws.openapi.ui_fat

@LibbyBot
Copy link

Your personal build request is at https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=1ae1b1b8-ceaa-4b8a-9ddc-1708617ddbc8

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

Your personal build request is at https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_nEG8kIWREe6tffXfLjKGSA

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=1ae1b1b8-ceaa-4b8a-9ddc-1708617ddbc8 has errors/failures.

@abutch3r
Copy link
Contributor Author

#libby
#build

@LibbyBot
Copy link

Your personal build request is at https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=aa5fc575-89df-412c-97d4-b1e4f58267b3

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

Your personal build request is at https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_mQ518IkeEe6PKt0UtTmx2A

Target locations of links might be accessible only to IBM employees.

@abutch3r
Copy link
Contributor Author

abutch3r commented Nov 22, 2023 •
edited

Open Liberty UI Manual Testing

Browser and version tested: Firefox 119.01

MicroProfile UI

  • UI Loads on https://localhost:9443/openapi/ui/
  • Forced reload causes all resources to be reloaded
  • OpenLiberty logo is at the top of the page
  • Top of the page has the title and description for the application but no links
  • OAS3 icon surrounding colour is #5d8203 via element inspection
  • Footer is present
  • Footer contains links for Terms of service, Test Author - Website, Contact Test Author and Example license
  • No Valid button in footer
  • Operation Block colours:
    • POST background is rgba(32,128,80,.1) (div class = opblock opblock-post)
    • POST border is #208050 (div class = opblock opblock-post)
    • POST Icon background colour is #208050 (div class = opblock-summary-method)
    • PUT background is rgba(177,99,3,.1) (div class = opblock opblock-put)
    • PUT border colour is #b16303 (div class=opblock-summary-method)
    • PUT Icon background colour is #b16303 (div class=opblock-summary-method)
    • DELETE background is rgba(224,7,7,.1) (div class = opblock opblock-delete)
    • DELETE border colour is #e00707 (div class=opblock-summary-method)
    • DELETE Icon background colour is #e00707 (div class=opblock-summary-method)
    • GET background is rgba(31,111,240,.1) (div class = opblock opblock-get)
    • GET border colour is #1f6ff0 (div class=opblock-summary-method)
    • GET Icon background colour is #1f6ff0 (div class=opblock-summary-method)

Openapi 3.x UI

Public UI

  • UI loads https://localhost:9443/api/explorer/
  • Forced reload causes all resources to be reloaded
  • OpenLiberty logo is at the top of the page
  • The Filter box is present at the top of the page
  • Filter using openapi-ui-test-app of prefixes of returns the operations
  • Filter using anything other value returns no operations
  • Top of the Page has Liberty REST APIs
  • OAS3 icon surrounding colour is #5d8203 via element inspection
  • No Valid button in page footer
  • Operation Block colours:
    • POST background is rgba(32,128,80,.1) (div class = opblock opblock-post)
    • POST border is #208050(div class =opblock opblock-post`)
    • POST Icon background colour is #208050 (div class = opblock-summary-method)
    • PUT background is rgba(177,99,3,.1) (div class = opblock opblock-put)
    • PUT border colour is #b16303 (div class=opblock-summary-method)
    • PUT Icon background colour is #b16303 (div class=opblock-summary-method)
    • DELETE background is rgba(224,7,7,.1) (div class = opblock opblock-delete)
    • DELETE border colour is #e00707 (div class=opblock-summary-method)
    • DELETE Icon background colour is #e00707 (div class=opblock-summary-method)
    • GET background is rgba(31,111,240,.1) (div class = opblock opblock-get)
    • GET border colour is #1f6ff0 (div class=opblock-summary-method)
    • GET Icon background colour is #1f6ff0 (div class=opblock-summary-method)

Private UI

  • UI load on https://localhost:9443/ibm/api/explorer/ having provided credentials outlined in README
  • Forced reload causes all resources to be reloaded
  • OpenLiberty logo is at the top of the page
  • The Filter box is present at the top of the page
  • Filter using openapi-ui-test-app of prefixes of returns the operations
  • Filter using anything other value returns no operations
  • Top of the Page has Liberty REST APIs
  • OAS3 icon surrounding colour is #5d8203 via element inspection
  • No Valid button in page footer
  • Operation Block colours:
    • POST background is rgba(32,128,80,.1) (div class = opblock opblock-post)
    • POST border is #208050(div class =opblock opblock-post`)
    • POST Icon background colour is #208050 (div class = opblock-summary-method)
    • PUT background is rgba(177,99,3,.1) (div class = opblock opblock-put)
    • PUT border colour is #b16303 (div class=opblock-summary-method)
    • PUT Icon background colour is #b16303 (div class=opblock-summary-method)
    • DELETE background is rgba(224,7,7,.1) (div class = opblock opblock-delete)
    • DELETE border colour is #e00707 (div class=opblock-summary-method)
    • DELETE Icon background colour is #e00707 (div class=opblock-summary-method)
    • GET background is rgba(31,111,240,.1) (div class = opblock opblock-get)
    • GET border colour is #1f6ff0 (div class=opblock-summary-method)
    • GET Icon background colour is #1f6ff0 (div class=opblock-summary-method)

Functionality Testing

MicroProfile UI

Access https://localhost:9443/openapi/ui

  • Two Server values in Server dropdown
  • Select HTTPS server url
  • Expand GET /{id} operation
    • Two responses - 200 and 404 displayed
    • Change media type in drop down
      • Example changes from either JSON -> XML or XML->JSON
    • Can switch between Example Value and Schema
    • Attempt to provide an ID value and should be prohibited from doing so
    • Click Try Out
      • Provide an ID value of 1
      • Click Execute and get a
        • 200 response
      • Change ID value to 0
      • Click Execute
      • 404 response
  • Expand POST /private
    • Padlock Icon is Unlocked
    • Click Try Out
      • Click execute
      • 401 response
  • Click Authorize and go to oauth section
  • Provide Client_id provided in README
  • Provide Client_secret provided in README
  • Select Test Scope
  • Click authorize
    • Login with user credentials provided in README
    • click allow once
    • returned to the OpenAPI UI
  • Close modal
  • All /private* operations now have a locked padlock
  • Expand POST /private
    • Click Try Out
    • Click Execute and get a 200 response
  • Expand GET /apiKeyNeeded
    • Padlock is unlocked
    • Description is Get a random record
    • Click Try Out
      • Click Execute and get a 403 response
  • Click Authorize
    • Enter apikey from README
    • Click Authorize
    • Close modal

OpenAPI 3.x UI

Access https://localhost:9443/api/explorer

  • Two Server values in Server dropdown
  • Select HTTPS server url
  • Expand GET /{id} operation
    • Two responses - 200 and 404 displayed
    • Change media type in drop down
      • Example changes from either JSON -> XML or XML->JSON
    • Can switch between Example Value and Schema
    • Attempt to provide an ID value and should be prohibited from doing so
    • Click Try Out
      • Provide an ID value of 1
      • Click Execute and get a
        • 200 response
      • Change ID value to 0
      • Click Execute
      • 404 response
  • Expand POST /private
    • Padlock Icon is Unlocked
    • Click Try Out
      • Click execute
      • 401 response
  • Click Authorize and go to oauth section
  • Provide Client_id provided in README
  • Provide Client_secret provided in README
  • Select Test Scope
  • Click authorize
    • Login with user credentials provided in README
    • click allow once
    • returned to the OpenAPI UI
  • Close modal
  • All /private* operations now have a locked padlock
  • Expand POST /private
    • Click Try Out
    • Click Execute and get a 200 response
  • Expand GET /apiKeyNeeded
    • Padlock is unlocked
    • Description is Get a random record
    • Click Try Out
      • Click Execute and get a 403 response
  • Click Authorize
    • Enter apikey from README
    • Click Authorize
    • Close modal
  • Expand /apiKeyNeeded
    • Operation has a locked padlock
    • Click Try Out
      • Click Execute
      • 200 response

Customer provided customization

MicroProfile UI

  • If the server is running, stop the server
  • Rename the folder example-customization in src/main/liberty/config to mpopenapi
  • Start the server
  • Access https://localhost:9443/openapi/ui/
    • Perform a forced page refresh
    • Header bar colour has changed
    • Logo has changed

OpenAPI-3.x UI

  • If the server is running, stop the server
  • Rename the folder example-customization (or mpopenapi if renamed for MicroProfile testing) in src/main/liberty/config to openapi-3.1
  • Start the server
  • Access https://localhost:9443/api/explorer
    • Perform a forced page refresh
    • Header bar colour has changed
    • Logo has changed

Endpoint customization

(Microprofile only)

  • Update mpOpenAPI config with new docPath
  • Start server
  • Access https://localhost:9443//ui
  • Able to see page
  • Page shows api operations
  • Default UI customizations are in place
  • Update mpOpenAPI config with different uiPath
  • Update Oauth Provider config redirect path with uiPath value
  • Start server
  • Access https://localhost:9443/
  • Able to see page
  • Page shows api operations
  • Click Authorize and go to oauth section
  • Provide Client_id provided in README
  • Provide Client_secret provided in README
  • Select Test Scope
  • Click authorize
    • Login with user credentials provided in README
    • click allow once
    • returned to the OpenAPI UI
  • Close modal

@LibbyBot
Copy link

https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=aa5fc575-89df-412c-97d4-b1e4f58267b3 has errors/failures.

@LibbyBot
Copy link

The build abutch3r-26960-20231122-0313
https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_mQ518IkeEe6PKt0UtTmx2A
completed and has errors or failures.

For help analyzing your personal build, go to https://libh-proxy1.fyre.ibm.com/cognitive/buildAnalysis.html?uuid=_mQ518IkeEe6PKt0UtTmx2A

@abutch3r abutch3r changed the title Update swagger UI to 5.10.0 Update swagger UI to 5.10.3 Nov 23, 2023
@abutch3r
Copy link
Contributor Author

#libby
#build
#spawn.fullfat.buckets=io.openliberty.microprofile.openapi.ui.internal_fat,com.ibm.ws.openapi.ui_fat

@LibbyBot
Copy link

Your personal build request is at https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=8f9c3579-29cc-42dd-98ee-8cfcb3e01a10

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

Your personal build request is at https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_8be8sIoZEe6PKt0UtTmx2A

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=8f9c3579-29cc-42dd-98ee-8cfcb3e01a10 has errors/failures.

@LibbyBot
Copy link

The build abutch3r-26960-20231123-0916
https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_8be8sIoZEe6PKt0UtTmx2A
completed and has errors or failures.

For help analyzing your personal build, go to https://libh-proxy1.fyre.ibm.com/cognitive/buildAnalysis.html?uuid=_8be8sIoZEe6PKt0UtTmx2A

@abutch3r
Copy link
Contributor Author

From the build results it looks like they have changed the way the lock icons are rendered such that the button element no longer gets the locked or unlocked class - instead the child svg element has this class. There's no obvious change in the way it appears so I think the test just needs updated to match.

From manual testing, the OAS version has disappeared. This looks to be due to it having been moved to a separate component. Our simple-info.jsx will need updating to include the new component as well. Also those elements are in a <span> now in the upstream code.

Inspecting the behavior of the page, the issue is due to an initial load issue within Swagger-UI no longer adding the respective classes to the button element. If you cycle through a login and logout cycle you can see the unlocked and locked classes are assigned to the button, but only after that initial auth event. The SVG class is the most consistent element to now determine locked and unlocked behavior

@abutch3r abutch3r marked this pull request as ready for review November 28, 2023 11:34
@Azquelt
Copy link
Member

Azquelt commented Nov 28, 2023

  1. We need to squash out all the irrelevant commits. There should be several commits for each of the code changes and then one commit to rebuild the UI.
  2. I believe that we couldn't get the latest version of Swagger UI to work with IE 11? If so, we should remove all of the existing CSS rules and module transpilations which are only there to support IE 11.

@abutch3r
Update Swagger-ui Update Action
5ba0a25 
Fix checkout deprecation to support node16

Have the action commit to the current branch rather than opening a pull
request if the branch is not integration. This makes it easier to create
a branch with the required code changes and then use the action to
rebuild them in the same PR.

Update the action to only copy scss files from the swagger-ui source.
@Azquelt @abutch3r
Update Swagger UI to 5.10.3
0da97f8 
Update OpenAPI UI tests for swagger-ui 5.10.3

The page structure has changed slightly. Update the corresponding parts
of the tests.

SwaggerUI have changed how the OAS version is rendered and our
replacement info component needs to be updated to match.
@abutch3r
Copy link
Contributor Author

#libby
#build
#spawn.fullfat.buckets=io.openliberty.microprofile.openapi.ui.internal_fat,com.ibm.ws.openapi.ui_fat

@LibbyBot
Copy link

Your personal build request is at https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=27415687-87ef-4f04-bd95-4f661e73203d

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

Your personal build request is at https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_I9-FII61Ee6gttl9kBC4bw

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

The build abutch3r-26960-20231129-0826
https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_I9-FII61Ee6gttl9kBC4bw
completed successfully!

@LibbyBot
Copy link

LibbyBot commented Dec 1, 2023

https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=27415687-87ef-4f04-bd95-4f661e73203d has errors/failures.

@abutch3r
Copy link
Contributor Author

abutch3r commented Dec 4, 2023

#libby
#build
#spawn.fullfat.buckets=io.openliberty.microprofile.openapi.ui.internal_fat,com.ibm.ws.openapi.ui_fat

@LibbyBot
Copy link

LibbyBot commented Dec 4, 2023

Your personal build request is at https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=1838642859

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

LibbyBot commented Dec 4, 2023

Your personal build request is at https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_YzSgQZKgEe6WTPpngIn9MA

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

LibbyBot commented Dec 4, 2023

Code analysis and actions

DO NOT DELETE THIS COMMENT.

  • 28 product code files were changed.

  • Please describe in a separate comment how you tested your changes.

  • 1 FAT files were changed, added, or removed.

  • Check that the build did not break the affected FAT suite(s).

@LibbyBot
Copy link

LibbyBot commented Dec 4, 2023

https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=1838642859 has errors/failures.

@abutch3r
Copy link
Contributor Author

abutch3r commented Dec 5, 2023

CI failures relate solely to springboot tests, all the openapi tests and in particular the full fat selenium tests passed

@LibbyBot
Copy link

LibbyBot commented Dec 5, 2023

The build abutch3r-26960-20231204-0535
https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_YzSgQZKgEe6WTPpngIn9MA
completed successfully!

Azquelt
Azquelt approved these changes Dec 6, 2023
View reviewed changes
Copy link
Member

@Azquelt Azquelt left a comment •
edited

Choose a reason for hiding this comment

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

This looks good, though in future I'd prefer to see the manual changes in separate commits from the code being rebuilt at the end.

Particularly in this case, we've committed two versions of the built JS in the repository history.

Still needs the manual test runs on the output of the personal build.

@abutch3r
Copy link
Contributor Author

abutch3r commented Dec 6, 2023

#build

@LibbyBot
Copy link

LibbyBot commented Dec 6, 2023

Your personal build request is at https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_p1bekJRAEe6WTPpngIn9MA

Target locations of links might be accessible only to IBM employees.

@LibbyBot
Copy link

LibbyBot commented Dec 6, 2023

Your personal build request is at https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=1843073955

Target locations of links might be accessible only to IBM employees.

@abutch3r
Copy link
Contributor Author

abutch3r commented Dec 6, 2023

This looks good, though in future I'd prefer to see the manual changes in separate commits from the code being rebuilt at the end.

Particularly in this case, we've committed two versions of the built JS in the repository history.

Still needs the manual test runs on the output of the personal build.

The second set of changes to the JS relate to the changes allowed by the removal of packages for IE11. so was a result of those changes. but we shouldn't see the need to commit two versions of the js again

@LibbyBot
Copy link

LibbyBot commented Dec 7, 2023

https://libh-proxy1.fyre.ibm.com/cognitive/pipelineAnalysis.html?uuid=1843073955 has errors/failures.

@LibbyBot
Copy link

LibbyBot commented Dec 7, 2023

The build abutch3r-26960-20231206-0719
https://wasrtc.hursley.ibm.com:9443/jazz/resource/itemOid/com.ibm.team.build.BuildResult/_p1bekJRAEe6WTPpngIn9MA
completed and has errors or failures.

For help analyzing your personal build, go to https://libh-proxy1.fyre.ibm.com/cognitive/buildAnalysis.html?uuid=_p1bekJRAEe6WTPpngIn9MA

@abutch3r
Copy link
Contributor Author

abutch3r commented Dec 7, 2023 •
edited

Manual testing of build image

Browser and version tested on: Firefox 120.0

MicroProfile UI

  • UI Loads on https://localhost:9443/openapi/ui/
  • Forced reload causes all resources to be reloaded
  • OpenLiberty logo is at the top of the page
  • Top of the page has the title and description for the application but no links
  • OAS3 icon surrounding colour is #5d8203 via element inspection
  • Footer is present
  • Footer contains links for Terms of service, Test Author - Website, Contact Test Author and Example license
  • No Valid button in footer
  • Operation Block colours:
    • POST background is rgba(32,128,80,.1) (div class = opblock opblock-post)
    • POST border is #208050 (div class = opblock opblock-post)
    • POST Icon background colour is #208050 (div class = opblock-summary-method)
    • PUT background is rgba(177,99,3,.1) (div class = opblock opblock-put)
    • PUT border colour is #b16303 (div class=opblock-summary-method)
    • PUT Icon background colour is #b16303 (div class=opblock-summary-method)
    • DELETE background is rgba(224,7,7,.1) (div class = opblock opblock-delete)
    • DELETE border colour is #e00707 (div class=opblock-summary-method)
    • DELETE Icon background colour is #e00707 (div class=opblock-summary-method)
    • GET background is rgba(31,111,240,.1) (div class = opblock opblock-get)
    • GET border colour is #1f6ff0 (div class=opblock-summary-method)
    • GET Icon background colour is #1f6ff0 (div class=opblock-summary-method)
  • Operation Details
    • Expand `GET /{id}
      • id file is marked * required

Openapi 3.x UI

Public UI

  • UI loads https://localhost:9443/api/explorer/
  • Forced reload causes all resources to be reloaded
  • OpenLiberty logo is at the top of the page
  • The Filter box is present at the top of the page
  • Filter using openapi-ui-test-app of prefixes of returns the operations
  • Filter using any other value returns no operations
  • Top of the Page has Liberty REST APIs
  • OAS3 icon surrounding colour is #5d8203 via element inspection
  • No Valid button in page footer
  • Operation Block colours:
    • POST background is rgba(32,128,80,.1) (div class = opblock opblock-post)
    • POST border is #208050 (div class = opblock opblock-post)
    • POST Icon background colour is #208050 (div class = opblock-summary-method)
    • PUT background is rgba(177,99,3,.1) (div class = opblock opblock-put)
    • PUT border colour is #b16303 (div class=opblock-summary-method)
    • PUT Icon background colour is #b16303 (div class=opblock-summary-method)
    • DELETE background is rgba(224,7,7,.1) (div class = opblock opblock-delete)
    • DELETE border colour is #e00707 (div class=opblock-summary-method)
    • DELETE Icon background colour is #e00707 (div class=opblock-summary-method)
    • GET background is rgba(31,111,240,.1) (div class = opblock opblock-get)
    • GET border colour is #1f6ff0 (div class=opblock-summary-method)
    • GET Icon background colour is #1f6ff0 (div class=opblock-summary-method)

Private UI

  • UI load on https://localhost:9443/ibm/api/explorer/ having provided credentials outlined in README
  • Forced reload causes all resources to be reloaded
  • OpenLiberty logo is at the top of the page
  • The Filter box is present at the top of the page
  • Filter using openapi-ui-test-app of prefixes of returns the operations
  • Filter using any other value returns no operations
  • Top of the Page has Liberty REST APIs
  • OAS3 icon surrounding colour is #5d8203 via element inspection
  • No Valid button in page footer
  • Operation Block colours:
    • POST background is rgba(32,128,80,.1) (div class = opblock opblock-post)
    • POST border is #208050(div class =opblock opblock-post`)
    • POST Icon background colour is #208050 (div class = opblock-summary-method)
    • PUT background is rgba(177,99,3,.1) (div class = opblock opblock-put)
    • PUT border colour is #b16303 (div class=opblock-summary-method)
    • PUT Icon background colour is #b16303 (div class=opblock-summary-method)
    • DELETE background is rgba(224,7,7,.1) (div class = opblock opblock-delete)
    • DELETE border colour is #e00707 (div class=opblock-summary-method)
    • DELETE Icon background colour is #e00707 (div class=opblock-summary-method)
    • GET background is rgba(31,111,240,.1) (div class = opblock opblock-get)
    • GET border colour is #1f6ff0 (div class=opblock-summary-method)
    • GET Icon background colour is #1f6ff0 (div class=opblock-summary-method)

Functionality Testing

MicroProfile UI

Access https://localhost:9443/openapi/ui

  • Two Server values in Server dropdown
  • Select HTTPS server url
  • Expand GET /{id} operation
    • Two responses - 200 and 404 displayed
    • Change media type in drop down
      • Example changes from either JSON -> XML or XML->JSON
    • Can switch between Example Value and Schema
    • Attempt to provide an ID value and should be prohibited from doing so
    • Click Try Out
      • Provide an ID value of 1
      • Click Execute and get a
        • 200 response
      • Change ID value to 0
      • Click Execute
        • 404 response
  • Expand POST /private
    • Padlock Icon is Unlocked
    • Click Try Out
      • Click execute
        • 401 response
  • Click Authorize and go to oauth section
  • Provide Client_id provided in README
  • Provide Client_secret provided in README
  • Select Test Scope
  • Click authorize
    • Login with user credentials provided in README
    • click allow once
    • returned to the OpenAPI UI
  • Close modal
  • All /private* operations now have a locked padlock
  • Expand POST /private
    • Click Try Out
    • Click Execute and get a 200 response
  • Expand GET /apiKeyNeeded
    • Padlock is unlocked
    • Description is Get a random record
    • Click Try Out
      • Click Execute and get a 403 response
  • Click Authorize
    • Enter apikey from README
    • Click Authorize
    • Close modal
  • Expand /apiKeyNeeded
    • Operation has a locked padlock
    • Click Try Out
    • Click Execute
      • 200 response

OpenAPI 3.x UI

Access https://localhost:9443/api/explorer

  • Two Server values in Server dropdown
  • Select HTTPS server url
  • Expand GET /{id} operation
    • Two responses - 200 and 404 displayed
    • Change media type in drop down
      • Example changes from either JSON -> XML or XML->JSON
    • Can switch between Example Value and Schema
    • Attempt to provide an ID value and should be prohibited from doing so
    • Click Try Out
      • Provide an ID value of 1
      • Click Execute and get a
        • 200 response
      • Change ID value to 0
      • Click Execute
      • 404 response
  • Expand POST /private
    • Padlock Icon is Unlocked
    • Click Try Out
      • Click execute
      • 401 response
  • Click Authorize and go to oauth section
  • Provide Client_id provided in README
  • Provide Client_secret provided in README
  • Select Test Scope
  • Click authorize
    • Login with user credentials provided in README
    • click allow once
    • returned to the OpenAPI UI
  • Close modal
  • All /private* operations now have a locked padlock
  • Expand POST /private
    • Click Try Out
    • Click Execute and get a 200 response
  • Expand GET /apiKeyNeeded
    • Padlock is unlocked
    • Description is Get a random record
    • Click Try Out
      • Click Execute and get a 403 response
  • Click Authorize
    • Enter apikey from README
    • Click Authorize
    • Close modal
  • Expand /apiKeyNeeded
    • Operation has a locked padlock
    • Click Try Out
      • Click Execute
      • 200 response

Customer provided customization

MicroProfile UI

  • If the server is running, stop the server
  • Rename the folder example-customization in src/main/liberty/config to mpopenapi
  • Start the server
  • Access https://localhost:9443/openapi/ui/
    • Perform a forced page refresh
    • Header bar colour has changed
    • Logo has changed

OpenAPI-3.x UI

  • If the server is running, stop the server
  • Rename the folder example-customization (or mpopenapi if renamed for MicroProfile testing) in src/main/liberty/config to openapi-3.1
  • Start the server
  • Access https://localhost:9443/api/explorer
    • Perform a forced page refresh
    • Header bar colour has changed
    • Logo has changed

Endpoint customization

(Microprofile only)

  • Update mpOpenAPI config with new docPath
  • Start server
  • Access https://localhost:9443//ui
  • Able to see page
  • Page shows api operations
  • Default UI customizations are in place
  • Update mpOpenAPI config with different uiPath
  • Update Oauth Provider config redirect path with uiPath value
  • Start server
  • Access https://localhost:9443/
  • Able to see page
  • Page shows api operations
  • Click Authorize and go to oauth section
  • Provide Client_id provided in README
  • Provide Client_secret provided in README
  • Select Test Scope
  • Click authorize
    • Login with user credentials provided in README
    • click allow once
    • returned to the OpenAPI UI
  • Close modal

@abutch3r
Copy link
Contributor Author

abutch3r commented Dec 7, 2023

RTC and CI build failures do not relate at all to openapi and in particular the UI

@abutch3r abutch3r merged commit d1f62e8 into OpenLiberty:integration Dec 7, 2023
2 of 4 checks passed
@abutch3r abutch3r deleted the update-swagger-ui-5.10.0 branch December 11, 2023 11:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Azquelt Azquelt Azquelt approved these changes

Assignees
No one assigned
Labels
CLA Signed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Update Swagger-ui to latest version Update the swagger-ui dependency update action
3 participants
@abutch3r @LibbyBot @Azquelt