Automatic merge of gitlab-org/gitlab-ce master

app/assets/javascripts/diffs/components/inline_diff_view.vue

 <script>
 import { mapGetters } from 'vuex';
+import draftCommentsMixin from 'ee_else_ce/diffs/mixins/draft_comments';
 import inlineDiffTableRow from './inline_diff_table_row.vue';
 import inlineDiffCommentRow from './inline_diff_comment_row.vue';
 
@@ -12,6 +13,7 @@ export default {
     inlineDiffTableRow,
     InlineDraftCommentRow,
   },
+  mixins: [draftCommentsMixin],
   props: {
     diffFile: {
       type: Object,

app/assets/javascripts/diffs/mixins/draft_comments.js

+export default {
+  computed: {
+    shouldRenderDraftRow: () => () => false,
+    draftForLine: () => () => ({}),
+  },
+};

app/assets/javascripts/import_projects/index.js

@@ -3,7 +3,7 @@ import { mapActions } from 'vuex';
 import Translate from '../vue_shared/translate';
 import ImportProjectsTable from './components/import_projects_table.vue';
 import { parseBoolean } from '../lib/utils/common_utils';
-import store from './store';
+import createStore from './store';
 
 Vue.use(Translate);
 
@@ -20,6 +20,7 @@ export default function mountImportProjectsTable(mountElement) {
     ciCdOnly,
   } = mountElement.dataset;
 
+  const store = createStore();
   return new Vue({
     el: mountElement,
     store,

app/assets/javascripts/import_projects/store/index.js

@@ -7,9 +7,10 @@ import mutations from './mutations';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state: state(),
-  actions,
-  mutations,
-  getters,
-});
+export default () =>
+  new Vuex.Store({
+    state: state(),
+    actions,
+    mutations,
+    getters,
+  });

app/assets/javascripts/mr_notes/index.js

-import $ from 'jquery';
 import Vue from 'vue';
-import { mapActions, mapState, mapGetters } from 'vuex';
+import store from 'ee_else_ce/mr_notes/stores';
+import initNotesApp from './init_notes';
 import initDiffsApp from '../diffs';
-import notesApp from '../notes/components/notes_app.vue';
 import discussionCounter from '../notes/components/discussion_counter.vue';
 import initDiscussionFilters from '../notes/discussion_filters';
-import store from './stores';
 import MergeRequest from '../merge_request';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 
@@ -18,68 +16,7 @@ export default function initMrNotes() {
     action: mrShowNode.dataset.mrAction,
   });
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: '#js-vue-mr-discussions',
-    name: 'MergeRequestDiscussions',
-    components: {
-      notesApp,
-    },
-    store,
-    data() {
-      const notesDataset = document.getElementById('js-vue-mr-discussions').dataset;
-      const noteableData = JSON.parse(notesDataset.noteableData);
-      noteableData.noteableType = notesDataset.noteableType;
-      noteableData.targetType = notesDataset.targetType;
-
-      return {
-        noteableData,
-        currentUserData: JSON.parse(notesDataset.currentUserData),
-        notesData: JSON.parse(notesDataset.notesData),
-        helpPagePath: notesDataset.helpPagePath,
-      };
-    },
-    computed: {
-      ...mapGetters(['discussionTabCounter']),
-      ...mapState({
-        activeTab: state => state.page.activeTab,
-      }),
-    },
-    watch: {
-      discussionTabCounter() {
-        this.updateDiscussionTabCounter();
-      },
-    },
-    created() {
-      this.setActiveTab(window.mrTabs.getCurrentAction());
-    },
-    mounted() {
-      this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge');
-      $(document).on('visibilitychange', this.updateDiscussionTabCounter);
-      window.mrTabs.eventHub.$on('MergeRequestTabChange', this.setActiveTab);
-    },
-    beforeDestroy() {
-      $(document).off('visibilitychange', this.updateDiscussionTabCounter);
-      window.mrTabs.eventHub.$off('MergeRequestTabChange', this.setActiveTab);
-    },
-    methods: {
-      ...mapActions(['setActiveTab']),
-      updateDiscussionTabCounter() {
-        this.notesCountBadge.text(this.discussionTabCounter);
-      },
-    },
-    render(createElement) {
-      return createElement('notes-app', {
-        props: {
-          noteableData: this.noteableData,
-          notesData: this.notesData,
-          userData: this.currentUserData,
-          shouldShow: this.activeTab === 'show',
-          helpPagePath: this.helpPagePath,
-        },
-      });
-    },
-  });
+  initNotesApp();
 
   // eslint-disable-next-line no-new
   new Vue({

app/assets/javascripts/mr_notes/init_notes.js

+import $ from 'jquery';
+import Vue from 'vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import store from 'ee_else_ce/mr_notes/stores';
+import notesApp from '../notes/components/notes_app.vue';
+
+export default () => {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: '#js-vue-mr-discussions',
+    name: 'MergeRequestDiscussions',
+    components: {
+      notesApp,
+    },
+    store,
+    data() {
+      const notesDataset = document.getElementById('js-vue-mr-discussions').dataset;
+      const noteableData = JSON.parse(notesDataset.noteableData);
+      noteableData.noteableType = notesDataset.noteableType;
+      noteableData.targetType = notesDataset.targetType;
+
+      return {
+        noteableData,
+        currentUserData: JSON.parse(notesDataset.currentUserData),
+        notesData: JSON.parse(notesDataset.notesData),
+        helpPagePath: notesDataset.helpPagePath,
+      };
+    },
+    computed: {
+      ...mapGetters(['discussionTabCounter']),
+      ...mapState({
+        activeTab: state => state.page.activeTab,
+      }),
+    },
+    watch: {
+      discussionTabCounter() {
+        this.updateDiscussionTabCounter();
+      },
+    },
+    created() {
+      this.setActiveTab(window.mrTabs.getCurrentAction());
+    },
+    mounted() {
+      this.notesCountBadge = $('.issuable-details').find('.notes-tab .badge');
+      $(document).on('visibilitychange', this.updateDiscussionTabCounter);
+      window.mrTabs.eventHub.$on('MergeRequestTabChange', this.setActiveTab);
+    },
+    beforeDestroy() {
+      $(document).off('visibilitychange', this.updateDiscussionTabCounter);
+      window.mrTabs.eventHub.$off('MergeRequestTabChange', this.setActiveTab);
+    },
+    methods: {
+      ...mapActions(['setActiveTab']),
+      updateDiscussionTabCounter() {
+        this.notesCountBadge.text(this.discussionTabCounter);
+      },
+    },
+    render(createElement) {
+      return createElement('notes-app', {
+        props: {
+          noteableData: this.noteableData,
+          notesData: this.notesData,
+          userData: this.currentUserData,
+          shouldShow: this.activeTab === 'show',
+          helpPagePath: this.helpPagePath,
+        },
+      });
+    },
+  });
+};

