feat: conditionally show groupId in StrategyExecution under rollout (#9101)

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx

@@ -21,6 +21,7 @@ import { BuiltInStrategies } from 'utils/strategyNames';
 
 interface IStrategyExecutionProps {
     strategy: IFeatureStrategyPayload | CreateFeatureStrategySchema;
+    displayGroupId?: boolean;
 }
 
 const StyledContainer = styled(Box, {
@@ -77,6 +78,7 @@ const StyledValueSeparator = styled('span')(({ theme }) => ({
 
 export const StrategyExecution: FC<IStrategyExecutionProps> = ({
     strategy,
+    displayGroupId = false,
 }) => {
     const { parameters, constraints = [] } = strategy;
     const stickiness = parameters?.stickiness;
@@ -133,6 +135,18 @@ export const StrategyExecution: FC<IStrategyExecutionProps> = ({
                                     is included.
                                 </span>
                             </div>
+                            {displayGroupId && parameters.groupId && (
+                                <Box
+                                    sx={(theme) => ({
+                                        ml: 1,
+                                        color: theme.palette.info.contrastText,
+                                    })}
+                                >
+                                    <Badge color='info'>
+                                        GroupId: {parameters.groupId}
+                                    </Badge>
+                                </Box>
+                            )}
                         </StyledValueContainer>
                     );
                 }

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx

@@ -40,7 +40,7 @@ export const ReleasePlanMilestoneStrategy = ({
                 <Icon />
                 {`${formatStrategyName(String(strategy.strategyName))}${strategy.title ? `: ${strategy.title}` : ''}`}
             </StyledHeader>
-            <StrategyExecution strategy={strategy} />
+            <StrategyExecution strategy={strategy} displayGroupId />
             {strategy.variants &&
                 strategy.variants.length > 0 &&
                 (strategy.disabled ? (