Skip to content

upcoming: [DI-24451] - Added confirmation dialog on enabling/disabling of alert - #11981

Merged
nikhagra-akamai merged 19 commits into
linode:developfrom
nikhagra-akamai:alert/confirm_dialog
Apr 9, 2025
Merged

upcoming: [DI-24451] - Added confirmation dialog on enabling/disabling of alert#11981
nikhagra-akamai merged 19 commits into
linode:developfrom
nikhagra-akamai:alert/confirm_dialog

Conversation

@nikhagra-akamai

Copy link
Copy Markdown
Contributor

Description 📝

Added the confirmation dialog while enabling & disabling of alert.

Changes 🔄

List any change(s) relevant to the reviewer.

  1. Updated AlertConfirmationDialog component to accept message and title
  2. Updated AlertListTable component to add confirmation dialog on click of action menu button
  3. Updated AlertInformationActionTable component to pass message to confirmation dialog

Target release date 🗓️

22nd April

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.

Mockup After
Screenshot 2025-04-07 at 10 12 09 PM Screenshot 2025-04-07 at 10 13 41 PM
Screenshot 2025-04-07 at 10 13 18 PM Screenshot 2025-04-07 at 10 13 31 PM

How to test 🧪

  1. Switch to mock user
  2. Go to Alerts tab from mega menu
  3. Click on action menu of any alert which is not created by system
  4. Click on enable/disable then you'll see a confirmation dialog
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

Comment thread packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx Outdated
Comment thread packages/manager/src/features/CloudPulse/Alerts/AlertsListing/AlertListTable.tsx Outdated
Comment on lines +14 to +15
const message = `Are you sure you want to disable the alert for ${entityName}?`;
const title = `Disable ${alert.label} Alert?`;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Optional nit: these could be moved out of the test function to live with the constants above, since they're repeated in multiple tests. (And renamed something like disabledMessage, disabledTitle.)

.should('be.visible')
.should('have.text', `${action} ${alertName} Alert?`);

cy.get('[data-qa-drawer="true"]')

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
cy.get('[data-qa-drawer="true"]')
cy.get('[data-qa-drawer]')

Can't this itself work?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

updated

Comment on lines +357 to +359
action: 'Disable' | 'Enable';
alertName: string;
alias: string;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

can we define a interface for this or it is not needed?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

instead of new interface I've reused already existing interface as partial

@nikhagra-akamai
nikhagra-akamai requested a review from mjac0bs April 8, 2025 09:34
@agorthi-akamai

Copy link
Copy Markdown
Contributor

I've addressed all the comments. Please review it once more and let me know if the text can be further refined

Comment on lines +337 to +353
// verify dialog title
cy.get('[data-qa-drawer-title]')
.should('be.visible')
.should('have.text', `${action} ${alertName} Alert?`);

cy.get('[data-qa-drawer]')
.find('h6')
.should('be.visible')
.should('have.text', confirmationText);

ui.buttonGroup
.find()
.find('button')
.filter(`[label="${action}"]`)
.should('be.visible')
.should('be.enabled')
.click();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Suggested change
// verify dialog title
cy.get('[data-qa-drawer-title]')
.should('be.visible')
.should('have.text', `${action} ${alertName} Alert?`);
cy.get('[data-qa-drawer]')
.find('h6')
.should('be.visible')
.should('have.text', confirmationText);
ui.buttonGroup
.find()
.find('button')
.filter(`[label="${action}"]`)
.should('be.visible')
.should('be.enabled')
.click();
ui.dialog
.findByTitle(`${action} ${alertName} Alert?`)
.should('be.visible')
.within(() => {
cy.findByText(confirmationText).should('be.visible');
ui.button
.findByTitle(action)
.should('be.visible')
.should('be.enabled')
.click();
});
  • Check out our UI helpers
  • You can use .within(() => {} to limit the scope of your selections. That's preferable to chaining a bunch of filters.
  • There's no need to test minor markup details, like confirming that the confirmation text is inside an h6.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

thanks for suggestion

@github-project-automation github-project-automation Bot moved this from Review to Approved in Cloud Manager Apr 8, 2025
@nikhagra-akamai

Copy link
Copy Markdown
Contributor Author

@mjac0bs we got enough approvals & resolved your comments as well, if all good can we merge?

@nikhagra-akamai nikhagra-akamai added Approved Multiple approvals and ready to merge! and removed Ready for Review labels Apr 8, 2025
@linode-gh-bot

Copy link
Copy Markdown

Cloud Manager UI test results

🎉 540 passing tests on test run #10 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
0 Failing540 Passing4 Skipped108m 37s

@nikhagra-akamai
nikhagra-akamai merged commit c7c4b09 into linode:develop Apr 9, 2025
@github-project-automation github-project-automation Bot moved this from Approved to Merged in Cloud Manager Apr 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Approved Multiple approvals and ready to merge! Cloud Pulse - Alerting Cloud Pulse

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

6 participants