app/assets/javascripts/users_select.js

@@ -93,23 +93,22 @@ function UsersSelect(currentUser, els, options = {}) {
           }
 
           // Save current selected user to the DOM
-          const input = document.createElement('input');
-          input.type = 'hidden';
-          input.name = $dropdown.data('fieldName');
-
-          const currentUserInfo = $dropdown.data('currentUserInfo');
-
-          if (currentUserInfo) {
-            input.value = currentUserInfo.id;
-            input.dataset.meta = _.escape(currentUserInfo.name);
-          } else if (_this.currentUser) {
-            input.value = _this.currentUser.id;
-          }
+          const currentUserInfo = $dropdown.data('currentUserInfo') || {};
+          const currentUser = _this.currentUser || {};
+          const fieldName = $dropdown.data('fieldName');
+          const userName = currentUserInfo.name;
+          const userId = currentUserInfo.id || currentUser.id;
+
+          const inputHtmlString = _.template(`
+            <input type="hidden" name="<%- fieldName %>"
+              data-meta="<%- userName %>"
+              value="<%- userId %>" />
+            `)({ fieldName, userName, userId });
 
           if ($selectbox) {
-            $dropdown.parent().before(input);
+            $dropdown.parent().before(inputHtmlString);
           } else {
-            $dropdown.after(input);
+            $dropdown.after(inputHtmlString);
           }
         };
 

changelogs/unreleased/37673-minor-issue-with-apostrophe-single-quote-when-clicking-assign-to-me.yml

+---
+title: Fix username escaping when using assign to me for issues
+merge_request: 24673
+author:
+type: fixed

spec/features/issues/user_creates_issue_spec.rb

@@ -93,4 +93,22 @@ describe "User creates issue" do
       end
     end
   end
+
+  context "when signed in as user with special characters in their name" do
+    let(:user_special) { create(:user, name: "Jon O'Shea") }
+
+    before do
+      project.add_developer(user_special)
+      sign_in(user_special)
+
+      visit(new_project_issue_path(project))
+    end
+
+    it "will correctly escape user names with an apostrophe when clicking 'Assign to me'", :js do
+      first('.assign-to-me-link').click
+
+      expect(page).to have_content(user_special.name)
+      expect(page.find('input[name="issue[assignee_ids][]"]', visible: false)['data-meta']).to eq(user_special.name)
+    end
+  end
 end

