Skip to content

Fix Zuora frame size after client-side error

What does this MR do?

When Zuora validated the form it throws a client-side error which we want to show. But Zuora has two types of client-side errors: validation and validation after submit. To keep errors of the first type validations we just update the iframe src attribute but we have a race condition here:

  • We set isLoading to true and hide the Zuora frame
  • Zuora validates the form on the client and throws an error
  • We update the iframe src and set isLoading to false which causes the Zuora iframe to be displayed. The race condition happens right after the Zuora throws an error. Zuora always tries to resize the iframe to its container to fit the content. In our case the Zuora iframe sets the size to 0,0 because Vue didn't update the DOM yet due to isLoading being false. To let the Zuora iframe to resize to correct size let's wrap the update step with nextTick.

Screenshots (strongly suggested)

I am attaching the diagram instead of screenshots because this happens rarely and in production only.

Before

sequenceDiagram
    Vue Cmp->>+Vue Cmp: isLoading = true
    Vue Cmp->>+Zuora: Submit the form
    Zuora->>+Vue Cmp: Wait! There is an client-side error!
    Vue Cmp->>+Vue Cmp: Let's display it then.
    Vue Cmp->>+Vue Cmp: Update the iframe src to show the errors
    Zuora->>+Zuora: Ok, I need to update size of my frame
    Zuora->>+Zuora: (the loading indicator is still visible here and the container's size is (0,0)
    Vue Cmp->>+Vue Cmp: isLoading = false
    Vue Cmp->>+Vue Cmp: the iframe's container is visible now and has correct size
    Zuora->>+Zuora: I wasn't able to resize to actual size.:(..

After

sequenceDiagram
    Vue Cmp->>+Vue Cmp: isLoading = true
    Vue Cmp->>+Zuora: Submit the form
    Zuora->>+Vue Cmp: Wait! There is an client-side error!
    Vue Cmp->>+Vue Cmp: Let's display it then.
    Vue Cmp->>+Zuora: Hold on! Wait for the next update!
    Vue Cmp->>+Vue Cmp: isLoading = false
    Vue Cmp->>+Vue Cmp: the iframe's container is visible now and has correct size
    Vue Cmp->>+Vue Cmp: isLoading = false
    Vue Cmp->>+Vue Cmp: Update the iframe src to show the errors
    Zuora->>+Zuora: Ok, I need to update size of my frame

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Merge request reports

Loading