Sets callout dissmiss cookie per project using a path

app/assets/javascripts/dispatcher.js

@@ -156,7 +156,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new UsersSelect();
           break;
         case 'projects:merge_requests:index':
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
           break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
@@ -346,7 +346,7 @@ import initChangesDropdown from './init_changes_dropdown';
         case 'projects:show':
           shortcut_handler = new ShortcutsNavigation();
           new NotificationsForm();
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
 
           if ($('#tree-slider').length) new TreeView();
           if ($('.blob-viewer').length) new BlobViewer();
@@ -367,7 +367,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new NewBranchForm($('.js-new-pipeline-form'));
           break;
         case 'projects:pipelines:index':
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
           break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
@@ -426,7 +426,7 @@ import initChangesDropdown from './init_changes_dropdown';
           new TreeView();
           new BlobViewer();
           new NewCommitForm($('.js-create-dir-form'));
-          new UserCallout();
+          new UserCallout({ setCalloutPerProject: true });
           $('#tree-slider').waitForImages(function() {
             gl.utils.ajaxGet(document.querySelector('.js-tree-content').dataset.logsPath);
           });

app/assets/javascripts/user_callout.js

 import Cookies from 'js-cookie';
 
 export default class UserCallout {
-  constructor(className = 'user-callout') {
+  constructor(options = {}) {
+    this.options = options;
+
+    const className = this.options.className || 'user-callout';
+
     this.userCalloutBody = $(`.${className}`);
     this.cookieName = this.userCalloutBody.data('uid');
     this.isCalloutDismissed = Cookies.get(this.cookieName);
@@ -17,7 +21,11 @@ export default class UserCallout {
   dismissCallout(e) {
     const $currentTarget = $(e.currentTarget);
 
+    if (this.options.setCalloutPerProject) {
+      Cookies.set(this.cookieName, 'true', { expires: 365, path: gon.project_url });
+    } else {
       Cookies.set(this.cookieName, 'true', { expires: 365 });
+    }
 
     if ($currentTarget.hasClass('close')) {
       this.userCalloutBody.remove();

app/controllers/projects/application_controller.rb

@@ -5,6 +5,7 @@ class Projects::ApplicationController < ApplicationController
   before_action :redirect_git_extension
   before_action :project
   before_action :repository
+  before_action :add_gon_project_variables
   layout 'project'
 
   helper_method :repository, :can_collaborate_with_project?

lib/gitlab/gon_helper.rb

@@ -28,5 +28,9 @@ module Gitlab
         gon.current_user_avatar_url = current_user.avatar_url
       end
     end
+
+    def add_gon_project_variables
+      gon.project_url = project_url(project)
+    end
   end
 end

spec/javascripts/user_callout_spec.js

@@ -33,4 +33,26 @@ describe('UserCallout', function () {
     this.userCalloutBtn.click();
     expect(Cookies.get(USER_CALLOUT_COOKIE)).toBe('true');
   });
+
+  describe('Sets cookie with setCalloutPerProject', () => {
+    let originalGon;
+    beforeEach(() => {
+      originalGon = window.gon;
+      window.gon = Object.assign({}, {
+        project_url: 'http://localhost:3000/gitlab-org/gitlab-ce',
+      });
+      this.userCallout = new UserCallout({ setCalloutPerProject: true });
+    });
+
+    afterEach(() => {
+      window.gon = originalGon;
+    });
+
+    it('sets a cookie when the user clicks the close button', () => {
+      this.userCalloutBtn.click();
+      // Note the path of a cookie is not accessible via JS, we can not test for that
+      // We can test if a cookie is set when an option is provided
+      expect(Cookies.get(USER_CALLOUT_COOKIE)).toBe('true');
+    });
+  });
 });