Skip to content

fix: wrap exclamation icon in square box for partial completion nodes#5480

Open
Ram04102007 wants to merge 9 commits into
litmuschaos:masterfrom
Ram04102007:fix/exclamation-icon-partial-experiment
Open

fix: wrap exclamation icon in square box for partial completion nodes#5480
Ram04102007 wants to merge 9 commits into
litmuschaos:masterfrom
Ram04102007:fix/exclamation-icon-partial-experiment

Conversation

@Ram04102007
Copy link
Copy Markdown

Fix: Replace warning icon with execution-issue icon for incomplete pipeline nodes

Replaces the plain warning-sign icon with the more descriptive execution-issue icon (exclamation mark in a square box) for nodes in the isInComplete state on both PipelineStageNode and PipelineStepNode. Also adjusts the positioning from 2px to -7px so it sits cleanly at the corner of the node, consistent with how the secondaryIcon is 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 like secondaryIcon hang slightly outside the node edge, and the warning-sign icon didn't clearly communicate "execution issue" at a glance.

This fix:

  • Swaps warning-signexecution-issue (exclamation mark in a square, size bumped from 12 to 16) in both PipelineStageNode and PipelineStepNode
  • Updates the .inComplete CSS class positioning from top: 2px; right: 2pxtop: -7px; right: -7px so the badge pops out of the node corner, matching the existing secondaryIcon pattern

Files changed:

  • DefaultNode.module.scss
  • PipelineStageNode.tsx
  • PipelineStepNode.tsx

Types of changes

  • New feature (non-breaking change which adds functionality)
  • Bugfix (non-breaking change which fixes an issue)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation Update (if none of the other choices applies)

Checklist

  • I have read the CONTRIBUTING doc
  • I have signed the commit for DCO to be passed.
  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works (if appropriate)
  • I have added necessary documentation (if appropriate)

Dependency

No dependent PRs.

Special notes for your reviewer

This is a purely visual fix — no logic changes, no props added or removed. The isInComplete condition and rendering path remain exactly the same; only the icon name, size, and CSS position offsets changed. Safe to review as a cosmetic patch.

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>
@Ram04102007 Ram04102007 force-pushed the fix/exclamation-icon-partial-experiment branch from 094293c to f650ecb Compare April 30, 2026 17:46
@Ram04102007
Copy link
Copy Markdown
Author

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>
@Ram04102007 Ram04102007 force-pushed the fix/exclamation-icon-partial-experiment branch from 0087ac0 to bb3e895 Compare May 3, 2026 20:57
@Ram04102007
Copy link
Copy Markdown
Author

Ram04102007 commented May 3, 2026

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!

@Ram04102007
Copy link
Copy Markdown
Author

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!

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Ram04102007 ! Thanks for the PR. Just wanted to check why is this file needed?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
@Ram04102007
Copy link
Copy Markdown
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Show exclamation icon in square box for partially completed experiments in ChaosCenter

4 participants