feat: deprecate feature toggle variants at environment level (#7058)

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

@@ -48,6 +48,8 @@ import { ReactComponent as ParentLinkIcon } from 'assets/icons/link-parent.svg';
 import { ChildrenTooltip } from './FeatureOverview/FeatureOverviewMetaData/ChildrenTooltip';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
+import { useUiFlag } from 'hooks/useUiFlag';
+import type { IFeatureToggle } from 'interfaces/featureToggle';
 
 const StyledHeader = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
@@ -133,6 +135,14 @@ export const StyledLink = styled(Link)(({ theme }) => ({
     },
 }));
 
+const useLegacyVariants = (environments: IFeatureToggle['environments']) => {
+    const enableLegacyVariants = useUiFlag('enableLegacyVariants');
+    const existingLegacyVariantsExist = environments.some(
+        (environment) => environment.variants?.length,
+    );
+    return enableLegacyVariants || existingLegacyVariantsExist;
+};
+
 export const FeatureView = () => {
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
@@ -157,6 +167,8 @@ export const FeatureView = () => {
 
     const basePath = `/projects/${projectId}/features/${featureId}`;
 
+    const showLegacyVariants = useLegacyVariants(feature.environments);
+
     const tabData = [
         {
             title: 'Overview',
@@ -168,7 +180,15 @@ export const FeatureView = () => {
             path: `${basePath}/metrics`,
             name: 'Metrics',
         },
-        { title: 'Variants', path: `${basePath}/variants`, name: 'Variants' },
+        ...(showLegacyVariants
+            ? [
+                  {
+                      title: 'Variants',
+                      path: `${basePath}/variants`,
+                      name: 'Variants',
+                  },
+              ]
+            : []),
         { title: 'Settings', path: `${basePath}/settings`, name: 'Settings' },
         {
             title: 'Event log',

frontend/src/interfaces/uiConfig.ts

@@ -85,6 +85,7 @@ export type UiFlags = {
     projectsListNewCards?: boolean;
     newCreateProjectUI?: boolean;
     manyStrategiesPagination?: boolean;
+    enableLegacyVariants?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -93,6 +93,7 @@ exports[`should create default config 1`] = `
       "edgeBulkMetrics": false,
       "embedProxy": true,
       "embedProxyFrontend": true,
+      "enableLegacyVariants": false,
       "enableLicense": false,
       "enableLicenseChecker": false,
       "encryptEmails": false,

src/lib/types/experimental.ts

@@ -60,7 +60,8 @@ export type IFlagKey =
     | 'parseProjectFromSession'
     | 'createProjectWithEnvironmentConfig'
     | 'manyStrategiesPagination'
-    | 'newCreateProjectUI';
+    | 'newCreateProjectUI'
+    | 'enableLegacyVariants';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -289,6 +290,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_MANY_STRATEGIES_PAGINATION,
         false,
     ),
+    enableLegacyVariants: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_ENABLE_LEGACY_VARIANTS,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -55,6 +55,7 @@ process.nextTick(async () => {
                         parseProjectFromSession: true,
                         createProjectWithEnvironmentConfig: true,
                         manyStrategiesPagination: true,
+                        enableLegacyVariants: false,
                     },
                 },
                 authentication: {

website/docs/reference/feature-toggle-variants.md

@@ -1,6 +1,14 @@
 ---
-title: Feature Toggle Variants
+title: Feature Toggle Variants (deprecated)
 ---
+:::warning
+
+Feature Toggle Variants at the environment level are deprecated in favor of the [strategy variants](./strategy-variants.md). 
+Only features that have existing feature environment variants will keep them. 
+If you'd like to keep the old variants in your hosted instance [contact us](https://slack.unleash.run) for further assistance.
+
+:::
+
 :::info Availability
 
 **Feature toggle variants** were first introduced in Unleash 3.2.