From c14eb36908582214a316733b1956fe9a2453a171 Mon Sep 17 00:00:00 2001
From: suntiwari3495-arch <suntiwari3495@gmail.com>
Date: Fri, 24 Oct 2025 09:40:44 +0000
Subject: [PATCH] feat: show exclamation icon in square box for partial
 experiment completion

Signed-off-by: suntiwari3495-arch <suntiwari3495@gmail.com>
---
 .../StatusBadgeV2/StatusBadgeV2.tsx           | 23 ++++++++++++++++---
 .../web/src/utils/getPropsBasedOnStatus.tsx   |  6 +++--
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/chaoscenter/web/src/components/StatusBadgeV2/StatusBadgeV2.tsx b/chaoscenter/web/src/components/StatusBadgeV2/StatusBadgeV2.tsx
index b30e331bd51..0524bf8b7da 100644
--- a/chaoscenter/web/src/components/StatusBadgeV2/StatusBadgeV2.tsx
+++ b/chaoscenter/web/src/components/StatusBadgeV2/StatusBadgeV2.tsx
@@ -40,6 +40,7 @@ export interface StatusProps {
   iconName?: IconName;
   iconSize?: number;
   iconColor?: Color;
+  useSquareBox?: boolean; // New prop for square box icon styling
 }
 
 export function StatusBadgeV2({ status, entity, tooltip }: StatusBadgeV2Props): React.ReactElement {
@@ -48,7 +49,8 @@ export function StatusBadgeV2({ status, entity, tooltip }: StatusBadgeV2Props):
     bgColor,
     iconName,
     iconSize = 11,
-    iconColor
+    iconColor,
+    useSquareBox = false // Default to false for backward compatibility
   } = (() => {
     switch (entity) {
       case StatusBadgeEntity.ExperimentRun:
@@ -75,9 +77,24 @@ export function StatusBadgeV2({ status, entity, tooltip }: StatusBadgeV2Props):
       flex={{ align: 'center-center' }}
       style={{ borderRadius: 4, padding: '5px 8px', backgroundColor: bgColor }}
     >
-      {iconName && (
+      {iconName && useSquareBox ? (
+        // Render icon inside a square box for partially completed experiments
+        <Container
+          flex={{ align: 'center-center', justifyContent: 'center' }}
+          style={{
+            width: 16,
+            height: 16,
+            border: `1.5px solid ${Utils.getRealCSSColor(color)}`,
+            borderRadius: 2,
+            marginRight: 6
+          }}
+        >
+          <Icon name={iconName} width={10} style={{ color: Utils.getRealCSSColor(iconColor ?? color) }} size={8} />
+        </Container>
+      ) : iconName ? (
+        // Standard icon rendering
         <Icon name={iconName} width={12} style={{ color: Utils.getRealCSSColor(iconColor ?? color) }} size={iconSize} />
-      )}
+      ) : null}
       <Text
         margin={{ left: iconName ? 'xsmall' : 0 }}
         style={{ letterSpacing: '0.1px', fontSize: 12, whiteSpace: 'nowrap' }}
diff --git a/chaoscenter/web/src/utils/getPropsBasedOnStatus.tsx b/chaoscenter/web/src/utils/getPropsBasedOnStatus.tsx
index f0f1fc4e5b9..22ea49e344c 100644
--- a/chaoscenter/web/src/utils/getPropsBasedOnStatus.tsx
+++ b/chaoscenter/web/src/utils/getPropsBasedOnStatus.tsx
@@ -49,7 +49,8 @@ export function getPropsBasedOnExperimentRunFaultStatus(status: Status): StatusP
     case ExperimentRunFaultStatus.COMPLETED_WITH_ERROR: // <!-- needed for backwards compatibility -->
       return {
         iconName: 'error',
-        color: Color.ORANGE_500
+        color: Color.ORANGE_500,
+        useSquareBox: true // Add square box for partially completed
       };
     case ExperimentRunFaultStatus.ERROR:
     case ExperimentRunFaultStatus.FAILED: // <!-- needed for backwards compatibility -->
@@ -95,7 +96,8 @@ export function getPropsBasedOnExperimentRunStatus(status: Status): StatusProps
       return {
         iconName: 'error',
         color: Color.ORANGE_500,
-        bgColor: `var(--orange-100)`
+        bgColor: `var(--orange-100)`,
+        useSquareBox: true // Add square box for partially completed experiments
       };
     case ExperimentRunStatus.ERROR:
       return {