From 533876c67a1cc46f4843dc75310342de16c901bc Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 28 Oct 2020 13:03:44 -0600
Subject: [PATCH 1/2] Expand diff_file collapsed UIs to be significantly more
 obvious

- Expand the collapsed file body vertically
- Color the collapsed file body orange
- Expand the only-blob-available body vertically
- Color the only-blob-available body orange
- Convert the control to expand collapsed files into a button
---
 .../diffs/components/diff_file.vue            | 22 ++++++++++++-------
 app/assets/javascripts/diffs/i18n.js          |  4 ++--
 locale/gitlab.pot                             |  6 +++++
 .../merge_request/user_expands_diff_spec.rb   |  4 ++--
 .../diffs/components/diff_file_spec.js        | 16 +++++++++-----
 5 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 6d74952b7a16a3..ff7be75265bb24 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -1,7 +1,7 @@
 <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"
diff --git a/app/assets/javascripts/diffs/i18n.js b/app/assets/javascripts/diffs/i18n.js
index 361f8e1a6da410..4ec24d452bf4ad 100644
--- a/app/assets/javascripts/diffs/i18n.js
+++ b/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'),
 };
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 1f4a12b8b8c14c..e9795041b0dd2e 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -10857,6 +10857,9 @@ msgstr ""
 msgid "Expand approvers"
 msgstr ""
 
+msgid "Expand file"
+msgstr ""
+
 msgid "Expand milestones"
 msgstr ""
 
@@ -11558,6 +11561,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 ""
 
diff --git a/spec/features/merge_request/user_expands_diff_spec.rb b/spec/features/merge_request/user_expands_diff_spec.rb
index 0cdc87de761873..08a92d5bc21f41 100644
--- a/spec/features/merge_request/user_expands_diff_spec.rb
+++ b/spec/features/merge_request/user_expands_diff_spec.rb
@@ -15,11 +15,11 @@
 
   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
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index 4a41b5b4f9864f..86b5d497a07cf5 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/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`
-- 
GitLab


From 3adf4fa73ff41864af8c69909e11a56a8b9c312f Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 27 Oct 2020 17:51:32 -0600
Subject: [PATCH 2/2] Add changelog for larger auto-collapsed diffs

---
 .../unreleased/feature-collapsed-diff-files-larger-ui.yml    | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelogs/unreleased/feature-collapsed-diff-files-larger-ui.yml

diff --git a/changelogs/unreleased/feature-collapsed-diff-files-larger-ui.yml b/changelogs/unreleased/feature-collapsed-diff-files-larger-ui.yml
new file mode 100644
index 00000000000000..1057c18522b179
--- /dev/null
+++ b/changelogs/unreleased/feature-collapsed-diff-files-larger-ui.yml
@@ -0,0 +1,5 @@
+---
+title: Expand Diff File collapsed UI to be significantly more obvious
+merge_request: 46286
+author:
+type: changed
-- 
GitLab