Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

chore: remove new strategy configuration flag (#6335)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-02-27 11:23:49 +01:00 committed by GitHub
parent e9603f866b
commit c049374a25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 166 additions and 478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeActions.tsx
View File

@ -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>
}

68
frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EditChange.tsx
View File

@ -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,
)}
/>
}
/>

68
frontend/src/component/changeRequest/ChangeRequest/Changes/Change/NewEditChange.tsx
View File

@ -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,
)}
/>
}
/>

38
frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
View File

@ -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'

126
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx
View File

@ -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'

46
frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled.tsx
View File

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

77
frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
View File

@ -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 />
</>
);
};

20
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
View File

@ -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>
}
/>

117
frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
View File

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

7
frontend/src/component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect.tsx
View File

@ -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%' }}
/>
);
};

1
src/lib/__snapshots__/create-config.test.ts.snap
View File

@ -129,7 +129,6 @@ exports[`should create default config 1`] = `
},
},
"migrationLock": true,
"newStrategyConfiguration": false,
"newStrategyConfigurationFeedback": false,
"personalAccessTokensKillSwitch": false,
"proPlanAutoCharge": false,

5
src/lib/types/experimental.ts
View File

@ -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,

1
src/server-dev.ts
View File

@ -41,7 +41,6 @@ process.nextTick(async () => {
anonymiseEventLog: false,
responseTimeWithAppNameKillSwitch: false,
stripClientHeadersOn304: true,
newStrategyConfiguration: true,
stripHeadersOnAPI: true,
celebrateUnleash: true,
increaseUnleashWidth: true,