1 files changed, 20 insertions, 6 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index 9f451cd759a..0d99a2e8a60 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -10,6 +10,7 @@ import {
   GlDropdown,
   GlDropdownItem,
   GlDropdownDivider,
+  GlLoadingIcon,
 } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -18,6 +19,7 @@ import { __, s__, sprintf } from '~/locale';
 import { diffViewerModes } from '~/ide/constants';
 import DiffStats from './diff_stats.vue';
 import { scrollToElement } from '~/lib/utils/common_utils';
+import { isCollapsed } from '../diff_file';
 import { DIFF_FILE_HEADER } from '../i18n';
 
 export default {
@@ -31,6 +33,7 @@ export default {
     GlDropdown,
     GlDropdownItem,
     GlDropdownDivider,
+    GlLoadingIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -125,6 +128,9 @@ export default {
     isUsingLfs() {
       return this.diffFile.stored_externally && this.diffFile.external_storage === 'lfs';
     },
+    isCollapsed() {
+      return isCollapsed(this.diffFile, { fileByFile: this.viewDiffsFileByFile });
+    },
     collapseIcon() {
       return this.expanded ? 'chevron-down' : 'chevron-right';
     },
@@ -209,7 +215,7 @@ export default {
     class="js-file-title file-title file-title-flex-parent"
     @click.self="handleToggleFile"
   >
-    <div class="file-header-content gl-display-flex gl-align-items-center gl-pr-0!">
+    <div class="file-header-content">
       <gl-icon
         v-if="collapsible"
         ref="collapseIcon"
@@ -222,11 +228,17 @@ export default {
       <a
         ref="titleWrapper"
         :v-once="!viewDiffsFileByFile"
-        class="gl-mr-2 gl-text-decoration-none! gl-text-truncate"
+        class="gl-mr-2 gl-text-decoration-none! gl-word-break-all"
         :href="titleLink"
         @click="handleFileNameClick"
       >
-        <file-icon :file-name="filePath" :size="18" aria-hidden="true" css-classes="gl-mr-2" />
+        <file-icon
+          :file-name="filePath"
+          :size="18"
+          aria-hidden="true"
+          css-classes="gl-mr-2"
+          :submodule="diffFile.submodule"
+        />
         <span v-if="isFileRenamed">
           <strong
             v-gl-tooltip
@@ -270,12 +282,12 @@ export default {
         {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 
-      <span v-if="isUsingLfs" class="label label-lfs gl-mr-2"> {{ __('LFS') }} </span>
+      <span v-if="isUsingLfs" class="badge label label-lfs gl-mr-2"> {{ __('LFS') }} </span>
     </div>
 
     <div
       v-if="!diffFile.submodule && addMergeRequestButtons"
-      class="file-actions d-flex align-items-center flex-wrap"
+      class="file-actions d-flex align-items-center gl-ml-auto gl-align-self-start"
     >
       <diff-stats :added-lines="diffFile.added_lines" :removed-lines="diffFile.removed_lines" />
       <gl-button-group class="gl-pt-0!">
@@ -334,7 +346,7 @@ export default {
             </gl-dropdown-item>
           </template>
 
-          <template v-if="!diffFile.viewer.automaticallyCollapsed">
+          <template v-if="!isCollapsed">
             <gl-dropdown-divider
               v-if="!diffFile.is_fully_expanded || diffHasDiscussions(diffFile)"
             />
@@ -355,8 +367,10 @@ export default {
             <gl-dropdown-item
               v-if="!diffFile.is_fully_expanded"
               ref="expandDiffToFullFileButton"
+              :disabled="diffFile.isLoadingFullFile"
               @click="toggleFullDiff(diffFile.file_path)"
             >
+              <gl-loading-icon v-if="diffFile.isLoadingFullFile" inline />
               {{ expandDiffToFullFileTitle }}
             </gl-dropdown-item>
           </template>