upcoming: [DI-29171] - Notification Channel Show Details enhancements #13344

santoshp210-akamai · 2026-01-29T13:10:36Z

Description 📝

Enhancements to the Notification Channel Show Details page

Changes 🔄

List any change(s) relevant to the reviewer.

Pagination, Search, Service filtering to the Associated Alerts table
Catch all routing for Notification Channel /create,/edit,/detail endpoints
Adjusted UI spacing to be consistent with Alerts Show Details page
Relevant mocks and UTs

Scope 🚢

Upon production release, changes in this PR will be visible to:

All customers
Some customers (e.g. in Beta or Limited Availability)
No customers / Not applicable

Target release date 🗓️

Feb 10th release

Preview 📷

Include a screenshot <img src="" /> or video <video src="" /> of the change.

🔒 Use the Mask Sensitive Data setting for security.

💡 For changes requiring multiple steps to validate, prefer a video for clarity.

Before

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

In DevCloud or Mock environment (Legacy MSW Handlers)
Click Alerts, under Monitor. Make sure to enable the notificationChannels in the aclpAlerting(CloudPulse Alerting) feature flag
Click on the Notification Channel Tab
Choose a Notification Channel either click on the hyperlink of the channel name, or click on Show Details on the action menu of the chosen alert.

Verification steps

(How to verify changes)

Pagination of the table
Searching of channel names and Service based filtering
Catch-all routing for the /edit, /create, /detail endpoints

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 tests and CI checks are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

…ncements

pmakode-akamai · 2026-02-03T07:23:11Z

...lse/Alerts/NotificationChannels/NotificationChannelDetail/NotificationChannelAlerts.test.tsx

+      },
+    };
+
+    hookMocks.useFlags.mockReturnValue(flags);


Suggested change

hookMocks.useFlags.mockReturnValue(flags);

Rather than mocking the use src/hooks/useFlags module, we should use our built in flags helper if possible, like this:

renderWithTheme(<NotificationChannelAlerts channelId={1} />, { flags: mockFlags, });

pmakode-akamai · 2026-02-03T07:35:59Z

...lse/Alerts/NotificationChannels/NotificationChannelDetail/NotificationChannelAlerts.test.tsx

+    renderWithTheme(<NotificationChannelAlerts channelId={1} />);
+    expect(screen.getAllByText(/beta/i)).toHaveLength(alerts.length);


Suggested change

renderWithTheme(<NotificationChannelAlerts channelId={1} />);

expect(screen.getAllByText(/beta/i)).toHaveLength(alerts.length);

const { getAllByText } = renderWithTheme(<NotificationChannelAlerts channelId={1} />);

expect(getAllByText(/beta/i)).toHaveLength(alerts.length);

We generally follow the pattern of destructuring queries from renderWithTheme instead of using the global screen object. Could we update this file (and the other) to align with that convention?

@pmakode-akamai , We were following the destructuring but after some ESLint upgrade we had the linter warning whenever we destructure and not use the global screen.

If destructing works well, then we will switch to destructuring from now.

I will try to make these changes in few files where I already have to edit, but in this current PR we can't change all the implementations of global screen in the UTs .

We will take the task up separately

pmakode-akamai · 2026-02-03T07:36:29Z

...lse/Alerts/NotificationChannels/NotificationChannelDetail/NotificationChannelAlerts.test.tsx

