Test settings and save changes should be separate actions

Problem to solve

Currently, when the user clicks on the "Test settings and save changes" button, the user is taken back to the Integrations list page. This creates a point of friction for the user, because they now lost context of they were doing. They now need to scroll down to find the integration again to see if the settings were correctly applied.

The expected behavior would be to stay on the current page and update the "Recent Deliveries" table below in order to provide the user with the correct feedback.

Potential solution

Create 2 separate buttons for these interactions.

1. Save
2. Test settings

👉 Figma prototype

See Designs sections for mockups and copy.

Backend flow

• User tests the service
  • Validations failed => Fills required fields =>
  • Test successful
  • Test failed
• User saves the service
  • Not Active
    • No validations =>
    • Saved
  • Active
    • Validations failed => Fills required fields =>
    • Saved

Reference

This was brought up as a followup item in this research study, under the "Larger UX Improvements" section: ux-research#601 (comment 298353080)