feat: variant name change on create (#5742)

This PR refactores the StrategyVariants component to be passed in from the outside to the new form component. This allows us to pass in the StrategyVariants with an "editable" property in the create form which we use to determine the editable state of the name input field. If the editable field is not passed in we keep the old behavior. Notable changes: * StrategyVariants is now passed in from the outside, allowing us to define different props at call time * Added tests for the new behavior, and for keeping the old behavior (such as in edit strategy) * Added tracking
Unleash · Jan 2, 2024 · 049c5b9 · 049c5b9
1 parent f53204c
commit 049c5b9
Show file tree

Hide file tree

Showing 11 changed files with 342 additions and 133 deletions.
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EditChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EditChange.tsx
@@ -25,6 +25,7 @@ import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { NewFeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm';
+import { StrategyVariants } from 'component/feature/StrategyTypes/StrategyVariants';
 
 interface IEditChangeProps {
     change: IChangeRequestAddStrategy | IChangeRequestUpdateStrategy;
@@ -172,6 +173,14 @@ export const EditChange = ({
                             )}
                             tab={tab}
                             setTab={setTab}
+                            StrategyVariants={
+                                <StrategyVariants
+                                    strategy={strategy}
+                                    setStrategy={setStrategy}
+                                    environment={environment}
+                                    projectId={projectId}
+                                />
+                            }
                         />
                     }
                     elseShow={

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NewEditChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NewEditChange.tsx
@@ -25,6 +25,7 @@ import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { NewFeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm';
+import { StrategyVariants } from 'component/feature/StrategyTypes/StrategyVariants';
 
 interface IEditChangeProps {
     change: IChangeRequestAddStrategy | IChangeRequestUpdateStrategy;
@@ -172,6 +173,14 @@ export const NewEditChange = ({
                             )}
                             tab={tab}
                             setTab={setTab}
+                            StrategyVariants={
+                                <StrategyVariants
+                                    strategy={strategy}
+                                    setStrategy={setStrategy}
+                                    environment={environment}
+                                    projectId={projectId}
+                                />
+                            }
                         />
                     }
                     elseShow={

diff --git a/.../component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/.../component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
@@ -228,7 +228,6 @@ export const ConstraintList = forwardRef<
         <StyledContainer id={constraintAccordionListId}>
             {constraints.map((constraint, index) => (
                 <Fragment key={objectId(constraint)}>
-                    {console.log(state.get(constraint))}
                     <ConditionallyRender
                         condition={index > 0}
                         show={<StrategySeparator text='AND' />}

diff --git a/...tend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx b/...tend/src/component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
     Alert,
@@ -40,13 +40,10 @@ import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequ
 import { useHasProjectEnvironmentAccess } from 'hooks/useHasAccess';
 import { FeatureStrategyTitle } from './FeatureStrategyTitle/FeatureStrategyTitle';
 import { FeatureStrategyEnabledDisabled } from './FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled';
-import { StrategyVariants } from 'component/feature/StrategyTypes/StrategyVariants';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { formatStrategyName } from 'utils/strategyNames';
 import { Badge } from 'component/common/Badge/Badge';
 import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
-import { useProjectEnvironments } from 'hooks/api/getters/useProjectEnvironments/useProjectEnvironments';
-import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 
 interface IFeatureStrategyFormProps {
     feature: IFeatureToggle;
@@ -66,6 +63,7 @@ interface IFeatureStrategyFormProps {
     errors: IFormErrors;
     tab: number;
     setTab: React.Dispatch<React.SetStateAction<number>>;
+    StrategyVariants: JSX.Element;
 }
 
 const StyledDividerContent = styled(Box)(({ theme }) => ({
@@ -185,6 +183,7 @@ export const NewFeatureStrategyForm = ({
     isChangeRequest,
     tab,
     setTab,
+    StrategyVariants,
 }: IFeatureStrategyFormProps) => {
     const { trackEvent } = usePlausibleTracker();
     const [showProdGuard, setShowProdGuard] = useState(false);
@@ -197,6 +196,14 @@ export const NewFeatureStrategyForm = ({
     );
     const { strategyDefinition } = useStrategy(strategy?.name);
 
+    useEffect(() => {
+        trackEvent('new-strategy-form', {
+            props: {
+                eventType: 'seen',
+            },
+        });
+    });
+
     const foundEnvironment = feature.environments.find(
         (environment) => environment.name === environmentId,
     );
@@ -271,6 +278,12 @@ export const NewFeatureStrategyForm = ({
             return;
         }
 
+        trackEvent('new-strategy-form', {
+            props: {
+                eventType: 'submitted',
+            },
+        });
+
         if (enableProdGuard && !isChangeRequest) {
             setShowProdGuard(true);
         } else {
@@ -440,14 +453,7 @@ export const NewFeatureStrategyForm = ({
                                 strategy.parameters != null &&
                                 'stickiness' in strategy.parameters
                             }
-                            show={
-                                <StrategyVariants
-                                    strategy={strategy}
-                                    setStrategy={setStrategy}
-                                    environment={environmentId}
-                                    projectId={projectId}
-                                />
-                            }
+                            show={StrategyVariants}
                         />
                     }
                 />

diff --git a/...ponent/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.test.tsx b/...ponent/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.test.tsx
@@ -9,92 +9,17 @@ import {
     UPDATE_FEATURE_STRATEGY,
 } from 'component/providers/AccessProvider/permissions';
 import { NewFeatureStrategyCreate } from './NewFeatureStrategyCreate';
-import { testServerRoute, testServerSetup } from 'utils/testServer';
-
-const server = testServerSetup();
+import {
+    setupProjectEndpoint,
+    setupSegmentsEndpoint,
+    setupStrategyEndpoint,
+    setupFeaturesEndpoint,
+    setupUiConfigEndpoint,
+    setupContextEndpoint,
+} from './featureStrategyFormTestSetup';
 
 const featureName = 'my-new-feature';
 
-const setupProjectEndpoint = () => {
-    testServerRoute(server, '/api/admin/projects/default', {
-        environments: [
-            {
-                name: 'development',
-                enabled: true,
-                type: 'development',
-            },
-        ],
-    });
-};
-
-const setupSegmentsEndpoint = () => {
-    testServerRoute(server, '/api/admin/segments', {
-        segments: [
-            {
-                name: 'test',
-                constraints: [],
-            },
-        ],
-    });
-};
-
-const setupStrategyEndpoint = () => {
-    testServerRoute(server, '/api/admin/strategies/flexibleRollout', {
-        displayName: 'Gradual rollout',
-        name: 'flexibleRollout',
-        parameters: [
-            {
-                name: 'rollout',
-            },
-            {
-                name: 'stickiness',
-            },
-            {
-                name: 'groupId',
-            },
-        ],
-    });
-};
-
-const setupFeaturesEndpoint = () => {
-    testServerRoute(
-        server,
-        `/api/admin/projects/default/features/${featureName}`,
-        {
-            environments: [
-                {
-                    name: 'development',
-                    type: 'development',
-                },
-            ],
-            name: featureName,
-            project: 'default',
-        },
-    );
-};
-
-const setupUiConfigEndpoint = () => {
-    testServerRoute(server, '/api/admin/ui-config', {
-        versionInfo: {
-            current: {
-                enterprise: '5.7.0-main',
-            },
-        },
-        environment: 'enterprise',
-        flags: {
-            newStrategyConfiguration: true,
-        },
-    });
-};
-
-const setupContextEndpoint = () => {
-    testServerRoute(server, '/api/admin/context', [
-        {
-            name: 'appName',
-        },
-    ]);
-};
-
 const setupComponent = () => {
     return {
         wrapper: render(
@@ -139,7 +64,7 @@ beforeEach(() => {
     setupProjectEndpoint();
     setupSegmentsEndpoint();
     setupStrategyEndpoint();
-    setupFeaturesEndpoint();
+    setupFeaturesEndpoint(featureName);
     setupUiConfigEndpoint();
     setupContextEndpoint();
 });
@@ -270,4 +195,39 @@ describe('NewFeatureStrategyCreate', () => {
 
         expect(screen.getByText(expectedVariantName)).toBeInTheDocument();
     });
+
+    test('should change variant name after changing tab', async () => {
+        const { expectedVariantName } = setupComponent();
+
+        await waitFor(() => {
+            expect(screen.getByText('Gradual rollout')).toBeInTheDocument();
+        });
+
+        const variantsEl = screen.getByText('Variants');
+        fireEvent.click(variantsEl);
+
+        await waitFor(() => {
+            const addVariantEl = screen.getByText('Add variant');
+            fireEvent.click(addVariantEl);
+        });
+
+        await waitFor(() => {
+            const targetingEl = screen.getByText('Targeting');
+            fireEvent.click(targetingEl);
+        });
+
+        await waitFor(() => {
+            const addConstraintEl = screen.getByText('Add constraint');
+            expect(addConstraintEl).toBeInTheDocument();
+        });
+
+        fireEvent.click(variantsEl);
+
+        const inputElement = screen.getAllByRole('textbox')[0];
+        fireEvent.change(inputElement, {
+            target: { value: expectedVariantName },
+        });
+
+        expect(screen.getByText(expectedVariantName)).toBeInTheDocument();
+    });
 });
diff --git a/...c/component/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.tsx b/...c/component/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate.tsx
@@ -34,6 +34,7 @@ import useQueryParams from 'hooks/useQueryParams';
 import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
 import { useDefaultStrategy } from '../../../project/Project/ProjectSettings/ProjectDefaultStrategySettings/ProjectEnvironment/ProjectEnvironmentDefaultStrategy/EditDefaultStrategy';
 import { NewFeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/NewFeatureStrategyForm';
+import { StrategyVariants } from 'component/feature/StrategyTypes/StrategyVariants';
 
 export const NewFeatureStrategyCreate = () => {
     const [tab, setTab] = useState(0);
@@ -209,6 +210,15 @@ export const NewFeatureStrategyCreate = () => {
                 isChangeRequest={isChangeRequestConfigured(environmentId)}
                 tab={tab}
                 setTab={setTab}
+                StrategyVariants={
+                    <StrategyVariants
+                        strategy={strategy}
+                        setStrategy={setStrategy}
+                        environment={environmentId}
+                        projectId={projectId}
+                        editable
+                    />
+                }
             />
             {staleDataNotification}
         </FormTemplate>