Convert flash alerts to toast messages

- Added the ability to show toasts
- Converted the flash alerts to toasts

app/controllers/projects/settings/ci_cd_controller.rb

@@ -13,7 +13,7 @@ module Projects
         Projects::UpdateService.new(project, current_user, update_params).tap do |service|
           result = service.execute
           if result[:status] == :success
-            flash[:notice] = _("Pipelines settings for '%{project_name}' were successfully updated.") % { project_name: @project.name }
+            flash[:toast] = _("Pipelines settings for '%{project_name}' were successfully updated.") % { project_name: @project.name }
 
             run_autodevops_pipeline(service)
 
@@ -39,7 +39,7 @@ module Projects
       def reset_registration_token
         @project.reset_runners_token!
 
-        flash[:notice] = _('New runners registration token has been generated!')
+        flash[:toast] = _("New runners registration token has been generated!")
         redirect_to namespace_project_settings_ci_cd_path
       end
 
@@ -65,12 +65,14 @@ module Projects
         return unless service.run_auto_devops_pipeline?
 
         if @project.empty_repo?
-          flash[:warning] = _("This repository is currently empty. A new Auto DevOps pipeline will be created after a new file has been pushed to a branch.")
+          flash[:notice] = _("This repository is currently empty. A new Auto DevOps pipeline will be created after a new file has been pushed to a branch.")
           return
         end
 
         CreatePipelineWorker.perform_async(project.id, current_user.id, project.default_branch, :web, ignore_skip_ci: true, save_on_errors: false)
-        flash[:success] = "A new Auto DevOps pipeline has been created, go to <a href=\"#{project_pipelines_path(@project)}\">Pipelines page</a> for details".html_safe
+
+        pipelines_link_start = '<a href="%{url}">'.html_safe % { url: project_pipelines_path(@project) }
+        flash[:toast] = _("A new Auto DevOps pipeline has been created, go to %{pipelines_link_start}Pipelines page%{pipelines_link_end} for details") % { pipelines_link_start: pipelines_link_start, pipelines_link_end: "</a>".html_safe }
       end
 
       def define_variables

app/views/layouts/_flash.html.haml

+-# We currently only support `alert`, `notice`, `success`, 'toast'
 .flash-container.flash-container-page.sticky
-  -# We currently only support `alert`, `notice`, `success`
   - flash.each do |key, value|
-    -# Don't show a flash message if the message is nil
-    - if value
+    - if key == 'toast' && value
+      .js-toast-message{ data: { message: value } }
+    - elsif value
       %div{ class: "flash-#{key} mb-2" }
         %span= value
         %div{ class: "close-icon-wrapper js-close-icon" }

changelogs/unreleased/32897-convert-alerts-to-toasts.yml

+---
+title: Convert flash alerts to toasts
+merge_request: 20356
+author:
+type: added

ee/app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js

@@ -2,10 +2,12 @@ import Vue from 'vue';
 import Dashboard from 'ee/vue_shared/license_management/license_management.vue';
 import ProtectedEnvironmentCreate from 'ee/protected_environments/protected_environment_create';
 import ProtectedEnvironmentEditList from 'ee/protected_environments/protected_environment_edit_list';
+import showToast from '~/vue_shared/plugins/global_toast';
 import '~/pages/projects/settings/ci_cd/show/index';
 
 document.addEventListener('DOMContentLoaded', () => {
   const el = document.getElementById('js-managed-licenses');
+  const toasts = document.querySelectorAll('.js-toast-message');
 
   if (el && el.dataset && el.dataset.apiUrl) {
     // eslint-disable-next-line no-new
@@ -21,6 +23,8 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 
+  toasts.forEach(toast => showToast(toast.dataset.message));
+
   // eslint-disable-next-line no-new
   new ProtectedEnvironmentCreate();
 

locale/gitlab.pot

@@ -697,6 +697,9 @@ msgstr ""
 msgid "A merge request approval is required when the license compliance report contains a blacklisted license."
 msgstr ""
 
+msgid "A new Auto DevOps pipeline has been created, go to %{pipelines_link_start}Pipelines page%{pipelines_link_end} for details"
+msgstr ""
+
 msgid "A new Release %{tag} for %{name} was published. Visit the %{release_link_start}Releases page%{release_link_end} to read more about it."
 msgstr ""
 

spec/controllers/projects/settings/ci_cd_controller_spec.rb

@@ -81,6 +81,7 @@ describe Projects::Settings::CiCdController do
 
     it 'resets runner registration token' do
       expect { subject }.to change { project.reload.runners_token }
+      expect(flash[:toast]).to eq('New runners registration token has been generated!')
     end
 
     it 'redirects the user to admin runners page' do
@@ -106,7 +107,7 @@ describe Projects::Settings::CiCdController do
       subject
 
       expect(response).to have_gitlab_http_status(302)
-      expect(flash[:notice]).to eq("Pipelines settings for '#{project.name}' were successfully updated.")
+      expect(flash[:toast]).to eq("Pipelines settings for '#{project.name}' were successfully updated.")
     end
 
     context 'when updating the auto_devops settings' do
@@ -131,8 +132,8 @@ describe Projects::Settings::CiCdController do
         end
 
         context 'when the project repository is empty' do
-          it 'sets a warning flash' do
-            expect(subject).to set_flash[:warning]
+          it 'sets a notice flash' do
+            expect(subject).to set_flash[:notice]
           end
 
           it 'does not queue a CreatePipelineWorker' do
@@ -145,10 +146,10 @@ describe Projects::Settings::CiCdController do
         context 'when the project repository is not empty' do
           let(:project) { create(:project, :repository) }
 
-          it 'sets a success flash' do
+          it 'displays a toast message' do
             allow(CreatePipelineWorker).to receive(:perform_async).with(project.id, user.id, project.default_branch, :web, any_args)
 
-            expect(subject).to set_flash[:success]
+            expect(subject).to set_flash[:toast]
           end
 
           it 'queues a CreatePipelineWorker' do