feat: show env var conflicts in change requests (#6182)

This PR adds showing of env variant conflicts in change requests.

This is a simple solution that only compares the total state of
variants. We *could* potentially do a modified version where we show
each and every variant as its own property. Because variants have to be
unique by name and because their names can't be changed after their
creation, we could create a map of variant name to their data.

<img width="1105" alt="image"
src="https://github.com/Unleash/unleash/assets/17786332/0c67f958-6c4e-453a-9791-0e132fb1f23e">

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

@@ -1,6 +1,7 @@
 import { Box, styled } from '@mui/material';
 import { useChangeRequestPlausibleContext } from 'component/changeRequest/ChangeRequestContext';
 import {
+    IChangeRequestPatchVariant,
     IChangeRequestUpdateSegment,
     IChangeRequestUpdateStrategy,
 } from 'component/changeRequest/changeRequest.types';
@@ -9,10 +10,12 @@ import { ISegment } from 'interfaces/segment';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import {
     ChangesThatWouldBeOverwritten,
+    getEnvVariantChangesThatWouldBeOverwritten,
     getStrategyChangesThatWouldBeOverwritten,
     getSegmentChangesThatWouldBeOverwritten,
 } from './strategy-change-diff-calculation';
 import { useEffect } from 'react';
+import { IFeatureVariant } from 'interfaces/featureToggle';
 
 const ChangesToOverwriteContainer = styled(Box)(({ theme }) => ({
     color: theme.palette.warning.dark,
@@ -135,13 +138,13 @@ const DetailsTable: React.FC<{
 };
 
 const OverwriteWarning: React.FC<{
-    changeType: 'segment' | 'strategy';
+    changeType: 'segment' | 'strategy' | 'environment variant configuration';
     changesThatWouldBeOverwritten: ChangesThatWouldBeOverwritten;
 }> = ({ changeType, changesThatWouldBeOverwritten }) => {
     return (
         <ChangesToOverwriteContainer>
             <p>
-                <strong>Heads up!</strong> The ${changeType} has been updated
+                <strong>Heads up!</strong> The {changeType} has been updated
                 since you made your changes. Applying this change now would
                 overwrite the configuration that is currently live.
             </p>
@@ -157,6 +160,27 @@ const OverwriteWarning: React.FC<{
     );
 };
 
+export const EnvVariantChangesToOverwrite: React.FC<{
+    currentVariants?: IFeatureVariant[];
+    change: IChangeRequestPatchVariant;
+}> = ({ change, currentVariants }) => {
+    const checkForChanges = useUiFlag('changeRequestConflictHandling');
+    const changesThatWouldBeOverwritten = checkForChanges
+        ? getEnvVariantChangesThatWouldBeOverwritten(currentVariants, change)
+        : null;
+
+    if (!changesThatWouldBeOverwritten) {
+        return null;
+    }
+
+    return (
+        <OverwriteWarning
+            changeType='environment variant configuration'
+            changesThatWouldBeOverwritten={changesThatWouldBeOverwritten}
+        />
+    );
+};
+
 export const SegmentChangesToOverwrite: React.FC<{
     currentSegment?: ISegment;
     change: IChangeRequestUpdateSegment;

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

@@ -6,6 +6,7 @@ import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
 import { EnvironmentVariantsTable } from 'component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsTable/EnvironmentVariantsTable';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { ReactNode } from 'react';
+import { EnvVariantChangesToOverwrite } from '../StrategyChangeOverwriteWarning';
 import { VariantDiff } from './VariantDiff';
 
 const ChangeItemInfo = styled(Box)({
@@ -53,6 +54,10 @@ export const VariantPatch = ({
 
     return (
         <ChangeItemInfo>
+            <EnvVariantChangesToOverwrite
+                currentVariants={preData}
+                change={change}
+            />
             <StyledChangeHeader>
                 <TooltipLink
                     tooltip={

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/strategy-change-diff-calculation.ts

@@ -1,7 +1,9 @@
 import {
+    IChangeRequestPatchVariant,
     IChangeRequestUpdateSegment,
     IChangeRequestUpdateStrategy,
 } from 'component/changeRequest/changeRequest.types';
+import { IFeatureVariant } from 'interfaces/featureToggle';
 import { ISegment } from 'interfaces/segment';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import isEqual from 'lodash.isequal';
@@ -106,6 +108,23 @@ function getChangesThatWouldBeOverwritten<T>(
     return null;
 }
 
+export function getEnvVariantChangesThatWouldBeOverwritten(
+    currentVariantConfig: IFeatureVariant[] | undefined,
+    change: IChangeRequestPatchVariant,
+): ChangesThatWouldBeOverwritten | null {
+    const { snapshot } = change.payload;
+    if (!snapshot || !currentVariantConfig) return null;
+
+    const conflict = getChangedPropertyWithFallbacks({})(
+        'variants',
+        currentVariantConfig,
+        snapshot,
+        change.payload.variants,
+    );
+
+    return conflict ? [conflict] : null;
+}
+
 export function getSegmentChangesThatWouldBeOverwritten(
     currentSegmentConfig: ISegment | undefined,
     change: IChangeRequestUpdateSegment,

frontend/src/component/changeRequest/changeRequest.types.ts

@@ -218,6 +218,7 @@ export type ISegmentChange =
 
 type ChangeRequestVariantPatch = {
     variants: IFeatureVariant[];
+    snapshot?: IFeatureVariant[];
 };
 
 type ChangeRequestEnabled = { enabled: boolean };