cosmos-explorer/src/Explorer/Tabs/TabsManager.html

<div id="content" class="flexContainer hideOverflows" data-bind="visible: openedTabs && openedTabs().length > 0">
  <!-- Tabs - Start -->
  <div class="nav-tabs-margin">
    <ul class="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">
      <!-- ko foreach: openedTabs -->
      <li
        class="tabList"
        data-bind="
                              attr: {
                                  title: $data.tabPath,
                                  'aria-selected': $data.isActive,
                                  'aria-expanded': $data.isActive,
                                  'aria-controls': $data.tabId
                              },
                              css:{
                                  active: $data.isActive
                              },
                              hasFocus: $data.hasFocus,
                              event: { keypress: onKeyPressActivate },
                              click: $data.onTabClick,"
        tabindex="0"
        role="tab"
      >
        <span class="tabNavContentContainer">
          <a data-toggle="tab" data-bind="attr: { href: '#' + $data.tabId }" tabindex="-1">
            <div class="tab_Content">
              <span class="statusIconContainer">
                <div
                  class="errorIconContainer"
                  id="errorStatusIcon"
                  title="Click to view more details"
                  role="button"
                  data-bind="
                                              click: onErrorDetailsClick,
                                              event: { keypress: onErrorDetailsKeyPress },
                                              attr: { tabindex: errorDetailsTabIndex },
                                              css: { actionsEnabled: isActive },
                                              visible: isExecutionError"
                >
                  <span class="errorIcon"></span>
                </div>
                <img
                  class="loadingIcon"
                  title="Loading"
                  src="/circular_loader_black_16x16.gif"
                  data-bind="visible: $data.isExecuting"
                  alt="Loading"
                />
              </span>
              <span class="tabNavText" data-bind="text: $data.tabTitle"></span>
              <span class="tabIconSection">
                <span
                  aria-label="Close Tab"
                  role="button"
                  class="cancelButton"
                  data-bind="
                                              click: $data.onCloseTabButtonClick,
                                              event: { keypress: onKeyPressClose },
                                              attr: { tabindex: $data.closeButtonTabIndex },
                                              visible: $data.isActive() || $data.isMouseOver()"
                  title="Close"
                >
                  <span class="tabIcon close-Icon" data-bind="visible: $data.isActive() || $data.isMouseOver()">
                    <img src="../../../images/close-black.svg" title="Close" alt="Close" />
                  </span>
                </span>
              </span>
            </div>
          </a>
        </span>
      </li>
      <!-- /ko -->
    </ul>
  </div>
  <!-- Tabs -- End -->

  <!-- Tabs Panes -- Start -->
  <div class="tabPanesContainer">
    <!-- ko foreach: openedTabs -->
    <div class="tabs-container" data-bind="visible: $data.isActive">
      <!-- ko if: $data.tabKind === 0 -->
      <documents-tab params="{data: $data}"></documents-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 1 -->
      <settings-tab params="{data: $data}"></settings-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 2 -->
      <stored-procedure-tab params="{data: $data}"></stored-procedure-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 3 -->
      <user-defined-function-tab params="{data: $data}"></user-defined-function-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 4 -->
      <trigger-tab params="{data: $data}"></trigger-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 5 -->
      <query-tab params="{data: $data}"></query-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 6 -->
      <graph-tab params="{data: $data}"></graph-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 9 -->
      <tables-query-tab class="flexContainer" params="{data: $data}"></tables-query-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 10 -->
      <mongo-shell-tab params="{data: $data}"></mongo-shell-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 11 -->
      <database-settings-tab params="{data: $data}"></database-settings-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 12 -->
      <conflicts-tab params="{data: $data}"></conflicts-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 14 -->
      <terminal-tab params="{data: $data}"></terminal-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 15 -->
      <notebookv2-tab params="{data: $data}"></notebookv2-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 16 -->
      <spark-master-tab params="{data: $data}"></spark-master-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 17 -->
      <gallery-tab params="{data: $data}"></gallery-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 18 -->
      <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
      <!-- /ko -->

      <!-- ko if: $data.tabKind === 19 -->
      <settings-tab-v2 params="{data: $data}"></settings-tab-v2>
      <!-- /ko -->
    </div>
    <!-- /ko -->
  </div>
  <!-- Tabs Panes - End -->
</div>