Get the complete suggestion commit message

This replaces the default value that's provided by
the Vuex store and the user settings.

The computed value takes the user's setting and
fills in all of the values.

app/assets/javascripts/notes/components/note_body.vue

@@ -2,6 +2,8 @@
 /* eslint-disable vue/no-v-html */
 import { mapActions, mapGetters, mapState } from 'vuex';
 import $ from 'jquery';
+import { escape } from 'lodash';
+
 import '~/behaviors/markdown/render_gfm';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import autosave from '../mixins/autosave';
@@ -29,6 +31,11 @@ export default {
       required: false,
       default: null,
     },
+    file: {
+      type: Object,
+      required: false,
+      default: null,
+    },
     canEdit: {
       type: Boolean,
       required: true,
@@ -46,6 +53,7 @@ export default {
   },
   computed: {
     ...mapGetters(['getDiscussion', 'suggestionsCount']),
+    ...mapGetters('diffs', ['suggestionCommitMessage']),
     discussion() {
       if (!this.note.isDraft) return {};
 
@@ -54,7 +62,6 @@ export default {
     ...mapState({
       batchSuggestionsInfo: (state) => state.notes.batchSuggestionsInfo,
     }),
-    ...mapState('diffs', ['defaultSuggestionCommitMessage']),
     noteBody() {
       return this.note.note;
     },
@@ -64,6 +71,21 @@ export default {
     lineType() {
       return this.line ? this.line.type : null;
     },
+    commitMessage() {
+      // Please see this issue comment for why these
+      //  are hard-coded to 1:
+      //  https://gitlab.com/gitlab-org/gitlab/-/issues/291027#note_468308022
+      const suggestionsCount = 1;
+      const filesCount = 1;
+      const filePaths = this.file ? [this.file.file_path] : [];
+      const suggestion = this.suggestionCommitMessage({
+        file_paths: filePaths.join(', '),
+        suggestions_count: suggestionsCount,
+        files_count: filesCount,
+      });
+
+      return escape(suggestion);
+    },
   },
   mounted() {
     this.renderGFM();
@@ -135,7 +157,7 @@ export default {
       :note-html="note.note_html"
       :line-type="lineType"
       :help-page-path="helpPagePath"
-      :default-commit-message="defaultSuggestionCommitMessage"
+      :default-commit-message="commitMessage"
       @apply="applySuggestion"
       @applyBatch="applySuggestionBatch"
       @addToBatch="addSuggestionToBatch"

spec/frontend/notes/components/note_body_spec.js

 import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+
+import notes from '~/notes/stores/modules/index';
 import createStore from '~/notes/stores';
+import { suggestionCommitMessage } from '~/diffs/store/getters';
+
+import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import noteBody from '~/notes/components/note_body.vue';
+
 import { noteableDataMock, notesDataMock, note } from '../mock_data';
 
 describe('issue_note_body component', () => {
@@ -54,4 +62,50 @@ describe('issue_note_body component', () => {
       expect(vm.autosave.key).toEqual(autosaveKey);
     });
   });
+
+  describe('commitMessage', () => {
+    let wrapper;
+
+    Vue.use(Vuex);
+
+    beforeEach(() => {
+      const notesStore = notes();
+
+      notesStore.state.notes = {};
+
+      store = new Vuex.Store({
+        modules: {
+          notes: notesStore,
+          diffs: {
+            namespaced: true,
+            state: {
+              defaultSuggestionCommitMessage:
+                '%{branch_name}%{project_path}%{project_name}%{username}%{user_full_name}%{file_paths}%{suggestions_count}%{files_count}',
+              branchName: 'branch',
+              projectPath: '/path',
+              projectName: 'name',
+              username: 'user',
+              userFullName: 'user userton',
+            },
+            getters: { suggestionCommitMessage },
+          },
+        },
+      });
+
+      wrapper = shallowMount(noteBody, {
+        store,
+        propsData: {
+          note: { ...note, suggestions: [12345] },
+          canEdit: true,
+          file: { file_path: 'abc' },
+        },
+      });
+    });
+
+    it('passes the correct default placeholder commit message for a suggestion to the suggestions component', () => {
+      const commitMessage = wrapper.find(Suggestions).attributes('defaultcommitmessage');
+
+      expect(commitMessage).toBe('branch/pathnameuseruser usertonabc11');
+    });
+  });
 });