Skip to content

Conversation

@ankita-akamai
Copy link
Contributor

@ankita-akamai ankita-akamai commented Dec 31, 2025

Description 📝

Add edit feature for notification channels.

Changes 🔄

  • Add form component with react-hook-form integration for editing channel name and recipients, includes validation and error handling
  • Add landing page component that fetches channel data by ID and renders EditNotificationChannel with loading/error states.
  • Add new route /alerts/notification-channels/edit/$channelId with lazy loading
  • Add filterEditChannelFormValues utility to transform form data to API payload format
  • Add schemas, test cases, update mocks.

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 🗓️

13 jan 2026

Preview 📷

image

How to test 🧪

Verification steps

[Verify in mock env]

  • Navigate to channels tab under monitor.
  • Click on edit action (three dots in the table row) on any notification channel.
  • Verify edit form loads with pre-filled channel data
  • Verify that these filters are visible - Type, Name, and Recipients.
  • Verify that the type filter is disabled and a channel type is default selected.
  • Verify that 'name' filter is editable.
  • Verify that 'recipients' filter is editable.
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

@ankita-akamai ankita-akamai marked this pull request as ready for review December 31, 2025 16:45
@ankita-akamai ankita-akamai requested a review from a team as a code owner December 31, 2025 16:45
@github-project-automation github-project-automation bot moved this from Review to Approved in Cloud Manager Jan 5, 2026
Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just left a few minor suggestions

return (
<>
<Breadcrumb crumbOverrides={overrides} pathname={pathname} />
<Box alignContent="center" height="600px">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be okay but maybe a minHeight would serve us better and save us from potentional overflow issues in the longer run

* @param crumbOverrides - The overrides to be provided in breadcrumb
* @param children - The message component (e.g., CircleProgress, ErrorState, or Placeholder)
*/
const EditChannelState = ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A better name may be something like EditChannelContainer


const cloudPulseNotificationChannelEditRoute = createRoute({
getParentRoute: () => cloudPulseAlertsRoute,
path: 'notification-channels/edit/$channelId',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Params should be parsed here. That will make it so that we don't need to cast the string to a number everywhere in the app

Suggested change
path: 'notification-channels/edit/$channelId',
path: 'notification-channels/edit/$channelId',
params: {
parse: (rawParams) => ({
channelId: Number(rawParams.channelId),
}),
},

Comment on lines 338 to 342
export const useNotificationChannelQuery = (channelId: number) => {
return useQuery<NotificationChannel, APIError[]>({
...queryFactory.notificationChannels._ctx.channelById(channelId),
});
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: We could remove the spread operation here

Suggested change
export const useNotificationChannelQuery = (channelId: number) => {
return useQuery<NotificationChannel, APIError[]>({
...queryFactory.notificationChannels._ctx.channelById(channelId),
});
};
export const useNotificationChannelQuery = (channelId: number) => {
return useQuery<NotificationChannel, APIError[]>(
queryFactory.notificationChannels._ctx.channelById(channelId)
);
};

if (!channelData) {
return <StyledPlaceholder icon={EntityIcon} title="No Data to display." />;
}
return <NullComponent />;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we could just use null

Suggested change
return <NullComponent />;
return null;

@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🔺 1 failing test on test run #6 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
1 Failing869 Passing11 Skipped43m 23s

Details

Failing Tests
SpecTest
timerange-verification.spec.tsCloud Manager Cypress Tests→Integration tests for verifying Cloudpulse custom and preset configurations » should implement and validate custom date/time picker for a specific date and time range

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/cloudpulse/timerange-verification.spec.ts"

@ankita-akamai
Copy link
Contributor Author

Merging as there are enough approvals and failure is unrelated.

@ankita-akamai ankita-akamai merged commit a3af683 into linode:develop Jan 6, 2026
35 checks passed
@github-project-automation github-project-automation bot moved this from Approved to Merged in Cloud Manager Jan 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Merged

Development

Successfully merging this pull request may close these issues.

5 participants