Add toc dropdown to refactored blob viewer

Added the TOC vue component to the refactored code

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>

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" />

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();
       }

spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap

@@ -4,9 +4,17 @@ exports[`Blob Header Default Actions rendering matches the snapshot 1`] = `
 <div
   class="js-file-title file-title-flex-parent"
 >
-  <blob-filepath-stub
-    blob="[object Object]"
-  />
+  <div
+    class="gl-display-flex"
+  >
+    <table-of-contents-stub
+      class="gl-pr-2"
+    />
+     
+    <blob-filepath-stub
+      blob="[object Object]"
+    />
+  </div>
    
   <div
     class="gl-display-none gl-sm-display-flex"

spec/frontend/blob/components/blob_header_spec.js

@@ -3,6 +3,7 @@ import BlobHeader from '~/blob/components/blob_header.vue';
 import DefaultActions from '~/blob/components/blob_header_default_actions.vue';
 import BlobFilepath from '~/blob/components/blob_header_filepath.vue';
 import ViewerSwitcher from '~/blob/components/blob_header_viewer_switcher.vue';
+import TableContents from '~/blob/components/table_contents.vue';
 
 import { Blob } from './mock_data';
 
@@ -43,6 +44,7 @@ describe('Blob Header Default Actions', () => {
 
     it('renders all components', () => {
       createComponent();
+      expect(wrapper.find(TableContents).exists()).toBe(true);
       expect(wrapper.find(ViewerSwitcher).exists()).toBe(true);
       expect(findDefaultActions().exists()).toBe(true);
       expect(wrapper.find(BlobFilepath).exists()).toBe(true);

spec/frontend/blob/components/table_contents_spec.js

@@ -32,10 +32,30 @@ describe('Markdown table of contents component', () => {
   });
 
   describe('not loaded', () => {
+    const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
+
     it('does not populate dropdown', () => {
       createComponent();
 
-      expect(wrapper.findComponent(GlDropdownItem).exists()).toBe(false);
+      expect(findDropdownItem().exists()).toBe(false);
+    });
+
+    it('does not show dropdown when loading blob content', async () => {
+      createComponent();
+
+      await setLoaded(false);
+
+      expect(findDropdownItem().exists()).toBe(false);
+    });
+
+    it('does not show dropdown when viewing non-rich content', async () => {
+      createComponent();
+
+      document.querySelector('.blob-viewer').setAttribute('data-type', 'simple');
+
+      await setLoaded(true);
+
+      expect(findDropdownItem().exists()).toBe(false);
     });
   });