Add "feature status will change" (#10302)

Updates handling of default changes by letting the change components
themselves handle adding necessary text instead of passing it down as
"actions" (when text isn't really an action ...).

There's two cases where we add default changes to a CR:
1. If you enable an environment that has no strategies, then we add the
default strategy.
2. If you disable or remove the last strategy on an active environment
(such that the environment would now have 0 active strategies), then we
disable the environment too and add that to the change request.

Here's what they look like in the new design:
<img width="985" alt="image"
src="https://github.com/user-attachments/assets/e986e79f-041a-43d2-bfae-e5ecff11012d"
/>

<img width="981" alt="image"
src="https://github.com/user-attachments/assets/6a0dfe69-899f-4bc9-ae36-9553673dba06"
/>


And because it seemed the easiest way to do it, I've also updated the
old design to do the same thing. It looks the same as it used to:
<img width="998" alt="image"
src="https://github.com/user-attachments/assets/b41612ab-22f3-4225-be24-092ca8584d9c"
/>


<img width="995" alt="image"
src="https://github.com/user-attachments/assets/3d00be93-1347-491f-a689-328178d9a8c3"
/>

frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx

@@ -81,17 +81,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                     ))}
                     {feature.defaultChange ? (
                         <FeatureChange
-                            actions={
-                                <Typography
-                                    variant='body2'
-                                    color='text.secondary'
-                                >
-                                    {feature.defaultChange.action ===
-                                    'addStrategy'
-                                        ? 'Default strategy will be added'
-                                        : 'Feature status will change'}
-                                </Typography>
-                            }
+                            isDefaultChange
                             index={feature.changes.length}
                             changeRequest={changeRequest}
                             change={feature.defaultChange}

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/FeatureChange.tsx

@@ -89,13 +89,22 @@ const ChangeInnerBox = styled(Box)(({ theme }) => ({
 }));
 
 export const FeatureChange: FC<{
-    actions: ReactNode;
+    actions?: ReactNode;
     index: number;
     changeRequest: ChangeRequestType;
     change: IFeatureChange;
     feature: IChangeRequestFeature;
     onNavigate?: () => void;
-}> = ({ index, change, feature, changeRequest, actions, onNavigate }) => {
+    isDefaultChange?: boolean;
+}> = ({
+    index,
+    change,
+    feature,
+    changeRequest,
+    actions,
+    onNavigate,
+    isDefaultChange,
+}) => {
     const lastIndex = feature.defaultChange
         ? feature.changes.length + 1
         : feature.changes.length;
@@ -189,6 +198,7 @@ export const FeatureChange: FC<{
                 )}
                 {change.action === 'updateEnabled' && (
                     <StatusChangeComponent
+                        isDefaultChange={isDefaultChange}
                         enabled={change.payload.enabled}
                         actions={actions}
                     />
@@ -202,6 +212,7 @@ export const FeatureChange: FC<{
                 change.action === 'updateStrategy' ? (
                     <StrategyChangeComponent
                         actions={actions}
+                        isDefaultChange={isDefaultChange}
                         change={change}
                         featureName={feature.name}
                         environmentName={changeRequest.environment}

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/LegacyStrategyChange.tsx

@@ -262,7 +262,8 @@ const UpdateStrategy: FC<{
 const AddStrategy: FC<{
     change: IChangeRequestAddStrategy;
     actions?: ReactNode;
-}> = ({ change, actions }) => (
+    isDefaultChange?: boolean;
+}> = ({ change, actions, isDefaultChange }) => (
     <>
         <ChangeItemCreateEditDeleteWrapper>
             <ChangeItemInfo>
@@ -288,7 +289,14 @@ const AddStrategy: FC<{
                     />
                 </div>
             </ChangeItemInfo>
-            <div>{actions}</div>
+            <div>
+                {isDefaultChange ? (
+                    <Typography variant='body2' color='text.secondary'>
+                        Default strategy will be added
+                    </Typography>
+                ) : null}
+                {actions}
+            </div>
         </ChangeItemCreateEditDeleteWrapper>
         <StrategyExecution strategy={change.payload} />
         {change.payload.variants?.length ? (
@@ -316,6 +324,7 @@ export const LegacyStrategyChange: FC<{
     featureName: string;
     projectId: string;
     changeRequestState: ChangeRequestState;
+    isDefaultChange?: boolean;
 }> = ({
     actions,
     change,
@@ -323,6 +332,7 @@ export const LegacyStrategyChange: FC<{
     environmentName,
     projectId,
     changeRequestState,
+    isDefaultChange,
 }) => {
     const currentStrategy = useCurrentStrategy(
         change,
@@ -334,7 +344,11 @@ export const LegacyStrategyChange: FC<{
     return (
         <>
             {change.action === 'addStrategy' && (
-                <AddStrategy change={change} actions={actions} />
+                <AddStrategy
+                    change={change}
+                    actions={actions}
+                    isDefaultChange={isDefaultChange}
+                />
             )}
             {change.action === 'deleteStrategy' && (
                 <DeleteStrategy

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx

@@ -239,13 +239,14 @@ const UpdateStrategy: FC<{
 
 const AddStrategy: FC<{
     change: IChangeRequestAddStrategy;
+    isDefaultChange?: boolean;
     actions?: ReactNode;
-}> = ({ change, actions }) => (
+}> = ({ change, isDefaultChange, actions }) => (
     <>
         <ChangeItemWrapper>
             <ChangeItemInfo>
                 <AddedStrategy disabled={change.payload?.disabled}>
-                    Adding strategy
+                    Adding {isDefaultChange && 'default'} strategy
                 </AddedStrategy>
                 <ChangeStrategyName
                     name={change.payload.name}
@@ -300,6 +301,7 @@ export const StrategyChange: FC<{
     featureName: string;
     projectId: string;
     changeRequestState: ChangeRequestState;
+    isDefaultChange?: boolean;
 }> = ({
     actions,
     change,
@@ -307,6 +309,7 @@ export const StrategyChange: FC<{
     environmentName,
     projectId,
     changeRequestState,
+    isDefaultChange,
 }) => {
     const currentStrategy = useCurrentStrategy(
         change,
@@ -328,7 +331,11 @@ export const StrategyChange: FC<{
     return (
         <StyledTabs>
             {change.action === 'addStrategy' && (
-                <AddStrategy change={change} actions={actionsWithTabs} />
+                <AddStrategy
+                    change={change}
+                    actions={actionsWithTabs}
+                    isDefaultChange={isDefaultChange}
+                />
             )}
             {change.action === 'deleteStrategy' && (
                 <DeleteStrategy

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ToggleStatusChange.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { Box } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { Badge } from 'component/common/Badge/Badge';
 import { ChangeItemWrapper as LegacyChangeItemWrapper } from './LegacyStrategyChange.tsx';
 import { Action, ChangeItemInfo, ChangeItemWrapper } from './Change.styles';
@@ -7,14 +7,22 @@ import { Action, ChangeItemInfo, ChangeItemWrapper } from './Change.styles';
 interface IToggleStatusChange {
     enabled: boolean;
     actions?: ReactNode;
+    isDefaultChange?: boolean;
 }
 
+const StatusWillChange = () => (
+    <Typography variant='body2' component='span' color='text.secondary'>
+        Feature status will change
+    </Typography>
+);
+
 /**
  * @deprecated use ToggleStatusChange instead; remove with flag crDiffView
  */
 export const LegacyToggleStatusChange: FC<IToggleStatusChange> = ({
     enabled,
     actions,
+    isDefaultChange,
 }) => {
     return (
         <LegacyChangeItemWrapper>
@@ -27,6 +35,7 @@ export const LegacyToggleStatusChange: FC<IToggleStatusChange> = ({
                     {enabled ? ' Enabled' : 'Disabled'}
                 </Badge>
             </Box>
+            {isDefaultChange ? <StatusWillChange /> : null}
             {actions}
         </LegacyChangeItemWrapper>
     );
@@ -35,6 +44,7 @@ export const LegacyToggleStatusChange: FC<IToggleStatusChange> = ({
 export const ToggleStatusChange: FC<IToggleStatusChange> = ({
     enabled,
     actions,
+    isDefaultChange,
 }) => {
     return (
         <ChangeItemWrapper>
@@ -43,6 +53,7 @@ export const ToggleStatusChange: FC<IToggleStatusChange> = ({
                 <Badge color={enabled ? 'success' : 'error'}>
                     {enabled ? ' Enabled' : 'Disabled'}
                 </Badge>
+                {isDefaultChange ? <StatusWillChange /> : null}
                 {actions}
             </ChangeItemInfo>
         </ChangeItemWrapper>