Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

4 files changed, 16 insertions, 10 deletions

diff --git a/app/assets/javascripts/blob/components/blob_content.vue b/app/assets/javascripts/blob/components/blob_content.vue
index 213e026c41f..e3e43ea3a0e 100644
--- a/app/assets/javascripts/blob/components/blob_content.vue
+++ b/app/assets/javascripts/blob/components/blob_content.vue
@@ -65,7 +65,7 @@ export default {
 };
 </script>
 <template>
-  <div class="blob-viewer" :data-type="activeViewer.type">
+  <div class="blob-viewer" :data-type="activeViewer.type" :data-loaded="!loading">
     <gl-loading-icon v-if="loading" size="md" color="dark" class="my-4 mx-auto" />
 
     <template v-else>
diff --git a/app/assets/javascripts/blob/components/blob_header.vue b/app/assets/javascripts/blob/components/blob_header.vue
index 4742b4ae4b4..933ad448c77 100644
--- a/app/assets/javascripts/blob/components/blob_header.vue
+++ b/app/assets/javascripts/blob/components/blob_header.vue
@@ -3,12 +3,14 @@ import DefaultActions from './blob_header_default_actions.vue';
 import BlobFilepath from './blob_header_filepath.vue';
 import ViewerSwitcher from './blob_header_viewer_switcher.vue';
 import { SIMPLE_BLOB_VIEWER } from './constants';
+import TableOfContents from './table_contents.vue';
 
 export default {
   components: {
     ViewerSwitcher,
     DefaultActions,
     BlobFilepath,
+    TableOfContents,
   },
   props: {
     blob: {
@@ -70,11 +72,14 @@ export default {
 </script>
 <template>
   <div class="js-file-title file-title-flex-parent">
-    <blob-filepath :blob="blob">
-      <template #filepath-prepend>
-        <slot name="prepend"></slot>
-      </template>
-    </blob-filepath>
+    <div class="gl-display-flex">
+      <table-of-contents class="gl-pr-2" />
+      <blob-filepath :blob="blob">
+        <template #filepath-prepend>
+          <slot name="prepend"></slot>
+        </template>
+      </blob-filepath>
+    </div>
 
     <div class="gl-display-none gl-sm-display-flex">
       <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" />
diff --git a/app/assets/javascripts/blob/components/table_contents.vue b/app/assets/javascripts/blob/components/table_contents.vue
index 78ecb82f2cd..07da262ec9a 100644
--- a/app/assets/javascripts/blob/components/table_contents.vue
+++ b/app/assets/javascripts/blob/components/table_contents.vue
@@ -18,11 +18,12 @@ export default {
   },
   mounted() {
     this.blobViewer = document.querySelector('.blob-viewer[data-type="rich"]');
+    const blobViewerAttr = (attr) => this.blobViewer.getAttribute(attr);
 
     this.observer = new MutationObserver(() => {
-      if (this.blobViewer.classList.contains('hidden')) {
+      if (this.blobViewer.classList.contains('hidden') || blobViewerAttr('data-type') !== 'rich') {
         this.isHidden = true;
-      } else if (this.blobViewer.getAttribute('data-loaded') === 'true') {
+      } else if (blobViewerAttr('data-loaded') === 'true') {
         this.isHidden = false;
         this.generateHeaders();
       }
diff --git a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
index a3278f8bde2..e75aa523ed0 100644
--- a/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
+++ b/app/assets/javascripts/blob/pipeline_tour_success_modal.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlModal, GlSprintf, GlLink, GlButton } from '@gitlab/ui';
 import Cookies from 'js-cookie';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 import Tracking from '~/tracking';
 
 const trackingMixin = Tracking.mixin();
@@ -69,7 +69,7 @@ export default {
     },
   },
   i18n: {
-    modalTitle: s__("That's it, well done!"),
+    modalTitle: __("That's it, well done!"),
     pipelinesButton: s__('MR widget|See your pipeline in action'),
     mergeRequestButton: s__('MR widget|Back to the Merge request'),
     bodyMessage: s__(