Merge branch '63-nudge-users-to-select-a-template-to-set-up-a-pipeline' into 'master'

Nudge users to select a gitlab-ci.yml template

See merge request gitlab-org/gitlab!24622

app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue

+<script>
+import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui';
+import Cookies from 'js-cookie';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import { s__ } from '~/locale';
+import { glEmojiTag } from '~/emoji';
+
+export default {
+  components: {
+    GlPopover,
+    GlSprintf,
+    GlIcon,
+    GlButton,
+  },
+  props: {
+    target: {
+      type: String,
+      required: true,
+    },
+    cssClass: {
+      type: String,
+      required: true,
+    },
+    dismissKey: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      popoverDismissed: parseBoolean(Cookies.get(this.dismissKey)),
+    };
+  },
+  computed: {
+    suggestTitle() {
+      return s__(`suggestPipeline|1/2: Choose a template`);
+    },
+    suggestContent() {
+      return s__(
+        `suggestPipeline|We recommend the %{boldStart}Code Quality%{boldEnd} template, which will add a report widget to your Merge Requests. This way you’ll learn about code quality degradations much sooner. %{footerStart} Goodbye technical debt! %{footerEnd}`,
+      );
+    },
+    emoji() {
+      return glEmojiTag('wave');
+    },
+  },
+  methods: {
+    onDismiss() {
+      this.popoverDismissed = true;
+      Cookies.set(this.dismissKey, this.popoverDismissed, { expires: 365 });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-popover
+    v-if="!popoverDismissed"
+    show
+    :target="target"
+    placement="rightbottom"
+    trigger="manual"
+    container="viewport"
+    :css-classes="[cssClass]"
+  >
+    <template #title>
+      <gl-button :aria-label="__('Close')" class="btn-blank float-right" @click="onDismiss">
+        <gl-icon name="close" aria-hidden="true" />
+      </gl-button>
+      {{ suggestTitle }}
+    </template>
+
+    <gl-sprintf :message="suggestContent">
+      <template #bold="{content}">
+        <strong> {{ content }} </strong>
+      </template>
+      <template #footer="{content}">
+        <div class="mt-3">
+          {{ content }}
+          <span v-html="emoji"></span>
+        </div>
+      </template>
+    </gl-sprintf>
+  </gl-popover>
+</template>

app/assets/javascripts/blob/suggest_gitlab_ci_yml/index.js

+import Vue from 'vue';
+import Popover from './components/popover.vue';
+
+export default el =>
+  new Vue({
+    el,
+    render(createElement) {
+      return createElement(Popover, {
+        props: {
+          target: el.dataset.target,
+          cssClass: el.dataset.cssClass,
+          dismissKey: el.dataset.dismissKey,
+        },
+      });
+    },
+  });

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

 import initBlobBundle from '~/blob_edit/blob_bundle';
+import initPopover from '~/blob/suggest_gitlab_ci_yml';
 
-document.addEventListener('DOMContentLoaded', initBlobBundle);
+document.addEventListener('DOMContentLoaded', () => {
+  initBlobBundle();
+
+  const suggestEl = document.querySelector('.js-suggest-gitlab-ci-yml');
+
+  if (suggestEl) {
+    initPopover(suggestEl);
+  }
+});

app/assets/stylesheets/components/popover.scss

@@ -138,3 +138,15 @@
     max-width: 40%;
   }
 }
+
+.suggest-gitlab-ci-yml {
+  margin-top: -1em;
+
+  .popover-header {
+    padding: $gl-padding;
+
+    .ic-close {
+      margin-top: -1em;
+    }
+  }
+}

app/helpers/suggest_pipeline_helper.rb

+# frozen_string_literal: true
+
+module SuggestPipelineHelper
+  def should_suggest_gitlab_ci_yml?
+    Feature.enabled?(:suggest_pipeline) &&
+      current_user &&
+      params[:suggest_gitlab_ci_yml] == 'true'
+  end
+end

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

@@ -17,8 +17,10 @@
       %span.pull-left.append-right-10
         \/
       = text_field_tag 'file_name', params[:file_name], placeholder: "File name",
-        required: true, class: 'form-control new-file-name js-file-path-name-input'
+        required: true, class: 'form-control new-file-name js-file-path-name-input', value: params[:file_name] || (should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : '')
       = render 'template_selectors'
+      - if should_suggest_gitlab_ci_yml?
+        = render partial: 'suggest_gitlab_ci_yml', locals: { target: '#gitlab-ci-yml-selector', dismiss_key: "suggest_gitlab_ci_yml_#{@project.id}" }
 
     .file-buttons
       - if is_markdown

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

+.js-suggest-gitlab-ci-yml{ data: { toggle: 'popover',
+  target: target,
+  css_class: 'suggest-gitlab-ci-yml ml-4',
+  dismiss_key: dismiss_key } }

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

 .template-selectors-menu.gl-pl-2
   .template-selector-dropdowns-wrap
     .template-type-selector.js-template-type-selector-wrap.hidden
