fix(ai-workspace): scroll API Keys into view from the Consume LLM Provider step

[sanjulaonline]

Purpose

The "Consume LLM Provider" step in the LLM provider quick-start banner gave no
visible feedback, so it read as a dead button. Two causes, one per entry point:

• Overview page — the handler called setTabIndex(0) when tab 0 is already
  the default (a no-op), then set highlightApiKeySection, which only changes a
  borderColor/boxShadow on the API Keys section. That section sits below the
  fold and nothing ever scrolled it into view.
• Deploy page — the step navigated to the overview route carrying no state,
  so the highlight intent was dropped across the navigation.

Related to #3099

Scoped to the first defect reported in that issue only. The second (LLM proxy
deployment failing when provider security is switched off) is already covered by
#2955, so the issue is intentionally left open.

Goals

Select the Overview tab, smoothly scroll the API Keys section into view, and
briefly highlight it — from both entry points.

Approach

• Added an optional apiKeysSectionRef prop to ServiceProviderOverviewTab,
  attached to the Box already wrapping the API Keys heading and panel.
• ServiceProviderOverview scrolls it with
  scrollIntoView({ behavior: 'smooth', block: 'center' }) and enables the
  existing temporary highlight.
• The target isn't always mounted when the intent arrives: TabPanel unmounts
  inactive tabs, and the section sits inside an async gateways.length > 0
  branch owned by the child. So a pending-intent flag is drained by a stable
  callback ref the moment the node mounts — no timeout or polling in the focus
  path.
• The overview page consumes focusApiKeys in the effect that already handles
  providerAdded, guarded on location.key so a single history entry is
  consumed exactly once. This matters because the clearing navigation is async:
  without the guard a replayed effect sees the same state and would fire the
  snackbar and the scroll twice. It then drops only the consumed flags, keeping
  unrelated state as well as search/hash, so a refresh or back-navigation
  cannot replay the scroll.
• The pre-existing inline setTimeout(..., 3000) moved into an effect with
  clearTimeout cleanup, fixing an uncancelled timer on unmount.
• The deploy page applies the same availability condition as the destination
  (hasPermission(SCOPES.LLM_PROVIDER_MANAGE) && !isProjectLevel, matching
  isAdminOrgLevel on the overview page). When API Keys are unavailable it shows
  an informational snackbar without navigating and without creating a
  focusApiKeys intent, so the step never lands on a page with no target.

No changes to the deployment or security path, no new dependencies, no unrelated
refactoring.

User stories

As a user who has created and deployed an LLM provider, clicking "Consume LLM
Provider" takes me to the API Keys section and highlights it — from either the
overview or the deploy page.

Documentation

N/A — no documented behaviour changes; this restores the interaction the existing
quick-start banner already implies.

Automation tests

• Unit tests

  Automated UI tests were not added because this package has no unit-test
  runner.

• Integration tests

  The existing Cypress suite requires a live platform stack, so no spec was
  added.

Verification performed:

• npm run build — passed.
• npx tsc --noEmit — currently fails with the same 20 pre-existing errors on
  unchanged main; this change introduces no additional TypeScript errors.
• Browser and Cypress verification were not performed.

Manual verification steps:

1. Create an LLM provider and deploy it to a gateway.
2. On the provider Overview page, scroll so API Keys is off screen, then click
   Consume LLM Provider — the page should scroll to API Keys and highlight it.
3. Switch to Guardrails & Policies and click the step again — should return to
   Overview and scroll to API Keys.
4. From the provider's Deploy to Gateway page, click the step — should
   navigate to Overview and scroll to API Keys.
5. Refresh that page; it must not scroll again. Back/forward likewise.
6. As a project-level user (or one without LLM provider management permission),
   click the step on the Deploy page — you should stay on the Deploy page, see the
   informational message, and no navigation state should be created.

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes
• Ran FindSecurityBugs plugin and verified report? N/A — TypeScript/React UI change; FindSecurityBugs is a Java tool. No new dependencies, no network calls, no user-controlled data rendered or persisted.
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Samples

N/A

Related PRs

• Deploy LLM providers without upstream authentication #2955 covers the second defect in [Bug]: AI workspace Consume LLM Provider button not working #3099; intentionally not touched here.
• Refactor terminology from "LLM *" to "AI *" across AI Workspace #2648 also edits ServiceProviderOverview.tsx (LLM → AI terminology sweep);
  whichever merges second needs a small mechanical rebase.

Test environment

• Node.js v24.9.0, npm 11.6.0, Windows 11
• Verified via npm run build and npx tsc --noEmit only.

[coderabbitai]

📝 Walkthrough

Walkthrough

The consume step now requests API-key focus through navigation state. The overview tracks the API Keys section, scrolls to it after mounting, highlights it temporarily, and removes consumed state flags.

Changes

API key focus navigation

Layer / File(s)	Summary
Navigation request portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderDeploy.tsx, portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverview.tsx	The consume step passes focusApiKeys navigation state. The overview state type accepts the flag.
API Keys section reference wiring portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverviewTab.tsx, portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverview.tsx	The overview tab accepts and attaches an API Keys section ref. The overview passes the callback ref.
Focus and navigation-state workflow portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverview.tsx	The overview defers focus until the section mounts, scrolls smoothly, highlights it for three seconds, cleans up timers, deduplicates effect handling, and preserves unrelated navigation state while removing consumed flags.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ConsumeStep
  participant ServiceProviderOverview
  participant ServiceProviderOverviewTab
  ConsumeStep->>ServiceProviderOverview: Navigate with focusApiKeys
  ServiceProviderOverview->>ServiceProviderOverviewTab: Pass apiKeysSectionRef
  ServiceProviderOverviewTab-->>ServiceProviderOverview: Mount API Keys section
  ServiceProviderOverview->>ServiceProviderOverview: Scroll and highlight API Keys
  ServiceProviderOverview->>ServiceProviderOverview: Remove consumed navigation flag

Loading

Possibly related PRs

• wso2/api-platform#2909: Both changes modify API-key behavior in ServiceProviderOverviewTab.tsx.

Suggested reviewers: anugayan, arshardh, ashera96

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly and concisely describes scrolling the API Keys section from the Consume LLM Provider step.
Description check	✅ Passed	The description covers the purpose, goals, approach, testing, security checks, related work, and test environment with sufficient detail.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 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
`@portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderDeploy.tsx`:
- Around line 80-83: Only pass the focusApiKeys navigation state from
ServiceProviderDeploy when the destination renders the API Keys section;
otherwise use the explicit project-level/non-admin fallback. In
ServiceProviderOverview, update the focus-state consumer to apply that same
fallback before clearing the request, so non-rendering layouts do not silently
discard the Consume-step intent. Affected sites:
portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderDeploy.tsx
lines 80-83 requires the navigation guard;
portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverview.tsx
lines 710-727 requires the matching consume-or-fallback behavior.

🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: dc18c0fa-75a1-4f26-82c5-9f21f078b7a9

📥 Commits

Reviewing files that changed from the base of the PR and between e498dd0 and 0e677f5.

📒 Files selected for processing (3)

• portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderDeploy.tsx
• portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverview.tsx
• portals/ai-workspace/src/pages/appShell/appShellPages/serviceProvider/ServiceProviderOverviewTab.tsx