From 88e3b1b79efc0954951a4ee270483c1fd2bf97dc Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 16 May 2024 10:57:32 +0200
Subject: [PATCH] feat: deprecate feature toggle variants at environment level
 (#7058)

---
 .../feature/FeatureView/FeatureView.tsx       | 22 ++++++++++++++++++-
 frontend/src/interfaces/uiConfig.ts           |  1 +
 .../__snapshots__/create-config.test.ts.snap  |  1 +
 src/lib/types/experimental.ts                 |  7 +++++-
 src/server-dev.ts                             |  1 +
 .../docs/reference/feature-toggle-variants.md | 10 ++++++++-
 6 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 64df266621..9b0ea3b1f1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/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',
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index a4e1ab3957..f409a21881 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -85,6 +85,7 @@ export type UiFlags = {
     projectsListNewCards?: boolean;
     newCreateProjectUI?: boolean;
     manyStrategiesPagination?: boolean;
+    enableLegacyVariants?: boolean;
 };
 
 export interface IVersionInfo {
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index 1418f441c5..8f461efba6 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/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,
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index d9eec1c785..be5faa9942 100644
--- a/src/lib/types/experimental.ts
+++ b/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 = {
diff --git a/src/server-dev.ts b/src/server-dev.ts
index dac91205ad..aee1a815f0 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -55,6 +55,7 @@ process.nextTick(async () => {
                         parseProjectFromSession: true,
                         createProjectWithEnvironmentConfig: true,
                         manyStrategiesPagination: true,
+                        enableLegacyVariants: false,
                     },
                 },
                 authentication: {
diff --git a/website/docs/reference/feature-toggle-variants.md b/website/docs/reference/feature-toggle-variants.md
index 4abf8d45a3..f8a3937b3e 100644
--- a/website/docs/reference/feature-toggle-variants.md
+++ b/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.