change: [DI-26188] - Updated Alert Reusable component based on the latest mockup

[nikhagra-akamai]

Description 📝

Updated Alert Reusable component based on the latest mockup

https://www.figma.com/design/uvdOz9Xs0RVdMRJMCIgS9H/ACLP---Contextual-views?node-id=13721-11625&t=fXEAT02sleQcIKkQ-0

Changes 🔄

List any change(s) relevant to the reviewer.

1. Hide manage alert button if it is used in create mode i.e. entityId is undefined
2. Filters alerts with scope region based on the regionId passed
3. Show confirmationDialog on save button click only if previously legacy alerts were present which is controlled by isLegacyAlertAvailable prop
4. Updated prop description for onToggleAlert to be used in both create and edit mode to serve different use cases

💡 NOTE: Same handler can be used by the service owner to track unsaved alert toggles and subsequently show confirmation dialog box while switching with unsaved changes.

Target release date 🗓️

12th August

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 🧪

1. Switch to mock user
2. Add with required properties to see ACLP alerts
3. Playaround with props to visualize the 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

[jaalah-akamai]

suggestion(non-blocking): Variable chip for different phases
As a separate effort, we may want to conditionally render either the beta or new feature chip based on LD flag. Maybe we can move/re-use this util throughout the app

[nikhil97agr]

great point, beta chip will vary based on the phase. Will update it

[pmakode-akamai]

We need to update the flag in LD to integrate this, right?

[nikhagra-akamai]

I've updated it to show beta chip according to aclpBetaServices

[pmakode-akamai]

non-blocking: I believe we want to swap the Beta chip with the New feature chip for the GA rollout. We may also need to update the LD flag structure for alerts (and possibly other features) to allow hiding the Beta chip even when the feature flag is enabled.

something like this:

{
  ...
  alerts: {
    enabled: boolean;
    beta: boolean;
    new: boolean;
  },
  ...
}

[nikhagra-akamai]

It is not finalized yet to show new feature chip. Will take it later. Currently it'll just toggle to show or hide beta chip

[nikhagra-akamai]

@pmakode-akamai pls review & Provide second approval

[pmakode-akamai]

Could we pass isLegacyAlertAvailable={!isLinodeAclpSubscribed} to the AclpReusabledComponent here at /LinodesDetail/LinodeAlerts/LinodeAlerts.tsx#L45 in this PR itself, or should we handle it in a separate PR?

edit: Addressed in d33d48b ✅

[pmakode-akamai]

issue (blocking): Now that we have some beta alerts enabled by default, I noticed that in the create flow, service owners don’t have access to the default enabled beta alerts state until they toggle one of the alert options (for eg., updatedAlerts from handleToggleAlert), I'm wondering how we can ensure these alerts are enabled in the default state without requiring user interaction

Screen.Recording.2025-07-23.at.3.04.04.PM.mov

[nikhagra-akamai]

issue (blocking): Now that we have some beta alerts enabled by default, I noticed that in the create flow, service owners don’t have access to the default enabled beta alerts state until they toggle one of the alert options (for eg., updatedAlerts from handleToggleAlert), I'm wondering how we can ensure these alerts are enabled in the default state without requiring user interaction

@pmakode-akamai I've updated the logic to handle initial state

Screen.Recording.2025-07-23.at.5.02.56.PM.mov

[linode-gh-bot]

Cloud Manager UI test results

🎉 690 passing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	690 Passing	4 Skipped	124m 32s

[pmakode-akamai]

Looks good ✅

Thanks for making the changes and fixing the initial state logic!

[nikhagra-akamai]

Missed to add the changeset, hence added in this PR