Upgrade Oxygen UI to 0.15.0 and minor console UI changes for unification

[SandaminiM]

Purpose

Oxygen UI Upgrade

• Upgraded @wso2/oxygen-ui, @wso2/oxygen-ui-charts-react, and @wso2/oxygen-ui-icons-react to 0.15.0 from 0.8 / 0.9.1.
• Upgraded the underlying lucide-react icon library from 0.545 to 1.16.
• Ported our existing Lucide fix for icon console warnings to the new version and removed the Oxygen patch that is now fixed in the library.

Console UI unification Changes

• Form labels now appear above text fields and selects instead of floating inside the fields.
• Profile avatars now show two-letter initials, including when the profile picture fails to load.
• Project Settings now uses a rounded-square project avatar, matching the Project Overview.
• Updated the footer order to Documentation · Support · Terms of Use · Privacy Policy.
• Removed the Data Plane dropdown from Create Environment. The first available data plane is now selected automatically.
• Build, Deploy, and Test pages within a project now only ask for the integration, using a more compact layout.
• Aligned the Re-validate button on Import Integration with the Repository Sub Path field.

Goals

Describe the solutions that this feature/fix will introduce to resolve the problems described above

Approach

Describe how you are implementing the solutions. Include an animated GIF or screenshot if the change affects the UI (email documentation@wso2.com to review all UI text). Include a link to a Markdown file or Google doc if the feature write-up is too long to paste here.

User stories

Summary of user stories addressed by this change>

Release note

Brief description of the new feature or bug fix as it will appear in the release notes

Documentation

Link(s) to product documentation that addresses the changes of this PR. If no doc impact, enter “N/A” plus brief explanation of why there’s no doc impact

Training

Link to the PR for changes to the training content in https://github.com/wso2/WSO2-Training, if applicable

Certification

Type “Sent” when you have provided new/updated certification questions, plus four answers for each question (correct answer highlighted in bold), based on this change. Certification questions/answers should be sent to certification@wso2.com and NOT pasted in this PR. If there is no impact on certification exams, type “N/A” and explain why.

Marketing

Link to drafts of marketing content that will describe and promote this feature, including product page changes, technical articles, blog posts, videos, etc., if applicable

Automation tests

• Unit tests

  Code coverage information

• Integration tests

  Details about the test cases and coverage

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes/no
• Ran FindSecurityBugs plugin and verified report? yes/no
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes/no

Samples

Provide high-level details about the samples related to this feature

Related PRs

List any other related PRs

Migrations (if applicable)

Describe migration steps and platforms on which migration has been tested

Test environment

List all JDK versions, operating systems, databases, and browser/versions on which this feature/fix was tested

Learning

Describe the research phase and any blog posts, patterns, libraries, or add-ons you used to solve the problem.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 3789450e-838a-4a71-86d4-871a31b4072a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

[SandaminiM]

@coderabbitai review

[coderabbitai]

⚠️ Action not completed

Review skipped: 155 files exceed the limit of 100.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Copilot]

Copilot review overview

🔵 Needs a closer look

A major UI-library major-version upgrade combined with a cross-cutting form-field rendering change across ~100 files carries visual/interaction regression risk that can only be confirmed through human/visual verification.

Review effort: Balanced
Findings: None

What changed in this PR

This PR upgrades the Oxygen UI component libraries (@wso2/oxygen-ui, -charts-react, -icons-react) from 0.8/0.9.1 to 0.15.0 and the underlying lucide-react from 0.545 to 1.16, re-porting the icon key warning patch and dropping the now-fixed Oxygen patch. Alongside the upgrade, it applies a set of console UI "unification" changes, the largest being a new local components/common/TextField wrapper that renders field labels above the input; ~100 call sites switch their TextField import to this wrapper.

Changes:

• Add components/common/TextField.tsx (label-above wrapper) and migrate all TextField imports to it; convert several Select usages to FormControl/FormLabel.
• Add userInitials util (+tests) and useLoadedImage hook; update AppLayout avatar initials and footer ordering.
• Remove the Data Plane dropdown from Create Environment (auto-select first plane), tidy Create/Edit Environment critical-flag UI, refine IntegrationScopePicker and the Import Integration re-validate button.
• Bump dependency versions and patches in package.json, pnpm-lock.yaml, pnpm-workspace.yaml.

File	Description
components/​common/​TextField.tsx	New wrapper rendering label above field; core of the unification change
hooks/​useLoadedImage.ts	New hook returning a picture URL only once it loads
utils/​string.ts /​ string.test.ts	userInitials helper and unit tests
layouts/​AppLayout.tsx	Avatar initials fallback + footer reorder
pages/​CreateEnvironment.tsx /​ EditEnvironment.tsx	Remove data-plane picker; restructure critical-flag UI
components/​IntegrationScopePicker.tsx(.styles.ts)	Project preselect handling + content-sized layout
pages/​ImportIntegration.tsx	Re-validate button vertical alignment
components/​** (~90 files)	Mechanical TextField import swap to common/TextField
components/​MessageBrokers/​*, ApiInfo/​*, Documents/​DocFormPage.tsx	Select → FormControl+FormLabel conversions
package.json, pnpm-lock.yaml, pnpm-workspace.yaml, patches/​*	Oxygen/lucide version + patch updates

Notes from investigation (no blocking inline issues found): removed symbols (SMALL_SELECT_LABEL_SX, InputLabel, IS_CLOUD in EditEnvironment, lowercase Github) have no lingering references; CircularProgress is still used in CreateEnvironment; patch/version changes are internally consistent with no leftover references; the new util follows the repo's utils test convention (hooks/components have no co-located tests). One behavioral point worth human confirmation: Create/Edit Environment now show "Mark as Critical Environment" on cloud, where a now-removed comment previously stated it "does not take effect" — this appears intentional (a matching explanatory Alert was added) but is not called out in the PR description.

Files not reviewed (1)

• ipaas/pnpm-lock.yaml: Generated file

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.