From c049374a2573e5d370cb35c74fe4de40fcc06fda Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Tue, 27 Feb 2024 11:23:49 +0100
Subject: [PATCH] chore: remove new strategy configuration flag (#6335)

---
 .../Changes/Change/ChangeActions.tsx          |  70 +++-------
 .../Changes/Change/EditChange.tsx             |  68 +++-------
 .../Changes/Change/NewEditChange.tsx          |  68 +++-------
 .../AutocompleteBox/AutocompleteBox.tsx       |  38 ++----
 ...FeatureStrategyConstraintAccordionList.tsx | 126 +++++-------------
 .../FeatureStrategyEnabledDisabled.tsx        |  46 ++-----
 .../FeatureStrategySegment.tsx                |  77 ++++-------
 .../FeatureOverview/FeatureOverview.tsx       |  20 +--
 .../FlexibleStrategy/FlexibleStrategy.tsx     | 117 ++++------------
 .../StickinessSelect/StickinessSelect.tsx     |   7 +-
 .../__snapshots__/create-config.test.ts.snap  |   1 -
 src/lib/types/experimental.ts                 |   5 -
 src/server-dev.ts                             |   1 -
 13 files changed, 166 insertions(+), 478 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeActions.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeActions.tsx
index 6b8dae7783..51ea30be6e 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeActions.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeActions.tsx
@@ -1,9 +1,9 @@
 import React, { FC, useState } from 'react';
 import {
     ChangeRequestType,
+    IChange,
     IChangeRequestAddStrategy,
     IChangeRequestUpdateStrategy,
-    IChange,
 } from 'component/changeRequest/changeRequest.types';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 import useToast from 'hooks/useToast';
@@ -24,8 +24,6 @@ import {
     Typography,
 } from '@mui/material';
 import { Delete, Edit, MoreVert } from '@mui/icons-material';
-import { EditChange } from './EditChange';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { NewEditChange } from './NewEditChange';
 
 const useShowActions = (changeRequest: ChangeRequestType, change: IChange) => {
@@ -68,7 +66,6 @@ export const ChangeActions: FC<{
     const { showDiscard, showEdit } = useShowActions(changeRequest, change);
     const { discardChange } = useChangeRequestApi();
     const { setToastData, setToastApiError } = useToast();
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
 
     const [editOpen, setEditOpen] = useState(false);
 
@@ -152,56 +149,25 @@ export const ChangeActions: FC<{
                                                 Edit change
                                             </Typography>
                                         </ListItemText>
-                                        <ConditionallyRender
-                                            condition={newStrategyConfiguration}
-                                            show={
-                                                <NewEditChange
-                                                    changeRequestId={
-                                                        changeRequest.id
-                                                    }
-                                                    featureId={feature}
-                                                    change={
-                                                        change as
-                                                            | IChangeRequestAddStrategy
-                                                            | IChangeRequestUpdateStrategy
-                                                    }
-                                                    environment={
-                                                        changeRequest.environment
-                                                    }
-                                                    open={editOpen}
-                                                    onSubmit={() => {
-                                                        setEditOpen(false);
-                                                        onRefetch?.();
-                                                    }}
-                                                    onClose={() => {
-                                                        setEditOpen(false);
-                                                    }}
-                                                />
+                                        <NewEditChange
+                                            changeRequestId={changeRequest.id}
+                                            featureId={feature}
+                                            change={
+                                                change as
+                                                    | IChangeRequestAddStrategy
+                                                    | IChangeRequestUpdateStrategy
                                             }
-                                            elseShow={
-                                                <EditChange
-                                                    changeRequestId={
-                                                        changeRequest.id
-                                                    }
-                                                    featureId={feature}
-                                                    change={
-                                                        change as
-                                                            | IChangeRequestAddStrategy
-                                                            | IChangeRequestUpdateStrategy
-                                                    }
-                                                    environment={
-                                                        changeRequest.environment
-                                                    }
-                                                    open={editOpen}
-                                                    onSubmit={() => {
-                                                        setEditOpen(false);
-                                                        onRefetch?.();
-                                                    }}
-                                                    onClose={() => {
-                                                        setEditOpen(false);
-                                                    }}
-                                                />
+                                            environment={
+                                                changeRequest.environment
                                             }
+                                            open={editOpen}
+                                            onSubmit={() => {
+                                                setEditOpen(false);
+                                                onRefetch?.();
+                                            }}
+                                            onClose={() => {
+                                                setEditOpen(false);
+                                            }}
                                         />
                                     </MenuItem>
                                 }
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EditChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EditChange.tsx
index ebdbe83e42..219ee62aa2 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EditChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EditChange.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import { FeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@@ -22,8 +21,6 @@ import {
 } from 'component/changeRequest/changeRequest.types';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
 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';
 
@@ -49,7 +46,6 @@ export const EditChange = ({
     const projectId = useRequiredPathParam('projectId');
     const { editChange } = useChangeRequestApi();
     const [tab, setTab] = useState(0);
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
 
     const [strategy, setStrategy] = useState<Partial<IFeatureStrategy>>(
         change.payload,
@@ -152,54 +148,28 @@ export const EditChange = ({
                     )
                 }
             >
-                <ConditionallyRender
-                    condition={newStrategyConfiguration}
-                    show={
-                        <NewFeatureStrategyForm
-                            projectId={projectId}
-                            feature={data}
+                <NewFeatureStrategyForm
+                    projectId={projectId}
+                    feature={data}
+                    strategy={strategy}
+                    setStrategy={setStrategy}
+                    segments={segments}
+                    setSegments={setSegments}
+                    environmentId={environment}
+                    onSubmit={onInternalSubmit}
+                    onCancel={onClose}
+                    loading={false}
+                    permission={UPDATE_FEATURE_STRATEGY}
+                    errors={errors}
+                    isChangeRequest={isChangeRequestConfigured(environment)}
+                    tab={tab}
+                    setTab={setTab}
+                    StrategyVariants={
+                        <StrategyVariants
                             strategy={strategy}
                             setStrategy={setStrategy}
-                            segments={segments}
-                            setSegments={setSegments}
-                            environmentId={environment}
-                            onSubmit={onInternalSubmit}
-                            onCancel={onClose}
-                            loading={false}
-                            permission={UPDATE_FEATURE_STRATEGY}
-                            errors={errors}
-                            isChangeRequest={isChangeRequestConfigured(
-                                environment,
-                            )}
-                            tab={tab}
-                            setTab={setTab}
-                            StrategyVariants={
-                                <StrategyVariants
-                                    strategy={strategy}
-                                    setStrategy={setStrategy}
-                                    environment={environment}
-                                    projectId={projectId}
-                                />
-                            }
-                        />
-                    }
-                    elseShow={
-                        <FeatureStrategyForm
+                            environment={environment}
                             projectId={projectId}
-                            feature={data}
-                            strategy={strategy}
-                            setStrategy={setStrategy}
-                            segments={segments}
-                            setSegments={setSegments}
-                            environmentId={environment}
-                            onSubmit={onInternalSubmit}
-                            onCancel={onClose}
-                            loading={false}
-                            permission={UPDATE_FEATURE_STRATEGY}
-                            errors={errors}
-                            isChangeRequest={isChangeRequestConfigured(
-                                environment,
-                            )}
                         />
                     }
                 />
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NewEditChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NewEditChange.tsx
index 86e89f6c9b..dfeff48487 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NewEditChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NewEditChange.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from 'react';
-import { FeatureStrategyForm } from 'component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@@ -23,8 +22,6 @@ import {
 } from 'component/changeRequest/changeRequest.types';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
 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 { NewStrategyVariants } from 'component/feature/StrategyTypes/NewStrategyVariants';
 import { constraintId } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
@@ -62,7 +59,6 @@ export const NewEditChange = ({
     const projectId = useRequiredPathParam('projectId');
     const { editChange } = useChangeRequestApi();
     const [tab, setTab] = useState(0);
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
 
     const constraintsWithId = addIdSymbolToConstraints(change.payload);
 
@@ -168,54 +164,28 @@ export const NewEditChange = ({
                     )
                 }
             >
-                <ConditionallyRender
-                    condition={newStrategyConfiguration}
-                    show={
-                        <NewFeatureStrategyForm
-                            projectId={projectId}
-                            feature={data}
+                <NewFeatureStrategyForm
+                    projectId={projectId}
+                    feature={data}
+                    strategy={strategy}
+                    setStrategy={setStrategy}
+                    segments={segments}
+                    setSegments={setSegments}
+                    environmentId={environment}
+                    onSubmit={onInternalSubmit}
+                    onCancel={onClose}
+                    loading={false}
+                    permission={UPDATE_FEATURE_STRATEGY}
+                    errors={errors}
+                    isChangeRequest={isChangeRequestConfigured(environment)}
+                    tab={tab}
+                    setTab={setTab}
+                    StrategyVariants={
+                        <NewStrategyVariants
                             strategy={strategy}
                             setStrategy={setStrategy}
-                            segments={segments}
-                            setSegments={setSegments}
-                            environmentId={environment}
-                            onSubmit={onInternalSubmit}
-                            onCancel={onClose}
-                            loading={false}
-                            permission={UPDATE_FEATURE_STRATEGY}
-                            errors={errors}
-                            isChangeRequest={isChangeRequestConfigured(
-                                environment,
-                            )}
-                            tab={tab}
-                            setTab={setTab}
-                            StrategyVariants={
-                                <NewStrategyVariants
-                                    strategy={strategy}
-                                    setStrategy={setStrategy}
-                                    environment={environment}
-                                    projectId={projectId}
-                                />
-                            }
-                        />
-                    }
-                    elseShow={
-                        <FeatureStrategyForm
+                            environment={environment}
                             projectId={projectId}
-                            feature={data}
-                            strategy={strategy}
-                            setStrategy={setStrategy}
-                            segments={segments}
-                            setSegments={setSegments}
-                            environmentId={environment}
-                            onSubmit={onInternalSubmit}
-                            onCancel={onClose}
-                            loading={false}
-                            permission={UPDATE_FEATURE_STRATEGY}
-                            errors={errors}
-                            isChangeRequest={isChangeRequestConfigured(
-                                environment,
-                            )}
                         />
                     }
                 />
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
index 913993a3b8..fd8fdea637 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
@@ -1,9 +1,13 @@
 import { useStyles } from 'component/common/AutocompleteBox/AutocompleteBox.styles';
-import { Search, ArrowDropDown, Add } from '@mui/icons-material';
-import { Autocomplete, styled, InputAdornment, useTheme } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import {
+    Autocomplete,
+    InputAdornment,
+    styled,
+    TextField,
+    useTheme,
+} from '@mui/material';
 import { AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
-import { TextField } from '@mui/material';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { useState } from 'react';
 
 interface IAutocompleteBoxProps {
@@ -60,8 +64,6 @@ export const AutocompleteBox = ({
     const { classes: styles } = useStyles();
     const theme = useTheme();
 
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
-
     const renderInput = (params: AutocompleteRenderInputParams) => {
         return <TextField {...params} variant='outlined' label={label} />;
     };
@@ -113,35 +115,13 @@ export const AutocompleteBox = ({
             />
         );
     };
-    if (newStrategyConfiguration) {
-        return (
-            <StyledContainer>
-                <StyledAutocomplete
-                    options={options}
-                    value={value}
-                    onChange={(event, value) => onChange(value || [])}
-                    renderInput={renderCustomInput}
-                    getOptionLabel={(value) => value.label}
-                    disabled={disabled}
-                    size='small'
-                    multiple
-                />
-            </StyledContainer>
-        );
-    }
-
     return (
         <StyledContainer>
-            <StyledIcon $disabled={Boolean(disabled)} aria-hidden>
-                <Search />
-            </StyledIcon>
             <StyledAutocomplete
-                classes={{ inputRoot: styles.inputRoot }}
                 options={options}
                 value={value}
-                popupIcon={<ArrowDropDown titleAccess='Toggle' />}
                 onChange={(event, value) => onChange(value || [])}
-                renderInput={renderInput}
+                renderInput={renderCustomInput}
                 getOptionLabel={(value) => value.label}
                 disabled={disabled}
                 size='small'
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
index 66db4d148e..2328aa40b8 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
@@ -4,11 +4,8 @@ import { Add, HelpOutline } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
 
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-
-import { useUiFlag } from 'hooks/useUiFlag';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import {
-    ConstraintList,
     IConstraintAccordionListRef,
     useConstraintAccordionList,
 } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
@@ -21,6 +18,7 @@ interface IConstraintAccordionListProps {
     /* Add "constraints" title on the top - default `true` */
     showLabel?: boolean;
 }
+
 export const constraintAccordionListId = 'constraintAccordionListId';
 
 const StyledContainer = styled('div')({
@@ -72,110 +70,52 @@ export const FeatureStrategyConstraintAccordionList = forwardRef<
             setConstraints,
             ref as RefObject<IConstraintAccordionListRef>,
         );
-        const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
 
         if (context.length === 0) {
             return null;
         }
 
-        if (newStrategyConfiguration) {
-            return (
-                <StyledContainer id={constraintAccordionListId}>
-                    <ConditionallyRender
-                        condition={Boolean(showCreateButton && onAdd)}
-                        show={
-                            <div>
-                                <StyledHelpIconBox>
-                                    <Typography>Constraints</Typography>
-                                    <HelpIcon
-                                        htmlTooltip
-                                        tooltip={
-                                            <Box>
-                                                <Typography variant='body2'>
-                                                    Constraints are advanced
-                                                    targeting rules that you can
-                                                    use to enable a feature
-                                                    toggle for a subset of your
-                                                    users. Read more about
-                                                    constraints{' '}
-                                                    <a
-                                                        href='https://docs.getunleash.io/reference/strategy-constraints'
-                                                        target='_blank'
-                                                        rel='noopener noreferrer'
-                                                    >
-                                                        here
-                                                    </a>
-                                                </Typography>
-                                            </Box>
-                                        }
-                                    />
-                                </StyledHelpIconBox>
-                                <NewConstraintAccordionList
-                                    ref={ref}
-                                    setConstraints={setConstraints}
-                                    constraints={constraints}
-                                    state={state}
-                                />
-                                <Button
-                                    sx={{ marginTop: '1rem' }}
-                                    type='button'
-                                    onClick={onAdd}
-                                    startIcon={<Add />}
-                                    variant='outlined'
-                                    color='primary'
-                                    data-testid='ADD_CONSTRAINT_BUTTON'
-                                >
-                                    Add constraint
-                                </Button>
-                            </div>
-                        }
-                    />
-                </StyledContainer>
-            );
-        }
-
         return (
             <StyledContainer id={constraintAccordionListId}>
-                <ConditionallyRender
-                    condition={
-                        constraints && constraints.length > 0 && showLabel
-                    }
-                    show={
-                        <StyledConstraintLabel>
-                            Constraints
-                        </StyledConstraintLabel>
-                    }
-                />
-                <ConstraintList
-                    ref={ref}
-                    setConstraints={setConstraints}
-                    constraints={constraints}
-                    state={state}
-                />
                 <ConditionallyRender
                     condition={Boolean(showCreateButton && onAdd)}
                     show={
                         <div>
-                            <StyledAddCustomLabel>
-                                <p>Add any number of constraints</p>
-                                <StyledHelpWrapper
-                                    title='View constraints documentation'
-                                    arrow
-                                >
-                                    <a
-                                        href={
-                                            'https://docs.getunleash.io/reference/strategy-constraints'
-                                        }
-                                        target='_blank'
-                                        rel='noopener noreferrer'
-                                    >
-                                        <StyledHelp />
-                                    </a>
-                                </StyledHelpWrapper>
-                            </StyledAddCustomLabel>
+                            <StyledHelpIconBox>
+                                <Typography>Constraints</Typography>
+                                <HelpIcon
+                                    htmlTooltip
+                                    tooltip={
+                                        <Box>
+                                            <Typography variant='body2'>
+                                                Constraints are advanced
+                                                targeting rules that you can use
+                                                to enable a feature toggle for a
+                                                subset of your users. Read more
+                                                about constraints{' '}
+                                                <a
+                                                    href='https://docs.getunleash.io/reference/strategy-constraints'
+                                                    target='_blank'
+                                                    rel='noopener noreferrer'
+                                                >
+                                                    here
+                                                </a>
+                                            </Typography>
+                                        </Box>
+                                    }
+                                />
+                            </StyledHelpIconBox>
+                            <NewConstraintAccordionList
+                                ref={ref}
+                                setConstraints={setConstraints}
+                                constraints={constraints}
+                                state={state}
+                            />
                             <Button
+                                sx={{ marginTop: '1rem' }}
                                 type='button'
                                 onClick={onAdd}
+                                startIcon={<Add />}
                                 variant='outlined'
                                 color='primary'
                                 data-testid='ADD_CONSTRAINT_BUTTON'
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx
index a2b87750ce..0a5a6aabf8 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx
@@ -1,11 +1,10 @@
 import {
     Box,
     FormControlLabel,
+    styled,
     Switch,
     Typography,
-    styled,
 } from '@mui/material';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { VFC } from 'react';
 
 interface IFeatureStrategyEnabledDisabledProps {
@@ -25,36 +24,19 @@ const StyledBox = styled(Box)(({ theme }) => ({
 export const FeatureStrategyEnabledDisabled: VFC<
     IFeatureStrategyEnabledDisabledProps
 > = ({ enabled, onToggleEnabled }) => {
-    const strategyConfigurationEnabled = useUiFlag('newStrategyConfiguration');
-
-    if (strategyConfigurationEnabled) {
-        return (
-            <StyledBox>
-                <Typography>Strategy Status</Typography>
-                <FormControlLabel
-                    control={
-                        <Switch
-                            name='enabled'
-                            onChange={onToggleEnabled}
-                            checked={enabled}
-                        />
-                    }
-                    label='Enabled'
-                />
-            </StyledBox>
-        );
-    }
-
     return (
-        <FormControlLabel
-            control={
-                <Switch
-                    name='enabled'
-                    onChange={onToggleEnabled}
-                    checked={enabled}
-                />
-            }
-            label='Enabled &ndash; This strategy will be used when evaluating feature toggles.'
-        />
+        <StyledBox>
+            <Typography>Strategy Status</Typography>
+            <FormControlLabel
+                control={
+                    <Switch
+                        name='enabled'
+                        onChange={onToggleEnabled}
+                        checked={enabled}
+                    />
+                }
+                label='Enabled'
+            />
+        </StyledBox>
     );
 };
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
index 7518e0d46a..858d4b95f0 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
@@ -9,7 +9,6 @@ import { FeatureStrategySegmentList } from 'component/feature/FeatureStrategy/Fe
 import { SegmentDocsStrategyWarning } from 'component/segments/SegmentDocs';
 import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
 import { Box, Divider, styled, Typography } from '@mui/material';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 interface IFeatureStrategySegmentProps {
@@ -37,8 +36,6 @@ export const FeatureStrategySegment = ({
     const { segments: allSegments } = useSegments();
     const { strategySegmentsLimit } = useSegmentLimits();
 
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
-
     const atStrategySegmentsLimit: boolean = Boolean(
         strategySegmentsLimit &&
             selectedSegments.length >= strategySegmentsLimit,
@@ -70,56 +67,34 @@ export const FeatureStrategySegment = ({
         }
     };
 
-    if (newStrategyConfiguration) {
-        return (
-            <>
-                <StyledHelpIconBox>
-                    <Typography>Segments</Typography>
-                    <HelpIcon
-                        htmlTooltip
-                        tooltip={
-                            <Box>
-                                <Typography variant='body2'>
-                                    Segments are reusable sets of constraints
-                                    that can be defined once and reused across
-                                    feature toggle configurations. You can
-                                    create a segment on the global or the
-                                    project level. Read more about segments{' '}
-                                    <a
-                                        href='https://docs.getunleash.io/reference/segments'
-                                        target='_blank'
-                                        rel='noopener noreferrer'
-                                    >
-                                        here
-                                    </a>
-                                </Typography>
-                            </Box>
-                        }
-                    />
-                </StyledHelpIconBox>
-
-                {atStrategySegmentsLimit && <SegmentDocsStrategyWarning />}
-                <AutocompleteBox
-                    label='Select segments'
-                    options={autocompleteOptions}
-                    onChange={onChange}
-                    disabled={atStrategySegmentsLimit}
-                />
-                <FeatureStrategySegmentList
-                    segments={selectedSegments}
-                    setSegments={setSelectedSegments}
-                />
-            </>
-        );
-    }
-
     return (
         <>
-            <Typography component='h3' sx={{ m: 0 }} variant='h3'>
-                Segmentation
-            </Typography>
+            <StyledHelpIconBox>
+                <Typography>Segments</Typography>
+                <HelpIcon
+                    htmlTooltip
+                    tooltip={
+                        <Box>
+                            <Typography variant='body2'>
+                                Segments are reusable sets of constraints that
+                                can be defined once and reused across feature
+                                toggle configurations. You can create a segment
+                                on the global or the project level. Read more
+                                about segments{' '}
+                                <a
+                                    href='https://docs.getunleash.io/reference/segments'
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                >
+                                    here
+                                </a>
+                            </Typography>
+                        </Box>
+                    }
+                />
+            </StyledHelpIconBox>
+
             {atStrategySegmentsLimit && <SegmentDocsStrategyWarning />}
-            <p>Add a predefined segment to constrain this feature toggle:</p>
             <AutocompleteBox
                 label='Select segments'
                 options={autocompleteOptions}
@@ -130,8 +105,6 @@ export const FeatureStrategySegment = ({
                 segments={selectedSegments}
                 setSegments={setSelectedSegments}
             />
-
-            <StyledDivider />
         </>
     );
 };
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
index 60e232a7ec..d459cb6764 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
@@ -3,16 +3,12 @@ import FeatureOverviewEnvironments from './FeatureOverviewEnvironments/FeatureOv
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import { FeatureStrategyCreate } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
-import {
-    FeatureStrategyEdit,
-    formatFeaturePath,
-} from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit';
+import { formatFeaturePath } from 'component/feature/FeatureStrategy/FeatureStrategyEdit/FeatureStrategyEdit';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { usePageTitle } from 'hooks/usePageTitle';
 import { FeatureOverviewSidePanel } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel';
 import { useHiddenEnvironments } from 'hooks/useHiddenEnvironments';
 import { styled } from '@mui/material';
-import { useUiFlag } from 'hooks/useUiFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { NewFeatureStrategyCreate } from 'component/feature/FeatureStrategy/NewFeatureStrategyCreate/NewFeatureStrategyCreate';
 import { NewFeatureStrategyEdit } from 'component/feature/FeatureStrategy/NewFeatureStrategyEdit/NewFeatureStrategyEdit';
@@ -44,8 +40,6 @@ const FeatureOverview = () => {
     const onSidebarClose = () => navigate(featurePath);
     usePageTitle(featureId);
 
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
-
     return (
         <StyledContainer>
             <div>
@@ -67,11 +61,7 @@ const FeatureOverview = () => {
                             onClose={onSidebarClose}
                             open
                         >
-                            <ConditionallyRender
-                                condition={newStrategyConfiguration}
-                                show={<NewFeatureStrategyCreate />}
-                                elseShow={<FeatureStrategyCreate />}
-                            />
+                            <NewFeatureStrategyCreate />
                         </SidebarModal>
                     }
                 />
@@ -83,11 +73,7 @@ const FeatureOverview = () => {
                             onClose={onSidebarClose}
                             open
                         >
-                            <ConditionallyRender
-                                condition={newStrategyConfiguration}
-                                show={<NewFeatureStrategyEdit />}
-                                elseShow={<FeatureStrategyEdit />}
-                            />
+                            <NewFeatureStrategyEdit />
                         </SidebarModal>
                     }
                 />
diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
index 4971c4192b..cfa80eb6c3 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, styled } from '@mui/material';
+import { Box, styled } from '@mui/material';
 import { IFeatureStrategyParameters } from 'interfaces/strategy';
 import RolloutSlider from '../RolloutSlider/RolloutSlider';
 import Input from 'component/common/Input/Input';
@@ -6,7 +6,6 @@ import {
     FLEXIBLE_STRATEGY_GROUP_ID,
     FLEXIBLE_STRATEGY_STICKINESS_ID,
 } from 'utils/testIds';
-import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import {
     parseParameterNumber,
     parseParameterString,
@@ -17,7 +16,6 @@ import Loader from '../../../common/Loader/Loader';
 import { useEffect, useMemo } from 'react';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { useLocation } from 'react-router';
-import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IFlexibleStrategyProps {
     parameters: IFeatureStrategyParameters;
@@ -60,8 +58,6 @@ const FlexibleStrategy = ({
     const { defaultStickiness, loading } = useDefaultProjectSettings(projectId);
     const { pathname } = useLocation();
 
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
-
     const isDefaultStrategyEdit = pathname.includes('default-strategy');
     const onUpdate = (field: string) => (newValue: string) => {
         updateParameter(field, newValue);
@@ -98,100 +94,37 @@ const FlexibleStrategy = ({
         return <Loader />;
     }
 
-    if (newStrategyConfiguration) {
-        return (
-            <StyledBox>
-                <RolloutSlider
-                    name='Rollout'
-                    value={rollout}
-                    disabled={!editable}
-                    onChange={updateRollout}
-                />
-                <StyledOuterBox>
-                    <StyledInnerBox1>
-                        <StickinessSelect
-                            label='Stickiness'
-                            value={stickiness}
-                            editable={editable}
-                            dataTestId={FLEXIBLE_STRATEGY_STICKINESS_ID}
-                            onChange={(e) =>
-                                onUpdate('stickiness')(e.target.value)
-                            }
-                        />
-                    </StyledInnerBox1>
-                    <StyledInnerBox2>
-                        <Input
-                            label='groupId'
-                            sx={{ width: '100%' }}
-                            id='groupId-input'
-                            value={parseParameterString(parameters.groupId)}
-                            disabled={!editable}
-                            onChange={(e) =>
-                                onUpdate('groupId')(e.target.value)
-                            }
-                            data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
-                        />
-                    </StyledInnerBox2>
-                </StyledOuterBox>
-            </StyledBox>
-        );
-    }
-
     return (
-        <div>
+        <StyledBox>
             <RolloutSlider
                 name='Rollout'
                 value={rollout}
                 disabled={!editable}
                 onChange={updateRollout}
             />
-
-            <br />
-            <div>
-                <Typography
-                    variant='subtitle2'
-                    style={{
-                        marginBottom: '1rem',
-                        display: 'flex',
-                        gap: '1ch',
-                    }}
-                    component='h2'
-                >
-                    Stickiness
-                    <HelpIcon tooltip='Stickiness defines what parameter should be used to ensure that your users get consistency in features. By default unleash will use the first value present in the context in the order of userId, sessionId and random.' />
-                </Typography>
-                <StickinessSelect
-                    label='Stickiness'
-                    value={stickiness}
-                    editable={editable}
-                    dataTestId={FLEXIBLE_STRATEGY_STICKINESS_ID}
-                    onChange={(e) => onUpdate('stickiness')(e.target.value)}
-                />
-                &nbsp;
-                <br />
-                <br />
-                <Typography
-                    variant='subtitle2'
-                    style={{
-                        marginBottom: '1rem',
-                        display: 'flex',
-                        gap: '1ch',
-                    }}
-                    component='h2'
-                >
-                    GroupId
-                    <HelpIcon tooltip='GroupId is used to ensure that different toggles will hash differently for the same user. The groupId defaults to feature toggle name, but you can override it to correlate rollout of multiple feature toggles.' />
-                </Typography>
-                <Input
-                    label='groupId'
-                    id='groupId-input'
-                    value={parseParameterString(parameters.groupId)}
-                    disabled={!editable}
-                    onChange={(e) => onUpdate('groupId')(e.target.value)}
-                    data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
-                />
-            </div>
-        </div>
+            <StyledOuterBox>
+                <StyledInnerBox1>
+                    <StickinessSelect
+                        label='Stickiness'
+                        value={stickiness}
+                        editable={editable}
+                        dataTestId={FLEXIBLE_STRATEGY_STICKINESS_ID}
+                        onChange={(e) => onUpdate('stickiness')(e.target.value)}
+                    />
+                </StyledInnerBox1>
+                <StyledInnerBox2>
+                    <Input
+                        label='groupId'
+                        sx={{ width: '100%' }}
+                        id='groupId-input'
+                        value={parseParameterString(parameters.groupId)}
+                        disabled={!editable}
+                        onChange={(e) => onUpdate('groupId')(e.target.value)}
+                        data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
+                    />
+                </StyledInnerBox2>
+            </StyledOuterBox>
+        </StyledBox>
     );
 };
 
diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
index e60005464d..3057446d06 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
@@ -1,7 +1,6 @@
 import Select from 'component/common/select';
 import { SelectChangeEvent, useTheme } from '@mui/material';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
-import { useUiFlag } from 'hooks/useUiFlag';
 
 type OptionType = { key: string; label: string };
 
@@ -23,7 +22,6 @@ export const StickinessSelect = ({
     dataTestId,
 }: IStickinessSelectProps) => {
     const { context } = useUnleashContext();
-    const newStrategyConfiguration = useUiFlag('newStrategyConfiguration');
     const theme = useTheme();
 
     const resolveStickinessOptions = () => {
@@ -53,9 +51,6 @@ export const StickinessSelect = ({
         return options;
     };
 
-    // newStrategyConfiguration - Temporary check for backwards compatibility
-    const formControlStyles = newStrategyConfiguration ? { width: '100%' } : {};
-
     const stickinessOptions = resolveStickinessOptions();
     return (
         <Select
@@ -71,7 +66,7 @@ export const StickinessSelect = ({
                 minWidth: '100%',
                 marginBottom: theme.spacing(2),
             }}
-            formControlStyles={formControlStyles}
+            formControlStyles={{ width: '100%' }}
         />
     );
 };
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index 713d0c8b2e..860648aa2a 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/src/lib/__snapshots__/create-config.test.ts.snap
@@ -129,7 +129,6 @@ exports[`should create default config 1`] = `
         },
       },
       "migrationLock": true,
-      "newStrategyConfiguration": false,
       "newStrategyConfigurationFeedback": false,
       "personalAccessTokensKillSwitch": false,
       "proPlanAutoCharge": false,
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index 40b79313fe..2d11ebe6f0 100644
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@@ -28,7 +28,6 @@ export type IFlagKey =
     | 'disableMetrics'
     | 'scheduledConfigurationChanges'
     | 'stripClientHeadersOn304'
-    | 'newStrategyConfiguration'
     | 'stripHeadersOnAPI'
     | 'incomingWebhooks'
     | 'automatedActions'
@@ -139,10 +138,6 @@ const flags: IFlags = {
             .UNLEASH_EXPERIMENTAL_DETECT_SEGMENT_USAGE_IN_CHANGE_REQUESTS,
         false,
     ),
-    newStrategyConfiguration: parseEnvVarBoolean(
-        process.env.UNLEASH_EXPERIMENTAL_NEW_STRATEGY_CONFIGURATION,
-        false,
-    ),
     incomingWebhooks: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_INCOMING_WEBHOOKS,
         false,
diff --git a/src/server-dev.ts b/src/server-dev.ts
index 092ed215a6..addfab74fa 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -41,7 +41,6 @@ process.nextTick(async () => {
                         anonymiseEventLog: false,
                         responseTimeWithAppNameKillSwitch: false,
                         stripClientHeadersOn304: true,
-                        newStrategyConfiguration: true,
                         stripHeadersOnAPI: true,
                         celebrateUnleash: true,
                         increaseUnleashWidth: true,