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

fix: strategy parameters UI (#7713)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
View File

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

1
frontend/src/component/feature/FeatureStrategy/FeatureStrategyType/FeatureStrategyType.tsx
View File

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

2
frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.test.tsx
View File

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

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

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