Created computed property isTextFile + changed error message to be more describingtz-mr-vue-imagediff

2 files changed, 5 insertions, 2 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index ecf54236ecf..deddb61ca31 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -100,7 +100,7 @@ export default {
   mounted() {
     this.setBaseConfig({ endpoint: this.endpoint, projectPath: this.projectPath });
     this.fetchDiffFiles().catch(() => {
-      createFlash(__('Something went wrong on our end. Please try again!'));
+      createFlash(__('Fetching diff files failed. Please reload the page to try again!'));
     });
   },
   created() {
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index a831af53242..b91e590f7b0 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -27,6 +27,9 @@ export default {
       const diffModeKey = Object.keys(diffModes).find(key => this.diffFile[`${key}File`]);
       return diffModes[diffModeKey] || diffModes.replaced;
     },
+    isTextFile() {
+      return this.diffFile.text === true;
+    },
   },
 };
 </script>
@@ -34,7 +37,7 @@ export default {
 <template>
   <div class="diff-content">
     <div class="diff-viewer">
-      <template v-if="diffFile.text === true">
+      <template v-if="isTextFile">
         <inline-diff-view
           v-if="isInlineView"
           :diff-file="diffFile"