Merge branch 'feature/collapsed-diff-files/larger-ui' into 'master'

Expand Diff File collapsed UI to be significantly more obvious

See merge request gitlab-org/gitlab!46286

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
-import { GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { sprintf } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
@@ -19,6 +19,7 @@ export default {
   components: {
     DiffFileHeader,
     DiffContent,
+    GlButton,
     GlLoadingIcon,
   },
   directives: {
@@ -267,16 +268,21 @@ export default {
           <div v-safe-html="errorMessage" class="nothing-here-block"></div>
         </div>
         <template v-else>
-          <div v-show="showWarning" class="nothing-here-block diff-collapsed">
-            {{ $options.i18n.collapsed }}
-            <a
-              class="click-to-expand"
-              data-testid="toggle-link"
-              href="#"
+          <div
+            v-show="showWarning"
+            class="collapsed-file-warning gl-p-7 gl-bg-orange-50 gl-text-center gl-rounded-bottom-left-base gl-rounded-bottom-right-base"
+          >
+            <p class="gl-mb-8">
+              {{ $options.i18n.autoCollapsed }}
+            </p>
+            <gl-button
+              data-testid="expand-button"
+              category="secondary"
+              variant="warning"
               @click.prevent="handleToggle"
             >
               {{ $options.i18n.expand }}
-            </a>
+            </gl-button>
           </div>
           <diff-content
             v-show="showContent"

app/assets/javascripts/diffs/i18n.js

@@ -13,6 +13,6 @@ export const DIFF_FILE = {
   ),
   fork: __('Fork'),
   cancel: __('Cancel'),
-  collapsed: __('This diff is collapsed.'),
-  expand: __('Click to expand it.'),
+  autoCollapsed: __('Files with large changes are collapsed by default.'),
+  expand: __('Expand file'),
 };

changelogs/unreleased/feature-collapsed-diff-files-larger-ui.yml

+---
+title: Expand Diff File collapsed UI to be significantly more obvious
+merge_request: 46286
+author:
+type: changed

locale/gitlab.pot

@@ -10884,6 +10884,9 @@ msgstr ""
 msgid "Expand approvers"
 msgstr ""
 
+msgid "Expand file"
+msgstr ""
+
 msgid "Expand milestones"
 msgstr ""
 
@@ -11585,6 +11588,9 @@ msgstr ""
 msgid "Files breadcrumb"
 msgstr ""
 
+msgid "Files with large changes are collapsed by default."
+msgstr ""
+
 msgid "Files, directories, and submodules in the path %{path} for commit reference %{ref}"
 msgstr ""
 

spec/features/merge_request/user_expands_diff_spec.rb

@@ -15,11 +15,11 @@ RSpec.describe 'User expands diff', :js do
 
   it 'allows user to expand diff' do
     page.within find('[id="19763941ab80e8c09871c0a425f0560d9053bcb3"]') do
-      click_link 'Click to expand it.'
+      find('[data-testid="expand-button"]').click
 
       wait_for_requests
 
-      expect(page).not_to have_content('Click to expand it.')
+      expect(page).not_to have_content('Expand file')
       expect(page).to have_selector('.code')
     end
   end

spec/frontend/diffs/components/diff_file_spec.js

@@ -90,7 +90,7 @@ function createComponent({ file }) {
 const findDiffHeader = wrapper => wrapper.find(DiffFileHeaderComponent);
 const findDiffContentArea = wrapper => wrapper.find('[data-testid="content-area"]');
 const findLoader = wrapper => wrapper.find('[data-testid="loader-icon"]');
-const findToggleLinks = wrapper => wrapper.findAll('[data-testid="toggle-link"]');
+const findToggleButton = wrapper => wrapper.find('[data-testid="expand-button"]');
 
 const toggleFile = wrapper => findDiffHeader(wrapper).vm.$emit('toggleFile');
 const isDisplayNone = element => element.style.display === 'none';
@@ -187,9 +187,11 @@ describe('DiffFile', () => {
         makeFileAutomaticallyCollapsed(store);
       });
 
-      it('should show the collapsed file warning with expansion link', () => {
-        expect(findDiffContentArea(wrapper).html()).toContain('This diff is collapsed');
-        expect(findToggleLinks(wrapper).length).toEqual(1);
+      it('should show the collapsed file warning with expansion button', () => {
+        expect(findDiffContentArea(wrapper).html()).toContain(
+          'Files with large changes are collapsed by default.',
+        );
+        expect(findToggleButton(wrapper).exists()).toBe(true);
       });
 
       it('should style the component so that it `.has-body` for layout purposes', () => {
@@ -292,8 +294,10 @@ describe('DiffFile', () => {
 
         await wrapper.vm.$nextTick();
 
-        expect(findDiffContentArea(wrapper).html()).toContain('This diff is collapsed');
-        expect(findToggleLinks(wrapper).length).toEqual(1);
+        expect(findDiffContentArea(wrapper).html()).toContain(
+          'Files with large changes are collapsed by default.',
+        );
+        expect(findToggleButton(wrapper).exists()).toBe(true);
       });
 
       it.each`