-      = dropdown_tag(_("Select a template type"), options: { toggle_class: 'js-template-type-selector qa-template-type-dropdown', dropdown_class: 'dropdown-menu-selectable'} )
+      - toggle_text = should_suggest_gitlab_ci_yml? ? '.gitlab-ci.yml' : 'Select a template type'
+      = dropdown_tag(_(toggle_text), options: { toggle_class: 'js-template-type-selector qa-template-type-dropdown', dropdown_class: 'dropdown-menu-selectable' })
     .license-selector.js-license-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-license-selector qa-license-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: licenses_for_select(@project), project: @project.name, fullname: @project.namespace.human_name } } )
     .gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitignore-selector qa-gitignore-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitignore_names(@project) } } )
-    .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
+    #gitlab-ci-yml-selector.gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-gitlab-ci-yml-selector qa-gitlab-ci-yml-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls(@project) } } )
     .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden
       = dropdown_tag(_("Apply a template"), options: { toggle_class: 'js-dockerfile-selector qa-dockerfile-dropdown', dropdown_class: 'dropdown-menu-selectable', filter: true, placeholder: "Filter", data: { data: dockerfile_names(@project) } } )

changelogs/unreleased/63-nudge-users-to-select-a-template-to-set-up-a-pipeline.yml

+---
+title: Nudge users to select a gitlab-ci.yml template
+merge_request: 24622
+author:
+type: added

locale/gitlab.pot

@@ -24077,6 +24077,12 @@ msgstr ""
 msgid "success"
 msgstr ""
 
+msgid "suggestPipeline|1/2: Choose a template"
+msgstr ""
+
+msgid "suggestPipeline|We recommend the %{boldStart}Code Quality%{boldEnd} template, which will add a report widget to your Merge Requests. This way you’ll learn about code quality degradations much sooner. %{footerStart} Goodbye technical debt! %{footerEnd}"
+msgstr ""
+
 msgid "syntax is correct"
 msgstr ""
 

spec/features/projects/blobs/user_follows_pipeline_suggest_nudge_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'User follows pipeline suggest nudge spec when feature is enabled', :js do
+  let(:user) { create(:user, :admin) }
+  let(:project) { create(:project, :empty_repo) }
+
+  describe 'viewing the new blob page' do
+    before do
+      stub_feature_flags(suggest_pipeline: true)
+      sign_in(user)
+    end
+
+    context 'when the page is loaded from the link using the suggest_gitlab_ci_yml param' do
+      before do
+        visit namespace_project_new_blob_path(namespace_id: project.namespace, project_id: project, id: 'master', suggest_gitlab_ci_yml: 'true')
+      end
+
+      it 'pre-fills .gitlab-ci.yml for file name' do
+        file_name = page.find_by_id('file_name')
+
+        expect(file_name.value).to have_content('.gitlab-ci.yml')
+      end
+
+      it 'chooses the .gitlab-ci.yml Template Type' do
+        template_type = page.find(:css, '.template-type-selector .dropdown-toggle-text')
+
+        expect(template_type.text).to have_content('.gitlab-ci.yml')
+      end
+
+      it 'displays suggest_gitlab_ci_yml popover' do
+        popover_selector = '.suggest-gitlab-ci-yml'
+
+        expect(page).to have_css(popover_selector, visible: true)
+
+        page.within(popover_selector) do
+          expect(page).to have_content('1/2: Choose a template')
+        end
+      end
+    end
+
+    context 'when the page is visited without the param' do
+      before do
+        visit namespace_project_new_blob_path(namespace_id: project.namespace, project_id: project, id: 'master')
+      end
+
+      it 'does not pre-fill .gitlab-ci.yml for file name' do
+        file_name = page.find_by_id('file_name')
+
+        expect(file_name.value).not_to have_content('.gitlab-ci.yml')
+      end
+
+      it 'does not choose the .gitlab-ci.yml Template Type' do
+        template_type = page.find(:css, '.template-type-selector .dropdown-toggle-text')
+
+        expect(template_type.text).to have_content('Select a template type')
+      end
+
+      it 'does not display suggest_gitlab_ci_yml popover' do
+        popover_selector = '.b-popover.suggest-gitlab-ci-yml'
+
+        expect(page).not_to have_css(popover_selector, visible: true)
+      end
+    end
+  end
+end

spec/frontend/blob/suggest_gitlab_ci_yml/components/popover_spec.js

+import { shallowMount } from '@vue/test-utils';
+import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
+import Cookies from 'js-cookie';
+
+const popoverTarget = 'gitlab-ci-yml-selector';
+const dismissKey = 'suggest_gitlab_ci_yml_99';
+
+describe('Suggest gitlab-ci.yml Popover', () => {
+  let wrapper;
+
+  function createWrapper() {
+    wrapper = shallowMount(Popover, {
+      propsData: {
+        target: popoverTarget,
+        cssClass: 'js-class',
+        dismissKey,
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when no dismiss cookie is set', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('sets popoverDismissed to false', () => {
+      expect(wrapper.vm.popoverDismissed).toEqual(false);
+    });
+  });
+
+  describe('when the dismiss cookie is set', () => {
+    beforeEach(() => {
+      Cookies.set(dismissKey, true);
+      createWrapper();
+    });
+
+    it('sets popoverDismissed to true', () => {
+      expect(wrapper.vm.popoverDismissed).toEqual(true);
+    });
+  });
+});