From b34f00c2cb28d15e248556b80b128a6d6c9132e6 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 31 Jul 2023 12:26:12 +0200
Subject: [PATCH] feat: strategy variants alert (#4371)

---
 .../StrategyVariantsUpgradeAlert.tsx          | 22 +++++++++++++++++++
 .../StrategyTypes/StrategyVariants.tsx        |  8 +++----
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert.tsx

diff --git a/frontend/src/component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert.tsx b/frontend/src/component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert.tsx
new file mode 100644
index 0000000000..cc579e1ff7
--- /dev/null
+++ b/frontend/src/component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert.tsx
@@ -0,0 +1,22 @@
+import { Alert } from '@mui/material';
+
+export const StrategyVariantsUpgradeAlert = () => {
+    return (
+        <Alert severity="warning" sx={{ mb: 3 }}>
+            Remember to update your Unleash client! Strategy variants require
+            new SDK versions. <DocsLink />.
+        </Alert>
+    );
+};
+
+const DocsLink = () => {
+    return (
+        <a
+            href="https://docs.getunleash.io/reference/feature-strategy-variants#client-sdk-support"
+            target="_blank"
+            rel="noreferrer"
+        >
+            Read more
+        </a>
+    );
+};
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
index c89d0450a8..330f720f95 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
@@ -7,11 +7,12 @@ 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, Link } from '@mui/material';
+import { Link, styled, Typography, useTheme } from '@mui/material';
 import { useRequiredQueryParam } from 'hooks/useRequiredQueryParam';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import SplitPreviewSlider from './SplitPreviewSlider/SplitPreviewSlider';
 import { HelpIcon } from '../../common/HelpIcon/HelpIcon';
+import { StrategyVariantsUpgradeAlert } from '../../common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert';
 
 const StyledVariantForms = styled('div')({
     display: 'flex',
@@ -100,9 +101,7 @@ export const StrategyVariants: FC<{
                             <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.{' '}
+                                override variants at the feature level.
                             </span>
                             <Link
                                 target="_blank"
@@ -115,6 +114,7 @@ export const StrategyVariants: FC<{
                 />
             </Typography>
             <StyledVariantForms>
+                <StrategyVariantsUpgradeAlert />
                 {variantsEdit.map((variant, i) => (
                     <VariantForm
                         disableOverrides={true}