Convert celebration modal to vue

- as per helping with overall design concepts

app/assets/javascripts/blob/pipeline_tour_success.js

-import $ from 'jquery';
-import Cookies from 'js-cookie';
-
-export default class PipelineTourSuccess {
-  constructor() {
-    this.successModal = $('.js-success-pipeline-modal');
-  }
-
-  showModal() {
-    if (!this.successModal.length) return;
-    this.successModal.modal('show');
-
-    this.disableModalFromRenderingAgain();
-  }
-
-  disableModalFromRenderingAgain() {
-    Cookies.remove(this.successModal.data('commit-cookie'));
-  }
-}

app/assets/javascripts/blob/pipeline_tour_success_modal.vue

+<script>
+import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
+import { sprintf, s__, __ } from '~/locale';
+import Cookies from 'js-cookie';
+import { glEmojiTag } from '~/emoji';
+
+export default {
+  beginnerLink:
+    'https://about.gitlab.com/blog/2018/01/22/a-beginners-guide-to-continuous-integration/',
+  exampleLink: 'https://docs.gitlab.com/ee/ci/examples/',
+  bodyMessage: s__(
+    'MR widget|The pipeline will now run automatically every time you commit code. Pipelines are useful for deploying static web pages, detecting vulnerabilities in dependencies, static or dynamic application security testing (SAST and DAST), and so much more!',
+  ),
+  modalTitle: sprintf(
+    __("That's it, well done!%{celebrate}"),
+    {
+      celebrate: glEmojiTag('tada'),
+    },
+    false,
+  ),
+  components: {
+    GlModal,
+    GlSprintf,
+    GlLink,
+  },
+  props: {
+    goToPipelinesPath: {
+      type: String,
+      required: true,
+    },
+    commitCookie: {
+      type: String,
+      required: true,
+    },
+  },
+  mounted() {
+    this.disableModalFromRenderingAgain();
+  },
+  methods: {
+    disableModalFromRenderingAgain() {
+      Cookies.remove(this.commitCookie);
+    },
+  },
+};
+</script>
+<template>
+  <gl-modal
+    visible
+    size="sm"
+    :title="$options.modalTitle"
+    modal-id="success-pipeline-modal-id-not-used"
+  >
+    <p>
+      {{ $options.bodyMessage }}
+    </p>
+    <gl-sprintf
+      :message="
+        s__(`MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd}
+           and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd}
+           to see all the cool stuff you can do with it.`)
+      "
+    >
+      <template #beginnerLink="{content}">
+        <gl-link :href="$options.beginnerLink" target="_blank">
+          {{ content }}
+        </gl-link>
+      </template>
+      <template #exampleLink="{content}">
+        <gl-link :href="$options.exampleLink" target="_blank">
+          {{ content }}
+        </gl-link>
+      </template>
+    </gl-sprintf>
+    <template #modal-footer>
+      <a :href="goToPipelinesPath" class="btn btn-success">{{ __('Go to Pipelines') }}</a>
+    </template>
+  </gl-modal>
+</template>

app/assets/javascripts/pages/projects/blob/show/index.js

@@ -4,7 +4,7 @@ import BlobViewer from '~/blob/viewer/index';
 import initBlob from '~/pages/projects/init_blob';
 import GpgBadges from '~/gpg_badges';
 import '~/sourcegraph/load';
-import PipelineTourSuccess from '~/blob/pipeline_tour_success';
+import PipelineTourSuccessModal from '~/blob/pipeline_tour_success_modal.vue';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
@@ -38,7 +38,23 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   if (gon.features?.suggestPipeline) {
-    const tourSuccess = new PipelineTourSuccess();
-    tourSuccess.showModal();
+    const successPipelineEl = document.querySelector('.js-success-pipeline-modal');
+
+    if (successPipelineEl) {
+      // eslint-disable-next-line no-new
+      new Vue({
+        el: successPipelineEl,
+        render(createElement) {
+          const { commitCookie, pipelinesPath: goToPipelinesPath } = this.$el.dataset;
+
+          return createElement(PipelineTourSuccessModal, {
+            props: {
+              goToPipelinesPath,
+              commitCookie,
+            },
+          });
+        },
+      });
+    }
   }
 });

app/views/projects/blob/_pipeline_tour_success.html.haml

-- beginner_link_url = 'https://about.gitlab.com/blog/2018/01/22/a-beginners-guide-to-continuous-integration/'
-- beginner_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: beginner_link_url }
-- example_link_url = 'https://docs.gitlab.com/ee/ci/examples/'
-- example_link_start = '<a href="%{url}" target="_blank">'.html_safe % { url: example_link_url }
-
-.modal.js-success-pipeline-modal{ 'data-commit-cookie': suggest_pipeline_commit_cookie_name, tabindex: -1 }
-  .modal-dialog
-    .modal-content
-      .modal-header
-        %h4.modal-title
-          = _("That's it, well done!")
-          = emoji_icon('tada')
-        %button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
-          %span.vertical-align-middle{ "aria-hidden": true }= sprite_icon("close", size: 16)
-      .modal-body
-        %p
-          = _('The pipeline will now run automatically every time you commit code.<br />Pipelines are useful for deploying static web pages, detecting<br />vulnerabilities in dependencies, static or dynamic application security<br />testing (SAST and DAST), and so much more!').html_safe
-        %span
-          = _("Take a look at our %{beginner_link_start}Beginner's Guide to Continuous Integration%{link_end} and our<br />%{example_link_start}examples of GitLab CI/CD%{link_end} to see all the cool stuff you can do with it.").html_safe % { beginner_link_start: beginner_link_start, link_end: '</a>'.html_safe, example_link_start: example_link_start }
-      .modal-footer
-        = link_to _('Go to Pipelines'), project_pipelines_path(@project), class: 'btn btn-success'
+.js-success-pipeline-modal{ 'data-commit-cookie': suggest_pipeline_commit_cookie_name, 'data-pipelines-path': project_pipelines_path(@project) }

