Merge branch 'master' of https://github.com/Azure/cosmos-explorer into move_add_Database_Panel_to_react

README.md

@@ -18,7 +18,6 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)
 
 - Visit: `https://localhost:1234/hostedExplorer.html`
-- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development

src/Explorer/ComponentRegisterer.ts

@@ -11,7 +11,6 @@ import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponen
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 
 import DocumentsTab from "./Tabs/DocumentsTab";
-import MongoDocumentsTab from "./Tabs/MongoDocumentsTab";
 import StoredProcedureTab from "./Tabs/StoredProcedureTab";
 import TriggerTab from "./Tabs/TriggerTab";
 import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
@@ -42,7 +41,6 @@ ko.components.register("tabs-manager", { template: TabsManagerTemplate });
 // Collection Tabs
 [
   DocumentsTab,
-  MongoDocumentsTab,
   StoredProcedureTab,
   TriggerTab,
   UserDefinedFunctionTab,

src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts

@@ -1,17 +1,17 @@
 import * as ko from "knockout";
-import * as CustomTimestampHelper from "./CustomTimestampHelper";
+import { KeyCodes } from "../../../Common/Constants";
-import { getQuotedCqlIdentifier } from "../CqlUtilities";
-import QueryClauseViewModel from "./QueryClauseViewModel";
-import ClauseGroup from "./ClauseGroup";
-import ClauseGroupViewModel from "./ClauseGroupViewModel";
-import QueryViewModel from "./QueryViewModel";
 import * as Constants from "../Constants";
-import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
+import { getQuotedCqlIdentifier } from "../CqlUtilities";
-import * as DateTimeUtilities from "./DateTimeUtilities";
 import * as DataTableUtilities from "../DataTable/DataTableUtilities";
+import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
 import * as TableEntityProcessor from "../TableEntityProcessor";
 import * as Utilities from "../Utilities";
-import { KeyCodes } from "../../../Common/Constants";
+import ClauseGroup from "./ClauseGroup";
+import ClauseGroupViewModel from "./ClauseGroupViewModel";
+import * as CustomTimestampHelper from "./CustomTimestampHelper";
+import * as DateTimeUtilities from "./DateTimeUtilities";
+import QueryClauseViewModel from "./QueryClauseViewModel";
+import QueryViewModel from "./QueryViewModel";
 
 export default class QueryBuilderViewModel {
   /* Labels */
@@ -182,7 +182,7 @@ export default class QueryBuilderViewModel {
             value = `["${TableEntityProcessor.keyProperties.PartitionKey}"]`;
             filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
           } else if (value === Constants.EntityKeyNames.RowKey) {
-            value = `["${TableEntityProcessor.keyProperties.Id2}"]`;
+            value = `["${TableEntityProcessor.keyProperties.Id}"]`;
             filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
           } else {
             if (value === Constants.EntityKeyNames.Timestamp) {

src/Explorer/Tables/TableEntityProcessor.ts

@@ -1,6 +1,6 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import * as Entities from "./Entities";
 import * as Constants from "./Constants";
+import * as Entities from "./Entities";
 import * as DateTimeUtilities from "./QueryBuilder/DateTimeUtilities";
 
 // For use exclusively with Tables API.
@@ -36,7 +36,7 @@ export function convertDocumentsToEntities(documents: any[]): Entities.ITableEnt
   let results: Entities.ITableEntityForTablesAPI[] = [];
   documents &&
     documents.forEach((document) => {
-      if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id2)) {
+      if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id)) {
         //Document does not match the current required format for Tables, so we ignore it
         return; // The rest of the key properties should be guaranteed as DocumentDB properties
       }

src/Explorer/Tabs/MongoDocumentsTab.html

@@ -1,426 +0,0 @@
-<div
-  class="tab-pane active tabdocuments flexContainer"
-  data-bind="
-    attr:{
-        id: tabId
-    },
-    visible: isActive"
-  role="tabpanel"
->
-  <!-- Documents Tab Command Bar - Start -->
-  <div class="contentdiv">
-    <div class="tabCommandButton documentMenu">
-      <!-- New Document - Start -->
-      <span
-        class="commandButton"
-        data-bind="
-                    click: onNewDocumentClick,
-                    visible: newDocumentButton.visible() && newDocumentButton.enabled()"
-      >
-        <img class="commandIcon" src="/createDoc.svg" />New Document
-      </span>
-      <span
-        class="commandButton tabCommandDisabled"
-        data-bind="
-                    visible: newDocumentButton.visible() && !newDocumentButton.enabled()"
-      >
-        <img class="commandIcon" src="/createDoc-disabled.svg" />New Document
-      </span>
-      <!-- New Document - End -->
-
-      <!-- New Query - Start -->
-      <span
-        class="commandButton"
-        data-bind="
-                    visible: !$root.isPreferredApiMongoDB,
-                click: collection.onNewQueryClick"
-      >
-        <img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New SQL Query
-      </span>
-      <span
-        class="commandButton"
-        data-bind="
-                visible: $root.isPreferredApiMongoDB,
-                click: collection.onNewMongoQueryClick"
-      >
-        <img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New Query
-      </span>
-      <!-- New Query - End -->
-
-      <!-- Save New - Start -->
-      <span
-        class="commandButton"
-        data-bind="
-                    click: onSaveNewDocumentClick,
-                    visible: saveNewDocumentButton.visible() && saveNewDocumentButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/save-cosmos.svg" />Save
-      </span>
-      <span
-        class="commandButton tabCommandDisabled"
-        data-bind="
-                    visible: saveNewDocumentButton.visible() && !saveNewDocumentButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/save-disabled.svg" />Save
-      </span>
-      <!-- Save New - End -->
-
-      <!-- Discard New - Start -->
-      <span
-        class="commandButton"
-        data-bind="
-                    click: onRevertNewDocumentClick,
-                    visible: discardNewDocumentChangesButton.visible() && discardNewDocumentChangesButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/discard.svg" />Discard
-      </span>
-      <span
-        class="commandButton tabCommandDisabled"
-        data-bind="
-                    visible: discardNewDocumentChangesButton.visible() && !discardNewDocumentChangesButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/discard-disabled.svg" />Discard
-      </span>
-      <!-- Discard New - End -->
-
-      <!-- Save Exisiting - Start -->
-      <span
-        class="commandButton"
-        data-bind="
-                    click: onSaveExisitingDocumentClick,
-                    visible: saveExisitingDocumentButton.visible() && saveExisitingDocumentButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/save-cosmos.svg" />Update
-      </span>
-      <span
-        class="commandButton tabCommandDisabled"
-        data-bind="
-                    visible: saveExisitingDocumentButton.visible() && !saveExisitingDocumentButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/save-disabled.svg" />Update
-      </span>
-      <!-- Save Exisiting - End -->
-
-      <!-- Discard Exisiting - Start -->
-      <span
-        class="commandButton"
-        data-bind="
-                    click: onRevertExisitingDocumentClick,
-                    visible: discardExisitingDocumentChangesButton.visible() && discardExisitingDocumentChangesButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/discard.svg" />Discard
-      </span>
-      <span
-        class="commandButton tabCommandDisabled"
-        data-bind="
-                    visible: discardExisitingDocumentChangesButton.visible() && !discardExisitingDocumentChangesButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/discard-disabled.svg" />Discard
-      </span>
-      <!-- Discard Exisiting - End -->
-
-      <!-- Delete Exisiting - Start -->
-      <span
-        class="commandButton"
-        data-bind="
-                    click: onDeleteExisitingDocumentClick,
-                    visible: deleteExisitingDocumentButton.visible() && deleteExisitingDocumentButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/delete.svg" />Delete
-      </span>
-      <span
-        class="commandButton tabCommandDisabled"
-        data-bind="
-                    visible: deleteExisitingDocumentButton.visible() && !deleteExisitingDocumentButton.enabled()"
-      >
-        <img class="imgiconwidth" src="/delete-disabled.svg" />Delete
-      </span>
-      <!-- Delete Exisiting - End -->
-    </div>
-  </div>
-  <script type="text/html" id="toolbarItemTemplate">
-    <!-- ko if: type === "action" -->
-    <div class="toolbar-group" data-bind="visible: visible">
-      <button
-        class="toolbar-group-button"
-        data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
-      >
-        <div class="toolbar-group-button-icon">
-          <div class="toolbar_icon" data-bind="icon: icon"></div>
-        </div>
-        <span data-bind="text: displayName"></span>
-      </button>
-    </div>
-    <!-- /ko -->
-
-    <!-- ko if: type === "toggle" -->
-    <div class="toolbar-group" data-bind="visible: visible">
-      <button
-        class="toolbar-group-button toggle-button"
-        data-bind="hasFocus: focused, attr: {id: id, title: title}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
-      >
-        <div class="toolbar-group-button-icon" data-bind="css: { 'toggle-checked': checked }">
-          <div class="toolbar_icon" data-bind="icon: icon"></div>
-        </div>
-        <span data-bind="text: displayName"></span>
-      </button>
-    </div>
-    <!-- /ko -->
-    <!-- ko if: type === "dropdown" -->
-    <div class="toolbar-group" data-bind="visible: visible">
-      <div class="dropdown" data-bind="attr: {id: (id + '-dropdown')}">
-        <button
-          role="menu"
-          class="toolbar-group-button"
-          data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName},  event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
-        >
-          <div class="toolbar-group-button-icon">
-            <div class="toolbar_icon" data-bind="icon: icon"></div>
-          </div>
-          <span data-bind="text: displayName"></span>
-        </button>
-      </div>
-    </div>
-    <!-- /ko -->
-
-    <!-- ko if: type === "separator" -->
-    <div class="toolbar-group vertical-separator" data-bind="visible: visible"></div>
-    <!-- /ko -->
-  </script>
-  <!-- Documents Tab Command Bar - End -->
-  <!-- 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">
-    <!-- Read-only Filter - Start -->
-    <div
-      class="filterDocCollapsed"
-      data-bind="
-                visible: !isFilterExpanded() && !$root.isPreferredApiMongoDB()"
-    >
-      SELECT * FROM c
-      <span
-        data-bind="
-                    text: appliedFilter"
-      ></span>
-      <button
-        class="filterbtnstyle queryButton"
-        data-bind="
-                    click: onShowFilterClick"
-      >
-        Edit Filter
-      </button>
-    </div>
-    <div
-      class="filterDocCollapsed"
-      data-bind="
-                visible: !isFilterExpanded() && $root.isPreferredApiMongoDB()"
-    >
-      <span
-        data-bind="
-                visible: appliedFilter().length > 0"
-        >Filter :
-      </span>
-      <span
-        data-bind="
-                visible: !appliedFilter().length > 0"
-        >No filter applied</span
-      >
-      <span
-        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>
-          <span
-            class="filterspan"
-            data-bind="
-                        visible: !$root.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:$root.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.'
-                                },
-                                textInput: filterContent"
-          />
-
-          <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,
-                                enable: applyFilterButton.enabled"
-            >
-              Apply Filter
-            </button>
-          </span>
-          <span
-            class="filterclose"
-            data-bind="
-                            click: onHideFilterClick"
-          >
-            <img src="/close-black.svg" style="height: 14px; width: 14px" />
-          </span>
-        </div>
-      </div>
-    </div>
-    <!-- Editable Filter - End -->
-  </div>
-  <!-- Filter - End -->
-
-  <!-- Ids and Editor - Start -->
-  <div>
-    <div class="row rowoverride documentsTabGridAndEditor">
-      <div class="documentsGridHeaderContainer documentsContainer">
-        <!-- ko if: !partitionKeyProperty -->
-        <table>
-          <tbody>
-            <tr>
-              <!-- ko if: $root.isPreferredApiMongoDB -->
-              <td class="documentsGridHeader">_id</td>
-              <!-- /ko -->
-              <!-- ko if: !$root.isPreferredApiMongoDB() -->
-              <td class="documentsGridHeader">id</td>
-              <!-- /ko -->
-              <td class="refreshColHeader">
-                <img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <!-- /ko -->
-
-        <!-- ko if: partitionKeyProperty -->
-        <table>
-          <tbody>
-            <tr>
-              <td class="documentsGridHeader fixedWidthHeader">_id</td>
-              <td
-                class="documentsGridHeader documentsGridPartition"
-                data-bind="
-                                attr: {
-                                    title: partitionKeyPropertyHeader
-                                },
-                                text: partitionKeyPropertyHeader"
-              ></td>
-              <td class="refreshColHeader">
-                <img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <!-- /ko -->
-      </div>
-      <!-- Document Ids - Start -->
-      <div
-        class="tabdocuments scrollable"
-        data-bind="
-                attr: { 
-                    id: documentContentsGridId,
-                    tabindex: collection.documentIds().length <= 0 ? -1 : 0
-                },
-                style: { height: dataContentsGridScrollHeight },
-                event: { keydown: accessibleDocumentList.onKeyDown }"
-      >
-        <table class="table can-select table-hover dataTable">
-          <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
-                                }"
-            >
-              <td style="width: 82px">
-                <a
-                  data-bind="
-                                    text: $data.id, attr: { title: $data.id }"
-                ></a>
-              </td>
-              <!-- ko if: $data.partitionKeyProperty -->
-              <td><a data-bind="text: $data.partitionKeyValue, attr: { title: $data.partitionKeyValue }"></a></td>
-              <!-- /ko -->
-            </tr>
-            <!-- /ko -->
-          </tbody>
-        </table>
-
-        <div class="loadMore">
-          <a role="button" data-bind="click: loadNextPage, event: { keypress: onLoadMoreKeyInput }" tabindex="0"
-            >Load more</a
-          >
-        </div>
-      </div>
-      <!-- Document Ids - End -->
-
-      <!-- Editor - Start -->
-      <div id="divcontent" style="float: left; width: calc(100% - 200px)">
-        <div
-          style="height: 100vh; border-left: 1px solid #d6d7d8; float: initial; display: flow-root !important"
-          data-bind="
-                    attr: {
-                        id: documentEditorId
-                    },
-                    css: {
-                        mongoDocumentEditor:$root.isPreferredApiMongoDB()
-                    }"
-        ></div>
-      </div>
-      <!-- Editor - End -->
-    </div>
-  </div>
-  <!-- Ids and Editor - End -->
-</div>

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -20,10 +20,8 @@ import { extractPartitionKey } from "@azure/cosmos";
 import * as Logger from "../../Common/Logger";
 import { PartitionKeyDefinition } from "@azure/cosmos";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./MongoDocumentsTab.html";
 
 export default class MongoDocumentsTab extends DocumentsTab {
-  public static readonly component = { name: "mongo-documents-tab", template };
   public collection: ViewModels.Collection;
   private continuationToken: string;