From b701941be7b58e009856baa8ff9e8a404b848aa6 Mon Sep 17 00:00:00 2001
From: David Leek <david@getunleash.io>
Date: Thu, 11 Apr 2024 15:22:13 +0200
Subject: [PATCH] chore(ui): add a separate feature flag for traffic visibility
 UI (#6832) (#6835)

## About the changes

cherry-picks adding the UI-flag for traffic visibility to 5.11

We're splitting the original `collectTrafficDataUsage` in two, one for
data collection and the new one introduced here is to allow the UI.

Showing the UI makes no sense if we haven't been collecting data, but
starting to collect data makes sense without showing the UI (docs,
training/information etc needed when showing the UI for enterprise
users), so the feature flag in Unleash is set to depend on data
collecting flag being enabled.
---
 .../network/NetworkTrafficUsage/NetworkTrafficUsage.tsx      | 2 +-
 frontend/src/interfaces/uiConfig.ts                          | 2 +-
 src/lib/__snapshots__/create-config.test.ts.snap             | 1 +
 src/lib/types/experimental.ts                                | 5 +++++
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
index b7172e819b6..03c02bdcfbd 100644
--- a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
+++ b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
@@ -322,7 +322,7 @@ export const NetworkTrafficUsage: VFC = () => {
     };
 
     const { isOss } = useUiConfig();
-    const flagEnabled = useUiFlag('collectTrafficDataUsage');
+    const flagEnabled = useUiFlag('displayTrafficDataUsage');
 
     useEffect(() => {
         setDatasets(toChartData(labels, traffic, endpointsInfo));
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 5d215b95fc5..5280a007b28 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/frontend/src/interfaces/uiConfig.ts
@@ -76,7 +76,7 @@ export type UiFlags = {
     userAccessUIEnabled?: boolean;
     outdatedSdksBanner?: boolean;
     projectOverviewRefactor?: string;
-    collectTrafficDataUsage?: boolean;
+    displayTrafficDataUsage?: boolean;
     disableShowContextFieldSelectionValues?: boolean;
     variantDependencies?: boolean;
     projectOverviewRefactorFeedback?: boolean;
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index ce03a4b6fbd..7f6ee2a33d2 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/src/lib/__snapshots__/create-config.test.ts.snap
@@ -89,6 +89,7 @@ exports[`should create default config 1`] = `
       "disableShowContextFieldSelectionValues": false,
       "disableUpdateMaxRevisionId": false,
       "displayEdgeBanner": false,
+      "displayTrafficDataUsage": false,
       "edgeBulkMetrics": false,
       "embedProxy": true,
       "embedProxyFrontend": true,
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index 826783c19e6..78b86dd143f 100644
--- a/src/lib/types/experimental.ts
+++ b/src/lib/types/experimental.ts
@@ -42,6 +42,7 @@ export type IFlagKey =
     | 'showInactiveUsers'
     | 'inMemoryScheduledChangeRequests'
     | 'collectTrafficDataUsage'
+    | 'displayTrafficDataUsage'
     | 'useMemoizedActiveTokens'
     | 'queryMissingTokens'
     | 'userAccessUIEnabled'
@@ -226,6 +227,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_COLLECT_TRAFFIC_DATA_USAGE,
         false,
     ),
+    displayTrafficDataUsage: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_DISPLAY_TRAFFIC_DATA_USAGE,
+        false,
+    ),
     userAccessUIEnabled: parseEnvVarBoolean(
         process.env.UNLEASH_EXPERIMENTAL_USER_ACCESS_UI_ENABLED,
         false,