From 91d318a495da7aa79b9f7fae550263c080e832b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Wed, 29 Jan 2025 15:39:02 +0000
Subject: [PATCH] chore: add hint to release plan template gradual rollout
 strategy groupId (#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)
---
 .../MilestoneStrategyTypeFlexible.tsx          | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyTypeFlexible.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyTypeFlexible.tsx
index 07b3d48a0d..ce132935d6 100644
--- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyTypeFlexible.tsx
+++ b/frontend/src/component/releases/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>