Add success modal for pipeline tour success

- celebrate user creation of file

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/pages/projects/blob/show/index.js

@@ -4,6 +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';
 
 document.addEventListener('DOMContentLoaded', () => {
   new BlobViewer(); // eslint-disable-line no-new
@@ -35,4 +36,9 @@ document.addEventListener('DOMContentLoaded', () => {
     // eslint-disable-next-line promise/catch-or-return
     import('~/code_navigation').then(m => m.default());
   }
+
+  if (gon.features?.suggestPipeline) {
+    const tourSuccess = new PipelineTourSuccess();
+    tourSuccess.showModal();
+  }
 });

app/controllers/projects/blob_controller.rb

@@ -31,6 +31,7 @@ class Projects::BlobController < Projects::ApplicationController
 
   before_action only: :show do
     push_frontend_feature_flag(:code_navigation, @project)
+    push_frontend_feature_flag(:suggest_pipeline) if experiment_enabled?(:suggest_pipeline)
   end
 
   def new

app/helpers/blob_helper.rb

@@ -341,4 +341,16 @@ module BlobHelper
       edit_fork_button_tag(common_classes, project, text, edit_blob_fork_params(edit_path))
     end
   end
+
+  def show_suggest_pipeline_creation_celebration?
+    experiment_enabled?(:suggest_pipeline) &&
+      @blob.auxiliary_viewer.valid?(project: @project, sha: @commit.sha, user: current_user) &&
+      @blob.path == Gitlab::FileDetector::PATTERNS[:gitlab_ci] &&
+      @project.uses_default_ci_config? &&
+      cookies[suggest_pipeline_commit_cookie_name].present?
+  end
+
+  def suggest_pipeline_commit_cookie_name
+    "suggest_gitlab_ci_yml_commit_#{@project.id}"
+  end
 end

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'

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

@@ -14,3 +14,5 @@
 
   - title = "Replace #{@blob.name}"
   = render 'projects/blob/upload', title: title, placeholder: title, button_title: 'Replace file', form_path: project_update_blob_path(@project, @id), method: :put
+
+= render partial: 'pipeline_tour_success' if show_suggest_pipeline_creation_celebration?

locale/gitlab.pot

@@ -9448,6 +9448,9 @@ msgstr ""
 msgid "Go to %{link_to_google_takeout}."
 msgstr ""
 
+msgid "Go to Pipelines"
+msgstr ""
+
 msgid "Go to Webhooks"
 msgstr ""
 
@@ -18894,6 +18897,9 @@ 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 ""
 
@@ -19023,6 +19029,9 @@ msgstr ""
 msgid "Thanks! Don't show me this again"
 msgstr ""
 
+msgid "That's it, well done!"
+msgstr ""
+
 msgid "The \"%{group_path}\" group allows you to sign in with your Single Sign-On Account"
 msgstr ""
 
@@ -19249,6 +19258,9 @@ 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 Cookies from 'js-cookie';
+
+describe('PipelineTourSuccess', () => {
+  let pipelineSuccess;
+  const cookieName = 'some_cookie';
+
+  beforeEach(() => {
+    setFixtures(`
+      <div class="modal js-success-pipeline-modal" data-commit-cookie="${cookieName}">
+      </div>
+    `);
+    jest.spyOn(Cookies, 'remove');
+
+    pipelineSuccess = new PipelineTourSuccess();
+  });
+
+  it('launches the modal', () => {
+    pipelineSuccess.disableModalFromRenderingAgain();
+
+    expect(Cookies.remove).toHaveBeenCalledWith(cookieName);
+  });
+});

spec/helpers/blob_helper_spec.rb

@@ -27,7 +27,7 @@ describe BlobHelper do
   end
 
   describe "#edit_blob_link" do
-    let(:namespace) { create(:namespace, name: 'gitlab' )}
+    let(:namespace) { create(:namespace, name: 'gitlab') }
     let(:project) { create(:project, :repository, namespace: namespace) }
 
     before do
@@ -202,6 +202,90 @@ describe BlobHelper do
         end
       end
     end
+
+    describe '#show_suggest_pipeline_creation_celebration?' do
+      let(:blob) { fake_blob(path: Gitlab::FileDetector::PATTERNS[:gitlab_ci]) }
+      let(:current_user) { create(:user) }
+
+      before do
+        assign(:project, project)
+        assign(:blob, blob)
+        assign(:commit, double('Commit', sha: 'whatever'))
+        helper.request.cookies["suggest_gitlab_ci_yml_commit_#{project.id}"] = 'true'
+        allow(blob).to receive(:auxiliary_viewer).and_return(double('viewer', valid?: true))
+        allow(helper).to receive(:current_user).and_return(current_user)
+      end
+
+      context 'experiment enabled' do
+        before do
+          allow(helper).to receive(:experiment_enabled?).and_return(true)
+        end
+
+        it 'is true' do
+          expect(helper.show_suggest_pipeline_creation_celebration?).to be_truthy
+        end
+
+        context 'file is invalid format' do
+          before do
+            allow(blob).to receive(:auxiliary_viewer).and_return(double('viewer', valid?: false))
+          end
+
+          it 'is false' do
+            expect(helper.show_suggest_pipeline_creation_celebration?).to be_falsey
+          end
+        end
+
+        context 'path is not a ci file' do
+          before do
+            allow(blob).to receive(:path).and_return('something_bad')
+          end
+
+          it 'is false' do
+            expect(helper.show_suggest_pipeline_creation_celebration?).to be_falsey
+          end
+        end
+
+        context 'does not use the default ci config' do
+          before do
+            project.ci_config_path = 'something_bad'
+          end
+
+          it 'is false' do
+            expect(helper.show_suggest_pipeline_creation_celebration?).to be_falsey
+          end
+        end
+
+        context 'does not have the needed cookie' do
+          before do
+            helper.request.cookies.delete "suggest_gitlab_ci_yml_commit_#{project.id}"
+          end
+
+          it 'is false' do
+            expect(helper.show_suggest_pipeline_creation_celebration?).to be_falsey
+          end
+        end
+      end
+
+      context 'experiment disabled' do
+        before do
+          allow(helper).to receive(:experiment_enabled?).and_return(false)
+        end
+
+        it 'is false' do
+          expect(helper.show_suggest_pipeline_creation_celebration?).to be_falsey
+        end
+      end
+    end
+  end
+
+  describe 'suggest_pipeline_commit_cookie_name' do
+    let(:project) { create(:project) }
+
+    it 'uses project id to make up the cookie name' do
+      assign(:project, project)
+
+      expect(helper.suggest_pipeline_commit_cookie_name).to eq "suggest_gitlab_ci_yml_commit_#{project.id}"
+    end
   end
 
   describe '#ide_edit_path' do

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