Set cookie during Commit Changes click on nudge 3

This is needed for the next step to know that the file was committed.

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, scrollToElement } from '~/lib/utils/common_utils';
+import { parseBoolean, scrollToElement, setCookie, getCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { glEmojiTag } from '~/emoji';
 import Tracking from '~/tracking';
@@ -51,7 +50,7 @@ export default {
   },
   data() {
     return {
-      popoverDismissed: parseBoolean(Cookies.get(this.dismissKey)),
+      popoverDismissed: parseBoolean(getCookie(`${this.trackLabel}_${this.dismissKey}`)),
       tracking: {
         label: this.trackLabel,
         property: this.humanAccess,
@@ -68,17 +67,27 @@ export default {
     emoji() {
       return popoverStates[this.trackLabel].emoji || '';
     },
+    dismissCookieName() {
+      return `${this.trackLabel}_${this.dismissKey}`;
+    },
+    commitCookieName() {
+      return `suggest_gitlab_ci_yml_commit_${this.dismissKey}`;
+    },
   },
   mounted() {
-    if (this.trackLabel === 'suggest_commit_first_project_gitlab_ci_yml' && !this.popoverDismissed)
+    if (
+      this.trackLabel === 'suggest_commit_first_project_gitlab_ci_yml' &&
+      !this.popoverDismissed
+    ) {
       scrollToElement(document.querySelector(this.target));
+    }
 
     this.trackOnShow();
   },
   methods: {
     onDismiss() {
       this.popoverDismissed = true;
-      Cookies.set(this.dismissKey, this.popoverDismissed, { expires: 365 });
+      setCookie(this.dismissCookieName, this.popoverDismissed);
     },
     trackOnShow() {
       if (!this.popoverDismissed) this.track();

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -5,6 +5,7 @@ import NewCommitForm from '../new_commit_form';
 import EditBlob from './edit_blob';
 import BlobFileDropzone from '../blob/blob_file_dropzone';
 import initPopover from '~/blob/suggest_gitlab_ci_yml';
+import { setCookie } from '~/lib/utils/common_utils';
 
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
@@ -60,6 +61,16 @@ export default () => {
   }
 
   if (suggestEl) {
+    const commitButton = document.querySelector('#commit-changes');
+
     initPopover(suggestEl);
+
+    if (commitButton) {
+      const commitCookieName = `suggest_gitlab_ci_yml_commit_${suggestEl.dataset.dismissKey}`;
+
+      commitButton.addEventListener('click', () => {
+        setCookie(commitCookieName, true);
+      });
+    }
   }
 };

app/assets/javascripts/lib/utils/common_utils.js

@@ -9,6 +9,7 @@ import { getLocationHash } from './url_utility';
 import { convertToCamelCase, convertToSnakeCase } from './text_utility';
 import { isObject } from './type_utility';
 import { isFunction } from 'lodash';
+import Cookies from 'js-cookie';
 
 export const getPagePath = (index = 0) => {
   const page = $('body').attr('data-page') || '';
@@ -902,3 +903,10 @@ window.gl.utils = {
   spriteIcon,
   imagePath,
 };
+
+// Methods to set and get Cookie
+export const setCookie = (name, value) => Cookies.set(name, value, { expires: 365 });
+
+export const getCookie = name => Cookies.get(name);
+
+export const removeCookie = name => Cookies.remove(name);

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

@@ -23,7 +23,7 @@
         .js-suggest-gitlab-ci-yml{ data: { toggle: 'popover',
           target: '#gitlab-ci-yml-selector',
           track_label: 'suggest_gitlab_ci_yml',
-          dismiss_key: "suggest_gitlab_ci_yml_#{@project.id}",
+          dismiss_key: @project.id,
           human_access: human_access } }
 
     .file-buttons

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

@@ -17,5 +17,5 @@
       .js-suggest-gitlab-ci-yml-commit-changes{ data: { toggle: 'popover',
         target: '#commit-changes',
         track_label: 'suggest_commit_first_project_gitlab_ci_yml',
-        dismiss_key: "suggest_commit_first_project_gitlab_ci_yml_#{@project.id}",
+        dismiss_key: @project.id,
         human_access: human_access } }

spec/features/projects/blobs/user_follows_pipeline_suggest_nudge_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 describe 'User follows pipeline suggest nudge spec when feature is enabled', :js do
+  include CookieHelper
+
   let(:user) { create(:user, :admin) }
   let(:project) { create(:project, :empty_repo) }
 
@@ -38,6 +40,12 @@ describe 'User follows pipeline suggest nudge spec when feature is enabled', :js
           expect(page).to have_content('1/2: Choose a template')
         end
       end
+
+      it 'sets the commit cookie when the Commit button is clicked' do
+        click_button 'Commit changes'
+
+        expect(get_cookie("suggest_gitlab_ci_yml_commit_#{project.id}")).to be_present
+      end
     end
 
     context 'when the page is visited without the param' do

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';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import * as utils from '~/lib/utils/common_utils';
 
@@ -10,9 +9,11 @@ jest.mock('~/lib/utils/common_utils', () => ({
 }));
 
 const target = 'gitlab-ci-yml-selector';
-const dismissKey = 'suggest_gitlab_ci_yml_99';
+const dismissKey = '99';
 const defaultTrackLabel = 'suggest_gitlab_ci_yml';
 const commitTrackLabel = 'suggest_commit_first_project_gitlab_ci_yml';
+
+const dismissCookie = 'suggest_gitlab_ci_yml_99';
 const humanAccess = 'owner';
 
 describe('Suggest gitlab-ci.yml Popover', () => {
@@ -46,7 +47,8 @@ describe('Suggest gitlab-ci.yml Popover', () => {
 
   describe('when the dismiss cookie is set', () => {
     beforeEach(() => {
-      Cookies.set(dismissKey, true);
+      utils.setCookie(dismissCookie, true);
+
       createWrapper(defaultTrackLabel);
     });
 
@@ -55,7 +57,7 @@ describe('Suggest gitlab-ci.yml Popover', () => {
     });
 
     afterEach(() => {
-      Cookies.remove(dismissKey);
+      utils.removeCookie(dismissCookie);
     });
   });