1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/collapsed_files_warning.vue b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
new file mode 100644
index 00000000000..dded3643115
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/collapsed_files_warning.vue
@@ -0,0 +1,71 @@
+<script>
+import { mapActions } from 'vuex';
+
+import { GlAlert, GlButton } from '@gitlab/ui';
+
+import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+  },
+  props: {
+    limited: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dismissed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isDismissed: this.dismissed,
+    };
+  },
+  computed: {
+    containerClasses() {
+      return {
+        [CENTERED_LIMITED_CONTAINER_CLASSES]: this.limited,
+      };
+    },
+  },
+
+  methods: {
+    ...mapActions('diffs', ['expandAllFiles']),
+    dismiss() {
+      this.isDismissed = true;
+      this.$emit('dismiss');
+    },
+    expand() {
+      this.expandAllFiles();
+      this.dismiss();
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="!isDismissed" data-testid="root" :class="containerClasses">
+    <gl-alert
+      :dismissible="true"
+      :title="__('Some changes are not shown')"
+      variant="warning"
+      class="gl-mb-5"
+      @dismiss="dismiss"
+    >
+      <p class="gl-mb-0">
+        {{ __('For a faster browsing experience, some files are collapsed by default.') }}
+      </p>
+      <template #actions>
+        <gl-button category="secondary" variant="warning" class="gl-alert-action" @click="expand">
+          {{ __('Expand all files') }}
+        </gl-button>
+      </template>
+    </gl-alert>
+  </div>
+</template>