1 files changed, 38 insertions, 14 deletions
diff --git a/app/assets/javascripts/diffs/components/hidden_files_warning.vue b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
index baf7471582a..b9962682848 100644
--- a/app/assets/javascripts/diffs/components/hidden_files_warning.vue
+++ b/app/assets/javascripts/diffs/components/hidden_files_warning.vue
@@ -1,6 +1,19 @@
 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
+import { GlAlert, GlSprintf } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export const i18n = {
+  title: __('Too many changes to show.'),
+  plainDiff: __('Plain diff'),
+  emailPatch: __('Email patch'),
+};
+
 export default {
+  i18n,
+  components: {
+    GlAlert,
+    GlSprintf,
+  },
   props: {
     total: {
       type: String,
@@ -23,17 +36,28 @@ export default {
 </script>
 
 <template>
-  <div class="alert alert-warning">
-    <h4>
-      {{ __('Too many changes to show.') }}
-      <div class="float-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>
+  <gl-alert
+    variant="warning"
+    :title="$options.i18n.title"
+    :primary-button-text="$options.i18n.plainDiff"
+    :primary-button-link="plainDiffPath"
+    :secondary-button-text="$options.i18n.emailPatch"
+    :secondary-button-link="emailPatchPath"
+    :dismissible="false"
+  >
+    <gl-sprintf
+      :message="
+        sprintf(
+          __(
+            'To preserve performance only %{strongStart}%{visible} of %{total}%{strongEnd} files are displayed.',
+          ),
+          { visible, total },
+        )
+      "
+    >
+      <template #strong="{ content }">
+        <strong>{{ content }}</strong>
+      </template>
+    </gl-sprintf>
+  </gl-alert>
 </template>