[Synthetics] Settings page alerting defaults tab

[shahzad31]

The Alerting tab only has 1 setting - “Default Connector”. This information is necessary for Synthetics alerts to “work out of the box”. It uses a EuiPanel hasBorder paddingSize="l", EuiDescribedFromGroup , and an EuiComboBox which can be used to select one or connectors if they exist. Most of the code for this already exists for Uptime, but there are a few details to note:

• For cloud deployments, the combobox should be pre-populated with the Elastic-cloud-SMTP connector. The “Email to” field should be pre-populated with the email address used to create the cloud account.
• The “Email to” field only appears if an Email connector is selected. It appears directly below the combobox (the design is slightly different than Uptime).
  • When an empty “Email to” field appears, DO NOT immediately invalidate it like we currently do in Uptime.
• If no connectors exist / none are selected
  • use placeholder text “Select one or more connectors”
  • show an empty message in the combobox dropdown that says “No connectors found. Try adding one.”
• Clicking “Add connector” opens a flyout which is a shareable component. After configuring a connector in the flyout, it should be added to the combobox.
• There is a disabled “Apply changes” button that toggles to a primary filled button when the form is “dirty”. When the form is dirty, another button “Discard changes” appears next to the “Apply changes button”.
  
  • If users try and navigate away or close the page while the page has edits, show a browser dialogue window.
    • Title: “Discard changes?”
    • Message: “You changes will be lost if you leave this page”
    • Cancel button: “Cancel”
    • Confirm button: “Discard changes”

[elasticmachine]

Pinging @elastic/uptime (Team:uptime)

[dominiqueclarke]

Post FF testing raised the following bugs

#151796
#151795
#151791

[dominiqueclarke]

Post FF testing on 8.7.0-SNAPSHOT LGTM after bugs have been resolved.