Skip to content

Centralise page-level errors handling for Subscriptions flow

What does this MR do and why?

Describe in detail what your merge request does and why.

This MR centralises the error display handling at the checkout component level for the Subscription Purchase flow.

Relates to #386772 (closed).

Note that this MR changes the alert position (see screenshots). See this comment for reference.

Title MR
Handle all page-level errors at the parent component level (Add-ons flow) !107909 (merged)
Handle all page-level errors at the parent component level (subscription flow) 👈 You're here
Handle payment-related errors at the parent component level !108095 (merged)

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screenshot_2023-01-23_at_16.33.37 Screenshot_2023-01-23_at_16.28.50

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Be sure to have both gdk and CustomersDot running (installation steps)
  2. Login into GitLab
  3. Visit <your-gdk-url>/-/subscriptions/new?plan_id=2c92c0f876e0f4cc0176e176a08f1b70 (be sure you're an owner of at least one group)
  4. The best way to see the error as soon as you land on the page is to use this patch
The patch
<+>UTF-8
===================================================================
diff --git a/ee/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue b/ee/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue
--- a/ee/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue	(revision ae1f91a9886c1dbca05a942ebd05dcfd7478dee6)
+++ b/ee/app/assets/javascripts/subscriptions/new/components/checkout/subscription_details.vue	(date 1674833819287)
@@ -42,6 +42,9 @@
   directives: {
     autoFocusOnShow,
   },
+  created() {
+    this.handleError(new Error('Yikes!'));
+  },
   mixins: [Tracking.mixin()],
   apollo: {
     billableData: {

MR acceptance checklist

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

Edited by Angelo Gulina

Merge request reports