tabShown()

in app/assets/javascripts/merge_request_tabs.js [298:417]
91 lines of code
26 McCabe index (conditional complexity)

  tabShown(action, href, shouldScroll = true) {
    toggleLoader(false);

    if (action !== this.currentTab && this.mergeRequestTabs) {
      this.currentTab = action;
      if (this.setUrl) {
        this.setCurrentAction(action);
      }

      if (this.mergeRequestTabPanesAll) {
        this.mergeRequestTabPanesAll.forEach((el) => {
          const tabPane = el;
          tabPane.style.display = 'none';
        });
      }

      if (this.mergeRequestTabsAll) {
        this.mergeRequestTabsAll.forEach((el) => {
          el.classList.remove('active');
        });
      }

      const tabPane = this.mergeRequestTabPanes.querySelector(`#${action}`);
      if (tabPane) tabPane.style.display = 'block';
      const tab = this.mergeRequestTabs.querySelector(`.${action}-tab`);
      if (tab) tab.classList.add('active');

      if (isInVueNoteablePage() && !this.loadedPages[action] && action in pageBundles) {
        toggleLoader(true);
        pageBundles[action]()
          .then(({ default: init }) => {
            toggleLoader(false);
            init();
            this.loadedPages[action] = true;
          })
          .catch(() => {
            toggleLoader(false);
            createAlert({ message: s__('MergeRequest|Failed to load the page') });
          });
      }

      this.expandSidebar?.forEach((el) => el.classList.toggle('!gl-hidden', action !== 'show'));

      if (action === 'commits') {
        if (!this.commitsLoaded) {
          this.loadCommits(href);
        }
        // this.hideSidebar();
        this.resetViewContainer();
        this.mergeRequestPipelinesTable = destroyPipelines(this.mergeRequestPipelinesTable);
      } else if (action === 'new') {
        this.expandView();
        this.resetViewContainer();
        this.mergeRequestPipelinesTable = destroyPipelines(this.mergeRequestPipelinesTable);
      } else if (this.isDiffAction(action)) {
        if (!isInVueNoteablePage()) {
          /*
            for pages where we have not yet converted to the new vue
            implementation we load the diff tab content the old way,
            inserting html rendered by the backend.

            in practice, this only occurs when comparing commits in
            the new merge request form page.
          */
          this.startDiffs({ endpoint: href, strip: true });
        }
        // this.hideSidebar();
        this.expandViewContainer();
        this.mergeRequestPipelinesTable = destroyPipelines(this.mergeRequestPipelinesTable);
        this.commitsTab.classList.remove('active');
      } else if (action === 'pipelines') {
        // this.hideSidebar();
        this.resetViewContainer();
        this.mountPipelinesView();
      } else if (action === 'reports') {
        this.resetViewContainer();
      } else {
        const notesTab = this.mergeRequestTabs.querySelector('.notes-tab');
        const notesPane = this.mergeRequestTabPanes.querySelector('#notes');
        if (notesPane) {
          notesPane.style.display = 'block';
        }
        if (notesTab) {
          notesTab.classList.add('active');
        }

        // this.showSidebar();
        this.resetViewContainer();
        this.mergeRequestPipelinesTable = destroyPipelines(this.mergeRequestPipelinesTable);
      }

      renderGFM(document.querySelector('.detail-page-description'));

      if (shouldScroll) this.recallScroll(action);
    } else if (action === this.currentAction) {
      // ContentTop is used to handle anything at the top of the page before the main content
      const mainContentContainer = document.querySelector('.content-wrapper');
      const tabContentContainer = document.querySelector('.tab-content');

      if (mainContentContainer && tabContentContainer) {
        const mainContentTop = mainContentContainer.getBoundingClientRect().top;
        const tabContentTop = tabContentContainer.getBoundingClientRect().top;

        // 51px is the height of the navbar buttons, e.g. `Discussion | Commits | Changes`
        const scrollDestination = tabContentTop - mainContentTop - 51;

        // scrollBehavior is only available in browsers that support scrollToOptions
        if ('scrollBehavior' in document.documentElement.style && shouldScroll) {
          window.scrollTo({
            top: scrollDestination,
            behavior: 'smooth',
          });
        } else {
          window.scrollTo(0, scrollDestination);
        }
      }
    }

    this.eventHub.$emit('MergeRequestTabChange', action);
  }