locale/gitlab.pot

@@ -11690,6 +11690,12 @@ msgstr ""
 msgid "MERGED"
 msgstr ""
 
+msgid "MR widget|Take a look at our %{beginnerLinkStart}Beginner's Guide to Continuous Integration%{beginnerLinkEnd} and our %{exampleLinkStart}examples of GitLab CI/CD%{exampleLinkEnd} to see all the cool stuff you can do with it."
+msgstr ""
+
+msgid "MR widget|The pipeline will now run automatically every time you commit code. Pipelines are useful for deploying static web pages, detecting vulnerabilities in dependencies, static or dynamic application security testing (SAST and DAST), and so much more!"
+msgstr ""
+
 msgid "MRApprovals|Approved by"
 msgstr ""
 
@@ -18897,9 +18903,6 @@ msgstr ""
 msgid "TagsPage|protected"
 msgstr ""
 
-msgid "Take a look at our %{beginner_link_start}Beginner's Guide to Continuous Integration%{link_end} and our<br />%{example_link_start}examples of GitLab CI/CD%{link_end} to see all the cool stuff you can do with it."
-msgstr ""
-
 msgid "Target Branch"
 msgstr ""
 
@@ -19029,7 +19032,7 @@ msgstr ""
 msgid "Thanks! Don't show me this again"
 msgstr ""
 
-msgid "That's it, well done!"
+msgid "That's it, well done!%{celebrate}"
 msgstr ""
 
 msgid "The \"%{group_path}\" group allows you to sign in with your Single Sign-On Account"
@@ -19258,9 +19261,6 @@ msgstr ""
 msgid "The pipeline has been deleted"
 msgstr ""
 
-msgid "The pipeline will now run automatically every time you commit code.<br />Pipelines are useful for deploying static web pages, detecting<br />vulnerabilities in dependencies, static or dynamic application security<br />testing (SAST and DAST), and so much more!"
-msgstr ""
-
 msgid "The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user."
 msgstr ""
 

spec/frontend/blob/pipeline_tour_success_spec.js

-import PipelineTourSuccess from '~/blob/pipeline_tour_success';
+import pipelineTourSuccess from '~/blob/pipeline_tour_success_modal.vue';
+import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
+import { GlSprintf, GlModal } from '@gitlab/ui';
 
-describe('PipelineTourSuccess', () => {
-  let pipelineSuccess;
-  const cookieName = 'some_cookie';
+describe('PipelineTourSuccessModal', () => {
+  let wrapper;
+  let cookieSpy;
+  const goToPipelinesPath = 'some_pipeline_path';
+  const commitCookie = 'some_cookie';
 
   beforeEach(() => {
-    setFixtures(`
-      <div class="modal js-success-pipeline-modal" data-commit-cookie="${cookieName}">
-      </div>
-    `);
-    jest.spyOn(Cookies, 'remove');
+    wrapper = shallowMount(pipelineTourSuccess, {
+      propsData: {
+        goToPipelinesPath,
+        commitCookie,
+      },
+    });
 
-    pipelineSuccess = new PipelineTourSuccess();
+    cookieSpy = jest.spyOn(Cookies, 'remove');
   });
 
-  it('launches the modal', () => {
-    pipelineSuccess.disableModalFromRenderingAgain();
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('has expected structure', () => {
+    const modal = wrapper.find(GlModal);
+    const sprintf = modal.find(GlSprintf);
+
+    expect(modal.attributes('title')).toContain("That's it, well done!");
+    expect(sprintf.exists()).toBe(true);
+  });
+
+  it('calls to remove cookie', () => {
+    wrapper.vm.disableModalFromRenderingAgain();
 
-    expect(Cookies.remove).toHaveBeenCalledWith(cookieName);
+    expect(cookieSpy).toHaveBeenCalledWith(commitCookie);
   });
 });

spec/views/projects/blob/_pipeline_tour_success_spec.html_spec.rb

-# frozen_string_literal: true
-
-require 'spec_helper'
-
-describe 'projects/blob/_pipeline_tour_success' do
-  let(:project) { create(:project) }
-
-  before do
-    assign(:project, project)
-    allow(view).to receive(:suggest_pipeline_commit_cookie_name).and_return('some_cookie')
-  end
-
-  it 'has basic structure and content' do
-    render
-
-    expect(rendered).to have_selector('h4', text: "That's it, well done!")
-    expect(rendered).to have_selector('button.close')
-    expect(rendered).to have_selector('p', text: 'The pipeline will now run automatically every time you commit code.')
-    expect(rendered).to have_link("Beginner's Guide to Continuous Integration", href: 'https://about.gitlab.com/blog/2018/01/22/a-beginners-guide-to-continuous-integration/')
-    expect(rendered).to have_link('examples of GitLab CI/CD', href: 'https://docs.gitlab.com/ee/ci/examples/')
-    expect(rendered).to have_link('Go to Pipelines', href: "/#{project.full_path}/pipelines", class: 'btn-success')
-  end
-end