1 files changed, 65 insertions, 5 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index fb5556e3cd7..f677999a268 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -1,15 +1,22 @@
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
-import { diffModes } from '~/ide/constants';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
+import NoteForm from '../../notes/components/note_form.vue';
+import ImageDiffOverlay from './image_diff_overlay.vue';
+import DiffDiscussions from './diff_discussions.vue';
+import { IMAGE_DIFF_POSITION_TYPE } from '../constants';
+import { getDiffMode } from '../store/utils';
 
 export default {
   components: {
     InlineDiffView,
     ParallelDiffView,
     DiffViewer,
+    NoteForm,
+    DiffDiscussions,
+    ImageDiffOverlay,
   },
   props: {
     diffFile: {
@@ -23,13 +30,36 @@ export default {
       endpoint: state => state.diffs.endpoint,
     }),
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
+    ...mapGetters('diffs', ['getCommentFormForDiffFile']),
+    ...mapGetters(['getNoteableData', 'noteableType']),
     diffMode() {
-      const diffModeKey = Object.keys(diffModes).find(key => this.diffFile[`${key}File`]);
-      return diffModes[diffModeKey] || diffModes.replaced;
+      return getDiffMode(this.diffFile);
     },
     isTextFile() {
       return this.diffFile.viewer.name === 'text';
     },
+    diffFileCommentForm() {
+      return this.getCommentFormForDiffFile(this.diffFile.fileHash);
+    },
+    showNotesContainer() {
+      return this.diffFile.discussions.length || this.diffFileCommentForm;
+    },
+  },
+  methods: {
+    ...mapActions('diffs', ['saveDiffDiscussion', 'closeDiffFileCommentForm']),
+    handleSaveNote(note) {
+      this.saveDiffDiscussion({
+        note,
+        formData: {
+          noteableData: this.getNoteableData,
+          noteableType: this.noteableType,
+          diffFile: this.diffFile,
+          positionType: IMAGE_DIFF_POSITION_TYPE,
+          x: this.diffFileCommentForm.x,
+          y: this.diffFileCommentForm.y,
+        },
+      });
+    },
   },
 };
 </script>
@@ -56,7 +86,37 @@ export default {
         :new-sha="diffFile.diffRefs.headSha"
         :old-path="diffFile.oldPath"
         :old-sha="diffFile.diffRefs.baseSha"
-        :project-path="projectPath"/>
+        :file-hash="diffFile.fileHash"
+        :project-path="projectPath"
+      >
+        <image-diff-overlay
+          slot="image-overlay"
+          :discussions="diffFile.discussions"
+          :file-hash="diffFile.fileHash"
+          :can-comment="getNoteableData.current_user.can_create_note"
+        />
+        <div
+          v-if="showNotesContainer"
+          class="note-container"
+        >
+          <diff-discussions
+            v-if="diffFile.discussions.length"
+            class="diff-file-discussions"
+            :discussions="diffFile.discussions"
+            :should-collapse-discussions="true"
+            :render-avatar-badge="true"
+          />
+          <note-form
+            v-if="diffFileCommentForm"
+            ref="noteForm"
+            :is-editing="false"
+            :save-button-title="__('Comment')"
+            class="diff-comment-form new-note discussion-form discussion-form-container"
+            @handleFormUpdate="handleSaveNote"
+            @cancelForm="closeDiffFileCommentForm(diffFile.fileHash)"
+          />          
+        </div>
+      </diff-viewer>
     </div>
   </div>
 </template>