1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

fix: strategy parameters UI (#7713)

Old versions of Unleash allow for creating "Gradual Rollout" strategies
without `groupId` or `stickiness`. UI will now populate those fields,
not getting stuck when editing strategies without said fields.
This commit is contained in:
Tymoteusz Czech 2024-08-02 11:11:58 +02:00 committed by GitHub
parent 2d0fb765f0
commit a676b1bc20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 11 deletions

View File

@ -345,8 +345,9 @@ export const FeatureStrategyForm = ({
return constraintCount + segmentCount;
};
const showVariants =
strategy.parameters && 'stickiness' in strategy.parameters;
const showVariants = Boolean(
strategy.parameters && 'stickiness' in strategy.parameters,
);
return (
<>
@ -527,10 +528,7 @@ export const FeatureStrategyForm = ({
condition={tab === 2}
show={
<ConditionallyRender
condition={
strategy.parameters != null &&
'stickiness' in strategy.parameters
}
condition={showVariants}
show={StrategyVariants}
/>
}

View File

@ -49,6 +49,7 @@ export const FeatureStrategyType = ({
parameters={strategy.parameters ?? {}}
updateParameter={updateParameter}
editable={hasAccess}
errors={errors}
/>
);
case 'userWithId':

View File

@ -29,7 +29,7 @@ test('manipulates the rollout slider', async () => {
return (
<Routes>
<Route
path='/projects/:projectId/features/:featureName'
path='/projects/:projectId/features/:featureId'
element={
<FlexibleStrategy
parameters={parameters}

View File

@ -16,12 +16,14 @@ import Loader from '../../../common/Loader/Loader';
import { useEffect, useMemo } from 'react';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { useLocation } from 'react-router';
import type { IFormErrors } from 'hooks/useFormErrors';
interface IFlexibleStrategyProps {
parameters: IFeatureStrategyParameters;
updateParameter: (field: string, value: string) => void;
context: any;
editable: boolean;
errors?: IFormErrors;
}
const StyledBox = styled(Box)(({ theme }) => ({
@ -53,8 +55,10 @@ const FlexibleStrategy = ({
updateParameter,
parameters,
editable = true,
errors,
}: IFlexibleStrategyProps) => {
const projectId = useRequiredPathParam('projectId');
const featureId = useRequiredPathParam('featureId');
const { defaultStickiness, loading } = useDefaultProjectSettings(projectId);
const { pathname } = useLocation();
@ -77,7 +81,7 @@ const FlexibleStrategy = ({
return defaultStickiness;
}
return parseParameterString(parameters.stickiness);
return parseParameterString(parameters.stickiness || defaultStickiness);
}, [loading, parameters.stickiness]);
if (parameters.stickiness === '') {
@ -85,10 +89,10 @@ const FlexibleStrategy = ({
}
useEffect(() => {
if (isDefaultStrategyEdit && !parameters.groupId) {
onUpdate('groupId')('');
if (!parameters.groupId) {
onUpdate('groupId')(isDefaultStrategyEdit ? '' : featureId);
}
}, [isDefaultStrategyEdit]);
}, [isDefaultStrategyEdit, featureId]);
if (loading) {
return <Loader />;
@ -121,6 +125,8 @@ const FlexibleStrategy = ({
disabled={!editable}
onChange={(e) => onUpdate('groupId')(e.target.value)}
data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
error={Boolean(errors?.getFormError('groupId'))}
helperText={errors?.getFormError('groupId')}
/>
</StyledInnerBox2>
</StyledOuterBox>