Update Visual Review Toolbar to post to MRs

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

@@ -49,7 +49,7 @@ export default {
       required: false,
       default: () => ({
         sourceProjectId: '',
-        issueId: '',
+        mergeRequestId: '',
         appUrl: '',
       }),
     },

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue

@@ -48,7 +48,7 @@ export default {
     visualReviewAppMeta() {
       return {
         appUrl: this.mr.appUrl,
-        issueId: this.mr.iid,
+        mergeRequestId: this.mr.iid,
         sourceProjectId: this.mr.sourceProjectId,
       };
     },

ee/app/assets/javascripts/vue_merge_request_widget/components/visual_review_app_link.vue

@@ -37,7 +37,7 @@ export default {
       return {
         script: `<script defer
   data-project-id='${this.appMetadata.sourceProjectId}'
-  data-discussion-id='${this.appMetadata.issueId}'
+  data-merge-request-id='${this.appMetadata.mergeRequestId}'
   data-mr-url='${this.appMetadata.appUrl}'
   id='review-app-toolbar-script'
   src='https://gitlab.com/public/visual-review-toolbar.js'

ee/spec/frontend/vue_mr_widget/components/visual_review_app_spec.js

@@ -13,7 +13,7 @@ describe('Visual Review App Link', () => {
     propsData = {
       cssClass: 'button cool-button best-button',
       appMetadata: {
-        issueId: 1,
+        mergeRequestId: 1,
         sourceProjectId: 20,
         appUrl: 'http://gitlab.example.com',
       },
@@ -58,9 +58,9 @@ describe('Visual Review App Link', () => {
       );
     });
 
-    it('with expected discussion Id', () => {
+    it('with expected merge request id', () => {
       expect(wrapper.find(GlModal).text()).toEqual(
-        expect.stringContaining(`data-discussion-id='${propsData.appMetadata.issueId}'`),
+        expect.stringContaining(`data-merge-request-id='${propsData.appMetadata.mergeRequestId}'`),
       );
     });
 

public/visual-review-toolbar.js

@@ -374,12 +374,12 @@ function clearNote (inputId) {
   }
 }
 
-function confirmAndClear (discussionId) {
+function confirmAndClear (mergeRequestId) {
   const commentButton = document.getElementById('gitlab-comment-button');
   const note = document.getElementById('gitlab-validation-note');
 
   commentButton.innerText = 'Feedback sent';
-  note.innerText = `Your comment was successfully posted to issue #${discussionId}`;
+  note.innerText = `Your comment was successfully posted to merge request #${mergeRequestId}`;
 
   setTimeout(resetCommentButton, 1000);
 }
@@ -412,7 +412,7 @@ function getProjectDetails () {
   const browser = getBrowserId(userAgent);
 
   const scriptEl = document.getElementById('review-app-toolbar-script')
-  const { projectId, discussionId, mrUrl } = scriptEl.dataset;
+  const { projectId, mergeRequestId, mrUrl } = scriptEl.dataset;
 
   return {
     href,
@@ -422,7 +422,7 @@ function getProjectDetails () {
     innerWidth,
     innerHeight,
     projectId,
-    discussionId,
+    mergeRequestId,
     mrUrl,
   };
 }
@@ -449,7 +449,7 @@ function postComment ({
   innerWidth,
   innerHeight,
   projectId,
-  discussionId,
+  mergeRequestId,
   mrUrl,
 }) {
   // Clear any old errors
@@ -466,18 +466,20 @@ function postComment ({
   }
 
   const detailText = `
-    <details>
-      <summary>Metadata</summary>
-      Posted from ${href} | ${platform} | ${browser} | ${innerWidth} x ${innerHeight}.
-      <br /><br />
-      *User agent: ${userAgent}*
-    </details>
+ \n
+<details>
+  <summary>Metadata</summary>
+  Posted from ${href} | ${platform} | ${browser} | ${innerWidth} x ${innerHeight}.
+  <br /><br />
+  <em>User agent: ${userAgent}</em>
+</details>
   `;
 
   const url = `
-    ${mrUrl}/api/v4/projects/${projectId}/issues/${discussionId}/discussions`;
+    ${mrUrl}/api/v4/projects/${projectId}/merge_requests/${mergeRequestId}/discussions`;
 
-  const body = `${commentText}${detailText}`;
+
+  const body = `${commentText} ${detailText}`;
 
   fetch(url, {
      method: 'POST',
@@ -489,7 +491,7 @@ function postComment ({
   })
   .then((response) => {
     if (response.ok) {
-      confirmAndClear(discussionId);
+      confirmAndClear(mergeRequestId);
       return;
     }