Make hidden files warning use GlAlert

Chnagelog: other

app/assets/javascripts/diffs/components/hidden_files_warning.vue

 <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>

locale/gitlab.pot

@@ -38768,6 +38768,9 @@ msgstr ""
 msgid "To personalize your GitLab experience, we'd like to know a bit more about you"
 msgstr ""
 
+msgid "To preserve performance only %{strongStart}%{visible} of %{total}%{strongEnd} files are displayed."
+msgstr ""
+
 msgid "To preserve performance only %{strong_open}%{display_size} of %{real_size}%{strong_close} files are displayed."
 msgstr ""
 

spec/features/merge_request/user_sees_diff_spec.rb

@@ -45,8 +45,8 @@ RSpec.describe 'Merge request > User sees diff', :js do
 
       visit diffs_project_merge_request_path(project, merge_request)
 
-      page.within('.alert') do
-        expect(page).to have_text("Too many changes to show. Plain diff Email patch To preserve performance only 3 of 3+ files are displayed.")
+      page.within('.gl-alert') do
+        expect(page).to have_text("Too many changes to show. To preserve performance only 3 of 3+ files are displayed. Plain diff Email patch")
       end
     end
   end

spec/frontend/diffs/components/hidden_files_warning_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
 import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue';
 
 const propsData = {
@@ -12,7 +14,7 @@ describe('HiddenFilesWarning', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = shallowMount(HiddenFilesWarning, {
+    wrapper = mount(HiddenFilesWarning, {
       propsData,
     });
   };
@@ -26,22 +28,20 @@ describe('HiddenFilesWarning', () => {
   });
 
   it('has a correct plain diff URL', () => {
-    const plainDiffLink = wrapper.findAll('a').wrappers.filter((x) => x.text() === 'Plain diff')[0];
+    const plainDiffLink = wrapper.findAllComponents(GlButton).at(0);
 
     expect(plainDiffLink.attributes('href')).toBe(propsData.plainDiffPath);
   });
 
   it('has a correct email patch URL', () => {
-    const emailPatchLink = wrapper
-      .findAll('a')
-      .wrappers.filter((x) => x.text() === 'Email patch')[0];
+    const emailPatchLink = wrapper.findAllComponents(GlButton).at(1);
 
     expect(emailPatchLink.attributes('href')).toBe(propsData.emailPatchPath);
   });
 
   it('has a correct visible/total files text', () => {
-    const filesText = wrapper.find('strong');
-
-    expect(filesText.text()).toBe('5 of 10');
+    expect(wrapper.text()).toContain(
+      __('To preserve performance only 5 of 10 files are displayed.'),
+    );
   });
 });