1 files changed, 57 insertions, 18 deletions

diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 3c4e6102469..22032d0f914 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,13 +1,12 @@
 /* eslint-disable no-new, class-methods-use-this */
 /* global Breakpoints */
 /* global Flash */
+/* global notes */
 
 import Cookies from 'js-cookie';
-
-import CommitPipelinesTable from './commit/pipelines/pipelines_table';
-
 import './breakpoints';
 import './flash';
+import BlobForkSuggestion from './blob/blob_fork_suggestion';
 
 /* eslint-disable max-len */
 // MergeRequestTabs
@@ -90,6 +89,7 @@ import './flash';
         .on('click', this.clickTab);
     }
 
+    // Used in tests
     unbindEvents() {
       $(document)
         .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
@@ -99,10 +99,12 @@ import './flash';
         .off('click', this.clickTab);
     }
 
-    destroy() {
-      this.unbindEvents();
+    destroyPipelinesView() {
       if (this.commitPipelinesTable) {
         this.commitPipelinesTable.$destroy();
+        this.commitPipelinesTable = null;
+
+        document.querySelector('#commit-pipeline-table-view').innerHTML = '';
       }
     }
 
@@ -128,6 +130,7 @@ import './flash';
         this.loadCommits($target.attr('href'));
         this.expandView();
         this.resetViewContainer();
+        this.destroyPipelinesView();
       } else if (this.isDiffAction(action)) {
         this.loadDiff($target.attr('href'));
         if (Breakpoints.get().getBreakpointSize() !== 'lg') {
@@ -136,12 +139,14 @@ import './flash';
         if (this.diffViewType() === 'parallel') {
           this.expandViewContainer();
         }
+        this.destroyPipelinesView();
       } else if (action === 'pipelines') {
         this.resetViewContainer();
-        this.loadPipelines();
+        this.mountPipelinesView();
       } else {
         this.expandView();
         this.resetViewContainer();
+        this.destroyPipelinesView();
       }
       if (this.setUrl) {
         this.setCurrentAction(action);
@@ -227,16 +232,12 @@ import './flash';
       });
     }
 
-    loadPipelines() {
-      if (this.pipelinesLoaded) {
-        return;
-      }
-      const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
-      // Could already be mounted from the `pipelines_bundle`
-      if (pipelineTableViewEl) {
-        this.commitPipelinesTable = new CommitPipelinesTable().$mount(pipelineTableViewEl);
-      }
-      this.pipelinesLoaded = true;
+    mountPipelinesView() {
+      this.commitPipelinesTable = new gl.CommitPipelinesTable().$mount();
+      // $mount(el) replaces the el with the new rendered component. We need it in order to mount
+      // it everytime this tab is clicked - https://vuejs.org/v2/api/#vm-mount
+      document.querySelector('#commit-pipeline-table-view')
+        .appendChild(this.commitPipelinesTable.$el);
     }
 
     loadDiff(source) {
@@ -251,7 +252,8 @@ import './flash';
       this.ajaxGet({
         url: `${urlPathname}.json${location.search}`,
         success: (data) => {
-          $('#diffs').html(data.html);
+          const $container = $('#diffs');
+          $container.html(data.html);
 
           if (typeof gl.diffNotesCompileComponents !== 'undefined') {
             gl.diffNotesCompileComponents();
@@ -267,6 +269,35 @@ import './flash';
 
           new gl.Diff();
           this.scrollToElement('#diffs');
+
+          $('.diff-file').each((i, el) => {
+            new BlobForkSuggestion({
+              openButtons: $(el).find('.js-edit-blob-link-fork-toggler'),
+              forkButtons: $(el).find('.js-fork-suggestion-button'),
+              cancelButtons: $(el).find('.js-cancel-fork-suggestion-button'),
+              suggestionSections: $(el).find('.js-file-fork-suggestion-section'),
+              actionTextPieces: $(el).find('.js-file-fork-suggestion-section-action'),
+            })
+              .init();
+          });
+
+          // Scroll any linked note into view
+          // Similar to `toggler_behavior` in the discussion tab
+          const hash = window.gl.utils.getLocationHash();
+          const anchor = hash && $container.find(`[id="${hash}"]`);
+          if (anchor) {
+            const notesContent = anchor.closest('.notes_content');
+            const lineType = notesContent.hasClass('new') ? 'new' : 'old';
+            notes.toggleDiffNote({
+              target: anchor,
+              lineType,
+              forceShow: true,
+            });
+            anchor[0].scrollIntoView();
+            // We have multiple elements on the page with `#note_xxx`
+            // (discussion and diff tabs) and `:target` only applies to the first
+            anchor.addClass('target');
+          }
         },
       });
     }
@@ -342,18 +373,26 @@ import './flash';
 
     initAffix() {
       const $tabs = $('.js-tabs-affix');
+      const $fixedNav = $('.navbar-gitlab');
 
       // Screen space on small screens is usually very sparse
       // So we dont affix the tabs on these
       if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
 
+      /**
+        If the browser does not support position sticky, it returns the position as static.
+        If the browser does support sticky, then we allow the browser to handle it, if not
+        then we default back to Bootstraps affix
+      **/
+      if ($tabs.css('position') !== 'static') return;
+
       const $diffTabs = $('#diff-notes-app');
 
       $tabs.off('affix.bs.affix affix-top.bs.affix')
         .affix({
           offset: {
             top: () => (
-              $diffTabs.offset().top - $tabs.height()
+              $diffTabs.offset().top - $tabs.height() - $fixedNav.height()
             ),
           },
         })