Panel should not use GenericRightPaneComponent

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.env.example

@@ -4,6 +4,8 @@ PORTAL_RUNNER_SUBSCRIPTION=
 PORTAL_RUNNER_RESOURCE_GROUP=
 PORTAL_RUNNER_DATABASE_ACCOUNT=
 PORTAL_RUNNER_DATABASE_ACCOUNT_KEY=
+PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT=
+PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY=
 PORTAL_RUNNER_CONNECTION_STRING=
 NOTEBOOKS_TEST_RUNNER_TENANT_ID=
 NOTEBOOKS_TEST_RUNNER_CLIENT_ID=

.eslintignore

@@ -1,37 +1,26 @@
 **/node_modules/
+src/**/__mocks__/**/*
 dist/
 Contracts/
 src/Api/Apis.ts
 src/AuthType.ts
 src/Bindings/BindingHandlersRegisterer.ts
 src/Bindings/ReactBindingHandler.ts
-src/Common/ArrayHashMap.ts
 src/Common/Constants.ts
 src/Common/CosmosClient.test.ts
 src/Common/CosmosClient.ts
 src/Common/DataAccessUtilityBase.test.ts
 src/Common/DataAccessUtilityBase.ts
-src/Common/DeleteFeedback.ts
-src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
 src/Common/HashMap.test.ts
-src/Common/HashMap.ts
-src/Common/HeadersUtility.test.ts
-src/Common/HeadersUtility.ts
-src/Common/IteratorUtilities.test.ts
-src/Common/IteratorUtilities.ts
 src/Common/Logger.test.ts
 src/Common/MessageHandler.test.ts
 src/Common/MessageHandler.ts
 src/Common/MongoProxyClient.test.ts
 src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
-src/Common/ObjectCache.test.ts
-src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Common/ThemeUtility.ts
-src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
 src/Contracts/DataModels.ts
@@ -53,13 +42,10 @@ src/Definitions/jquery.d.ts
 src/Definitions/plotly.js-cartesian-dist.d-min.ts
 src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
-src/Definitions/worker.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
 src/Explorer/ContextMenuButtonFactory.ts
 src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
-src/Explorer/Controls/CommandButton/CommandButton.test.ts
-src/Explorer/Controls/CommandButton/CommandButton.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
 src/Explorer/Controls/DynamicList/DynamicList.test.ts
 src/Explorer/Controls/DynamicList/DynamicListComponent.ts
@@ -68,7 +54,6 @@ src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts
 src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
 src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInput.test.ts
 src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts
 src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
 src/Explorer/Controls/Toolbar/IToolbarAction.ts
@@ -87,7 +72,7 @@ src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts
 src/Explorer/DataSamples/DataSamplesUtil.ts
-src/Explorer/Explorer.ts
+src/Explorer/Explorer.tsx
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -95,22 +80,17 @@ src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
 src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
-src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts
-src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
-src/Explorer/Graph/GraphStyleComponent/GraphStyle.test.ts
+# src/Explorer/Graph/GraphStyleComponent/GraphStyle.test.ts
-src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.ts
+# src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.ts
-src/Explorer/Graph/NewVertexComponent/NewVertex.test.ts
+
-src/Explorer/Graph/NewVertexComponent/NewVertexComponent.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
-src/Explorer/Notebook/FileSystemUtil.ts
-src/Explorer/Notebook/NTeractUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -128,41 +108,23 @@ src/Explorer/Notebook/NotebookUtil.ts
 src/Explorer/OpenActions.test.ts
 src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
-src/Explorer/Panes/AddCollectionPane.test.ts
-src/Explorer/Panes/AddCollectionPane.ts
-src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/AddDatabasePane.ts
+src/Explorer/Panes/AddDatabasePane.test.ts
 src/Explorer/Panes/BrowseQueriesPane.ts
 src/Explorer/Panes/CassandraAddCollectionPane.ts
 src/Explorer/Panes/ContextualPaneBase.ts
-src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
-src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
+# src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/GraphStylingPane.ts
+# src/Explorer/Panes/NewVertexPane.ts
-src/Explorer/Panes/LoadQueryPane.ts
-src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SaveQueryPane.ts
-src/Explorer/Panes/SettingsPane.test.ts
-src/Explorer/Panes/SettingsPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
-src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
-src/Explorer/Panes/Tables/AddTableEntityPane.ts
-src/Explorer/Panes/Tables/EditTableEntityPane.ts
-src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
-src/Explorer/Panes/Tables/QuerySelectPane.ts
-src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
-src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
-src/Explorer/Panes/UploadFilePane.ts
+src/Explorer/SplashScreen/SplashScreen.test.ts
-src/Explorer/Panes/UploadItemsPane.ts
-src/Explorer/SplashScreen/SplashScreenComponentAdapter.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts
@@ -170,7 +132,6 @@ src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
 src/Explorer/Tables/DataTable/DataTableOperations.ts
-src/Explorer/Tables/DataTable/DataTableUtilities.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
 src/Explorer/Tables/DataTable/TableCommands.ts
 src/Explorer/Tables/DataTable/TableEntityCache.ts
@@ -179,8 +140,6 @@ src/Explorer/Tables/Entities.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.test.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts
 src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
@@ -200,7 +159,6 @@ src/Explorer/Tabs/QueryTab.test.ts
 src/Explorer/Tabs/QueryTab.ts
 src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
-src/Explorer/Tabs/SparkMasterTab.ts
 src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts
 src/Explorer/Tabs/TabsBase.ts
@@ -241,9 +199,6 @@ src/Platform/Hosted/Authorization.ts
 src/Platform/Hosted/DataAccessUtility.ts
 src/Platform/Hosted/ExplorerFactory.ts
 src/Platform/Hosted/Helpers/ConnectionStringParser.test.ts
-src/Platform/Hosted/Helpers/ConnectionStringParser.ts
-src/Platform/Hosted/HostedUtils.test.ts
-src/Platform/Hosted/HostedUtils.ts
 src/Platform/Hosted/Main.ts
 src/Platform/Hosted/Maint.test.ts
 src/Platform/Hosted/NotificationsClient.ts
@@ -267,8 +222,6 @@ src/Shared/ExplorerSettings.ts
 src/Shared/PriceEstimateCalculator.ts
 src/Shared/StorageUtility.test.ts
 src/Shared/StorageUtility.ts
-src/Shared/StringUtility.test.ts
-src/Shared/StringUtility.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
@@ -277,26 +230,11 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
-src/Utils/AuthorizationUtils.test.ts
-src/Utils/AuthorizationUtils.ts
-src/Utils/AutoPilotUtils.test.ts
-src/Utils/AutoPilotUtils.ts
-src/Utils/DatabaseAccountUtils.test.ts
-src/Utils/DatabaseAccountUtils.ts
-src/Utils/JunoUtils.ts
-src/Utils/MessageValidation.ts
-src/Utils/NotebookConfigurationUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
-src/Utils/QueryUtils.ts
-src/Utils/StringUtils.test.ts
-src/Utils/StringUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
-src/quickstart.ts
 src/setupTests.ts
-src/workers/upload/definitions.ts
-src/workers/upload/index.ts
 src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
 src/Explorer/Controls/Accordion/AccordionComponent.tsx
 src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx
@@ -342,18 +280,8 @@ src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
-src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
-src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
-src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
-src/Explorer/Menus/NavBar/ControlBarComponent.tsx
-src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx
-src/Explorer/Menus/NavBar/MeControlComponent.test.tsx
-src/Explorer/Menus/NavBar/MeControlComponent.tsx
-src/Explorer/Menus/NavBar/MeControlComponentAdapter.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
@@ -380,8 +308,7 @@ src/Explorer/Notebook/temp/inputs/editor.tsx
 src/Explorer/Notebook/temp/markdown-cell.tsx
 src/Explorer/Notebook/temp/source.tsx
 src/Explorer/Notebook/temp/syntax-highlighter/index.tsx
-src/Explorer/SplashScreen/SplashScreenComponent.tsx
+src/Explorer/SplashScreen/SplashScreen.tsx
-src/Explorer/SplashScreen/SplashScreenComponentApdapter.tsx
 src/Explorer/Tabs/GalleryTab.tsx
 src/Explorer/Tabs/NotebookViewerTab.tsx
 src/Explorer/Tabs/TerminalTab.tsx

.eslintrc.js

@@ -1,54 +1,57 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true
+    es6: true,
   },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   globals: {
     Atomics: "readonly",
-    SharedArrayBuffer: "readonly"
+    SharedArrayBuffer: "readonly",
   },
   parser: "@typescript-eslint/parser",
   parserOptions: {
+    project: ["./tsconfig.json", "./tsconfig.test.json"],
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     ecmaVersion: 2018,
-    sourceType: "module"
+    sourceType: "module",
   },
   overrides: [
     {
       files: ["**/*.tsx"],
-      env: {
-        jest: true
-      },
       extends: ["plugin:react/recommended"],
-      plugins: ["react"]
+      plugins: ["react"],
     },
     {
       files: ["**/*.{test,spec}.{ts,tsx}"],
       env: {
-        jest: true
+        jest: true,
       },
       extends: ["plugin:jest/recommended"],
-      plugins: ["jest"]
+      plugins: ["jest"],
-    }
+    },
   ],
   rules: {
+    "no-console": ["error", { allow: ["error", "warn", "dir"] }],
     curly: "error",
+    "@typescript-eslint/switch-exhaustiveness-check": "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-extraneous-class": "error",
     "no-null/no-null": "error",
     "@typescript-eslint/no-explicit-any": "error",
     "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
     eqeqeq: "error",
+    "react/display-name": "off",
+    "react-hooks/rules-of-hooks": "warn", // TODO: error
+    "react-hooks/exhaustive-deps": "warn", // TODO: error
     "no-restricted-syntax": [
       "error",
       {
         selector: "CallExpression[callee.object.name='JSON'][callee.property.name='stringify'] Identifier[name=/$err/]",
-        message: "Do not use JSON.stringify(error). It will print '{}'"
+        message: "Do not use JSON.stringify(error). It will print '{}'",
-      }
+      },
-    ]
+    ],
-  }
+  },
 };

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1 @@
+[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)

.github/dependabot.yml

@@ -0,0 +1,9 @@
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"

.github/workflows/ci.yml

@@ -9,15 +9,29 @@ on:
     branches:
       - master
 jobs:
+  codemetrics:
+    runs-on: ubuntu-latest
+    name: "Log Code Metrics"
+    if: github.ref == 'refs/heads/master'
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: npm ci
+      - run: node utils/codeMetrics.js
+        env:
+          CODE_METRICS_APP_ID: ${{ secrets.CODE_METRICS_APP_ID }}
   compile:
     runs-on: ubuntu-latest
     name: "Compile TypeScript"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run compile
       - run: npm run compile:strict
@@ -26,10 +40,10 @@ jobs:
     name: "Check Format"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run format:check
   lint:
@@ -37,10 +51,10 @@ jobs:
     name: "Lint"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run lint
   unittest:
@@ -48,22 +62,21 @@ jobs:
     name: "Unit Tests"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run test
   build:
     runs-on: ubuntu-latest
-    needs: [lint, format, compile, unittest]
     name: "Build"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
@@ -78,23 +91,32 @@ jobs:
         with:
           name: dist
           path: dist/
+      - name: Upload build to preview blob storage
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+      - name: Upload preview config to blob storage
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
   endtoendemulator:
     name: "End To End Emulator Tests"
-    needs: [lint, format, compile, unittest]
+    # Temporarily disabled. This test needs to be rewritten in playwright
+    if: false
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - uses: southpolesteve/cosmos-emulator-github-action@v1
       - name: End to End Tests
         run: |
           npm ci
           npm start &
           npm run wait-for-server
-          npx jest -c ./jest.config.e2e.js --detectOpenHandles sql
+          npx jest -c ./jest.config.e2e.js --detectOpenHandles test/sql/container.spec.ts
         shell: bash
         env:
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
@@ -105,69 +127,48 @@ jobs:
         with:
           name: screenshots
           path: failed-*
-  accessibility:
+  endtoend:
-    name: "Accessibility | Hosted"
+    name: "E2E"
-    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
+    env:
+      NODE_TLS_REJECT_UNAUTHORIZED: 0
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    strategy:
+      fail-fast: false
+      matrix:
+        test-file:
+          - ./test/cassandra/container.spec.ts
+          - ./test/graph/container.spec.ts
+          - ./test/sql/container.spec.ts
+          - ./test/mongo/container.spec.ts
+          - ./test/mongo/container32.spec.ts
+          - ./test/selfServe/selfServeExample.spec.ts
+          - ./test/notebooks/upload.spec.ts
+          - ./test/sql/resourceToken.spec.ts
+          - ./test/tables/container.spec.ts
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
-      - name: Accessibility Check
+      - run: npm ci
+      - run: npm start &
+      - run: npm run wait-for-server
+      - name: ${{ matrix['test-file'] }}
         run: |
-          # Ubuntu gets mad when webpack runs too many files watchers
+          # Run tests up to three times
-          cat /proc/sys/fs/inotify/max_user_watches
+          for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
-          sudo sysctl fs.inotify.max_user_watches=524288
-          sudo sysctl -p
-          npm ci
-          npm start &
-          npx wait-on -i 5000 https-get://0.0.0.0:1234/
-          node utils/accesibilityCheck.js
         shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-  endtoendhosted:
-    name: "End to End Hosted Tests"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: End to End Hosted Tests
-        run: |
-          npm ci
-          npm start &
-          npm run wait-for-server
-          npm run test:e2e
-        shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-          PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
-          PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
-          PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
-          PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
-          NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
-          NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-          NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-          PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-          MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-          CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
-          TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
-          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
-          path: failed-*
+          path: screenshots/
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [build]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -183,7 +184,7 @@ jobs:
       - run: cp ./configs/prod.json config.json
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:
@@ -191,7 +192,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [build]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -208,32 +209,7 @@ jobs:
       - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
       - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
       - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v2
-        name: packages
-        with:
-          path: "*.nupkg"
-  nugetie:
-    name: Publish Nuget IE
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
-    runs-on: ubuntu-latest
-    env:
-      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
-      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
-    steps:
-      - uses: nuget/setup-nuget@v1
-        with:
-          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
-      - name: Download Dist Folder
-        uses: actions/download-artifact@v2
-        with:
-          name: dist
-      - run: cp ./configs/prod.json config.json
-      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.IE/g' DataExplorer.nuspec
-      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
-      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:

.github/workflows/cleanup.yml

@@ -0,0 +1,28 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Cleanup End to End Account Resources
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+  schedule:
+    # Once every hour
+    - cron: "0 * * * *"
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  cleanupaccounts:
+    name: "Cleanup Test Database Accounts"
+    runs-on: ubuntu-latest
+    env:
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: npm ci
+      - run: node utils/cleanupDBs.js

.gitignore

@@ -14,4 +14,6 @@ Contracts/*
 .DS_Store
 .cache/
 .env
-failure.png
+failure.png
+screenshots/*
+GettingStarted-ignore*.ipynb

.vscode/settings.json

@@ -1,21 +1,26 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "files.exclude": {
+  "files.exclude": {
-        ".vs": true,
+    ".vs": true,
-        ".vscode/**": true,
+    ".vscode/**": true,
-        "*.trx": true,
+    "*.trx": true,
-        "**/.DS_Store": true,
+    "**/.DS_Store": true,
-        "**/.git": true,
+    "**/.git": true,
-        "**/.hg": true,
+    "**/.hg": true,
-        "**/.svn": true,
+    "**/.svn": true,
-        "built/**": true,
+    "built/**": true,
-        "coverage/**": true,
+    "coverage/**": true,
-        "libs/**": true,
+    "libs/**": true,
-        "node_modules/**": true,
+    "node_modules/**": true,
-        "package-lock.json": true,
+    "package-lock.json": true,
-        "quickstart/**": true,
+    "quickstart/**": true,
-        "test/out/**": true,
+    "test/out/**": true,
-        "workers/libs/**": true
+    "workers/libs/**": true
-    },
+  },
-    "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
-}
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.organizeImports": true
+  }
+}

CODING_GUIDELINES.md

