upcoming: [DPS-41183] - Migrate content to details for Notification Channels (#13495)

* upcoming: [DPS-41183] - Migrate content to details for Notification Channels

* add changesets

Author: santoshp210-akamai

packages/api-v4/.changeset/pr-13495-upcoming-features-1773415302171.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Upcoming Features
+---
+
+Replaced `content` with `details` in cloudpulse/types.ts for ACLP-Alerts Notification Channels ([#13495](https://github.com/linode/manager/pull/13495))

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

@@ -47,7 +47,7 @@ type AlertNotificationEmail = 'email';
 type AlertNotificationSlack = 'slack';
 type AlertNotificationPagerDuty = 'pagerduty';
 type AlertNotificationWebHook = 'webhook';
-type EmailRecipientType =
+export type EmailRecipientType =
   | 'admin_users'
   | 'read_users'
   | 'read_write_users'
@@ -303,14 +303,7 @@ interface NotificationChannelBase {
 
 interface NotificationChannelEmail extends NotificationChannelBase {
   channel_type: AlertNotificationEmail;
-  content?: {
-    email: {
-      email_addresses: string[];
-      message: string;
-      subject: string;
-    };
-  };
-  details?: {
+  details: {
     email: {
       recipient_type: EmailRecipientType;
       usernames: string[];
@@ -320,14 +313,7 @@ interface NotificationChannelEmail extends NotificationChannelBase {
 
 interface NotificationChannelSlack extends NotificationChannelBase {
   channel_type: AlertNotificationSlack;
-  content?: {
-    slack: {
-      message: string;
-      slack_channel: string;
-      slack_webhook_url: string;
-    };
-  };
-  details?: {
+  details: {
     slack: {
       slack_channel: string;
       slack_webhook_url: string;
@@ -337,14 +323,7 @@ interface NotificationChannelSlack extends NotificationChannelBase {
 
 interface NotificationChannelPagerDuty extends NotificationChannelBase {
   channel_type: AlertNotificationPagerDuty;
-  content?: {
-    pagerduty: {
-      attributes: string[];
-      description: string;
-      service_api_key: string;
-    };
-  };
-  details?: {
+  details: {
     pagerduty: {
       attributes: string[];
       description: string;
@@ -354,16 +333,7 @@ interface NotificationChannelPagerDuty extends NotificationChannelBase {
 }
 interface NotificationChannelWebHook extends NotificationChannelBase {
   channel_type: AlertNotificationWebHook;
-  content?: {
-    webhook: {
-      http_headers: {
-        header_key: string;
-        header_value: string;
-      }[];
-      webhook_url: string;
-    };
-  };
-  details?: {
+  details: {
     webhook: {
       alert_body: {
         body: string;

packages/manager/.changeset/pr-13495-upcoming-features-1773415251134.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Migrated to `details` from `content` in ACLP-Alerts Notification Channels ([#13495](https://github.com/linode/manager/pull/13495))

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

@@ -30,11 +30,9 @@ const notificationChannels = notificationChannelFactory.buildList(5);
 const createNotificationChannel = notificationChannelFactory.build({
   label: 'Test Channel Name',
   channel_type: 'email',
-  content: {
+  details: {
     email: {
-      email_addresses: ['user1', 'user2'],
-      message: 'You have a new Alert',
-      subject: 'Sample Alert',
+      usernames: ['user1', 'user2'],
     },
   },
 });

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

@@ -29,7 +29,7 @@ import {
 } from 'src/features/CloudPulse/Alerts/NotificationChannels/NotificationsChannelsListing/constants';
 import { formatDate } from 'src/utilities/formatDate';
 
-import type { NotificationChannel } from '@linode/api-v4';
+import type { EmailRecipientType, NotificationChannel } from '@linode/api-v4';
 
 const sortOrderMap = {
   ascending: 'asc',
@@ -163,15 +163,14 @@ const { label: userChannelLabel, id: userChannelId } = findChannel(
   0 // alertsLength (0 = no alerts)
 );
 
-const isEmailContent = (
-  content: NotificationChannel['content']
-): content is {
+const isEmailChannel = (
+  details: NotificationChannel['details']
+): details is {
   email: {
-    email_addresses: string[];
-    message: string;
-    subject: string;
+    recipient_type: EmailRecipientType;
+    usernames: string[];
   };
-} => content !== undefined && 'email' in content;
+} => details !== undefined && 'email' in details;
 const mockProfile = profileFactory.build({
   timezone: 'gmt',
 });
@@ -272,15 +271,12 @@ describe('Notification Channel Listing Page', () => {
         expect(item.updated_by).to.eq(expected.updated_by);
 
         // Email content (safe narrow)
-        if (isEmailContent(item.content) && isEmailContent(expected.content)) {
-          expect(item.content.email.email_addresses).to.deep.eq(
-            expected.content.email.email_addresses
+        if (isEmailChannel(item.details) && isEmailChannel(expected.details)) {
+          expect(item.details.email.usernames).to.deep.eq(
+            expected.details.email.usernames
           );
-          expect(item.content.email.subject).to.eq(
-            expected.content.email.subject
-          );
-          expect(item.content.email.message).to.eq(
-            expected.content.email.message
+          expect(item.details.email.recipient_type).to.eq(
+            expected.details.email.recipient_type
           );
         }
 

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

@@ -12,14 +12,13 @@ export const notificationChannelFactory =
       alert_count: 1,
       url: 'monitor/alert-channels/{id}/alerts',
     },
-    channel_type: 'email',
-    content: {
+    details: {
       email: {
-        email_addresses: ['test@test.com', 'test2@test.com'],
-        message: 'You have a new Alert',
-        subject: 'Sample Alert',
+        recipient_type: 'user',
+        usernames: ['test@test.com', 'test2@test.com'],
       },
     },
+    channel_type: 'email',
     created: new Date().toISOString(),
     created_by: 'user1',
     id: Factory.each((i) => i),

packages/manager/src/features/CloudPulse/Alerts/AlertsDetail/AlertDetailNotification.test.tsx

@@ -7,9 +7,9 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 import { AlertDetailNotification } from './AlertDetailNotification';
 
 const notificationChannels = notificationChannelFactory.buildList(3, {
-  content: {
+  details: {
     email: {
-      email_addresses: ['1@test.com', '2@test.com'],
+      usernames: ['1@test.com', '2@test.com'],
     },
   },
 });

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.test.tsx

@@ -25,7 +25,12 @@ vi.mock('src/queries/cloudpulse/alerts', async () => {
 });
 
 const mockNotificationData: NotificationChannel[] = [
-  notificationChannelFactory.build({ id: 0 }),
+  notificationChannelFactory.build({
+    id: 0,
+    details: {
+      email: { usernames: ['user1', 'user2'], recipient_type: 'user' },
+    },
+  }),
 ];
 
 queryMocks.useAllAlertNotificationChannelsQuery.mockReturnValue({
@@ -40,8 +45,8 @@ describe('Channel Listing component', () => {
   it('should render the notification channels ', () => {
     const emailAddresses =
       mockNotificationData[0].channel_type === 'email' &&
-      mockNotificationData[0].content?.email
-        ? mockNotificationData[0].content.email.email_addresses
+      mockNotificationData[0].details?.email
+        ? mockNotificationData[0].details.email.usernames
         : [];
 
     const { getByText } =
@@ -57,8 +62,8 @@ describe('Channel Listing component', () => {
       });
     expect(getByText('4. Notification Channels')).toBeVisible();
     expect(getByText(capitalize(mockNotificationData[0].label))).toBeVisible();
-    expect(getByText(emailAddresses[0])).toBeInTheDocument();
-    expect(getByText(emailAddresses[1])).toBeInTheDocument();
+    expect(getByText(emailAddresses[0])).toBeVisible();
+    expect(getByText(emailAddresses[1])).toBeVisible();
   });
 
   it('should disable the add notification button when service type is null', () => {

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/RenderChannelDetails.test.tsx

@@ -8,26 +8,31 @@ import { RenderChannelDetails } from './RenderChannelDetails';
 
 import type { NotificationChannel } from '@linode/api-v4';
 
-const mockData: NotificationChannel = notificationChannelFactory.build();
+const mockData = notificationChannelFactory.build({
+  details: {
+    email: {
+      recipient_type: 'read_write_users',
+      usernames: [],
+    },
+  },
+});
 
 describe('RenderChannelDetails component', () => {
-  it('should render the email channel type notification details', () => {
-    const emailAddresses =
-      mockData.channel_type === 'email' && mockData.content?.email
-        ? mockData.content.email.email_addresses
-        : [];
-    const container = renderWithTheme(
+  it('should render the email channel type notification details with recipient_type if no usernames are there', () => {
+    const { getByText } = renderWithTheme(
       <RenderChannelDetails template={mockData} />
     );
-    expect(container.getByText(emailAddresses[0])).toBeVisible();
-    expect(container.getByText(emailAddresses[1])).toBeVisible();
+    const recipientType =
+      mockData.channel_type === 'email'
+        ? mockData.details.email.recipient_type
+        : '';
+    expect(getByText(recipientType)).toBeVisible();
   });
   it('should render the email channel with usernames if details is present', () => {
     const usernames = ['user1', 'user2'];
     const mockDataWithDetails: NotificationChannel =
       notificationChannelFactory.build({
         channel_type: 'email',
-        content: {},
         details: {
           email: {
             usernames,

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/RenderChannelDetails.tsx

@@ -1,8 +1,6 @@
 import { Chip } from '@mui/material';
 import * as React from 'react';
 
-import { shouldUseContentsForEmail } from '../../Utils/utils';
-
 import type { NotificationChannel } from '@linode/api-v4';
 
 interface RenderChannelDetailProps {
@@ -14,14 +12,14 @@ interface RenderChannelDetailProps {
 export const RenderChannelDetails = (props: RenderChannelDetailProps) => {
   const { template } = props;
   if (template.channel_type === 'email') {
-    const contentEmail = template.content?.email;
-    const detailEmail = template.details?.email;
-    const useContents = shouldUseContentsForEmail(template);
+    const detailEmail = template.details.email;
 
-    const recipients = useContents
-      ? (contentEmail?.email_addresses ?? [])
-      : (detailEmail?.usernames ?? []);
+    const hasUserNames =
+      detailEmail.recipient_type === 'user' && detailEmail.usernames.length;
 
+    const recipients = hasUserNames
+      ? detailEmail.usernames
+      : [detailEmail.recipient_type];
     return (
       <>
         {recipients.map((value) => (