upcoming: [M3-10510] - Add unsaved changes modal for ACLP (beta) alerts

[pmakode-akamai]

Description 📝

The onToggleAlert handler in AclpReusableComponent is now updated (in PR: #12730) to support tracking of unsaved changes during the Beta Alerts edit flow. This allows the Service Owners to manage unsaved state and display a Unsaved changes confirmation dialog if the user attempts to navigate away without saving changes.

Changes 🔄

• Added unsaved changes modal for ACLP (Beta) Alerts edit flow
• Refactored legacy Alerts unsaved changes modal logic to make it reusable for both legacy and ACLP (Beta) Alerts

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

N/A

Preview 📷

How to test 🧪

Prerequisites

• Enable MSW (Legacy MSW Handlers)
• Enable the ACLP Services → linode → alerts feature flag

Verification steps

• Navigate to the Linodes landing page
• Locate the mocked Linode: aclp-supported-region-linode-2
• Confirm that the legacy Alerts "Unsaved Changes" modal appears as expected when editing alerts
• Navigate to the Alerts tab -> Click Try Alerts (Beta)
• Make some changes, then attempt to navigate away from the tab or page
• Confirm that the ACLP (Beta) Alerts "Unsaved Changes" modal appears as expected

Note

For the mocked Linode aclp-supported-region-linode-1 (with alerts enabled by default), the Unsaved Changes modal and Save button state may not appear correctly as expected. This is due to a known issue in AclpReusableComponent (specifically when alerts are enabled by default), which needs to be addressed separately by the Cloudpulse team.

• Issue: Toggling a default-enabled ACLP alert off and then back on adds its ID to the end of the list, which changes the original order of alert IDs. This causes a mismatch that leads to incorrect unsavedChanges detection and leaves the Save button incorrectly enabled
• Likely Fix: Sort alert ID arrays before comparing initial and updated/new states to determine unsaved ACLP alert changes

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

[bnussman-akamai]

This doesn't match the rest of Cloud Manager

Usually we use a secondary button.

I know this is existing code, but I still believe that changes like this should be done globally for consistency within Cloud Manager

[pmakode-akamai]

Thanks for pointing that out. I discussed this with @tzmiivsk-akamai previously -- there's an ADS ticket for it, and my understanding is that it will be addressed along with other related changes under M3-10331.

We had originally added the outlined secondary button based on the UX mocks, which follow ADS guidelines. However, I agree that for consistency, it's better to use the standard (non-outlined) secondary button for now, until the outlined variant is rolled out globally in Cloud Manager as part of that work

edit: Temporarily removed the outlined style from ACLP secondary buttons in modals for consistency -- fixed here: 4b5dba3

[linode-gh-bot]

Cloud Manager UI test results

🎉 745 passing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	745 Passing	6 Skipped	39m 30s