From f05696dc1a4f019a4dc28809d25a5d54ccfee056 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Sep 2020 12:17:32 -0600
Subject: [PATCH 1/4] Expand the collapsed file UI and make it more visible

---
 .../diffs/components/diff_file.vue            | 19 +++++++++++++------
 locale/gitlab.pot                             |  6 ++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 02396a4ba1b6b6..13ff5a13d8ee8d 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';
@@ -15,6 +15,7 @@ export default {
   components: {
     DiffFileHeader,
     DiffContent,
+    GlButton,
     GlLoadingIcon,
   },
   directives: {
@@ -205,11 +206,17 @@ export default {
           <div v-safe-html="errorMessage" class="nothing-here-block"></div>
         </div>
         <template v-else>
-          <div v-show="isCollapsed" class="nothing-here-block diff-collapsed">
-            {{ __('This diff is collapsed.') }}
-            <a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">{{
-              __('Click to expand it.')
-            }}</a>
+          <div v-show="isCollapsed" class="gl-p-7 gl-text-center collapsed-file-warning">
+            <p class="gl-mb-8 gl-mt-5">
+              {{ __('This file is collapsed.') }}
+            </p>
+            <gl-button
+              class="gl-alert-action gl-mb-5"
+              data-testid="expandButton"
+              @click="handleToggle"
+            >
+              {{ __('Expand file') }}
+            </gl-button>
           </div>
           <diff-content
             v-show="!isCollapsed && !isFileTooLarge"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b88e224314c3d6..7a1b5d0291f5b9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -10357,6 +10357,9 @@ msgstr ""
 msgid "Expand dropdown"
 msgstr ""
 
+msgid "Expand file"
+msgstr ""
+
 msgid "Expand milestones"
 msgstr ""
 
@@ -25739,6 +25742,9 @@ msgstr ""
 msgid "This field is required."
 msgstr ""
 
+msgid "This file is collapsed."
+msgstr ""
+
 msgid "This group"
 msgstr ""
 
-- 
GitLab


From b59ce918a2e4f1e7a769afc72de1ce155f233887 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Sep 2020 12:17:16 -0600
Subject: [PATCH 2/4] Update tests for modified UI text and buttons

---
 .../merge_request/user_expands_diff_spec.rb      |  4 ++--
 spec/frontend/diffs/components/diff_file_spec.js | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/spec/features/merge_request/user_expands_diff_spec.rb b/spec/features/merge_request/user_expands_diff_spec.rb
index fc17ef011c27fe..b0cfa8d0d54df9 100644
--- a/spec/features/merge_request/user_expands_diff_spec.rb
+++ b/spec/features/merge_request/user_expands_diff_spec.rb
@@ -17,11 +17,11 @@
 
   it 'allows user to expand diff' do
     page.within find('[id="19763941ab80e8c09871c0a425f0560d9053bcb3"]') do
-      click_link 'Click to expand it.'
+      find('[data-testid="expandButton"]').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 0b0a7f966c5e9b..3c39dd2d385812 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -90,8 +90,8 @@ describe('DiffFile', () => {
         vm.isCollapsed = true;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).toContain('This diff is collapsed');
-          expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
+          expect(vm.$el.innerText).toContain('This file is collapsed.');
+          expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
 
           done();
         });
@@ -102,8 +102,8 @@ describe('DiffFile', () => {
         vm.isCollapsed = true;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).toContain('This diff is collapsed');
-          expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
+          expect(vm.$el.innerText).toContain('This file is collapsed.');
+          expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
 
           done();
         });
@@ -121,8 +121,8 @@ describe('DiffFile', () => {
         vm.isCollapsed = true;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).toContain('This diff is collapsed');
-          expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
+          expect(vm.$el.innerText).toContain('This file is collapsed.');
+          expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
 
           done();
         });
@@ -135,7 +135,7 @@ describe('DiffFile', () => {
         vm.file.viewer.name = diffViewerModes.renamed;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).not.toContain('This diff is collapsed');
+          expect(vm.$el.innerText).not.toContain('This file is collapsed.');
 
           done();
         });
@@ -148,7 +148,7 @@ describe('DiffFile', () => {
         vm.file.viewer.name = diffViewerModes.mode_changed;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).not.toContain('This diff is collapsed');
+          expect(vm.$el.innerText).not.toContain('This file is collapsed.');
 
           done();
         });
-- 
GitLab


From b71c8dbf15aef3dca5aa54e8ce6449a0ae587b25 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Tue, 15 Sep 2020 04:57:56 -0600
Subject: [PATCH 3/4] Add changelog for updated collapsed warning

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