@@ -0,0 +1,190 @@
+# Coding Guidelines and Recommendations
+
+Cosmos Explorer has been under constant development for over 5 years. As a result, there are many different patterns and practices in the codebase. This document serves as a guide to how we write code and helps avoid propagating practices which are no longer preferred. Each requirement in this document is labeled and color-coded to show the relative importance. In order from highest to lowest importance:
+
+✅ DO this. If you feel you need an exception, engage with the project owners _prior_ to implementation.
+
+⛔️ DO NOT do this. If you feel you need an exception, engage with the project owners _prior_ to implementation.
+
+☑️ YOU SHOULD strongly consider this but it is not a requirement. If not following this advice, please comment code with why and proactively begin a discussion as part of the PR process.
+
+⚠️ YOU SHOULD NOT strongly consider not doing this. If not following this advice, please comment code with why and proactively begin a discussion as part of the PR process.
+
+💭 YOU MAY consider this advice if appropriate to your situation. Other team members may comment on this as part of PR review, but there is no need to be proactive.
+
+## Development Environment
+
+☑️ YOU SHOULD
+
+- Use VSCode and install the following extensions. This setup will catch most linting/formatting/type errors as you develop:
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+💭 YOU MAY
+
+- Use the [GitHub CLI](https://cli.github.com/). It has helpful workflows for submitting PRs as well as for checking out other team member's PRs.
+- Use Windows, Linux (including WSL), or OSX. We have team members developing on all three environments.
+
+✅ DO
+
+- Maintain cross-platform compatibility when modifying any engineering or build systems
+
+## Code Formatting
+
+✅ DO
+
+- Use [Prettier](https://prettier.io/) to format your code
+  - This will occur automatically if using the recommended editor setup
+  - `npm run format` will also format code
+
+## Linting
+
+✅ DO
+
+- Use [ESLint](https://eslint.org/) to check for code errors.
+  - This will occur automatically if using the recommended editor setup
+  - `npm run lint` will also check for linting errors
+
+💭 YOU MAY
+
+- Consider adding new lint rules.
+  - If you find yourself performing "nits" as part of PR review, consider adding a lint rule that will automatically catch the error in the future
+
+⚠️ YOU SHOULD NOT
+
+- Disable lint rules
+  - Lint rules exist as guidance and to catch common mistakes
+  - You will find places we disable specific lint rules however it should be exceptional.
+  - If a rule does need to be disabled, prefer disabling a specific line instead of the entire file.
+
+⛔️ DO NOT
+
+- Add [TSLint](https://palantir.github.io/tslint/) rules
+  - TSLint has been deprecated and is on track to be removed
+  - Always prefer ESLint rules
+
+## UI Components
+
+☑️ YOU SHOULD
+
+- Write new components using [React](https://reactjs.org/). We are actively migrating Cosmos Explorer off of [Knockout](https://knockoutjs.com/).
+- Use [Fluent](https://developer.microsoft.com/en-us/fluentui#/) components.
+  - Fluent components are designed to be highly accessible and composable
+  - Using Fluent allows us to build upon the work of the Fluent team and leads to a lower total cost of ownership for UI code
+
+### React
+
+☑️ YOU SHOULD
+
+- Use pure functional components when no state is required
+
+💭 YOU MAY
+
+- Use functional (hooks) or class components
+  - The project contains examples of both
+  - Neither is strongly preferred at this time
+
+⛔️ DO NOT
+
+- Use inheritance for sharing component behavior.
+  - React documentation covers this topic in detail https://reactjs.org/docs/composition-vs-inheritance.html
+- Suffix your file or component name with "Component"
+  - Even though the code has examples of it, we are ending the practice.
+
+## Libraries
+
+⚠️ YOU SHOULD NOT
+
+- Add new libraries to package.json.
+  - Adding libraries may bring in code that explodes the bundled size or attempts to run NodeJS code in the browser
+  - Consult with project owners for help with library selection if one is needed
+
+⛔️ DO NOT
+
+- Use underscore.js
+  - Much of this library is now native to JS and will be automatically transpiled
+- Use jQuery
+  - Much of this library is not native to the DOM.
+  - We are planning to remove it
+
+## Testing
+
+⛔️ DO NOT
+
+- Decrease test coverage
+  - Unit/Functional test coverage is checked as part of the CI process
+
+### Unit Tests
+
+✅ DO
+
+- Write unit tests for non-UI and utility code.
+- Write your tests using [Jest](https://jestjs.io/)
+
+☑️ YOU SHOULD
+
+- Abstract non-UI and utility code so it can run either the NodeJS or Browser environment
+
+### Functional(Component) Tests
+
+✅ DO
+
+- Write tests for UI components
+- Write your tests using [Jest](https://jestjs.io/)
+- Use either Enzyme or React Testing Library to perform component tests.
+
+### Mocking
+
+✅ DO
+
+- Use Jest's built-in mocking helpers
+
+☑️ YOU SHOULD
+
+- Write code that does not require mocking
+- Build components that do not require mocking extremely large or difficult to mock objects (like Explorer.ts). Pass _only_ what you need.
+
+⛔️ DO NOT
+
+- Use sinon.js for mocking
+  - Sinon has been deprecated and planned for removal
+
+### End to End Tests
+
+✅ DO
+
+- Use [Playwright](https://github.com/microsoft/playwright) and [Jest](https://jestjs.io/)
+- Write or modify an existing E2E test that covers the primary use case of any major feature.
+  - Use caution. Do not try to cover every case. End to End tests can be slow and brittle.
+
+☑️ YOU SHOULD
+
+- Write tests that use accessible attributes to perform actions. Role, Title, Label, etc
+  - More information https://testing-library.com/docs/queries/about#priority
+
+⚠️ YOU SHOULD NOT
+
+- Add test specfic `data-*` attributes to dom elements
+  - This is a common current practice, but one we would like to avoid in the future
+  - End to end tests need to use semantic HTML and accesible attributes to be truely end to end
+  - No user or screen reader actually navigates an app using `data-*` attributes
+- Add arbitrary time delays to wait for page to render or element to be ready.
+  - All the time delays add up and slow down testing.
+  - Prefer using the framework's "wait for..." functionality.
+
+### Migrating Knockout to React
+
+✅ DO
+
+- Consult other team members before beginning migration work. There is a significant amount of flux in patterns we are using and it is important we do not propagate incorrect patterns.
+- Start by converting HTML to JSX: https://magic.reactjs.net/htmltojsx.htm. Add functionality as a second step.
+
+☑️ YOU SHOULD
+
+- Write React components that require no dependency on Knockout or observables to trigger rendering.
+
+## Browser Support
+
+✅ DO
+
+- Support all [browsers supported by the Azure Portal](https://docs.microsoft.com/en-us/azure/azure-portal/azure-portal-supported-browsers-devices)

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contribution guidelines to Data Explorer
 
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
+This project welcomes contributions and suggestions. Most contributions require you to agree to a
 Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
 the rights to use your contribution. For details, visit https://cla.microsoft.com.
 
@@ -13,6 +13,7 @@ For more information see the [Code of Conduct FAQ](https://opensource.microsoft.
 contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
 
 ## Microsoft Open Source Code of Conduct
+
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 
 Resources:
@@ -20,33 +21,3 @@ Resources:
 - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
 - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
 - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
-
-## Browser support
-Please make sure to support all modern browsers as well as Internet Explorer 11.
-For IE support, polyfill is preferred over new usage of lodash or underscore. We already polyfill almost everything by importing babel-polyfill at the top of entry points.
-
-
-## Coding guidelines, conventions and recommendations
-### Typescript
-* Follow this [typescript style guide](https://github.com/excelmicro/typescript) which is based on [airbnb's style  guide](https://github.com/airbnb/javascript).
-* Conventions speficic to this project:
-  - Use double-quotes for string
-  - Don't use `null`, use `undefined`
-  - Pascal case for private static readonly fields
-  - Camel case for classnames in markup
-* Don't use class unless necessary
-* Code related to notebooks should be dynamically imported so that it is loaded from a separate bundle only if the account is notebook-enabled. There are already top-level notebook components which are dynamically imported and their dependencies can be statically imported from these files.
-* Prefer using [Fluent UI controls](https://developer.microsoft.com/en-us/fluentui#/controls/web) over creating your own, in order to maintain consistency and support a11y.
-
-### React
-* Prefer using React class components over function components and hooks unless you have a simple component and require no nested functions:
-  * Nested functions may be harder to test independently
-  * Switching from function component to class component later mayb be painful
-
-## Testing
-Any PR should not decrease testing coverage.
-
-## Recommended Tools and VS Code extensions
-* [Bookmarks](https://github.com/alefragnani/vscode-bookmarks)
-* [Bracket pair colorizer](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2)
-* [GitHub Pull Requests and Issues](https://github.com/Microsoft/vscode-pull-request-github)

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
@@ -69,6 +68,10 @@ Jest and Puppeteer are used for end to end browser based tests and are contained
 
 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
 
+### Architecture
+
+[![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
+
 # Contributing
 
 Please read the [contribution guidelines](./CONTRIBUTING.md).

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"]
+  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
+  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
 };

canvas/README.md

@@ -0,0 +1,7 @@
+# Why?
+
+This adds a mock module for `canvas`. Nteract has a ignored require and undeclared dependency on this module. `cavnas` is a server side node module and is not used in browser side code for nteract.
+
+Installing it locally (`npm install canvas`) will resolve the problem, but it is a native module so it is flaky depending on the system, node version, processor arch, etc. This module provides a simpler, more robust solution.
+
+Remove this workaround if [this bug](https://github.com/nteract/any-vega/issues/2) ever gets resolved 

canvas/index.js

@@ -0,0 +1 @@
+module.exports = {}

canvas/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "canvas",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

images/notebook/publish_content.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.31449 2.01439L4.00103 5.31963L3.26105 4.57965L7.8407 0L12.4203 4.57965L11.6804 5.31963L8.36691 2.01439V12.8428H7.31449V2.01439ZM13.629 12.8428H14.6814V16H1V12.8428H2.05242V14.9476H13.629V12.8428Z" fill="#0078D4"/>
+</svg>

jest-playwright.config.js

@@ -0,0 +1,13 @@
+const isCI = require("is-ci");
+
+module.exports = {
+  exitOnPageError: false,
+  launchOptions: {
+    headless: isCI,
+    slowMo: 10,
+    timeout: 60000,
+  },
+  contextOptions: {
+    ignoreHTTPSErrors: true,
+  },
+};

jest-puppeteer.config.js

@@ -1,11 +0,0 @@
-const isCI = require("is-ci");
-
-module.exports = {
-  launch: {
-    headless: isCI,
-    slowMo: 55,
-    defaultViewport: null,
-    ignoreHTTPSErrors: true,
-    args: ["--disable-web-security"]
-  }
-};

jest.config.e2e.js

@@ -1,5 +0,0 @@
-module.exports = {
-  preset: "jest-puppeteer",
-  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
-  setupFiles: ["dotenv/config"]
-};

jest.config.js

@@ -21,17 +21,13 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: [
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
-  //   "src/Common/Headers*"
-  // ],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
+  coveragePathIgnorePatterns: ["/node_modules/"],
-  //   "/node_modules/"
-  // ],
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ["json", "text", "cobertura"],
@@ -39,11 +35,11 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 20,
+      branches: 25,
-      functions: 24,
+      functions: 25,
       lines: 30,
-      statements: 29.0
+      statements: 30,
-    }
+    },
   },
 
   // Make calling deprecated APIs throw helpful error messages
@@ -71,12 +67,13 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
-    "worker-loader": "<rootDir>/mockModule",
+    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
-    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
+    "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes
+    "monaco-editor/(.*)$": "<rootDir>/__mocks__/monaco-editor",
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",
-    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs"
+    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -164,11 +161,11 @@ module.exports = {
   // A map from regular expressions to paths to transformers
   transform: {
     "^.+\\.html?$": "html-loader-jest",
-    "^.+\\.[t|j]sx?$": "babel-jest"
+    "^.+\\.[t|j]sx?$": "babel-jest",
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: ["/node_modules/", "/externals/"]
+  transformIgnorePatterns: ["/node_modules/", "/externals/"],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

jest.config.playwright.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: "jest-playwright-preset",
+  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
+  setupFiles: ["dotenv/config"],
+  testEnvironment: "./test/playwrightEnv.js",
+  setupFilesAfterEnv: ["expect-playwright"],
+};

less/Common/Constants.less

@@ -3,8 +3,8 @@
 /******************************************************************************/
 
 @font-face {
-    font-family: wf_segoe-ui_normal;
+  font-family: wf_segoe-ui_normal;
-    src: url('../../fonts/segoe-ui/west-european/normal/latest.woff');
+  src: local("Segoe UI"), url("../../fonts/segoe-ui/west-european/normal/latest.woff");
 }
 
 @DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@@ -20,26 +20,26 @@
                                 COLORS
 /******************************************************************************/
 
-@AccentMediumHigh: #0058AD;
+@AccentMediumHigh: #0058ad;
-@AccentMedium: #004E87;
+@AccentMedium: #004e87;
-@AccentHigh: #1EBAED;
+@AccentHigh: #1ebaed;
-@AccentExtraHigh: #55B3FF;
+@AccentExtraHigh: #55b3ff;
-@AccentLow: #EDF6FF;
+@AccentLow: #edf6ff;
-@AccentMediumLow: #DDEEFE;
+@AccentMediumLow: #ddeefe;
-@AccentLight: #EEF7FF;
+@AccentLight: #eef7ff;
-@AccentExtra: #DDF0FF;
+@AccentExtra: #ddf0ff;
 
-@SelectionHigh: #B91F26;
+@SelectionHigh: #b91f26;
-@BaseLight: #FFFFFF;
+@BaseLight: #ffffff;
 @BaseDark: #000000;
-@NotificationLow: #FFF4CE;
+@NotificationLow: #fff4ce;
-@NotificationHigh: #F9E9B0;
+@NotificationHigh: #f9e9b0;
-@Purple1: #8A2DA5;
+@Purple1: #8a2da5;
 @Dirty: #9b4f96;
 
-@BaseLow: #F2F2F2;
+@BaseLow: #f2f2f2;
-@BaseMediumLow: #E6E6E6;
+@BaseMediumLow: #e6e6e6;
-@BaseMedium: #CCCCCC;
+@BaseMedium: #cccccc;
 @BaseMediumHigh: #767676;
 @BaseHigh: #393939;
 
@@ -53,10 +53,17 @@
 
 @ErrorColor: @SelectionHigh;
 
-@SelectionColor: #3074B0;
+@SelectionColor: #3074b0;
 
 @FocusColor: #605e5c;
 
+@GalleryBackgroundColor: #fdfdfd;
+
+//Icons
+@InfoIconColor: #0072c6;
+@WarningIconColor: #db7500;
+@ErrorIconColor: #b91f26;
+
 /******************************************************************************
                                 METRICS
 /******************************************************************************/
@@ -80,7 +87,7 @@
 @ImgWidth: 14px;
 @ImgHeight: 14px;
 
-@toggleFontWeight:700;
+@toggleFontWeight: 700;
 
 //Resource Tree
 @TreeLineHeight: 17px;
@@ -144,16 +151,16 @@
 /**********************************************************************************/
 
 .flex-display(@display: flex) {
-	display: ~"-webkit-@{display}";
+  display: ~"-webkit-@{display}";
-	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-	display: ~"-ms-@{display}"; // IE11
+  display: ~"-ms-@{display}"; // IE11
-	display: @display;
+  display: @display;
 }
 
 .flex-direction(@direction: column) {
   -webkit-flex-direction: @direction;
-      -ms-flex-direction: @direction;
+  -ms-flex-direction: @direction;
-          flex-direction: @direction;
+  flex-direction: @direction;
 }
 
 /*************************************************************************************
@@ -161,32 +168,31 @@
 **************************************************************************************/
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    .selectedRadio,
+  .selectedRadio,
-    .selectedRadio:hover,
+  .selectedRadio:hover,
-    .selectedRadio:active,
+  .selectedRadio:active,
-    .selectedRadio.dirty,
+  .selectedRadio.dirty,
-    .tab [type=radio]:checked ~ label,
+  .tab [type="radio"]:checked ~ label,
-    .tab [type=radio]:checked ~ label:hover {
+  .tab [type="radio"]:checked ~ label:hover {
-        -ms-high-contrast-adjust: none;
+    -ms-high-contrast-adjust: none;
-        -webkit-text-fill-color: HighlightText;
+    -webkit-text-fill-color: HighlightText;
-        color: HighlightText;
+    color: HighlightText;
-        border-color: HighlightText;
+    border-color: HighlightText;
-        background-color: Highlight;
+    background-color: Highlight;
-    }
+  }
-
+
-    .queryMetricsSummaryTuple {
+  .queryMetricsSummaryTuple {
-
+    th,
-        th, td {
+    td {
-
+      &:nth-child(2) {
-            &:nth-child(2) {
+        width: @IETableDataWidth;
-                width: @IETableDataWidth;
+      }
-            }
+
-
+      &:nth-child(3) {
-            &:nth-child(3) {
+        width: 50%;
-                width: 50%;
+      }
-            }
-        }
     }
+  }
 }
 
 /********************************************************************************************
@@ -194,15 +200,15 @@
 *********************************************************************************************/
 
 .hover() {
-    background-color: @AccentLight;
+  background-color: @AccentLight;
 }
 
 .active() {
-    background-color: @AccentExtra;
+  background-color: @AccentExtra;
 }
 
 .focus() {
-    outline: 1px dashed @FocusColor;
+  outline: 1px dashed @FocusColor;
 }
 
 /************************************************************************************************
@@ -212,63 +218,87 @@
 @ToggleWidth: 180px;
 
 .toggleSwitch() {
-    max-width: 100%;
+  max-width: 100%;
-    margin-bottom: @SmallSpace;
+  margin-bottom: @SmallSpace;
-    padding: @SmallSpace;
+  padding: @SmallSpace;
-    cursor: pointer;
+  cursor: pointer;
-    color: @BaseHigh;
+  color: @BaseHigh;
-    font-weight: 400;
+  font-weight: 400;
-    font-size: @mediumFontSize;
+  font-size: @mediumFontSize;
-    font-family: @DataExplorerFont;
+  font-family: @DataExplorerFont;
 }
 
 .selectedToggle() {
-    border-bottom: 2px solid @BaseHigh;
+  border-bottom: 2px solid @BaseHigh;
 }
 
 .unselectedToggle() {
-    color: @AccentMediumHigh;
+  color: @AccentMediumHigh;
 }
 
 /********************************************************************************************************
                              Common Data Explorer Icons
 *********************************************************************************************************/
 .dataExplorerIcons() {
-    cursor: pointer;
+  cursor: pointer;
-    width: @ImgWidth;
+  width: @ImgWidth;
-    height: @ImgHeight;
+  height: @ImgHeight;
 }
 
 /*********************************************************************************************************
                             Info Tooltip
 **********************************************************************************************************/
 .infoTooltip() {
-    position: relative;
+  position: relative;
-    display: inline-block;
+  display: inline-block;
 }
 
 .tooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
-    visibility: hidden;
+  visibility: hidden;
-    background-color: @backgroundColor;
+  background-color: @backgroundColor;
-    color: @textColor;
+  color: @textColor;
-    position: absolute;
+  position: absolute;
-    z-index: 1;
+  z-index: 1;
-    left: @MediumSpace;
+  left: @MediumSpace;
-    padding: @MediumSpace;
+  padding: @MediumSpace;
 }
 
 .tooltipTextAfter(@color: @BaseDark) {
-    content: "";
+  content: "";
-    position: absolute;
+  position: absolute;
-    right: 100%;
+  right: 100%;
-    border-style: solid;
+  border-style: solid;
-    border-color: transparent @color transparent transparent;
+  border-color: transparent @color transparent transparent;
-    left: 0px;
+  left: 0px;
-    width: 0;
+  width: 0;
-    height: 0;
+  height: 0;
-    border-color: @InfoPointerColor transparent;
+  border-color: @InfoPointerColor transparent;
 }
 
 .tooltipVisible() {
-    visibility: visible;
+  visibility: visible;
+}
+
+.inputTooltip() {
+  position: relative;
+}
+
+.inputTooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
+  background-color: @backgroundColor;
+  color: @textColor;
+  position: absolute;
+  z-index: 1;
+  padding: @MediumSpace;
+}
+
+.inputTooltipTextAfter(@color: @BaseDark) {
+  content: "";
+  position: absolute;
+  right: 100%;
+  border-style: solid;
+  border-color: transparent @color transparent transparent;
+  left: 10px;
+  width: 0;
+  height: 0;
+  border-color: @InfoPointerColor transparent;
 }

less/hostedexplorer.less

@@ -13,6 +13,11 @@
 @NavMediumSpace: 10px;
 @NavLargeSpace: 15px;
 
+.skip-link {
+    position: fixed;
+    top: -200px;
+}
+
 html {
     font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
     padding: 0px;

less/tree.less

@@ -1,20 +1,13 @@
 @import "./Common/Constants";
 
-.main {
-    width: 100%;
-    float: left;
-    transition: all .0s ease-in-out;
-    -ms-transition: all 0s ease-in-out;
-    -webkit-transition: all 0s ease-in-out;
-    -moz-transition: all .0s ease-in-out;
-    height: 100%;
-    background-color: white;
-    border-left: 0px solid white;
-}
 
 .resourceTree {
     height: 100%;
+    width: 20%;
     flex: 0 0 auto;
+    .main {
+        height: 100%;
+    }
 }
 
 .resourceTreeScroll {

package.json

@@ -5,15 +5,17 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.9.0",
+    "@azure/cosmos": "3.10.5",
     "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "1.1.0",
+    "@azure/identity": "1.2.1",
-    "@azure/msal-browser": "2.8.0",
+    "@azure/ms-rest-nodeauth": "3.0.7",
-    "@azure/msal-react": "1.0.0-alpha.1",
+    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@jupyterlab/services": "6.0.0-rc.2",
+    "@babel/plugin-proposal-decorators": "7.12.12",
-    "@jupyterlab/terminal": "3.0.0-rc.2",
+    "@fluentui/react": "8.14.3",
-    "@microsoft/applicationinsights-web": "2.5.9",
+    "@jupyterlab/services": "6.0.2",
-    "@nteract/commutable": "7.3.2",
+    "@jupyterlab/terminal": "3.0.3",
+    "@microsoft/applicationinsights-web": "2.6.1",
+    "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
     "@nteract/data-explorer": "8.0.3",
@@ -24,7 +26,7 @@
     "@nteract/iron-icons": "1.0.0",
     "@nteract/jupyter-widgets": "2.0.0",
     "@nteract/logos": "1.0.0",
-    "@nteract/markdown": "4.4.0",
+    "@nteract/markdown": "4.6.0",
     "@nteract/monaco-editor": "3.2.2",
     "@nteract/octicons": "2.0.0",
     "@nteract/outputs": "3.0.9",
@@ -38,16 +40,14 @@
     "@nteract/transform-vega": "7.0.6",
     "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
+    "@testing-library/jest-dom": "5.11.9",
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
-    "@uifabric/react-cards": "0.109.110",
-    "@uifabric/styling": "7.13.7",
-    "abort-controller": "3.0.0",
     "applicationinsights": "1.8.0",
-    "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
-    "canvas": "2.6.1",
+    "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
+    "clipboard-copy": "4.0.1",
     "copy-webpack-plugin": "6.0.2",
     "crossroads": "0.12.2",
     "css-element-queries": "1.1.1",
@@ -56,13 +56,16 @@
     "datatables.net-dt": "1.10.19",
     "date-fns": "1.29.0",
     "dayjs": "1.8.19",
+    "dom-to-image": "2.6.0",
     "dotenv": "8.2.0",
-    "es6-object-assign": "1.1.0",
-    "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
+    "i18next": "19.8.4",
+    "i18next-browser-languagedetector": "6.0.1",
+    "i18next-http-backend": "1.0.23",
+    "iframe-resizer-react": "1.1.0",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
@@ -71,66 +74,63 @@
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.18.1",
-    "object.entries": "1.1.0",
+    "ms": "2.1.3",
-    "office-ui-fabric-react": "7.134.1",
+    "msal": "1.4.4",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
-    "promise-polyfill": "8.1.0",
+    "post-robot": "10.0.42",
-    "promise.prototype.finally": "3.1.0",
     "q": "1.5.1",
     "react": "16.13.1",
     "react-animate-height": "2.0.8",
     "react-dnd": "9.4.0",
     "react-dnd-html5-backend": "9.4.0",
-    "react-dom": "16.9.0",
+    "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
+    "react-i18next": "11.8.5",
     "react-notification-system": "0.2.17",
     "react-redux": "7.1.3",
     "redux": "4.0.4",
+    "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
+    "sanitize-html": "2.3.3",
     "styled-components": "4.3.2",
-    "text-encoding": "0.7.0",
+    "swr": "0.4.0",
+    "terser-webpack-plugin": "3.1.0",
     "underscore": "1.9.1",
-    "url-polyfill": "1.1.7",
     "utility-types": "3.10.0",
-    "webcrypto-liner": "1.1.4",
+    "zustand": "3.5.0"
-    "webfontloader": "1.6.28",
-    "whatwg-fetch": "3.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
     "@babel/preset-env": "7.9.0",
     "@babel/preset-react": "7.9.4",
     "@babel/preset-typescript": "7.9.0",
+    "@testing-library/react": "11.2.3",
     "@types/applicationinsights-js": "1.0.7",
     "@types/codemirror": "0.0.56",
     "@types/crossroads": "0.0.30",
     "@types/d3": "5.9.2",
+    "@types/dom-to-image": "2.6.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.3",
     "@types/hasher": "0.0.31",
-    "@types/jest": "23.3.10",
+    "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.3.2",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
+    "@types/post-robot": "10.0.1",
     "@types/promise.prototype.finally": "2.0.3",
-    "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
-    "@types/react": "16.9.56",
+    "@types/react": "17.0.3",
-    "@types/react-dom": "16.0.7",
+    "@types/react-dom": "17.0.3",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
+    "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
-    "@types/text-encoding": "0.0.33",
     "@types/underscore": "1.7.36",
-    "@types/webfontloader": "1.6.29",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/eslint-plugin": "4.0.1",
+    "@typescript-eslint/parser": "4.22.0",
-    "@typescript-eslint/parser": "4.0.1",
-    "axe-puppeteer": "1.1.0",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
@@ -144,16 +144,19 @@
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "expect-playwright": "0.3.3",
     "expose-loader": "0.7.5",
+    "fast-glob": "3.2.5",
     "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
+    "html-inline-css-webpack-plugin": "1.11.0",
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "4.5.2",
-    "inline-css": "2.2.5",
     "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
-    "jest-puppeteer": "4.4.0",
+    "jest-playwright-preset": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
     "less-loader": "4.1.0",
@@ -161,24 +164,23 @@
     "mini-css-extract-plugin": "0.4.3",
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
-    "prettier": "1.19.1",
+    "playwright": "1.10.0",
-    "puppeteer": "4.0.0",
+    "prettier": "2.2.1",
     "raw-loader": "0.5.1",
+    "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
-    "terser-webpack-plugin": "3.0.5",
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.0.2",
+    "typescript": "4.2.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
-    "webpack": "4.43.0",
+    "webpack": "4.46.0",
     "webpack-bundle-analyzer": "3.6.1",
     "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.0",
+    "webpack-dev-server": "3.11.0"
-    "worker-loader": "2.0.0"
   },
   "scripts": {
     "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
@@ -190,7 +192,7 @@
     "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode development --progress",
     "copyToConsumers": "node copyToConsumers",
     "test": "rimraf coverage && jest",
-    "test:e2e": "jest -c ./jest.config.e2e.js --detectOpenHandles",
+    "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
@@ -201,8 +203,8 @@
     "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
     "build:contracts": "npm run compile:contracts",
-    "strictEligibleFiles": "node ./strict-migration-tools/index.js",
+    "strict:find": "node ./strict-null-checks/find.js",
-    "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
+    "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
     "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
   },

preview/.azure/config

@@ -0,0 +1,7 @@
+[defaults]
+group = stfaul
+sku = P1v2
+appserviceplan = stfaul_asp_Linux_centralus_0
+location = centralus
+web = cosmos-explorer-preview
+

preview/README.md

@@ -0,0 +1,20 @@
+# Cosmos Explorer Preview
+
+Cosmos Explorer Preview makes it possible to try a working version of any commit on master or in a PR. No need to run the app locally or deploy to staging.
+
+Initial support is for Hosted (Connection string only) or the Azure Portal. Examples:
+
+Connection string URLs: https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
+Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
+
+In both cases replace `COMMIT_SHA` with the commit you want to view. It must have already completed its build on GitHub Actions.
+
+### Architechture
+
+- This folder contains a NodeJS app deployed to Azure App Service that powers preview URLs:
+  - Paths starting with `/commit/` are proxied to an Azure Storage account containing build artifacts
+  - Paths starting with `/proxy/` are proxied dynamically to Cosmos account endpoints. Required otherwise CORS would need to be configured for every account accessed.
+  - Paths starting with `/api/` are proxied to Portal APIs that do not support CORS.
+- On GitHub Actions build completion:
+  - All files in dist are uploaded to an Azure Storage account namespaced by the SHA of the commit
+  - `/preview/config.json` is uploaded to the same folder with preview specific configuration

preview/config.json

@@ -0,0 +1,3 @@
+{
+  "PROXY_PATH": "/proxy"
+}

preview/index.js

@@ -0,0 +1,68 @@
+const express = require("express");
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const port = process.env.PORT || 3000;
+const fetch = require("node-fetch");
+
+const api = createProxyMiddleware("/api", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  logLevel: "debug",
+  bypass: (req, res) => {
+    if (req.method === "OPTIONS") {
+      res.statusCode = 200;
+      res.send();
+    }
+  },
+});
+
+const proxy = createProxyMiddleware("/proxy", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/proxy": "" },
+  router: (req) => {
+    let newTarget = req.headers["x-ms-proxy-target"];
+    return newTarget;
+  },
+});
+
+const commit = createProxyMiddleware("/commit", {
+  target: "https://cosmosexplorerpreview.blob.core.windows.net",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/commit": "$web/" },
+});
+
+const app = express();
+
+app.use(api);
+app.use(proxy);
+app.use(commit);
+app.get("/pull/:pr(\\d+)", (req, res) => {
+  const pr = req.params.pr;
+  const [, query] = req.originalUrl.split("?");
+  const search = new URLSearchParams(query);
+
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
+    .then((response) => response.json())
+    .then(({ head: { ref, sha } }) => {
+      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
+      prUrl.hash = ref;
+      search.set("feature.pr", prUrl.href);
+
+      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
+      explorer.search = search.toString();
+
+      const portal = new URL("https://ms.portal.azure.com/");
+      portal.searchParams.set("dataExplorerSource", explorer.href);
+
+      return res.redirect(portal.href);
+    })
+    .catch(() => res.sendStatus(500));
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port: ${port}`);
+});

preview/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "cosmos-explorer-preview",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "deploy": "az webapp up -n cosmos-explorer-preview --subscription cosmosdb-portalteam-generaldemo -g stfaul",
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Microsoft Corporation",
+  "dependencies": {
+    "express": "^4.17.1",
+    "http-proxy-middleware": "^1.1.0",
+    "node-fetch": "^2.6.1"
+  }
+}

sampleData/gremlinSampleData.json

@@ -3,6 +3,7 @@
   "offerThroughput": 400,
   "databaseLevelThroughput": false,
   "collectionId": "Persons",
+  "createNewDatabase": true,
   "partitionKey": { "kind": "Hash", "paths": ["/name"] },
   "data": [
     "g.addV('person').property(id, '1').property('name', 'Eva').property('age', 44)",

src/AuthType.ts

@@ -1,6 +1,7 @@
-export enum AuthType {
+export enum AuthType {
-  AAD = "aad",
+  AAD = "aad",
-  EncryptedToken = "encryptedtoken",
+  EncryptedToken = "encryptedtoken",
-  MasterKey = "masterkey",
+  MasterKey = "masterkey",
-  ResourceToken = "resourcetoken"
+  ResourceToken = "resourcetoken",
-}
+  ConnectionString = "connectionstring",
+}

src/Bindings/BindingHandlersRegisterer.ts

@@ -1,21 +1,22 @@
-import * as ko from "knockout";
+import * as ko from "knockout";
-import * as ReactBindingHandler from "./ReactBindingHandler";
+import * as ReactBindingHandler from "./ReactBindingHandler";
-
+import "../Explorer/Tables/DataTable/DataTableBindingManager";
-export class BindingHandlersRegisterer {
+
-  public static registerBindingHandlers() {
+export class BindingHandlersRegisterer {
-    ko.bindingHandlers.setTemplateReady = {
+  public static registerBindingHandlers() {
-      init(
+    ko.bindingHandlers.setTemplateReady = {
-        element: any,
+      init(
-        wrappedValueAccessor: () => any,
+        element: any,
-        allBindings?: ko.AllBindings,
+        wrappedValueAccessor: () => any,
-        viewModel?: any,
+        allBindings?: ko.AllBindings,
-        bindingContext?: ko.BindingContext
+        viewModel?: any,
-      ) {
+        bindingContext?: ko.BindingContext
-        const value = ko.unwrap(wrappedValueAccessor());
+      ) {
-        bindingContext?.$data.isTemplateReady(value);
+        const value = ko.unwrap(wrappedValueAccessor());
-      }
+        bindingContext?.$data.isTemplateReady(value);
-    } as ko.BindingHandler;
+      },
-
+    } as ko.BindingHandler;
-    ReactBindingHandler.Registerer.register();
+
-  }
+    ReactBindingHandler.Registerer.register();
-}
+  }
+}

src/Bindings/ReactBindingHandler.ts

@@ -22,13 +22,7 @@ export interface ReactAdapter {
 export class Registerer {
   public static register(): void {
     ko.bindingHandlers.react = {
-      init: (
+      init: (element: any, wrappedValueAccessor: () => any) => {
-        element: any,
-        wrappedValueAccessor: () => any,
-        allBindings?: ko.AllBindings,
-        viewModel?: any,
-        bindingContext?: ko.BindingContext
-      ) => {
         const adapter: ReactAdapter = wrappedValueAccessor();
 
         if (adapter.setElement) {
@@ -42,7 +36,7 @@ export class Registerer {
 
         // Initial rendering at mount point
         ReactDOM.render(adapter.renderComponent(), element);
-      }
+      },
     } as ko.BindingHandler;
   }
 }

src/CellOutputViewer/CellOutputViewer.less

@@ -0,0 +1,15 @@
+.schema-analyzer-cell-outputs {
+  padding: 10px 2px;
+}
+
+// Mimic FluentUI8's DocumentCard style
+.schema-analyzer-cell-output {
+  margin-bottom: 20px;
+  padding: 14px 20px;
+  border: 1px solid rgb(237, 235, 233);
+}
+
+.schema-analyzer-cell-output:hover {
+  border-color: rgb(200, 198, 196);
+  box-shadow: inset 0 0 0 1px rgb(200, 198, 196)
+}

src/CellOutputViewer/CellOutputViewer.tsx

@@ -0,0 +1,104 @@
+import { createImmutableOutput, JSONObject, OnDiskOutput } from "@nteract/commutable";
+// import outputs individually to avoid increasing the bundle size
+import { KernelOutputError } from "@nteract/outputs/lib/components/kernel-output-error";
+import { Output } from "@nteract/outputs/lib/components/output";
+import { StreamText } from "@nteract/outputs/lib/components/stream-text";
+import { ContentRef } from "@nteract/types";
+import "bootstrap/dist/css/bootstrap.css";
+import postRobot from "post-robot";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "../../externals/iframeResizer.contentWindow.min.js"; // Required for iFrameResizer to work
+import { SnapshotRequest } from "../Explorer/Notebook/NotebookComponent/types";
+import "../Explorer/Notebook/NotebookRenderer/base.css";
+import "../Explorer/Notebook/NotebookRenderer/default.css";
+import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
+import "./CellOutputViewer.less";
+import { TransformMedia } from "./TransformMedia";
+
+export interface SnapshotResponse {
+  imageSrc: string;
+  requestId: string;
+}
+export interface CellOutputViewerProps {
+  id: string;
+  contentRef: ContentRef;
+  outputsContainerClassName: string;
+  outputClassName: string;
+  outputs: OnDiskOutput[];
+  onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => void;
+}
+
+const onInit = async () => {
+  postRobot.on(
+    "props",
+    {
+      window: window.parent,
+      domain: window.location.origin,
+    },
+    (event) => {
+      // Typescript definition for event is wrong. So read props by casting to <any>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const props = (event as any).data as CellOutputViewerProps;
+      const outputs = (
+        <div data-iframe-height className={props.outputsContainerClassName}>
+          {props.outputs?.map((output, index) => (
+            <div className={props.outputClassName} key={index}>
+              <Output output={createImmutableOutput(output)} key={index}>
+                <TransformMedia
+                  output_type={"display_data"}
+                  id={props.id}
+                  contentRef={props.contentRef}
+                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+                />
+                <TransformMedia
+                  output_type={"execute_result"}
+                  id={props.id}
+                  contentRef={props.contentRef}
+                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+                />
+                <KernelOutputError />
+                <StreamText />
+              </Output>
+            </div>
+          ))}
+        </div>
+      );
+
+      ReactDOM.render(outputs, document.getElementById("cellOutput"));
+    }
+  );
+
+  postRobot.on(
+    "snapshotRequest",
+    {
+      window: window.parent,
+      domain: window.location.origin,
+    },
+    async (event): Promise<SnapshotResponse> => {
+      const topNode = document.getElementById("cellOutput");
+      if (!topNode) {
+        const errorMsg = "No top node to snapshot";
+        return Promise.reject(new Error(errorMsg));
+      }
+
+      // Typescript definition for event is wrong. So read props by casting to <any>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const snapshotRequest = (event as any).data as SnapshotRequest;
+      const result = await NotebookUtil.takeScreenshotDomToImage(
+        topNode,
+        snapshotRequest.aspectRatio,
+        undefined,
+        snapshotRequest.downloadFilename
+      );
+
+      return {
+        imageSrc: result.imageSrc,
+        requestId: snapshotRequest.requestId,
+      };
+    }
+  );
+};
+
+// Entry point
+window.addEventListener("load", onInit);

src/CellOutputViewer/TransformMedia.tsx

@@ -0,0 +1,138 @@
+import { ImmutableDisplayData, ImmutableExecuteResult, JSONObject } from "@nteract/commutable";
+// import outputs individually to avoid increasing the bundle size
+import { HTML } from "@nteract/outputs/lib/components/media/html";
+import { Image } from "@nteract/outputs/lib/components/media/image";
+import { JavaScript } from "@nteract/outputs/lib/components/media/javascript";
+import { Json } from "@nteract/outputs/lib/components/media/json";
+import { LaTeX } from "@nteract/outputs/lib/components/media/latex";
+import { Plain } from "@nteract/outputs/lib/components/media/plain";
+import { SVG } from "@nteract/outputs/lib/components/media/svg";
+import { ContentRef } from "@nteract/types";
+import React, { Suspense } from "react";
+
+const EmptyTransform = (): JSX.Element => <></>;
+
+const displayOrder = [
+  "application/vnd.jupyter.widget-view+json",
+  "application/vnd.vega.v5+json",
+  "application/vnd.vega.v4+json",
+  "application/vnd.vega.v3+json",
+  "application/vnd.vega.v2+json",
+  "application/vnd.vegalite.v4+json",
+  "application/vnd.vegalite.v3+json",
+  "application/vnd.vegalite.v2+json",
+  "application/vnd.vegalite.v1+json",
+  "application/geo+json",
+  "application/vnd.plotly.v1+json",
+  "text/vnd.plotly.v1+html",
+  "application/x-nteract-model-debug+json",
+  "application/vnd.dataresource+json",
+  "application/vdom.v1+json",
+  "application/json",
+  "application/javascript",
+  "text/html",
+  "text/markdown",
+  "text/latex",
+  "image/svg+xml",
+  "image/gif",
+  "image/png",
+  "image/jpeg",
+  "text/plain",
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const transformsById = new Map<string, React.ComponentType<any>>([
+  ["text/vnd.plotly.v1+html", React.lazy(() => import("@nteract/transform-plotly"))],
+  ["application/vnd.plotly.v1+json", React.lazy(() => import("@nteract/transform-plotly"))],
+  ["application/geo+json", EmptyTransform], // TODO: The geojson transform will likely need some work because of the basemap URL(s)
+  ["application/x-nteract-model-debug+json", React.lazy(() => import("@nteract/transform-model-debug"))],
+  ["application/vnd.dataresource+json", React.lazy(() => import("@nteract/data-explorer"))],
+  ["application/vnd.jupyter.widget-view+json", React.lazy(() => import("./transforms/WidgetDisplay"))],
+  ["application/vnd.vegalite.v1+json", React.lazy(() => import("./transforms/VegaLite1"))],
+  ["application/vnd.vegalite.v2+json", React.lazy(() => import("./transforms/VegaLite2"))],
+  ["application/vnd.vegalite.v3+json", React.lazy(() => import("./transforms/VegaLite3"))],
+  ["application/vnd.vegalite.v4+json", React.lazy(() => import("./transforms/VegaLite4"))],
+  ["application/vnd.vega.v2+json", React.lazy(() => import("./transforms/Vega2"))],
+  ["application/vnd.vega.v3+json", React.lazy(() => import("./transforms/Vega3"))],
+  ["application/vnd.vega.v4+json", React.lazy(() => import("./transforms/Vega4"))],
+  ["application/vnd.vega.v5+json", React.lazy(() => import("./transforms/Vega5"))],
+  ["application/vdom.v1+json", React.lazy(() => import("@nteract/transform-vdom"))],
+  ["application/json", Json],
+  ["application/javascript", JavaScript],
+  ["text/html", HTML],
+  ["text/markdown", React.lazy(() => import("@nteract/outputs/lib/components/media/markdown"))], // Markdown increases the bundle size so lazy load it
+  ["text/latex", LaTeX],
+  ["image/svg+xml", SVG],
+  ["image/gif", Image],
+  ["image/png", Image],
+  ["image/jpeg", Image],
+  ["text/plain", Plain],
+]);
+
+interface TransformMediaProps {
+  output_type: string;
+  id: string;
+  contentRef: ContentRef;
+  output?: ImmutableDisplayData | ImmutableExecuteResult;
+  onMetadataChange: (metadata: JSONObject, mediaType: string) => void;
+}
+
+export const TransformMedia = (props: TransformMediaProps): JSX.Element => {
+  const { Media, mediaType, data, metadata } = getMediaInfo(props);
+
+  // If we had no valid result, return an empty output
+  if (!mediaType || !data) {
+    return <></>;
+  }
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Media
+        onMetadataChange={props.onMetadataChange}
+        data={data}
+        metadata={metadata}
+        contentRef={props.contentRef}
+        id={props.id}
+      />
+    </Suspense>
+  );
+};
+
+const getMediaInfo = (props: TransformMediaProps) => {
+  const { output, output_type } = props;
+  // This component should only be used with display data and execute result
+  if (!output || !(output_type === "display_data" || output_type === "execute_result")) {
+    console.warn("connected transform media managed to get a non media bundle output");
+    return {
+      Media: EmptyTransform,
+    };
+  }
+
+  // Find the first mediaType in the output data that we support with a handler
+  const mediaType = displayOrder.find(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(output.data, key) &&
+      (Object.prototype.hasOwnProperty.call(transformsById, key) || transformsById.get(key))
+  );
+
+  if (mediaType) {
+    const metadata = output.metadata.get(mediaType);
+    const data = output.data[mediaType];
+
+    const Media = transformsById.get(mediaType);
+    return {
+      Media,
+      mediaType,
+      data,
+      metadata,
+    };
+  }
+
+  return {
+    Media: EmptyTransform,
+    mediaType,
+    output,
+  };
+};
+
+export default TransformMedia;

src/CellOutputViewer/cellOutputViewer.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Cell Output Viewer</title>
+  </head>
+
+  <body>
+    <div class="cellOutput" id="cellOutput"></div>
+  </body>
+</html>

src/CellOutputViewer/transforms/Vega2.ts

@@ -0,0 +1 @@
+export { Vega2 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/Vega3.ts

@@ -0,0 +1 @@
+export { Vega3 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/Vega4.ts

@@ -0,0 +1 @@
+export { Vega4 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/Vega5.ts

@@ -0,0 +1 @@
+export { Vega5 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite1.ts

@@ -0,0 +1 @@
+export { VegaLite1 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite2.ts

@@ -0,0 +1 @@
+export { VegaLite2 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite3.ts

@@ -0,0 +1 @@
+export { VegaLite3 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite4.ts

@@ -0,0 +1 @@
+export { VegaLite4 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/WidgetDisplay.ts

@@ -0,0 +1 @@
+export { WidgetDisplay as default } from "@nteract/jupyter-widgets";

src/Common/ArrayHashMap.ts

@@ -1,49 +1,9 @@
-import { HashMap } from "./HashMap";
-
 /**
  * Hash map of arrays which allows to:
  * - push an item by key: add to array and create array if needed
  * - remove item by key: remove from array and delete array if needed
  */
-
+export class ArrayHashMap<T> extends Map<string, T[]> {
-export class ArrayHashMap<T> {
-  private store: HashMap<T[]>;
-
-  constructor() {
-    this.store = new HashMap();
-  }
-
-  public has(key: string): boolean {
-    return this.store.has(key);
-  }
-
-  public get(key: string): T[] {
-    return this.store.get(key);
-  }
-
-  public size(): number {
-    return this.store.size();
-  }
-
-  public clear(): void {
-    this.store.clear();
-  }
-
-  public keys(): string[] {
-    return this.store.keys();
-  }
-
-  public delete(key: string): boolean {
-    return this.store.delete(key);
-  }
-
-  public forEach(key: string, iteratorFct: (value: T) => void) {
-    const values = this.store.get(key);
-    if (values) {
-      values.forEach(value => iteratorFct(value));
-    }
-  }
-
   /**
    * Insert item into array.
    * If no array, create one.
@@ -52,16 +12,8 @@ export class ArrayHashMap<T> {
    * @param item
    */
   public push(key: string, item: T): void {
-    let itemsArray: T[] = this.store.get(key);
+    const array = this.get(key);
-    if (!itemsArray) {
+    array ? array.includes(item) || array.push(item) : this.set(key, [item]);
-      itemsArray = [item];
-      this.store.set(key, itemsArray);
-      return;
-    }
-
-    if (itemsArray.indexOf(item) === -1) {
-      itemsArray.push(item);
-    }
   }
 
   /**
@@ -70,18 +22,11 @@ export class ArrayHashMap<T> {
    * @param key
    * @param itemToRemove
    */
-  public remove(key: string, itemToRemove: T) {
+  public remove(key: string, itemToRemove: T): void {
-    if (!this.store.has(key)) {
+    const array = this.get(key);
-      return;
+    if (array) {
-    }
+      const remaining = array.filter((item) => item !== itemToRemove);
-
+      remaining.length ? this.set(key, remaining) : this.delete(key);
-    const itemsArray = this.store.get(key);
-    const index = itemsArray.indexOf(itemToRemove);
-    if (index >= 0) {
-      itemsArray.splice(index, 1);
-      if (itemsArray.length === 0) {
-        this.store.delete(key);
-      }
     }
   }
 }

src/Common/CollapsedResourceTree.tsx

@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+
+export interface CollapsedResourceTreeProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+}
+
+export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+}: CollapsedResourceTreeProps): JSX.Element => {
+  return (
+    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
+      <div className="main-nav nav">
+        <ul className="nav">
+          <li
+            className="resourceTreeCollapse"
+            id="collapseToggleLeftPaneButton"
+            role="button"
+            tabIndex={0}
+            aria-label="Expand Tree"
+          >
+            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
+              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
+            </span>
+            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
+              <span data-bind="text: collectionTitle" />
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};

src/Common/Constants.ts

@@ -1,434 +1,381 @@
-import { HashMap } from "./HashMap";
+export class CodeOfConductEndpoints {
-
+  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
-export class AuthorizationEndpoints {
+  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
-  public static arm: string = "https://management.core.windows.net/";
+  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
-  public static common: string = "https://login.windows.net/";
+}
-}
+
-
+export class EndpointsRegex {
-export class CodeOfConductEndpoints {
+  public static readonly cassandra = [
-  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
+    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
-  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
+    "HostName=(.*).cassandra.cosmos.azure.com",
-  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
+  ];
-}
+  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
-
+  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
-export class EndpointsRegex {
+  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
-  public static readonly cassandra = [
+  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
-    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
+}
-    "HostName=(.*).cassandra.cosmos.azure.com"
+
-  ];
+export class ApiEndpoints {
-  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
+  public static runtimeProxy: string = "/api/RuntimeProxy";
-  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
+  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
-  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
+}
-  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
+
-}
+export class ServerIds {
-
+  public static localhost: string = "localhost";
-export class ApiEndpoints {
+  public static blackforest: string = "blackforest";
-  public static runtimeProxy: string = "/api/RuntimeProxy";
+  public static fairfax: string = "fairfax";
-  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
+  public static mooncake: string = "mooncake";
-}
+  public static productionPortal: string = "prod";
-
+  public static dev: string = "dev";
-export class ServerIds {
+}
-  public static localhost: string = "localhost";
+
-  public static blackforest: string = "blackforest";
+export class ArmApiVersions {
-  public static fairfax: string = "fairfax";
+  public static readonly documentDB: string = "2015-11-06";
-  public static mooncake: string = "mooncake";
+  public static readonly arcadia: string = "2019-06-01-preview";
-  public static productionPortal: string = "prod";
+  public static readonly arcadiaLivy: string = "2019-11-01-preview";
-  public static dev: string = "dev";
+  public static readonly arm: string = "2015-11-01";
-}
+  public static readonly armFeatures: string = "2014-08-01-preview";
-
+  public static readonly publicVersion = "2020-04-01";
-export class ArmApiVersions {
+}
-  public static readonly documentDB: string = "2015-11-06";
+
-  public static readonly arcadia: string = "2019-06-01-preview";
+export class ArmResourceTypes {
-  public static readonly arcadiaLivy: string = "2019-11-01-preview";
+  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
-  public static readonly arm: string = "2015-11-01";
+  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
-  public static readonly armFeatures: string = "2014-08-01-preview";
+}
-  public static readonly publicVersion = "2020-04-01";
+
-}
+export class BackendDefaults {
-
+  public static partitionKeyKind: string = "Hash";
-export class ArmResourceTypes {
+  public static singlePartitionStorageInGb: string = "10";
-  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
+  public static multiPartitionStorageInGb: string = "100";
-  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
+  public static maxChangeFeedRetentionDuration: number = 10;
-}
+  public static partitionKeyVersion = 2;
-
+}
-export class BackendDefaults {
+
-  public static partitionKeyKind: string = "Hash";
+export class ClientDefaults {
-  public static singlePartitionStorageInGb: string = "10";
+  public static requestTimeoutMs: number = 60000;
-  public static multiPartitionStorageInGb: string = "100";
+  public static portalCacheTimeoutMs: number = 10000;
-  public static maxChangeFeedRetentionDuration: number = 10;
+  public static errorNotificationTimeoutMs: number = 5000;
-  public static partitionKeyVersion = 2;
+  public static copyHelperTimeoutMs: number = 2000;
-}
+  public static waitForDOMElementMs: number = 500;
-
+  public static cacheBustingTimeoutMs: number =
-export class ClientDefaults {
+    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static requestTimeoutMs: number = 60000;
+  public static databaseThroughputIncreaseFactor: number = 100;
-  public static portalCacheTimeoutMs: number = 10000;
+  public static readonly arcadiaTokenRefreshInterval: number =
-  public static errorNotificationTimeoutMs: number = 5000;
+    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static copyHelperTimeoutMs: number = 2000;
+  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
-  public static waitForDOMElementMs: number = 500;
+}
-  public static cacheBustingTimeoutMs: number =
+
-    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+export enum AccountKind {
-  public static databaseThroughputIncreaseFactor: number = 100;
+  DocumentDB = "DocumentDB",
-  public static readonly arcadiaTokenRefreshInterval: number =
+  MongoDB = "MongoDB",
-    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
+  Parse = "Parse",
-  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
+  GlobalDocumentDB = "GlobalDocumentDB",
-}
+  Default = "DocumentDB",
-
+}
-export class AccountKind {
+
-  public static DocumentDB: string = "DocumentDB";
+export class CorrelationBackend {
-  public static MongoDB: string = "MongoDB";
+  public static Url: string = "https://aka.ms/cosmosdbanalytics";
-  public static Parse: string = "Parse";
+}
-  public static GlobalDocumentDB: string = "GlobalDocumentDB";
+
-  public static Default: string = AccountKind.DocumentDB;
+export class CapabilityNames {
-}
+  public static EnableTable: string = "EnableTable";
-
+  public static EnableGremlin: string = "EnableGremlin";
-export class CorrelationBackend {
+  public static EnableCassandra: string = "EnableCassandra";
-  public static Url: string = "https://aka.ms/cosmosdbanalytics";
+  public static EnableAutoScale: string = "EnableAutoScale";
-}
+  public static readonly EnableNotebooks: string = "EnableNotebooks";
-
+  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
-export class DefaultAccountExperience {
+  public static readonly EnableMongo: string = "EnableMongo";
-  public static DocumentDB: string = "DocumentDB";
+  public static readonly EnableServerless: string = "EnableServerless";
-  public static Graph: string = "Graph";
+}
-  public static MongoDB: string = "MongoDB";
+
-  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
+// flight names returned from the portal are always lowercase
-  public static Table: string = "Table";
+export class Flights {
-  public static Cassandra: string = "Cassandra";
+  public static readonly SettingsV2 = "settingsv2";
-  public static Default: string = DefaultAccountExperience.DocumentDB;
+  public static readonly MongoIndexEditor = "mongoindexeditor";
-}
+  public static readonly MongoIndexing = "mongoindexing";
-
+  public static readonly AutoscaleTest = "autoscaletest";
-export class CapabilityNames {
+  public static readonly SchemaAnalyzer = "schemaanalyzer";
-  public static EnableTable: string = "EnableTable";
+}
-  public static EnableGremlin: string = "EnableGremlin";
+
-  public static EnableCassandra: string = "EnableCassandra";
+export class AfecFeatures {
-  public static EnableAutoScale: string = "EnableAutoScale";
+  public static readonly Spark = "spark-public-preview";
-  public static readonly EnableNotebooks: string = "EnableNotebooks";
+  public static readonly Notebooks = "sparknotebooks-public-preview";
-  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
+  public static readonly StorageAnalytics = "storageanalytics-public-preview";
-  public static readonly EnableMongo: string = "EnableMongo";
+}
-  public static readonly EnableServerless: string = "EnableServerless";
+
-}
+export class TagNames {
-
+  public static defaultExperience: string = "defaultExperience";
-export class Features {
+}
-  public static readonly cosmosdb = "cosmosdb";
+
-  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+export class MongoDBAccounts {
-  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static protocol: string = "https";
-  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static defaultPort: string = "10255";
-  public static readonly enableTtl = "enablettl";
+}
-  public static readonly enableNotebooks = "enablenotebooks";
+
-  public static readonly enableGalleryPublish = "enablegallerypublish";
+export enum MongoBackendEndpointType {
-  public static readonly enableLinkInjection = "enablelinkinjection";
+  local,
-  public static readonly enableSpark = "enablespark";
+  remote,
-  public static readonly livyEndpoint = "livyendpoint";
+}
-  public static readonly notebookServerUrl = "notebookserverurl";
+
-  public static readonly notebookServerToken = "notebookservertoken";
+// TODO: 435619 Add default endpoints per cloud and use regional only when available
-  public static readonly notebookBasePath = "notebookbasepath";
+export class CassandraBackend {
-  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
-  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
-  public static readonly ttl90Days = "ttl90days";
+  public static readonly queryApi: string = "api/cassandra";
-  public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly guestQueryApi: string = "api/guest/cassandra";
-  public static readonly enableSchema = "enableschema";
+  public static readonly keysApi: string = "api/cassandra/keys";
-  public static readonly enableSDKoperations = "enablesdkoperations";
+  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
-  public static readonly showMinRUSurvey = "showminrusurvey";
+  public static readonly schemaApi: string = "api/cassandra/schema";
-}
+  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
-
+}
-// flight names returned from the portal are always lowercase
+
-export class Flights {
+export class Queries {
-  public static readonly SettingsV2 = "settingsv2";
+  public static CustomPageOption: string = "custom";
-  public static readonly MongoIndexEditor = "mongoindexeditor";
+  public static UnlimitedPageOption: string = "unlimited";
-}
+  public static itemsPerPage: number = 100;
-
+  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-export class AfecFeatures {
+
-  public static readonly Spark = "spark-public-preview";
+  public static QueryEditorMinHeightRatio: number = 0.1;
-  public static readonly Notebooks = "sparknotebooks-public-preview";
+  public static QueryEditorMaxHeightRatio: number = 0.4;
-  public static readonly StorageAnalytics = "storageanalytics-public-preview";
+  public static readonly DefaultMaxDegreeOfParallelism = 6;
-}
+}
-
+
-export class Spark {
+export class SavedQueries {
-  public static readonly MaxWorkerCount = 10;
+  public static readonly CollectionName: string = "___Query";
-  public static readonly SKUs: HashMap<string> = new HashMap({
+  public static readonly DatabaseName: string = "___Cosmos";
-    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
+  public static readonly OfferThroughput: number = 400;
-    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
+  public static readonly PartitionKeyProperty: string = "id";
-    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
+}
-    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
+
-    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
+export class DocumentsGridMetrics {
-    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
+  public static DocumentsPerPage: number = 100;
-    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
+  public static IndividualRowHeight: number = 34;
-  });
+  public static BufferHeight: number = 28;
-}
+  public static SplitterMinWidth: number = 200;
-
+  public static SplitterMaxWidth: number = 360;
-export class TagNames {
+
-  public static defaultExperience: string = "defaultExperience";
+  public static DocumentEditorMinWidthRatio: number = 0.2;
-}
+  public static DocumentEditorMaxWidthRatio: number = 0.4;
-
+}
-export class MongoDBAccounts {
+
-  public static protocol: string = "https";
+export class ExplorerMetrics {
-  public static defaultPort: string = "10255";
+  public static SplitterMinWidth: number = 240;
-}
+  public static SplitterMaxWidth: number = 400;
-
+  public static CollapsedResourceTreeWidth: number = 36;
-export enum MongoBackendEndpointType {
+}
-  local,
+
-  remote
+export class SplitterMetrics {
-}
+  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
-
+}
-// TODO: 435619 Add default endpoints per cloud and use regional only when available
+
-export class CassandraBackend {
+export class Areas {
-  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
+  public static ResourceTree: string = "Resource Tree";
-  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
+  public static ContextualPane: string = "Contextual Pane";
-  public static readonly queryApi: string = "api/cassandra";
+  public static Tab: string = "Tab";
-  public static readonly guestQueryApi: string = "api/guest/cassandra";
+  public static ShareDialog: string = "Share Access Dialog";
-  public static readonly keysApi: string = "api/cassandra/keys";
+  public static Notebook: string = "Notebook";
-  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
+}
-  public static readonly schemaApi: string = "api/cassandra/schema";
+
-  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
+export class HttpHeaders {
-}
+  public static activityId: string = "x-ms-activity-id";
-
+  public static apiType: string = "x-ms-cosmos-apitype";
-export class Queries {
+  public static authorization: string = "authorization";
-  public static CustomPageOption: string = "custom";
+  public static collectionIndexTransformationProgress: string =
-  public static UnlimitedPageOption: string = "unlimited";
+    "x-ms-documentdb-collection-index-transformation-progress";
-  public static itemsPerPage: number = 100;
+  public static continuation: string = "x-ms-continuation";
-  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
+  public static correlationRequestId: string = "x-ms-correlation-request-id";
-
+  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
-  public static QueryEditorMinHeightRatio: number = 0.1;
+  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
-  public static QueryEditorMaxHeightRatio: number = 0.4;
+  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
-  public static readonly DefaultMaxDegreeOfParallelism = 6;
+  public static connectionString: string = "x-ms-connection-string";
-}
+  public static msDate: string = "x-ms-date";
-
+  public static location: string = "Location";
-export class SavedQueries {
+  public static contentType: string = "Content-Type";
-  public static readonly CollectionName: string = "___Query";
+  public static offerReplacePending: string = "x-ms-offer-replace-pending";
-  public static readonly DatabaseName: string = "___Cosmos";
+  public static user: string = "x-ms-user";
-  public static readonly OfferThroughput: number = 400;
+  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
-  public static readonly PartitionKeyProperty: string = "id";
+  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
-}
+  public static requestCharge: string = "x-ms-request-charge";
-
+  public static resourceQuota: string = "x-ms-resource-quota";
-export class DocumentsGridMetrics {
+  public static resourceUsage: string = "x-ms-resource-usage";
-  public static DocumentsPerPage: number = 100;
+  public static retryAfterMs: string = "x-ms-retry-after-ms";
-  public static IndividualRowHeight: number = 34;
+  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
-  public static BufferHeight: number = 28;
+  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
-  public static SplitterMinWidth: number = 200;
+  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
-  public static SplitterMaxWidth: number = 360;
+  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
-
+  public static autoPilotThroughput = "autoscaleSettings";
-  public static DocumentEditorMinWidthRatio: number = 0.2;
+  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
-  public static DocumentEditorMaxWidthRatio: number = 0.4;
+  public static partitionKey: string = "x-ms-documentdb-partitionkey";
-}
+  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
-
+  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-export class ExplorerMetrics {
+}
-  public static SplitterMinWidth: number = 240;
+
-  public static SplitterMaxWidth: number = 400;
+export class ApiType {
-  public static CollapsedResourceTreeWidth: number = 36;
+  // Mapped to hexadecimal values in the backend
-}
+  public static readonly MongoDB: number = 1;
-
+  public static readonly Gremlin: number = 2;
-export class SplitterMetrics {
+  public static readonly Cassandra: number = 4;
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
+  public static readonly Table: number = 8;
-}
+  public static readonly SQL: number = 16;
-
+}
-export class Areas {
+
-  public static ResourceTree: string = "Resource Tree";
+export class HttpStatusCodes {
-  public static ContextualPane: string = "Contextual Pane";
+  public static readonly OK: number = 200;
-  public static Tab: string = "Tab";
+  public static readonly Created: number = 201;
-  public static ShareDialog: string = "Share Access Dialog";
+  public static readonly Accepted: number = 202;
-  public static Notebook: string = "Notebook";
+  public static readonly NoContent: number = 204;
-}
+  public static readonly NotModified: number = 304;
-
+  public static readonly Unauthorized: number = 401;
-export class HttpHeaders {
+  public static readonly Forbidden: number = 403;
-  public static activityId: string = "x-ms-activity-id";
+  public static readonly NotFound: number = 404;
-  public static apiType: string = "x-ms-cosmos-apitype";
+  public static readonly TooManyRequests: number = 429;
-  public static authorization: string = "authorization";
+  public static readonly Conflict: number = 409;
-  public static collectionIndexTransformationProgress: string =
+
-    "x-ms-documentdb-collection-index-transformation-progress";
+  public static readonly InternalServerError: number = 500;
-  public static continuation: string = "x-ms-continuation";
+  public static readonly BadGateway: number = 502;
-  public static correlationRequestId: string = "x-ms-correlation-request-id";
+  public static readonly ServiceUnavailable: number = 503;
-  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
+  public static readonly GatewayTimeout: number = 504;
-  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
+
-  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
+  public static readonly RetryableStatusCodes: number[] = [
-  public static connectionString: string = "x-ms-connection-string";
+    HttpStatusCodes.TooManyRequests,
-  public static msDate: string = "x-ms-date";
+    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
-  public static location: string = "Location";
+    HttpStatusCodes.BadGateway,
-  public static contentType: string = "Content-Type";
+    HttpStatusCodes.ServiceUnavailable,
-  public static offerReplacePending: string = "x-ms-offer-replace-pending";
+    HttpStatusCodes.GatewayTimeout,
-  public static user: string = "x-ms-user";
+  ];
-  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
+}
-  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
+
-  public static requestCharge: string = "x-ms-request-charge";
+export class Urls {
-  public static resourceQuota: string = "x-ms-resource-quota";
+  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
-  public static resourceUsage: string = "x-ms-resource-usage";
+  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
-  public static retryAfterMs: string = "x-ms-retry-after-ms";
+  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
-  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
+  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
-  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
+}
-  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
+
-  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
+export class HashRoutePrefixes {
-  public static autoPilotThroughput = "autoscaleSettings";
+  public static databases: string = "/dbs/{db_id}";
-  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
+  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
-  public static partitionKey: string = "x-ms-documentdb-partitionkey";
+  public static sprocHash: string = "/sprocs/";
-  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
+  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
-  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
+  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
-}
+  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
-
+
-export class ApiType {
+  public static databasesWithId(databaseId: string): string {
-  // Mapped to hexadecimal values in the backend
+    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
-  public static readonly MongoDB: number = 1;
+  }
-  public static readonly Gremlin: number = 2;
+
-  public static readonly Cassandra: number = 4;
+  public static collectionsWithIds(databaseId: string, collectionId: string): string {
-  public static readonly Table: number = 8;
+    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
-  public static readonly SQL: number = 16;
+
-}
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
-
+  }
-export class HttpStatusCodes {
+
-  public static readonly OK: number = 200;
+  public static sprocWithIds(
-  public static readonly Created: number = 201;
+    databaseId: string,
-  public static readonly Accepted: number = 202;
+    collectionId: string,
-  public static readonly NoContent: number = 204;
+    sprocId: string,
-  public static readonly NotModified: number = 304;
+    stripFirstSlash: boolean = true
-  public static readonly Unauthorized: number = 401;
+  ): string {
-  public static readonly Forbidden: number = 403;
+    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
-  public static readonly NotFound: number = 404;
+
-  public static readonly TooManyRequests: number = 429;
+    const transformedSprocRoute: string = transformedDatabasePrefix
-  public static readonly Conflict: number = 409;
+      .replace("{coll_id}", collectionId)
-
+      .replace("{sproc_id}", sprocId);
-  public static readonly InternalServerError: number = 500;
+    if (!!stripFirstSlash) {
-  public static readonly BadGateway: number = 502;
+      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
-  public static readonly ServiceUnavailable: number = 503;
+    }
-  public static readonly GatewayTimeout: number = 504;
+
-
+    return transformedSprocRoute;
-  public static readonly RetryableStatusCodes: number[] = [
+  }
-    HttpStatusCodes.TooManyRequests,
+
-    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
+  public static conflictsWithIds(databaseId: string, collectionId: string) {
-    HttpStatusCodes.BadGateway,
+    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
-    HttpStatusCodes.ServiceUnavailable,
+
-    HttpStatusCodes.GatewayTimeout
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
-  ];
+  }
-}
+
-
+  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
-export class Urls {
+    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
-  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
+
-  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("{doc_id}", docId).replace("/", ""); // strip the first slash since hasher adds it
-  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
+  }
-  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
+}
-}
+
-
+export class ConfigurationOverridesValues {
-export class HashRoutePrefixes {
+  public static IsBsonSchemaV2: string = "true";
-  public static databases: string = "/dbs/{db_id}";
+}
-  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
+
-  public static sprocHash: string = "/sprocs/";
+export class KeyCodes {
-  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
+  public static Space: number = 32;
-  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
+  public static Enter: number = 13;
-  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
+  public static Escape: number = 27;
-
+  public static UpArrow: number = 38;
-  public static databasesWithId(databaseId: string): string {
+  public static DownArrow: number = 40;
-    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
+  public static LeftArrow: number = 37;
-  }
+  public static RightArrow: number = 39;
-
+  public static Tab: number = 9;
-  public static collectionsWithIds(databaseId: string, collectionId: string): string {
+}
-    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
+
-
+// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
+export class NormalizedEventKey {
-  }
+  public static readonly Space = " ";
-
+  public static readonly Enter = "Enter";
-  public static sprocWithIds(
+  public static readonly Escape = "Escape";
-    databaseId: string,
+  public static readonly UpArrow = "ArrowUp";
-    collectionId: string,
+  public static readonly DownArrow = "ArrowDown";
-    sprocId: string,
+  public static readonly LeftArrow = "ArrowLeft";
-    stripFirstSlash: boolean = true
+  public static readonly RightArrow = "ArrowRight";
-  ): string {
+}
-    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
+
-
+export class TryCosmosExperience {
-    const transformedSprocRoute: string = transformedDatabasePrefix
+  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
-      .replace("{coll_id}", collectionId)
+  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
-      .replace("{sproc_id}", sprocId);
+  public static collectionsPerAccount: number = 3;
-    if (!!stripFirstSlash) {
+  public static maxRU: number = 5000;
-      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
+  public static defaultRU: number = 3000;
-    }
+}
-
+
-    return transformedSprocRoute;
+export class OfferVersions {
-  }
+  public static V1: string = "V1";
-
+  public static V2: string = "V2";
-  public static conflictsWithIds(databaseId: string, collectionId: string) {
+}
-    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
+
-
+export enum ConflictOperationType {
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
+  Replace = "replace",
-  }
+  Create = "create",
-
+  Delete = "delete",
-  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
+}
-    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
+
-
+export const EmulatorMasterKey =
-    return transformedDatabasePrefix
+  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
-      .replace("{coll_id}", collectionId)
+  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
-      .replace("{doc_id}", docId)
+
-      .replace("/", ""); // strip the first slash since hasher adds it
+// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-  }
+export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-}
+
-
+export class Notebook {
-export class ConfigurationOverridesValues {
+  public static readonly defaultBasePath = "./notebooks";
-  public static IsBsonSchemaV2: string = "true";
+  public static readonly heartbeatDelayMs = 5000;
-}
+  public static readonly kernelRestartInitialDelayMs = 1000;
-
+  public static readonly kernelRestartMaxDelayMs = 20000;
-export class KeyCodes {
+  public static readonly autoSaveIntervalMs = 120000;
-  public static Space: number = 32;
+}
-  public static Enter: number = 13;
+
-  public static Escape: number = 27;
+export class SparkLibrary {
-  public static UpArrow: number = 38;
+  public static readonly nameMinLength = 3;
-  public static DownArrow: number = 40;
+  public static readonly nameMaxLength = 63;
-  public static LeftArrow: number = 37;
+}
-  public static RightArrow: number = 39;
+
-  public static Tab: number = 9;
+export class AnalyticalStorageTtl {
-}
+  public static readonly Days90: number = 7776000;
-
+  public static readonly Infinite: number = -1;
-// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+  public static readonly Disabled: number = 0;
-export class NormalizedEventKey {
+}
-  public static readonly Space = " ";
+
-  public static readonly Enter = "Enter";
+export class TerminalQueryParams {
-  public static readonly Escape = "Escape";
+  public static readonly Terminal = "terminal";
-  public static readonly UpArrow = "ArrowUp";
+  public static readonly Server = "server";
-  public static readonly DownArrow = "ArrowDown";
+  public static readonly Token = "token";
-  public static readonly LeftArrow = "ArrowLeft";
+  public static readonly SubscriptionId = "subscriptionId";
-  public static readonly RightArrow = "ArrowRight";
+  public static readonly TerminalEndpoint = "terminalEndpoint";
-}
+}
-
-export class TryCosmosExperience {
-  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
-  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
-  public static collectionsPerAccount: number = 3;
-  public static maxRU: number = 5000;
-  public static defaultRU: number = 3000;
-}
-
-export class OfferVersions {
-  public static V1: string = "V1";
-  public static V2: string = "V2";
-}
-
-export enum ConflictOperationType {
-  Replace = "replace",
-  Create = "create",
-  Delete = "delete"
-}
-
-export const EmulatorMasterKey =
-  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
-  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
-
-// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-
-export class Notebook {
-  public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
-  public static readonly kernelRestartInitialDelayMs = 1000;
-  public static readonly kernelRestartMaxDelayMs = 20000;
-  public static readonly autoSaveIntervalMs = 120000;
-}
-
-export class SparkLibrary {
-  public static readonly nameMinLength = 3;
-  public static readonly nameMaxLength = 63;
-}
-
-export class AnalyticalStorageTtl {
-  public static readonly Days90: number = 7776000;
-  public static readonly Infinite: number = -1;
-  public static readonly Disabled: number = 0;
-}
-
-export class TerminalQueryParams {
-  public static readonly Terminal = "terminal";
-  public static readonly Server = "server";
-  public static readonly Token = "token";
-  public static readonly SubscriptionId = "subscriptionId";
-  public static readonly TerminalEndpoint = "terminalEndpoint";
-}

src/Common/CosmosClient.test.ts

@@ -1,5 +1,5 @@
 import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
-import { configContext, Platform, updateConfigContext, resetConfigContext } from "../ConfigContext";
+import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
 import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
 
@@ -10,17 +10,17 @@ describe("tokenProvider", () => {
     resourceId: "",
     resourceType: "dbs" as ResourceType,
     headers: {},
-    getAuthorizationTokenUsingMasterKey: () => ""
+    getAuthorizationTokenUsingMasterKey: () => "",
   };
 
   beforeEach(() => {
     updateConfigContext({
-      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
     });
     window.fetch = jest.fn().mockImplementation(() => {
       return {
         json: () => "{}",
-        headers: new Map()
+        headers: new Map(),
       };
     });
   });
@@ -36,7 +36,7 @@ describe("tokenProvider", () => {
 
   it("does not call the auth service if a master key is set", async () => {
     updateUserContext({
-      masterKey: "foo"
+      masterKey: "foo",
     });
     await tokenProvider(options);
     expect((window.fetch as any).mock.calls.length).toBe(0);
@@ -50,7 +50,7 @@ describe("getTokenFromAuthService", () => {
     window.fetch = jest.fn().mockImplementation(() => {
       return {
         json: () => "{}",
-        headers: new Map()
+        headers: new Map(),
       };
     });
   });
@@ -61,7 +61,7 @@ describe("getTokenFromAuthService", () => {
 
   it("builds the correct URL in production", () => {
     updateConfigContext({
-      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
     });
     getTokenFromAuthService("GET", "dbs", "foo");
     expect(window.fetch).toHaveBeenCalledWith(
@@ -72,7 +72,7 @@ describe("getTokenFromAuthService", () => {
 
   it("builds the correct URL in dev", () => {
     updateConfigContext({
-      BACKEND_ENDPOINT: "https://localhost:1234"
+      BACKEND_ENDPOINT: "https://localhost:1234",
     });
     getTokenFromAuthService("GET", "dbs", "foo");
     expect(window.fetch).toHaveBeenCalledWith(
@@ -91,20 +91,19 @@ describe("endpoint", () => {
         location: "foo",
         type: "foo",
         kind: "foo",
-        tags: [],
         properties: {
           documentEndpoint: "bar",
           gremlinEndpoint: "foo",
           tableEndpoint: "foo",
-          cassandraEndpoint: "foo"
+          cassandraEndpoint: "foo",
-        }
+        },
-      }
+      },
     });
     expect(endpoint()).toEqual("bar");
   });
   it("uses _endpoint if set", () => {
     updateUserContext({
-      endpoint: "baz"
+      endpoint: "baz",
     });
     expect(endpoint()).toEqual("baz");
   });
@@ -121,7 +120,7 @@ describe("requestPlugin", () => {
       updateConfigContext({
         platform: Platform.Hosted,
         BACKEND_ENDPOINT: "https://localhost:1234",
-        PROXY_PATH: "/proxy"
+        PROXY_PATH: "/proxy",
       });
       const headers = {};
       const endpoint = "https://docs.azure.com";

src/Common/CosmosClient.ts

@@ -1,10 +1,10 @@
 import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { configContext, Platform } from "../ConfigContext";
-import { getErrorMessage } from "./ErrorHandlingUtils";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
-import { userContext } from "../UserContext";
+import { getErrorMessage } from "./ErrorHandlingUtils";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -32,7 +32,7 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };
 
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = configContext.PROXY_PATH;
+  requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
   return next(requestContext);
 };
@@ -43,12 +43,7 @@ export const endpoint = () => {
     const location = _global.parent ? _global.parent.location : _global.location;
     return configContext.EMULATOR_ENDPOINT || location.origin;
   }
-  return (
+  return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint;
-    userContext.endpoint ||
-    (userContext.databaseAccount &&
-      userContext.databaseAccount.properties &&
-      userContext.databaseAccount.properties.documentEndpoint)
-  );
 };
 
 export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {
@@ -58,13 +53,13 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
       method: "POST",
       headers: {
         "content-type": "application/json",
-        "x-ms-encrypted-auth-token": userContext.accessToken
+        "x-ms-encrypted-auth-token": userContext.accessToken,
       },
       body: JSON.stringify({
         verb,
         resourceType,
-        resourceId
+        resourceId,
-      })
+      }),
     });
     //TODO I am not sure why we have to parse the JSON again here. fetch should do it for us when we call .json()
     const result = JSON.parse(await response.json());
@@ -75,19 +70,23 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
   }
 }
 
+let _client: Cosmos.CosmosClient;
+
 export function client(): Cosmos.CosmosClient {
+  if (_client) return _client;
   const options: Cosmos.CosmosClientOptions = {
-    endpoint: endpoint() || " ", // CosmosClient gets upset if we pass a falsy value here
+    endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
     key: userContext.masterKey,
     tokenProvider,
     connectionPolicy: {
-      enableEndpointDiscovery: false
+      enableEndpointDiscovery: false,
     },
-    userAgentSuffix: "Azure Portal"
+    userAgentSuffix: "Azure Portal",
   };
 
   if (configContext.PROXY_PATH !== undefined) {
     (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
   }
-  return new Cosmos.CosmosClient(options);
+  _client = new Cosmos.CosmosClient(options);
+  return _client;
 }

src/Common/DocumentUtility.ts

@@ -1,8 +1,7 @@
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
 import { userContext } from "../UserContext";
 
 export const getEntityName = (): string => {
-  if (userContext.defaultExperience === DefaultAccountExperienceType.MongoDB) {
+  if (userContext.apiType === "Mongo") {
     return "document";
   }
 

src/Common/EditableUtility.ts

@@ -1,94 +1,94 @@
-import * as ko from "knockout";
+import * as ko from "knockout";
-import * as ViewModels from "../Contracts/ViewModels";
+import * as ViewModels from "../Contracts/ViewModels";
-
+
-export default class EditableUtility {
+export default class EditableUtility {
-  public static observable<T>(initialValue?: T): ViewModels.Editable<T> {
+  public static observable<T>(initialValue?: T): ViewModels.Editable<T> {
-    var observable: ViewModels.Editable<T> = <ViewModels.Editable<T>>ko.observable<T>(initialValue);
+    var observable: ViewModels.Editable<T> = <ViewModels.Editable<T>>ko.observable<T>(initialValue);
-
+
-    observable.edits = ko.observableArray<T>([initialValue]);
+    observable.edits = ko.observableArray<T>([initialValue]);
-    observable.validations = ko.observableArray<(value: T) => boolean>([]);
+    observable.validations = ko.observableArray<(value: T) => boolean>([]);
-
+
-    observable.setBaseline = (baseline: T) => {
+    observable.setBaseline = (baseline: T) => {
-      observable(baseline);
+      observable(baseline);
-      observable.edits([baseline]);
+      observable.edits([baseline]);
-    };
+    };
-
+
-    observable.getEditableCurrentValue = ko.computed<T>(() => {
+    observable.getEditableCurrentValue = ko.computed<T>(() => {
-      const edits = (observable.edits && observable.edits()) || [];
+      const edits = (observable.edits && observable.edits()) || [];
-      if (edits.length === 0) {
+      if (edits.length === 0) {
-        return undefined;
+        return undefined;
-      }
+      }
-
+
-      return edits[edits.length - 1];
+      return edits[edits.length - 1];
-    });
+    });
-
+
-    observable.getEditableOriginalValue = ko.computed<T>(() => {
+    observable.getEditableOriginalValue = ko.computed<T>(() => {
-      const edits = (observable.edits && observable.edits()) || [];
+      const edits = (observable.edits && observable.edits()) || [];
-      if (edits.length === 0) {
+      if (edits.length === 0) {
-        return undefined;
+        return undefined;
-      }
+      }
-
+
-      return edits[0];
+      return edits[0];
-    });
+    });
-
+
-    observable.editableIsDirty = ko.computed<boolean>(() => {
+    observable.editableIsDirty = ko.computed<boolean>(() => {
-      const edits = (observable.edits && observable.edits()) || [];
+      const edits = (observable.edits && observable.edits()) || [];
-      if (edits.length <= 1) {
+      if (edits.length <= 1) {
-        return false;
+        return false;
-      }
+      }
-
+
-      let current: any = observable.getEditableCurrentValue();
+      let current: any = observable.getEditableCurrentValue();
-      let original: any = observable.getEditableOriginalValue();
+      let original: any = observable.getEditableOriginalValue();
-
+
-      switch (typeof current) {
+      switch (typeof current) {
-        case "string":
+        case "string":
-        case "undefined":
+        case "undefined":
-        case "number":
+        case "number":
-        case "boolean":
+        case "boolean":
-          current = current && current.toString();
+          current = current && current.toString();
-          break;
+          break;
-
+
-        default:
+        default:
-          current = JSON.stringify(current);
+          current = JSON.stringify(current);
-          break;
+          break;
-      }
+      }
-
+
-      switch (typeof original) {
+      switch (typeof original) {
-        case "string":
+        case "string":
-        case "undefined":
+        case "undefined":
-        case "number":
+        case "number":
-        case "boolean":
+        case "boolean":
-          original = original && original.toString();
+          original = original && original.toString();
-          break;
+          break;
-
+
-        default:
+        default:
-          original = JSON.stringify(original);
+          original = JSON.stringify(original);
-          break;
+          break;
-      }
+      }
-
+
-      if (current !== original) {
+      if (current !== original) {
-        return true;
+        return true;
-      }
+      }
-
+
-      return false;
+      return false;
-    });
+    });
-
+
-    observable.subscribe(edit => {
+    observable.subscribe((edit) => {
-      var edits = observable.edits && observable.edits();
+      var edits = observable.edits && observable.edits();
-      if (!edits) {
+      if (!edits) {
-        return;
+        return;
-      }
+      }
-      edits.push(edit);
+      edits.push(edit);
-      observable.edits(edits);
+      observable.edits(edits);
-    });
+    });
-
+
-    observable.editableIsValid = ko.observable<boolean>(true);
+    observable.editableIsValid = ko.observable<boolean>(true);
-    observable.subscribe(value => {
+    observable.subscribe((value) => {
-      const validations: ((value: T) => boolean)[] = (observable.validations && observable.validations()) || [];
+      const validations: ((value: T) => boolean)[] = (observable.validations && observable.validations()) || [];
-      const isValid = validations.every(validate => validate(value));
+      const isValid = validations.every((validate) => validate(value));
-      observable.editableIsValid(isValid);
+      observable.editableIsValid(isValid);
-    });
+    });
-
+
-    return observable;
+    return observable;
-  }
+  }
-}
+}

src/Common/EntityValue.tsx

@@ -0,0 +1,66 @@
+import { DatePicker, TextField } from "@fluentui/react";
+import React, { FunctionComponent } from "react";
+
+export interface TableEntityProps {
+  entityValueLabel?: string;
+  entityValuePlaceholder: string;
+  entityValue: string | Date;
+  isEntityTypeDate: boolean;
+  isEntityValueDisable?: boolean;
+  entityTimeValue: string;
+  entityValueType: string;
+  onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onSelectDate: (date: Date | null | undefined) => void;
+  onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+}
+
+export const EntityValue: FunctionComponent<TableEntityProps> = ({
+  entityValueLabel,
+  entityValuePlaceholder,
+  entityValue,
+  isEntityTypeDate,
+  entityTimeValue,
+  entityValueType,
+  onEntityValueChange,
+  onSelectDate,
+  isEntityValueDisable,
+  onEntityTimeValueChange,
+}: TableEntityProps): JSX.Element => {
+  if (isEntityTypeDate) {
+    return (
+      <>
+        <DatePicker
+          className="addEntityDatePicker"
+          placeholder={entityValuePlaceholder}
+          value={entityValue && new Date(entityValue)}
+          ariaLabel={entityValuePlaceholder}
+          onSelectDate={onSelectDate}
+          disabled={isEntityValueDisable}
+        />
+        <TextField
+          label={entityValueLabel && entityValueLabel}
+          id="entityTimeId"
+          autoFocus
+          type="time"
+          value={entityTimeValue}
+          onChange={onEntityTimeValueChange}
+          disabled={isEntityValueDisable}
+        />
+      </>
+    );
+  }
+
+  return (
+    <TextField
+      label={entityValueLabel && entityValueLabel}
+      className="addEntityTextField"
+      id="entityValueId"
+      autoFocus
+      disabled={isEntityValueDisable}
+      type={entityValueType}
+      placeholder={entityValuePlaceholder}
+      value={typeof entityValue === "string" && entityValue}
+      onChange={onEntityValueChange}
+    />
+  );
+};

src/Common/EnvironmentUtility.ts

@@ -1,6 +1,6 @@
-export function normalizeArmEndpoint(uri: string): string {
+export function normalizeArmEndpoint(uri: string): string {
-  if (uri && uri.slice(-1) !== "/") {
+  if (uri && uri.slice(-1) !== "/") {
-    return `${uri}/`;
+    return `${uri}/`;
-  }
+  }
-  return uri;
+  return uri;
-}
+}

src/Common/ErrorHandlingUtils.ts

@@ -1,8 +1,9 @@
-import { ARMError } from "../Utils/arm/request";
-import { HttpStatusCodes } from "./Constants";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
+import { userContext } from "../UserContext";
+import { ARMError } from "../Utils/arm/request";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { HttpStatusCodes } from "./Constants";
 import { logError } from "./Logger";
 import { sendMessage } from "./MessageHandler";
 
@@ -21,7 +22,7 @@ export const handleError = (error: string | ARMError | Error, area: string, cons
   sendNotificationForError(errorMessage, errorCode);
 };
 
-export const getErrorMessage = (error: string | Error): string => {
+export const getErrorMessage = (error: string | Error = ""): string => {
   const errorMessage = typeof error === "string" ? error : error.message;
   return replaceKnownError(errorMessage);
 };
@@ -37,18 +38,18 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri
     }
     sendMessage({
       type: MessageTypes.ForbiddenError,
-      reason: errorMessage
+      reason: errorMessage,
     });
   }
 };
 
 const replaceKnownError = (errorMessage: string): string => {
   if (
-    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
+    userContext.subscriptionType === SubscriptionType.Internal &&
-    errorMessage.indexOf("SharedOffer is Disabled for your account") >= 0
+    errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
   ) {
     return "Database throughput is not supported for internal subscriptions.";
-  } else if (errorMessage.indexOf("Partition key paths must contain only valid") >= 0) {
+  } else if (errorMessage?.indexOf("Partition key paths must contain only valid") >= 0) {
     return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
   }
 

src/Common/HashMap.test.ts

@@ -1,70 +0,0 @@
-import { HashMap } from "./HashMap";
-
-describe("HashMap", () => {
-  it("should test if key/val exists", () => {
-    const map = new HashMap<number>();
-    map.set("a", 123);
-
-    expect(map.has("a")).toBe(true);
-    expect(map.has("b")).toBe(false);
-  });
-
-  it("should get object back", () => {
-    const map = new HashMap<string>();
-    map.set("a", "123");
-    map.set("a", "456");
-
-    expect(map.get("a")).toBe("456");
-    expect(map.get("a")).not.toBe("123");
-  });
-
-  it("should return the right size", () => {
-    const map = new HashMap<string>();
-    map.set("a", "123");
-    map.set("b", "456");
-
-    expect(map.size()).toBe(2);
-  });
-
-  it("should be iterable", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.set("b", 10);
-    map.set("c", 100);
-    map.set("d", 1000);
-
-    let i = 0;
-    map.forEach((key: string, value: number) => {
-      i += value;
-    });
-    expect(i).toBe(1111);
-  });
-
-  it("should be deleted", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.set("b", 10);
-
-    expect(map.delete("a")).toBe(true);
-    expect(map.delete("c")).toBe(false);
-    expect(map.has("a")).toBe(false);
-    expect(map.has("b")).toBe(true);
-  });
-
-  it("should clear", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.clear();
-    expect(map.size()).toBe(0);
-    expect(map.has("a")).toBe(false);
-  });
-
-  it("should return all keys", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.set("b", 1);
-    expect(map.keys()).toEqual(["a", "b"]);
-    map.clear();
-    expect(map.keys().length).toBe(0);
-  });
-});

src/Common/HashMap.ts

@@ -1,45 +0,0 @@
-/**
- * Simple hashmap implementation that doesn't rely on ES6 Map nor polyfills
- */
-export class HashMap<T> {
-  constructor(private container: { [key: string]: T } = {}) {}
-
-  public has(key: string): boolean {
-    return this.container.hasOwnProperty(key);
-  }
-
-  public set(key: string, value: T): void {
-    this.container[key] = value;
-  }
-
-  public get(key: string): T {
-    return this.container[key];
-  }
-
-  public size(): number {
-    return Object.keys(this.container).length;
-  }
-
-  public delete(key: string): boolean {
-    if (this.has(key)) {
-      delete this.container[key];
-      return true;
-    }
-
-    return false;
-  }
-
-  public clear(): void {
-    this.container = {};
-  }
-
-  public keys(): string[] {
-    return Object.keys(this.container);
-  }
-
-  public forEach(iteratorFct: (key: string, value: T) => void) {
-    for (const k in this.container) {
-      iteratorFct(k, this.container[k]);
-    }
-  }
-}

src/Common/HeadersUtility.test.ts

@@ -1,25 +1,25 @@
-import * as HeadersUtility from "./HeadersUtility";
+import * as HeadersUtility from "./HeadersUtility";
-import { ExplorerSettings } from "../Shared/ExplorerSettings";
+import { ExplorerSettings } from "../Shared/ExplorerSettings";
-import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-
+
-describe("Headers Utility", () => {
+describe("Headers Utility", () => {
-  describe("shouldEnableCrossPartitionKeyForResourceWithPartitionKey()", () => {
+  describe("shouldEnableCrossPartitionKeyForResourceWithPartitionKey()", () => {
-    beforeEach(() => {
+    beforeEach(() => {
-      ExplorerSettings.createDefaultSettings();
+      ExplorerSettings.createDefaultSettings();
-    });
+    });
-
+
-    it("should return true by default", () => {
+    it("should return true by default", () => {
-      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(true);
+      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(true);
-    });
+    });
-
+
-    it("should return false if the enable cross partition key feed option is false", () => {
+    it("should return false if the enable cross partition key feed option is false", () => {
-      LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "false");
+      LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "false");
-      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(false);
+      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(false);
-    });
+    });
-
+
-    it("should return true if the enable cross partition key feed option is true", () => {
+    it("should return true if the enable cross partition key feed option is true", () => {
-      LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "true");
+      LocalStorageUtility.setEntryString(StorageKey.IsCrossPartitionQueryEnabled, "true");
-      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(true);
+      expect(HeadersUtility.shouldEnableCrossPartitionKey()).toBe(true);
-    });
+    });
-  });
+  });
-});
+});

src/Common/HeadersUtility.ts

@@ -1,28 +1,5 @@
-import * as Constants from "./Constants";
+import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
-
+
-import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+export function shouldEnableCrossPartitionKey(): boolean {
-
+  return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
-// x-ms-resource-quota: databases = 100; collections = 5000; users = 500000; permissions = 2000000;
+}
-export function getQuota(responseHeaders: any): any {
-  return responseHeaders && responseHeaders[Constants.HttpHeaders.resourceQuota]
-    ? parseStringIntoObject(responseHeaders[Constants.HttpHeaders.resourceQuota])
-    : null;
-}
-
-export function shouldEnableCrossPartitionKey(): boolean {
-  return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
-}
-
-function parseStringIntoObject(resourceString: string) {
-  var entityObject: any = {};
-
-  if (resourceString) {
-    var entitiesArray: string[] = resourceString.split(";");
-    for (var i: any = 0; i < entitiesArray.length; i++) {
-      var entity: string[] = entitiesArray[i].split("=");
-      entityObject[entity[0]] = entity[1];
-    }
-  }
-
-  return entityObject;
-}

src/Common/IteratorUtilities.test.ts

@@ -11,8 +11,8 @@ describe("nextPage", () => {
           queryMetrics: {},
           requestCharge: 1,
           headers: {},
-          activityId: "foo"
+          activityId: "foo",
-        })
+        }),
     };
 
     expect(await nextPage(fakeIterator, 10)).toMatchSnapshot();

src/Common/IteratorUtilities.ts

@@ -1,6 +1,8 @@
 import { QueryResults } from "../Contracts/ViewModels";
 
 interface QueryResponse {
+  // [Todo] remove any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   resources: any[];
   hasMoreResults: boolean;
   activityId: string;
@@ -14,8 +16,9 @@ export interface MinimalQueryIterator {
 // Pick<QueryIterator<any>, "fetchNext">;
 
 export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
-  return documentsIterator.fetchNext().then(response => {
+  return documentsIterator.fetchNext().then((response) => {
     const documents = response.resources;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const headers = (response as any).headers || {}; // TODO this is a private key. Remove any
     const itemCount = (documents && documents.length) || 0;
     return {
@@ -26,7 +29,7 @@ export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex
       lastItemIndex: Number(firstItemIndex) + Number(itemCount),
       headers,
       activityId: response.activityId,
-      requestCharge: response.requestCharge
+      requestCharge: response.requestCharge,
     };
   });
 }

src/Common/Logger.test.ts

@@ -1,26 +1,26 @@
-jest.mock("./MessageHandler");
+jest.mock("./MessageHandler");
-import { LogEntryLevel } from "../Contracts/Diagnostics";
+import { LogEntryLevel } from "../Contracts/Diagnostics";
-import * as Logger from "./Logger";
+import * as Logger from "./Logger";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { sendMessage } from "./MessageHandler";
+import { sendMessage } from "./MessageHandler";
-
+
-describe("Logger", () => {
+describe("Logger", () => {
-  beforeEach(() => {
+  beforeEach(() => {
-    jest.resetAllMocks();
+    jest.resetAllMocks();
-  });
+  });
-
+
-  it("should log info messages", () => {
+  it("should log info messages", () => {
-    Logger.logInfo("Test info", "DocDB");
+    Logger.logInfo("Test info", "DocDB");
-    expect(sendMessage).toBeCalled();
+    expect(sendMessage).toBeCalled();
-  });
+  });
-
+
-  it("should log error messages", () => {
+  it("should log error messages", () => {
-    Logger.logError("Test error", "DocDB");
+    Logger.logError("Test error", "DocDB");
-    expect(sendMessage).toBeCalled();
+    expect(sendMessage).toBeCalled();
-  });
+  });
-
+
-  it("should log warnings", () => {
+  it("should log warnings", () => {
-    Logger.logWarning("Test warning", "DocDB");
+    Logger.logWarning("Test warning", "DocDB");
-    expect(sendMessage).toBeCalled();
+    expect(sendMessage).toBeCalled();
-  });
+  });
-});
+});

src/Common/Logger.ts

@@ -1,7 +1,7 @@
-import { sendMessage } from "./MessageHandler";
-import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
-import { appInsights } from "../Shared/appInsights";
 import { SeverityLevel } from "@microsoft/applicationinsights-web";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { trackTrace } from "../Shared/appInsights";
+import { sendMessage } from "./MessageHandler";
 
 // TODO: Move to a separate Diagnostics folder
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -29,7 +29,7 @@ export function logError(errorMessage: string, area: string, code?: number | str
 function _logEntry(entry: Diagnostics.LogEntry): void {
   sendMessage({
     type: MessageTypes.LogInfo,
-    data: JSON.stringify(entry)
+    data: JSON.stringify(entry),
   });
 
   const severityLevel = ((level: Diagnostics.LogEntryLevel): SeverityLevel => {
@@ -46,7 +46,7 @@ function _logEntry(entry: Diagnostics.LogEntry): void {
         return SeverityLevel.Information;
     }
   })(entry.level);
-  appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
 }
 
 function _generateLogEntry(
@@ -60,6 +60,6 @@ function _generateLogEntry(
     level,
     message,
     area,
-    code
+    code,
   };
 }

src/Common/MessageHandler.test.ts

@@ -1,28 +1,28 @@
-import Q from "q";
+import Q from "q";
-import * as MessageHandler from "./MessageHandler";
+import * as MessageHandler from "./MessageHandler";
-
+
-describe("Message Handler", () => {
+describe("Message Handler", () => {
-  it("should handle cached message", async () => {
+  it("should handle cached message", async () => {
-    let mockPromise = {
+    let mockPromise = {
-      id: "123",
+      id: "123",
-      startTime: new Date(),
+      startTime: new Date(),
-      deferred: Q.defer<any>()
+      deferred: Q.defer<any>(),
-    };
+    };
-    let mockMessage = { message: { id: "123", data: "{}" } };
+    let mockMessage = { message: { id: "123", data: "{}" } };
-    MessageHandler.RequestMap[mockPromise.id] = mockPromise;
+    MessageHandler.RequestMap[mockPromise.id] = mockPromise;
-    MessageHandler.handleCachedDataMessage(mockMessage);
+    MessageHandler.handleCachedDataMessage(mockMessage);
-    expect(mockPromise.deferred.promise.isFulfilled()).toBe(true);
+    expect(mockPromise.deferred.promise.isFulfilled()).toBe(true);
-  });
+  });
-
+
-  it("should delete fulfilled promises on running the garbage collector", async () => {
+  it("should delete fulfilled promises on running the garbage collector", async () => {
-    let message = {
+    let message = {
-      id: "123",
+      id: "123",
-      startTime: new Date(),
+      startTime: new Date(),
-      deferred: Q.defer<any>()
+      deferred: Q.defer<any>(),
-    };
+    };
-
+
-    MessageHandler.handleCachedDataMessage(message);
+    MessageHandler.handleCachedDataMessage(message);
-    MessageHandler.runGarbageCollector();
+    MessageHandler.runGarbageCollector();
-    expect(MessageHandler.RequestMap["123"]).toBeUndefined();
+    expect(MessageHandler.RequestMap["123"]).toBeUndefined();
-  });
+  });
-});
+});

src/Common/MessageHandler.ts

@@ -1,8 +1,8 @@
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import Q from "q";
 import * as _ from "underscore";
-import * as Constants from "./Constants";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
+import * as Constants from "./Constants";
 
 export interface CachedDataPromise<T> {
   deferred: Q.Deferred<T>;
@@ -35,7 +35,7 @@ export function sendCachedDataMessage<TResponseDataModel>(
   let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
     deferred: Q.defer<TResponseDataModel>(),
     startTime: new Date(),
-    id: _.uniqueId()
+    id: _.uniqueId(),
   };
   RequestMap[cachedDataPromise.id] = cachedDataPromise;
   sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
@@ -48,17 +48,18 @@ export function sendCachedDataMessage<TResponseDataModel>(
 }
 
 export function sendMessage(data: any): void {
-  if (canSendMessage()) {
+  _sendMessage({
-    // We try to find data explorer window first, then fallback to current window
+    signature: "pcIframe",
-    const portalChildWindow = getDataExplorerWindow(window) || window;
+    data: data,
-    portalChildWindow.parent.postMessage(
+  });
-      {
+}
-        signature: "pcIframe",
+
-        data: data
+export function sendReadyMessage(): void {
-      },
+  _sendMessage({
-      portalChildWindow.document.referrer
+    signature: "pcIframe",
-    );
+    kind: "ready",
-  }
+    data: "ready",
+  });
 }
 
 export function canSendMessage(): boolean {
@@ -74,3 +75,17 @@ export function runGarbageCollector() {
     }
   });
 }
+
+const _sendMessage = (message: any): void => {
+  if (canSendMessage()) {
+    // Portal window can receive messages from only child windows
+    const portalChildWindow = getDataExplorerWindow(window) || window;
+    if (portalChildWindow === window) {
+      // Current window is a child of portal, send message to portal window
+      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
+    } else {
+      // Current window is not a child of portal, send message to the child window instead (which is data explorer)
+      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
+    }
+  }
+};

src/Common/MongoProxyClient.test.ts

@@ -14,7 +14,7 @@ const fetchMock = () => {
     ok: true,
     text: () => "{}",
     json: () => "{}",
-    headers: new Map()
+    headers: new Map(),
   });
 };
 
@@ -27,8 +27,8 @@ const collection = {
   partitionKey: {
     paths: ["/pk"],
     kind: "Hash",
-    version: 1
+    version: 1,
-  }
+  },
 } as Collection;
 
 const documentId = ({
@@ -38,8 +38,8 @@ const documentId = ({
   partitionKey: {
     paths: ["/pk"],
     kind: "Hash",
-    version: 1
+    version: 1,
-  }
+  },
 } as unknown) as DocumentId;
 
 const databaseAccount = {
@@ -52,8 +52,8 @@ const databaseAccount = {
     documentEndpoint: "bar",
     gremlinEndpoint: "foo",
     tableEndpoint: "foo",
-    cassandraEndpoint: "foo"
+    cassandraEndpoint: "foo",
-  }
+  },
 } as DatabaseAccount;
 
 describe("MongoProxyClient", () => {
@@ -61,10 +61,10 @@ describe("MongoProxyClient", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
-        databaseAccount
+        databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -93,10 +93,10 @@ describe("MongoProxyClient", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
-        databaseAccount
+        databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -125,10 +125,10 @@ describe("MongoProxyClient", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
-        databaseAccount
+        databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -157,10 +157,10 @@ describe("MongoProxyClient", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
-        databaseAccount
+        databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -189,10 +189,10 @@ describe("MongoProxyClient", () => {
     beforeEach(() => {
       resetConfigContext();
       updateUserContext({
-        databaseAccount
+        databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
       window.fetch = jest.fn().mockImplementation(fetchMock);
     });
@@ -220,12 +220,11 @@ describe("MongoProxyClient", () => {
   describe("getEndpoint", () => {
     beforeEach(() => {
       resetConfigContext();
-      delete window.authType;
       updateUserContext({
-        databaseAccount
+        databaseAccount,
       });
       updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
       });
     });
 
@@ -241,7 +240,9 @@ describe("MongoProxyClient", () => {
     });
 
     it("returns a guest endpoint", () => {
-      window.authType = AuthType.EncryptedToken;
+      updateUserContext({
+        authType: AuthType.EncryptedToken,
+      });
       const endpoint = getEndpoint();
       expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
     });

src/Common/MongoProxyClient.ts

@@ -5,22 +5,21 @@ import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { userContext } from "../UserContext";
+import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";
 
 const defaultHeaders = {
   [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
   [CosmosSDKConstants.HttpHeaders.MaxEntityCount]: "100",
-  [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15"
+  [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15",
 };
 
 function authHeaders() {
-  if (window.authType === AuthType.EncryptedToken) {
+  if (userContext.authType === AuthType.EncryptedToken) {
     return { [HttpHeaders.guestAccessToken]: userContext.accessToken };
   } else {
     return { [HttpHeaders.authorization]: userContext.authorizationToken };
@@ -31,7 +30,7 @@ export function queryIterator(databaseId: string, collection: Collection, query:
   let continuationToken: string;
   return {
     fetchNext: () => {
-      return queryDocuments(databaseId, collection, false, query).then(response => {
+      return queryDocuments(databaseId, collection, false, query).then((response) => {
         continuationToken = response.continuationToken;
         const headers: { [key: string]: string | number } = {};
         response.headers.forEach((value, key) => {
@@ -42,10 +41,10 @@ export function queryIterator(databaseId: string, collection: Collection, query:
           headers,
           requestCharge: Number(headers[CosmosSDKConstants.HttpHeaders.RequestCharge]),
           activityId: String(headers[CosmosSDKConstants.HttpHeaders.ActivityId]),
-          hasMoreResults: !!continuationToken
+          hasMoreResults: !!continuationToken,
         };
       });
-    }
+    },
   };
 }
 
@@ -62,7 +61,7 @@ export function queryDocuments(
   query: string,
   continuationToken?: string
 ): Promise<QueryResponse> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
     db: databaseId,
@@ -74,7 +73,9 @@ export function queryDocuments(
     rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
-      collection && collection.partitionKey && !collection.partitionKey.systemKey ? collection.partitionKeyProperty : ""
+      collection && collection.partitionKey && !collection.partitionKey.systemKey
+        ? collection.partitionKeyProperty
+        : "",
   };
 
   const endpoint = getEndpoint() || "";
@@ -87,7 +88,7 @@ export function queryDocuments(
     [CosmosSDKConstants.HttpHeaders.EnableScanInQuery]: "true",
     [CosmosSDKConstants.HttpHeaders.EnableCrossPartitionQuery]: "true",
     [CosmosSDKConstants.HttpHeaders.ParallelizeCrossPartitionQuery]: "true",
-    [HttpHeaders.contentType]: "application/query+json"
+    [HttpHeaders.contentType]: "application/query+json",
   };
 
   if (continuationToken) {
@@ -100,14 +101,14 @@ export function queryDocuments(
     .fetch(`${endpoint}${path}?${queryString.stringify(params)}`, {
       method: "POST",
       body: JSON.stringify({ query }),
-      headers
+      headers,
     })
-    .then(async response => {
+    .then(async (response) => {
       if (response.ok) {
         return {
           continuationToken: response.headers.get(CosmosSDKConstants.HttpHeaders.Continuation),
           documents: (await response.json()).Documents as DataModels.DocumentId[],
-          headers: response.headers
+          headers: response.headers,
         };
       }
       errorHandling(response, "querying documents", params);
@@ -120,7 +121,7 @@ export function readDocument(
   collection: Collection,
   documentId: DocumentId
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
   const path = idComponents.slice(0, 4).join("/");
@@ -135,7 +136,9 @@ export function readDocument(
     rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperty
+        : "",
   };
 
   const endpoint = getEndpoint();
@@ -147,10 +150,10 @@ export function readDocument(
         ...authHeaders(),
         [CosmosSDKConstants.HttpHeaders.PartitionKey]: encodeURIComponent(
           JSON.stringify(documentId.partitionKeyHeader())
-        )
+        ),
-      }
+      },
     })
-    .then(response => {
+    .then((response) => {
       if (response.ok) {
         return response.json();
       }
@@ -164,7 +167,7 @@ export function createDocument(
   partitionKeyProperty: string,
   documentContent: unknown
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const params = {
     db: databaseId,
@@ -175,7 +178,7 @@ export function createDocument(
     sid: userContext.subscriptionId,
     rg: userContext.resourceGroup,
     dba: databaseAccount.name,
-    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : ""
+    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
   };
 
   const endpoint = getEndpoint();
@@ -186,10 +189,10 @@ export function createDocument(
       body: JSON.stringify(documentContent),
       headers: {
         ...defaultHeaders,
-        ...authHeaders()
+        ...authHeaders(),
-      }
+      },
     })
-    .then(response => {
+    .then((response) => {
       if (response.ok) {
         return response.json();
       }
@@ -203,7 +206,7 @@ export function updateDocument(
   documentId: DocumentId,
   documentContent: string
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
   const path = idComponents.slice(0, 5).join("/");
@@ -218,7 +221,9 @@ export function updateDocument(
     rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperty
+        : "",
   };
   const endpoint = getEndpoint();
 
@@ -230,10 +235,10 @@ export function updateDocument(
         ...defaultHeaders,
         ...authHeaders(),
         [HttpHeaders.contentType]: "application/json",
-        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader())
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
-      }
+      },
     })
-    .then(response => {
+    .then((response) => {
       if (response.ok) {
         return response.json();
       }
@@ -242,7 +247,7 @@ export function updateDocument(
 }
 
 export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
   const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
   const idComponents = documentId.self.split("/");
   const path = idComponents.slice(0, 5).join("/");
@@ -257,7 +262,9 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
     rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperty
+        : "",
   };
   const endpoint = getEndpoint();
 
@@ -268,10 +275,10 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         ...defaultHeaders,
         ...authHeaders(),
         [HttpHeaders.contentType]: "application/json",
-        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader())
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
-      }
+      },
     })
-    .then(response => {
+    .then((response) => {
       if (response.ok) {
         return undefined;
       }
@@ -282,7 +289,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
 export function createMongoCollectionWithProxy(
   params: DataModels.CreateCollectionParams
 ): Promise<DataModels.Collection> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
   const shardKey: string = params.partitionKey?.paths[0];
   const mongoParams: DataModels.MongoParameters = {
     resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
@@ -299,7 +306,7 @@ export function createMongoCollectionWithProxy(
     rg: userContext.resourceGroup,
     dba: databaseAccount.name,
     isAutoPilot: !!params.autoPilotMaxThroughput,
-    autoPilotThroughput: params.autoPilotMaxThroughput?.toString()
+    autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
   };
 
   const endpoint = getEndpoint();
@@ -314,11 +321,11 @@ export function createMongoCollectionWithProxy(
         headers: {
           ...defaultHeaders,
           ...authHeaders(),
-          [HttpHeaders.contentType]: "application/json"
+          [HttpHeaders.contentType]: "application/json",
-        }
+        },
       }
     )
-    .then(response => {
+    .then((response) => {
       if (response.ok) {
         return response.json();
       }
@@ -329,7 +336,7 @@ export function createMongoCollectionWithProxy(
 export function getEndpoint(): string {
   let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
 
-  if (window.authType === AuthType.EncryptedToken) {
+  if (userContext.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");
   }
   return url;
@@ -340,10 +347,7 @@ export function getEndpoint(): string {
 async function errorHandling(response: Response, action: string, params: unknown): Promise<void> {
   const errorMessage = await response.text();
   // Log the error where the user can see it
-  NotificationConsoleUtils.logConsoleMessage(
+  logConsoleError(`Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`);
-    ConsoleDataType.Error,
-    `Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`
-  );
   if (response.status === HttpStatusCodes.Forbidden) {
     sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
     return;

src/Common/MongoUtility.ts

@@ -1,168 +1,168 @@
-/*    Copyright 2013 10gen Inc.
+/*    Copyright 2013 10gen Inc.
- *
+ *
- *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
+ *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
+ *    You may obtain a copy of the License at
- *
+ *
- *    http://www.apache.org/licenses/LICENSE-2.0
+ *    http://www.apache.org/licenses/LICENSE-2.0
- *
+ *
- *    Unless required by applicable law or agreed to in writing, software
+ *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
+ *    See the License for the specific language governing permissions and
- *    limitations under the License.
+ *    limitations under the License.
- */
+ */
-
+
-export default class MongoUtility {
+export default class MongoUtility {
-  public static tojson = function(x: any, indent: string, nolint: boolean) {
+  public static tojson = function (x: any, indent: string, nolint: boolean) {
-    if (x === null || x === undefined) {
+    if (x === null || x === undefined) {
-      return String(x);
+      return String(x);
-    }
+    }
-    indent = indent || "";
+    indent = indent || "";
-
+
-    switch (typeof x) {
+    switch (typeof x) {
-      case "string":
+      case "string":
-        var out = new Array(x.length + 1);
+        var out = new Array(x.length + 1);
-        out[0] = '"';
+        out[0] = '"';
-        for (var i = 0; i < x.length; i++) {
+        for (var i = 0; i < x.length; i++) {
-          if (x[i] === '"') {
+          if (x[i] === '"') {
-            out[out.length] = '\\"';
+            out[out.length] = '\\"';
-          } else if (x[i] === "\\") {
+          } else if (x[i] === "\\") {
-            out[out.length] = "\\\\";
+            out[out.length] = "\\\\";
-          } else if (x[i] === "\b") {
+          } else if (x[i] === "\b") {
-            out[out.length] = "\\b";
+            out[out.length] = "\\b";
-          } else if (x[i] === "\f") {
+          } else if (x[i] === "\f") {
-            out[out.length] = "\\f";
+            out[out.length] = "\\f";
-          } else if (x[i] === "\n") {
+          } else if (x[i] === "\n") {
-            out[out.length] = "\\n";
+            out[out.length] = "\\n";
-          } else if (x[i] === "\r") {
+          } else if (x[i] === "\r") {
-            out[out.length] = "\\r";
+            out[out.length] = "\\r";
-          } else if (x[i] === "\t") {
+          } else if (x[i] === "\t") {
-            out[out.length] = "\\t";
+            out[out.length] = "\\t";
-          } else {
+          } else {
-            var code = x.charCodeAt(i);
+            var code = x.charCodeAt(i);
-            if (code < 0x20) {
+            if (code < 0x20) {
-              out[out.length] = (code < 0x10 ? "\\u000" : "\\u00") + code.toString(16);
+              out[out.length] = (code < 0x10 ? "\\u000" : "\\u00") + code.toString(16);
-            } else {
+            } else {
-              out[out.length] = x[i];
+              out[out.length] = x[i];
-            }
+            }
-          }
+          }
-        }
+        }
-        return out.join("") + '"';
+        return out.join("") + '"';
-      case "number":
+      case "number":
-      /* falls through */
+      /* falls through */
-      case "boolean":
+      case "boolean":
-        return "" + x;
+        return "" + x;
-      case "object":
+      case "object":
-        var func = $.isArray(x) ? MongoUtility.tojsonArray : MongoUtility.tojsonObject;
+        var func = $.isArray(x) ? MongoUtility.tojsonArray : MongoUtility.tojsonObject;
-        var s = func(x, indent, nolint);
+        var s = func(x, indent, nolint);
-        if (
+        if (
-          (nolint === null || nolint === undefined || nolint === true) &&
+          (nolint === null || nolint === undefined || nolint === true) &&
-          s.length < 80 &&
+          s.length < 80 &&
-          (indent === null || indent.length === 0)
+          (indent === null || indent.length === 0)
-        ) {
+        ) {
-          s = s.replace(/[\t\r\n]+/gm, " ");
+          s = s.replace(/[\t\r\n]+/gm, " ");
-        }
+        }
-        return s;
+        return s;
-      case "function":
+      case "function":
-        return x.toString();
+        return x.toString();
-      default:
+      default:
-        throw new Error("tojson can't handle type " + typeof x);
+        throw new Error("tojson can't handle type " + typeof x);
-    }
+    }
-  };
+  };
-
+
-  private static tojsonObject = function(x: any, indent: string, nolint: boolean) {
+  private static tojsonObject = function (x: any, indent: string, nolint: boolean) {
-    var lineEnding = nolint ? " " : "\n";
+    var lineEnding = nolint ? " " : "\n";
-    var tabSpace = nolint ? "" : "\t";
+    var tabSpace = nolint ? "" : "\t";
-    indent = indent || "";
+    indent = indent || "";
-
+
-    if (typeof x.tojson === "function" && x.tojson !== MongoUtility.tojson) {
+    if (typeof x.tojson === "function" && x.tojson !== MongoUtility.tojson) {
-      return x.tojson(indent, nolint);
+      return x.tojson(indent, nolint);
-    }
+    }
-
+
-    if (x.constructor && typeof x.constructor.tojson === "function" && x.constructor.tojson !== MongoUtility.tojson) {
+    if (x.constructor && typeof x.constructor.tojson === "function" && x.constructor.tojson !== MongoUtility.tojson) {
-      return x.constructor.tojson(x, indent, nolint);
+      return x.constructor.tojson(x, indent, nolint);
-    }
+    }
-
+
-    if (MongoUtility.hasDefinedProperty(x, "toString") && !$.isArray(x)) {
+    if (MongoUtility.hasDefinedProperty(x, "toString") && !$.isArray(x)) {
-      return x.toString();
+      return x.toString();
-    }
+    }
-
+
-    if (x instanceof Error) {
+    if (x instanceof Error) {
-      return x.toString();
+      return x.toString();
-    }
+    }
-
+
-    if (MongoUtility.isObjectId(x)) {
+    if (MongoUtility.isObjectId(x)) {
-      return 'ObjectId("' + x.$oid + '")';
+      return 'ObjectId("' + x.$oid + '")';
-    }
+    }
-
+
-    // push one level of indent
+    // push one level of indent
-    indent += tabSpace;
+    indent += tabSpace;
-    var s = "{";
+    var s = "{";
-
+
-    var pairs = [];
+    var pairs = [];
-    for (var k in x) {
+    for (var k in x) {
-      if (x.hasOwnProperty(k)) {
+      if (x.hasOwnProperty(k)) {
-        var val = x[k];
+        var val = x[k];
-        var pair = '"' + k + '" : ' + MongoUtility.tojson(val, indent, nolint);
+        var pair = '"' + k + '" : ' + MongoUtility.tojson(val, indent, nolint);
-
+
-        if (k === "_id") {
+        if (k === "_id") {
-          pairs.unshift(pair);
+          pairs.unshift(pair);
-        } else {
+        } else {
-          pairs.push(pair);
+          pairs.push(pair);
-        }
+        }
-      }
+      }
-    }
+    }
-    // Add proper line endings, indents, and commas to each line
+    // Add proper line endings, indents, and commas to each line
-    s += $.map(pairs, function(pair) {
+    s += $.map(pairs, function (pair) {
-      return lineEnding + indent + pair;
+      return lineEnding + indent + pair;
-    }).join(",");
+    }).join(",");
-    s += lineEnding;
+    s += lineEnding;
-
+
-    // pop one level of indent
+    // pop one level of indent
-    indent = indent.substring(1);
+    indent = indent.substring(1);
-    return s + indent + "}";
+    return s + indent + "}";
-  };
+  };
-
+
-  private static tojsonArray = function(a: any, indent: string, nolint: boolean) {
+  private static tojsonArray = function (a: any, indent: string, nolint: boolean) {
-    if (a.length === 0) {
+    if (a.length === 0) {
-      return "[ ]";
+      return "[ ]";
-    }
+    }
-
+
-    var lineEnding = nolint ? " " : "\n";
+    var lineEnding = nolint ? " " : "\n";
-    if (!indent || nolint) {
+    if (!indent || nolint) {
-      indent = "";
+      indent = "";
-    }
+    }
-
+
-    var s = "[" + lineEnding;
+    var s = "[" + lineEnding;
-    indent += "\t";
+    indent += "\t";
-    for (var i = 0; i < a.length; i++) {
+    for (var i = 0; i < a.length; i++) {
-      s += indent + MongoUtility.tojson(a[i], indent, nolint);
+      s += indent + MongoUtility.tojson(a[i], indent, nolint);
-      if (i < a.length - 1) {
+      if (i < a.length - 1) {
-        s += "," + lineEnding;
+        s += "," + lineEnding;
-      }
+      }
-    }
+    }
-    if (a.length === 0) {
+    if (a.length === 0) {
-      s += indent;
+      s += indent;
-    }
+    }
-
+
-    indent = indent.substring(1);
+    indent = indent.substring(1);
-    s += lineEnding + indent + "]";
+    s += lineEnding + indent + "]";
-    return s;
+    return s;
-  };
+  };
-
+
-  private static hasDefinedProperty = function(obj: any, prop: string): boolean {
+  private static hasDefinedProperty = function (obj: any, prop: string): boolean {
-    if (Object.getPrototypeOf === undefined || Object.getPrototypeOf(obj) === null) {
+    if (Object.getPrototypeOf === undefined || Object.getPrototypeOf(obj) === null) {
-      return false;
+      return false;
-    } else if (obj.hasOwnProperty(prop)) {
+    } else if (obj.hasOwnProperty(prop)) {
-      return true;
+      return true;
-    } else {
+    } else {
-      return MongoUtility.hasDefinedProperty(Object.getPrototypeOf(obj), prop);
+      return MongoUtility.hasDefinedProperty(Object.getPrototypeOf(obj), prop);
-    }
+    }
-  };
+  };
-
+
-  private static isObjectId(obj: any): boolean {
+  private static isObjectId(obj: any): boolean {
-    var keys = Object.keys(obj);
+    var keys = Object.keys(obj);
-    return keys.length === 1 && keys[0] === "$oid" && typeof obj.$oid === "string" && /^[0-9a-f]{24}$/.test(obj.$oid);
+    return keys.length === 1 && keys[0] === "$oid" && typeof obj.$oid === "string" && /^[0-9a-f]{24}$/.test(obj.$oid);
-  }
+  }
-}
+}

src/Common/ObjectCache.test.ts

@@ -7,7 +7,7 @@ describe("Object cache", () => {
     cache.set("b", 2);
     cache.set("c", 3);
     cache.set("d", 4);
-    expect(cache.size()).toBe(2);
+    expect(cache.size).toBe(2);
   });
 
   it("should remove first added element to keep size at limit", () => {

src/Common/ObjectCache.ts

@@ -1,56 +1,27 @@
-import { HashMap } from "./HashMap";
+export class ObjectCache<T> extends Map<string, T> {
-
+  constructor(private limit: number) {
-export class ObjectCache<T> extends HashMap<T> {
-  private keyQueue: string[]; // Last touched key FIFO to purge cache if too big.
-  private maxNbElements: number;
-
-  public constructor(maxNbElements: number) {
     super();
-    this.keyQueue = [];
-    this.maxNbElements = maxNbElements;
-    this.clear();
   }
 
-  public clear(): void {
+  public get(key: string): T | undefined {
-    super.clear();
+    return this.touch(key);
-    this.keyQueue = [];
   }
 
-  public get(key: string): T {
+  public set(key: string, value: T): this {
-    this.markKeyAsTouched(key);
+    if (this.size === this.limit) {
-    return super.get(key);
+      this.delete(this.keys().next().value);
-  }
-
-  public set(key: string, value: T): void {
-    super.set(key, value);
-
-    this.markKeyAsTouched(key);
-
-    if (super.size() > this.maxNbElements && key !== this.keyQueue[0]) {
-      this.reduceCacheSize();
     }
+
+    return this.touch(key, value), this;
   }
 
-  /**
+  private touch(key: string, value = super.get(key)) {
-   * Invalidate elements to keep the total number below the limit
+    // Map keeps (re) insertion order according to ES6 spec
-   */
+    if (value) {
-  private reduceCacheSize(): void {
+      this.delete(key);
-    // remove a key
+      super.set(key, value);
-    const oldKey = this.keyQueue.shift();
-    if (oldKey) {
-      super.delete(oldKey);
     }
-  }
 
-  /**
+    return value;
-   * Bubble up this key as new.
-   * @param key
-   */
-  private markKeyAsTouched(key: string) {
-    const n = this.keyQueue.indexOf(key);
-    if (n > -1) {
-      this.keyQueue.splice(n, 1);
-    }
-    this.keyQueue.push(key);
   }
 }

src/Common/OfferUtility.test.ts

@@ -9,14 +9,14 @@ describe("parseSDKOfferResponse", () => {
         offerThroughput: 500,
         collectionThroughputInfo: {
           minimumRUForCollection: 400,
-          numPhysicalPartitions: 1
+          numPhysicalPartitions: 1,
-        }
+        },
       },
-      id: "test"
+      id: "test",
     } as SDKOfferDefinition;
 
     const mockResponse = {
-      resource: mockOfferDefinition
+      resource: mockOfferDefinition,
     } as OfferResponse;
 
     const expectedResult: Offer = {
@@ -25,7 +25,7 @@ describe("parseSDKOfferResponse", () => {
       minimumThroughput: 400,
       id: "test",
       offerDefinition: mockOfferDefinition,
-      offerReplacePending: false
+      offerReplacePending: false,
     };
 
     expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
@@ -37,17 +37,17 @@ describe("parseSDKOfferResponse", () => {
         offerThroughput: 400,
         collectionThroughputInfo: {
           minimumRUForCollection: 400,
-          numPhysicalPartitions: 1
+          numPhysicalPartitions: 1,
         },
         offerAutopilotSettings: {
-          maxThroughput: 5000
+          maxThroughput: 5000,
-        }
+        },
       },
-      id: "test"
+      id: "test",
     } as SDKOfferDefinition;
 
     const mockResponse = {
-      resource: mockOfferDefinition
+      resource: mockOfferDefinition,
     } as OfferResponse;
 
     const expectedResult: Offer = {
@@ -56,7 +56,7 @@ describe("parseSDKOfferResponse", () => {
       minimumThroughput: 400,
       id: "test",
       offerDefinition: mockOfferDefinition,
-      offerReplacePending: false
+      offerReplacePending: false,
     };
 
     expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);

src/Common/OfferUtility.ts

@@ -2,8 +2,11 @@ import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
 import { HttpHeaders } from "./Constants";
 
-export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
+export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer | undefined => {
-  const offerDefinition: SDKOfferDefinition = offerResponse?.resource;
+  const offerDefinition: SDKOfferDefinition | undefined = offerResponse?.resource;
+  if (!offerDefinition) {
+    return undefined;
+  }
   const offerContent = offerDefinition.content;
   if (!offerContent) {
     return undefined;
@@ -12,14 +15,14 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
   const minimumThroughput = offerContent.collectionThroughputInfo?.minimumRUForCollection;
   const autopilotSettings = offerContent.offerAutopilotSettings;
 
-  if (autopilotSettings) {
+  if (autopilotSettings && autopilotSettings.maxThroughput && minimumThroughput) {
     return {
       id: offerDefinition.id,
       autoscaleMaxThroughput: autopilotSettings.maxThroughput,
       manualThroughput: undefined,
       minimumThroughput,
       offerDefinition,
-      offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true"
+      offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true",
     };
   }
 
@@ -29,6 +32,6 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
     manualThroughput: offerContent.offerThroughput,
     minimumThroughput,
     offerDefinition,
-    offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true"
+    offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true",
   };
 };

src/Common/PortalNotifications.ts

@@ -1,8 +1,8 @@
+import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { userContext } from "../UserContext";
-import { configContext, Platform } from "../ConfigContext";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 
 const notificationsPath = () => {
   switch (configContext.platform) {
@@ -20,9 +20,7 @@ export const fetchPortalNotifications = async (): Promise<DataModels.Notificatio
     return [];
   }
 
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount, resourceGroup, subscriptionId } = userContext;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
   const url = `${configContext.BACKEND_ENDPOINT}${notificationsPath()}?accountName=${
     databaseAccount.name
   }&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
@@ -30,7 +28,7 @@ export const fetchPortalNotifications = async (): Promise<DataModels.Notificatio
   const headers = { [authorizationHeader.header]: authorizationHeader.token };
 
   const response = await window.fetch(url, {
-    headers
+    headers,
   });
 
   if (!response.ok) {

src/Common/QueriesClient.ts

@@ -1,219 +1,216 @@
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
+import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
-import * as _ from "underscore";
+import * as _ from "underscore";
-import * as DataModels from "../Contracts/DataModels";
+import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
+import * as ViewModels from "../Contracts/ViewModels";
-import Explorer from "../Explorer/Explorer";
+import Explorer from "../Explorer/Explorer";
-import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
+import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
-import DocumentId from "../Explorer/Tree/DocumentId";
+import DocumentId from "../Explorer/Tree/DocumentId";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { userContext } from "../UserContext";
-import { QueryUtils } from "../Utils/QueryUtils";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
+import * as QueryUtils from "../Utils/QueryUtils";
-import { userContext } from "../UserContext";
+import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
-import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
+import { createCollection } from "./dataAccess/createCollection";
-import { createCollection } from "./dataAccess/createCollection";
+import { createDocument } from "./dataAccess/createDocument";
-import { handleError } from "./ErrorHandlingUtils";
+import { deleteDocument } from "./dataAccess/deleteDocument";
-import { createDocument } from "./dataAccess/createDocument";
+import { queryDocuments } from "./dataAccess/queryDocuments";
-import { deleteDocument } from "./dataAccess/deleteDocument";
+import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
-import { queryDocuments } from "./dataAccess/queryDocuments";
+import { handleError } from "./ErrorHandlingUtils";
-
+
-export class QueriesClient {
+export class QueriesClient {
-  private static readonly PartitionKey: DataModels.PartitionKey = {
+  private static readonly PartitionKey: DataModels.PartitionKey = {
-    paths: [`/${SavedQueries.PartitionKeyProperty}`],
+    paths: [`/${SavedQueries.PartitionKeyProperty}`],
-    kind: BackendDefaults.partitionKeyKind,
+    kind: BackendDefaults.partitionKeyKind,
-    version: BackendDefaults.partitionKeyVersion
+    version: BackendDefaults.partitionKeyVersion,
-  };
+  };
-  private static readonly FetchQuery: string = "SELECT * FROM c";
+  private static readonly FetchQuery: string = "SELECT * FROM c";
-  private static readonly FetchMongoQuery: string = "{}";
+  private static readonly FetchMongoQuery: string = "{}";
-
+
-  public constructor(private container: Explorer) {}
+  public constructor(private container: Explorer) {}
-
+
-  public async setupQueriesCollection(): Promise<DataModels.Collection> {
+  public async setupQueriesCollection(): Promise<DataModels.Collection> {
-    const queriesCollection: ViewModels.Collection = this.findQueriesCollection();
+    const queriesCollection: ViewModels.Collection = this.findQueriesCollection();
-    if (queriesCollection) {
+    if (queriesCollection) {
-      return Promise.resolve(queriesCollection.rawDataModel);
+      return Promise.resolve(queriesCollection.rawDataModel);
-    }
+    }
-
+
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Setting up account for saving queries");
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Setting up account for saving queries");
-    return createCollection({
+    return createCollection({
-      collectionId: SavedQueries.CollectionName,
+      collectionId: SavedQueries.CollectionName,
-      createNewDatabase: true,
+      createNewDatabase: true,
-      databaseId: SavedQueries.DatabaseName,
+      databaseId: SavedQueries.DatabaseName,
-      partitionKey: QueriesClient.PartitionKey,
+      partitionKey: QueriesClient.PartitionKey,
-      offerThroughput: SavedQueries.OfferThroughput,
+      offerThroughput: SavedQueries.OfferThroughput,
-      databaseLevelThroughput: false
+      databaseLevelThroughput: false,
-    })
+    })
-      .then(
+      .then(
-        (collection: DataModels.Collection) => {
+        (collection: DataModels.Collection) => {
-          NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
+          NotificationConsoleUtils.logConsoleInfo("Successfully set up account for saving queries");
-          return Promise.resolve(collection);
+          return Promise.resolve(collection);
-        },
+        },
-        (error: any) => {
+        (error: any) => {
-          handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
+          handleError(error, "setupQueriesCollection", "Failed to set up account for saving queries");
-          return Promise.reject(error);
+          return Promise.reject(error);
-        }
+        }
-      )
+      )
-      .finally(() => clearMessage());
+      .finally(() => clearMessage());
-  }
+  }
-
+
-  public async saveQuery(query: DataModels.Query): Promise<void> {
+  public async saveQuery(query: DataModels.Query): Promise<void> {
-    const queriesCollection = this.findQueriesCollection();
+    const queriesCollection = this.findQueriesCollection();
-    if (!queriesCollection) {
+    if (!queriesCollection) {
-      const errorMessage: string = "Account not set up to perform saved query operations";
+      const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
-      return Promise.reject(errorMessage);
+      return Promise.reject(errorMessage);
-    }
+    }
-
+
-    try {
+    try {
-      this.validateQuery(query);
+      this.validateQuery(query);
-    } catch (error) {
+    } catch (error) {
-      const errorMessage: string = "Invalid query specified";
+      const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleError(`Failed to save query ${query.queryName}: ${errorMessage}`);
-      return Promise.reject(errorMessage);
+      return Promise.reject(errorMessage);
-    }
+    }
-
+
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Saving query ${query.queryName}`);
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Saving query ${query.queryName}`);
-    query.id = query.queryName;
+    query.id = query.queryName;
-    return createDocument(queriesCollection, query)
+    return createDocument(queriesCollection, query)
-      .then(
+      .then(
-        (savedQuery: DataModels.Query) => {
+        (savedQuery: DataModels.Query) => {
-          NotificationConsoleUtils.logConsoleInfo(`Successfully saved query ${query.queryName}`);
+          NotificationConsoleUtils.logConsoleInfo(`Successfully saved query ${query.queryName}`);
-          return Promise.resolve();
+          return Promise.resolve();
-        },
+        },
-        (error: any) => {
+        (error: any) => {
-          if (error.code === HttpStatusCodes.Conflict.toString()) {
+          if (error.code === HttpStatusCodes.Conflict.toString()) {
-            error = `Query ${query.queryName} already exists`;
+            error = `Query ${query.queryName} already exists`;
-          }
+          }
-          handleError(error, "saveQuery", `Failed to save query ${query.queryName}`);
+          handleError(error, "saveQuery", `Failed to save query ${query.queryName}`);
-          return Promise.reject(error);
+          return Promise.reject(error);
-        }
+        }
-      )
+      )
-      .finally(() => clearMessage());
+      .finally(() => clearMessage());
-  }
+  }
-
+
-  public async getQueries(): Promise<DataModels.Query[]> {
+  public async getQueries(): Promise<DataModels.Query[]> {
-    const queriesCollection = this.findQueriesCollection();
+    const queriesCollection = this.findQueriesCollection();
-    if (!queriesCollection) {
+    if (!queriesCollection) {
-      const errorMessage: string = "Account not set up to perform saved query operations";
+      const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
-      return Promise.reject(errorMessage);
+      return Promise.reject(errorMessage);
-    }
+    }
-
+
-    const options: any = { enableCrossPartitionQuery: true };
+    const options: any = { enableCrossPartitionQuery: true };
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
-    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
-      SavedQueries.DatabaseName,
+      SavedQueries.DatabaseName,
-      SavedQueries.CollectionName,
+      SavedQueries.CollectionName,
-      this.fetchQueriesQuery(),
+      this.fetchQueriesQuery(),
-      options
+      options
-    );
+    );
-    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
+    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
-      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
+      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
-    return QueryUtils.queryAllPages(fetchQueries)
+    return QueryUtils.queryAllPages(fetchQueries)
-      .then(
+      .then(
-        (results: ViewModels.QueryResults) => {
+        (results: ViewModels.QueryResults) => {
-          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
+          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
-            if (!document) {
+            if (!document) {
-              return undefined;
+              return undefined;
-            }
+            }
-            const { id, resourceId, query, queryName } = document;
+            const { id, resourceId, query, queryName } = document;
-            const parsedQuery: DataModels.Query = {
+            const parsedQuery: DataModels.Query = {
-              resourceId: resourceId,
+              resourceId: resourceId,
-              queryName: queryName,
+              queryName: queryName,
-              query: query,
+              query: query,
-              id: id
+              id: id,
-            };
+            };
-            try {
+            try {
-              this.validateQuery(parsedQuery);
+              this.validateQuery(parsedQuery);
-              return parsedQuery;
+              return parsedQuery;
-            } catch (error) {
+            } catch (error) {
-              return undefined;
+              return undefined;
-            }
+            }
-          });
+          });
-          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
-          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
+          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
-          return Promise.resolve(queries);
+          return Promise.resolve(queries);
-        },
+        },
-        (error: any) => {
+        (error: any) => {
-          handleError(error, "getSavedQueries", "Failed to fetch saved queries");
+          handleError(error, "getSavedQueries", "Failed to fetch saved queries");
-          return Promise.reject(error);
+          return Promise.reject(error);
-        }
+        }
-      )
+      )
-      .finally(() => clearMessage());
+      .finally(() => clearMessage());
-  }
+  }
-
+
-  public async deleteQuery(query: DataModels.Query): Promise<void> {
+  public async deleteQuery(query: DataModels.Query): Promise<void> {
-    const queriesCollection = this.findQueriesCollection();
+    const queriesCollection = this.findQueriesCollection();
-    if (!queriesCollection) {
+    if (!queriesCollection) {
-      const errorMessage: string = "Account not set up to perform saved query operations";
+      const errorMessage: string = "Account not set up to perform saved query operations";
-      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleError(`Failed to fetch saved queries: ${errorMessage}`);
-      return Promise.reject(errorMessage);
+      return Promise.reject(errorMessage);
-    }
+    }
-
+
-    try {
+    try {
-      this.validateQuery(query);
+      this.validateQuery(query);
-    } catch (error) {
+    } catch (error) {
-      const errorMessage: string = "Invalid query specified";
+      const errorMessage: string = "Invalid query specified";
-      NotificationConsoleUtils.logConsoleError(`Failed to delete query ${query.queryName}: ${errorMessage}`);
+      NotificationConsoleUtils.logConsoleError(`Failed to delete query ${query.queryName}: ${errorMessage}`);
-    }
+    }
-
+
-    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting query ${query.queryName}`);
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Deleting query ${query.queryName}`);
-    query.id = query.queryName;
+    query.id = query.queryName;
-    const documentId = new DocumentId(
+    const documentId = new DocumentId(
-      {
+      {
-        partitionKey: QueriesClient.PartitionKey,
+        partitionKey: QueriesClient.PartitionKey,
-        partitionKeyProperty: "id"
+        partitionKeyProperty: "id",
-      } as DocumentsTab,
+      } as DocumentsTab,
-      query,
+      query,
-      query.queryName
+      query.queryName
-    ); // TODO: Remove DocumentId's dependency on DocumentsTab
+    ); // TODO: Remove DocumentId's dependency on DocumentsTab
-    const options: any = { partitionKey: query.resourceId };
+    const options: any = { partitionKey: query.resourceId };
-    return deleteDocument(queriesCollection, documentId)
+    return deleteDocument(queriesCollection, documentId)
-      .then(
+      .then(
-        () => {
+        () => {
-          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted query ${query.queryName}`);
+          NotificationConsoleUtils.logConsoleInfo(`Successfully deleted query ${query.queryName}`);
-          return Promise.resolve();
+          return Promise.resolve();
-        },
+        },
-        (error: any) => {
+        (error: any) => {
-          handleError(error, "deleteQuery", `Failed to delete query ${query.queryName}`);
+          handleError(error, "deleteQuery", `Failed to delete query ${query.queryName}`);
-          return Promise.reject(error);
+          return Promise.reject(error);
-        }
+        }
-      )
+      )
-      .finally(() => clearMessage());
+      .finally(() => clearMessage());
-  }
+  }
-
+
-  public getResourceId(): string {
+  public getResourceId(): string {
-    const databaseAccount = userContext.databaseAccount;
+    const { databaseAccount, subscriptionId = "", resourceGroup = "" } = userContext;
-    const databaseAccountName = (databaseAccount && databaseAccount.name) || "";
+    const databaseAccountName = databaseAccount?.name || "";
-    const subscriptionId = userContext.subscriptionId || "";
+    return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}`;
-    const resourceGroup = userContext.resourceGroup || "";
+  }
-
+
-    return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}`;
+  private findQueriesCollection(): ViewModels.Collection {
-  }
+    const queriesDatabase: ViewModels.Database = _.find(
-
+      this.container.databases(),
-  private findQueriesCollection(): ViewModels.Collection {
+      (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName
-    const queriesDatabase: ViewModels.Database = _.find(
+    );
-      this.container.databases(),
+    if (!queriesDatabase) {
-      (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName
+      return undefined;
-    );
+    }
-    if (!queriesDatabase) {
+    return _.find(
-      return undefined;
+      queriesDatabase.collections(),
-    }
+      (collection: ViewModels.Collection) => collection.id() === SavedQueries.CollectionName
-    return _.find(
+    );
-      queriesDatabase.collections(),
+  }
-      (collection: ViewModels.Collection) => collection.id() === SavedQueries.CollectionName
+
-    );
+  private validateQuery(query: DataModels.Query): void {
-  }
+    if (!query || query.queryName == null || query.query == null || query.resourceId == null) {
-
+      throw new Error("Invalid query specified");
-  private validateQuery(query: DataModels.Query): void {
+    }
-    if (!query || query.queryName == null || query.query == null || query.resourceId == null) {
+  }
-      throw new Error("Invalid query specified");
+
-    }
+  private fetchQueriesQuery(): string {
-  }
+    if (userContext.apiType === "Mongo") {
-
+      return QueriesClient.FetchMongoQuery;
-  private fetchQueriesQuery(): string {
+    }
-    if (this.container.isPreferredApiMongoDB()) {
+    return QueriesClient.FetchQuery;
-      return QueriesClient.FetchMongoQuery;
+  }
-    }
+}
-    return QueriesClient.FetchQuery;
-  }
-}

src/Common/ResourceTree.tsx

@@ -0,0 +1,59 @@
+import React, { FunctionComponent } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import refreshImg from "../../images/refresh-cosmos.svg";
+import { AuthType } from "../AuthType";
+import { userContext } from "../UserContext";
+
+export interface ResourceTreeProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+}
+
+export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+}: ResourceTreeProps): JSX.Element => {
+  return (
+    <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
+      {/* Collections Window - - Start */}
+      <div id="mainslide" className="flexContainer">
+        {/* Collections Window Title/Command Bar - Start */}
+        <div className="collectiontitle">
+          <div className="coltitle">
+            <span className="titlepadcol" data-bind="text: collectionTitle" />
+            <div className="float-right">
+              <span
+                className="padimgcolrefresh"
+                data-test="refreshTree"
+                role="button"
+                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
+                tabIndex={0}
+                aria-label="Refresh tree"
+                title="Refresh tree"
+              >
+                <img className="refreshcol" src={refreshImg} alt="Refresh tree" />
+              </span>
+              <span
+                className="padimgcolrefresh1"
+                id="expandToggleLeftPaneButton"
+                role="button"
+                onClick={toggleLeftPaneExpanded}
+                tabIndex={0}
+                aria-label="Collapse Tree"
+                title="Collapse Tree"
+              >
+                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
+              </span>
+            </div>
+          </div>
+        </div>
+        {userContext.authType === AuthType.ResourceToken ? (
+          <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
+        ) : (
+          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+        )}
+      </div>
+      {/*  Collections Window - End */}
+    </div>
+  );
+};

src/Common/Splitter.ts

@@ -1,108 +1,105 @@
-import * as ko from "knockout";
+import * as ko from "knockout";
-
+
-import { SplitterMetrics } from "./Constants";
+import { SplitterMetrics } from "./Constants";
-
+
-export enum SplitterDirection {
+export enum SplitterDirection {
-  Horizontal = "horizontal",
+  Horizontal = "horizontal",
-  Vertical = "vertical"
+  Vertical = "vertical",
-}
+}
-
+
-export interface SplitterBounds {
+export interface SplitterBounds {
-  max: number;
+  max: number;
-  min: number;
+  min: number;
-}
+}
-
+
-export interface SplitterOptions {
+export interface SplitterOptions {
-  splitterId: string;
+  splitterId: string;
-  leftId: string;
+  leftId: string;
-  bounds: SplitterBounds;
+  bounds: SplitterBounds;
-  direction: SplitterDirection;
+  direction: SplitterDirection;
-}
+}
-
+
-export class Splitter {
+export class Splitter {
-  public splitterId: string;
+  public splitterId: string;
-  public leftSideId: string;
+  public leftSideId: string;
-
+
-  public splitter: HTMLElement;
+  public splitter!: HTMLElement;
-  public leftSide: HTMLElement;
+  public leftSide!: HTMLElement;
-  public lastX: number;
+  public lastX!: number;
-  public lastWidth: number;
+  public lastWidth!: number;
-
+
-  private isCollapsed: ko.Observable<boolean>;
+  private isCollapsed: ko.Observable<boolean>;
-  private bounds: SplitterBounds;
+  private bounds: SplitterBounds;
-  private direction: SplitterDirection;
+  private direction: SplitterDirection;
-
+
-  constructor(options: SplitterOptions) {
+  constructor(options: SplitterOptions) {
-    this.splitterId = options.splitterId;
+    this.splitterId = options.splitterId;
-    this.leftSideId = options.leftId;
+    this.leftSideId = options.leftId;
-    this.isCollapsed = ko.observable<boolean>(false);
+    this.isCollapsed = ko.observable<boolean>(false);
-    this.bounds = options.bounds;
+    this.bounds = options.bounds;
-    this.direction = options.direction;
+    this.direction = options.direction;
-    this.initialize();
+    this.initialize();
-  }
+  }
-
+
-  public initialize() {
+  public initialize() {
-    this.splitter = document.getElementById(this.splitterId);
+    if (document.getElementById(this.splitterId) !== null && document.getElementById(this.leftSideId) != null) {
-    this.leftSide = document.getElementById(this.leftSideId);
+      this.splitter = <HTMLElement>document.getElementById(this.splitterId);
-
+      this.leftSide = <HTMLElement>document.getElementById(this.leftSideId);
-    const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
+    }
-    const splitterOptions: JQueryUI.ResizableOptions = {
+    const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
-      animate: true,
+    const splitterOptions: JQueryUI.ResizableOptions = {
-      animateDuration: "fast",
+      animate: true,
-      start: this.onResizeStart,
+      animateDuration: "fast",
-      stop: this.onResizeStop
+      start: this.onResizeStart,
-    };
+      stop: this.onResizeStop,
-
+    };
-    if (isVerticalSplitter) {
+
-      $(this.leftSide).css("width", this.bounds.min);
+    if (isVerticalSplitter) {
-      $(this.splitter).css("height", "100%");
+      $(this.leftSide).css("width", this.bounds.min);
-
+      $(this.splitter).css("height", "100%");
-      splitterOptions.maxWidth = this.bounds.max;
+
-      splitterOptions.minWidth = this.bounds.min;
+      splitterOptions.maxWidth = this.bounds.max;
-      splitterOptions.handles = { e: "#" + this.splitterId };
+      splitterOptions.minWidth = this.bounds.min;
-    } else {
+      splitterOptions.handles = { e: "#" + this.splitterId };
-      $(this.leftSide).css("height", this.bounds.min);
+    } else {
-      $(this.splitter).css("width", "100%");
+      $(this.leftSide).css("height", this.bounds.min);
-
+      $(this.splitter).css("width", "100%");
-      splitterOptions.maxHeight = this.bounds.max;
+
-      splitterOptions.minHeight = this.bounds.min;
+      splitterOptions.maxHeight = this.bounds.max;
-      splitterOptions.handles = { s: "#" + this.splitterId };
+      splitterOptions.minHeight = this.bounds.min;
-    }
+      splitterOptions.handles = { s: "#" + this.splitterId };
-
+    }
-    $(this.leftSide).resizable(splitterOptions);
+
-  }
+    $(this.leftSide).resizable(splitterOptions);
-
+  }
-  private onResizeStart: JQueryUI.ResizableEvent = (e: Event, ui: JQueryUI.ResizableUIParams) => {
+
-    if (this.direction === SplitterDirection.Vertical) {
+  private onResizeStart: JQueryUI.ResizableEvent = () => {
-      $(".ui-resizable-helper").height("100%");
+    if (this.direction === SplitterDirection.Vertical) {
-    } else {
+      $(".ui-resizable-helper").height("100%");
-      $(".ui-resizable-helper").width("100%");
+    } else {
-    }
+      $(".ui-resizable-helper").width("100%");
-    $("iframe").css("pointer-events", "none");
+    }
-  };
+    $("iframe").css("pointer-events", "none");
-
+  };
-  private onResizeStop: JQueryUI.ResizableEvent = (e: Event, ui: JQueryUI.ResizableUIParams) => {
+
-    $("iframe").css("pointer-events", "auto");
+  private onResizeStop: JQueryUI.ResizableEvent = () => $("iframe").css("pointer-events", "auto");
-  };
+
-
+  public collapseLeft() {
-  public collapseLeft() {
+    this.lastX = $(this.splitter).position().left;
-    this.lastX = $(this.splitter).position().left;
+    this.lastWidth = $(this.leftSide).width();
-    this.lastWidth = $(this.leftSide).width();
+    $(this.splitter).css("left", SplitterMetrics.CollapsedPositionLeft);
-    $(this.splitter).css("left", SplitterMetrics.CollapsedPositionLeft);
+    $(this.leftSide).css("width", "");
-    $(this.leftSide).css("width", "");
+    $(this.leftSide).resizable("option", "disabled", true).removeClass("ui-resizable-disabled"); // remove class so splitter is visible
-    $(this.leftSide)
+    $(this.splitter).removeClass("ui-resizable-e");
-      .resizable("option", "disabled", true)
+    this.isCollapsed(true);
-      .removeClass("ui-resizable-disabled"); // remove class so splitter is visible
+  }
-    $(this.splitter).removeClass("ui-resizable-e");
+
-    this.isCollapsed(true);
+  public expandLeft() {
-  }
+    $(this.splitter).addClass("ui-resizable-e");
-
+    $(this.leftSide).css("width", this.lastWidth);
-  public expandLeft() {
+    $(this.splitter).css("left", this.lastX);
-    $(this.splitter).addClass("ui-resizable-e");
+    $(this.splitter).css("left", ""); // this ensures the splitter's position is not fixed and enables movement during resizing
-    $(this.leftSide).css("width", this.lastWidth);
+    $(this.leftSide).resizable("enable");
-    $(this.splitter).css("left", this.lastX);
+    this.isCollapsed(false);
-    $(this.splitter).css("left", ""); // this ensures the splitter's position is not fixed and enables movement during resizing
+  }
-    $(this.leftSide).resizable("enable");
+}
-    this.isCollapsed(false);
-  }
-}

src/Common/TableEntity.tsx

@@ -0,0 +1,140 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IDropdownStyles,
+  IImageProps,
+  Image,
+  IStackTokens,
+  Stack,
+  TextField,
+  TooltipHost,
+} from "@fluentui/react";
+import React, { FunctionComponent } from "react";
+import DeleteIcon from "../../images/delete.svg";
+import EditIcon from "../../images/Edit_entity.svg";
+import { CassandraType, TableType } from "../Explorer/Tables/Constants";
+import { userContext } from "../UserContext";
+import { EntityValue } from "./EntityValue";
+
+const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
+
+export interface TableEntityProps {
+  entityTypeLabel?: string;
+  entityPropertyLabel?: string;
+  entityValueLabel?: string;
+  isDeleteOptionVisible: boolean;
+  entityProperty: string;
+  entityPropertyPlaceHolder: string;
+  selectedKey: string | number;
+  entityValuePlaceholder: string;
+  entityValue: string | Date;
+  isEntityTypeDate: boolean;
+  options: { key: string; text: string }[];
+  isPropertyTypeDisable: boolean;
+  entityTimeValue: string;
+  isEntityValueDisable?: boolean;
+  onDeleteEntity?: () => void;
+  onEditEntity?: () => void;
+  onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onSelectDate: (date: Date | null | undefined) => void;
+  onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+}
+
+export const TableEntity: FunctionComponent<TableEntityProps> = ({
+  entityTypeLabel,
+  entityPropertyLabel,
+  isDeleteOptionVisible,
+  entityProperty,
+  selectedKey,
+  entityPropertyPlaceHolder,
+  entityValueLabel,
+  entityValuePlaceholder,
+  entityValue,
+  options,
+  isPropertyTypeDisable,
+  isEntityTypeDate,
+  entityTimeValue,
+  isEntityValueDisable,
+  onEditEntity,
+  onDeleteEntity,
+  onEntityPropertyChange,
+  onEntityTypeChange,
+  onEntityValueChange,
+  onSelectDate,
+  onEntityTimeValueChange,
+}: TableEntityProps): JSX.Element => {
+  const imageProps: IImageProps = {
+    width: 16,
+    height: 30,
+    className: entityPropertyLabel ? "addRemoveIconLabel" : "addRemoveIcon",
+  };
+
+  const sectionStackTokens: IStackTokens = { childrenGap: 12 };
+
+  const getEntityValueType = (): string => {
+    const { Int, Smallint, Tinyint } = CassandraType;
+    const { Double, Int32, Int64 } = TableType;
+
+    if (
+      selectedKey === Double ||
+      selectedKey === Int32 ||
+      selectedKey === Int64 ||
+      selectedKey === Int ||
+      selectedKey === Smallint ||
+      selectedKey === Tinyint
+    ) {
+      return "number";
+    }
+    return "string";
+  };
+
+  return (
+    <>
+      <Stack horizontal tokens={sectionStackTokens}>
+        <TextField
+          label={entityPropertyLabel && entityPropertyLabel}
+          id="entityPropertyId"
+          autoFocus
+          disabled={isPropertyTypeDisable}
+          placeholder={entityPropertyPlaceHolder}
+          value={entityProperty}
+          onChange={onEntityPropertyChange}
+          required
+        />
+        <Dropdown
+          label={entityTypeLabel && entityTypeLabel}
+          selectedKey={selectedKey}
+          onChange={onEntityTypeChange}
+          options={options}
+          disabled={isPropertyTypeDisable}
+          id="entityTypeId"
+          styles={dropdownStyles}
+        />
+        <EntityValue
+          entityValueLabel={entityValueLabel}
+          entityValueType={getEntityValueType()}
+          isEntityValueDisable={isEntityValueDisable}
+          entityValuePlaceholder={entityValuePlaceholder}
+          entityValue={entityValue}
+          isEntityTypeDate={isEntityTypeDate}
+          entityTimeValue={entityTimeValue}
+          onEntityValueChange={onEntityValueChange}
+          onSelectDate={onSelectDate}
+          onEntityTimeValueChange={onEntityTimeValueChange}
+        />
+        {!isEntityValueDisable && (
+          <TooltipHost content="Edit property" id="editTooltip">
+            <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
+          </TooltipHost>
+        )}
+        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
+          <TooltipHost content="Delete property" id="deleteTooltip">
+            <Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
+          </TooltipHost>
+        )}
+      </Stack>
+    </>
+  );
+};

src/Common/ThemeUtility.ts

@@ -2,18 +2,16 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *----------------------------------------------------------*/
 
-export default class ThemeUtility {
+export function getMonacoTheme(theme: string): string {
-  public static getMonacoTheme(theme: string): string {
+  switch (theme) {
-    switch (theme) {
+    case "default":
-      case "default":
+    case "hc-white":
-      case "hc-white":
+      return "vs";
-        return "vs";
+    case "dark":
-      case "dark":
+      return "vs-dark";
-        return "vs-dark";
+    case "hc-black":
-      case "hc-black":
+      return "hc-black";
-        return "hc-black";
+    default:
-      default:
+      return "vs";
-        return "vs";
-    }
   }
 }

src/Common/Tooltip/InfoTooltip.tsx

@@ -0,0 +1,16 @@
+import { Icon, TooltipHost } from "@fluentui/react";
+import * as React from "react";
+
+export interface TooltipProps {
+  children: string;
+}
+
+export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }: TooltipProps) => {
+  return (
+    <span>
+      <TooltipHost content={children}>
+        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" />
+      </TooltipHost>
+    </span>
+  );
+};

src/Common/Upload/Upload.tsx

@@ -0,0 +1,75 @@
+import { Image, Stack, TextField } from "@fluentui/react";
+import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
+import FolderIcon from "../../../images/folder_16x16.svg";
+import * as Constants from "../Constants";
+import { InfoTooltip } from "../Tooltip/InfoTooltip";
+
+interface UploadProps {
+  label: string;
+  accept?: string;
+  tooltip?: string;
+  multiple?: boolean;
+  tabIndex?: number;
+  onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Upload: FunctionComponent<UploadProps> = ({
+  label,
+  accept,
+  tooltip,
+  multiple,
+  tabIndex,
+  ...props
+}: UploadProps) => {
+  const [selectedFilesTitle, setSelectedFilesTitle] = useState<string[]>([]);
+
+  const fileRef = useRef<HTMLInputElement>();
+
+  const onImportLinkKeyPress = (event: KeyboardEvent<HTMLAnchorElement>): void => {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      onImportLinkClick();
+    }
+  };
+
+  const onImportLinkClick = (): void => {
+    fileRef?.current?.click();
+  };
+
+  const onUpload = (event: ChangeEvent<HTMLInputElement>): void => {
+    const { files } = event.target;
+
+    const newFileList = [];
+    for (let i = 0; i < files.length; i++) {
+      newFileList.push(files.item(i).name);
+    }
+    if (newFileList) {
+      setSelectedFilesTitle(newFileList);
+      props.onUpload(event);
+    }
+  };
+  const title = label + " to upload";
+  return (
+    <div>
+      <span className="renewUploadItemsHeader">{label}</span>
+      {tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
+      <Stack horizontal>
+        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
+        <input
+          type="file"
+          id="importFileInput"
+          style={{ display: "none" }}
+          ref={fileRef}
+          accept={accept}
+          tabIndex={tabIndex}
+          multiple={multiple}
+          title="Upload Icon"
+          onChange={onUpload}
+          role="button"
+        />
+        <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
+          <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
+        </a>
+      </Stack>
+    </div>
+  );
+};

src/Common/UrlUtility.ts

@@ -1,55 +1,61 @@
-export default class UrlUtility {
+interface Result {
-  public static parseDocumentsPath(resourcePath: string): any {
+  type?: string;
-    if (typeof resourcePath !== "string") {
+  objectBody?: {
-      return {};
+    id: string;
-    }
+    self: string;
-
+  };
-    if (resourcePath.length === 0) {
+}
-      return {};
+
-    }
+export function parseDocumentsPath(resourcePath: string): Result {
-
+  if (typeof resourcePath !== "string") {
-    if (resourcePath[resourcePath.length - 1] !== "/") {
+    return {};
-      resourcePath = resourcePath + "/";
+  }
-    }
+
-
+  if (resourcePath.length === 0) {
-    if (resourcePath[0] !== "/") {
+    return {};
-      resourcePath = "/" + resourcePath;
+  }
-    }
+
-
+  if (resourcePath[resourcePath.length - 1] !== "/") {
-    var id: string;
+    resourcePath = resourcePath + "/";
-    var type: string;
+  }
-    var pathParts = resourcePath.split("/");
+
-
+  if (resourcePath[0] !== "/") {
-    if (pathParts.length % 2 === 0) {
+    resourcePath = "/" + resourcePath;
-      id = pathParts[pathParts.length - 2];
+  }
-      type = pathParts[pathParts.length - 3];
+
-    } else {
+  let id: string;
-      id = pathParts[pathParts.length - 3];
+  let type: string;
-      type = pathParts[pathParts.length - 2];
+  const pathParts = resourcePath.split("/");
-    }
+
-
+  if (pathParts.length % 2 === 0) {
-    var result = {
+    id = pathParts[pathParts.length - 2];
-      type: type,
+    type = pathParts[pathParts.length - 3];
-      objectBody: {
+  } else {
-        id: id,
+    id = pathParts[pathParts.length - 3];
-        self: resourcePath
+    type = pathParts[pathParts.length - 2];
-      }
+  }
-    };
+
-
+  const result = {
-    return result;
+    type: type,
-  }
+    objectBody: {
-
+      id: id,
-  public static createUri(baseUri: string, relativeUri: string): string {
+      self: resourcePath,
-    if (!baseUri) {
+    },
-      throw new Error("baseUri is null or empty");
+  };
-    }
+
-
+  return result;
-    var slashAtEndOfUriRegex = /\/$/,
+}
-      slashAtStartOfUriRegEx = /^\//;
+
-
+export function createUri(baseUri: string, relativeUri: string): string {
-    var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
+  if (!baseUri) {
-      normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
+    throw new Error("baseUri is null or empty");
-
+  }
-    return normalizedBaseUri + normalizedRelativeUri;
+
-  }
+  const slashAtEndOfUriRegex = /\/$/,
+    slashAtStartOfUriRegEx = /^\//;
+
+  const normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
+    normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
+
+  return normalizedBaseUri + normalizedRelativeUri;
 }

src/Common/__snapshots__/CosmosClient.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`requestPlugin Emulator builds a url for emulator proxy via webpack 1`] = `
 Object {
-  "endpoint": "/proxy",
+  "endpoint": "http://localhost/proxy",
   "headers": Object {
     "x-ms-proxy-target": "http://localhost",
   },
@@ -12,7 +12,7 @@ Object {
 
 exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
 Object {
-  "endpoint": "/proxy",
+  "endpoint": "http://localhost/proxy",
   "headers": Object {
     "x-ms-proxy-target": "baz",
   },

src/Common/dataAccess/bulkCreateDocument.ts

@@ -0,0 +1,39 @@
+import { JSONObject, OperationResponse } from "@azure/cosmos";
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
+
+export const bulkCreateDocument = async (
+  collection: CollectionBase,
+  documents: JSONObject[]
+): Promise<OperationResponse[]> => {
+  const clearMessage = logConsoleProgress(
+    `Executing ${documents.length} bulk operations for container ${collection.id()}`
+  );
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .items.bulk(
+        documents.map((doc) => ({ operationType: "Create", resourceBody: doc })),
+        { continueOnError: true }
+      );
+
+    const successCount = response.filter((r) => r.statusCode === 201).length;
+    const throttledCount = response.filter((r) => r.statusCode === 429).length;
+
+    logConsoleInfo(
+      `${
+        documents.length
+      } operations completed for container ${collection.id()}. ${successCount} operations succeeded. ${throttledCount} operations throttled`
+    );
+    return response;
+  } catch (error) {
+    handleError(error, "BulkCreateDocument", `Error bulk creating items for container ${collection.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/createCollection.test.ts

@@ -2,11 +2,10 @@ jest.mock("../../Utils/arm/request");
 jest.mock("../CosmosClient");
 import { AuthType } from "../../AuthType";
 import { CreateCollectionParams, DatabaseAccount } from "../../Contracts/DataModels";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { updateUserContext } from "../../UserContext";
 import { armRequest } from "../../Utils/arm/request";
 import { client } from "../CosmosClient";
-import { createCollection, constructRpOptions } from "./createCollection";
+import { constructRpOptions, createCollection } from "./createCollection";
-import { updateUserContext } from "../../UserContext";
 
 describe("createCollection", () => {
   const createCollectionParams: CreateCollectionParams = {
@@ -14,38 +13,42 @@ describe("createCollection", () => {
     collectionId: "testContainer",
     databaseId: "testDatabase",
     databaseLevelThroughput: true,
-    offerThroughput: 400
+    offerThroughput: 400,
   };
 
   beforeAll(() => {
     updateUserContext({
       databaseAccount: {
-        name: "test"
+        name: "test",
       } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      apiType: "SQL",
     });
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await createCollection(createCollectionParams);
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       databases: {
         createIfNotExists: () => {
           return {
             database: {
               containers: {
-                create: () => ({})
+                create: () => ({}),
-              }
+              },
-            }
+            },
           };
-        }
+        },
-      }
+      },
     });
     await createCollection(createCollectionParams);
     expect(client).toHaveBeenCalled();
@@ -59,7 +62,7 @@ describe("createCollection", () => {
       collectionId: "testContainer",
       databaseId: "testDatabase",
       databaseLevelThroughput: false,
-      offerThroughput: 400
+      offerThroughput: 400,
     };
     expect(constructRpOptions(manualThroughputParams)).toEqual({ throughput: 400 });
 
@@ -69,12 +72,12 @@ describe("createCollection", () => {
       databaseId: "testDatabase",
       databaseLevelThroughput: false,
       offerThroughput: 400,
-      autoPilotMaxThroughput: 4000
+      autoPilotMaxThroughput: 4000,
     };
     expect(constructRpOptions(autoPilotThroughputParams)).toEqual({
       autoscaleSettings: {
-        maxThroughput: 4000
+        maxThroughput: 4000,
-      }
+      },
     });
   });
 });

src/Common/dataAccess/createCollection.ts

@@ -1,33 +1,32 @@
-import * as DataModels from "../../Contracts/DataModels";
-import { AuthType } from "../../AuthType";
 import { ContainerResponse, DatabaseResponse } from "@azure/cosmos";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
 import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
 import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { AuthType } from "../../AuthType";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import * as DataModels from "../../Contracts/DataModels";
-import * as ARMTypes from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { client } from "../CosmosClient";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { createMongoCollectionWithProxy } from "../MongoProxyClient";
+import { userContext } from "../../UserContext";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import {
   createUpdateCassandraTable,
-  getCassandraTable
+  getCassandraTable,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateMongoDBCollection,
-  getMongoDBCollection
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import {
   createUpdateGremlinGraph,
-  getGremlinGraph
+  getGremlinGraph,
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection,
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import * as ARMTypes from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { userContext } from "../../UserContext";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { createDatabase } from "./createDatabase";
+import { client } from "../CosmosClient";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { handleError } from "../ErrorHandlingUtils";
+import { createMongoCollectionWithProxy } from "../MongoProxyClient";
+import { createDatabase } from "./createDatabase";
 
 export const createCollection = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
   const clearMessage = logConsoleProgress(
@@ -35,18 +34,18 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
   );
   try {
     let collection: DataModels.Collection;
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
       if (params.createNewDatabase) {
         const createDatabaseParams: DataModels.CreateDatabaseParams = {
           autoPilotMaxThroughput: params.autoPilotMaxThroughput,
           databaseId: params.databaseId,
           databaseLevelThroughput: params.databaseLevelThroughput,
-          offerThroughput: params.offerThroughput
+          offerThroughput: params.offerThroughput,
         };
         await createDatabase(createDatabaseParams);
       }
       collection = await createCollectionWithARM(params);
-    } else if (userContext.defaultExperience === DefaultAccountExperienceType.MongoDB) {
+    } else if (userContext.apiType === "Mongo") {
       collection = await createMongoCollectionWithProxy(params);
     } else {
       collection = await createCollectionWithSDK(params);
@@ -63,20 +62,20 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
 };
 
 const createCollectionWithARM = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  const defaultExperience = userContext.defaultExperience;
+  const { apiType } = userContext;
-  switch (defaultExperience) {
+  switch (apiType) {
-    case DefaultAccountExperienceType.DocumentDB:
+    case "SQL":
       return createSqlContainer(params);
-    case DefaultAccountExperienceType.MongoDB:
+    case "Mongo":
       return createMongoCollection(params);
-    case DefaultAccountExperienceType.Cassandra:
+    case "Cassandra":
       return createCassandraTable(params);
-    case DefaultAccountExperienceType.Graph:
+    case "Gremlin":
       return createGraph(params);
-    case DefaultAccountExperienceType.Table:
+    case "Tables":
       return createTable(params);
     default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
   }
 };
 
@@ -100,7 +99,7 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
 
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.SqlContainerResource = {
-    id: params.collectionId
+    id: params.collectionId,
   };
   if (params.analyticalStorageTtl) {
     resource.analyticalStorageTtl = params.analyticalStorageTtl;
@@ -118,8 +117,8 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
   const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
     properties: {
       resource,
-      options
+      options,
-    }
+    },
   };
 
   const createResponse = await createUpdateSqlContainer(
@@ -154,7 +153,7 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
 
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.MongoDBCollectionResource = {
-    id: params.collectionId
+    id: params.collectionId,
   };
   if (params.analyticalStorageTtl) {
     resource.analyticalStorageTtl = params.analyticalStorageTtl;
@@ -170,8 +169,8 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
   const rpPayload: ARMTypes.MongoDBCollectionCreateUpdateParameters = {
     properties: {
       resource,
-      options
+      options,
-    }
+    },
   };
 
   const createResponse = await createUpdateMongoDBCollection(
@@ -185,7 +184,7 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
 
   if (params.createMongoWildcardIndex) {
     TelemetryProcessor.trace(Action.CreateMongoCollectionWithWildcardIndex, ActionModifiers.Mark, {
-      message: "Mongo Collection created with wildcard index on all fields."
+      message: "Mongo Collection created with wildcard index on all fields.",
     });
   }
 
@@ -212,7 +211,7 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):
 
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.CassandraTableResource = {
-    id: params.collectionId
+    id: params.collectionId,
   };
   if (params.analyticalStorageTtl) {
     resource.analyticalStorageTtl = params.analyticalStorageTtl;
@@ -221,8 +220,8 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):
   const rpPayload: ARMTypes.CassandraTableCreateUpdateParameters = {
     properties: {
       resource,
-      options
+      options,
-    }
+    },
   };
 
   const createResponse = await createUpdateCassandraTable(
@@ -256,7 +255,7 @@ const createGraph = async (params: DataModels.CreateCollectionParams): Promise<D
 
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.GremlinGraphResource = {
-    id: params.collectionId
+    id: params.collectionId,
   };
 
   if (params.indexingPolicy) {
@@ -272,8 +271,8 @@ const createGraph = async (params: DataModels.CreateCollectionParams): Promise<D
   const rpPayload: ARMTypes.GremlinGraphCreateUpdateParameters = {
     properties: {
       resource,
-      options
+      options,
-    }
+    },
   };
 
   const createResponse = await createUpdateGremlinGraph(
@@ -306,14 +305,14 @@ const createTable = async (params: DataModels.CreateCollectionParams): Promise<D
 
   const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
   const resource: ARMTypes.TableResource = {
-    id: params.collectionId
+    id: params.collectionId,
   };
 
   const rpPayload: ARMTypes.TableCreateUpdateParameters = {
     properties: {
       resource,
-      options
+      options,
-    }
+    },
   };
 
   const createResponse = await createUpdateTable(
@@ -334,13 +333,13 @@ export const constructRpOptions = (params: DataModels.CreateDatabaseParams): ARM
   if (params.autoPilotMaxThroughput) {
     return {
       autoscaleSettings: {
-        maxThroughput: params.autoPilotMaxThroughput
+        maxThroughput: params.autoPilotMaxThroughput,
-      }
+      },
     };
   }
 
   return {
-    throughput: params.offerThroughput
+    throughput: params.offerThroughput,
   };
 };
 
@@ -350,7 +349,7 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
     partitionKey: params.partitionKey || undefined,
     indexingPolicy: params.indexingPolicy || undefined,
     uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
-    analyticalStorageTtl: params.analyticalStorageTtl
+    analyticalStorageTtl: params.analyticalStorageTtl,
   } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
   const collectionOptions: RequestOptions = {};
   const createDatabaseBody: DatabaseRequest = { id: params.databaseId };

src/Common/dataAccess/createDatabase.ts

@@ -1,40 +1,39 @@
-import * as DataModels from "../../Contracts/DataModels";
-import { AuthType } from "../../AuthType";
 import { DatabaseResponse } from "@azure/cosmos";
 import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { AuthType } from "../../AuthType";
+import * as DataModels from "../../Contracts/DataModels";
+import { userContext } from "../../UserContext";
+import {
+  createUpdateCassandraKeyspace,
+  getCassandraKeyspace,
+} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import {
+  createUpdateGremlinDatabase,
+  getGremlinDatabase,
+} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import {
+  createUpdateMongoDBDatabase,
+  getMongoDBDatabase,
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import {
   CassandraKeyspaceCreateUpdateParameters,
+  CreateUpdateOptions,
   GremlinDatabaseCreateUpdateParameters,
   MongoDBDatabaseCreateUpdateParameters,
   SqlDatabaseCreateUpdateParameters,
-  CreateUpdateOptions
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
-import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import {
-  createUpdateCassandraKeyspace,
-  getCassandraKeyspace
-} from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateMongoDBDatabase,
-  getMongoDBDatabase
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import {
-  createUpdateGremlinDatabase,
-  getGremlinDatabase
-} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
 
 export async function createDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
   const clearMessage = logConsoleProgress(`Creating a new database ${params.databaseId}`);
   try {
-    if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
+    if (userContext.apiType === "Tables") {
       throw new Error("Creating database resources is not allowed for tables accounts");
     }
-    const database: DataModels.Database = await (window.authType === AuthType.AAD && !userContext.useSDKOperations
+    const database: DataModels.Database = await (userContext.authType === AuthType.AAD && !userContext.useSDKOperations
       ? createDatabaseWithARM(params)
       : createDatabaseWithSDK(params));
 
@@ -49,18 +48,19 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
 }
 
 async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  const defaultExperience = userContext.defaultExperience;
+  const { apiType } = userContext;
-  switch (defaultExperience) {
+
-    case DefaultAccountExperienceType.DocumentDB:
+  switch (apiType) {
+    case "SQL":
       return createSqlDatabase(params);
-    case DefaultAccountExperienceType.MongoDB:
+    case "Mongo":
       return createMongoDatabase(params);
-    case DefaultAccountExperienceType.Cassandra:
+    case "Cassandra":
       return createCassandraKeyspace(params);
-    case DefaultAccountExperienceType.Graph:
+    case "Gremlin":
       return createGremlineDatabase(params);
     default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
   }
 }
 
@@ -85,10 +85,10 @@ async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promi
   const rpPayload: SqlDatabaseCreateUpdateParameters = {
     properties: {
       resource: {
-        id: params.databaseId
+        id: params.databaseId,
       },
-      options
+      options,
-    }
+    },
   };
   const createResponse = await createUpdateSqlDatabase(
     userContext.subscriptionId,
@@ -121,10 +121,10 @@ async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Pro
   const rpPayload: MongoDBDatabaseCreateUpdateParameters = {
     properties: {
       resource: {
-        id: params.databaseId
+        id: params.databaseId,
       },
-      options
+      options,
-    }
+    },
   };
   const createResponse = await createUpdateMongoDBDatabase(
     userContext.subscriptionId,
@@ -157,10 +157,10 @@ async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams):
   const rpPayload: CassandraKeyspaceCreateUpdateParameters = {
     properties: {
       resource: {
-        id: params.databaseId
+        id: params.databaseId,
       },
-      options
+      options,
-    }
+    },
   };
   const createResponse = await createUpdateCassandraKeyspace(
     userContext.subscriptionId,
@@ -193,10 +193,10 @@ async function createGremlineDatabase(params: DataModels.CreateDatabaseParams):
   const rpPayload: GremlinDatabaseCreateUpdateParameters = {
     properties: {
       resource: {
-        id: params.databaseId
+        id: params.databaseId,
       },
-      options
+      options,
-    }
+    },
   };
   const createResponse = await createUpdateGremlinDatabase(
     userContext.subscriptionId,
@@ -231,12 +231,12 @@ function constructRpOptions(params: DataModels.CreateDatabaseParams): CreateUpda
   if (params.autoPilotMaxThroughput) {
     return {
       autoscaleSettings: {
-        maxThroughput: params.autoPilotMaxThroughput
+        maxThroughput: params.autoPilotMaxThroughput,
-      }
+      },
     };
   }
 
   return {
-    throughput: params.offerThroughput
+    throughput: params.offerThroughput,
   };
 }

src/Common/dataAccess/createStoredProcedure.ts

@@ -1,18 +1,17 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
-import {
+import { AuthType } from "../../AuthType";
-  SqlStoredProcedureCreateUpdateParameters,
+import { userContext } from "../../UserContext";
-  SqlStoredProcedureResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { client } from "../CosmosClient";
 import {
   createUpdateSqlStoredProcedure,
-  getSqlStoredProcedure
+  getSqlStoredProcedure,
 } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { handleError } from "../ErrorHandlingUtils";
+import {
+  SqlStoredProcedureCreateUpdateParameters,
+  SqlStoredProcedureResource,
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function createStoredProcedure(
   databaseId: string,
@@ -21,11 +20,7 @@ export async function createStoredProcedure(
 ): Promise<StoredProcedureDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
   try {
-    if (
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
       try {
         const getResponse = await getSqlStoredProcedure(
           userContext.subscriptionId,
@@ -49,8 +44,8 @@ export async function createStoredProcedure(
       const createSprocParams: SqlStoredProcedureCreateUpdateParameters = {
         properties: {
           resource: storedProcedure as SqlStoredProcedureResource,
-          options: {}
+          options: {},
-        }
+        },
       };
       const rpResponse = await createUpdateSqlStoredProcedure(
         userContext.subscriptionId,

src/Common/dataAccess/createTrigger.ts

@@ -1,15 +1,14 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, TriggerDefinition } from "@azure/cosmos";
+import { AuthType } from "../../AuthType";
+import { userContext } from "../../UserContext";
+import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import {
   SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource
+  SqlTriggerResource,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { client } from "../CosmosClient";
-import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function createTrigger(
   databaseId: string,
@@ -18,11 +17,7 @@ export async function createTrigger(
 ): Promise<TriggerDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
   try {
-    if (
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
       try {
         const getResponse = await getSqlTrigger(
           userContext.subscriptionId,
@@ -44,8 +39,8 @@ export async function createTrigger(
       const createTriggerParams: SqlTriggerCreateUpdateParameters = {
         properties: {
           resource: trigger as SqlTriggerResource,
-          options: {}
+          options: {},
-        }
+        },
       };
       const rpResponse = await createUpdateSqlTrigger(
         userContext.subscriptionId,
@@ -59,10 +54,7 @@ export async function createTrigger(
       return rpResponse && (rpResponse.properties?.resource as TriggerDefinition & Resource);
     }
 
-    const response = await client()
+    const response = await client().database(databaseId).container(collectionId).scripts.triggers.create(trigger);
-      .database(databaseId)
-      .container(collectionId)
-      .scripts.triggers.create(trigger);
     return response.resource;
   } catch (error) {
     handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);

src/Common/dataAccess/createUserDefinedFunction.ts

@@ -1,18 +1,17 @@
-import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
-import {
+import { AuthType } from "../../AuthType";
-  SqlUserDefinedFunctionCreateUpdateParameters,
+import { userContext } from "../../UserContext";
-  SqlUserDefinedFunctionResource
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { client } from "../CosmosClient";
 import {
   createUpdateSqlUserDefinedFunction,
-  getSqlUserDefinedFunction
+  getSqlUserDefinedFunction,
 } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { handleError } from "../ErrorHandlingUtils";
+import {
+  SqlUserDefinedFunctionCreateUpdateParameters,
+  SqlUserDefinedFunctionResource,
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function createUserDefinedFunction(
   databaseId: string,
@@ -21,11 +20,7 @@ export async function createUserDefinedFunction(
 ): Promise<UserDefinedFunctionDefinition & Resource> {
   const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
   try {
-    if (
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations && userContext.apiType === "SQL") {
-      window.authType === AuthType.AAD &&
-      !userContext.useSDKOperations &&
-      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
-    ) {
       try {
         const getResponse = await getSqlUserDefinedFunction(
           userContext.subscriptionId,
@@ -49,8 +44,8 @@ export async function createUserDefinedFunction(
       const createUDFParams: SqlUserDefinedFunctionCreateUpdateParameters = {
         properties: {
           resource: userDefinedFunction as SqlUserDefinedFunctionResource,
-          options: {}
+          options: {},
-        }
+        },
       };
       const rpResponse = await createUpdateSqlUserDefinedFunction(
         userContext.subscriptionId,

src/Common/dataAccess/deleteCollection.test.ts

@@ -1,42 +1,45 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../MessageHandler");
 jest.mock("../CosmosClient");
-import { deleteCollection } from "./deleteCollection";
-import { armRequest } from "../../Utils/arm/request";
 import { AuthType } from "../../AuthType";
-import { client } from "../CosmosClient";
-import { updateUserContext } from "../../UserContext";
 import { DatabaseAccount } from "../../Contracts/DataModels";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { updateUserContext } from "../../UserContext";
+import { armRequest } from "../../Utils/arm/request";
+import { client } from "../CosmosClient";
+import { deleteCollection } from "./deleteCollection";
 
 describe("deleteCollection", () => {
   beforeAll(() => {
     updateUserContext({
       databaseAccount: {
-        name: "test"
+        name: "test",
       } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      apiType: "SQL",
     });
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await deleteCollection("database", "collection");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       database: () => {
         return {
           container: () => {
             return {
-              delete: (): unknown => undefined
+              delete: (): unknown => undefined,
             };
-          }
+          },
         };
-      }
+      },
     });
     await deleteCollection("database", "collection");
     expect(client).toHaveBeenCalled();

src/Common/dataAccess/deleteCollection.ts

@@ -1,25 +1,21 @@
 import { AuthType } from "../../AuthType";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { deleteSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
-import { deleteCassandraTable } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
-import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
-import { deleteTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { userContext } from "../../UserContext";
+import { deleteCassandraTable } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
+import { deleteGremlinGraph } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { deleteMongoDBCollection } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { deleteSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { deleteTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
   const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
   try {
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
       await deleteCollectionWithARM(databaseId, collectionId);
     } else {
-      await client()
+      await client().database(databaseId).container(collectionId).delete();
-        .database(databaseId)
-        .container(collectionId)
-        .delete();
     }
     logConsoleInfo(`Successfully deleted container ${collectionId}`);
   } catch (error) {
@@ -31,23 +27,21 @@ export async function deleteCollection(databaseId: string, collectionId: string)
 }
 
 function deleteCollectionWithARM(databaseId: string, collectionId: string): Promise<void> {
-  const subscriptionId = userContext.subscriptionId;
+  const { subscriptionId, resourceGroup, apiType, databaseAccount } = userContext;
-  const resourceGroup = userContext.resourceGroup;
+  const accountName = databaseAccount.name;
-  const accountName = userContext.databaseAccount.name;
-  const defaultExperience = userContext.defaultExperience;
 
-  switch (defaultExperience) {
+  switch (apiType) {
-    case DefaultAccountExperienceType.DocumentDB:
+    case "SQL":
       return deleteSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
-    case DefaultAccountExperienceType.MongoDB:
+    case "Mongo":
       return deleteMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
-    case DefaultAccountExperienceType.Cassandra:
+    case "Cassandra":
       return deleteCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
-    case DefaultAccountExperienceType.Graph:
+    case "Gremlin":
       return deleteGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
-    case DefaultAccountExperienceType.Table:
+    case "Tables":
       return deleteTable(subscriptionId, resourceGroup, accountName, collectionId);
     default:
-      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
+      throw new Error(`Unsupported default experience type: ${apiType}`);
   }
 }

src/Common/dataAccess/deleteConflict.ts

@@ -10,7 +10,7 @@ export const deleteConflict = async (collection: CollectionBase, conflictId: Con
 
   try {
     const options = {
-      partitionKey: getPartitionKeyHeaderForConflict(conflictId)
+      partitionKey: getPartitionKeyHeaderForConflict(conflictId),
     };
 
     await client()

src/Common/dataAccess/deleteDatabase.test.ts

@@ -1,38 +1,41 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../MessageHandler");
 jest.mock("../CosmosClient");
-import { deleteDatabase } from "./deleteDatabase";
-import { armRequest } from "../../Utils/arm/request";
 import { AuthType } from "../../AuthType";
-import { client } from "../CosmosClient";
-import { updateUserContext } from "../../UserContext";
 import { DatabaseAccount } from "../../Contracts/DataModels";
-import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
+import { updateUserContext } from "../../UserContext";
+import { armRequest } from "../../Utils/arm/request";
+import { client } from "../CosmosClient";
+import { deleteDatabase } from "./deleteDatabase";
 
 describe("deleteDatabase", () => {
   beforeAll(() => {
     updateUserContext({
       databaseAccount: {
-        name: "test"
+        name: "test",
       } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      apiType: "SQL",
     });
   });
 
   it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
     await deleteDatabase("database");
     expect(armRequest).toHaveBeenCalled();
   });
 
   it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
     (client as jest.Mock).mockReturnValue({
       database: () => {
         return {
-          delete: (): unknown => undefined
+          delete: (): unknown => undefined,
         };
-      }
+      },
     });
     await deleteDatabase("database");
     expect(client).toHaveBeenCalled();