chore: add hint to release plan template gradual rollout strategy gro…

…upId (#9171) https://linear.app/unleash/issue/2-3101/ui-hint-for-gradual-rollout-groupid-magic-string-featurename Explains the current release plan milestone gradual rollout strategy groupId behavior with an HelpIcon and a tooltip next to the field, when creating or editing a release plan template. ![image](https://github.com/user-attachments/assets/46f3d943-d9cf-4670-b05b-322c14401a19)
Unleash · Jan 29, 2025 · 91d318a · 91d318a
1 parent 08c016b
commit 91d318a
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/...ases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyTypeFlexible.tsx b/...ases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyTypeFlexible.tsx
@@ -9,6 +9,7 @@ import {
     parseParameterString,
 } from 'utils/parseParameter';
 import Input from 'component/common/Input/Input';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 interface IMilestoneStrategyTypeFlexibleProps {
     parameters: IFeatureStrategyParameters;
@@ -38,8 +39,15 @@ const StyledInnerBox1 = styled(Box)(({ theme }) => ({
 }));
 
 const StyledInnerBox2 = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
     width: '50%',
     marginLeft: theme.spacing(0.5),
+    marginBottom: theme.spacing(2),
+    '& > div': {
+        flex: 1,
+    },
 }));
 
 const DEFAULT_STICKINESS = 'default';
@@ -104,6 +112,16 @@ export const MilestoneStrategyTypeFlexible = ({
                         error={Boolean(errors?.getFormError('groupId'))}
                         helperText={errors?.getFormError('groupId')}
                     />
+                    <HelpIcon
+                        htmlTooltip
+                        tooltip={
+                            <>
+                                Supports <strong>{'{{featureName}}'}</strong> as
+                                a template variable. If not set, defaults to the
+                                feature flag name.
+                            </>
+                        }
+                    />
                 </StyledInnerBox2>
             </StyledOuterBox>
         </StyledBox>