From 5c4f15ea5d210dc67b95f3f3537e35f093ab1f4c Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 11 Jul 2023 09:21:01 +0200
Subject: [PATCH] feat: strategy variant test UI (#4199)

---
 .../FlexibleStrategy/FlexibleStrategy.tsx     | 31 +++++++++++++++++++
 frontend/src/interfaces/uiConfig.ts           |  1 +
 .../__snapshots__/create-config.test.ts.snap  |  2 --
 src/lib/types/experimental.ts                 |  5 +--
 src/server-dev.ts                             |  1 +
 5 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
index 43659c5ce5..d4fead7c3f 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
@@ -17,6 +17,8 @@ import Loader from '../../../common/Loader/Loader';
 import { useEffect, useMemo } from 'react';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useLocation } from 'react-router';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IFlexibleStrategyProps {
     parameters: IFeatureStrategyParameters;
@@ -33,6 +35,7 @@ const FlexibleStrategy = ({
     const projectId = useRequiredPathParam('projectId');
     const { defaultStickiness, loading } = useDefaultProjectSettings(projectId);
     const { pathname } = useLocation();
+    const { uiConfig } = useUiConfig();
 
     const isDefaultStrategyEdit = pathname.includes('default-strategy');
     const onUpdate = (field: string) => (newValue: string) => {
@@ -123,6 +126,34 @@ const FlexibleStrategy = ({
                     onChange={e => onUpdate('groupId')(e.target.value)}
                     data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
                 />
+                <ConditionallyRender
+                    condition={Boolean(uiConfig?.flags?.strategyVariant)}
+                    show={
+                        <>
+                            <br />
+                            <Typography
+                                variant="subtitle2"
+                                style={{
+                                    marginBottom: '1rem',
+                                    display: 'flex',
+                                    gap: '1ch',
+                                }}
+                                component="h2"
+                            >
+                                Variant
+                            </Typography>
+                            <Input
+                                label="variant"
+                                id="variant-input"
+                                value={parseParameterString(parameters.variant)}
+                                disabled={!editable}
+                                onChange={e =>
+                                    onUpdate('variant')(e.target.value)
+                                }
+                            />
+                        </>
+                    }
+                />
             </div>
         </div>
     );
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 40fab365fe..bf466e0074 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -53,6 +53,7 @@ export interface IFlags {
     advancedPlayground?: boolean;
     customRootRoles?: boolean;
     strategySplittedButton?: boolean;
+    strategyVariant?: boolean;
     newProjectLayout?: boolean;
 }
 
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index a9ee577166..691d0652b2 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/src/lib/__snapshots__/create-config.test.ts.snap
@@ -89,7 +89,6 @@ exports[`should create default config 1`] = `
         },
       },
       "migrationLock": false,
-      "newProjectLayout": false,
       "personalAccessTokensKillSwitch": false,
       "proPlanAutoCharge": false,
       "responseTimeWithAppNameKillSwitch": false,
@@ -122,7 +121,6 @@ exports[`should create default config 1`] = `
         },
       },
       "migrationLock": false,
-      "newProjectLayout": false,
       "personalAccessTokensKillSwitch": false,
       "proPlanAutoCharge": false,
       "responseTimeWithAppNameKillSwitch": false,
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index 8238f3710c..d524204d2b 100644
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@@ -24,6 +24,7 @@ export type IFlagKey =
     | 'advancedPlayground'
     | 'customRootRoles'
     | 'strategySplittedButton'
+    | 'strategyVariant'
     | 'newProjectLayout';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
@@ -109,10 +110,6 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_CUSTOM_ROOT_ROLES,
         false,
     ),
-    newProjectLayout: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_NEW_PROJECT_LAYOUT,
-        false,
-    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {
diff --git a/src/server-dev.ts b/src/server-dev.ts
index a880dfa077..be0b2807e0 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -40,6 +40,7 @@ process.nextTick(async () => {
                         segmentContextFieldUsage: true,
                         advancedPlayground: true,
                         strategySplittedButton: true,
+                        strategyVariant: true,
                         newProjectLayout: true,
                     },
                 },