Add Pluggable Capability to the AI Workspace UI - #3200
Merged
Conversation
Induwara04
requested review from
AnuGayan,
Arshardh,
CrowleyRajapakse,
HeshanSudarshana,
HiranyaKavishani,
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 11, 2026 10:13
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThe AI workspace now owns authentication and application setup. It exposes an extension API, registers extension routes, and renders scoped extension links in the application sidebar. ChangesAI Workspace Extensions
Estimated code review effort: 4 (Complex) | ~45 minutes Merge Risk: ⚪ Minimal · up to The PR adds extension-based routes and navigation to the AI Workspace without any supplied actionable merge-blocking risk; it is merge-ready after normal checks and review. Sequence Diagram(s)sequenceDiagram
participant Browser
participant AIWorkspace
participant App
participant ExtensionsProvider
participant ReactRouter
participant AppSidebar
Browser->>AIWorkspace: Render workspace
AIWorkspace->>App: Render with extensions
App->>ExtensionsProvider: Provide extension collection
App->>ReactRouter: Register organization and project routes
AppSidebar->>ExtensionsProvider: Read extension collection
AppSidebar->>ReactRouter: Navigate to scoped extension path
ReactRouter-->>AppSidebar: Match active extension route
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (2)
portals/ai-workspace/src/App.tsx (2)
282-292: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winValidate extension
idandpathbefore you build routes.
WorkspaceRoutestrusts the caller-suppliedidandpath. Two failure modes follow:
- Two extensions with the same
idproduce duplicate React keys here and a duplicateSidebar.Item idinportals/ai-workspace/src/pages/appShell/AppSidebar.tsx(line 319). The active-item state then highlights both entries.- An extension
paththat equals a built-in segment (for examplesettings,insights,projects,proxies) creates two sibling routes with the same pattern. React Router v6 ranks routes by specificity, not by declaration order, so the winner is not defined by the position at Line 609. The built-in page can become unreachable.Reserve the built-in top-level segments and reject or drop conflicting extensions with a console warning. This is a public plugin API, so the check pays for itself.
♻️ Proposed validation
+const RESERVED_SEGMENTS = new Set([ + 'home', 'projects', 'applications', 'proxies', 'service-provider', + 'mcp-proxy', 'gateways', 'quick-start', 'insights', 'settings', +]); + function WorkspaceRoutes({ extensions = [] }: AppProps) { - const extensionRoutes = extensions.map((extension) => ( - <Route key={extension.id} path={extension.path} element={ - <WithPageBoundary>{extension.element}</WithPageBoundary> - } /> - )); + const seen = new Set<string>(); + const extensionRoutes = extensions + .filter((extension) => { + const segment = extension.path.replace(/^\/+/, '').split('/')[0]; + if (RESERVED_SEGMENTS.has(segment)) { + console.warn(`Extension "${extension.id}" uses reserved path "${segment}".`); + return false; + } + if (seen.has(extension.id)) { + console.warn(`Duplicate extension id "${extension.id}" ignored.`); + return false; + } + seen.add(extension.id); + return true; + }) + .map((extension) => ( + <Route key={extension.id} path={extension.path} element={ + <WithPageBoundary>{extension.element}</WithPageBoundary> + } /> + ));🤖 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 `@portals/ai-workspace/src/App.tsx` around lines 282 - 292, Validate extensions in WorkspaceRoutes before mapping them into Route elements: drop and console.warn for duplicate extension.id values and for paths that match reserved built-in top-level segments such as settings, insights, projects, or proxies. Build extensionRoutes only from the validated extensions so React keys, sidebar IDs, and route patterns remain unique.
609-609: 🗄️ Data Integrity & Integration | 🔵 Trivial | ⚡ Quick winConfirm that every extension must mount in both the organization scope and the project scope.
The same
extensionRoutesarray registers each extension underorganizations/:orgSlugand underorganizations/:orgSlug/projects/:projectSlug. The extension element receives no indication of the active scope. An extension that is meaningful only at the organization level still gets a project-scoped URL, andAppSidebar.tsx(line 132) links to that URL whenever a project is selected.If both scopes are intended, document it in the
AIWorkspaceExtensiontype. If not, add ascope?: 'org' | 'project' | 'both'field and filter the routes and the sidebar entries accordingly.Also applies to: 821-821
🤖 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 `@portals/ai-workspace/src/App.tsx` at line 609, Clarify extension scope in AIWorkspaceExtension instead of registering every extension in both contexts unconditionally. Add the scope contract and update extensionRoutes plus AppSidebar entries to include organization routes, project routes, or both according to each extension’s scope, preventing organization-only extensions from appearing under project URLs.
🤖 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 `@portals/ai-workspace/src/App.tsx`:
- Around line 282-292: Validate extensions in WorkspaceRoutes before mapping
them into Route elements: drop and console.warn for duplicate extension.id
values and for paths that match reserved built-in top-level segments such as
settings, insights, projects, or proxies. Build extensionRoutes only from the
validated extensions so React keys, sidebar IDs, and route patterns remain
unique.
- Line 609: Clarify extension scope in AIWorkspaceExtension instead of
registering every extension in both contexts unconditionally. Add the scope
contract and update extensionRoutes plus AppSidebar entries to include
organization routes, project routes, or both according to each extension’s
scope, preventing organization-only extensions from appearing under project
URLs.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 93ae7bf5-784d-4da2-97da-9ddc2ca4bfcc
📒 Files selected for processing (8)
portals/ai-workspace/package.jsonportals/ai-workspace/src/AIWorkspace.tsxportals/ai-workspace/src/App.tsxportals/ai-workspace/src/extensions.tsxportals/ai-workspace/src/index.tsportals/ai-workspace/src/main.tsxportals/ai-workspace/src/pages/appShell/AppSidebar.tsxportals/ai-workspace/src/pages/appShell/appShellMain.tsx
Thushani-Jayasekera
previously approved these changes
Aug 12, 2026
Induwara04
dismissed stale reviews from Thushani-Jayasekera and coderabbitai[bot]
via
August 14, 2026 06:39
75ade98
lasanthaS
approved these changes
Aug 14, 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.
This pull request introduces a new extension system for the AI Workspace, enabling the platform to support pluggable extensions that can add custom routes and navigation items. The changes include new context providers, updates to the main entry point, and modifications to the sidebar and app shell to surface extensions in the UI.
Issue: https://github.com/wso2-enterprise/apim-saas/issues/2882
Extension system and context:
AIWorkspaceExtensiontype and anExtensionsProvidercontext insrc/extensions.tsxto manage and provide extension definitions throughout the app.AppandAIWorkspacecomponents to accept anextensionsprop, propagate it via context, and inject extension routes into the router. [1] [2] [3] [4] [5] [6]Sidebar and navigation integration:
AppSidebarto consume extensions from context and render a new "Cloud" category with navigation links for each registered extension. [1] [2] [3] [4]appShellMain.tsxto automatically highlight the correct sidebar item for extension routes. [1] [2] [3] [4]Entry point and exports:
main.tsxto use the newAIWorkspaceentrypoint, simplifying the bootstrapping logic and centralizing theme and authentication handling. [1] [2]package.jsonandindex.tsto expose the new extension-related types and entrypoints for external consumption. [1] [2]These changes collectively make the AI Workspace modular and extensible, allowing new features to be integrated as extensions with minimal changes to the core codebase.