Merge 2916ab3c40 into 3bb317ad6d

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

@@ -9,6 +9,7 @@ import {
     getSegmentChangesThatWouldBeOverwritten,
     getStrategyChangesThatWouldBeOverwritten,
 } from './strategy-change-diff-calculation.js';
+import { constraintId } from 'constants/constraintId.js';
 
 describe('Strategy change conflict detection', () => {
     const existingStrategy: IFeatureStrategy = {
@@ -175,6 +176,7 @@ describe('Strategy change conflict detection', () => {
                     operator: 'IN' as const,
                     contextName: 'appName',
                     caseInsensitive: false,
+                    [constraintId]: 'id1',
                 },
             ],
             variants: [
@@ -230,6 +232,7 @@ describe('Strategy change conflict detection', () => {
                     operator: 'IN' as const,
                     contextName: 'appName',
                     caseInsensitive: false,
+                    [constraintId]: 'id2',
                 },
             ],
         };
@@ -249,6 +252,7 @@ describe('Strategy change conflict detection', () => {
                             inverted: false,
                             operator: 'IN' as const,
                             values: ['blah'],
+                            [constraintId]: 'id2',
                         },
                     ],
                 },
@@ -478,6 +482,7 @@ describe('Segment change conflict detection', () => {
                     operator: 'IN' as const,
                     contextName: 'appName',
                     caseInsensitive: false,
+                    [constraintId]: 'id3',
                 },
             ],
         };
@@ -494,6 +499,7 @@ describe('Segment change conflict detection', () => {
                         operator: 'IN' as const,
                         contextName: 'appName',
                         caseInsensitive: false,
+                        [constraintId]: 'id4',
                     },
                 ],
             },

frontend/src/component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList.tsx

@@ -9,7 +9,6 @@ import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsLis
 import { EditableConstraint } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/EditableConstraint';
 import { createEmptyConstraint } from '../../../../utils/createEmptyConstraint.ts';
 import { constraintId } from 'constants/constraintId.ts';
-import { v4 as uuidv4 } from 'uuid';
 export interface IEditableConstraintsListRef {
     addConstraint?: (contextName: string) => void;
 }
