fix(orchestrator-form-react): fix ui styling issues in workflow results page

[karthikjeeyar]

Hey, I just made a Pull Request!

https://redhat.atlassian.net/browse/RHDHBUGS-2967

Fix orchestrator UI styling overrides:

• raise specificity for TextCodeBlock Paper background/outline and for WorkflowResult
• Divider margins so theme and MUI defaults no longer win the cascade.
• Use Material UI v4 lab Alert for result messages where v5 class naming conflicted with the shell theme.

Before fix:

---

After fix:

---

Steps to test:

1.Start the RHDH app with the following dark theme config:

app:
  branding:
    theme:
      dark:
        variant: "rhdh"
        mode: "dark"
        options:
          paper: mui
          cards: patternfly

2. Enable the red-hat-developer-hub.backstage-plugin-global-header dynamic plugin
3. Open Orchestrator - run a workflow and view the Results page

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (2)   📘 Rule violations (0)   📎 Requirement gaps (0)

🐞\ ≡ Correctness (1) ⚙ Maintainability (1)

1. Changeset text typo 🐞 ⚙

Description

The changeset summary contains a misspelling ("worfkflow"), which will propagate into generated
release notes/changelogs.

Code

workspaces/orchestrator/.changeset/new-books-matter.md[5]

+Fix UI styling issues in worfkflow results page

Relevance

⭐⭐⭐ High

Repo frequently fixes user-facing typos; changeset text is release-note output, so typo should be
corrected.

PR-#1400
PR-#1801

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The changeset text is used verbatim by changeset tooling when generating release notes; the typo is
present in the added summary line.

workspaces/orchestrator/.changeset/new-books-matter.md[1-5]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Correct the typo in the changeset summary so it doesn't appear in release notes.

## Fix Focus Areas
- workspaces/orchestrator/.changeset/new-books-matter.md[1-5]

## Suggested fix
Change "worfkflow" to "workflow".

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. MUI v4/v5 Alert mix 🐞 ≡

Description

WorkflowResult now uses Alert/AlertTitle from @material-ui/lab (MUI v4) alongside @mui/material (MUI
v5) components, which can bypass the host’s MUI v5 theme context and cause inconsistent styling/CSS
injection order issues. The PR also adds @material-ui/lab as a runtime dependency, increasing the
likelihood of duplicated styling stacks within the same plugin.

Code

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx[R28-31]

+import { Alert, AlertTitle } from '@material-ui/lab';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';

Relevance

⭐ Low

Mixing MUI v4/v5 is already present/accepted for UI fixes; this PR intentionally uses v4 lab Alert.

PR-#1069
PR-#1192

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

WorkflowResult mixes MUI v4 lab Alert with MUI v5 components, while the plugin otherwise uses MUI v5
Alert and MUI v5 theme hooks (dark mode detection). The package explicitly peers on @mui/material
(v5) but now pulls in @material-ui/lab (v4) as a direct dependency, creating a split
component/theming setup inside the same package.

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx[21-36]
workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx[220-226]
workspaces/orchestrator/plugins/orchestrator/src/components/ExecuteWorkflowPage/MissingSchemaNotice.tsx[17-46]
workspaces/orchestrator/plugins/orchestrator/src/utils/isDarkMode.ts[16-22]
workspaces/orchestrator/plugins/orchestrator/package.json[69-85]
workspaces/orchestrator/plugins/orchestrator/package.json[123-128]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`WorkflowResult` switched from MUI v5 `@mui/material/Alert` to MUI v4 `@material-ui/lab` `Alert`, while the rest of the plugin uses MUI v5 components and the MUI v5 theme context. This can lead to theme mismatch (not picking up dark-mode palette), inconsistent styling, and extra CSS-in-JS engine interactions.

## Issue Context
The package declares `@mui/material` as a peer dependency and uses `@mui/material/styles` (`useTheme`) elsewhere; introducing `@material-ui/lab` (v4) splits the UI stack.

## Fix Focus Areas
- workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx[21-36]
- workspaces/orchestrator/plugins/orchestrator/package.json[69-85]

## Suggested fix
1. Prefer reverting `WorkflowResult` to `@mui/material/Alert` and `@mui/material/AlertTitle`.
2. If the intent is to defeat host theme overrides, apply higher-specificity styling to the v5 Alert instead (e.g., `sx={{ '&&': { ... } }}` / `classes` / `styled()`), rather than switching component libraries.
3. Remove `@material-ui/lab` from dependencies if it becomes unused.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-orchestrator	workspaces/orchestrator/plugins/orchestrator	patch	v5.7.2

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[rhdh-qodo-merge]

Review Summary by Qodo

Fix UI styling issues in workflow results page

🐞 Bug fix

Walkthroughs

Description

• Fix UI styling cascade issues in workflow results page
• Increase CSS specificity for TextCodeBlock and Divider components
• Replace Material-UI v5 Alert with v4 lab Alert for theme compatibility
• Improve DialogTitle layout with flexbox alignment

Diagram

flowchart LR
  A["CSS Specificity Issues"] --> B["Increase Selector Specificity"]
  C["Material-UI v5 Alert Conflicts"] --> D["Use Material-UI v4 Lab Alert"]
  E["DialogTitle Layout Issues"] --> F["Add Flexbox Styling"]
  B --> G["Fixed Styling"]
  D --> G
  F --> G

Loading

File Changes

1. workspaces/orchestrator/.changeset/new-books-matter.md 📝 Documentation +5/-0

Add changeset for styling fixes

• Added changeset entry documenting patch version bump
• Describes fix for UI styling issues in workflow results page

workspaces/orchestrator/.changeset/new-books-matter.md

---

2. workspaces/orchestrator/plugins/orchestrator/package.json Dependencies +1/-0

Add Material-UI v4 lab dependency

• Added @material-ui/lab v4 dependency for Alert component
• Ensures compatibility with existing theme and avoids v5 naming conflicts

workspaces/orchestrator/plugins/orchestrator/package.json

---

3. workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowDescriptionModal.tsx ✨ Enhancement +8/-1

Improve DialogTitle layout with flexbox

• Added flexbox styling to DialogTitle Box component
• Implements flex layout with baseline alignment and space-between justification
• Improves visual alignment of title and close button

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowDescriptionModal.tsx

---

View more (2)

4. workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx 🐞 Bug fix +3/-4

Fix Alert imports and increase Divider specificity

• Replaced Material-UI v5 Alert and AlertTitle with v4 lab versions
• Increased CSS specificity for Divider components using && selector
• Changed margin properties from mb: 2 and mt: 2, mb: 2 to use && wrapper

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx

---

5. workspaces/orchestrator/plugins/orchestrator/src/components/ui/TextCodeBlock.tsx 🐞 Bug fix +4/-1

Increase TextCodeBlock CSS specificity

• Increased CSS specificity for root styles using && selector
• Moved backgroundColor and outline properties into specificity wrapper
• Prevents theme and MUI defaults from overriding component styling

workspaces/orchestrator/plugins/orchestrator/src/components/ui/TextCodeBlock.tsx

---