Fixes unresolved discussions rendering the error state instead of the diff

3 files changed, 18 insertions, 7 deletions

diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index ac70ddb3ff4..184f335809d 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -19,7 +19,7 @@ import AjaxCache from '~/lib/utils/ajax_cache';
 import Vue from 'vue';
 import syntaxHighlight from '~/syntax_highlight';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
@@ -1434,10 +1434,11 @@ export default class Notes {
   static renderDiffError($container) {
     $container.find('.line_content').html(
       $(`
-        <div class="nothing-here-block">
-          ${__(
-            'Unable to load the diff.',
-          )} <a class="js-toggle-lazy-diff" href="javascript:void(0)">Try again</a>?
+        <div class="js-error-load-lazy-diff nothing-here-block">
+          ${sprintf(__('Unable to load the diff.%{buttonStartTag}Try again%{buttonEndTag}?'), {
+            buttonStartTag: '<button type="button" class="btn-link btn-no-padding js-toggle-lazy-diff">',
+            buttonEndTag: '</button>'
+          }, false)}
         </div>
       `),
     );
@@ -1455,7 +1456,12 @@ export default class Notes {
     const fileHolder = $container.find('.file-holder');
     const url = fileHolder.data('linesPath');
 
-    axios
+    /**
+     * We only fetch resolved discussions.
+     * Unresolved discussions don't have an endpoint being provided.
+     */
+    if (url) {
+      axios
       .get(url)
       .then(({ data }) => {
         Notes.renderDiffContent($container, data);
@@ -1463,6 +1469,7 @@ export default class Notes {
       .catch(() => {
         Notes.renderDiffError($container);
       });
+    }
   }
 
   toggleCommitList(e) {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 6b89387ab5f..9a8fe12e4e8 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -485,3 +485,7 @@ fieldset[disabled] .btn,
     @extend %disabled;
   }
 }
+
+.btn-no-padding {
+  padding: 0;
+}
\ No newline at end of file
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index 8680ec2e298..b382bc201b5 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -7,7 +7,7 @@
 - unless expanded
   - diff_data = { lines_path: project_merge_request_discussion_path(discussion.project, discussion.noteable, discussion) }
 
-.diff-file.file-holder{ class: diff_file_class, data: diff_data }
+.diff-file.file-holder.js-lazy-load-discussion{ class: diff_file_class, data: diff_data }
   .js-file-title.file-title.file-title-flex-parent
     .file-header-content
       = render "projects/diffs/file_header", diff_file: diff_file, url: discussion_path(discussion), show_toggle: false