@@ -44,7 +43,6 @@ export const EditableConstraintsList = forwardRef<
         if (!constraints.every((constraint) => constraintId in constraint)) {
             setConstraints(
                 constraints.map((constraint) => ({
-                    [constraintId]: uuidv4(),
                     ...constraint,
                 })),
             );

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/useEditableConstraint/editable-constraint-type.test.ts

@@ -1,7 +1,6 @@
 import { createEmptyConstraint } from 'utils/createEmptyConstraint';
 import { fromIConstraint, toIConstraint } from './editable-constraint-type.ts';
 import { constraintId } from 'constants/constraintId';
-import type { IConstraint } from 'interfaces/strategy.ts';
 
 test('mapping to and from retains the constraint id', () => {
     const constraint = createEmptyConstraint('context');
@@ -11,18 +10,6 @@ test('mapping to and from retains the constraint id', () => {
     );
 });
 
-test('mapping to an editable constraint adds a constraint id if there is none', () => {
-    const constraint: IConstraint = createEmptyConstraint('context');
-    delete constraint[constraintId];
-
-    const editableConstraint = fromIConstraint(constraint);
-
-    expect(editableConstraint[constraintId]).toBeDefined();
-
-    const iConstraint = toIConstraint(editableConstraint);
-    expect(iConstraint[constraintId]).toEqual(editableConstraint[constraintId]);
-});
-
 test('mapping from an empty constraint removes redundant value / values', () => {
     const constraint = { ...createEmptyConstraint('context'), value: '' };
     expect(constraint).toHaveProperty('value');

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/useEditableConstraint/editable-constraint-type.ts

@@ -1,4 +1,3 @@
-import { constraintId } from 'constants/constraintId';
 import {
     type DateOperator,
     isDateOperator,
@@ -11,7 +10,6 @@ import {
     isSemVerOperator,
 } from 'constants/operators';
 import type { IConstraint } from 'interfaces/strategy';
-import { v4 as uuidv4 } from 'uuid';
 
 type EditableConstraintBase = Omit<
     IConstraint,
@@ -74,14 +72,12 @@ export const fromIConstraint = (
     const { value, values, operator, ...rest } = constraint;
     if (isSingleValueOperator(operator)) {
         return {
-            [constraintId]: uuidv4(),
             ...rest,
             operator,
             value: value ?? '',
         };
     } else {
         return {
-            [constraintId]: uuidv4(),
             ...rest,
             operator,
             values: new Set(values),

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint/useEditableConstraint/useEditableConstraint.test.tsx

@@ -13,6 +13,7 @@ import { vi } from 'vitest';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
 import type { ContextFieldSchema } from 'openapi';
 import { NUM_EQ } from '@server/util/constants';
+import { constraintId } from 'constants/constraintId.js';
 
 const server = testServerSetup();
 
@@ -25,6 +26,7 @@ test('calls onUpdate with new state', async () => {
         contextName: 'context-field',
         operator: NOT_IN,
         values: ['A', 'B'],
+        [constraintId]: 'constraint id',
     };
 
     const onUpdate = vi.fn();
@@ -71,6 +73,7 @@ describe('validators', () => {
                 contextName: 'context-field',
                 operator: operator,
                 value: '',
+                [constraintId]: 'constraint id',
             };
 
             const { result } = renderHook(() =>
@@ -94,6 +97,7 @@ describe('validators', () => {
                 contextName: 'context-field',
                 operator: operator,
                 value: '',
+                [constraintId]: 'constraint id',
             };
 
             const { result } = renderHook(() =>
@@ -117,6 +121,7 @@ describe('validators', () => {
                 contextName: 'context-field',
                 operator: operator,
                 value: '',
+                [constraintId]: 'constraint id',
             };
 
             const { result } = renderHook(() =>
@@ -140,6 +145,7 @@ describe('validators', () => {
                 contextName: 'context-field',
                 operator: operator,
                 values: [],
+                [constraintId]: 'constraint id',
             };
 
             const { result } = renderHook(() =>
@@ -162,6 +168,7 @@ describe('validators', () => {
                 contextName: 'context-field',
                 operator: operator,
                 values: ['a', 'b'],
+                [constraintId]: 'constraint id',
             };
 
             const { result } = renderHook(() =>
@@ -189,6 +196,7 @@ describe('legal values', () => {
             contextName: definition.name,
             operator: IN,
             values: [],
+            [constraintId]: 'constraint id',
         };
 
         const { result } = renderHook(() =>
@@ -206,6 +214,7 @@ describe('legal values', () => {
             contextName: definition.name,
             operator: IN,
             values: [],
+            [constraintId]: 'constraint id',
         };
 
         const { result } = renderHook(() =>
@@ -231,6 +240,7 @@ describe('legal values', () => {
             contextName: 'field-with-no-legal-values',
             operator: IN,
             values: [],
+            [constraintId]: 'constraint id',
         };
 
         const { result } = renderHook(() =>
@@ -244,6 +254,7 @@ describe('legal values', () => {
             contextName: definition.name,
             operator: IN,
             values: ['A', 'B'],
+            [constraintId]: 'constraint id',
         };
 
         const { result } = renderHook(() =>
@@ -260,6 +271,7 @@ describe('legal values', () => {
             contextName: definition.name,
             operator: NUM_EQ,
             values: [],
+            [constraintId]: 'constraint id',
         };
 
         const { result } = renderHook(() =>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/RecentlyUsedConstraints/useRecentlyUsedConstraints.test.tsx

@@ -6,6 +6,7 @@ import { renderHook, act } from '@testing-library/react';
 import type { IConstraint } from 'interfaces/strategy';
 import { IN, STR_CONTAINS } from 'constants/operators';
 import type { Operator } from 'constants/operators';
+import { constraintId } from 'constants/constraintId.ts';
 
 const createTestConstraint = (
     contextName: string,
@@ -15,6 +16,7 @@ const createTestConstraint = (
     contextName,
     operator,
     values,
+    [constraintId]: 'constraint id',
 });
 
 describe('areConstraintsEqual', () => {
@@ -24,6 +26,7 @@ describe('areConstraintsEqual', () => {
             operator: IN,
             values: ['user1', 'user2'],
             inverted: false,
+            [constraintId]: 'constraint id',
         };
 
         const constraint2: IConstraint = {
@@ -31,6 +34,7 @@ describe('areConstraintsEqual', () => {
             operator: IN,
             values: ['user1', 'user2'],
             inverted: false,
+            [constraintId]: 'constraint id',
         };
 
         expect(areConstraintsEqual(constraint1, constraint2)).toBe(true);
@@ -41,12 +45,14 @@ describe('areConstraintsEqual', () => {
             contextName: 'userId',
             operator: IN,
             values: ['user1', 'user2', 'user3'],
+            [constraintId]: 'constraint id',
         };
 
         const constraint2: IConstraint = {
             contextName: 'userId',
             operator: IN,
             values: ['user2', 'user3', 'user1'],
+            [constraintId]: 'constraint id',
         };
 
         expect(areConstraintsEqual(constraint1, constraint2)).toBe(true);
@@ -57,12 +63,14 @@ describe('areConstraintsEqual', () => {
             contextName: 'userId',
             operator: IN,
             values: ['user1', 'user2'],
+            [constraintId]: 'constraint id',
         };
 
         const constraint2: IConstraint = {
             contextName: 'userId',
             operator: IN,
             values: ['user1', 'user3'],
+            [constraintId]: 'constraint id',
         };
 
         expect(areConstraintsEqual(constraint1, constraint2)).toBe(false);
@@ -73,12 +81,14 @@ describe('areConstraintsEqual', () => {
             contextName: 'userId',
             operator: IN,
             values: ['user1'],
+            [constraintId]: 'constraint id',
         };
 
         const constraint2: IConstraint = {
             contextName: 'userId',
             operator: STR_CONTAINS,
             values: ['user1'],
+            [constraintId]: 'constraint id',
         };
 
         expect(areConstraintsEqual(constraint1, constraint2)).toBe(false);

frontend/src/component/project/Project/ProjectSettings/ProjectDefaultStrategySettings/ProjectEnvironment/ProjectEnvironmentDefaultStrategy/ProjectEnvironmentDefaultStrategy.tsx

@@ -11,6 +11,8 @@ import {
 } from '@server/types/permissions';
 import { StrategyItem } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyItem';
 import type { IFeatureStrategy } from 'interfaces/strategy';
+import { constraintId } from 'constants/constraintId';
+import { v4 as uuidv4 } from 'uuid';
 
 interface ProjectEnvironmentDefaultStrategyProps {
     environment: ProjectEnvironmentType;
@@ -55,7 +57,11 @@ export const ProjectEnvironmentDefaultStrategy = ({
         return {
             ...baseDefaultStrategy,
             disabled: false,
-            constraints: baseDefaultStrategy.constraints ?? [],
+            constraints:
+                baseDefaultStrategy.constraints?.map((constraint) => ({
+                    ...constraint,
+                    [constraintId]: uuidv4(),
+                })) ?? [],
             title: baseDefaultStrategy.title ?? '',
             parameters: baseDefaultStrategy.parameters ?? {},
         };

frontend/src/component/segments/SegmentForm.tsx

@@ -1,4 +1,4 @@
-import type { IConstraint, IConstraintWithId } from 'interfaces/strategy';
+import type { IConstraint } from 'interfaces/strategy';
 import { SegmentFormStepOne } from './SegmentFormStepOne.tsx';
 import { SegmentFormStepTwo } from './SegmentFormStepTwo.tsx';
 import type React from 'react';
@@ -14,7 +14,7 @@ interface ISegmentProps {
     name: string;
     description: string;
     project?: string;
-    constraints: IConstraintWithId[];
+    constraints: IConstraint[];
     setName: React.Dispatch<React.SetStateAction<string>>;
     setDescription: React.Dispatch<React.SetStateAction<string>>;
     setProject: React.Dispatch<React.SetStateAction<string | undefined>>;

frontend/src/component/segments/SegmentFormStepTwo.test.tsx

@@ -8,7 +8,7 @@ import {
     CREATE_SEGMENT,
     UPDATE_PROJECT_SEGMENT,
 } from 'component/providers/AccessProvider/permissions';
-import type { IConstraintWithId } from 'interfaces/strategy.ts';
+import type { IConstraint } from 'interfaces/strategy.ts';
 
 const server = testServerSetup();
 
@@ -26,7 +26,7 @@ const setupRoutes = () => {
 
 const defaultProps = {
     project: undefined,
-    constraints: [] as IConstraintWithId[],
+    constraints: [] as IConstraint[],
     setConstraints: vi.fn(),
     setCurrentStep: vi.fn(),
     mode: 'create' as const,

frontend/src/component/segments/SegmentFormStepTwo.tsx

@@ -13,7 +13,7 @@ import {
     UPDATE_SEGMENT,
 } from 'component/providers/AccessProvider/permissions';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
-import type { IConstraint, IConstraintWithId } from 'interfaces/strategy';
+import type { IConstraint } from 'interfaces/strategy';
 import { useNavigate } from 'react-router-dom';
 import { EditableConstraintsList } from 'component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList';
 import type { IEditableConstraintsListRef } from 'component/common/NewConstraintAccordion/ConstraintsList/EditableConstraintsList';
@@ -33,7 +33,7 @@ import { GO_BACK } from 'constants/navigate';
 
 interface ISegmentFormPartTwoProps {
     project?: string;
-    constraints: IConstraintWithId[];
+    constraints: IConstraint[];
     setConstraints: React.Dispatch<React.SetStateAction<IConstraint[]>>;
     setCurrentStep: React.Dispatch<React.SetStateAction<SegmentFormStep>>;
     mode: SegmentFormMode;

frontend/src/component/segments/hooks/useSegmentForm.ts

@@ -1,8 +1,6 @@
-import type { IConstraint, IConstraintWithId } from 'interfaces/strategy';
+import type { IConstraint } from 'interfaces/strategy';
 import { useEffect, useState } from 'react';
 import { useSegmentValidation } from 'hooks/api/getters/useSegmentValidation/useSegmentValidation';
-import { v4 as uuidv4 } from 'uuid';
-import { constraintId } from 'constants/constraintId';
 
 export const useSegmentForm = (
     initialName = '',
@@ -14,10 +12,9 @@ export const useSegmentForm = (
     const [description, setDescription] = useState(initialDescription);
     const [project, setProject] = useState<string | undefined>(initialProject);
     const initialConstraintsWithId = initialConstraints.map((constraint) => ({
-        [constraintId]: uuidv4(),
         ...constraint,
     }));
-    const [constraints, setConstraints] = useState<IConstraintWithId[]>(
+    const [constraints, setConstraints] = useState<IConstraint[]>(
         initialConstraintsWithId,
     );
     const [errors, setErrors] = useState({});

frontend/src/hooks/api/getters/useChangeRequest/useChangeRequest.ts

@@ -1,7 +1,13 @@
 import useSWR from 'swr';
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler.js';
-import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types';
+import type {
+    ChangeRequestType,
+    IChangeRequestFeature,
+    IFeatureChange,
+} from 'component/changeRequest/changeRequest.types';
+import { useMemo } from 'react';
+import { addConstraintIdsToFeatureChange } from 'utils/addConstraintIdsToFeatureChange.js';
 
 export const useChangeRequest = (projectId: string, id: string) => {
     const { data, error, mutate } = useSWR<ChangeRequestType>(
@@ -10,8 +16,32 @@ export const useChangeRequest = (projectId: string, id: string) => {
         { refreshInterval: 15000 },
     );
 
+    const { features, ...dataProps } = data || {};
+    const featuresWithConstraintIds: IChangeRequestFeature[] | undefined =
+        useMemo(() => {
+            return (
+                features?.map((feature) => {
+                    const changes: IFeatureChange[] = feature.changes.map(
+                        addConstraintIdsToFeatureChange,
+                    );
+
                     return {
-        data,
+                        ...feature,
+                        changes,
+                    };
+                }) ?? []
+            );
+        }, [JSON.stringify(features)]);
+
+    const mappedData = data
+        ? {
+              ...dataProps,
+              features: featuresWithConstraintIds,
+          }
+        : data;
+
+    return {
+        data: mappedData,
         loading: !error && !data,
         refetchChangeRequest: () => mutate(),
         error,

frontend/src/hooks/api/getters/useConstraintsValidation/useConstraintsValidation.test.tsx

@@ -3,6 +3,7 @@ import type { IConstraint } from 'interfaces/strategy'; // Assuming you have you
 import type { FC } from 'react';
 import { useConstraintsValidation } from './useConstraintsValidation.ts';
 import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { constraintId } from 'constants/constraintId.ts';
 
 const server = testServerSetup();
 
@@ -26,12 +27,14 @@ test('should display Valid when constraints are valid', async () => {
             values: ['test'],
             operator: 'IN',
             contextName: 'irrelevant',
+            [constraintId]: 'constraint id',
         },
         {
             value: 'test',
             values: ['test'],
             operator: 'IN',
             contextName: 'irrelevant',
+            [constraintId]: 'constraint id 2',
         },
     ];
 
@@ -42,12 +45,19 @@ test('should display Valid when constraints are valid', async () => {
 
 test('should display Invalid when constraints are invalid', async () => {
     const emptyValueAndValues: IConstraint[] = [
-        { value: '', values: [], operator: 'IN', contextName: 'irrelevant' },
         {
             value: '',
             values: [],
             operator: 'IN',
             contextName: 'irrelevant',
+            [constraintId]: 'constraint id 3',
+        },
+        {
+            value: '',
+            values: [],
+            operator: 'IN',
+            contextName: 'irrelevant',
+            [constraintId]: 'constraint id 4',
         },
     ];
 

frontend/src/hooks/api/getters/useFeature/useFeature.ts

@@ -1,9 +1,12 @@
 import useSWR, { type SWRConfiguration } from 'swr';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { emptyFeature } from './emptyFeature.ts';
 import handleErrorResponses from '../httpErrorResponseHandler.ts';
 import { formatApiPath } from 'utils/formatPath';
 import type { IFeatureToggle } from 'interfaces/featureToggle';
+import { constraintId } from 'constants/constraintId.ts';
+import { v4 as uuidv4 } from 'uuid';
+import type { IFeatureStrategy } from 'interfaces/strategy.ts';
 
 export interface IUseFeatureOutput {
     feature: IFeatureToggle;
@@ -35,8 +38,12 @@ export const useFeature = (
         mutate().catch(console.warn);
     }, [mutate]);
 
+    const feature = useMemo(enrichConstraintsWithIds(data), [
+        JSON.stringify(data?.body),
+    ]);
+
     return {
-        feature: data?.body || emptyFeature,
+        feature,
         refetchFeature,
         loading: !error && !data,
         status: data?.status,
@@ -63,6 +70,42 @@ export const featureFetcher = async (
     };
 };
 
+export const enrichConstraintsWithIds =
+    (data?: IFeatureResponse) => (): IFeatureToggle => {
+        if (!data?.body) {
+            return emptyFeature;
+        }
+
+        const { strategies, environments, ...rest } = data.body;
+
+        const addConstraintIds = (strategy: IFeatureStrategy) => {
+            const { constraints, ...strategyRest } = strategy;
+            return {
+                ...strategyRest,
+                constraints: constraints?.map((constraint) => ({
+                    ...constraint,
+                    [constraintId]: uuidv4(),
+                })),
+            };
+        };
+
+        const strategiesWithConstraintIds = strategies?.map(addConstraintIds);
+
+        const environmentsWithStrategyIds = environments?.map((environment) => {
+            const { strategies, ...environmentRest } = environment;
+            return {
+                ...environmentRest,
+                strategies: strategies?.map(addConstraintIds),
+            };
+        });
+
+        return {
+            ...rest,
+            strategies: strategiesWithConstraintIds,
+            environments: environmentsWithStrategyIds,
+        };
+    };
+
 export const formatFeatureApiPath = (
     projectId: string,
     featureId: string,

frontend/src/hooks/api/getters/useFeature/useFeatureImmutable.ts

@@ -1,12 +1,12 @@
 import useSWRImmutable from 'swr/immutable';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
-import { emptyFeature } from './emptyFeature.js';
 import {
     type IUseFeatureOutput,
     type IFeatureResponse,
     featureFetcher,
     formatFeatureApiPath,
     useFeature,
+    enrichConstraintsWithIds,
 } from 'hooks/api/getters/useFeature/useFeature';
 
 // useFeatureImmutable is like useFeature, except it won't refetch data on
@@ -29,8 +29,12 @@ export const useFeatureImmutable = (
         await refetchFeature();
     }, [mutate, refetchFeature]);
 
+    const feature = useMemo(enrichConstraintsWithIds(data), [
+        JSON.stringify(data?.body),
+    ]);
+
     return {
-        feature: data?.body || emptyFeature,
+        feature,
         refetchFeature: refetch,
         loading: !error && !data,
         status: data?.status,

frontend/src/hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests.ts

@@ -1,7 +1,12 @@
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler.js';
-import type { ChangeRequestType } from 'component/changeRequest/changeRequest.types';
+import type {
+    ChangeRequestType,
+    IFeatureChange,
+} from 'component/changeRequest/changeRequest.types';
 import { useEnterpriseSWR } from '../useEnterpriseSWR/useEnterpriseSWR.js';
+import { useMemo } from 'react';
+import { addConstraintIdsToFeatureChange } from 'utils/addConstraintIdsToFeatureChange.js';
 
 const fetcher = (path: string) => {
     return fetch(path)
@@ -16,8 +21,29 @@ export const usePendingChangeRequests = (project: string) => {
         fetcher,
     );
 
+    const mappedData: typeof data = useMemo(
+        () =>
+            data?.map((changeRequest) => {
+                const { features, ...rest } = changeRequest || {};
+                const featuresWithConstraintIds =
+                    features?.map((feature) => {
+                        const changes: IFeatureChange[] = feature.changes.map(
+                            addConstraintIdsToFeatureChange,
+                        );
+
                         return {
-        data,
+                            ...feature,
+                            changes,
+                        };
+                    }) ?? [];
+
+                return { ...rest, features: featuresWithConstraintIds };
+            }),
+        [JSON.stringify(data)],
+    );
+
+    return {
+        mappedData,
         loading: !error && !data,
         refetch: mutate,
         error,

frontend/src/hooks/api/getters/useProjectOverview/useProjectOverview.ts

@@ -1,5 +1,5 @@
 import useSWR, { type SWRConfiguration } from 'swr';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { getProjectOverviewFetcher } from './getProjectOverviewFetcher.js';
 import type { ProjectOverviewSchema } from 'openapi';
 
@@ -41,8 +41,26 @@ const useProjectOverview = (id: string, options: SWRConfiguration = {}) => {
         mutate();
     }, [mutate]);
 
+    const overriddenData = useMemo(() => {
+        if (!data) return undefined;
         return {
-        project: data || fallbackProject,
+            ...data,
+            environments: data.environments?.map((env) => {
+                return env.defaultStrategy
+                    ? {
+                          ...env,
+                          defaultStrategy: {
+                              ...env.defaultStrategy,
+                              title: 'custom title override',
+                          },
+                      }
+                    : env;
+            }),
+        };
+    }, [data]);
+
+    return {
+        project: overriddenData || fallbackProject,
         loading: !error && !data,
         error,
         refetch,

frontend/src/interfaces/strategy.ts

@@ -66,10 +66,6 @@ export interface IConstraint {
     caseInsensitive?: boolean;
     operator: Operator;
     contextName: string;
-    [constraintId]?: string;
-}
-
-export interface IConstraintWithId extends IConstraint {
     [constraintId]: string;
 }
 

frontend/src/utils/addConstraintIdsToFeatureChange.ts

@@ -0,0 +1,31 @@
+import type {
+    IFeatureChange,
+    IChangeRequestAddStrategy,
+    IChangeRequestUpdateStrategy,
+} from 'component/changeRequest/changeRequest.types';
+import { constraintId } from 'constants/constraintId';
+import { v4 as uuidv4 } from 'uuid';
+
+const isAddStrategyChange = (
+    change: IFeatureChange,
+): change is IChangeRequestAddStrategy => change.action === 'addStrategy';
+const isUpdateStrategyChange = (
+    change: IFeatureChange,
+): change is IChangeRequestUpdateStrategy => change.action === 'updateStrategy';
+
+export const addConstraintIdsToFeatureChange = (change: IFeatureChange) => {
+    if (isAddStrategyChange(change) || isUpdateStrategyChange(change)) {
+        const { constraints, ...rest } = change.payload;
+        return {
+            ...change,
+            payload: {
+                ...rest,
+                constraints: constraints.map((constraint) => ({
+                    ...constraint,
+                    [constraintId]: uuidv4(),
+                })),
+            },
+        } as IFeatureChange;
+    }
+    return change;
+};

frontend/src/utils/api-payload-constraint-replacer.test.ts

@@ -9,6 +9,7 @@ test('keys are ordered in the expected order', () => {
         operator: 'STR_CONTAINS',
         contextName: 'context',
         caseInsensitive: true,
+        [constraintId]: 'constraint-id',
     };
 
     const output = serializeConstraint(input);
@@ -30,6 +31,7 @@ test('only value OR values is present, not both', () => {
         operator: 'IN',
         contextName: 'context',
         caseInsensitive: true,
+        [constraintId]: 'constraint-id',
     };
 
     const noValue = serializeConstraint(input);

frontend/src/utils/api-payload-constraint-replacer.ts

@@ -1,6 +1,9 @@
+import type { constraintId } from 'constants/constraintId';
 import { isSingleValueOperator } from 'constants/operators';
 import type { IConstraint } from 'interfaces/strategy';
 
+type SerializedConstraint = Omit<IConstraint, typeof constraintId>;
+
 export const serializeConstraint = ({
     value,
     values,
@@ -8,10 +11,10 @@ export const serializeConstraint = ({
     operator,
     contextName,
     caseInsensitive,
-}: IConstraint): IConstraint => {
+}: IConstraint): SerializedConstraint => {
     const makeConstraint = (
         valueProp: { value: string } | { values: string[] },
-    ): IConstraint => {
+    ): SerializedConstraint => {
         return {
             contextName,
             operator,

frontend/src/utils/createEmptyConstraint.ts

@@ -1,12 +1,10 @@
 import { constraintId } from 'constants/constraintId';
 import { isDateOperator } from 'constants/operators';
-import type { IConstraintWithId } from 'interfaces/strategy';
+import type { IConstraint } from 'interfaces/strategy';
 import { operatorsForContext } from 'utils/operatorsForContext';
 import { v4 as uuidv4 } from 'uuid';
 
-export const createEmptyConstraint = (
+export const createEmptyConstraint = (contextName: string): IConstraint => {
-    contextName: string,
-): IConstraintWithId => {
     const operator = operatorsForContext(contextName)[0];
 
     const value = isDateOperator(operator) ? new Date().toISOString() : '';