upcoming: [DI - 22836] - Added AddNotificationChannel component

[santoshp210-akamai]

Description 📝

Added the AddNotificationChannel Drawer component to the Create Alert form

Changes 🔄

• Added the relevant types for the Notification Channel for the Alerting use-case.
• Added the AddNotificationChannel component with Unit Tests.
• The AddNotificationChannel component has two Autocomplete components for the Type and Channel fields.
• Added state variables to the CreateAlertDefinition component to handle the Drawer.

Target release date 🗓️

Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

Include a screenshot or screen recording of the change.

🔒 Use the Mask Sensitive Data setting for security.

💡 Use <video src="" /> tag when including recordings in table.

Before	After

How to test 🧪

Prerequisites

• The API endpoints are not live yet, so use Legacy MSW Handlers for the mock responses
• In Monitor (once the prerequisites are followed) , Alerts tab should be visible next to Dashboards.
• Under that, Definition tab and a Create button should be visible.
• On clicking Create, the Form Page should be visible
• At the bottom of the form there's Add Notification Channel button, clicking on that should show the Add Notification Channel Drawer

Reproduction steps

Verification steps

• Verification of the Add Notification Channel button
• Verification of the Form and the Autocomplete components inside the form

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[santoshp210-akamai]

Note

Currently once the Notification Channel is selected and Submit button is pressed in the Add Notification Channel Drawer, it does not reflect the saved Channel on the form. That is part of a different component that will added as part of subsequent PR. Thank you!

[github-actions]

Coverage Report: ✅
Base Coverage: 87.17%
Current Coverage: 87.17%

[pmakode-akamai]

Thanks for the PR! I’ve left a couple of comments. Also, it looks like there’s a conflict with /CloudPulse/Alerts/constants.ts that needs to be resolved.

[pmakode-akamai]

When selecting Email and Channel, the To: label appears empty. Is this intentional, or should a placeholder or dynamic value be displayed here for clarity?

[santoshp210-akamai]

There is supposed to be another component that shows the details. That'll be part of next PR , we couldn't add it because of the line count.

[pmakode-akamai]

The To: label is empty, which could be confusing. Since the full details will be part of the next PR, would it make sense to add both the To: label and its details together then? This would ensure the UI is complete and functional, without leaving any incomplete or ambiguous elements in this PR. I defer to @jaalah-akamai and others for input

[santoshp210-akamai]

Yeah, that makes sense. I will take a look if it's possible. If others agree then I will make that change

[pmakode-akamai]

The top spacing for the Add Notification Channel button seems smaller and inconsistent with the Add Metric button. Can we adjust the spacing to make them consistent?

[santoshp210-akamai]

Same thing here, There is supposed to be a different section, but The button is part of another component which will be in the next PR so to test the drawer functionality, I put it as placeholder for this PR.

[pmakode-akamai]

Looks good to me! Left a comment for further inputs on the To: label from others.

✅ Confirmed clicking the Add Notification Channel button displays the Add Notification Channel Drawer

[bnussman-akamai]

Let's remove this conditional. It breaks the drawer open/close animation

Suggested change

	{openAddNotification && (
	<Drawer
	onClose={onExitNotifications}
	open={openAddNotification}
	title="Add Notification Channel"
	>
	<AddNotificationChannel
	isNotificationChannelsError={false}
	isNotificationChannelsLoading={false}
	onCancel={onExitNotifications}
	onSubmitAddNotification={onSubmitAddNotification}
	templateData={notificationChannelFactory.buildList(2)}
	/>
	</Drawer>
	)}
	<Drawer
	onClose={onExitNotifications}
	open={openAddNotification}
	title="Add Notification Channel"
	>
	<AddNotificationChannel
	isNotificationChannelsError={false}
	isNotificationChannelsLoading={false}
	onCancel={onExitNotifications}
	onSubmitAddNotification={onSubmitAddNotification}
	templateData={notificationChannelFactory.buildList(2)}
	/>
	</Drawer>

The Drawer component should be smart enough to not render its children when open is false so performance should still be okay

[santoshp210-akamai]

Understood, made the suggested chage

[venkymano-akamai]

PR looks good to me, able to see the drawer.

Please remove the TO: label for now, we will add it in next PR once functionality is ready

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	473 Passing	2 Skipped	91m 29s

Details

Failing Tests
	Spec	Test
❌	smoke-linode-landing-table.spec.ts	linode landing checks » checks the landing page side menu items

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts"

[cypress]

Cloud Manager E2E    Run #7102

Run Properties:   Passed #7102  •  e51862d7a3: upcoming: [DI - 22836] - Added AddNotificationChannel component (#11511)

Project	Cloud Manager E2E
Branch Review	develop
Run status	Passed #7102
Run duration	57m 10s
Commit	e51862d7a3: upcoming: [DI - 22836] - Added AddNotificationChannel component (#11511)
Committer	santoshp210-akamai
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	3
Pending	2
Skipped	0
Passing	474
View all changes introduced in this branch ↗︎