upcoming: [DI-28662] - Notification Channel Listing Action Items (#13203)

* upcoming: [DI-28662] - Notification Channel Listing Action Items

* upcoming: [DI-28662] - Minor linting, code comment changes, updated UT

* handle fallback, fix type value and factory

* update to new type value

* add changeset

* use params prop for better type-safety

* fix type-check failure in recently merged files

Author: santoshp210-akamai

packages/api-v4/.changeset/pr-13203-changed-1765855832956.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Changed
+---
+
+AlertNotificationType from `custom | default` to `user | system`  ([#13203](https://github.com/linode/manager/pull/13203))

packages/api-v4/src/cloudpulse/types.ts

@@ -41,7 +41,7 @@ export type MetricUnitType =
   | 'second';
 export type NotificationStatus = 'Disabled' | 'Enabled';
 export type ChannelType = 'email' | 'pagerduty' | 'slack' | 'webhook';
-export type AlertNotificationType = 'custom' | 'default';
+export type AlertNotificationType = 'system' | 'user';
 type AlertNotificationEmail = 'email';
 type AlertNotificationSlack = 'slack';
 type AlertNotificationPagerDuty = 'pagerduty';

packages/manager/.changeset/pr-13203-upcoming-features-1765855699865.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Enable Action Item for ACLP-Alerting Notification Channel Listing ([#13203](https://github.com/linode/manager/pull/13203))

packages/manager/cypress/e2e/core/cloudpulse/alert-notification-channel-list.spec.ts

@@ -53,7 +53,7 @@ const notificationChannels = notificationChannelFactory
         ...ch,
         id: i + 1,
         label: `Channel-${i + 1}`,
-        type: 'custom',
+        type: 'user',
         created_by: 'user',
         updated_by: 'user',
         channel_type: 'email',
@@ -72,7 +72,7 @@ const notificationChannels = notificationChannelFactory
         ...ch,
         id: i + 1,
         label: `Channel-${i + 1}`,
-        type: 'default',
+        type: 'system',
         created_by: 'system',
         updated_by: 'system',
         channel_type: 'webhook',

packages/manager/cypress/e2e/core/cloudpulse/create-user-alert.spec.ts

@@ -81,7 +81,7 @@ const notificationChannels = notificationChannelFactory.build({
   channel_type: 'email',
   id: 1,
   label: 'channel-1',
-  type: 'custom',
+  type: 'user',
 });
 
 const customAlertDefinition = alertDefinitionFactory.build({

packages/manager/cypress/e2e/core/cloudpulse/edit-user-alert.spec.ts

@@ -118,7 +118,7 @@ const notificationChannels = notificationChannelFactory.build({
   channel_type: 'email',
   id: 1,
   label: 'Channel-1',
-  type: 'custom',
+  type: 'user',
 });
 const mockProfile = profileFactory.build({
   timezone: 'gmt',

packages/manager/src/factories/cloudpulse/channels.ts

@@ -25,7 +25,7 @@ export const notificationChannelFactory =
     id: Factory.each((i) => i),
     label: Factory.each((id) => `Channel-${id}`),
     status: 'Enabled',
-    type: 'custom',
+    type: 'user',
     updated: new Date().toISOString(),
     updated_by: 'user1',
   });

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/NotificationChannelDetail/NotificationChannelDetail.tsx

@@ -0,0 +1,11 @@
+import { Paper } from '@linode/ui';
+import { useParams } from '@tanstack/react-router';
+import React from 'react';
+
+export const NotificationChannelDetail = () => {
+  const { channelId } = useParams({
+    from: '/alerts/notification-channels/detail/$channelId',
+  });
+  // Placeholder content for Notification Channel Detail
+  return <Paper>Notification Channel Details - id: {channelId}</Paper>;
+};

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/NotificationChannelDetail/cloudPulseAlertsNotificationChannelsDetailLazyRoute.ts

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

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { ActionMenu } from 'src/components/ActionMenu/ActionMenu';
+
+import { getNotificationChannelActionsList } from '../Utils/utils';
+
+import type { AlertNotificationType } from '@linode/api-v4';
+
+export interface NotificationChannelActionHandlers {
+  /**
+   * Callback for show details action
+   */
+  handleDetails: () => void;
+}
+
+export interface NotificationChannelActionMenuProps {
+  /**
+   * The label of the Notification Channel
+   */
+  channelLabel: string;
+  /**
+   * Handlers for actions like delete, show details, etc.,
+   */
+  handlers: NotificationChannelActionHandlers;
+  /**
+   * Type of the notification channel
+   */
+  notificationType: AlertNotificationType;
+}
+export const NotificationChannelActionMenu = (
+  props: NotificationChannelActionMenuProps
+) => {
+  const { channelLabel, handlers, notificationType } = props;
+
+  return (
+    <ActionMenu
+      actionsList={
+        getNotificationChannelActionsList(handlers)[notificationType] || []
+      }
+      ariaLabel={`Action menu for Notification Channel ${channelLabel}`}
+    />
+  );
+};