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.test.tsx

@@ -0,0 +1,74 @@
+import { screen } from '@testing-library/react';
+import * as React from 'react';
+import { beforeEach, describe, it } from 'vitest';
+
+import {
+  akamaiObjectStorageDestinationFactory,
+  streamFactory,
+} from 'src/factories';
+import { StreamLanding } from 'src/features/Delivery/Streams/Stream/StreamLanding';
+import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import type { Flags } from 'src/featureFlags';
+
+const streamId = 123;
+const mockDestinations = [
+  akamaiObjectStorageDestinationFactory.build({ id: 1 }),
+];
+const mockStream = streamFactory.build({
+  id: streamId,
+  label: `Stream ${streamId}`,
+  destinations: mockDestinations,
+});
+
+describe('StreamLanding', () => {
+  const renderComponent = (flags: Partial<Flags>) => {
+    renderWithTheme(<StreamLanding />, {
+      flags,
+      initialRoute: '/logs/delivery/streams/$streamId/summary',
+    });
+  };
+
+  beforeEach(async () => {
+    server.use(
+      http.get(`*/monitor/streams/${streamId}`, () => {
+        return HttpResponse.json(mockStream);
+      })
+    );
+  });
+
+  describe('and metrics are not enabled', () => {
+    const flags = {
+      aclpLogs: {
+        enabled: true,
+        beta: false,
+        metricsEnabled: false,
+      },
+    };
+
+    it('should render the summary and not the metrics tab', async () => {
+      renderComponent(flags);
+
+      screen.getByText('Summary');
+      expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('and metrics are enabled', () => {
+    const flags = {
+      aclpLogs: {
+        enabled: true,
+        beta: false,
+        metricsEnabled: true,
+      },
+    };
+
+    it('should render the summary tab and metrics tab', async () => {
+      renderComponent(flags);
+
+      screen.getByText('Summary');
+      expect(screen.queryByText('Metrics')).toBeInTheDocument();
+    });
+  });
+});

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(() =>