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.

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));

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;

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,

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,