diff --git a/changelogs/unreleased/feature-highlight-collapsed-diff-files.yml b/changelogs/unreleased/feature-highlight-collapsed-diff-files.yml
new file mode 100644
index 00000000000000..926eb2ccab4290
--- /dev/null
+++ b/changelogs/unreleased/feature-highlight-collapsed-diff-files.yml
@@ -0,0 +1,5 @@
+---
+title: 'Expand the visible highlight for collapsed diffs (re: !41393)'
+merge_request: 42343
+author:
+type: other
-- 
GitLab


From 51bc062fd8fcb2711b5a2eae987f4e79d9c8f25c Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Mon, 14 Sep 2020 12:17:25 -0600
Subject: [PATCH 4/4] Move all translations to the constants file

---
 .../diffs/components/diff_file.vue            | 23 +++++++++++--------
 app/assets/javascripts/diffs/i18n.js          | 14 +++++++++++
 2 files changed, 27 insertions(+), 10 deletions(-)
 create mode 100644 app/assets/javascripts/diffs/i18n.js

diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 13ff5a13d8ee8d..9a7ed76bad3272 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -3,13 +3,14 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
 import { GlButton, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { __, sprintf } from '~/locale';
+import { sprintf } from '~/locale';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { hasDiff } from '~/helpers/diffs_helper';
 import eventHub from '../../notes/event_hub';
 import DiffFileHeader from './diff_file_header.vue';
 import DiffContent from './diff_content.vue';
 import { diffViewerErrors } from '~/ide/constants';
+import { GENERIC_ERROR, DIFF_FILE } from '../i18n';
 
 export default {
   components: {
@@ -22,6 +23,10 @@ export default {
     SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
+  i18n: {
+    genericError: GENERIC_ERROR,
+    ...DIFF_FILE,
+  },
   props: {
     file: {
       type: Object,
@@ -54,7 +59,7 @@ export default {
     ...mapGetters('diffs', ['getDiffFileDiscussions']),
     viewBlobLink() {
       return sprintf(
-        __('You can %{linkStart}view the blob%{linkEnd} instead.'),
+        this.$options.i18n.blobView,
         {
           linkStart: `<a href="${escape(this.file.view_path)}">`,
           linkEnd: '</a>',
@@ -76,9 +81,7 @@ export default {
     },
     forkMessage() {
       return sprintf(
-        __(
-          "You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.",
-        ),
+        this.$options.i18n.editInFork,
         {
           tag_start: '<span class="js-file-fork-suggestion-section-action">',
           tag_end: '</span>',
@@ -149,7 +152,7 @@ export default {
         })
         .catch(() => {
           this.isLoadingCollapsedDiff = false;
-          createFlash(__('Something went wrong on our end. Please try again!'));
+          createFlash(this.$options.i18n.genericError);
         });
     },
     showForkMessage() {
@@ -189,14 +192,14 @@ export default {
       <a
         :href="file.fork_path"
         class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
-        >{{ __('Fork') }}</a
+        >{{ $options.i18n.fork }}</a
       >
       <button
         class="js-cancel-fork-suggestion-button btn btn-grouped"
         type="button"
         @click="hideForkMessage"
       >
-        {{ __('Cancel') }}
+        {{ $options.i18n.cancel }}
       </button>
     </div>
     <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
@@ -208,14 +211,14 @@ export default {
         <template v-else>
           <div v-show="isCollapsed" class="gl-p-7 gl-text-center collapsed-file-warning">
             <p class="gl-mb-8 gl-mt-5">
-              {{ __('This file is collapsed.') }}
+              {{ $options.i18n.collapsed }}
             </p>
             <gl-button
               class="gl-alert-action gl-mb-5"
               data-testid="expandButton"
               @click="handleToggle"
             >
-              {{ __('Expand file') }}
+              {{ $options.i18n.expand }}
             </gl-button>
           </div>
           <diff-content
diff --git a/app/assets/javascripts/diffs/i18n.js b/app/assets/javascripts/diffs/i18n.js
new file mode 100644
index 00000000000000..8b91543587c1ca
--- /dev/null
+++ b/app/assets/javascripts/diffs/i18n.js
@@ -0,0 +1,14 @@
+import { __ } from '~/locale';
+
+export const GENERIC_ERROR = __('Something went wrong on our end. Please try again!');
+
+export const DIFF_FILE = {
+  blobView: __('You can %{linkStart}view the blob%{linkEnd} instead.'),
+  editInFork: __(
+    "You're not allowed to %{tag_start}edit%{tag_end} files in this project directly. Please fork this project, make your changes there, and submit a merge request.",
+  ),
+  fork: __('Fork'),
+  cancel: __('Cancel'),
+  collapsed: __('This file is collapsed.'),
+  expand: __('Expand file'),
+};
-- 
GitLab