upcoming: [DI-28500] - Enable the Alerts Notification Channel Tab (#13150)

* upcoming: [DI-28500] - Introduce Alert's Notification Channel Management tab

* upcoming: [DI-28500] - filter and render enabled Tabs only

* add changeset

* test[DI-28587]: Add permission tests for Notification Channel Management

* test[DI-28587]: Add permission tests for Notification Channel Management

---------

Co-authored-by: agorthi-akamai <[email protected]>

Author: santoshp210-akamai

packages/manager/.changeset/pr-13150-upcoming-features-1764648735682.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Introduce and conditionally render Notification Channels tab under ACLP-Alerting ([#13150](https://github.com/linode/manager/pull/13150))

packages/manager/cypress/e2e/core/cloudpulse/alerting-notification-channel-permission-tests.spec.ts

@@ -0,0 +1,110 @@
+/**
+ * @file Integration Tests for CloudPulse Alerting — Notification Channel Listing Page
+ *
+ * Covers three access-control behaviors:
+ * 1. Access is allowed when `notificationChannels` is true.
+ * 2. Navigation/tab visibility is blocked when `notificationChannels` is false.
+ * 3. Direct URL access is blocked when `notificationChannels` is false.
+ * 4. All access is blocked when CloudPulse (`aclp`) is disabled.
+ */
+
+import { mockGetAccount } from 'support/intercepts/account';
+import { mockAppendFeatureFlags } from 'support/intercepts/feature-flags';
+import { ui } from 'support/ui';
+
+import { accountFactory } from 'src/factories';
+
+import type { Flags } from 'src/featureFlags';
+
+describe('Notification Channel Listing Page — Access Control', () => {
+  beforeEach(() => {
+    mockGetAccount(accountFactory.build());
+  });
+
+  it('allows access when notificationChannels is enabled', () => {
+    const flags: Partial<Flags> = {
+      aclp: { beta: true, enabled: true },
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: true,
+        recentActivity: false,
+        notificationChannels: true,
+      },
+    };
+
+    mockAppendFeatureFlags(flags);
+    cy.visitWithLogin('/linodes');
+
+    ui.nav.findItemByTitle('Alerts').should('be.visible').click();
+    ui.tabList
+      .findTabByTitle('Notification Channels')
+      .should('be.visible')
+      .click();
+
+    cy.url().should('endWith', 'alerts/notification-channels');
+  });
+
+  it('hides the Notification Channels tab when notificationChannels is disabled', () => {
+    const flags: Partial<Flags> = {
+      aclp: { beta: true, enabled: true },
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: true,
+        recentActivity: false,
+        notificationChannels: false,
+      },
+    };
+
+    mockAppendFeatureFlags(flags);
+    cy.visitWithLogin('/linodes');
+
+    ui.nav.findItemByTitle('Alerts').should('be.visible').click();
+
+    // Tab should not render at all
+    ui.tabList.findTabByTitle('Notification Channels').should('not.exist');
+  });
+
+  it('blocks all access when CloudPulse is disabled', () => {
+    const flags: Partial<Flags> = {
+      aclp: { beta: true, enabled: false }, // CloudPulse OFF
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: true,
+        recentActivity: false,
+        notificationChannels: true,
+      },
+    };
+
+    mockAppendFeatureFlags(flags);
+    cy.visitWithLogin('/alerts/notification-channels');
+
+    // Application should return fallback
+    cy.findByText('Not Found').should('be.visible');
+  });
+
+  it('blocks direct URL access to /alerts/notification-channels when notificationChannels is disabled', () => {
+    const flags: Partial<Flags> = {
+      aclp: { beta: true, enabled: true },
+
+      aclpAlerting: {
+        accountAlertLimit: 10,
+        accountMetricLimit: 10,
+        alertDefinitions: true,
+        beta: true,
+        recentActivity: false,
+        notificationChannels: false, // feature OFF → user should not enter page
+      },
+    };
+
+    mockAppendFeatureFlags(flags);
+    cy.visitWithLogin('/alerts/notification-channels');
+    // Tab must not exist
+    ui.tabList.findTabByTitle('Notification Channels').should('not.exist');
+  });
+});

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/NotificationsChannelsListing/NotificationChannelListing.tsx

@@ -0,0 +1,6 @@
+import { Paper } from '@linode/ui';
+import React from 'react';
+
+export const NotificationChannelListing = () => {
+  return <Paper>Notification Channel Page</Paper>; // Temporary placeholder
+};

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/NotificationsChannelsListing/cloudPulseAlertsNotificationChannelsListingLazyRoute.ts

@@ -0,0 +1,8 @@
+import { createLazyRoute } from '@tanstack/react-router';
+
+import { NotificationChannelListing } from './NotificationChannelListing';
+
+export const cloudPulseAlertsNotificationChannelsListingLazyRoute =
+  createLazyRoute('/alerts/notification-channels')({
+    component: NotificationChannelListing,
+  });

packages/manager/src/routes/alerts/CloudPulseAlertsRoute.tsx

@@ -23,8 +23,15 @@ export const CloudPulseAlertsRoute = () => {
       title: 'Definitions',
       disabled: !flags.aclpAlerting?.alertDefinitions,
     },
+    {
+      to: '/alerts/notification-channels',
+      title: 'Notification Channels',
+      disabled: !flags.aclpAlerting?.notificationChannels,
+    },
   ]);
 
+  const visibleTabs = tabs.filter((tab) => !tab.disabled);
+
   if (!isACLPEnabled) {
     return <NotFound />;
   }
@@ -39,14 +46,16 @@ export const CloudPulseAlertsRoute = () => {
         spacingBottom={4}
       />
       <Tabs index={tabIndex} onChange={handleTabChange}>
-        <TanStackTabLinkList tabs={tabs} />
+        <TanStackTabLinkList tabs={visibleTabs} />
         <React.Suspense fallback={<SuspenseLoader />}>
           <TabPanels>
-            <SafeTabPanel index={0}>
-              <Paper>
-                <Outlet />
-              </Paper>
-            </SafeTabPanel>
+            {visibleTabs.map((_, index) => (
+              <SafeTabPanel index={index} key={index}>
+                <Paper>
+                  <Outlet />
+                </Paper>
+              </SafeTabPanel>
+            ))}
           </TabPanels>
         </React.Suspense>
       </Tabs>

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

@@ -68,6 +68,15 @@ const cloudPulseAlertsDefinitionsCatchAllRoute = createRoute({
   },
 });
 
+const cloudPulseNotificationChannelsRoute = createRoute({
+  getParentRoute: () => cloudPulseAlertsRoute,
+  path: 'notification-channels',
+}).lazy(() =>
+  import(
+    'src/features/CloudPulse/Alerts/NotificationChannels/NotificationsChannelsListing/cloudPulseAlertsNotificationChannelsListingLazyRoute'
+  ).then((m) => m.cloudPulseAlertsNotificationChannelsListingLazyRoute)
+);
+
 export const cloudPulseAlertsRouteTree = cloudPulseAlertsRoute.addChildren([
   cloudPulseAlertsIndexRoute,
   cloudPulseAlertsDefinitionsRoute.addChildren([
@@ -76,4 +85,5 @@ export const cloudPulseAlertsRouteTree = cloudPulseAlertsRoute.addChildren([
     cloudPulseAlertsDefinitionsEditRoute,
   ]),
   cloudPulseAlertsDefinitionsCatchAllRoute,
+  cloudPulseNotificationChannelsRoute,
 ]);