1 files changed, 51 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/hidden_files_warning.vue b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
new file mode 100644
index 00000000000..017dcfcc357
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
@@ -0,0 +1,51 @@
+<script>
+export default {
+  props: {
+    total: {
+      type: String,
+      required: true,
+    },
+    visible: {
+      type: Number,
+      required: true,
+    },
+    plainDiffPath: {
+      type: String,
+      required: true,
+    },
+    emailPatchPath: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="alert alert-warning">
+    <h4>
+      {{ __('Too many changes to show.') }}
+      <div class="pull-right">
+        <a
+          :href="plainDiffPath"
+          class="btn btn-sm"
+        >
+          {{ __('Plain diff') }}
+        </a>
+        <a
+          :href="emailPatchPath"
+          class="btn btn-sm"
+        >
+          {{ __('Email patch') }}
+        </a>
+      </div>
+    </h4>
+    <p>
+      To preserve performance only
+      <strong>
+        {{ visible }} of {{ total }}
+      </strong>
+      files are displayed.
+    </p>
+  </div>
+</template>