feat: strategy variants infop (#4348)

<!-- 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? -->

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) => (