spec/javascripts/diffs/components/diff_content_spec.js

 import Vue from 'vue';
 import DiffContentComponent from '~/diffs/components/diff_content.vue';
-import { createStore } from '~/mr_notes/stores';
+import { createStore } from 'ee_else_ce/mr_notes/stores';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants';
 import '~/behaviors/markdown/render_gfm';

spec/javascripts/diffs/components/diff_file_spec.js

 import Vue from 'vue';
 import DiffFileComponent from '~/diffs/components/diff_file.vue';
 import { diffViewerModes, diffViewerErrors } from '~/ide/constants';
-import store from '~/mr_notes/stores';
+import store from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 

spec/javascripts/diffs/components/inline_diff_view_spec.js

 import Vue from 'vue';
 import '~/behaviors/markdown/render_gfm';
 import InlineDiffView from '~/diffs/components/inline_diff_view.vue';
-import store from '~/mr_notes/stores';
+import store from 'ee_else_ce/mr_notes/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
 import discussionsMockData from '../mock_data/diff_discussions';

spec/javascripts/diffs/components/parallel_diff_view_spec.js

 import Vue from 'vue';
 import ParallelDiffView from '~/diffs/components/parallel_diff_view.vue';
-import store from '~/mr_notes/stores';
+import store from 'ee_else_ce/mr_notes/stores';
 import * as constants from '~/diffs/constants';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import diffFileMockData from '../mock_data/diff_file';
@@ -18,6 +18,10 @@ describe('ParallelDiffView', () => {
     }).$mount();
   });
 
+  afterEach(() => {
+    component.$destroy();
+  });
+
   describe('assigned', () => {
     describe('diffLines', () => {
       it('should normalize lines for empty cells', () => {

spec/javascripts/import_projects/components/import_projects_table_spec.js

 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import store from '~/import_projects/store';
+import createStore from '~/import_projects/store';
 import importProjectsTable from '~/import_projects/components/import_projects_table.vue';
 import STATUS_MAP from '~/import_projects/constants';
 import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
@@ -9,6 +9,7 @@ import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 describe('ImportProjectsTable', () => {
   let vm;
   let mock;
+  let store;
   const reposPath = '/repos-path';
   const jobsPath = '/jobs-path';
   const providerTitle = 'THE PROVIDER';
@@ -31,12 +32,13 @@ describe('ImportProjectsTable', () => {
       },
     }).$mount();
 
-    component.$store.dispatch('stopJobsPolling');
+    store.dispatch('stopJobsPolling');
 
     return component;
   }
 
   beforeEach(() => {
+    store = createStore();
     store.dispatch('setInitialData', { reposPath });
     mock = new MockAdapter(axios);
   });
@@ -167,7 +169,7 @@ describe('ImportProjectsTable', () => {
         expect(vm.$el.querySelector(`.ic-status_${statusObject.icon}`)).not.toBeNull();
 
         mock.onGet(jobsPath).replyOnce(200, updatedProjects);
-        return vm.$store.dispatch('restartJobsPolling');
+        return store.dispatch('restartJobsPolling');
       })
       .then(() => setTimeoutPromise())
       .then(() => {

spec/javascripts/import_projects/components/imported_project_table_row_spec.js

 import Vue from 'vue';
-import store from '~/import_projects/store';
+import createStore from '~/import_projects/store';
 import importedProjectTableRow from '~/import_projects/components/imported_project_table_row.vue';
 import STATUS_MAP from '~/import_projects/constants';
 
@@ -16,6 +16,7 @@ describe('ImportedProjectTableRow', () => {
   function createComponent() {
     const ImportedProjectTableRow = Vue.extend(importedProjectTableRow);
 
+    const store = createStore();
     return new ImportedProjectTableRow({
       store,
       propsData: {

spec/javascripts/import_projects/components/provider_repo_table_row_spec.js

 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import axios from '~/lib/utils/axios_utils';
-import store from '~/import_projects/store';
+import createStore from '~/import_projects/store';
 import providerRepoTableRow from '~/import_projects/components/provider_repo_table_row.vue';
 import STATUS_MAP, { STATUSES } from '~/import_projects/constants';
 import setTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 
 describe('ProviderRepoTableRow', () => {
+  let store;
   let vm;
   const repo = {
     id: 10,
@@ -28,6 +29,10 @@ describe('ProviderRepoTableRow', () => {
     }).$mount();
   }
 
+  beforeEach(() => {
+    store = createStore();
+  });
+
   afterEach(() => {
     vm.$destroy();
   });