Skip to content

Make error alert accept error dictionary and default error

Vamsi Vempati requested to merge 420010-friendly-error-handling into master

What does this MR do and why?

Make friendly error alert in purchase flow accept error dictionary and default error to make it reusable

  • Makes error_alert.vue reusable from outside purchase flows by allowing to specify specific error dictionary and default error message
  • Updates the utils to be pure functions for re-usability
  • Moves error_alert.vue up a level to make it reusable from outside purchase flows, eg. usage quotas
  • Moves error constants to a separate file

We'll be using the updated error_alert.vue component in this MR from usage quotas page.

Screenshots or screen recordings

No changes to the UI, corresponding friendly errors should be displayed as before.

Scenario Before After
Error message as string
Plan Purchase flowScreenshot_2023-08-04_at_10.13.01_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.13.04_AM
Plan Purchase flowScreenshot_2023-08-04_at_10.27.44_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.27.46_AM
Error with attribute map
Plan Purchase flowScreenshot_2023-08-04_at_10.15.22_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.15.24_AM
Plan Purchase flowScreenshot_2023-08-04_at_10.28.36_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.28.39_AM
Error message as object
Plan Purchase flowScreenshot_2023-08-04_at_10.16.33_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.16.38_AM
Plan Purchase flowScreenshot_2023-08-04_at_10.29.16_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.29.18_AM
Error with no message
Plan Purchase flowScreenshot_2023-08-04_at_10.17.04_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.17.15_AM
Plan Purchase flowScreenshot_2023-08-04_at_10.30.25_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.30.29_AM
Error with no matching friendly error
Plan Purchase flowScreenshot_2023-08-04_at_10.20.47_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.21.05_AM
Plan Purchase flowScreenshot_2023-08-04_at_10.30.54_AM
AddOn Purchase flowScreenshot_2023-08-04_at_10.30.57_AM

How to set up and validate locally

  1. Customers Dot needs to be setup in order to view the billing page for a group
  2. Start GDK in SaaS mode GITLAB_SIMULATE_SAAS=1 gdk start
  3. Login into gdk
  4. Go to a group where you are an owner (or create one)
  5. Copy the group id
  6. Plan purchase flow: Visit <your-gdk-url>/-/subscriptions/new?namespace_id=<your-group-id>&plan_id=2c92a00d76f0d5060176f2fb0a5029ff
  7. AddOn Purchase Flow: Visit <your-gdk-url>/-/subscriptions/buy_minutes?selected_group=<your-group-id>
  8. The best way to see the error as soon as you land on the page is to use this patch: error_mapping_patch.patch
    • You can change the constant in new Error(EMAIL_TAKEN_ERROR) to
      • EMAIL_TAKEN_ERROR_TYPE (for attribute map)
      • FIRST_NAME_BLANK_ERROR_VARIATION (for error message as object)
      • empty (new Error() for no message)
      • a random string new Error('no matching friendly error')) for no mapping available scenario.

Storybook

  1. Start storybook yarn storybook:start
  2. Visit http://localhost:9002/?path=/story/ee-vue-shared-components-error-alert--default

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #420010

Edited by Vamsi Vempati

Merge request reports

Loading