Merge branch 'revert/42465-and-42343' into 'master'

Revert 42465 and 42343: Taller collapsed diff files

See merge request gitlab-org/gitlab!43361

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

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { escape } from 'lodash';
-import { GlButton, GlLoadingIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { 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: {
     DiffFileHeader,
     DiffContent,
-    GlButton,
     GlLoadingIcon,
   },
   directives: {
     SafeHtml,
   },
   mixins: [glFeatureFlagsMixin()],
-  i18n: {
-    genericError: GENERIC_ERROR,
-    ...DIFF_FILE,
-  },
   props: {
     file: {
       type: Object,
@@ -59,7 +53,7 @@ export default {
     ...mapGetters('diffs', ['getDiffFileDiscussions']),
     viewBlobLink() {
       return sprintf(
-        this.$options.i18n.blobView,
+        __('You can %{linkStart}view the blob%{linkEnd} instead.'),
         {
           linkStart: `<a href="${escape(this.file.view_path)}">`,
           linkEnd: '</a>',
@@ -81,7 +75,9 @@ export default {
     },
     forkMessage() {
       return sprintf(
-        this.$options.i18n.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.",
+        ),
         {
           tag_start: '<span class="js-file-fork-suggestion-section-action">',
           tag_end: '</span>',
@@ -152,7 +148,7 @@ export default {
         })
         .catch(() => {
           this.isLoadingCollapsedDiff = false;
-          createFlash(this.$options.i18n.genericError);
+          createFlash(__('Something went wrong on our end. Please try again!'));
         });
     },
     showForkMessage() {
@@ -192,14 +188,14 @@ export default {
       <a
         :href="file.fork_path"
         class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
-        >{{ $options.i18n.fork }}</a
+        >{{ __('Fork') }}</a
       >
       <button
         class="js-cancel-fork-suggestion-button btn btn-grouped"
         type="button"
         @click="hideForkMessage"
       >
-        {{ $options.i18n.cancel }}
+        {{ __('Cancel') }}
       </button>
     </div>
     <gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
@@ -209,16 +205,11 @@ export default {
           <div v-safe-html="errorMessage" class="nothing-here-block"></div>
         </div>
         <template v-else>
-          <div
-            v-show="isCollapsed"
-            class="gl-p-7 gl-bg-gray-10 gl-text-center collapsed-file-warning"
-          >
-            <p class="gl-mb-8 gl-mt-5">
-              {{ $options.i18n.collapsed }}
-            </p>
-            <gl-button class="gl-mb-5" data-testid="expandButton" @click="handleToggle">
-              {{ $options.i18n.expand }}
-            </gl-button>
+          <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>
           <diff-content
             v-show="!isCollapsed && !isFileTooLarge"

app/assets/javascripts/diffs/i18n.js

-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'),
-};

changelogs/unreleased/maintenance-design-collapsed-files.yml

----
-title: Color/position tweaks for collapsed diff files
-merge_request: 42465
-author:
-type: other

changelogs/unreleased/revert-42465-and-42343.yml

+---
+title: 'Revert 42465 and 42343: Expanded collapsed diff files'
+merge_request: 43361
+author:
+type: other

locale/gitlab.pot

@@ -10458,9 +10458,6 @@ msgstr ""
 msgid "Expand approvers"
 msgstr ""
 
-msgid "Expand file"
-msgstr ""
-
 msgid "Expand milestones"
 msgstr ""
 
@@ -26026,9 +26023,6 @@ msgstr ""
 msgid "This field is required."
 msgstr ""
 
-msgid "This file is collapsed."
-msgstr ""
-
 msgid "This group"
 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
-      find('[data-testid="expandButton"]').click
+      click_link 'Click to expand it.'
 
       wait_for_requests
 
-      expect(page).not_to have_content('Expand File')
+      expect(page).not_to have_content('Click to expand it.')
       expect(page).to have_selector('.code')
     end
   end

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 file is collapsed.');
-          expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
+          expect(vm.$el.innerText).toContain('This diff is collapsed');
+          expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
 
           done();
         });
@@ -102,8 +102,8 @@ describe('DiffFile', () => {
         vm.isCollapsed = true;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).toContain('This file is collapsed.');
-          expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
+          expect(vm.$el.innerText).toContain('This diff is collapsed');
+          expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
 
           done();
         });
@@ -121,8 +121,8 @@ describe('DiffFile', () => {
         vm.isCollapsed = true;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).toContain('This file is collapsed.');
-          expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy();
+          expect(vm.$el.innerText).toContain('This diff is collapsed');
+          expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1);
 
           done();
         });
@@ -135,7 +135,7 @@ describe('DiffFile', () => {
         vm.file.viewer.name = diffViewerModes.renamed;
 
         vm.$nextTick(() => {
-          expect(vm.$el.innerText).not.toContain('This file is collapsed.');
+          expect(vm.$el.innerText).not.toContain('This diff 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 file is collapsed.');
+          expect(vm.$el.innerText).not.toContain('This diff is collapsed');
 
           done();
         });