From 733159b8ec6e515a16066cb6c7fecaf54a2a8636 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 27 Jul 2023 09:12:30 +0200
Subject: [PATCH] feat: strategy variants infop (#4348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Thanks for creating a PR! To make it easier for reviewers and
everyone else to understand what your changes relate to, please add some
relevant content to the headings below. Feel free to ignore or delete
sections that you don't think are relevant. Thank you! ❤️ -->

## About the changes

Strategy variants info and link to docs.

Added short info about what variants allow to do, how strategy variants
relate to the feature variants, that modern SDK is required and link to
docs.

<img width="727" alt="Screenshot 2023-07-26 at 14 51 06"
src="https://github.com/Unleash/unleash/assets/1394682/6d5f8a3e-ca3e-434b-a2e7-a23861875cc5">


### Important files
<!-- PRs can contain a lot of changes, but not all changes are equally
important. Where should a reviewer start looking to get an overview of
the changes? Are any files particularly important? -->


## Discussion points
<!-- Anything about the PR you'd like to discuss before it gets merged?
Got any questions or doubts? -->
---
 .../StrategyTypes/StrategyVariants.tsx        | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
index d6e6ad2e54..c89d0450a8 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
@@ -7,10 +7,11 @@ import { UPDATE_FEATURE_ENVIRONMENT_VARIANTS } from '../../providers/AccessProvi
 import { v4 as uuidv4 } from 'uuid';
 import { WeightType } from '../../../constants/variantTypes';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
-import { styled, Typography, useTheme } from '@mui/material';
+import { styled, Typography, useTheme, Link } from '@mui/material';
 import { useRequiredQueryParam } from 'hooks/useRequiredQueryParam';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import SplitPreviewSlider from './SplitPreviewSlider/SplitPreviewSlider';
+import { HelpIcon } from '../../common/HelpIcon/HelpIcon';
 
 const StyledVariantForms = styled('div')({
     display: 'flex',
@@ -86,8 +87,32 @@ export const StrategyVariants: FC<{
 
     return (
         <>
-            <Typography component="h3" sx={{ m: 0 }} variant="h3">
+            <Typography
+                component="h3"
+                sx={{ m: 0, display: 'flex', gap: '1ch' }}
+                variant="h3"
+            >
                 Variants
+                <HelpIcon
+                    htmlTooltip={true}
+                    tooltip={
+                        <>
+                            <span>
+                                Variants allow to attach one or more values to
+                                this strategy. Variants at the strategy level
+                                override variants at the feature level. Make
+                                sure to use recent SDK that supports strategy
+                                variants.{' '}
+                            </span>
+                            <Link
+                                target="_blank"
+                                href="https://docs.getunleash.io/reference/feature-strategy-variants"
+                            >
+                                Learn more
+                            </Link>
+                        </>
+                    }
+                />
             </Typography>
             <StyledVariantForms>
                 {variantsEdit.map((variant, i) => (