FWF-5196 [Bugfix] Process diagram status not showing in Analyse submissions process fixed

[arun-s-aot]

User description

Issue Tracking

JIRA: https://aottech.atlassian.net/browse/FWF-5196
Issue Type: BUG

Changes

• Process diagram status not showing in Analyse submissions process fixed
• Background color and font color for active state retained like previous behaviour

---

PR Type

Bug fix, Enhancement

---

Description

• Register process reducer in root store

• Fix BPMN highlight fill scoping

• Ensure highlighted labels render white

• Improve maintainability of BPMN SCSS

---

Diagram Walkthrough

flowchart LR
  Store["Root reducer (index.ts)"] -- "add" --> ProcessReducer["process reducer"]
  BPMNStyles["bpmn.scss styles"] -- "scoped highlight rules" --> HighlightFill["primary fill on shapes"]
  BPMNStyles -- "label color" --> LabelWhite["white label text"]

Loading

File Walkthrough

	Relevant files
Enhancement	index.ts Add process reducer to root store                                                forms-flow-submissions/src/reducers/index.ts Import processReducer as process. Add process slice to combined reducers. Update root state to include process. +2/-0
Bug fix	bpmn.scss Refine BPMN highlight styles and label color                          forms-flow-theme/scss/bpmn.scss Replace flat selector with nested .highlight scoping. Keep primary fill for highlighted shapes. Add white font color for .djs-label when highlighted. +11/-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

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Import Style Missing semicolon after the new process import; keep import statements stylistically consistent with the file to avoid lint failures. import process from './processReducer' Selector Specificity New .highlight block increases specificity and adds !important. Confirm it does not unintentionally override non-highlight label colors elsewhere or affect nested BPMN elements. Consider scoping under a BPMN container if available. .highlight { &:not(.djs-connection) { .djs-visual { > :nth-child(1) { fill: $primary !important; } } } .djs-label { fill: $white !important; } } Visual Consistency .djs-label { fill: $white !important; } under .highlight forces all labels to white; verify contrast on light primary fills and that secondary labels (e.g., gateway labels) remain legible in dark themes. .djs-label { fill: $white !important; }

[arun-s-aot]

Already verified the changes in 7.2.0-rc image by QA team . Merging this .

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Use robust SVG targets Using :nth-child(1) can be brittle if the SVG structure changes, causing highlight to fail. Target the base shape more robustly (e.g., .djs-visual > svg > path, rect, circle) to reduce breakage across BPMN element types. forms-flow-theme/scss/bpmn.scss [22-33] .highlight { &:not(.djs-connection) { .djs-visual { - > :nth-child(1) { + > path, + > rect, + > circle, + > svg > path, + > svg > rect, + > svg > circle { fill: $primary !important; } } } .djs-label { fill: $white !important; } } Suggestion importance[1-10]: 6 __ Why: Replacing :nth-child(1) with explicit SVG element targets can make highlighting more resilient across BPMN shapes without altering behavior; reasonable improvement with moderate impact.	Low
	Add missing semicolon Ensure the import statement follows the project's code style and avoids missing semicolons that can cause lint/build failures. Add the trailing semicolon to maintain consistency with surrounding imports. forms-flow-submissions/src/reducers/index.ts [9] -import process from './processReducer' +import process from './processReducer'; Suggestion importance[1-10]: 5 __ Why: The import at line 9 lacks a trailing semicolon while surrounding imports use them; adding it aligns with style/lint rules and prevents potential CI failures.	Low
	Scope highlight styles The nested selector increases specificity and, with !important, may unintentionally override broader theme styles. Scope the rules under a more specific container (e.g., a BPMN canvas wrapper) to avoid leaking styles globally. forms-flow-theme/scss/bpmn.scss [22-33] -.highlight { - &:not(.djs-connection) { - .djs-visual { - > :nth-child(1) { - fill: $primary !important; +.bpmn-container { + .highlight { + &:not(.djs-connection) { + .djs-visual { + > :nth-child(1) { + fill: $primary !important; + } } } - } - .djs-label { - fill: $white !important; + .djs-label { + fill: $white !important; + } } } Suggestion importance[1-10]: 4 __ Why: Scoping can reduce style leakage, but it introduces a new container requirement not shown in the PR; impact is moderate and context-dependent.	Low