platform gateway UI issue fix - runtime,policyhub button,docker,kubernetes logos#1285
platform gateway UI issue fix - runtime,policyhub button,docker,kubernetes logos#1285ashiduDissanayake wants to merge 1 commit intowso2:mainfrom
Conversation
…ding UI - runtime tab content changed to redirection - policy hub button changed to blue - added an arrow - address the issue of wso2/api-manager#4835
ashiduDissanayake
requested review from
Krishanx92,
lasanthaS,
piyumaldk and
tharikaGitHub
as code owners
|
|
WalkthroughThe PR updates icon handling in a gateway quick start guide by importing SVG modules instead of hardcoded paths, adds conditional UI rendering for Universal gateway type in runtime configuration, adjusts Policy Hub header styling, and adds a reverse flow arrow to the policies expansion component. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
ashiduDissanayake
changed the title
|
There was a problem hiding this comment.
Pull request overview
Updates the PolicyHub and Universal Gateway UI to better guide users toward managing runtime configuration via policies, while refreshing related visuals.
Changes:
- Added a flow arrow in the shared Policies UI.
- Updated the Policy Hub button styling (contained/blue) and layout to stretch with the adjacent control.
- For Universal Gateway APIs, replaced Runtime Configuration content with a “Go to Policies” redirection card; refreshed Quick Start tab icons/assets.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| portals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx | Adds a FlowArrow to the shared policies expansion layout. |
| portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/PolicyList.tsx | Adjusts Policy Hub button variant and flex alignment/stretch behavior. |
| portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/RuntimeConfiguration.jsx | Adds Universal Gateway redirect UI from Runtime Configuration to Policies. |
| portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/UniversalGatewayQuickStartGuide.jsx | Adds an icon for “Quick Start” and switches Docker/K8s icons to imported SVG assets. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| defaultMessage='For APIs deployed on the Universal Gateway, runtime configurations | ||
| such as authentication and security are applied via policies. | ||
| Head over to the Policies section to view and manage them.' |
There was a problem hiding this comment.
The defaultMessage is a single-quoted string spanning multiple lines, which is invalid JavaScript/JSX and will fail to compile. Convert this to a single-line string, or use a template literal (backticks) / explicit concatenation / {'...'} with \\n as needed.
| defaultMessage='For APIs deployed on the Universal Gateway, runtime configurations | |
| such as authentication and security are applied via policies. | |
| Head over to the Policies section to view and manage them.' | |
| defaultMessage='For APIs deployed on the Universal Gateway, runtime configurations such as authentication and security are applied via policies. Head over to the Policies section to view and manage them.' |
| import DockerIcon from '../../../../../site/public/images/docker-icon.svg'; | ||
| import KubernetesIcon from '../../../../../site/public/images/Kubernetes_logo.svg'; |
There was a problem hiding this comment.
These imports reach outside the admin portal’s src tree into site/public, which tightly couples the build to repo layout and may break depending on the bundler’s allowed import roots/asset loader rules. Prefer placing these assets under the admin portal’s source assets (so they’re bundled reliably) or keep them as static URLs (as previously done) if they’re intended to be served from /site/public.
| import DockerIcon from '../../../../../site/public/images/docker-icon.svg'; | |
| import KubernetesIcon from '../../../../../site/public/images/Kubernetes_logo.svg'; | |
| const DockerIcon = '/site/public/images/docker-icon.svg'; | |
| const KubernetesIcon = '/site/public/images/Kubernetes_logo.svg'; |
| @@ -138,6 +138,7 @@ const PoliciesExpansionShared: FC<PoliciesExpansionSharedProps> = ({ | |||
| } | |||
| isApiRevision={isApiRevision} | |||
| /> | |||
There was a problem hiding this comment.
The arrow direction is intentionally inverted relative to arrowDirection, which is non-obvious and makes the prop easy to misuse later (especially if arrowDirection ever expands beyond 'left' | 'right'). Consider renaming the local value to reflect the inversion (e.g., oppositeArrowDirection) or adding a short inline comment clarifying why the direction is flipped.
| /> | |
| /> | |
| {/* Second arrow intentionally points in the opposite direction to bracket the dropzone */} |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/RuntimeConfiguration.jsx (1)
655-716: Short-circuit the Universal path before the old runtime initialization.This branch renders a static CTA, but it still sits behind the generic loading gate and the earlier key-manager / endpoint setup effects. That means the Universal page can be delayed—or even show an unrelated key-manager error toast—before the user ever sees “Go to Policies”. Please treat
api.gatewayType === 'Universal'as a true fast path and bypass those requests/loaders.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/RuntimeConfiguration.jsx` around lines 655 - 716, The Universal gateway branch must be a true fast path: in the RuntimeConfiguration component, short-circuit and render the api.gatewayType === 'Universal' UI before any heavy loaders/toast-producing logic runs by returning that JSX early (or by guarding side-effect logic), so key-manager / endpoint setup effects and generic loading gates never execute for Universal APIs. Concretely, move the api.gatewayType === 'Universal' check to the top of the RuntimeConfiguration component body (or add an early return), and/or add an early-return guard inside the relevant useEffect handlers (the key-manager and endpoint initialization effects) so functions like the key-manager/endpoint setup effects do nothing when api.gatewayType === 'Universal' and no loaders/toasts are triggered.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/RuntimeConfiguration.jsx`:
- Around line 655-716: The Universal gateway branch must be a true fast path: in
the RuntimeConfiguration component, short-circuit and render the api.gatewayType
=== 'Universal' UI before any heavy loaders/toast-producing logic runs by
returning that JSX early (or by guarding side-effect logic), so key-manager /
endpoint setup effects and generic loading gates never execute for Universal
APIs. Concretely, move the api.gatewayType === 'Universal' check to the top of
the RuntimeConfiguration component body (or add an early return), and/or add an
early-return guard inside the relevant useEffect handlers (the key-manager and
endpoint initialization effects) so functions like the key-manager/endpoint
setup effects do nothing when api.gatewayType === 'Universal' and no
loaders/toasts are triggered.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 05498bdf-d13d-4bf7-8fae-d393390ad0d4
📒 Files selected for processing (4)
portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/UniversalGatewayQuickStartGuide.jsxportals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Configuration/RuntimeConfiguration.jsxportals/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/PolicyList.tsxportals/publisher/src/main/webapp/source/src/app/components/Shared/PoliciesUI/PoliciesExpansion.tsx
Summary by CodeRabbit
New Features
Style