Skip to content

Draft: Render pipelines link as a toast action

What does this MR do and why?

This refactors the A new Auto DevOps pipeline has been created toast.

When this toast was initially implemented, we were still using vue-toasted under the hood, which allowed HTML to be rendered inside toasts' body.

Since then, we have switched over to BootsrapVue's toast component, which only renders plain text in toasts' messages. This is an improvement in terms of security as previous toasts could potentially have been exploited for XSS attacks. But this breaks this particular toast as it contains a link to the pipelines page that doesn't render properly anymore.

In #343096 (closed), we have discussed a couple possible fixes. In the end, we have decided to move the pipelines link to the toast's action. This required that we add the ability to render actions as links in GlToast, which can then be used here to populate the toast's options with the link's text and URL.

Screenshots or screen recordings

Before After
image Screen_Shot_2021-10-18_at_10.51.28_AM

How to set up and validate locally

This toast normally shows up when an Auto DevOps pipeline is triggered from a project's CI/CD settings page. I'm not sure how to properly set a project up to reproduce the actual interaction that should trigger the toast. Instead, I've changed CiCdController to force the toast to show up when the settings page loads:

  1. Apply the following patch by copying the whole code block and running pbpaste | git apply:
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
index 750708071c3..588516c713e 100644
--- a/app/controllers/projects/settings/ci_cd_controller.rb
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -20,6 +20,11 @@ class CiCdController < Projects::ApplicationController
       feature_category :continuous_integration
 
       def show
+        flash[:toast] = {
+          "message": _("A new Auto DevOps pipeline has been created"),
+          "action_text": _("View pipelines"),
+          "action_href": project_pipelines_path(@project)
+        }
         if Feature.enabled?(:ci_pipeline_triggers_settings_vue_ui, @project)
           @triggers_json = ::Ci::TriggerSerializer.new.represent(
             @project.triggers, current_user: current_user, project: @project
  1. Visit a project's CI/CD settings page at /:namespace/:project/-/settings/ci_cd.

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 #343096 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports