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

<div
  class="tab-pane active tabdocuments flexContainer"
  data-bind="
    setTemplateReady: true,
    attr:{
        id: tabId
    },
    visible: isActive"
  role="tabpanel"
>
  <!-- ko if: false -->
  <!-- Messagebox Ok Cancel- Start -->
  <div class="messagebox-background">
    <div class="messagebox">
      <h2 class="messagebox-title">Title</h2>
      <div class="messagebox-text" tabindex="0">Text</div>
      <div class="messagebox-buttons">
        <div class="messagebox-buttons-container">
          <button value="ok" class="messagebox-button-primary">Ok</button>
          <button value="cancel" class="messagebox-button-default">Cancel</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Messagebox OK Cancel - End -->
  <!-- /ko -->

  <!-- Filter - Start -->
  <div class="filterdivs" data-bind="visible: isFilterCreated">
    <!-- Read-only Filter - Start -->
    <div class="filterDocCollapsed" data-bind="visible: !isFilterExpanded() && !isPreferredApiMongoDB">
      <span class="selectQuery">SELECT * FROM c</span>
      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
      <button class="filterbtnstyle queryButton" data-bind="click: onShowFilterClick">Edit Filter</button>
    </div>
    <div
      class="filterDocCollapsed"
      data-bind="
                visible: !isFilterExpanded() && isPreferredApiMongoDB"
    >
      <span
        class="selectQuery"
        data-bind="
                visible: appliedFilter().length > 0"
        >Filter :
      </span>
      <span
        class="noFilterApplied"
        data-bind="
                visible: !appliedFilter().length > 0"
        >No filter applied</span
      >
      <span class="appliedQuery" data-bind="text: appliedFilter"></span>
      <button
        class="filterbtnstyle queryButton"
        data-bind="
                    click: onShowFilterClick"
      >
        Edit Filter
      </button>
    </div>
    <!-- Read-only Filter - End -->

    <!-- Editable Filter - start -->
    <div
      class="filterDocExpanded"
      data-bind="
                visible: isFilterExpanded"
    >
      <div>
        <div class="editFilterContainer">
          <span class="filterspan" data-bind="visible: !isPreferredApiMongoDB"> SELECT * FROM c </span>
          <input
            type="text"
            list="filtersList"
            class="querydropdown"
            title="Type a query predicate or choose one from the list."
            data-bind="
                                attr:{
                                    placeholder:isPreferredApiMongoDB?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
                                },
                                css: { placeholderVisible: filterContent().length === 0 },
                                textInput: filterContent,
                                event: { keydown: onFilterKeyDown }"
          />

          <datalist
            id="filtersList"
            data-bind="
                            foreach: lastFilterContents"
          >
            <option
              data-bind="
                                value: $data"
            ></option>
          </datalist>

          <span class="filterbuttonpad">
            <button
              class="filterbtnstyle queryButton"
              data-bind="
                                click: refreshDocumentsGrid.bind($data, true),
                                enable: applyFilterButton.enabled"
              aria-label="Apply filter"
              tabindex="0"
            >
              Apply Filter
            </button>
          </span>
          <span class="filterbuttonpad">
            <button
              class="filterbtnstyle queryButton"
              data-bind="
                                visible: !isPreferredApiMongoDB && isExecuting,
                                click: onAbortQueryClick"
              aria-label="Cancel Query"
              tabindex="0"
            >
              Cancel Query
            </button>
          </span>
          <span
            class="filterclose"
            role="button"
            aria-label="close filter"
            tabindex="0"
            data-bind="
                            click: onHideFilterClick, event: { keydown: onCloseButtonKeyDown }"
          >
            <img src="/close-black.svg" style="height: 14px; width: 14px" alt="Hide filter" />
          </span>
        </div>
      </div>
    </div>
    <!-- Editable Filter - End -->
  </div>
  <!-- Filter - End -->

  <!-- Ids and Editor - Start -->
  <div class="documentsTabGridAndEditor">
    <div class="documentsContainerWithSplitter" , data-bind="attr: { id: documentContentsContainerId }">
      <div class="flexContainer">
        <!-- Document Ids - Start -->
        <div
          class="documentsGridHeaderContainer tabdocuments scrollable"
          data-bind="
                attr: {
                    id: documentContentsGridId,
                    tabindex: documentIds().length <= 0 ? -1 : 0
                },
                style: { height: dataContentsGridScrollHeight },
                event: { keydown: accessibleDocumentList.onKeyDown }"
        >
          <table id="tabsTable" class="table table-hover can-select dataTable">
            <thead id="theadcontent">
              <tr>
                <th class="documentsGridHeader" data-bind="text: idHeader" tabindex="0"></th>
                <!-- ko if: showPartitionKey -->
                <!-- ko foreach: partitionKeyPropertyHeaders -->
                <th
                  class="documentsGridHeader documentsGridPartition evenlySpacedHeader"
                  data-bind="
                                              attr: {
                                                  title: $data
                                              },
                                              text: $data"
                  tabindex="0"
                ></th>
                <!-- /ko -->
                <!-- /ko -->
                <th
                  class="refreshColHeader"
                  role="button"
                  aria-label="Refresh documents"
                  data-bind="event: { keydown: onRefreshButtonKeyDown }"
                >
                  <img
                    class="refreshcol"
                    src="/refresh-cosmos.svg"
                    data-bind="click: refreshDocumentsGrid.bind($data, false)"
                    alt="Refresh documents"
                    tabindex="0"
                  />
                </th>
              </tr>
            </thead>
            <tbody id="tbodycontent">
              <!-- ko foreach: documentIds -->
              <tr
                class="pointer accessibleListElement"
                data-bind="
                                click: $data.click,
                                css: {
                                    gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
                                    gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
                                }"
                tabindex="0"
              >
                <td class="tabdocumentsGridElement"><a data-bind="text: $data.id, attr: { title: $data.id }"></a></td>
                <!-- ko if: $data.partitionKeyProperties -->
                <!-- ko foreach: $data.stringPartitionKeyValues -->
                <td class="tabdocumentsGridElement" data-bind="colspan: $parent.stringPartitionKeyValues.length + 1">
                  <a data-bind="text: $data, attr: { title: $data }"></a>
                </td>
                <!-- /ko -->
                <!-- /ko -->
              </tr>
              <!-- /ko -->
            </tbody>
          </table>
        </div>
        <div class="loadMore">
          <a
            role="button"
            data-bind="click: loadNextPage.bind($data, false), event: { keypress: onLoadMoreKeyInput }"
            tabindex="0"
            >Load more</a
          >
        </div>
        <!-- Document Ids - End -->
        <!-- Splitter -->
      </div>
      <div class="splitter ui-resizable-handle ui-resizable-e colResizePointer" id="h_splitter2"></div>
    </div>
    <div class="documentWaterMark" data-bind="visible: !shouldShowEditor()">
      <p><img src="/DocumentWaterMark.svg" alt="Document WaterMark" /></p>
      <p class="documentWaterMarkText">Create new or work with existing document(s).</p>
    </div>
    <!-- Editor - Start -->
    <json-editor
      class="editorDivContent"
      data-bind="visible: shouldShowEditor, css: { mongoDocumentEditor: isPreferredApiMongoDB }"
      params="{content: initialDocumentContent, isReadOnly: false,lineNumbers: 'on',ariaLabel: 'Document editor',
            updatedContent: selectedDocumentContent}"
    ></json-editor>
    <!-- Editor - End -->
  </div>
  <!-- Ids and Editor - End -->
</div>