feat: environment-aware API Try Out console (OpenAPI & GraphQL)#670
Merged
Conversation
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
NomadXD
requested review from
Mirage20,
kaviththiranga,
sameerajayasoma and
stefinie123
as code owners
|
Changeset detected — the following file(s) will be released with this PR: |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a raw API definition viewer and an environment-aware Try Out console for OpenAPI and GraphQL entities, with auth inputs, token exchange, route wiring, exports, and tests. ChangesAPI definition viewing and Try Out console
Estimated code review effort: 4 (Complex) | ~60 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
plugins/openchoreo/src/components/ApiTryOut/ApiTryOut.tsx (1)
281-309: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winPin the Swagger UI override to the exact component contract.
wrapComponents.infoand theServers/ServersContaineroverrides rely on Swagger UI component names that can shift across upgrades; pin the resolvedswagger-ui-reactversion and keep a regression check for the.scheme-containerfallback.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/openchoreo/src/components/ApiTryOut/ApiTryOut.tsx` around lines 281 - 309, The Swagger UI overrides in ApiTryOut rely on component names that may change across upgrades, so pin the resolved swagger-ui-react version used by connectionPlugin and keep a regression check for the useConsoleStyles .scheme-container fallback. Review the wrapComponents.info, Servers, and ServersContainer overrides in ApiTryOut.tsx and make sure they are treated as version-coupled behavior, with any upgrade changes validated against those exact contracts.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/app/src/components/catalog/ApiDefinitionTabs.tsx`:
- Around line 57-61: The copy handler in ApiDefinitionTabs’s handleCopy
currently marks success even when navigator.clipboard.writeText fails or is
unavailable. Make handleCopy async, await the writeText call, and only call
setCopied(true) after a successful write; on failure, skip the success state and
optionally handle the error so the UI does not show false copy feedback.
In `@plugins/openchoreo/src/components/ApiTryOut/ApiTryOut.tsx`:
- Around line 354-361: The `ApiTryOut` selection logic is not revalidating
`selected` when `environments` changes, so stale environment objects can keep
driving `activeUrl` and `effectiveDefinition` after a refetch. Update the
`useEffect` in `ApiTryOut.tsx` to detect when the current `selected` no longer
exists in the refreshed `environments` list and reset or replace it with a valid
environment (for example the first deployed one), and make sure the downstream
selection-dependent logic around `activeUrl`/`effectiveDefinition` uses the
validated environment state rather than the stale object.
In `@plugins/openchoreo/src/components/ApiTryOut/GraphQlConsole.tsx`:
- Around line 44-50: The GraphQL schema build in GraphQlConsole is swallowing
parse/validation failures, so users get no indication when the SDL is invalid.
Update the useMemo around buildSchema(definition) to capture the thrown error
and surface it through the console UI state used by GraphQlConsole, rather than
returning undefined silently. Use the existing schema-building flow and related
docs/autocomplete rendering logic to show a clear error or fallback message when
schema compilation fails.
In `@plugins/openchoreo/src/components/ApiTryOut/TryOutAuthFields.tsx`:
- Around line 119-133: The secret visibility toggle in TryOutAuthFields is
removed from the keyboard tab order by tabIndex={-1}, making it inaccessible to
keyboard-only users. Update the toggle button in TryOutAuthFields so it can
receive focus via keyboard, while keeping the existing show/hide behavior tied
to setShow, show, and the aria-label state.
In `@plugins/openchoreo/src/components/ApiTryOut/useTryOutAuth.ts`:
- Around line 17-22: Expired OAuth2 tokens are still being reused because
`OAuthState.expiresAt` is never checked before building auth headers. Update
`buildAuthHeaders` in `useTryOutAuth` to accept `expiresAt` (or the full `oauth`
state) and treat `token` as unavailable once `Date.now() >= expiresAt`, so
expired tokens are not sent. Then make sure the auth flow that calls
`buildAuthHeaders` uses this new expiry-aware behavior and returns the
unauthenticated/refresh-needed state instead of attaching a stale bearer token.
---
Nitpick comments:
In `@plugins/openchoreo/src/components/ApiTryOut/ApiTryOut.tsx`:
- Around line 281-309: The Swagger UI overrides in ApiTryOut rely on component
names that may change across upgrades, so pin the resolved swagger-ui-react
version used by connectionPlugin and keep a regression check for the
useConsoleStyles .scheme-container fallback. Review the wrapComponents.info,
Servers, and ServersContainer overrides in ApiTryOut.tsx and make sure they are
treated as version-coupled behavior, with any upgrade changes validated against
those exact contracts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c2627a0f-6089-4e56-8b5f-1107b3d81705
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (9)
packages/app/src/components/catalog/ApiDefinitionTabs.tsxpackages/app/src/components/catalog/EntityPage.tsxplugins/openchoreo/package.jsonplugins/openchoreo/src/components/ApiTryOut/ApiTryOut.tsxplugins/openchoreo/src/components/ApiTryOut/GraphQlConsole.tsxplugins/openchoreo/src/components/ApiTryOut/TryOutAuthFields.tsxplugins/openchoreo/src/components/ApiTryOut/index.tsplugins/openchoreo/src/components/ApiTryOut/useTryOutAuth.tsplugins/openchoreo/src/index.ts
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
There was a problem hiding this comment.
🧹 Nitpick comments (1)
plugins/openchoreo/src/components/ApiTryOut/GraphQlConsole.test.tsx (1)
57-81: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRestore
global.fetchmock viaafterEach, not just end-of-test.If an assertion in this test throws before Line 80,
fetchSpy.mockRestore()never runs, leaking the spy into later tests.♻️ Suggested fix
+afterEach(() => { + jest.restoreAllMocks(); +}); + describe('GraphQlConsole', () => {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/openchoreo/src/components/ApiTryOut/GraphQlConsole.test.tsx` around lines 57 - 81, The `GraphQlConsole` fetch spy is only restored at the end of the test, so a failing assertion can leak the mocked `global.fetch` into later tests. Move the cleanup for `fetchSpy` into a shared `afterEach` in `GraphQlConsole.test.tsx` so the mock is always restored, and keep the test body focused on verifying `createGraphiQLFetcher` and the injected auth headers.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@plugins/openchoreo/src/components/ApiTryOut/GraphQlConsole.test.tsx`:
- Around line 57-81: The `GraphQlConsole` fetch spy is only restored at the end
of the test, so a failing assertion can leak the mocked `global.fetch` into
later tests. Move the cleanup for `fetchSpy` into a shared `afterEach` in
`GraphQlConsole.test.tsx` so the mock is always restored, and keep the test body
focused on verifying `createGraphiQLFetcher` and the injected auth headers.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2f95426b-2b1e-46c2-bb2e-18d9ae1ecaea
📒 Files selected for processing (6)
.changeset/api-tryout-console.mdplugins/openchoreo/src/components/ApiTryOut/ApiTryOut.test.tsxplugins/openchoreo/src/components/ApiTryOut/GraphQlConsole.test.tsxplugins/openchoreo/src/components/ApiTryOut/TryOutAuthFields.test.tsxplugins/openchoreo/src/components/ApiTryOut/TryOutAuthFields.tsxplugins/openchoreo/src/components/ApiTryOut/useTryOutAuth.test.ts
✅ Files skipped from review due to trivial changes (1)
- .changeset/api-tryout-console.md
🚧 Files skipped from review as they are similar to previous changes (1)
- plugins/openchoreo/src/components/ApiTryOut/TryOutAuthFields.tsx
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
4 tasks
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
stefinie123
previously approved these changes
Jul 9, 2026
stefinie123
left a comment
stefinie123
left a comment
Contributor
There was a problem hiding this comment.
Would be better to give a link to the deploy page in the message when the API is not deployed to any environment.
We can add that as an improvement in another PR
Contributor
|
@NomadXD What will be the user experience if a given endpoint visibility is set to internal ? In that case does Try out make any sense ? |
Signed-off-by: Lahiru De Silva <lahirude@wso2.com>
stefinie123
approved these changes
Jul 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Reworks the catalog API entity page into three tabs and adds an environment-aware Try Out experience so users can invoke their deployed APIs directly from the portal.
YamlEditor(with a copy button), consistent with the Component/Resource definition tab.Related to openchoreo/openchoreo#4118
Try Out
A Connection card (styled like the deploy page's environment card) sits at the top of the console:
useEnvironmentData/derivePrimaryUrlplumbing), shown as a copyable link.OpenAPI console
Screen.Recording.2026-07-07.at.15.55.13.mov
GraphQL console
Screen.Recording.2026-07-09.at.08.47.14.mov
Unsupported endpoints
Screen.Recording.2026-07-07.at.16.00.29.mov
No deployments available
Screen.Recording.2026-07-09.at.08.49.57.mov
Internal endpoints not supported
Screen.Recording.2026-07-09.at.12.29.28.mov
Per API type:
Authentication (client-side)
Configured in the Connection card and applied to every test request in both consoles (SwaggerUI
requestInterceptor/ GraphiQL customfetch, via a shared headers ref so editing the form never re-initializes the console):Authorization: Bearer ….client_credentialsgrant directly from the browser and the returned access token is sent as a Bearer token.Dependencies
Adds to
@openchoreo/backstage-plugin:graphiql,@graphiql/toolkit,graphql,graphql-ws.Notes / caveats
Testing
yarn tscandyarn backstage-cli repo lintpass.Summary by CodeRabbit
Summary by CodeRabbit