start readding image diffspsimyn-changes-tab-images

4 files changed, 37 insertions, 4 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index adcd22f7876..b73eb4d9b9c 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
+import imageDiffHelper from '~/image_diff/helpers/index';
 
 export default {
   components: {
@@ -17,11 +18,21 @@ export default {
   computed: {
     ...mapGetters(['isInlineView', 'isParallelView']),
   },
+  mounted() {
+    if (this.diffFile.imageDiffHtml) {
+      const canCreateNote = true;
+      const renderCommentBadge = true;
+      imageDiffHelper.initImageDiff($(this.$el).closest('.file-holder')[0], canCreateNote, renderCommentBadge);
+    }
+  },
 };
 </script>
 
 <template>
-  <div class="diff-content">
+  <div
+    v-if="diffFile.text"
+    class="diff-content"
+  >
     <div class="diff-viewer">
       <inline-diff-view
         v-if="isInlineView"
@@ -35,4 +46,9 @@ export default {
       />
     </div>
   </div>
+  <div
+    v-else
+    v-html="diffFile.imageDiffHtml"
+  >
+  </div>
 </template>
diff --git a/app/controllers/projects/merge_requests/diffs_controller.rb b/app/controllers/projects/merge_requests/diffs_controller.rb
index 47c9eba494e..b95c0976661 100644
--- a/app/controllers/projects/merge_requests/diffs_controller.rb
+++ b/app/controllers/projects/merge_requests/diffs_controller.rb
@@ -76,7 +76,8 @@ class Projects::MergeRequests::DiffsController < Projects::MergeRequests::Applic
       start_version: @start_version,
       start_sha: @start_sha,
       commit: @commit,
-      latest_diff: @merge_request_diff&.latest?
+      latest_diff: @merge_request_diff&.latest?,
+      context: self
     }
   end
 
diff --git a/app/serializers/diff_file_entity.rb b/app/serializers/diff_file_entity.rb
index a893a5a4b7c..ba64a71647b 100644
--- a/app/serializers/diff_file_entity.rb
+++ b/app/serializers/diff_file_entity.rb
@@ -135,6 +135,20 @@ class DiffFileEntity < Grape::Entity
 
   # Used for parallel diffs
   expose :parallel_diff_lines, if: -> (diff_file, _) { diff_file.text? }
+  image_point = Gitlab::Diff::ImagePoint.new(nil, nil, nil, nil)
+
+  expose :image_diff_html, if: -> (diff_file, _) { !diff_file.text? } do |diff_file|
+    discussion = options[:discussion]
+    partial = diff_file.new_file? || diff_file.deleted_file? ? 'single_image_diff' : 'replaced_image_diff'
+    options[:context].render_to_string(
+      partial: "projects/diffs/#{partial}",
+      locals: { diff_file: diff_file,
+                position: diff_file.position(image_point, position_type: :image).to_json,
+                click_to_comment: true },
+      layout: false,
+      formats: [:html]
+    )
+  end
 
   def current_user
     request.current_user
diff --git a/spec/features/merge_request/user_creates_image_diff_notes_spec.rb b/spec/features/merge_request/user_creates_image_diff_notes_spec.rb
index 4cbe670b706..96fe86f6c50 100644
--- a/spec/features/merge_request/user_creates_image_diff_notes_spec.rb
+++ b/spec/features/merge_request/user_creates_image_diff_notes_spec.rb
@@ -115,7 +115,7 @@ feature 'Merge request > User creates image diff notes', :js do
         end
 
         # TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/45985
-        xit 'shows indicator and avatar badges, and allows collapsing/expanding the discussion notes' do
+        it 'shows indicator and avatar badges, and allows collapsing/expanding the discussion notes' do
           indicator = find('.js-image-badge', match: :first)
           badge = find('.image-diff-avatar-link .badge', match: :first)
 
@@ -158,11 +158,13 @@ feature 'Merge request > User creates image diff notes', :js do
     end
 
     # TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/45985
-    xit 'render diff indicators within the image frame' do
+    it 'render diff indicators within the image frame' do
       diff_note = create(:diff_note_on_merge_request, project: project, noteable: merge_request, position: position)
 
       wait_for_requests
 
+      live_debug
+
       expect(page).to have_selector('.image-comment-badge')
       expect(page).to have_content(diff_note.note)
     end