tests: flexible strategy component stickiness and groupId (#7735)

Follow-up for #7713

frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.test.tsx

@@ -1,5 +1,6 @@
+import { vi } from 'vitest';
 import { useState } from 'react';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import FlexibleStrategy from './FlexibleStrategy';
 import { render } from 'utils/testRenderer';
 import { Route, Routes } from 'react-router-dom';
@@ -9,6 +10,7 @@ const server = testServerSetup();
 
 const setupApi = () => {
     testServerRoute(server, '/api/admin/projects/default', {});
+    testServerRoute(server, '/api/admin/projects/default/overview', {});
 };
 
 test('manipulates the rollout slider', async () => {
@@ -61,3 +63,75 @@ test('manipulates the rollout slider', async () => {
     expect(slider).toHaveValue('50');
     expect(groupIdInput).toHaveValue('newGroupId');
 });
+
+test('if stickiness or groupId not present, fill it with defaults', async () => {
+    const updateParameter = vi.fn();
+    const Wrapper = () => (
+        <Routes>
+            <Route
+                path='/projects/:projectId/features/:featureId'
+                element={
+                    <FlexibleStrategy
+                        parameters={{
+                            rollout: '50',
+                        }}
+                        updateParameter={updateParameter}
+                        context={{}}
+                        editable={true}
+                    />
+                }
+            />
+        </Routes>
+    );
+
+    setupApi();
+
+    render(<Wrapper />, {
+        route: '/projects/default/features/test',
+    });
+
+    await waitFor(() => {
+        expect(updateParameter).toHaveBeenCalledWith('stickiness', 'default');
+        expect(updateParameter).toHaveBeenCalledWith('groupId', 'test');
+    });
+});
+
+test('displays groupId error', async () => {
+    const Wrapper = () => (
+        <Routes>
+            <Route
+                path='/projects/:projectId/features/:featureId'
+                element={
+                    <FlexibleStrategy
+                        parameters={{
+                            rollout: '50',
+                            stickiness: 'default',
+                        }}
+                        updateParameter={(
+                            parameter: string,
+                            value: string,
+                        ) => {}}
+                        context={{}}
+                        editable={true}
+                        errors={
+                            {
+                                getFormError: () => 'Field required test',
+                            } as any
+                        }
+                    />
+                }
+            />
+        </Routes>
+    );
+
+    setupApi();
+
+    render(<Wrapper />, {
+        route: '/projects/default/features/test',
+    });
+
+    await waitFor(async () => {
+        const errorText = await screen.queryByText('Field required test');
+        expect(errorText).toBeInTheDocument();
+    });
+});

frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Box, styled } from '@mui/material';
 import type { IFeatureStrategyParameters } from 'interfaces/strategy';
 import RolloutSlider from '../RolloutSlider/RolloutSlider';
@@ -13,7 +14,6 @@ import {
 import { StickinessSelect } from './StickinessSelect/StickinessSelect';
 import { useDefaultProjectSettings } from 'hooks/useDefaultProjectSettings';
 import Loader from '../../../common/Loader/Loader';
-import { useEffect, useMemo } from 'react';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useLocation } from 'react-router';
 import type { IFormErrors } from 'hooks/useFormErrors';
@@ -63,9 +63,6 @@ const FlexibleStrategy = ({
     const { pathname } = useLocation();
 
     const isDefaultStrategyEdit = pathname.includes('default-strategy');
-    const onUpdate = (field: string) => (newValue: string) => {
-        updateParameter(field, newValue);
-    };
 
     const updateRollout = (e: Event, value: number | number[]) => {
         updateParameter('rollout', value.toString());
@@ -77,22 +74,20 @@ const FlexibleStrategy = ({
             : 100;
 
     const stickiness = useMemo(() => {
-        if (parameters.stickiness === '' && !loading) {
+        if (!parameters.stickiness && !loading) {
-            return defaultStickiness;
+            updateParameter('stickiness', defaultStickiness);
         }
 
-        return parseParameterString(parameters.stickiness || defaultStickiness);
+        return parseParameterString(parameters.stickiness);
-    }, [loading, parameters.stickiness]);
+    }, [loading, defaultStickiness, parameters.stickiness]);
 
-    if (parameters.stickiness === '') {
+    const groupId = useMemo(() => {
-        onUpdate('stickiness')(stickiness);
+        if (!parameters.groupId && !loading) {
+            updateParameter('groupId', isDefaultStrategyEdit ? '' : featureId);
         }
 
-    useEffect(() => {
+        return parseParameterString(parameters.groupId);
-        if (!parameters.groupId) {
+    }, [parameters.groupId, isDefaultStrategyEdit, featureId, loading]);
-            onUpdate('groupId')(isDefaultStrategyEdit ? '' : featureId);
-        }
-    }, [isDefaultStrategyEdit, featureId]);
 
     if (loading) {
         return <Loader />;
@@ -113,7 +108,9 @@ const FlexibleStrategy = ({
                         value={stickiness}
                         editable={editable}
                         dataTestId={FLEXIBLE_STRATEGY_STICKINESS_ID}
-                        onChange={(e) => onUpdate('stickiness')(e.target.value)}
+                        onChange={(e) =>
+                            updateParameter('stickiness', e.target.value)
+                        }
                     />
                 </StyledInnerBox1>
                 <StyledInnerBox2>
@@ -121,9 +118,11 @@ const FlexibleStrategy = ({
                         label='groupId'
                         sx={{ width: '100%' }}
                         id='groupId-input'
-                        value={parseParameterString(parameters.groupId)}
+                        value={groupId}
                         disabled={!editable}
-                        onChange={(e) => onUpdate('groupId')(e.target.value)}
+                        onChange={(e) =>
+                            updateParameter('groupId', e.target.value)
+                        }
                         data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
                         error={Boolean(errors?.getFormError('groupId'))}
                         helperText={errors?.getFormError('groupId')}