feat: strategy variant test UI (#4199)

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>
     );

frontend/src/interfaces/uiConfig.ts

@@ -53,6 +53,7 @@ export interface IFlags {
     advancedPlayground?: boolean;
     customRootRoles?: boolean;
     strategySplittedButton?: boolean;
+    strategyVariant?: boolean;
     newProjectLayout?: boolean;
 }
 

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,

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 = {

src/server-dev.ts

@@ -40,6 +40,7 @@ process.nextTick(async () => {
                         segmentContextFieldUsage: true,
                         advancedPlayground: true,
                         strategySplittedButton: true,
+                        strategyVariant: true,
                         newProjectLayout: true,
                     },
                 },