+    expect(screen.queryByText('Linode CPU Alert')).not.toBeInTheDocument();
+    expect(screen.queryByText('Linode Memory Alert')).not.toBeInTheDocument();
+  });
+  test('should render the Beta flag for the services in the service column', async () => {


Suggested change

test('should render the Beta flag for the services in the service column', async () => {

it('should render the Beta flag for the services in the service column', async () => {

pmakode-akamai · 2026-02-03T07:40:42Z

...ts/NotificationChannels/NotificationChannelDetail/NotificationChannelAlertsTableRow.test.tsx

+vi.mock('src/hooks/useFlags', () => ({
+  useFlags: queryMocks.useFlags,
+}));
+
+queryMocks.useFlags.mockReturnValue({
+  aclpServices: aclpServicesFlag,
+});


Suggested change

vi.mock('src/hooks/useFlags', () => ({

useFlags: queryMocks.useFlags,

}));

queryMocks.useFlags.mockReturnValue({

aclpServices: aclpServicesFlag,

});

Same here: We should use our built in flags helper option if possible

pmakode-akamai · 2026-02-03T07:44:31Z

...lse/Alerts/NotificationChannels/NotificationChannelDetail/NotificationChannelDetail.test.tsx

+vi.mock('src/hooks/useFlags', () => ({
+  useFlags: hookMocks.useFlags,
+}));
+


Suggested change

vi.mock('src/hooks/useFlags', () => ({

useFlags: hookMocks.useFlags,

}));

Same here

pmakode-akamai · 2026-02-03T07:50:46Z

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/Utils/utils.ts

+    );
+  }
+  return filteredAlerts;
+};


Could we add unit tests for the newly added utility functions?

pmakode-akamai · 2026-02-03T07:51:47Z

...lse/Alerts/NotificationChannels/NotificationChannelDetail/NotificationChannelDetail.test.tsx

+vi.mock('src/hooks/useFlags', () => ({
+  useFlags: hookMocks.useFlags,
+}));
+


Suggested change

vi.mock('src/hooks/useFlags', () => ({

useFlags: hookMocks.useFlags,

}));

pmakode-akamai · 2026-02-03T08:56:35Z

...oudPulse/Alerts/NotificationChannels/NotificationChannelDetail/NotificationChannelAlerts.tsx

+              handleSortClick(
+                orderBy,
+                handleOrderChange,
+                handlePageChange,
+                order
+              );


Is resetting to page 1 when sorting the expected behavior? I see a different pattern used elsewhere in the codebase where we keep the paginated page persisted when sorting by passing handleOrderChange directly to TableSortCell (e.g., NodeTable).

If resetting to page 1 is intentional, then we shouldn't be relying on functions with 3 / 3+ args. We generally prefer using object params in those cases. That said, if we can simplify this logic, it might be clearer to make it more straightforward like this:

const handleTableSort = (orderBy: string, order?: Order) => { if (order) { handleOrderChange(orderBy, order); handlePageChange(1); } };

From our UX for Alerting we have been following this since AlertsResources component. So for the consistency we follow this behaviour.

But the simplified logic makes sense. Will update that.

…ncements

pmakode-akamai · 2026-02-04T11:38:46Z

packages/manager/src/features/CloudPulse/Alerts/NotificationChannels/Utils/utils.test.ts

+      const handlers = {
+        handleDelete: vi.fn(),
+        handleDetails: vi.fn(),
+        handleEdit: vi.fn(),
+      };


nit: Maybe we could move this to a beforeEach OR outside the tests to reduce duplication

…ncements

linode-gh-bot · 2026-02-04T12:57:19Z

Cloud Manager UI test results

🔺 2 failing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`2 Failing`	`864 Passing`	`11 Skipped`	`37m 45s`

Details

Failing Tests
	Spec	Test
❌	`clone-linode.spec.ts`	Cloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page
❌	`access-key.e2e.spec.ts`	Cloud Manager Cypress Tests→object storage access key end-to-end tests » can create an access key with limited access - e2e

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts,cypress/e2e/core/objectStorage/access-key.e2e.spec.ts"

…ncements

upcoming: [DI-29171] - Notification Channel Show Details enhancements

1947bcb

santoshp210-akamai requested a review from a team as a code owner January 29, 2026 13:10

github-project-automation bot added this to Cloud Manager Jan 29, 2026

github-project-automation bot moved this to Review in Cloud Manager Jan 29, 2026

santoshp210-akamai self-assigned this Jan 29, 2026

santoshp210-akamai added Cloud Pulse Cloud Pulse - Alerting labels Jan 29, 2026

santoshp210-akamai requested a review from venkymano-akamai January 29, 2026 14:15

santoshp210-akamai added 3 commits January 29, 2026 19:47

add changesets

136bc09

Merge branch 'develop' into feature/notification-channel-details-enha…

4e67d47

…ncements

Merge branch 'develop' into feature/notification-channel-details-enha…

d53a6b6

…ncements

venkymano-akamai approved these changes Feb 2, 2026

View reviewed changes

santoshp210-akamai requested a review from pmakode-akamai February 2, 2026 11:27

pmakode-akamai reviewed Feb 3, 2026

View reviewed changes

santoshp210-akamai added 3 commits February 4, 2026 13:46

addressing review comments

f2c05bf

Merge branch 'develop' into feature/notification-channel-details-enha…

212d809

…ncements

add UTs for utils

a053a17

santoshp210-akamai requested a review from pmakode-akamai February 4, 2026 08:25

pmakode-akamai approved these changes Feb 4, 2026

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Feb 4, 2026

Merge branch 'develop' into feature/notification-channel-details-enha…

075261f

…ncements

santoshp210-akamai added 2 commits February 4, 2026 18:30

reduce duplicate constants

0c411a2

Merge branch 'develop' into feature/notification-channel-details-enha…

2332306

…ncements

		renderWithTheme(<NotificationChannelAlerts channelId={1} />);
		expect(screen.getAllByText(/beta/i)).toHaveLength(alerts.length);

	test('should render the Beta flag for the services in the service column', async () => {
	it('should render the Beta flag for the services in the service column', async () => {

	vi.mock('src/hooks/useFlags', () => ({
	useFlags: hookMocks.useFlags,
	}));

upcoming: [DI-29171] - Notification Channel Show Details enhancements #13344

Are you sure you want to change the base?

upcoming: [DI-29171] - Notification Channel Show Details enhancements #13344

Uh oh!

Conversation

santoshp210-akamai commented Jan 29, 2026

Description 📝

Changes 🔄

Scope 🚢

Target release date 🗓️

Preview 📷

Before

How to test 🧪

Prerequisites

Verification steps

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

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

santoshp210-akamai Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Feb 4, 2026

Cloud Manager UI test results

🔺 2 failing tests on test run #8 ↗︎

Details

Troubleshooting

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

santoshp210-akamai Feb 4, 2026 •

edited

Loading

pmakode-akamai Feb 3, 2026 •

edited

Loading

pmakode-akamai Feb 3, 2026 •

edited

Loading