Add component to warn when some diff files are collapsed

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

@@ -18,6 +18,7 @@ import TreeList from './tree_list.vue';
 
 import HiddenFilesWarning from './hidden_files_warning.vue';
 import MergeConflictWarning from './merge_conflict_warning.vue';
+import CollapsedFilesWarning from './collapsed_files_warning.vue';
 
 import {
   TREE_LIST_WIDTH_STORAGE_KEY,
@@ -37,6 +38,7 @@ export default {
     NoChanges,
     HiddenFilesWarning,
     MergeConflictWarning,
+    CollapsedFilesWarning,
     CommitWidget,
     TreeList,
     GlLoadingIcon,
@@ -114,6 +116,7 @@ export default {
     return {
       treeWidth,
       diffFilesLength: 0,
+      collapsedWarningDismissed: false,
     };
   },
   computed: {
@@ -142,7 +145,7 @@ export default {
       'canMerge',
       'hasConflicts',
     ]),
-    ...mapGetters('diffs', ['isParallelView', 'currentDiffIndex']),
+    ...mapGetters('diffs', ['hasCollapsedFile', 'isParallelView', 'currentDiffIndex']),
     ...mapGetters(['isNotesFetched', 'getNoteableData']),
     diffs() {
       if (!this.viewDiffsFileByFile) {
@@ -188,6 +191,23 @@ export default {
 
       return currentFileNumber < diffFiles.length ? currentFileNumber + 1 : null;
     },
+    visibleWarning() {
+      let visible = false;
+
+      if (this.renderOverflowWarning) {
+        visible = 'overflow';
+      } else if (this.isDiffHead && this.hasConflicts) {
+        visible = 'merge-conflict';
+      } else if (
+        this.hasCollapsedFile &&
+        !this.collapsedWarningDismissed &&
+        !this.viewDiffsFileByFile
+      ) {
+        visible = 'collapsed';
+      }
+
+      return visible;
+    },
   },
   watch: {
     commit(newCommit, oldCommit) {
@@ -401,6 +421,9 @@ export default {
         this.toggleShowTreeList(false);
       }
     },
+    dismissCollapsedWarning() {
+      this.collapsedWarningDismissed = true;
+    },
   },
   minTreeWidth: MIN_TREE_WIDTH,
   maxTreeWidth: MAX_TREE_WIDTH,
@@ -418,18 +441,23 @@ export default {
       />
 
       <hidden-files-warning
-        v-if="renderOverflowWarning"
+        v-if="visibleWarning == 'overflow'"
         :visible="numVisibleFiles"
         :total="numTotalFiles"
         :plain-diff-path="plainDiffPath"
         :email-patch-path="emailPatchPath"
       />
       <merge-conflict-warning
-        v-if="isDiffHead && hasConflicts"
+        v-if="visibleWarning == 'merge-conflict'"
         :limited="isLimitedContainer"
         :resolution-path="conflictResolutionPath"
         :mergeable="canMerge"
       />
+      <collapsed-files-warning
+        v-if="visibleWarning == 'collapsed'"
+        :limited="isLimitedContainer"
+        @dismiss="dismissCollapsedWarning"
+      />
 
       <div
         :data-can-create-note="getNoteableData.current_user.can_create_note"

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

+<script>
+import { mapActions } from 'vuex';
+
+import { GlAlert, GlButton } from '@gitlab/ui';
+
+import { CENTERED_LIMITED_CONTAINER_CLASSES } from '../constants';
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+  },
+  props: {
+    limited: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dismissed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isDismissed: this.dismissed,
+    };
+  },
+  computed: {
+    containerClasses() {
+      return {
+        [CENTERED_LIMITED_CONTAINER_CLASSES]: this.limited,
+      };
+    },
+  },
+
+  methods: {
+    ...mapActions('diffs', ['expandAllFiles']),
+    dismiss() {
+      this.isDismissed = true;
+      this.$emit('dismiss');
+    },
+    expand() {
+      this.expandAllFiles();
+      this.dismiss();
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="!isDismissed" data-testid="root" :class="containerClasses">
+    <gl-alert
+      :dismissible="true"
+      :title="__('Some changes are not shown')"
+      variant="warning"
+      class="gl-mb-5"
+      @dismiss="dismiss"
+    >
+      <p class="gl-mb-0">
+        {{ __('For a faster browsing experience, some files are collapsed by default.') }}
+      </p>
+      <template #actions>
+        <gl-button category="secondary" variant="warning" class="gl-alert-action" @click="expand">
+          {{ __('Expand all files') }}
+        </gl-button>
+      </template>
+    </gl-alert>
+  </div>
+</template>

locale/gitlab.pot

@@ -10374,6 +10374,9 @@ msgstr ""
 msgid "Expand all"
 msgstr ""
 
+msgid "Expand all files"
+msgstr ""
+
 msgid "Expand approvers"
 msgstr ""
 
@@ -11216,6 +11219,9 @@ msgstr ""
 msgid "Footer message"
 msgstr ""
 
+msgid "For a faster browsing experience, some files are collapsed by default."
+msgstr ""
+
 msgid "For help setting up the Service Desk for your instance, please contact an administrator."
 msgstr ""
 
@@ -23556,6 +23562,9 @@ msgstr ""
 msgid "Solution"
 msgstr ""
 
+msgid "Some changes are not shown"
+msgstr ""
+
 msgid "Some child epics may be hidden due to applied filters"
 msgstr ""