feat: pointer to strategy variants (#4440)

frontend/src/component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert.tsx

@@ -4,12 +4,21 @@ export const StrategyVariantsUpgradeAlert = () => {
     return (
         <Alert severity="warning" sx={{ mb: 3 }}>
             Remember to update your Unleash client! Strategy variants require
-            new SDK versions. <DocsLink />.
+            new SDK versions. <DocsSdkSupportLink />.
         </Alert>
     );
 };
 
-const DocsLink = () => {
+export const StrategyVariantsPreferredAlert = () => {
+    return (
+        <Alert severity="warning" sx={{ mb: 4 }}>
+            If you want advanced targeting capabilities you should use{' '}
+            <b>variants inside strategies</b>. <DocsLink />
+        </Alert>
+    );
+};
+
+const DocsSdkSupportLink = () => {
     return (
         <a
             href="https://docs.getunleash.io/reference/feature-strategy-variants#client-sdk-support"
@@ -20,3 +29,15 @@ const DocsLink = () => {
         </a>
     );
 };
+
+const DocsLink = () => {
+    return (
+        <a
+            href="https://docs.getunleash.io/reference/feature-strategy-variants"
+            target="_blank"
+            rel="noreferrer"
+        >
+            Read more
+        </a>
+    );
+};

frontend/src/component/common/VariantInfoAlert/VariantInfoAlert.tsx

@@ -0,0 +1,23 @@
+import { Alert, styled } from '@mui/material';
+import { FC } from 'react';
+
+const StyledAlert = styled(Alert)(({ theme }) => ({
+    marginBottom: theme.spacing(2),
+    '& code': {
+        fontWeight: theme.fontWeight.bold,
+    },
+}));
+export const VariantInfoAlert: FC<{ mode: 'feature' | 'strategy' }> = ({
+    mode,
+}) => {
+    return (
+        <StyledAlert severity="info">
+            Variant allows you to return a variant object if the{' '}
+            {mode === 'feature'
+                ? 'feature toggle is considered enabled '
+                : 'this strategy is active '}
+            for the current request. When using variants you should use the{' '}
+            <code>getVariant()</code> method in the Client SDK.
+        </StyledAlert>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/EnvironmentVariantsModal.tsx

@@ -324,7 +324,7 @@ export const EnvironmentVariantsModal = ({
             <FormTemplate
                 modal
                 title=""
-                description="Variants allows you to return a variant object if the feature toggle is considered enabled for the current request."
+                description="Variants allow you to return a variant object if the feature toggle is considered enabled for the current request."
                 documentationLink="https://docs.getunleash.io/reference/feature-toggle-variants"
                 documentationLinkLabel="Feature toggle variants documentation"
                 formatApiCode={formatApiCode}

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/FeatureEnvironmentVariants.tsx

@@ -1,6 +1,6 @@
 import * as jsonpatch from 'fast-json-patch';
 
-import { Alert, styled, useMediaQuery, useTheme } from '@mui/material';
+import { styled, useMediaQuery, useTheme } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
@@ -27,13 +27,9 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { Edit } from '@mui/icons-material';
-
-const StyledAlert = styled(Alert)(({ theme }) => ({
-    marginBottom: theme.spacing(4),
-    '& code': {
-        fontWeight: theme.fontWeight.bold,
-    },
-}));
+import { VariantInfoAlert } from 'component/common/VariantInfoAlert/VariantInfoAlert';
+import { StrategyVariantsPreferredAlert } from 'component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const StyledButtonContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -41,6 +37,7 @@ const StyledButtonContainer = styled('div')(({ theme }) => ({
 }));
 
 export const FeatureEnvironmentVariants = () => {
+    const { uiConfig } = useUiConfig();
     const { setToastData, setToastApiError } = useToast();
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
@@ -269,12 +266,12 @@ export const FeatureEnvironmentVariants = () => {
                 </PageHeader>
             }
         >
-            <StyledAlert severity="info">
-                Variants allows you to return a variant object if the feature
-                toggle is considered enabled for the current request. When using
-                variants you should use the <code>getVariant()</code> method in
-                the Client SDK.
-            </StyledAlert>
+            <VariantInfoAlert mode="feature" />
+            <ConditionallyRender
+                condition={Boolean(uiConfig?.flags?.strategyVariant)}
+                show={<StrategyVariantsPreferredAlert />}
+            />
+
             {environments.map(environment => {
                 const otherEnvsWithVariants = environments.filter(
                     ({ name, variants }) =>

frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx

@@ -12,6 +12,7 @@ import SplitPreviewSlider from './SplitPreviewSlider/SplitPreviewSlider';
 import { HelpIcon } from '../../common/HelpIcon/HelpIcon';
 import { StrategyVariantsUpgradeAlert } from '../../common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { VariantInfoAlert } from '../../common/VariantInfoAlert/VariantInfoAlert';
 
 const StyledVariantForms = styled('div')({
     display: 'flex',
@@ -119,6 +120,7 @@ export const StrategyVariants: FC<{
                 />
             </Typography>
             <StyledVariantForms>
+                <VariantInfoAlert mode="strategy" />
                 <StrategyVariantsUpgradeAlert />
                 {variantsEdit.map((variant, i) => (
                     <VariantForm