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:
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
- Go to a project's
Settings > CI/CD
page. - 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
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.
Other possibles fixes that we chose not to implement
VNode
s
Render BootstrapVue's toasts can display custom content if they are passed an array of VNode
s 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 VNode
s 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:
/cc @nagyv-gitlab