fix: wrap exclamation icon in square box for partial completion nodes#5480
fix: wrap exclamation icon in square box for partial completion nodes#5480Ram04102007 wants to merge 9 commits into
Conversation
Replaces plain warning-sign icon with execution-issue (exclamation in a square box) for isInComplete state on PipelineStageNode and PipelineStepNode. Updates positioning to -7px to match secondaryIcon pattern. Closes litmuschaos#5257 Signed-off-by: Sriram Thiruveedhula <sriram.thiruveedhula2007@gmail.com>
094293c to
f650ecb
Compare
|
Hi @gdsoumya @ksatchit @SahilKr24 @hrishavjha, could you please approve the workflows to unblock the CI checks? Thank you! |
Signed-off-by: Sriram Thiruveedhula <sriram.thiruveedhula2007@gmail.com>
0087ac0 to
bb3e895
Compare
|
Hi @hrishavjha, please approve the pending workflows so the CI checks can run? I've also added the missing TypeScript declaration file for YamlBuilder.module.scss to fix the failing web-unit-tests check. Thank you! |
|
Hi @gdsoumya @ksatchit @SahilKr24 @hrishavjha, just following up on this PR. All checks have passed and we already have an approval from @hrishavjha. Could someone please approve the pending workflow runs so the required checks can execute and then merge when you get a chance? Thank you! |
There was a problem hiding this comment.
Hi @Ram04102007 ! Thanks for the PR. Just wanted to check why is this file needed?
There was a problem hiding this comment.
Hi @amityt! This file was added because the web-unit-tests check was failing — TypeScript couldn't resolve the CSS module import for YamlBuilder.module.scss without a corresponding .d.ts declaration file. Adding it tells TypeScript about the module's exported types and fixes the failing check. It follows the standard pattern for CSS module type declarations in TypeScript projects.
Signed-off-by: Ram04102007 <sriram.thiruveedhula2007@gmail.com>
|
Hey @amityt — just following up on your question about YamlBuilder.module.scss.d.ts. The explanation has been provided above. Could you please re-review and resolve the conversation if the answer is satisfactory? Also, could a maintainer approve the 3 pending workflow runs so the CI checks can execute? Thank you! |
Fix: Replace warning icon with execution-issue icon for incomplete pipeline nodes
Replaces the plain
warning-signicon with the more descriptiveexecution-issueicon (exclamation mark in a square box) for nodes in theisInCompletestate on bothPipelineStageNodeandPipelineStepNode. Also adjusts the positioning from2pxto-7pxso it sits cleanly at the corner of the node, consistent with how thesecondaryIconis positioned elsewhere.Closes #5257
Proposed changes
When a pipeline node has an incomplete execution state (
isInComplete: true), it used to show a plain triangle warning icon (warning-sign) tucked inside the node boundaries. This was visually inconsistent — other status icons likesecondaryIconhang slightly outside the node edge, and thewarning-signicon didn't clearly communicate "execution issue" at a glance.This fix:
warning-sign→execution-issue(exclamation mark in a square, size bumped from 12 to 16) in bothPipelineStageNodeandPipelineStepNode.inCompleteCSS class positioning fromtop: 2px; right: 2px→top: -7px; right: -7pxso the badge pops out of the node corner, matching the existingsecondaryIconpatternFiles changed:
DefaultNode.module.scssPipelineStageNode.tsxPipelineStepNode.tsxTypes of changes
Checklist
Dependency
No dependent PRs.
Special notes for your reviewer
This is a purely visual fix — no logic changes, no props added or removed. The
isInCompletecondition and rendering path remain exactly the same; only the icon name, size, and CSS position offsets changed. Safe to review as a cosmetic patch.