chore(APICP): revamp the portal UI with a scope-aware app shell - #3281
Open
ShavinAnjithaAlpha wants to merge 5 commits into
Open
chore(APICP): revamp the portal UI with a scope-aware app shell#3281ShavinAnjithaAlpha wants to merge 5 commits into
ShavinAnjithaAlpha wants to merge 5 commits into
Conversation
- Restructure the pages, components, hooks and contexts. - Restructure pages, components, hooks, and contexts - Fix issues introduced by the restructuring - Enhance project listing with pagination, sorting, and improved UI - Add an index to the project API resource section - Add form controls to project-related forms - Temporarily make the app sidebar static
…ome restructuring - Make the App Side Bar and Header consistent with the bijira. - Updated projectPath and apiPath functions to manage unresolved project and API scopes. - Refactored routes to utilize new path builders for project and API-level pages. - Improved ConsoleScopeContext and ConsoleScopeProvider to handle new API capabilities and project management. - Added ScopeGate component to manage access to pages based on selected scopes.
ShavinAnjithaAlpha
requested review from
AnuGayan,
Arshardh,
CrowleyRajapakse,
HeshanSudarshana,
HiranyaKavishani,
Induwara04,
Krishanx92,
PasanT9,
Piumal1999,
RakhithaRR,
Tharsanan1,
Thushani-Jayasekera,
VirajSalaka,
ashera96,
chamilaadhi,
dushaniw,
hisanhunais,
lasanthaS,
malinthaprasan,
pubudu538,
renuka-fernando,
senthuran16,
tgtshanika,
tharikaGitHub,
tharindu1st and
thivindu
as code owners
August 21, 2026 07:16
Contributor
|
Important Review skippedToo many files! This PR contains 153 files, which is 53 over the limit of 100. To get a review, reduce the PR to 100 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. This review couldn't start because sufficient usage credits or metered capacity aren't available. Add credits or update usage-based reviews in the billing tab, then retry. ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (153)
You can disable this status message by setting the 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 |
Induwara04
reviewed
Aug 21, 2026
| useCreateApiKey, | ||
| useUpdateApiKey, | ||
| useRevokeApiKey, | ||
| } No newline at end of file |
Contributor
Author
There was a problem hiding this comment.
Pushed a fixed in commit 3572c88, review it.
Induwara04
reviewed
Aug 21, 2026
| @@ -0,0 +1,1431 @@ | |||
| # Oxygen UI Component Reference | |||
|
|
|||
Contributor
There was a problem hiding this comment.
Initiate a one skill based on this all like 'how to develop UI'
Contributor
Author
There was a problem hiding this comment.
Pushed a fixed in commit 3572c88, review it.
… resource exporting
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
2 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.
Purpose
Revamp the API Control Plane portal's app shell so it reads and behaves like Bijira, and restructure the source tree around it. The sidebar, header and layout are the visible half; underneath, the scope model (organization → project → API) is made explicit in the route builders, the navigation registry and a new
ScopeGate, so what the sidebar offers and what a page can actually render can no longer disagree.Resolves https://github.com/wso2-enterprise/apim-saas/issues/2897, https://github.com/wso2-enterprise/apim-saas/issues/2907
App shell
Sidebar
Header
SearchableComplexSelect(icon + primary/secondary rows, bounded trigger width, ellipsized option text) in place of the plainComplexSelect.ProjectQuickSelector,APIQuickSelector) appear for the levels not yet selected, with their own loading/error states.displayNamewith a fallback to the handle, and keep the current value selectable before the list loads so the switcher never renders out of range.react-intl(brand title, switcher labels, search / empty / no-results copy, notification tooltip, footer links, panel title).Layout
PageContent(full width,Stack-spaced above the outlet) instead of floating above it, and now label fromdisplayName.Scope model, routes and gating
projectPath/apiPathbuilders with an explicit unresolved-scope marker. Anullhandle produces the page's scope-less alias by substituting a reservedselect-scopesegment (/organizations/acme/select-scope/apis) rather than dropping segments, which would make/organizations/acme/projects/apisread positionally as projectapis, and would collide project Settings/Home with their organization-level equivalents.ScopeGaterenders a project/API picker in place of the page body until the route carries the scope the page needs, then navigates to the fully-scoped URL.projectScopedPaths/apiScopedPaths/apiScopeSelectPathsgenerate both the route patternsAppRoutesregisters and thematchpredicates the sidebar highlights on, from the same builder, the route table and the highlight can't drift apart. Submenu parents match only the aliases, so parent and child never both claim active.ConsoleScopeProvider/ConsoleScopeContextnow exposeisProjectScope/isApiScope, projects and their error state, and API capabilities, typed against the generated resource clients (RestApi,Organization,Project) rather than hand-written domain types.observe/runtimelogsto API-scopedobservability/logs.ComingSoonplaceholder pages for Admin, API Insights, Compliance, Metrics, Alerts, Monetize, LifeCycle, API Console and API Chat, so every sidebar destination resolves to something.Restructuring
src/features/*→src/pages/appShell/appShellPages/*(apis, deploy, gateways, projects, organizations, observability, insights, manage, test, admin, settings), with each page's owncomponents/andutils/subfolders.src/features/auth→src/contexts/auth;features/billing/ProductActivation→src/hooks; layouts →src/pages/appShell;src/pages/authfor login/callback.src/api/resources/*(organizations, projects, restApis, apiKeys, gateways).Theme
AppThemeProviderwraps Oxygen'sOxygenUIThemeProviderwith a theme registry (AcrylicOrangeTheme), a dedicated emotion cache andCssBaseline.sxrecipes (glassSurfaceSx,hairline,interactiveCardSx,stickyBottomBarSx) so surfaces stay consistent across pages.portals/api-control-plane/.claude/(components, patterns, migration, theming +oxygen-component/oxygen-form/oxygen-layout/oxygen-migrate).Documentation
N/A
Tests
AppSidebar.test.tsx,ScopeGate.test.tsx,paths.test.ts,useNavigationItems.test.tsx.navigationRegistry.test.ts(clusters, submenus, adaptive items, alias matching),ApiListPage.test.tsx,ProjectListPage.test.tsx,NewProjectDialog.test.tsx,apiCapabilities.test.ts.Related
main.Test environment