Hide metrics tab and url behind a flag

Author: kagora-akamai

packages/manager/src/featureFlags.ts

@@ -134,6 +134,10 @@ interface AclpLogsFlag extends BetaFeatureFlag {
    * This property indicates whether to show Custom HTTPS destination type
    */
   customHttpsEnabled?: boolean;
+  /**
+   * This property indicates whether to show the "Metrics" tab on Logs Stream details page or not
+   */
+  metricsEnabled?: boolean;
   /**
    * This property indicates whether the feature is new or not
    */

packages/manager/src/features/Delivery/Streams/Stream/StreamLanding.tsx

@@ -1,5 +1,6 @@
 import { useParams } from '@tanstack/react-router';
 import * as React from 'react';
+import { useMemo } from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import {
@@ -11,25 +12,38 @@ import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { TanStackTabLinkList } from 'src/components/Tabs/TanStackTabLinkList';
+import { useIsACLPLogsEnabled } from 'src/features/Delivery/deliveryUtils';
 import { StreamMetrics } from 'src/features/Delivery/Streams/Stream/StreamMetrics';
 import { StreamEdit } from 'src/features/Delivery/Streams/StreamForm/StreamEdit';
 import { useTabs } from 'src/hooks/useTabs';
 
+import type { Tab } from 'src/hooks/useTabs';
+
 export const StreamLanding = () => {
   const { streamId } = useParams({
     strict: false,
   });
+  const { isACLPLogsMetricsEnabled } = useIsACLPLogsEnabled();
 
-  const { handleTabChange, tabIndex, tabs } = useTabs([
-    {
-      title: 'Summary',
-      to: `/logs/delivery/streams/$streamId/summary`,
-    },
-    {
-      title: 'Metrics',
-      to: `/logs/delivery/streams/$streamId/metrics`,
-    },
-  ]);
+  const activeTabs = useMemo(() => {
+    const result: Tab[] = [
+      {
+        title: 'Summary',
+        to: `/logs/delivery/streams/$streamId/summary`,
+      },
+    ];
+
+    if (isACLPLogsMetricsEnabled) {
+      result.push({
+        title: 'Metrics',
+        to: `/logs/delivery/streams/$streamId/metrics`,
+      });
+    }
+
+    return result;
+  }, [isACLPLogsMetricsEnabled]);
+
+  const { handleTabChange, tabIndex, tabs } = useTabs(activeTabs);
 
   const landingHeaderProps: LandingHeaderProps = {
     breadcrumbProps: {

packages/manager/src/features/Delivery/deliveryUtils.ts

@@ -39,6 +39,7 @@ export const useIsACLPLogsEnabled = (): {
   isACLPLogsBeta: boolean;
   isACLPLogsCustomHttpsEnabled: boolean;
   isACLPLogsEnabled: boolean;
+  isACLPLogsMetricsEnabled: boolean;
   isACLPLogsNew: boolean;
 } => {
   const { data: account } = useAccount();
@@ -55,6 +56,7 @@ export const useIsACLPLogsEnabled = (): {
   return {
     isACLPLogsBeta: !!flags.aclpLogs?.beta,
     isACLPLogsCustomHttpsEnabled: !!flags.aclpLogs?.customHttpsEnabled,
+    isACLPLogsMetricsEnabled: !!flags.aclpLogs?.metricsEnabled,
     isACLPLogsNew: !!flags.aclpLogs?.new,
     isACLPLogsEnabled,
   };

packages/manager/src/routes/delivery/index.ts

@@ -92,6 +92,15 @@ const streamSummaryRoute = createRoute({
 );
 
 const streamMetricsRoute = createRoute({
+  beforeLoad: ({ params, context }) => {
+    if (!context?.flags?.aclpLogs?.metricsEnabled) {
+      throw redirect({
+        to: '/logs/delivery/streams/$streamId/summary',
+        params: { streamId: params.streamId },
+        replace: true,
+      });
+    }
+  },
   getParentRoute: () => streamRoute,
   path: 'metrics',
 }).lazy(() =>