New Auto DevOps pipeline toast does not render pipeline link

Summary

When an Auto DevOps pipeline gets triggered from a project's CI/CD settings page, the toast that shows up doesn't render the link to the pipelines page properly:

image

This happens because we have changed the underlying library that GitLab UI uses to display toasts. We used to use vue-toasted, which allowed HTML content to be rendered by default. In %14.1 we have switched to BootstrapVue's built-in toast plugin which only renders plain text.

Steps to reproduce

  1. Go to a project's Settings > CI/CD page.
  2. Trigger a new Auto DevOps pipeline (need more details here).

Example Project

What is the current bug behavior?

The pipelines page link is escaped.

What is the expected correct behavior?

The toast should contain a clickable link to the pipelines page.

Relevant logs and/or screenshots

image

Possible fixes

Remove the link

Based on @jeldergl's accessibility concerns, another solution might be to remove the link altogether. We would keep the text as is, but users would have to access the pipelines page via the left sidebar.

Screen_Shot_2021-10-26_at_9.55.07_AM

Other possibles fixes that we chose not to implement

Render VNodes

BootstrapVue's toasts can display custom content if they are passed an array of VNodes instead of a plain text message. More details in the docs: https://bootstrap-vue.org/docs/components/toast#advanced-usage.

We could leverage that approach to render the Auto DevOps pipeline message as a set of VNodes so that the link renders as expected.

Render the link as a toast action

This approach involves changing the toasts looks a bit. Instead of embedding the link inside the message, we could leverage the action option to render the link separately, as the toast's action. This involves that we add support for rendering action links in GlToast (the option currently only supports a callback). Here's an MR that does just that: gitlab-ui!2438 (closed).

Ultimately, the toast would look something like this:

Screen_Shot_2021-10-14_at_4.20.39_PM

/cc @nagyv-gitlab

Edited by Paul Gascou-Vaillancourt