[CSM][Web] Fix loading overlay overlap and fill Change state button

[Rashmika998]

Summary

• Loading overlap fix: Gate the top-bar LinearProgress behind hasInitialized so it only appears after auth has settled. Previously both the top-bar loader and the centered auth loader rendered simultaneously during the initial page load, causing two overlapping orange bars.
• Change state button: Changed from variant="outlined" to variant="contained" color="primary" so it reads as the primary action on the case detail page.

Test plan

• On initial load, only the centered progress bar + message is shown (no top bar)
• After auth settles, the top-bar loader appears correctly during route transitions and API calls
• "Change state" button renders as a filled primary-colored button on the case detail page
• "More" button remains outlined for visual hierarchy contrast

🤖 Generated with Claude Code

Summary by CodeRabbit

• UI Improvements
  • Updated the “Change state” action button to use a more prominent primary style.
  • Refreshed activity feed change entries to display updates in a clearer old → new format.
  • Improved the appearance of activity history when values are changed or cleared.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR makes two independent UI adjustments: the "Change state" button in CaseActionBar now uses a contained variant with primary color, and the field-change display format in CaseActivitiesFeed changes from "new was old" struck-through phrasing to an "old → new" arrow format, with matching test updates.

Changes

UI Tweaks

Layer / File(s)	Summary
Change state button styling apps/csm-portal/webapp/src/features/csm-cases/components/CaseActionBar.tsx	The "Change state" button now renders with variant="contained" and color="primary" instead of variant="outlined".
Field change transition display format apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx, CaseActivitiesFeed.test.tsx	FieldChangeLine now renders previous value in muted text followed by an arrow (→) then the new value (or "cleared"), replacing the prior "was" struck-through phrasing; related comment and test assertions updated accordingly.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• wso2-open-operations/cs-tools#1042: Both PRs modify the "Change state" button rendering in CaseActionBar.tsx.
• wso2-open-operations/cs-tools#1064: Both PRs refine the field-change activity row rendering in CaseActivitiesFeed.tsx.

Suggested labels: Type/Improvement

Suggested reviewers: rksk

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	It covers summary and testing, but most required template sections like Purpose, Goals, Approach, Release note, and Documentation are missing.	Fill the missing template sections, especially Purpose/Goals/Approach, release note, documentation, and the other required checklist items.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the main UI changes: loader overlap fix and primary 'Change state' button styling.
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.

✨ 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.}

[Rashmika998]

Added two more fixes in the latest commit:

1. Loading overlay — full-screen cover
Changed the pre-auth Box from height: 100dvh to position: fixed; inset: 0; z-index: 9999; bgcolor: background.default. This makes it a true viewport overlay, so nothing underneath (body defaults, Asgardeo ThemeProvider CSS variables on <html>, etc.) bleeds through regardless of theme.

2. State-change display — arrow format
Replaced the <new> was ~~old~~ strikethrough pattern in the activities feed with <old> → <new>, e.g. State: Open → Work In Progress. The old value renders in muted (text.secondary) colour; cleared fields show <old> → cleared.

---

Comment added by Claude on behalf of @Rashmika998.

[coderabbitai]

🧹 Nitpick comments (1)

apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx (1)

106-119: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Consider a screen-reader-friendly transition cue.

The old→new relationship is now conveyed purely by the "→" glyph and color styling. Screen readers may announce this ambiguously (e.g., skip the arrow or read it as "right arrow") without a clear "changed from ... to ..." semantic, unlike the previous "was" phrasing which was more explicit for assistive tech.

Consider adding a visually-hidden label (e.g., <Box component="span" sx={visuallyHidden}>changed from</Box>) around the arrow, or an aria-label on the line summarizing the transition.

🤖 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
`@apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx`
around lines 106 - 119, The transition text in CaseActivitiesFeed’s change
rendering is only communicated via the arrow glyph and styling, which is not
screen-reader friendly. Update the rendering around the field value swap in the
relevant JSX to expose an explicit “changed from … to …” cue for assistive tech,
either by adding a visually hidden label near the arrow or by applying an
accessible aria-label to the container/transition text while keeping the current
visual layout.

🤖 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
`@apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx`:
- Around line 106-119: The transition text in CaseActivitiesFeed’s change
rendering is only communicated via the arrow glyph and styling, which is not
screen-reader friendly. Update the rendering around the field value swap in the
relevant JSX to expose an explicit “changed from … to …” cue for assistive tech,
either by adding a visually hidden label near the arrow or by applying an
accessible aria-label to the container/transition text while keeping the current
visual layout.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: fc1deaae-f033-4d9d-bdf6-a6fbc2c1dbde

📥 Commits

Reviewing files that changed from the base of the PR and between a4d8bef and 837e782.

📒 Files selected for processing (3)

• apps/csm-portal/webapp/src/features/csm-cases/components/CaseActionBar.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.test.tsx
• apps/csm-portal/webapp/src/features/csm-cases/components/CaseActivitiesFeed.tsx

✅ Files skipped from review due to trivial changes (1)

• apps/csm-portal/webapp/src/features/csm-cases/components/CaseActionBar.tsx