Add command

.eslintignore

@@ -11,9 +11,15 @@ 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
@@ -24,6 +30,8 @@ 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
@@ -50,6 +58,8 @@ 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
@@ -85,6 +95,8 @@ 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
@@ -97,6 +109,8 @@ 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
@@ -125,12 +139,15 @@ 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/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
@@ -143,6 +160,8 @@ 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/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -151,6 +170,7 @@ 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
@@ -159,6 +179,8 @@ 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
@@ -241,6 +263,8 @@ 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
@@ -249,11 +273,25 @@ 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
@@ -300,7 +338,15 @@ 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

.eslintrc.allFiles.js

@@ -0,0 +1,35 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  plugins: ["@typescript-eslint"],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  overrides: [
+    {
+      files: ["**/*.tsx"],
+      plugins: ["react"],
+    },
+    {
+      files: ["**/*.{test,spec}.{ts,tsx}"],
+      env: {
+        jest: true,
+      },
+      plugins: ["jest"],
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  rules: {
+    "@typescript-eslint/no-unused-vars-experimental": "error",
+  },
+};

.github/dependabot.yml

@@ -1,9 +0,0 @@
-# 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

@@ -15,10 +15,10 @@ jobs:
     if: github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: node utils/codeMetrics.js
         env:
@@ -28,10 +28,10 @@ jobs:
     name: "Compile TypeScript"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run compile
       - run: npm run compile:strict
@@ -40,10 +40,10 @@ jobs:
     name: "Check Format"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run format:check
   lint:
@@ -51,10 +51,10 @@ jobs:
     name: "Lint"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run lint
   unittest:
@@ -62,10 +62,10 @@ jobs:
     name: "Unit Tests"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run test
   build:
@@ -74,10 +74,10 @@ jobs:
     name: "Build"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
@@ -94,14 +94,14 @@ jobs:
           path: dist/
   endtoendemulator:
     name: "End To End Emulator Tests"
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
+    needs: [lint, format, compile, unittest]
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - uses: southpolesteve/cosmos-emulator-github-action@v1
       - name: End to End Tests
         run: |
@@ -125,10 +125,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - name: Accessibility Check
         run: |
           # Ubuntu gets mad when webpack runs too many files watchers
@@ -143,9 +143,23 @@ jobs:
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
   endtoendhosted:
-    name: "End to End Tests"
+    name: "End to End Hosted Tests"
-    needs: [cleanupaccounts]
+    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 &
+          node utils/cleanupDBs.js
+          npm run wait-for-server
+          npm run test:e2e
+        shell: bash
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
           PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
@@ -162,53 +176,15 @@ jobs:
           CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
           TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
-    strategy:
-      fail-fast: false
-      matrix:
-        test-file:
-          - ./test/cassandra/container.spec.ts
-          - ./test/mongo/mongoIndexPolicy.spec.ts
-          - ./test/notebooks/uploadAndOpenNotebook.spec.ts
-          - ./test/selfServe/selfServeExample.spec.ts
-          - ./test/sql/container.spec.ts
-          - ./test/sql/resourceToken.spec.ts
-          - ./test/tables/container.spec.ts
-    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: npm start &
-      - run: node utils/cleanupDBs.js
-      - run: npm run wait-for-server
-      - name: ${{ matrix['test-file'] }}
-        run: npx jest -c ./jest.config.e2e.js --detectOpenHandles ${{ matrix['test-file'] }}
-        shell: bash
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
           path: failed-*
-  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
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [build]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -224,7 +200,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 -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:
@@ -232,7 +208,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [build]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -249,7 +225,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 -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
       - uses: actions/upload-artifact@v2
         name: packages
         with:

.vscode/settings.json

@@ -17,10 +17,5 @@
         "test/out/**": 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
-  }
 }

README.md

@@ -18,6 +18,7 @@ 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
@@ -68,7 +69,7 @@ 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
+### Architechture
 
 [![](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)
 

jest-puppeteer.config.js

@@ -7,6 +7,5 @@ module.exports = {
     defaultViewport: null,
     ignoreHTTPSErrors: true,
     args: ["--disable-web-security"],
-    exitOnPageError: false,
   },
 };

jest.config.js

@@ -21,13 +21,17 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+  // collectCoverageFrom: [
+  //   "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: ["/node_modules/"],
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ["json", "text", "cobertura"],
@@ -35,10 +39,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 25,
+      branches: 22,
-      functions: 25,
+      functions: 28,
-      lines: 30,
+      lines: 33,
-      statements: 30,
+      statements: 31,
     },
   },
 
@@ -67,8 +71,7 @@ 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|css)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
-    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
     "worker-loader": "<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
     "^dnd-core$": "dnd-core/dist/cjs",

less/documentDB.less

@@ -718,7 +718,7 @@ execute-sproc-params-pane {
   }
 }
 
-.stored-procedure-tab {
+stored-procedure-tab {
   @ToggleHeight: 30px;
   @ToggleWidth: 180px;
 

package.json

@@ -8,7 +8,6 @@
     "@azure/cosmos": "3.9.0",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
-    "@azure/ms-rest-nodeauth": "3.0.7",
     "@babel/plugin-proposal-class-properties": "7.12.1",
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@jupyterlab/services": "6.0.2",
@@ -43,9 +42,10 @@
     "@types/mkdirp": "1.0.1",
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
-    "@uifabric/react-hooks": "7.14.0",
     "@uifabric/styling": "7.13.7",
+    "abort-controller": "3.0.0",
     "applicationinsights": "1.8.0",
+    "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
@@ -59,6 +59,9 @@
     "date-fns": "1.29.0",
     "dayjs": "1.8.19",
     "dotenv": "8.2.0",
+    "es6-object-assign": "1.1.0",
+    "es6-symbol": "3.1.3",
+    "eslint-nibble": "6.1.0",
     "eslint-plugin-jest": "23.13.2",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
@@ -74,11 +77,13 @@
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.18.1",
-    "ms": "2.1.3",
     "msal": "1.4.4",
-    "office-ui-fabric-react": "7.164.2",
+    "object.entries": "1.1.0",
+    "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
+    "promise-polyfill": "8.1.0",
+    "promise.prototype.finally": "3.1.0",
     "q": "1.5.1",
     "react": "16.13.1",
     "react-animate-height": "2.0.8",
@@ -95,9 +100,13 @@
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
+    "text-encoding": "0.7.0",
     "underscore": "1.9.1",
-    "utility-types": "3.10.0"
+    "url-polyfill": "1.1.7",
+    "utility-types": "3.10.0",
+    "webcrypto-liner": "1.1.4",
+    "webfontloader": "1.6.28",
+    "whatwg-fetch": "3.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
@@ -111,15 +120,15 @@
     "@types/d3": "5.9.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.5",
+    "@types/expect-puppeteer": "4.4.3",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.4.1",
+    "@types/jest-environment-puppeteer": "4.3.2",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
     "@types/promise.prototype.finally": "2.0.3",
     "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "5.4.3",
+    "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
@@ -127,7 +136,9 @@
     "@types/react-redux": "7.1.7",
     "@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.0.1",
     "@typescript-eslint/parser": "4.0.1",
     "axe-puppeteer": "1.1.0",
@@ -152,6 +163,7 @@
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
     "html-webpack-plugin": "3.2.0",
+    "inline-css": "2.2.5",
     "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
     "jest-puppeteer": "4.4.0",
@@ -163,11 +175,12 @@
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "prettier": "2.2.1",
-    "puppeteer": "8.0.0",
+    "puppeteer": "4.0.0",
     "raw-loader": "0.5.1",
     "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",
@@ -200,6 +213,7 @@
     "format": "prettier --write \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
+    "lint:important": "eslint --no-ingore --no-eslintrc -c ./eslintrc.important.js \"**/*.{ts,tsx}\"",
     "build:contracts": "npm run compile:contracts",
     "strictEligibleFiles": "node ./strict-migration-tools/index.js",
     "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",

src/Common/Constants.ts

@@ -98,6 +98,30 @@ export class CapabilityNames {
   public static readonly EnableServerless: string = "EnableServerless";
 }
 
+export class Features {
+  public static readonly cosmosdb = "cosmosdb";
+  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
+  public static readonly executeSproc = "dataexplorerexecutesproc";
+  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
+  public static readonly enableTtl = "enablettl";
+  public static readonly enableNotebooks = "enablenotebooks";
+  public static readonly enableSpark = "enablespark";
+  public static readonly livyEndpoint = "livyendpoint";
+  public static readonly notebookServerUrl = "notebookserverurl";
+  public static readonly notebookServerToken = "notebookservertoken";
+  public static readonly notebookBasePath = "notebookbasepath";
+  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
+  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
+  public static readonly ttl90Days = "ttl90days";
+  public static readonly enableRightPanelV2 = "enablerightpanelv2";
+  public static readonly enableSchema = "enableschema";
+  public static readonly enableSDKoperations = "enablesdkoperations";
+  public static readonly showMinRUSurvey = "showminrusurvey";
+  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
+  public static readonly selfServeType = "selfservetype";
+  public static readonly enableKOPanel = "enablekopanel";
+}
+
 // flight names returned from the portal are always lowercase
 export class Flights {
   public static readonly SettingsV2 = "settingsv2";

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 { userContext } from "../UserContext";
+import { getErrorMessage } from "./ErrorHandlingUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
-import { getErrorMessage } from "./ErrorHandlingUtils";
+import { userContext } from "../UserContext";
 
 const _global = typeof self === "undefined" ? window : self;
 

src/Common/ErrorHandlingUtils.ts

@@ -1,9 +1,8 @@
+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";
 
@@ -45,7 +44,7 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri
 
 const replaceKnownError = (errorMessage: string): string => {
   if (
-    userContext.subscriptionType === SubscriptionType.Internal &&
+    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
     errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
   ) {
     return "Database throughput is not supported for internal subscriptions.";

src/Common/HeadersUtility.ts

@@ -1,5 +1,28 @@
+import * as Constants from "./Constants";
+
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
 
+// 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.ts

@@ -1,8 +1,6 @@
 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;
@@ -18,7 +16,6 @@ export interface MinimalQueryIterator {
 export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
   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 {

src/Common/MessageHandler.ts

@@ -1,8 +1,8 @@
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import Q from "q";
 import * as _ from "underscore";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { getDataExplorerWindow } from "../Utils/WindowUtils";
 import * as Constants from "./Constants";
+import { getDataExplorerWindow } from "../Utils/WindowUtils";
 
 export interface CachedDataPromise<T> {
   deferred: Q.Deferred<T>;
@@ -61,21 +61,6 @@ export function sendMessage(data: any): void {
   }
 }
 
-export function sendReadyMessage(): void {
-  if (canSendMessage()) {
-    // We try to find data explorer window first, then fallback to current window
-    const portalChildWindow = getDataExplorerWindow(window) || window;
-    portalChildWindow.parent.postMessage(
-      {
-        signature: "pcIframe",
-        kind: "ready",
-        data: "ready",
-      },
-      portalChildWindow.document.referrer
-    );
-  }
-}
-
 export function canSendMessage(): boolean {
   return window.parent !== window;
 }

src/Common/QueriesClient.ts

@@ -6,7 +6,7 @@ import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../Utils/QueryUtils";
+import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";

src/Common/ThemeUtility.ts

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

src/Common/Tooltip/index.tsx

@@ -1,24 +0,0 @@
-import { useId } from "@uifabric/react-hooks";
-import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
-import * as React from "react";
-import InfoBubble from "../../../images/info-bubble.svg";
-
-const calloutProps = { gapSpace: 0 };
-const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
-
-export interface TooltipProps {
-  children: string;
-}
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
-  const tooltipId = useId("tooltip");
-
-  return children ? (
-    <span>
-      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <img className="infoImg" src={InfoBubble} alt="More information" />
-      </TooltipHost>
-    </span>
-  ) : (
-    <></>
-  );
-};

src/Common/Upload/index.tsx

@@ -1,75 +0,0 @@
-import { Image, Stack, TextField } from "office-ui-fabric-react";
-import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
-import FolderIcon from "../../../images/folder_16x16.svg";
-import * as Constants from "../../Common/Constants";
-import { Tooltip } from "../Tooltip";
-
-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>{tooltip}</Tooltip>
-      <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,12 +1,5 @@
-interface Result {
+export default class UrlUtility {
-  type?: string;
+  public static parseDocumentsPath(resourcePath: string): any {
-  objectBody?: {
-    id: string;
-    self: string;
-  };
-}
-
-export function parseDocumentsPath(resourcePath: string): Result {
     if (typeof resourcePath !== "string") {
       return {};
     }
@@ -23,9 +16,9 @@ export function parseDocumentsPath(resourcePath: string): Result {
       resourcePath = "/" + resourcePath;
     }
 
-  let id: string;
+    var id: string;
-  let type: string;
+    var type: string;
-  const pathParts = resourcePath.split("/");
+    var pathParts = resourcePath.split("/");
 
     if (pathParts.length % 2 === 0) {
       id = pathParts[pathParts.length - 2];
@@ -35,7 +28,7 @@ export function parseDocumentsPath(resourcePath: string): Result {
       type = pathParts[pathParts.length - 2];
     }
 
-  const result = {
+    var result = {
       type: type,
       objectBody: {
         id: id,
@@ -46,16 +39,17 @@ export function parseDocumentsPath(resourcePath: string): Result {
     return result;
   }
 
-export function createUri(baseUri: string, relativeUri: string): string {
+  public static createUri(baseUri: string, relativeUri: string): string {
     if (!baseUri) {
       throw new Error("baseUri is null or empty");
     }
 
-  const slashAtEndOfUriRegex = /\/$/,
+    var slashAtEndOfUriRegex = /\/$/,
       slashAtStartOfUriRegEx = /^\//;
 
-  const normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
+    var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
       normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
 
     return normalizedBaseUri + normalizedRelativeUri;
   }
+}

src/Contracts/DataModels.ts

@@ -9,10 +9,10 @@ export interface DatabaseAccount {
 }
 
 export interface DatabaseAccountExtendedProperties {
-  documentEndpoint?: string;
+  documentEndpoint: string;
-  tableEndpoint?: string;
+  tableEndpoint: string;
-  gremlinEndpoint?: string;
+  gremlinEndpoint: string;
-  cassandraEndpoint?: string;
+  cassandraEndpoint: string;
   configurationOverrides?: ConfigurationOverrides;
   capabilities?: Capability[];
   enableMultipleWriteLocations?: boolean;

src/Contracts/SelfServeContracts.ts

@@ -1,9 +0,0 @@
-/**
- * Messaging types used with SelfServe Component <-> Portal communication
- * and Hosted <-> SelfServe Component communication
- */
-
-export enum SelfServeMessageTypes {
-  TelemetryInfo = "TelemetryInfo",
-  Notification = "Notification",
-}

src/Contracts/ViewModels.ts

@@ -88,6 +88,7 @@ export interface Database extends TreeNode {
   loadCollections(): Promise<void>;
   findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
+  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
   getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
@@ -375,6 +376,7 @@ export interface DataExplorerInputsFrame {
   masterKey?: string;
   hasWriteAccess?: boolean;
   authorizationToken?: string;
+  features: { [key: string]: string };
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;
@@ -388,18 +390,10 @@ export interface DataExplorerInputsFrame {
   sharedThroughputMaximum?: number;
   sharedThroughputDefault?: number;
   dataExplorerVersion?: string;
+  isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
-}
+  selfServeType?: SelfServeType;
-
-export interface SelfServeFrameInputs {
-  selfServeType: SelfServeType;
-  databaseAccount: any;
-  subscriptionId: string;
-  resourceGroup: string;
-  authorizationToken: string;
-  csmEndpoint: string;
-  flights?: readonly string[];
 }
 
 export interface CollectionCreationDefaults {

src/Controls/Heatmap/Heatmap.ts

@@ -1,10 +1,5 @@
-import dayjs from "dayjs";
 import * as Plotly from "plotly.js-cartesian-dist-min";
-import { StyleConstants } from "../../Common/Constants";
+import dayjs from "dayjs";
-import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import "./Heatmap.less";
 import {
   ChartSettings,
   DataPayload,
@@ -16,6 +11,11 @@ import {
   PartitionTimeStampToData,
   PortalTheme,
 } from "./HeatmapDatatypes";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { StyleConstants } from "../../Common/Constants";
+import "./Heatmap.less";
 
 export class Heatmap {
   public static readonly elementId: string = "heatmap";
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }
 
 window.addEventListener("message", handleMessage, false);
-sendReadyMessage();
+sendMessage("ready");

src/Explorer/ComponentRegisterer.test.ts

@@ -77,6 +77,10 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
   });
 
+  it("should register delete-database-confirmation-pane component", () => {
+    expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
+  });
+
   it("should register save-query-pane component", () => {
     expect(ko.components.isRegistered("save-query-pane")).toBe(true);
   });
@@ -93,6 +97,10 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
   });
 
+  it("should register upload-file-pane component", () => {
+    expect(ko.components.isRegistered("upload-file-pane")).toBe(true);
+  });
+
   it("should register string-input-pane component", () => {
     expect(ko.components.isRegistered("string-input-pane")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -1,30 +1,16 @@
 import * as ko from "knockout";
+import * as PaneComponents from "./Panes/PaneComponents";
+import * as TabComponents from "./Tabs/TabComponents";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { ErrorDisplayComponent } from "./Controls/ErrorDisplayComponent/ErrorDisplayComponent";
+import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
-import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
-import * as PaneComponents from "./Panes/PaneComponents";
+import { TabsManagerKOComponent } from "./Tabs/TabsManager";
-import ConflictsTab from "./Tabs/ConflictsTab";
+import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
-import DocumentsTab from "./Tabs/DocumentsTab";
-import GalleryTab from "./Tabs/GalleryTab";
-import GraphTab from "./Tabs/GraphTab";
-import MongoShellTab from "./Tabs/MongoShellTab";
-import NotebookTabV2 from "./Tabs/NotebookV2Tab";
-import NotebookViewerTab from "./Tabs/NotebookViewerTab";
-import QueryTab from "./Tabs/QueryTab";
-import QueryTablesTab from "./Tabs/QueryTablesTab";
-import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
-import StoredProcedureTab from "./Tabs/StoredProcedureTab";
-import TabsManagerTemplate from "./Tabs/TabsManager.html";
-import TerminalTab from "./Tabs/TerminalTab";
-import TriggerTab from "./Tabs/TriggerTab";
-import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
 
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
@@ -35,27 +21,28 @@ ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-ko.components.register("tabs-manager", { template: TabsManagerTemplate });
+ko.components.register("tabs-manager", TabsManagerKOComponent());
 
 // Collection Tabs
-[
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
-  DocumentsTab,
+ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
-  StoredProcedureTab,
+ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
-  TriggerTab,
+ko.components.register("trigger-tab", new TabComponents.TriggerTab());
-  UserDefinedFunctionTab,
+ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
-  SettingsTabV2,
+ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
-  QueryTab,
+ko.components.register("query-tab", new TabComponents.QueryTab());
-  QueryTablesTab,
+ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
-  GraphTab,
+ko.components.register("graph-tab", new TabComponents.GraphTab());
-  MongoShellTab,
+ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
-  ConflictsTab,
+ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
-  NotebookTabV2,
+ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
-  TerminalTab,
+ko.components.register("terminal-tab", new TabComponents.TerminalTab());
-  GalleryTab,
+ko.components.register("gallery-tab", new TabComponents.GalleryTab());
-  NotebookViewerTab,
+ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
-  DatabaseSettingsTab,
+
-  DatabaseSettingsTabV2,
+// Database Tabs
-].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
+ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
@@ -64,7 +51,10 @@ ko.components.register(
   "delete-collection-confirmation-pane",
   new PaneComponents.DeleteCollectionConfirmationPaneComponent()
 );
-
+ko.components.register(
+  "delete-database-confirmation-pane",
+  new PaneComponents.DeleteDatabaseConfirmationPaneComponent()
+);
 ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
 ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
@@ -72,9 +62,13 @@ ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEnt
 ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
 ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
+ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
+ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
+ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
 ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
 ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
 ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
+ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComponent());
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
 ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

@@ -1,22 +1,23 @@
+import * as ko from "knockout";
+import * as ViewModels from "../Contracts/ViewModels";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import AddCollectionIcon from "../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
 import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
 import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
 import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
-import * as ViewModels from "../Contracts/ViewModels";
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
-import { userContext } from "../UserContext";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { userContext } from "../UserContext";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -42,7 +43,7 @@ export class ResourceTreeContextMenuButtonFactory {
     if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
       items.push({
         iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.openDeleteDatabaseConfirmationPane(),
+        onClick: () => container.deleteDatabaseConfirmationPane.open(),
         label: container.deleteDatabaseText(),
         styleClass: "deleteDatabaseMenuItem",
       });

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx

@@ -6,7 +6,6 @@ describe("CollapsibleSectionComponent", () => {
   it("renders", () => {
     const props: CollapsibleSectionProps = {
       title: "Sample title",
-      isExpandedByDefault: true,
     };
 
     const wrapper = shallow(<CollapsibleSectionComponent {...props} />);

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,10 +1,9 @@
 import { Icon, Label, Stack } from "office-ui-fabric-react";
 import * as React from "react";
-import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
+import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";
 
 export interface CollapsibleSectionProps {
   title: string;
-  isExpandedByDefault: boolean;
 }
 
 export interface CollapsibleSectionState {
@@ -15,7 +14,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
   constructor(props: CollapsibleSectionProps) {
     super(props);
     this.state = {
-      isExpanded: this.props.isExpandedByDefault,
+      isExpanded: true,
     };
   }
 
@@ -26,14 +25,8 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
   public render(): JSX.Element {
     return (
       <>
-        <Stack
+        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
-          className="collapsibleSection"
+          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
-          horizontal
-          verticalAlign="center"
-          tokens={accordionStackTokens}
-          onClick={this.toggleCollapsed}
-        >
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>
         </Stack>
         {this.state.isExpanded && this.props.children}

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -11,10 +11,16 @@ exports[`CollapsibleSectionComponent renders 1`] = `
         "childrenGap": 10,
       }
     }
-    verticalAlign="center"
   >
-    <Icon
+    <StyledIconBase
       iconName="ChevronDown"
+      styles={
+        Object {
+          "root": Object {
+            "paddingTop": 7,
+          },
+        }
+      }
     />
     <StyledLabelBase>
       Sample title

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,4 +1,4 @@
-import * as StringUtils from "../../../Utils/StringUtils";
+import { StringUtils } from "../../../Utils/StringUtils";
 import { KeyCodes } from "../../../Common/Constants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";

src/Explorer/Controls/Directory/__snapshots__/DirectoryListComponent.test.tsx.snap

@@ -350,11 +350,12 @@ exports[`test render renders with filters 1`] = `
       }
     >
       <div
-        className="ms-ScrollablePane root-72"
+        className="ms-ScrollablePane root-40"
         data-is-scrollable="true"
       >
         <div
-          className="stickyAbove-74"
+          aria-hidden="true"
+          className="stickyAbove-42"
           style={
             Object {
               "height": 0,
@@ -365,7 +366,7 @@ exports[`test render renders with filters 1`] = `
           }
         />
         <div
-          className="ms-ScrollablePane--contentContainer contentContainer-73"
+          className="ms-ScrollablePane--contentContainer contentContainer-41"
           data-is-scrollable={true}
         >
           <Sticky
@@ -374,6 +375,7 @@ exports[`test render renders with filters 1`] = `
           >
             <div>
               <div
+                aria-hidden={true}
                 style={
                   Object {
                     "pointerEvents": "none",
@@ -393,6 +395,7 @@ exports[`test render renders with filters 1`] = `
                 style={Object {}}
               >
                 <div
+                  aria-hidden={false}
                   style={
                     Object {
                       "backgroundColor": "",
@@ -408,7 +411,6 @@ exports[`test render renders with filters 1`] = `
                   >
                     <TextFieldBase
                       ariaLabel="Directory filter text box"
-                      canRevealPassword={false}
                       className="directoryListFilterTextBox"
                       deferredValidationTime={200}
                       onChange={[Function]}
@@ -691,18 +693,18 @@ exports[`test render renders with filters 1`] = `
                       validateOnLoad={true}
                     >
                       <div
-                        className="ms-TextField directoryListFilterTextBox root-78"
+                        className="ms-TextField directoryListFilterTextBox root-46"
                       >
                         <div
                           className="ms-TextField-wrapper"
                         >
                           <div
-                            className="ms-TextField-fieldGroup fieldGroup-79"
+                            className="ms-TextField-fieldGroup fieldGroup-47"
                           >
                             <input
                               aria-invalid={false}
                               aria-label="Directory filter text box"
-                              className="ms-TextField-field field-80"
+                              className="ms-TextField-field field-48"
                               id="TextField0"
                               onBlur={[Function]}
                               onChange={[Function]}
@@ -1121,7 +1123,7 @@ exports[`test render renders with filters 1`] = `
                               "iconDisabled": Object {
                                 "color": "#a19f9d",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1147,7 +1149,7 @@ exports[`test render renders with filters 1`] = `
                               "menuIconDisabled": Object {
                                 "color": "#a19f9d",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                     "color": "GrayText",
                                   },
                                 },
@@ -1166,7 +1168,7 @@ exports[`test render renders with filters 1`] = `
                                       "position": "absolute",
                                       "right": 2,
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "bottom": -2,
                                           "left": -2,
                                           "outlineColor": "ButtonText",
@@ -1245,7 +1247,7 @@ exports[`test render renders with filters 1`] = `
                                       "position": "absolute",
                                       "right": 2,
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "bottom": -2,
                                           "left": -2,
                                           "outlineColor": "ButtonText",
@@ -1277,10 +1279,8 @@ exports[`test render renders with filters 1`] = `
                                   },
                                 },
                                 Object {
-                                  "backgroundColor": "#f3f2f1",
-                                  "color": "#a19f9d",
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                       "backgroundColor": "Window",
                                       "borderColor": "GrayText",
                                       "color": "GrayText",
@@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
                                   "backgroundColor": "#f3f2f1",
                                   "color": "#201f1e",
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                       "borderColor": "Highlight",
                                       "color": "Highlight",
                                     },
@@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
                               "splitButtonContainer": Array [
                                 Object {
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                       "border": "none",
                                     },
                                   },
@@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
                                       "position": "absolute",
                                       "right": 3,
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "border": "none",
                                           "bottom": -2,
                                           "left": -2,
@@ -1373,20 +1373,19 @@ exports[`test render renders with filters 1`] = `
                                       "borderBottomRightRadius": "0",
                                       "borderTopRightRadius": "0",
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "MsHighContrastAdjust": "none",
                                           "backgroundColor": "Window",
                                           "border": "1px solid WindowText",
                                           "borderRightWidth": "0",
                                           "color": "WindowText",
-                                          "forcedColorAdjust": "none",
                                         },
                                       },
                                     },
                                     ".ms-Button--primary + .ms-Button": Object {
                                       "border": "none",
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "border": "1px solid WindowText",
                                           "borderLeftWidth": "0",
                                         },
@@ -1399,11 +1398,10 @@ exports[`test render renders with filters 1`] = `
                                 "selectors": Object {
                                   ".ms-Button--primary": Object {
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                         "MsHighContrastAdjust": "none",
                                         "backgroundColor": "WindowText",
                                         "color": "Window",
-                                        "forcedColorAdjust": "none",
                                       },
                                     },
                                   },
@@ -1413,11 +1411,10 @@ exports[`test render renders with filters 1`] = `
                                 "selectors": Object {
                                   ".ms-Button--primary": Object {
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                         "MsHighContrastAdjust": "none",
                                         "backgroundColor": "WindowText",
                                         "color": "Window",
-                                        "forcedColorAdjust": "none",
                                       },
                                     },
                                   },
@@ -1427,11 +1424,12 @@ exports[`test render renders with filters 1`] = `
                                 "border": "none",
                                 "outline": "none",
                                 "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
-                                    "MsHighContrastAdjust": "none",
                                     "backgroundColor": "Window",
                                     "borderColor": "GrayText",
                                     "color": "GrayText",
+                                  },
+                                  "@media screen and (forced-colors: active)": Object {
                                     "forcedColorAdjust": "none",
                                   },
                                 },
@@ -1443,7 +1441,7 @@ exports[`test render renders with filters 1`] = `
                                 "selectors": Object {
                                   ".ms-Button--primary": Object {
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                         "backgroundColor": "Highlight",
                                         "color": "Window",
                                       },
@@ -1452,7 +1450,7 @@ exports[`test render renders with filters 1`] = `
                                   ".ms-Button.is-disabled": Object {
                                     "color": "#a19f9d",
                                     "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                         "backgroundColor": "Window",
                                         "borderColor": "GrayText",
                                         "color": "GrayText",
@@ -1468,7 +1466,7 @@ exports[`test render renders with filters 1`] = `
                                   "position": "absolute",
                                   "right": 31,
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                       "backgroundColor": "WindowText",
                                     },
                                   },
@@ -1480,7 +1478,7 @@ exports[`test render renders with filters 1`] = `
                                   "position": "absolute",
                                   "right": 31,
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                       "backgroundColor": "WindowText",
                                     },
                                   },
@@ -1497,7 +1495,7 @@ exports[`test render renders with filters 1`] = `
                                   "position": "absolute",
                                   "right": 31,
                                   "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                       "backgroundColor": "GrayText",
                                     },
                                   },
@@ -1520,7 +1518,7 @@ exports[`test render renders with filters 1`] = `
                                     ":hover": Object {
                                       "backgroundColor": "#edebe9",
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "color": "Highlight",
                                         },
                                       },
@@ -1528,11 +1526,6 @@ exports[`test render renders with filters 1`] = `
                                   },
                                 },
                                 Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    ".ms-Button-menuIcon": Object {
-                                      "color": "WindowText",
-                                    },
-                                  },
                                   "border": "1px solid #8a8886",
                                   "borderBottomRightRadius": "2px",
                                   "borderLeft": "none",
@@ -1578,7 +1571,7 @@ exports[`test render renders with filters 1`] = `
                                   "selectors": Object {
                                     ".ms-Button--primary": Object {
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "backgroundColor": "Window",
                                           "borderColor": "GrayText",
                                           "color": "GrayText",
@@ -1587,7 +1580,7 @@ exports[`test render renders with filters 1`] = `
                                     },
                                     ".ms-Button-menuIcon": Object {
                                       "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                           "color": "GrayText",
                                         },
                                       },
@@ -1595,7 +1588,7 @@ exports[`test render renders with filters 1`] = `
                                     ":hover": Object {
                                       "cursor": "default",
                                     },
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                       "backgroundColor": "Window",
                                       "border": "1px solid GrayText",
                                       "color": "GrayText",
@@ -1900,7 +1893,7 @@ exports[`test render renders with filters 1`] = `
                         >
                           <button
                             aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-89"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
                             data-is-focusable={false}
                             disabled={true}
                             onClick={[Function]}
@@ -1912,7 +1905,7 @@ exports[`test render renders with filters 1`] = `
                             type="button"
                           >
                             <span
-                              className="ms-Button-flexContainer flexContainer-90"
+                              className="ms-Button-flexContainer flexContainer-55"
                               data-automationid="splitbuttonprimary"
                             >
                               <div
@@ -1943,7 +1936,8 @@ exports[`test render renders with filters 1`] = `
           </List>
         </div>
         <div
-          className="stickyBelow-75"
+          aria-hidden="true"
+          className="stickyBelow-43"
           style={
             Object {
               "bottom": "0px",
@@ -1954,7 +1948,7 @@ exports[`test render renders with filters 1`] = `
           }
         >
           <div
-            className="stickyBelowItems-76"
+            className="stickyBelowItems-44"
           />
         </div>
       </div>

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -7,7 +7,7 @@ import { ChildrenMargin } from "./GitHubStyleConstants";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import { IGitHubRepo } from "../../../GitHub/GitHubClient";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as UrlUtility from "../../../Common/UrlUtility";
+import UrlUtility from "../../../Common/UrlUtility";
 import Explorer from "../../Explorer";
 
 export interface AddRepoComponentProps {
@@ -74,6 +74,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
 
   private onAddRepoButtonClick = async (): Promise<void> => {
     const startKey: number = TelemetryProcessor.traceStart(Action.NotebooksGitHubManualRepoAdd, {
+      databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+      defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Notebook,
     });
     let enteredUrl = this.state.textFieldValue;
@@ -103,6 +105,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
         TelemetryProcessor.traceSuccess(
           Action.NotebooksGitHubManualRepoAdd,
           {
+            databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+            defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
           },
           startKey
@@ -117,6 +121,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
     TelemetryProcessor.traceFailure(
       Action.NotebooksGitHubManualRepoAdd,
       {
+        databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+        defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Notebook,
         error: AddRepoComponent.TextFieldErrorMessage,
       },

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import * as StringUtils from "../../../Utils/StringUtils";
+import { StringUtils } from "../../../Utils/StringUtils";
 import { userContext } from "../../../UserContext";
 import { TerminalQueryParams } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -13,12 +13,10 @@ import {
   LinkBase,
   Separator,
   TooltipHost,
-  Spinner,
-  SpinnerSize,
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 
 export interface GalleryCardComponentProps {
@@ -31,14 +29,10 @@ export interface GalleryCardComponentProps {
   onFavoriteClick: () => void;
   onUnfavoriteClick: () => void;
   onDownloadClick: () => void;
-  onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) => void;
+  onDeleteClick: () => void;
 }
 
-interface GalleryCardComponentState {
+export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
-  isDeletingPublishedNotebook: boolean;
-}
-
-export class GalleryCardComponent extends React.Component<GalleryCardComponentProps, GalleryCardComponentState> {
   public static readonly CARD_WIDTH = 256;
   private static readonly cardImageHeight = 144;
   public static readonly cardHeightToWidthRatio =
@@ -46,15 +40,6 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
   private static readonly cardDescriptionMaxChars = 80;
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;
-  private static readonly cardDeleteSpinnerHeight = 360;
-  private static readonly smallTextLineHeight = 18;
-
-  constructor(props: GalleryCardComponentProps) {
-    super(props);
-    this.state = {
-      isDeletingPublishedNotebook: false,
-    };
-  }
 
   public render(): JSX.Element {
     const cardButtonsVisible = this.props.isFavorite !== undefined || this.props.showDownload || this.props.showDelete;
@@ -74,17 +59,6 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
         tokens={{ width: GalleryCardComponent.CARD_WIDTH, childrenGap: 0 }}
         onClick={(event) => this.onClick(event, this.props.onClick)}
       >
-        {this.state.isDeletingPublishedNotebook && (
-          <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
-            <Spinner
-              size={SpinnerSize.large}
-              label={`Deleting '${cardTitle}'`}
-              styles={{ root: { height: GalleryCardComponent.cardDeleteSpinnerHeight } }}
-            />
-          </Card.Item>
-        )}
-        {!this.state.isDeletingPublishedNotebook && (
-          <>
         <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
           <Persona
             imageUrl={this.props.data.isSample && CosmosDBLogo}
@@ -104,7 +78,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
         </Card.Item>
 
         <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
+          <Text variant="small" nowrap>
             {this.props.data.tags ? (
               this.props.data.tags.map((tag, index, array) => (
                 <span key={tag}>
@@ -130,13 +104,12 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
             {cardTitle}
           </Text>
 
-              <Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
+          <Text variant="small" styles={{ root: { height: 36 } }}>
             {this.renderTruncatedDescription()}
           </Text>
 
           <span>
-                {this.props.data.views !== undefined &&
+            {this.props.data.views !== undefined && this.generateIconText("RedEye", this.props.data.views.toString())}
-                  this.generateIconText("RedEye", this.props.data.views.toString())}
             {this.props.data.downloads !== undefined &&
               this.generateIconText("Download", this.props.data.downloads.toString())}
             {this.props.data.favorites !== undefined &&
@@ -168,17 +141,10 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
                 this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
 
               {this.props.showDelete &&
-                    this.generateIconButtonWithTooltip("Delete", "Remove", "right", () =>
+                this.generateIconButtonWithTooltip("Delete", "Remove", "right", this.props.onDeleteClick)}
-                      this.props.onDeleteClick(
-                        () => this.setState({ isDeletingPublishedNotebook: true }),
-                        () => this.setState({ isDeletingPublishedNotebook: false })
-                      )
-                    )}
             </span>
           </Card.Section>
         )}
-          </>
-        )}
       </Card>
     );
   }

src/Explorer/Controls/NotebookGallery/Cards/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -50,13 +50,6 @@ exports[`GalleryCardComponent renders 1`] = `
   >
     <Text
       nowrap={true}
-      styles={
-        Object {
-          "root": Object {
-            "height": 18,
-          },
-        }
-      }
       variant="small"
     >
       <span
@@ -107,7 +100,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <Icon
+        <StyledIconBase
           iconName="RedEye"
           styles={
             Object {
@@ -131,7 +124,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <Icon
+        <StyledIconBase
           iconName="Download"
           styles={
             Object {
@@ -155,7 +148,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <Icon
+        <StyledIconBase
           iconName="Heart"
           styles={
             Object {
@@ -180,7 +173,7 @@ exports[`GalleryCardComponent renders 1`] = `
       }
     }
   >
-    <Separator
+    <Styled
       styles={
         Object {
           "root": Object {

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -44,7 +44,7 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
         throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
       }
 
-      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, {}, startKey);
+      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, startKey);
 
       this.props.onAcceptCodeOfConduct(response.data);
     } catch (error) {

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less

@@ -11,7 +11,7 @@
 
 .publicGalleryTabContainer {
   position: relative;
-  min-height: 100vh;
+  height: 100vh;
 }
 
 .publicGalleryTabOverlayContent {

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -47,8 +47,8 @@ export interface GalleryViewerComponentProps {
 }
 
 export enum GalleryTab {
-  PublicGallery,
   OfficialSamples,
+  PublicGallery,
   Favorites,
   Published,
 }
@@ -151,19 +151,18 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   public render(): JSX.Element {
     this.traceViewGallery();
 
-    const tabs: GalleryTabInfo[] = [
+    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
+
+    tabs.push(
       this.createPublicGalleryTab(
         GalleryTab.PublicGallery,
         this.state.publicNotebooks,
         this.state.isCodeOfConductAccepted
-      ),
+      )
-      this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks),
+    );
-    ];
 
-    if (this.props.container) {
     tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
     tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
-    }
 
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
@@ -200,13 +199,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
 
     switch (this.state.selectedTab) {
-      case GalleryTab.PublicGallery:
-        if (!this.viewPublicGalleryTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewPublicGalleryTraced = true;
-          trace(Action.NotebooksGalleryViewPublicGallery);
-        }
-        break;
       case GalleryTab.OfficialSamples:
         if (!this.viewOfficialSamplesTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -214,6 +206,13 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           trace(Action.NotebooksGalleryViewOfficialSamples);
         }
         break;
+      case GalleryTab.PublicGallery:
+        if (!this.viewPublicGalleryTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewPublicGalleryTraced = true;
+          trace(Action.NotebooksGalleryViewPublicGallery);
+        }
+        break;
       case GalleryTab.Favorites:
         if (!this.viewFavoritesTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -388,7 +387,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createSearchBarHeader(content: JSX.Element): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
-        <Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
+        <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
           <Stack.Item grow>
             <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
           </Stack.Item>
@@ -443,14 +442,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
     switch (tab) {
-      case GalleryTab.PublicGallery:
-        this.loadPublicNotebooks(searchText, sortBy, offline);
-        break;
-
       case GalleryTab.OfficialSamples:
         this.loadSampleNotebooks(searchText, sortBy, offline);
         break;
 
+      case GalleryTab.PublicGallery:
+        this.loadPublicNotebooks(searchText, sortBy, offline);
+        break;
+
       case GalleryTab.Favorites:
         this.loadFavoriteNotebooks(searchText, sortBy, offline);
         break;
@@ -665,8 +664,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       onFavoriteClick: () => this.favoriteItem(data),
       onUnfavoriteClick: () => this.unfavoriteItem(data),
       onDownloadClick: () => this.downloadItem(data),
-      onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) =>
+      onDeleteClick: () => this.deleteItem(data),
-        this.deleteItem(data, beforeDelete, afterDelete),
     };
 
     return (
@@ -710,18 +708,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   };
 
-  private deleteItem = async (data: IGalleryItem, beforeDelete: () => void, afterDelete: () => void): Promise<void> => {
+  private deleteItem = async (data: IGalleryItem): Promise<void> => {
-    GalleryUtils.deleteItem(
+    GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, (item) => {
-      this.props.container,
-      this.props.junoClient,
-      data,
-      (item) => {
       this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
       this.refreshSelectedTab(item);
-      },
+    });
-      beforeDelete,
-      afterDelete
-    );
   };
 
   private onPivotChange = (item: PivotItem): void => {

src/Explorer/Controls/NotebookGallery/InfoComponent/__snapshots__/InfoComponent.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
   <div
     className="infoPanelMain"
   >
-    <Icon
+    <StyledIconBase
       className="infoIconMain"
       iconName="Help"
       styles={

src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap

@@ -8,6 +8,90 @@ exports[`GalleryViewerComponent renders 1`] = `
     onLinkClick={[Function]}
     selectedKey="OfficialSamples"
   >
+    <PivotItem
+      headerText="Official samples"
+      itemKey="OfficialSamples"
+      key="OfficialSamples"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <Stack
+        tokens={
+          Object {
+            "childrenGap": 10,
+          }
+        }
+      >
+        <Stack
+          horizontal={true}
+          tokens={
+            Object {
+              "childrenGap": 20,
+              "padding": 10,
+            }
+          }
+        >
+          <StackItem
+            grow={true}
+          >
+            <StyledSearchBoxBase
+              onChange={[Function]}
+              placeholder="Search"
+            />
+          </StackItem>
+          <StackItem>
+            <StyledLabelBase>
+              Sort by
+            </StyledLabelBase>
+          </StackItem>
+          <StackItem
+            styles={
+              Object {
+                "root": Object {
+                  "minWidth": 200,
+                },
+              }
+            }
+          >
+            <StyledWithResponsiveMode
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": 0,
+                    "text": "Most viewed",
+                  },
+                  Object {
+                    "key": 1,
+                    "text": "Most downloaded",
+                  },
+                  Object {
+                    "key": 3,
+                    "text": "Most recent",
+                  },
+                  Object {
+                    "key": 2,
+                    "text": "Most favorited",
+                  },
+                ]
+              }
+              selectedKey={0}
+            />
+          </StackItem>
+          <StackItem>
+            <InfoComponent />
+          </StackItem>
+        </Stack>
+        <StackItem>
+          <StyledSpinnerBase
+            size={3}
+          />
+        </StackItem>
+      </Stack>
+    </PivotItem>
     <PivotItem
       headerText="Public gallery"
       itemKey="PublicGallery"
@@ -36,7 +120,6 @@ exports[`GalleryViewerComponent renders 1`] = `
                 "padding": 10,
               }
             }
-            wrap={true}
           >
             <StackItem
               grow={true}
@@ -98,89 +181,32 @@ exports[`GalleryViewerComponent renders 1`] = `
       </div>
     </PivotItem>
     <PivotItem
-      headerText="Official samples"
+      headerText="My favorites"
-      itemKey="OfficialSamples"
+      itemKey="Favorites"
-      key="OfficialSamples"
+      key="Favorites"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <StyledSpinnerBase
+        size={3}
+      />
+    </PivotItem>
+    <PivotItem
+      headerText="My published work"
+      itemKey="Published"
+      key="Published"
       style={
         Object {
           "marginTop": 20,
         }
       }
     >
-      <Stack
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
-        }
-      >
-        <Stack
-          horizontal={true}
-          tokens={
-            Object {
-              "childrenGap": 20,
-              "padding": 10,
-            }
-          }
-          wrap={true}
-        >
-          <StackItem
-            grow={true}
-          >
-            <StyledSearchBoxBase
-              onChange={[Function]}
-              placeholder="Search"
-            />
-          </StackItem>
-          <StackItem>
-            <StyledLabelBase>
-              Sort by
-            </StyledLabelBase>
-          </StackItem>
-          <StackItem
-            styles={
-              Object {
-                "root": Object {
-                  "minWidth": 200,
-                },
-              }
-            }
-          >
-            <StyledWithResponsiveMode
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": 0,
-                    "text": "Most viewed",
-                  },
-                  Object {
-                    "key": 1,
-                    "text": "Most downloaded",
-                  },
-                  Object {
-                    "key": 3,
-                    "text": "Most recent",
-                  },
-                  Object {
-                    "key": 2,
-                    "text": "Most favorited",
-                  },
-                ]
-              }
-              selectedKey={0}
-            />
-          </StackItem>
-          <StackItem>
-            <InfoComponent />
-          </StackItem>
-        </Stack>
-        <StackItem>
       <StyledSpinnerBase
         size={3}
       />
-        </StackItem>
-      </Stack>
     </PivotItem>
   </StyledPivotBase>
 </div>

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -15,6 +15,7 @@ import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 import Explorer from "../../Explorer";
+import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 import { DialogHost } from "../../../Utils/GalleryUtils";
 import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
@@ -102,7 +103,7 @@ export class NotebookViewerComponent
       );
 
       const notebook: Notebook = await response.json();
-      GalleryUtils.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
+      this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
       this.notebookComponentBootstrapper.setContent("json", notebook);
       this.setState({ content: notebook, showProgressBar: false });
 
@@ -132,6 +133,17 @@ export class NotebookViewerComponent
     }
   }
 
+  private removeNotebookViewerLink = (notebook: Notebook, newCellId: string): void => {
+    if (!newCellId) {
+      return;
+    }
+    const notebookV4 = notebook as NotebookV4;
+    if (notebookV4 && notebookV4.cells[0].source[0].search(newCellId)) {
+      delete notebookV4.cells[0];
+      notebook = notebookV4;
+    }
+  };
+
   public render(): JSX.Element {
     return (
       <div className="notebookViewerContainer">

src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap

@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
       Invalid Date
     </Text>
     <Text>
-      <Icon
+      <StyledIconBase
         iconName="RedEye"
       />
        
       0
     </Text>
     <Text>
-      <Icon
+      <StyledIconBase
         iconName="Download"
       />
       0
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
       Invalid Date
     </Text>
     <Text>
-      <Icon
+      <StyledIconBase
         iconName="RedEye"
       />
        
       0
     </Text>
     <Text>
-      <Icon
+      <StyledIconBase
         iconName="Download"
       />
       0

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -221,6 +221,8 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                     if (window.confirm("Are you sure you want to delete this query?")) {
                       const container = window.dataExplorer;
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
+                        databaseAccountName: container && container.databaseAccount().name,
+                        defaultExperience: container && container.defaultExperience(),
                         dataExplorerArea: Constants.Areas.ContextualPane,
                         paneTitle: container && container.browseQueriesPane.title(),
                       });
@@ -229,6 +231,8 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                         TelemetryProcessor.traceSuccess(
                           Action.DeleteSavedQuery,
                           {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
                             dataExplorerArea: Constants.Areas.ContextualPane,
                             paneTitle: container && container.browseQueriesPane.title(),
                           },
@@ -238,6 +242,8 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                         TelemetryProcessor.traceFailure(
                           Action.DeleteSavedQuery,
                           {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
                             dataExplorerArea: Constants.Areas.ContextualPane,
                             paneTitle: container && container.browseQueriesPane.title(),
                             error: getErrorMessage(error),

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -1,19 +1,17 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import Explorer from "../../Explorer";
 import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
-import { isDirty, TtlType } from "./SettingsUtils";
 import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import ko from "knockout";
+import { TtlType, isDirty } from "./SettingsUtils";
+import Explorer from "../../Explorer";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -31,6 +29,8 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     analyticalStorageTtl: undefined,
   } as MongoDBCollectionResource),
 }));
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -134,6 +134,7 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
+      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,51 +1,49 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
-import DiscardIcon from "../../../../images/discard.svg";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import SaveIcon from "../../../../images/save-cosmos.svg";
-import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
-import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
-import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import DiscardIcon from "../../../../images/discard.svg";
+import SaveIcon from "../../../../images/save-cosmos.svg";
+import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
-import {
+import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
-  ConflictResolutionComponent,
-  ConflictResolutionComponentProps,
-} from "./SettingsSubComponents/ConflictResolutionComponent";
-import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
 import {
   MongoIndexingPolicyComponent,
   MongoIndexingPolicyComponentProps,
 } from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
-import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
-import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
 import {
-  AddMongoIndexProps,
-  ChangeFeedPolicyState,
-  GeospatialConfigType,
-  getMongoNotification,
-  getTabTitle,
   hasDatabaseSharedThroughput,
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  SettingsV2TabTypes,
+  getTabTitle,
   isDirty,
+  AddMongoIndexProps,
   MongoIndexTypes,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
+  getMongoNotification,
-  TtlType,
 } from "./SettingsUtils";
+import {
+  ConflictResolutionComponent,
+  ConflictResolutionComponentProps,
+} from "./SettingsSubComponents/ConflictResolutionComponent";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
+import { Pivot, PivotItem, IPivotProps, IPivotItemProps } from "office-ui-fabric-react";
+import "./SettingsComponent.less";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
+import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -139,7 +137,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowIndexingPolicyEditor =
         this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
 
-      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );
 
       // Mongo container with system partition key still treat as "Fixed"
       this.isFixedContainer =
@@ -316,6 +316,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
 
     this.props.settingsTab.isExecuting(true);
     const startKey: number = traceStart(Action.SettingsV2Updated, {
+      databaseAccountName: this.container.databaseAccount()?.name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.props.settingsTab.tabTitle(),
     });
@@ -325,14 +327,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         ? this.saveCollectionSettings(startKey)
         : this.saveDatabaseSettings(startKey));
     } catch (error) {
+      this.container.isRefreshingExplorer(false);
       this.props.settingsTab.isExecutionError(true);
       console.error(error);
       traceFailure(
         Action.SettingsV2Updated,
         {
+          databaseAccountName: this.container.databaseAccount()?.name,
           databaseName: this.collection?.databaseId,
           collectionName: this.collection?.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.props.settingsTab.tabTitle(),
           error: getErrorMessage(error),
@@ -405,9 +409,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       traceSuccess(
         Action.Tab,
         {
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.collection.databaseId,
           collectionName: this.collection.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.props.settingsTab.tabTitle(),
         },
@@ -698,13 +703,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
+    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
       Action.SettingsV2Updated,
       {
+        databaseAccountName: this.container.databaseAccount()?.name,
         databaseName: this.database.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: this.props.settingsTab.tabTitle(),
       },
@@ -803,9 +810,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         traceSuccess(
           Action.MongoIndexUpdated,
           {
+            databaseAccountName: this.container.databaseAccount()?.name,
             databaseName: this.collection?.databaseId,
             collectionName: this.collection?.id(),
-
+            defaultExperience: this.container.defaultExperience(),
             dataExplorerArea: Constants.Areas.Tab,
             tabTitle: this.props.settingsTab.tabTitle(),
           },
@@ -815,9 +823,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         traceFailure(
           Action.MongoIndexUpdated,
           {
+            databaseAccountName: this.container.databaseAccount()?.name,
             databaseName: this.collection?.databaseId,
             collectionName: this.collection?.id(),
-
+            defaultExperience: this.container.defaultExperience(),
             dataExplorerArea: Constants.Areas.Tab,
             tabTitle: this.props.settingsTab.tabTitle(),
             error: getErrorMessage(error),
@@ -860,13 +869,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         });
       }
     }
+    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
       Action.SettingsV2Updated,
       {
+        databaseAccountName: this.container.databaseAccount()?.name,
         databaseName: this.collection?.databaseId,
         collectionName: this.collection?.id(),
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: this.props.settingsTab.tabTitle(),
       },
@@ -874,18 +886,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     );
   };
 
-  public getMongoIndexTabContent = (
-    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
-  ): JSX.Element => {
-    if (userContext.authType === AuthType.AAD) {
-      if (this.container.isEnableMongoCapabilityPresent()) {
-        return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
-      }
-      return undefined;
-    }
-    return mongoIndexingPolicyAADError;
-  };
-
   public render(): JSX.Element {
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
@@ -1003,11 +1003,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
       });
     } else if (this.container.isPreferredApiMongoDB()) {
-      const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
+      if (this.container.isEnableMongoCapabilityPresent()) {
-      if (mongoIndexTabContext) {
         tabs.push({
           tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexTabContext,
+          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
+        });
+      } else {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: mongoIndexingPolicyAADError,
         });
       }
     }

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -23,6 +23,7 @@ import {
   ITextStyles,
   IDetailsRowStyles,
   IStackStyles,
+  IIconStyles,
   IDetailsListStyles,
   IDropdownStyles,
   ISeparatorStyles,
@@ -115,6 +116,8 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
   childrenGap: 20,
 };
 
+export const accordionIconStyles: IIconStyles = { root: { paddingTop: 7 } };
+
 export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
 
 export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -239,7 +239,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
 
     return (
       <Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
+        <CollapsibleSectionComponent title="Current index(es)">
           {
             <>
               <DetailsList
@@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
 
     return (
       <Stack styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
+        <CollapsibleSectionComponent title="Index(es) to be dropped">
           {indexesToBeDropped.length > 0 && (
             <DetailsList
               styles={customDetailsListStyles}

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -42,7 +42,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
     }
   >
     <CollapsibleSectionComponent
-      isExpandedByDefault={true}
       title="Current index(es)"
     >
       <StyledWithViewportComponent
@@ -115,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
       </Stack>
     </CollapsibleSectionComponent>
   </Stack>
-  <Separator
+  <Styled
     styles={
       Object {
         "root": Array [
@@ -140,7 +139,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
     }
   >
     <CollapsibleSectionComponent
-      isExpandedByDefault={true}
       title="Index(es) to be dropped"
     />
   </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -1,24 +1,23 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
-import { configContext, Platform } from "../../../../ConfigContext";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
-import * as DataModels from "../../../../Contracts/DataModels";
 import * as ViewModels from "../../../../Contracts/ViewModels";
+import * as DataModels from "../../../../Contracts/DataModels";
 import * as SharedConstants from "../../../../Shared/Constants";
-import { userContext } from "../../../../UserContext";
-import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import Explorer from "../../../Explorer";
 import {
   getTextFieldStyles,
+  subComponentStackProps,
+  titleAndInputStackProps,
+  throughputUnit,
   getThroughputApplyLongDelayMessage,
   getThroughputApplyShortDelayMessage,
-  subComponentStackProps,
-  throughputUnit,
-  titleAndInputStackProps,
   updateThroughputBeyondLimitWarningMessage,
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
-import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
+import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
+import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { configContext, Platform } from "../../../../ConfigContext";
 
 export interface ScaleComponentProps {
   collection: ViewModels.Collection;
@@ -80,7 +79,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public getMaxRUs = (): number => {
-    if (userContext.isTryCosmosDBSubscription) {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
       return Constants.TryCosmosExperience.maxRU;
     }
 
@@ -92,7 +91,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
   };
 
   public getMinRUs = (): number => {
-    if (userContext.isTryCosmosDBSubscription) {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
       return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
     }
 
@@ -173,6 +172,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
       databaseAccount={this.props.container.databaseAccount()}
       databaseName={this.databaseId}
       collectionName={this.collectionId}
+      serverId={this.props.container.serverId()}
       throughput={this.props.throughput}
       throughputBaseline={this.props.throughputBaseline}
       onThroughputChange={this.props.onThroughputChange}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx

@@ -1,16 +1,17 @@
 import { shallow } from "enzyme";
 import React from "react";
-import * as DataModels from "../../../../../Contracts/DataModels";
 import {
   ThroughputInputAutoPilotV3Component,
   ThroughputInputAutoPilotV3Props,
 } from "./ThroughputInputAutoPilotV3Component";
+import * as DataModels from "../../../../../Contracts/DataModels";
 
 describe("ThroughputInputAutoPilotV3Component", () => {
   const baseProps: ThroughputInputAutoPilotV3Props = {
     databaseAccount: {} as DataModels.DatabaseAccount,
     databaseName: "test",
     collectionName: "test",
+    serverId: undefined,
     wasAutopilotOriginallySet: false,
     throughput: 100,
     throughputBaseline: 100,

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -1,52 +1,55 @@
+import React from "react";
+import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import {
-  Checkbox,
+  getTextFieldStyles,
+  getToolTipContainer,
+  noLeftPaddingCheckBoxStyle,
+  titleAndInputStackProps,
+  checkBoxAndInputStackProps,
+  getChoiceGroupStyles,
+  messageBarStyles,
+  getEstimatedSpendingElement,
+  getAutoPilotV3SpendElement,
+  manualToAutoscaleDisclaimerElement,
+  saveThroughputWarningMessage,
+  ManualEstimatedSpendingDisplayProps,
+  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
+  transparentDetailsHeaderStyle,
+} from "../../SettingsRenderUtils";
+import {
+  Text,
+  TextField,
   ChoiceGroup,
-  FontIcon,
   IChoiceGroupOption,
-  IColumn,
+  Checkbox,
+  Stack,
   Label,
   Link,
   MessageBar,
-  Stack,
+  FontIcon,
-  Text,
+  IColumn,
-  TextField,
 } from "office-ui-fabric-react";
-import React from "react";
-import * as DataModels from "../../../../../Contracts/DataModels";
-import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import * as SharedConstants from "../../../../../Shared/Constants";
-import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../../../UserContext";
-import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
-import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
-import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
-import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import {
-  AutoscaleEstimatedSpendingDisplayProps,
-  checkBoxAndInputStackProps,
-  getAutoPilotV3SpendElement,
-  getChoiceGroupStyles,
-  getEstimatedSpendingElement,
-  getRuPriceBreakdown,
-  getTextFieldStyles,
-  getToolTipContainer,
-  ManualEstimatedSpendingDisplayProps,
-  manualToAutoscaleDisclaimerElement,
-  messageBarStyles,
-  noLeftPaddingCheckBoxStyle,
-  PriceBreakdown,
-  saveThroughputWarningMessage,
-  titleAndInputStackProps,
-  transparentDetailsHeaderStyle,
-} from "../../SettingsRenderUtils";
-import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import * as SharedConstants from "../../../../../Shared/Constants";
+import * as DataModels from "../../../../../Contracts/DataModels";
+import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
+import { userContext } from "../../../../../UserContext";
+import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
+import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
+import { Features } from "../../../../../Common/Constants";
+import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
+
+import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
 
 export interface ThroughputInputAutoPilotV3Props {
   databaseAccount: DataModels.DatabaseAccount;
   databaseName: string;
   collectionName: string;
+  serverId: string;
   throughput: number;
   throughputBaseline: number;
   onThroughputChange: (newThroughput: number) => void;
@@ -179,6 +182,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     }
 
     const isDirty: boolean = this.IsComponentDirty().isDiscardable;
+    const serverId: string = this.props.serverId;
     const regions = account?.properties?.readLocations?.length || 1;
     const multimaster = account?.properties?.enableMultipleWriteLocations || false;
 
@@ -188,7 +192,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       estimatedSpend = this.getEstimatedManualSpendElement(
         // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
         this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
-        userContext.portalEnv,
+        serverId,
         regions,
         multimaster,
         isDirty ? this.props.throughput : undefined
@@ -196,7 +200,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     } else {
       estimatedSpend = this.getEstimatedAutoscaleSpendElement(
         this.props.maxAutoPilotThroughputBaseline,
-        userContext.portalEnv,
+        serverId,
         regions,
         multimaster,
         isDirty ? this.props.maxAutoPilotThroughput : undefined
@@ -454,8 +458,11 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
       changedSelectedValueTo:
         option.key === "true" ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
+      subscriptionId: userContext.subscriptionId,
+      databaseAccountName: this.props.databaseAccount?.name,
       databaseName: this.props.databaseName,
       collectionName: this.props.collectionName,
+      apiKind: userContext.defaultExperience,
       dataExplorerArea: "Scale Tab V2",
     });
   };
@@ -464,7 +471,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
     const oneTBinKB = 1000000000;
     const minRUperGB = 10;
-    const featureFlagEnabled = userContext.features.showMinRUSurvey;
+    const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
     const collectionIsEligible =
       userContext.subscriptionType !== SubscriptionType.Internal &&
       this.props.usageSizeInKB > oneTBinKB &&

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ToolTipLabelComponent.test.tsx.snap

@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
         }
       }
     >
-      <Icon
+      <StyledIconBase
         ariaLabel="Info"
         iconName="Info"
         styles={

src/Explorer/Controls/Settings/SettingsUtils.test.tsx

@@ -1,23 +1,23 @@
-import ko from "knockout";
+import { collection } from "./TestUtils";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
 import {
   getMongoIndexType,
-  getMongoIndexTypeText,
   getMongoNotification,
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
-  isIndexTransforming,
   MongoIndexTypes,
   MongoNotificationType,
-  MongoWildcardPlaceHolder,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
+  MongoWildcardPlaceHolder,
+  getMongoIndexTypeText,
   SingleFieldText,
   WildcardText,
+  isIndexTransforming,
 } from "./SettingsUtils";
-import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import ko from "knockout";
 
 describe("SettingsUtils", () => {
   it("hasDatabaseSharedThroughput", () => {
@@ -42,6 +42,7 @@ describe("SettingsUtils", () => {
         loadCollections: undefined,
         findCollectionWithId: undefined,
         openAddCollection: undefined,
+        onDeleteDatabaseContextMenuClick: undefined,
         readSettings: undefined,
         onSettingsClick: undefined,
         loadOffer: undefined,

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -1,7 +1,7 @@
-import { shallow } from "enzyme";
 import React from "react";
-import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
+import { shallow } from "enzyme";
 import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
+import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
 
 describe("SmartUiComponent", () => {
   const exampleData: SmartUiDescriptor = {
@@ -18,12 +18,10 @@ describe("SmartUiComponent", () => {
         {
           id: "description",
           input: {
-            labelTKey: undefined,
             dataFieldName: "description",
             type: "string",
             description: {
               textTKey: "this is an example description text.",
-              type: DescriptionType.Text,
               link: {
                 href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
                 textTKey: "Click here for more information.",
@@ -97,9 +95,9 @@ describe("SmartUiComponent", () => {
             dataFieldName: "database",
             type: "object",
             choices: [
-              { labelTKey: "Database 1", key: "db1" },
+              { label: "Database 1", key: "db1" },
-              { labelTKey: "Database 2", key: "db2" },
+              { label: "Database 2", key: "db2" },
-              { labelTKey: "Database 3", key: "db3" },
+              { label: "Database 3", key: "db3" },
             ],
             defaultKey: "db2",
           },

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -1,26 +1,24 @@
-import { TFunction } from "i18next";
+import * as React from "react";
-import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { Slider } from "office-ui-fabric-react/lib/Slider";
 import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
-import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { Text } from "office-ui-fabric-react/lib/Text";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
-import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
+import { Text } from "office-ui-fabric-react/lib/Text";
-import * as React from "react";
+import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
+import { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+import * as InputUtils from "./InputUtils";
+import "./SmartUiComponent.less";
 import {
   ChoiceItem,
   Description,
-  DescriptionType,
   Info,
   InputType,
   InputTypeValue,
   NumberUiType,
   SmartUiInput,
 } from "../../../SelfServe/SelfServeTypes";
-import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
+import { TFunction } from "i18next";
-import * as InputUtils from "./InputUtils";
-import "./SmartUiComponent.less";
 
 /**
  * Generic UX renderer
@@ -31,14 +29,15 @@ import "./SmartUiComponent.less";
  */
 
 interface BaseDisplay {
-  labelTKey: string;
   dataFieldName: string;
   errorMessage?: string;
   type: InputTypeValue;
 }
 
 interface BaseInput extends BaseDisplay {
+  labelTKey: string;
   placeholderTKey?: string;
+  errorMessage?: string;
 }
 
 /**
@@ -68,8 +67,7 @@ interface ChoiceInput extends BaseInput {
 }
 
 interface DescriptionDisplay extends BaseDisplay {
-  description?: Description;
+  description: Description;
-  isDynamicDescription?: boolean;
 }
 
 type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
@@ -125,28 +123,25 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
   private renderInfo(info: Info): JSX.Element {
     return (
-      info && (
+      <MessageBar styles={{ root: { width: 400 } }}>
-        <Text>
+        {this.props.getTranslation(info.messageTKey)}
-          {this.props.getTranslation(info.messageTKey)}{" "}
         {info.link && (
           <Link href={info.link.href} target="_blank">
             {this.props.getTranslation(info.link.textTKey)}
           </Link>
         )}
-        </Text>
+      </MessageBar>
-      )
     );
   }
 
-  private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderTextInput(input: StringInput): JSX.Element {
     const value = this.props.currentValues.get(input.dataFieldName)?.value as string;
     const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
     return (
-      <Stack>
+      <div className="stringInputContainer">
-        {labelElement}
         <TextField
           id={`${input.dataFieldName}-textField-input`}
-          aria-labelledby={labelId}
+          label={this.props.getTranslation(input.labelTKey)}
           type="text"
           value={value || ""}
           placeholder={this.props.getTranslation(input.placeholderTKey)}
@@ -154,42 +149,32 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
           onChange={(_, newValue) => this.props.onInputChange(input, newValue)}
           styles={{
             root: { width: 400 },
+            subComponentStyles: {
+              label: {
+                root: {
+                  ...SmartUiComponent.labelStyle,
+                  fontWeight: 600,
+                },
+              },
+            },
           }}
         />
-      </Stack>
+      </div>
     );
   }
 
-  private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderDescription(input: DescriptionDisplay): JSX.Element {
-    const dataFieldName = input.dataFieldName;
+    const description = input.description;
-    const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
+    return (
-    if (!description) {
+      <Text id={`${input.dataFieldName}-text-display`}>
-      if (!input.isDynamicDescription) {
+        {this.props.getTranslation(input.description.textTKey)}{" "}
-        return this.renderError("Description is not provided.");
-      }
-      // If input is a dynamic description and description is not available, empty element is rendered
-      return <></>;
-    }
-    const descriptionElement = (
-      <Stack>
-        {labelElement}
-        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
-          {this.props.getTranslation(description.textTKey)}{" "}
         {description.link && (
-            <Link target="_blank" href={description.link.href}>
+          <Link target="_blank" href={input.description.link.href}>
-              {this.props.getTranslation(description.link.textTKey)}
+            {this.props.getTranslation(input.description.link.textTKey)}
           </Link>
         )}
       </Text>
-      </Stack>
     );
-
-    if (description.type === DescriptionType.Text) {
-      return descriptionElement;
-    }
-    const messageBarType =
-      description.type === DescriptionType.InfoMessageBar ? MessageBarType.info : MessageBarType.warning;
-    return <MessageBar messageBarType={messageBarType}>{descriptionElement}</MessageBar>;
   }
 
   private clearError(dataFieldName: string): void {
@@ -235,12 +220,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return undefined;
   };
 
-  private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderNumberInput(input: NumberInput): JSX.Element {
     const { labelTKey, min, max, dataFieldName, step } = input;
     const props = {
+      label: this.props.getTranslation(labelTKey),
       min: min,
       max: max,
-      ariaLabel: this.props.getTranslation(labelTKey),
+      ariaLabel: labelTKey,
       step: step,
     };
 
@@ -248,8 +234,6 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
     if (input.uiType === NumberUiType.Spinner) {
       return (
-        <Stack>
-          {labelElement}
         <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
           <SpinButton
             {...props}
@@ -259,21 +243,21 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
             onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
             onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
             labelPosition={Position.top}
-              aria-labelledby={labelId}
             disabled={disabled}
+            styles={{
+              label: {
+                ...SmartUiComponent.labelStyle,
+                fontWeight: 600,
+              },
+            }}
           />
           {this.state.errors.has(dataFieldName) && (
-              <MessageBar messageBarType={MessageBarType.error}>
+            <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
-                Error: {this.state.errors.get(dataFieldName)}
-              </MessageBar>
           )}
         </Stack>
-        </Stack>
       );
     } else if (input.uiType === NumberUiType.Slider) {
       return (
-        <Stack>
-          {labelElement}
         <div id={`${input.dataFieldName}-slider-input`}>
           <Slider
             {...props}
@@ -282,26 +266,27 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
             onChange={(newValue) => this.props.onInputChange(input, newValue)}
             styles={{
               root: { width: 400 },
+              titleLabel: {
+                ...SmartUiComponent.labelStyle,
+                fontWeight: 600,
+              },
               valueLabel: SmartUiComponent.labelStyle,
             }}
           />
         </div>
-        </Stack>
       );
     } else {
       return <>Unsupported number UI type {input.uiType}</>;
     }
   }
 
-  private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderBooleanInput(input: BooleanInput): JSX.Element {
     const value = this.props.currentValues.get(input.dataFieldName)?.value as boolean;
     const disabled = this.props.disabled || this.props.currentValues.get(input.dataFieldName)?.disabled;
     return (
-      <Stack>
-        {labelElement}
       <Toggle
         id={`${input.dataFieldName}-toggle-input`}
-          aria-labelledby={labelId}
+        label={this.props.getTranslation(input.labelTKey)}
         checked={value || false}
         onText={this.props.getTranslation(input.trueLabelTKey)}
         offText={this.props.getTranslation(input.falseLabelTKey)}
@@ -309,12 +294,11 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
         onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
         styles={{ root: { width: 400 } }}
       />
-      </Stack>
     );
   }
 
-  private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+  private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
+    const { labelTKey, defaultKey, dataFieldName, choices, placeholderTKey } = input;
     const value = this.props.currentValues.get(dataFieldName)?.value as string;
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
     let selectedKey = value ? value : defaultKey;
@@ -322,67 +306,53 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       selectedKey = "";
     }
     return (
-      <Stack>
-        {labelElement}
       <Dropdown
         id={`${input.dataFieldName}-dropdown-input`}
-          aria-labelledby={labelId}
+        label={this.props.getTranslation(labelTKey)}
         selectedKey={selectedKey}
         onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
         placeholder={this.props.getTranslation(placeholderTKey)}
         disabled={disabled}
-          // Removed dropdownWidth="auto" as dropdown accept only number
         options={choices.map((c) => ({
           key: c.key,
-            text: this.props.getTranslation(c.labelTKey),
+          text: this.props.getTranslation(c.label),
         }))}
         styles={{
           root: { width: 400 },
+          label: {
+            ...SmartUiComponent.labelStyle,
+            fontWeight: 600,
+          },
           dropdown: SmartUiComponent.labelStyle,
         }}
       />
-      </Stack>
     );
   }
 
-  private renderError(errorMessage: string): JSX.Element {
+  private renderError(input: AnyDisplay): JSX.Element {
-    return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
+    return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
   }
 
-  private renderElement(input: AnyDisplay, info: Info): JSX.Element {
+  private renderDisplay(input: AnyDisplay): JSX.Element {
     if (input.errorMessage) {
-      return this.renderError(input.errorMessage);
+      return this.renderError(input);
     }
     const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden;
     if (inputHidden) {
       return <></>;
     }
-    const labelId = `${input.dataFieldName}-label`;
-    const labelElement: JSX.Element = input.labelTKey && (
-      <Label id={labelId}>
-        <ToolTipLabelComponent
-          label={this.props.getTranslation(input.labelTKey)}
-          toolTipElement={this.renderInfo(info)}
-        />
-      </Label>
-    );
-
-    return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
-  }
-
-  private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
     switch (input.type) {
       case "string":
-        if ("description" in input || "isDynamicDescription" in input) {
+        if ("description" in input) {
-          return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
+          return this.renderDescription(input as DescriptionDisplay);
         }
-        return this.renderTextInput(input as StringInput, labelId, labelElement);
+        return this.renderTextInput(input as StringInput);
       case "number":
-        return this.renderNumberInput(input as NumberInput, labelId, labelElement);
+        return this.renderNumberInput(input as NumberInput);
       case "boolean":
-        return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
+        return this.renderBooleanInput(input as BooleanInput);
       case "object":
-        return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
+        return this.renderChoiceInput(input as ChoiceInput);
       default:
         throw new Error(`Unknown input type: ${input.type}`);
     }
@@ -393,7 +363,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
     return (
       <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        <Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</Stack.Item>
+        <Stack.Item>
+          {node.info && this.renderInfo(node.info as Info)}
+          {node.input && this.renderDisplay(node.input)}
+        </Stack.Item>
         {node.children && node.children.map((child) => <div key={child.id}>{this.renderNode(child)}</div>)}
       </Stack>
     );

src/Explorer/Controls/SmartUi/__snapshots__/SmartUiComponent.test.tsx.snap

@@ -9,7 +9,25 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     }
   }
 >
-  <StackItem />
+  <StackItem>
+    <StyledMessageBarBase
+      styles={
+        Object {
+          "root": Object {
+            "width": 400,
+          },
+        }
+      }
+    >
+      Start at $24/mo per database
+      <StyledLinkBase
+        href="https://aka.ms/azure-cosmos-db-pricing"
+        target="_blank"
+      >
+        More Details
+      </StyledLinkBase>
+    </StyledMessageBarBase>
+  </StackItem>
   <div
     key="description"
   >
@@ -22,10 +40,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
         <Text
-              aria-labelledby="description-label"
           id="description-text-display"
         >
           this is an example description text.
@@ -37,8 +52,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             Click here for more information.
           </StyledLinkBase>
         </Text>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -54,15 +67,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (input)"
-              />
-            </StyledLabelBase>
         <Stack
           styles={
             Object {
@@ -78,7 +82,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
           }
         >
           <CustomizedSpinButton
-                aria-labelledby="throughput-label"
             ariaLabel="Throughput (input)"
             decrementButtonIcon={
               Object {
@@ -92,7 +95,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                 "iconName": "ChevronUpSmall",
               }
             }
-                label=""
+            label="Throughput (input)"
             labelPosition={0}
             max={500}
             min={400}
@@ -100,10 +103,18 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             onIncrement={[Function]}
             onValidate={[Function]}
             step={10}
+            styles={
+              Object {
+                "label": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                  "fontWeight": 600,
+                },
+              }
+            }
           />
         </Stack>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -119,21 +130,13 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput2-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (Slider)"
-              />
-            </StyledLabelBase>
         <div
           id="throughput2-slider-input"
         >
           <StyledSliderBase
             ariaLabel="Throughput (Slider)"
             disabled={true}
+            label="Throughput (Slider)"
             max={500}
             min={400}
             onChange={[Function]}
@@ -143,6 +146,12 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                 "root": Object {
                   "width": 400,
                 },
+                "titleLabel": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                  "fontWeight": 600,
+                },
                 "valueLabel": Object {
                   "color": "#393939",
                   "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
@@ -152,8 +161,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             }
           />
         </div>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -190,32 +197,35 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <div
-          <Stack>
+          className="stringInputContainer"
-            <StyledLabelBase
-              id="containerId-label"
         >
-              <ToolTipLabelComponent
-                label="Container id"
-              />
-            </StyledLabelBase>
           <StyledTextFieldBase
-              aria-labelledby="containerId-label"
             disabled={true}
             id="containerId-textField-input"
+            label="Container id"
             onChange={[Function]}
             styles={
               Object {
                 "root": Object {
                   "width": 400,
                 },
+                "subComponentStyles": Object {
+                  "label": Object {
+                    "root": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                      "fontWeight": 600,
+                    },
+                  },
+                },
               }
             }
             type="text"
             value=""
           />
-          </Stack>
+        </div>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -231,20 +241,11 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="analyticalStore-label"
-            >
-              <ToolTipLabelComponent
-                label="Analytical Store"
-              />
-            </StyledLabelBase>
         <StyledToggleBase
-              aria-labelledby="analyticalStore-label"
           checked={false}
           disabled={true}
           id="analyticalStore-toggle-input"
+          label="Analytical Store"
           offText="Disabled"
           onChange={[Function]}
           onText="Enabled"
@@ -256,8 +257,6 @@ exports[`SmartUiComponent disable all inputs 1`] = `
             }
           }
         />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -273,19 +272,10 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="database-label"
-            >
-              <ToolTipLabelComponent
-                label="Database"
-              />
-            </StyledLabelBase>
         <StyledWithResponsiveMode
-              aria-labelledby="database-label"
           disabled={true}
           id="database-dropdown-input"
+          label="Database"
           onChange={[Function]}
           options={
             Array [
@@ -311,14 +301,18 @@ exports[`SmartUiComponent disable all inputs 1`] = `
                 "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                 "fontSize": 12,
               },
+              "label": Object {
+                "color": "#393939",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "fontSize": 12,
+                "fontWeight": 600,
+              },
               "root": Object {
                 "width": 400,
               },
             }
           }
         />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -334,7 +328,25 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     }
   }
 >
-  <StackItem />
+  <StackItem>
+    <StyledMessageBarBase
+      styles={
+        Object {
+          "root": Object {
+            "width": 400,
+          },
+        }
+      }
+    >
+      Start at $24/mo per database
+      <StyledLinkBase
+        href="https://aka.ms/azure-cosmos-db-pricing"
+        target="_blank"
+      >
+        More Details
+      </StyledLinkBase>
+    </StyledMessageBarBase>
+  </StackItem>
   <div
     key="description"
   >
@@ -347,10 +359,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
         <Text
-              aria-labelledby="description-label"
           id="description-text-display"
         >
           this is an example description text.
@@ -362,8 +371,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             Click here for more information.
           </StyledLinkBase>
         </Text>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -379,15 +386,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (input)"
-              />
-            </StyledLabelBase>
         <Stack
           styles={
             Object {
@@ -403,7 +401,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
           }
         >
           <CustomizedSpinButton
-                aria-labelledby="throughput-label"
             ariaLabel="Throughput (input)"
             decrementButtonIcon={
               Object {
@@ -417,7 +414,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                 "iconName": "ChevronUpSmall",
               }
             }
-                label=""
+            label="Throughput (input)"
             labelPosition={0}
             max={500}
             min={400}
@@ -425,10 +422,18 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             onIncrement={[Function]}
             onValidate={[Function]}
             step={10}
+            styles={
+              Object {
+                "label": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                  "fontWeight": 600,
+                },
+              }
+            }
           />
         </Stack>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -444,20 +449,12 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput2-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (Slider)"
-              />
-            </StyledLabelBase>
         <div
           id="throughput2-slider-input"
         >
           <StyledSliderBase
             ariaLabel="Throughput (Slider)"
+            label="Throughput (Slider)"
             max={500}
             min={400}
             onChange={[Function]}
@@ -467,6 +464,12 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                 "root": Object {
                   "width": 400,
                 },
+                "titleLabel": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                  "fontWeight": 600,
+                },
                 "valueLabel": Object {
                   "color": "#393939",
                   "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
@@ -476,8 +479,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             }
           />
         </div>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -514,31 +515,34 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <div
-          <Stack>
+          className="stringInputContainer"
-            <StyledLabelBase
-              id="containerId-label"
         >
-              <ToolTipLabelComponent
-                label="Container id"
-              />
-            </StyledLabelBase>
           <StyledTextFieldBase
-              aria-labelledby="containerId-label"
             id="containerId-textField-input"
+            label="Container id"
             onChange={[Function]}
             styles={
               Object {
                 "root": Object {
                   "width": 400,
                 },
+                "subComponentStyles": Object {
+                  "label": Object {
+                    "root": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                      "fontWeight": 600,
+                    },
+                  },
+                },
               }
             }
             type="text"
             value=""
           />
-          </Stack>
+        </div>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -554,19 +558,10 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="analyticalStore-label"
-            >
-              <ToolTipLabelComponent
-                label="Analytical Store"
-              />
-            </StyledLabelBase>
         <StyledToggleBase
-              aria-labelledby="analyticalStore-label"
           checked={false}
           id="analyticalStore-toggle-input"
+          label="Analytical Store"
           offText="Disabled"
           onChange={[Function]}
           onText="Enabled"
@@ -578,8 +573,6 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
             }
           }
         />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -595,18 +588,9 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="database-label"
-            >
-              <ToolTipLabelComponent
-                label="Database"
-              />
-            </StyledLabelBase>
         <StyledWithResponsiveMode
-              aria-labelledby="database-label"
           id="database-dropdown-input"
+          label="Database"
           onChange={[Function]}
           options={
             Array [
@@ -632,14 +616,18 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
                 "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
                 "fontSize": 12,
               },
+              "label": Object {
+                "color": "#393939",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "fontSize": 12,
+                "fontWeight": 600,
+              },
               "root": Object {
                 "width": 400,
               },
             }
           }
         />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -1,20 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.throughputInputContainer {
-  .throughputInputRadioBtn {
-    margin: 0;
-  }
-}
-
-.throughputInputRadioBtnLabel {
-  font-size: @mediumFontSize;
-  padding: 0 @LargeSpace 0 @SmallSpace;
-}
-
-.throughputInputSpacing {
-  margin-bottom: @SmallSpace;
-
-  & > * {
-    margin-bottom: @SmallSpace;
-  }
-}

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -1,302 +0,0 @@
-import { Checkbox, DirectionalHint, Icon, Link, Stack, Text, TextField, TooltipHost } from "office-ui-fabric-react";
-import React from "react";
-import * as Constants from "../../../Common/Constants";
-import * as SharedConstants from "../../../Shared/Constants";
-import { userContext } from "../../../UserContext";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import * as PricingUtils from "../../../Utils/PricingUtils";
-
-export interface ThroughputInputProps {
-  isDatabase: boolean;
-  showFreeTierExceedThroughputTooltip: boolean;
-  setThroughputValue: (throughput: number) => void;
-  setIsAutoscale: (isAutoscale: boolean) => void;
-  onCostAcknowledgeChange: (isAcknowledged: boolean) => void;
-}
-
-export interface ThroughputInputState {
-  isAutoscaleSelected: boolean;
-  throughput: number;
-  isCostAcknowledged: boolean;
-}
-
-export class ThroughputInput extends React.Component<ThroughputInputProps, ThroughputInputState> {
-  constructor(props: ThroughputInputProps) {
-    super(props);
-
-    this.state = {
-      isAutoscaleSelected: true,
-      throughput: AutoPilotUtils.minAutoPilotThroughput,
-      isCostAcknowledged: false,
-    };
-
-    this.props.setThroughputValue(AutoPilotUtils.minAutoPilotThroughput);
-    this.props.setIsAutoscale(true);
-  }
-
-  render(): JSX.Element {
-    return (
-      <div className="throughputInputContainer throughputInputSpacing">
-        <Stack horizontal>
-          <span className="mandatoryStar">*&nbsp;</span>
-          <Text variant="small" style={{ lineHeight: "20px" }}>
-            {this.getThroughputLabelText()}
-          </Text>
-          <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={PricingUtils.getRuToolTipText()}>
-            <Icon iconName="InfoSolid" className="panelInfoIcon" />
-          </TooltipHost>
-        </Stack>
-
-        <Stack horizontal verticalAlign="center">
-          <input
-            className="throughputInputRadioBtn"
-            aria-label="Autoscale mode"
-            checked={this.state.isAutoscaleSelected}
-            type="radio"
-            role="radio"
-            tabIndex={0}
-            onChange={this.onAutoscaleRadioBtnChange.bind(this)}
-          />
-          <span className="throughputInputRadioBtnLabel">Autoscale</span>
-
-          <input
-            className="throughputInputRadioBtn"
-            aria-label="Manual mode"
-            checked={!this.state.isAutoscaleSelected}
-            type="radio"
-            role="radio"
-            tabIndex={0}
-            onChange={this.onManualRadioBtnChange.bind(this)}
-          />
-          <span className="throughputInputRadioBtnLabel">Manual</span>
-        </Stack>
-
-        {this.state.isAutoscaleSelected && (
-          <Stack className="throughputInputSpacing">
-            <Text variant="small">
-              Provision maximum RU/s required by this resource. Estimate your required RU/s with&nbsp;
-              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-                capacity calculator
-              </Link>
-              .
-            </Text>
-
-            <Stack horizontal>
-              <Text variant="small" style={{ lineHeight: "20px" }}>
-                Max RU/s
-              </Text>
-              <TooltipHost directionalHint={DirectionalHint.bottomLeftEdge} content={this.getAutoScaleTooltip()}>
-                <Icon iconName="InfoSolid" className="panelInfoIcon" />
-              </TooltipHost>
-            </Stack>
-
-            <TextField
-              type="number"
-              styles={{
-                fieldGroup: { width: 300, height: 27 },
-                field: { fontSize: 12 },
-              }}
-              onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
-              step={AutoPilotUtils.autoPilotIncrementStep}
-              min={AutoPilotUtils.minAutoPilotThroughput}
-              value={this.state.throughput.toString()}
-              aria-label="Max request units per second"
-              required={true}
-            />
-
-            <Text variant="small">
-              Your {this.props.isDatabase ? "database" : "container"} throughput will automatically scale from{" "}
-              <b>
-                {AutoPilotUtils.getMinRUsBasedOnUserInput(this.state.throughput)} RU/s (10% of max RU/s) -{" "}
-                {this.state.throughput} RU/s
-              </b>{" "}
-              based on usage.
-            </Text>
-          </Stack>
-        )}
-
-        {!this.state.isAutoscaleSelected && (
-          <Stack className="throughputInputSpacing">
-            <Text variant="small">
-              Estimate your required RU/s with&nbsp;
-              <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
-                capacity calculator
-              </Link>
-              .
-            </Text>
-
-            <TooltipHost
-              directionalHint={DirectionalHint.topLeftEdge}
-              content={
-                this.props.showFreeTierExceedThroughputTooltip &&
-                this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs400
-                  ? "The first 400 RU/s in this account are free. Billing will apply to any throughput beyond 400 RU/s."
-                  : undefined
-              }
-            >
-              <TextField
-                type="number"
-                styles={{
-                  fieldGroup: { width: 300, height: 27 },
-                  field: { fontSize: 12 },
-                }}
-                onChange={(event, newInput?: string) => this.onThroughputValueChange(newInput)}
-                step={100}
-                min={SharedConstants.CollectionCreation.DefaultCollectionRUs400}
-                max={userContext.isTryCosmosDBSubscription ? Constants.TryCosmosExperience.maxRU : Infinity}
-                value={this.state.throughput.toString()}
-                aria-label="Max request units per second"
-                required={true}
-              />
-            </TooltipHost>
-          </Stack>
-        )}
-
-        <CostEstimateText requestUnits={this.state.throughput} isAutoscale={this.state.isAutoscaleSelected} />
-
-        {this.state.throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && (
-          <Stack horizontal verticalAlign="start">
-            <Checkbox
-              checked={this.state.isCostAcknowledged}
-              styles={{
-                checkbox: { width: 12, height: 12 },
-                label: { padding: 0, margin: "4px 4px 0 0" },
-              }}
-              onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
-                this.setState({ isCostAcknowledged: isChecked });
-                this.props.onCostAcknowledgeChange(isChecked);
-              }}
-            />
-            <Text variant="small" style={{ lineHeight: "20px" }}>
-              {this.getCostAcknowledgeText()}
-            </Text>
-          </Stack>
-        )}
-      </div>
-    );
-  }
-
-  private getThroughputLabelText(): string {
-    if (this.state.isAutoscaleSelected) {
-      return AutoPilotUtils.getAutoPilotHeaderText();
-    }
-
-    const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
-    const maxRU: string = userContext.isTryCosmosDBSubscription
-      ? Constants.TryCosmosExperience.maxRU.toLocaleString()
-      : "unlimited";
-    return this.state.isAutoscaleSelected
-      ? AutoPilotUtils.getAutoPilotHeaderText()
-      : `Throughput (${minRU} - ${maxRU} RU/s)`;
-  }
-
-  private onThroughputValueChange(newInput: string): void {
-    const newThroughput = parseInt(newInput);
-    this.setState({ throughput: newThroughput });
-    this.props.setThroughputValue(newThroughput);
-  }
-
-  private getAutoScaleTooltip(): string {
-    return `After the first ${AutoPilotUtils.getStorageBasedOnUserInput(
-      this.state.throughput
-    )} GB of data stored, the max
-    RU/s will be automatically upgraded based on the new storage value.`;
-  }
-
-  private getCostAcknowledgeText(): string {
-    const databaseAccount = userContext.databaseAccount;
-    if (!databaseAccount || !databaseAccount.properties) {
-      return "";
-    }
-
-    const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
-    const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
-
-    return PricingUtils.getEstimatedSpendAcknowledgeString(
-      this.state.throughput,
-      userContext.portalEnv,
-      numberOfRegions,
-      multimasterEnabled,
-      this.state.isAutoscaleSelected
-    );
-  }
-
-  private onAutoscaleRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && !this.state.isAutoscaleSelected) {
-      this.setState({ isAutoscaleSelected: true, throughput: AutoPilotUtils.minAutoPilotThroughput });
-      this.props.setIsAutoscale(true);
-    }
-  }
-
-  private onManualRadioBtnChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.checked && this.state.isAutoscaleSelected) {
-      this.setState({
-        isAutoscaleSelected: false,
-        throughput: SharedConstants.CollectionCreation.DefaultCollectionRUs400,
-      });
-      this.props.setIsAutoscale(false);
-      this.props.setThroughputValue(SharedConstants.CollectionCreation.DefaultCollectionRUs400);
-    }
-  }
-}
-
-interface CostEstimateTextProps {
-  requestUnits: number;
-  isAutoscale: boolean;
-}
-
-const CostEstimateText: React.FunctionComponent<CostEstimateTextProps> = (props: CostEstimateTextProps) => {
-  const { requestUnits, isAutoscale } = props;
-  const databaseAccount = userContext.databaseAccount;
-  if (!databaseAccount || !databaseAccount.properties) {
-    return <></>;
-  }
-
-  const serverId: string = userContext.portalEnv;
-  const numberOfRegions: number = databaseAccount.properties.readLocations?.length || 1;
-  const multimasterEnabled: boolean = databaseAccount.properties.enableMultipleWriteLocations;
-  const hourlyPrice: number = PricingUtils.computeRUUsagePriceHourly({
-    serverId,
-    requestUnits,
-    numberOfRegions,
-    multimasterEnabled,
-    isAutoscale,
-  });
-  const dailyPrice: number = hourlyPrice * 24;
-  const monthlyPrice: number = hourlyPrice * SharedConstants.hoursInAMonth;
-  const currency: string = PricingUtils.getPriceCurrency(serverId);
-  const currencySign: string = PricingUtils.getCurrencySign(serverId);
-  const multiplier = PricingUtils.getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = isAutoscale
-    ? PricingUtils.getAutoscalePricePerRu(serverId, multiplier) * multiplier
-    : PricingUtils.getPricePerRu(serverId) * multiplier;
-
-  if (isAutoscale) {
-    return (
-      <Text variant="small">
-        Estimated monthly cost ({currency}):{" "}
-        <b>
-          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice / 10)} -{" "}
-          {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)}{" "}
-        </b>
-        ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits / 10} - {requestUnits}{" "}
-        RU/s, {currencySign + pricePerRu}/RU)
-      </Text>
-    );
-  }
-
-  return (
-    <Text variant="small">
-      Cost ({currency}):{" "}
-      <b>
-        {currencySign + PricingUtils.calculateEstimateNumber(hourlyPrice)} hourly /{" "}
-        {currencySign + PricingUtils.calculateEstimateNumber(dailyPrice)} daily /{" "}
-        {currencySign + PricingUtils.calculateEstimateNumber(monthlyPrice)} monthly{" "}
-      </b>
-      ({numberOfRegions + (numberOfRegions === 1 ? " region" : " regions")}, {requestUnits}RU/s,{" "}
-      {currencySign + pricePerRu}/RU)
-      <br />
-      <em>{PricingUtils.estimatedCostDisclaimer}</em>
-    </Text>
-  );
-};

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -129,6 +129,7 @@ export interface ThroughputInputParams {
   throughputModeRadioName: string;
   maxAutoPilotThroughputSet: ViewModels.Editable<number>;
   autoPilotUsageCost: ko.Computed<string>;
+  showAutoPilot?: ko.Observable<boolean>;
   overrideWithAutoPilotSettings: ko.Observable<boolean>;
   overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
   freeTierExceedThroughputTooltip?: ko.Observable<string>;
@@ -157,6 +158,7 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
   public infoBubbleText: string | ko.Observable<string>;
   public label: ko.Observable<string>;
   public isFixed: boolean;
+  public showAutoPilot: ko.Observable<boolean>;
   public isAutoPilotSelected: ko.Observable<boolean>;
   public throughputAutoPilotRadioId: string;
   public throughputProvisionedRadioId: string;
@@ -200,10 +202,14 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
     this.isFixed = !!options.isFixed;
     this.infoBubbleText = options.infoBubbleText || ko.observable<string>();
     this.label = options.label || ko.observable<string>();
+    this.showAutoPilot = options.showAutoPilot !== undefined ? options.showAutoPilot : ko.observable<boolean>(true);
     this.isAutoPilotSelected = options.isAutoPilotSelected || ko.observable<boolean>(false);
     this.isAutoPilotSelected.subscribe((value) => {
       TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
         changedSelectedValueTo: value ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
+        databaseAccountName: userContext.databaseAccount?.name,
+        subscriptionId: userContext.subscriptionId,
+        apiKind: userContext.defaultExperience,
         dataExplorerArea: "Scale Tab V1",
       });
     });

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

@@ -17,7 +17,7 @@
   </div>
 
   <!-- ko if: !isFixed -->
-  <div class="throughputModeContainer">
+  <div data-bind="visible: showAutoPilot" class="throughputModeContainer">
     <input
       class="throughputModeRadio"
       aria-label="Autopilot mode"

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -2,17 +2,17 @@ jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
 jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
-import Q from "q";
-import { createDocument } from "../../Common/dataAccess/createDocument";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { updateUserContext } from "../../UserContext";
+import Q from "q";
-import Explorer from "../Explorer";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import { createDocument } from "../../Common/dataAccess/createDocument";
+import Explorer from "../Explorer";
+import { updateUserContext } from "../../UserContext";
 
 describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
-    explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
+    explorerStub.nonSystemDatabases = ko.computed(() => [database]);
     explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
     explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
     explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => false);
@@ -61,7 +61,6 @@ describe("ContainerSampleGenerator", () => {
     const database = {
       id: ko.observable(sampleDatabaseId),
       collections: ko.observableArray<ViewModels.Collection>([collection]),
-      loadCollections: () => {},
     } as ViewModels.Database;
     database.findCollectionWithId = () => collection;
 
@@ -110,7 +109,6 @@ describe("ContainerSampleGenerator", () => {
     const database = {
       id: ko.observable(sampleDatabaseId),
       collections: ko.observableArray<ViewModels.Collection>([collection]),
-      loadCollections: () => {},
     } as ViewModels.Database;
     database.findCollectionWithId = () => collection;
     collection.databaseId = database.id();

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -63,7 +63,6 @@ export class ContainerSampleGenerator {
     if (!database) {
       return undefined;
     }
-    await database.loadCollections();
     return database.findCollectionWithId(this.sampleDataFile.collectionId);
   }
 

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -1,9 +1,9 @@
-import * as ko from "knockout";
-import * as sinon from "sinon";
-import { Collection, Database } from "../../Contracts/ViewModels";
-import Explorer from "../Explorer";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { DataSamplesUtil } from "./DataSamplesUtil";
+import * as sinon from "sinon";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as ko from "knockout";
+import Explorer from "../Explorer";
+import { Database, Collection } from "../../Contracts/ViewModels";
 
 describe("DataSampleUtils", () => {
   const sampleCollectionId = "sampleCollectionId";
@@ -16,7 +16,7 @@ describe("DataSampleUtils", () => {
       collections: ko.observableArray<Collection>([collection]),
     } as Database;
     const explorer = {} as Explorer;
-    explorer.databases = ko.observableArray<Database>([database]);
+    explorer.nonSystemDatabases = ko.computed(() => [database]);
     explorer.showOkModalDialog = () => {};
     const dataSamplesUtil = new DataSamplesUtil(explorer);
 

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,8 +1,8 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import Explorer from "../Explorer";
 
 export class DataSamplesUtil {
   private static readonly DialogTitle = "Create Sample Container";
@@ -17,7 +17,7 @@ export class DataSamplesUtil {
 
     const databaseName = generator.getDatabaseId();
     const containerName = generator.getCollectionId();
-    if (this.hasContainer(databaseName, containerName, this.container.databases())) {
+    if (this.hasContainer(databaseName, containerName, this.container.nonSystemDatabases())) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
       this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
       NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);

src/Explorer/Explorer.test.tsx

@@ -1,43 +0,0 @@
-jest.mock("./../Common/dataAccess/deleteDatabase");
-jest.mock("./../Shared/Telemetry/TelemetryProcessor");
-import * as ko from "knockout";
-import { deleteDatabase } from "./../Common/dataAccess/deleteDatabase";
-import * as ViewModels from "./../Contracts/ViewModels";
-import Explorer from "./Explorer";
-
-describe("Explorer.isLastDatabase() and Explorer.isLastNonEmptyDatabase()", () => {
-  let explorer: Explorer;
-  beforeAll(() => {
-    (deleteDatabase as jest.Mock).mockResolvedValue(undefined);
-  });
-
-  beforeEach(() => {
-    explorer = new Explorer();
-  });
-
-  it("should be true if only 1 database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastDatabase()).toBe(true);
-  });
-
-  it("should be false if only 2 databases", () => {
-    const database = {} as ViewModels.Database;
-    const database2 = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database, database2]);
-    expect(explorer.isLastDatabase()).toBe(false);
-  });
-
-  it("should be false if not last empty database", () => {
-    const database = {} as ViewModels.Database;
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(false);
-  });
-
-  it("should be true if last non empty database", () => {
-    const database = {} as ViewModels.Database;
-    database.collections = ko.observableArray<ViewModels.Collection>([{} as ViewModels.Collection]);
-    explorer.databases = ko.observableArray<ViewModels.Database>([database]);
-    expect(explorer.isLastNonEmptyDatabase()).toBe(true);
-  });
-});

src/Explorer/Explorer.tsx

@@ -1,87 +1,94 @@
-import * as ko from "knockout";
-import { IChoiceGroupProps } from "office-ui-fabric-react";
-import * as path from "path";
-import Q from "q";
 import React from "react";
-import _ from "underscore";
+import * as ComponentRegisterer from "./ComponentRegisterer";
-import { AuthType } from "../AuthType";
-import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
-import { ReactAdapter } from "../Bindings/ReactBindingHandler";
 import * as Constants from "../Common/Constants";
-import { ExplorerMetrics } from "../Common/Constants";
+import * as DataModels from "../Contracts/DataModels";
+import * as ko from "knockout";
+import * as MostRecentActivity from "./MostRecentActivity/MostRecentActivity";
+import * as path from "path";
+import * as SharedConstants from "../Shared/Constants";
+import * as ViewModels from "../Contracts/ViewModels";
+import _ from "underscore";
+import AddCollectionPane from "./Panes/AddCollectionPane";
+import AddDatabasePane from "./Panes/AddDatabasePane";
+import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
+import AuthHeadersUtil from "../Platform/Hosted/Authorization";
+import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
+import Database from "./Tree/Database";
+import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
+import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
-import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
+import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import * as Logger from "../Common/Logger";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendCachedDataMessage, sendMessage } from "../Common/MessageHandler";
+import GraphStylingPane from "./Panes/GraphStylingPane";
-import { QueriesClient } from "../Common/QueriesClient";
+import NewVertexPane from "./Panes/NewVertexPane";
-import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
+import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
-import { configContext, Platform } from "../ConfigContext";
+import Q from "q";
-import * as DataModels from "../Contracts/DataModels";
+import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { SubscriptionType } from "../Contracts/SubscriptionType";
-import * as ViewModels from "../Contracts/ViewModels";
-import { IGalleryItem } from "../Juno/JunoClient";
-import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
-import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
-import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { appInsights } from "../Shared/appInsights";
-import * as SharedConstants from "../Shared/Constants";
-import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
-import { ExplorerSettings } from "../Shared/ExplorerSettings";
-import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
+import TerminalTab from "./Tabs/TerminalTab";
+import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
-import { updateUserContext, userContext } from "../UserContext";
-import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
-import { stringToBlob } from "../Utils/BlobUtils";
-import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as ComponentRegisterer from "./ComponentRegisterer";
 import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
-import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
+import { AuthType } from "../AuthType";
-import { DialogProps, TextFieldProps } from "./Controls/Dialog";
+import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
-import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
+import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
+import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
+import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import * as FileSystemUtil from "./Notebook/FileSystemUtil";
+import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
+import { DialogProps, TextFieldProps } from "./Controls/Dialog";
+import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
+import { ExplorerMetrics } from "../Common/Constants";
+import { ExplorerSettings } from "../Shared/ExplorerSettings";
+import { FileSystemUtil } from "./Notebook/FileSystemUtil";
+import { IGalleryItem } from "../Juno/JunoClient";
+import { LoadQueryPane } from "./Panes/LoadQueryPane";
+import * as Logger from "../Common/Logger";
+import { sendMessage, sendCachedDataMessage } from "../Common/MessageHandler";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
-import AddCollectionPane from "./Panes/AddCollectionPane";
+import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
-import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import AddDatabasePane from "./Panes/AddDatabasePane";
+import { QueriesClient } from "../Common/QueriesClient";
-import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
+import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
-import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
+import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
-import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
-import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
+import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
-import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
+import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
-import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
-import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPane } from "./Panes/LoadQueryPane";
-import NewVertexPane from "./Panes/NewVertexPane";
 import { SaveQueryPane } from "./Panes/SaveQueryPane";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
+import { SplashScreen } from "./SplashScreen/SplashScreen";
+import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
 import { StringInputPane } from "./Panes/StringInputPane";
-import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
-import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
 import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
+import { TabsManager } from "./Tabs/TabsManager";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
-import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
+import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
-import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
+import { ReactAdapter } from "../Bindings/ReactBindingHandler";
-import TabsBase from "./Tabs/TabsBase";
+import { toRawContentUri, fromContentUri } from "../Utils/GitHubUtils";
-import { TabsManager } from "./Tabs/TabsManager";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
-import TerminalTab from "./Tabs/TerminalTab";
-import Database from "./Tree/Database";
-import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
-import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import TabsBase from "./Tabs/TabsBase";
+import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
+import { updateUserContext, userContext } from "../UserContext";
+import { stringToBlob } from "../Utils/BlobUtils";
+import { IChoiceGroupProps } from "office-ui-fabric-react";
+import { getErrorMessage, handleError, getErrorStack } from "../Common/ErrorHandlingUtils";
+import { SubscriptionType } from "../Contracts/SubscriptionType";
+import { appInsights } from "../Shared/appInsights";
+import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
+import { SelfServeType } from "../SelfServe/SelfServeUtils";
+import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";
+import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
+import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -112,60 +119,28 @@ export default class Explorer {
   public hasWriteAccess: ko.Observable<boolean>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
-  /**
-   * @deprecated
-   * Use userContext.databaseAccount instead
-   * */
   public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
-  /**
-   * @deprecated
-   * Use userContext.subscriptionType instead
-   * */
   public subscriptionType: ko.Observable<SubscriptionType>;
-  /**
-   * @deprecated
-   * Use userContext.apiType instead
-   * */
   public defaultExperience: ko.Observable<string>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "SQL"
-   * */
   public isPreferredApiDocumentDB: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Cassandra"
-   * */
   public isPreferredApiCassandra: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
-   * */
   public isPreferredApiMongoDB: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Gremlin"
-   * */
   public isPreferredApiGraph: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Tables"
-   * */
   public isPreferredApiTable: ko.Computed<boolean>;
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
-   * */
   public isEnableMongoCapabilityPresent: ko.Computed<boolean>;
   public isServerlessEnabled: ko.Computed<boolean>;
   public isAccountReady: ko.Observable<boolean>;
+  public selfServeType: ko.Observable<SelfServeType>;
   public canSaveQueries: ko.Computed<boolean>;
   public features: ko.Observable<any>;
+  public serverId: ko.Observable<string>;
+  public isTryCosmosDBSubscription: ko.Observable<boolean>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
+  public mostRecentActivity: MostRecentActivity.MostRecentActivity;
 
   // Notification Console
   private setIsNotificationConsoleExpanded: (isExpanded: boolean) => void;
@@ -179,19 +154,23 @@ export default class Explorer {
 
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
+  public nonSystemDatabases: ko.Computed<ViewModels.Database[]>;
   public selectedDatabaseId: ko.Computed<string>;
   public selectedCollectionId: ko.Computed<string>;
   public isLeftPaneExpanded: ko.Observable<boolean>;
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
+  public isRefreshingExplorer: ko.Observable<boolean>;
   private resourceTree: ResourceTreeAdapter;
+  private selfServeComponentAdapter: SelfServeComponentAdapter;
 
   // Resource Token
   public resourceTokenDatabaseId: ko.Observable<string>;
   public resourceTokenCollectionId: ko.Observable<string>;
   public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
   public resourceTokenPartitionKey: ko.Observable<string>;
+  public isAuthWithResourceToken: ko.Observable<boolean>;
   public isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
-  public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
+  private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
 
   // Tabs
   public isTabsContentExpanded: ko.Observable<boolean>;
@@ -203,6 +182,7 @@ export default class Explorer {
   public addDatabasePane: AddDatabasePane;
   public addCollectionPane: AddCollectionPane;
   public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
+  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
   public graphStylingPane: GraphStylingPane;
   public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
@@ -210,9 +190,14 @@ export default class Explorer {
   public querySelectPane: QuerySelectPane;
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
+  public settingsPane: SettingsPane;
+  public executeSprocParamsPane: ExecuteSprocParamsPane;
+  public uploadItemsPane: UploadItemsPane;
+  public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
   public loadQueryPane: LoadQueryPane;
   public saveQueryPane: ContextualPaneBase;
   public browseQueriesPane: BrowseQueriesPane;
+  public uploadFilePane: UploadFilePane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
   public gitHubReposPane: ContextualPaneBase;
@@ -249,6 +234,7 @@ export default class Explorer {
   public closeDialog: ExplorerParams["closeDialog"];
 
   private _panes: ContextualPaneBase[] = [];
+  private _isSystemDatabasePredicate: (database: ViewModels.Database) => boolean = (database) => false;
   private _isInitializingNotebooks: boolean;
   private notebookBasePath: ko.Observable<string>;
   private _arcadiaManager: ArcadiaResourceManager;
@@ -259,6 +245,7 @@ export default class Explorer {
 
   // React adapters
   private commandBarComponentAdapter: CommandBarComponentAdapter;
+  private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
@@ -285,7 +272,24 @@ export default class Explorer {
 
     this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
     this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
+    let firstInitialization = true;
+    this.isRefreshingExplorer = ko.observable<boolean>(true);
+    this.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
+      if (!isRefreshing && firstInitialization) {
+        // set focus on first element
+        firstInitialization = false;
+        try {
+          document.getElementById("createNewContainerCommandButton").parentElement.parentElement.focus();
+        } catch (e) {
+          Logger.logWarning(
+            "getElementById('createNewContainerCommandButton') failed to find element",
+            "Explorer/this.isRefreshingExplorer.subscribe"
+          );
+        }
+      }
+    });
     this.isAccountReady = ko.observable<boolean>(false);
+    this.selfServeType = ko.observable<SelfServeType>(undefined);
     this._isInitializingNotebooks = false;
     this.arcadiaToken = ko.observable<string>();
     this.arcadiaToken.subscribe((token: string) => {
@@ -305,9 +309,7 @@ export default class Explorer {
     this.isSynapseLinkUpdating = ko.observable<boolean>(false);
     this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
       if (isAccountReady) {
-        userContext.authType === AuthType.ResourceToken
+        this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
-          ? this.refreshDatabaseForResourceToken()
-          : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
         this.notebookWorkspaceManager = new NotebookWorkspaceManager();
         this.arcadiaWorkspaces = ko.observableArray();
@@ -318,13 +320,15 @@ export default class Explorer {
         Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
           async () => {
             this.isNotebookEnabled(
-              userContext.authType !== AuthType.ResourceToken &&
+              !this.isAuthWithResourceToken() &&
                 ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
-                  userContext.features.enableNotebooks)
+                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
             );
 
             TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
               isNotebookEnabled: this.isNotebookEnabled(),
+              databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+              defaultExperience: this.defaultExperience && this.defaultExperience(),
               dataExplorerArea: Constants.Areas.Notebook,
             });
 
@@ -342,7 +346,7 @@ export default class Explorer {
                 this.isSparkEnabledForAccount() &&
                 this.arcadiaWorkspaces() &&
                 this.arcadiaWorkspaces().length > 0) ||
-                userContext.features.enableSpark
+                this.isFeatureEnabled(Constants.Features.enableSpark)
             );
             if (this.isSparkEnabled()) {
               appInsights.trackEvent(
@@ -366,20 +370,26 @@ export default class Explorer {
     });
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
 
+    this.features = ko.observable();
+    this.serverId = ko.observable<string>();
     this.queriesClient = new QueriesClient(this);
+    this.isTryCosmosDBSubscription = ko.observable<boolean>(false);
 
     this.resourceTokenDatabaseId = ko.observable<string>();
     this.resourceTokenCollectionId = ko.observable<string>();
     this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.resourceTokenPartitionKey = ko.observable<string>();
+    this.isAuthWithResourceToken = ko.observable<boolean>(false);
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isMongoIndexingEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
     this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
-    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
+    this.canExceedMaximumValue = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
+    );
 
-    this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
+    this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
 
     this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
 
@@ -433,7 +443,6 @@ export default class Explorer {
         databaseAccount
       );
       this.defaultExperience(defaultExperience);
-      // TODO. Remove this entirely
       updateUserContext({
         defaultExperience: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience),
       });
@@ -459,7 +468,7 @@ export default class Explorer {
     });
 
     this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
-      if (userContext.features.enableFixedCollectionWithSharedThroughput) {
+      if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
         return true;
       }
 
@@ -518,7 +527,20 @@ export default class Explorer {
       () =>
         configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
     );
-    this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
+    this.isRightPanelV2Enabled = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.enableRightPanelV2)
+    );
+    this.defaultExperience.subscribe((defaultExperience: string) => {
+      if (
+        defaultExperience &&
+        defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase()
+      ) {
+        this._isSystemDatabasePredicate = (database: ViewModels.Database): boolean => {
+          return database.id() === "system";
+        };
+      }
+    });
+
     this.selectedDatabaseId = ko.computed<string>(() => {
       const selectedNode = this.selectedNode();
       if (!selectedNode) {
@@ -540,6 +562,10 @@ export default class Explorer {
       }
     });
 
+    this.nonSystemDatabases = ko.computed(() => {
+      return this.databases().filter((database: ViewModels.Database) => !this._isSystemDatabasePredicate(database));
+    });
+
     this.addDatabasePane = new AddDatabasePane({
       id: "adddatabasepane",
       visible: ko.observable<boolean>(false),
@@ -562,6 +588,13 @@ export default class Explorer {
       container: this,
     });
 
+    this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
+      id: "deletedatabaseconfirmationpane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
     this.graphStylingPane = new GraphStylingPane({
       id: "graphstylingpane",
       visible: ko.observable<boolean>(false),
@@ -611,6 +644,30 @@ export default class Explorer {
       container: this,
     });
 
+    this.settingsPane = new SettingsPane({
+      id: "settingspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.executeSprocParamsPane = new ExecuteSprocParamsPane({
+      id: "executesprocparamspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.uploadItemsPane = new UploadItemsPane({
+      id: "uploaditemspane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
+    this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
+
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
       visible: ko.observable<boolean>(false),
@@ -632,6 +689,13 @@ export default class Explorer {
       container: this,
     });
 
+    this.uploadFilePane = new UploadFilePane({
+      id: "uploadfilepane",
+      visible: ko.observable<boolean>(false),
+
+      container: this,
+    });
+
     this.stringInputPane = new StringInputPane({
       id: "stringinputpane",
       visible: ko.observable<boolean>(false),
@@ -652,6 +716,7 @@ export default class Explorer {
       this.addDatabasePane,
       this.addCollectionPane,
       this.deleteCollectionConfirmationPane,
+      this.deleteDatabaseConfirmationPane,
       this.graphStylingPane,
       this.addTableEntityPane,
       this.editTableEntityPane,
@@ -659,9 +724,13 @@ export default class Explorer {
       this.querySelectPane,
       this.newVertexPane,
       this.cassandraAddCollectionPane,
+      this.settingsPane,
+      this.executeSprocParamsPane,
+      this.uploadItemsPane,
       this.loadQueryPane,
       this.saveQueryPane,
       this.browseQueriesPane,
+      this.uploadFilePane,
       this.stringInputPane,
       this.setupNotebooksPane,
     ];
@@ -680,8 +749,14 @@ export default class Explorer {
       $(document.body).click(() => $(".commandDropdownContainer").hide());
     });
 
-    switch (userContext.apiType) {
+    // TODO move this to API customization class
-      case "SQL":
+    this.defaultExperience.subscribe((defaultExperience) => {
+      const defaultExperienceNormalizedString = (
+        defaultExperience || Constants.DefaultAccountExperience.Default
+      ).toLowerCase();
+
+      switch (defaultExperienceNormalizedString) {
+        case Constants.DefaultAccountExperience.DocumentDB.toLowerCase():
           this.addCollectionText("New Container");
           this.addDatabaseText("New Database");
           this.collectionTitle("SQL API");
@@ -697,7 +772,8 @@ export default class Explorer {
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
           this.refreshTreeTitle("Refresh containers");
           break;
-      case "Mongo":
+        case Constants.DefaultAccountExperience.MongoDB.toLowerCase():
+        case Constants.DefaultAccountExperience.ApiForMongoDB.toLowerCase():
           this.addCollectionText("New Collection");
           this.addDatabaseText("New Database");
           this.collectionTitle("Collections");
@@ -711,7 +787,7 @@ export default class Explorer {
           );
           this.refreshTreeTitle("Refresh collections");
           break;
-      case "Gremlin":
+        case Constants.DefaultAccountExperience.Graph.toLowerCase():
           this.addCollectionText("New Graph");
           this.addDatabaseText("New Database");
           this.deleteCollectionText("Delete Graph");
@@ -725,7 +801,7 @@ export default class Explorer {
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
           this.refreshTreeTitle("Refresh graphs");
           break;
-      case "Tables":
+        case Constants.DefaultAccountExperience.Table.toLowerCase():
           this.addCollectionText("New Table");
           this.addDatabaseText("New Database");
           this.deleteCollectionText("Delete Table");
@@ -742,7 +818,7 @@ export default class Explorer {
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
           this.tableDataClient = new TablesAPIDataClient();
           break;
-      case "Cassandra":
+        case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
           this.addCollectionText("New Table");
           this.addDatabaseText("New Keyspace");
           this.deleteCollectionText("Delete Table");
@@ -757,11 +833,15 @@ export default class Explorer {
           this.editTableEntityPane.title("Edit Table Row");
           this.deleteCollectionConfirmationPane.title("Delete Table");
           this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+          this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
+          this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
           this.tableDataClient = new CassandraAPIDataClient();
           break;
       }
+    });
 
     this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
+    this.selfServeLoadingComponentAdapter = new SelfServeLoadingComponentAdapter();
 
     this._initSettings();
 
@@ -810,29 +890,44 @@ export default class Explorer {
     });
 
     // Override notebook server parameters from URL parameters
-    if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
+    const featureSubcription = this.features.subscribe((features) => {
-      this.notebookServerInfo({
+      const serverInfo = this.notebookServerInfo();
-        notebookServerEndpoint: userContext.features.notebookServerUrl,
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
-        authToken: userContext.features.notebookServerToken,
+        serverInfo.notebookServerEndpoint = features[Constants.Features.notebookServerUrl];
-      });
       }
 
-    if (userContext.features.notebookBasePath) {
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
-      this.notebookBasePath(userContext.features.notebookBasePath);
+        serverInfo.authToken = features[Constants.Features.notebookServerToken];
+      }
+      this.notebookServerInfo(serverInfo);
+      this.notebookServerInfo.valueHasMutated();
+
+      if (this.isFeatureEnabled(Constants.Features.notebookBasePath)) {
+        this.notebookBasePath(features[Constants.Features.notebookBasePath]);
       }
 
-    if (userContext.features.livyEndpoint) {
+      if (this.isFeatureEnabled(Constants.Features.livyEndpoint)) {
         this.sparkClusterConnectionInfo({
           userName: undefined,
           password: undefined,
           endpoints: [
             {
-            endpoint: userContext.features.livyEndpoint,
+              endpoint: features[Constants.Features.livyEndpoint],
               kind: DataModels.SparkClusterEndpointKind.Livy,
             },
           ],
         });
+        this.sparkClusterConnectionInfo.valueHasMutated();
       }
+
+      if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
+        updateUserContext({ useSDKOperations: true });
+      }
+
+      featureSubcription.dispose();
+    });
+
+    this.mostRecentActivity = new MostRecentActivity.MostRecentActivity(this);
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -875,7 +970,7 @@ export default class Explorer {
             ConsoleDataType.Info,
             "Enabled Azure Synapse Link for this account"
           );
-          TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, {}, startTime);
+          TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, startTime);
           this.databaseAccount(databaseAccount);
         } catch (error) {
           NotificationConsoleUtils.clearInProgressMessageWithId(logId);
@@ -883,7 +978,7 @@ export default class Explorer {
             ConsoleDataType.Error,
             `Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`
           );
-          TelemetryProcessor.traceFailure(Action.EnableAzureSynapseLink, {}, startTime);
+          TelemetryProcessor.traceFailure(Action.EnableAzureSynapseLink, startTime);
         } finally {
           this.isSynapseLinkUpdating(false);
         }
@@ -916,6 +1011,20 @@ export default class Explorer {
     return this.selectedNode() == null;
   }
 
+  public isFeatureEnabled(feature: string): boolean {
+    const features = this.features();
+
+    if (!features) {
+      return false;
+    }
+
+    if (feature in features && features[feature]) {
+      return true;
+    }
+
+    return false;
+  }
+
   public logConsoleData(consoleData: ConsoleData): void {
     this.setNotificationConsoleData(consoleData);
   }
@@ -962,12 +1071,17 @@ export default class Explorer {
   }
 
   public refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any> {
+    this.isRefreshingExplorer(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
+      databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+      defaultExperience: this.defaultExperience && this.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     let resourceTreeStartKey: number = null;
     if (isInitialLoad) {
       resourceTreeStartKey = TelemetryProcessor.traceStart(Action.LoadResourceTree, {
+        databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+        defaultExperience: this.defaultExperience && this.defaultExperience(),
         dataExplorerArea: Constants.Areas.ResourceTree,
       });
     }
@@ -981,6 +1095,8 @@ export default class Explorer {
         TelemetryProcessor.traceSuccess(
           Action.LoadDatabases,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.ResourceTree,
           },
           startKey
@@ -991,7 +1107,8 @@ export default class Explorer {
         this.deleteDatabasesFromList(deltaDatabases.toDelete);
         this.selectedNode(currentlySelectedNode);
         this._setLoadingStatusText("Fetching containers...");
-        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
+        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
+          .then(
             () => {
               this._setLoadingStatusText("Successfully fetched containers.");
               deferred.resolve();
@@ -1000,15 +1117,19 @@ export default class Explorer {
               this._setLoadingStatusText("Failed to fetch containers.");
               deferred.reject(reason);
             }
-        );
+          )
+          .finally(() => this.isRefreshingExplorer(false));
       },
       (error) => {
         this._setLoadingStatusText("Failed to fetch databases.");
+        this.isRefreshingExplorer(false);
         deferred.reject(error);
         const errorMessage = getErrorMessage(error);
         TelemetryProcessor.traceFailure(
           Action.LoadDatabases,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.ResourceTree,
             error: errorMessage,
             errorStack: getErrorStack(error),
@@ -1028,6 +1149,8 @@ export default class Explorer {
           TelemetryProcessor.traceSuccess(
             Action.LoadResourceTree,
             {
+              databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+              defaultExperience: this.defaultExperience && this.defaultExperience(),
               dataExplorerArea: Constants.Areas.ResourceTree,
             },
             resourceTreeStartKey
@@ -1039,6 +1162,8 @@ export default class Explorer {
           TelemetryProcessor.traceFailure(
             Action.LoadResourceTree,
             {
+              databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+              defaultExperience: this.defaultExperience && this.defaultExperience(),
               dataExplorerArea: Constants.Areas.ResourceTree,
               error: getErrorMessage(error),
               errorStack: getErrorStack(error),
@@ -1061,11 +1186,12 @@ export default class Explorer {
   public onRefreshResourcesClick = (source: any, event: MouseEvent): void => {
     const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
       description: "Refresh button clicked",
+      databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+      defaultExperience: this.defaultExperience && this.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    userContext.authType === AuthType.ResourceToken
+    this.isRefreshingExplorer(true);
-      ? this.refreshDatabaseForResourceToken()
+    this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
-      : this.refreshAllDatabases();
     this.refreshNotebookList();
   };
 
@@ -1158,12 +1284,12 @@ export default class Explorer {
       throw error;
     } finally {
       // Overwrite with feature flags
-      if (userContext.features.notebookServerUrl) {
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
-        connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
+        connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
       }
 
-      if (userContext.features.notebookServerToken) {
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
-        connectionInfo.authToken = userContext.features.notebookServerToken;
+        connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
       }
 
       this.notebookServerInfo(connectionInfo);
@@ -1279,12 +1405,7 @@ export default class Explorer {
   }
 
   public isLastNonEmptyDatabase(): boolean {
-    if (
+    if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
-      this.isLastDatabase() &&
-      this.databases()[0] &&
-      this.databases()[0].collections &&
-      this.databases()[0].collections().length > 0
-    ) {
       return true;
     }
     return false;
@@ -1306,6 +1427,20 @@ export default class Explorer {
     return false;
   }
 
+  public setSelfServeType(inputs: ViewModels.DataExplorerInputsFrame): void {
+    const selfServeFeature = inputs.features[Constants.Features.selfServeType];
+    if (selfServeFeature) {
+      // self serve type received from query string
+      const selfServeType = SelfServeType[selfServeFeature?.toLowerCase() as keyof typeof SelfServeType];
+      this.selfServeType(selfServeType ? selfServeType : SelfServeType.invalid);
+    } else if (inputs.selfServeType) {
+      // self serve type received from portal
+      this.selfServeType(inputs.selfServeType);
+    } else {
+      this.selfServeType(SelfServeType.none);
+    }
+  }
+
   public configure(inputs: ViewModels.DataExplorerInputsFrame): void {
     if (inputs != null) {
       // In development mode, save the iframe message from the portal in session storage.
@@ -1314,21 +1449,45 @@ export default class Explorer {
         sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
       }
 
+      const authorizationToken = inputs.authorizationToken || "";
+      const masterKey = inputs.masterKey || "";
       const databaseAccount = inputs.databaseAccount || null;
       if (inputs.defaultCollectionThroughput) {
         this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
       }
+      this.features(inputs.features);
+      this.serverId(inputs.serverId ?? Constants.ServerIds.productionPortal);
       this.databaseAccount(databaseAccount);
       this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
       this.hasWriteAccess(inputs.hasWriteAccess ?? true);
       if (inputs.addCollectionDefaultFlight) {
         this.flight(inputs.addCollectionDefaultFlight);
       }
+      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription ?? false);
+      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken ?? false);
       this.setFeatureFlagsFromFlights(inputs.flights);
+      this.setSelfServeType(inputs);
+
+      updateConfigContext({
+        BACKEND_ENDPOINT: inputs.extensionEndpoint || configContext.BACKEND_ENDPOINT,
+        ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
+      });
+
+      updateUserContext({
+        authorizationToken,
+        masterKey,
+        databaseAccount,
+        resourceGroup: inputs.resourceGroup,
+        subscriptionId: inputs.subscriptionId,
+        subscriptionType: inputs.subscriptionType,
+        quotaId: inputs.quotaId,
+      });
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
         {
+          resourceId: this.databaseAccount && this.databaseAccount().id,
           dataExplorerArea: Constants.Areas.ResourceTree,
+          databaseAccount: this.databaseAccount && this.databaseAccount(),
         },
         inputs.loadDatabaseAccountTimestamp
       );
@@ -1404,9 +1563,9 @@ export default class Explorer {
 
   public isRunningOnNationalCloud(): boolean {
     return (
-      userContext.portalEnv === "blackforest" ||
+      this.serverId() === Constants.ServerIds.blackforest ||
-      userContext.portalEnv === "fairfax" ||
+      this.serverId() === Constants.ServerIds.fairfax ||
-      userContext.portalEnv === "mooncake"
+      this.serverId() === Constants.ServerIds.mooncake
     );
   }
 
@@ -1459,6 +1618,8 @@ export default class Explorer {
         : this.databases().filter((db) => db.isDatabaseExpanded());
 
     const startKey: number = TelemetryProcessor.traceStart(Action.LoadCollections, {
+      databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+      defaultExperience: this.defaultExperience && this.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     databasesToLoad.forEach(async (database: ViewModels.Database) => {
@@ -1484,6 +1645,8 @@ export default class Explorer {
         TelemetryProcessor.traceFailure(
           Action.LoadCollections,
           {
+            databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+            defaultExperience: this.defaultExperience && this.defaultExperience(),
             dataExplorerArea: Constants.Areas.ResourceTree,
             error: getErrorMessage(error),
             errorStack: getErrorStack(error),
@@ -2044,6 +2207,8 @@ export default class Explorer {
     );
 
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
+      databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+      defaultExperience: this.defaultExperience && this.defaultExperience(),
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
@@ -2054,6 +2219,8 @@ export default class Explorer {
         TelemetryProcessor.traceSuccess(
           Action.CreateNewNotebook,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
           },
           startKey
@@ -2067,6 +2234,8 @@ export default class Explorer {
         TelemetryProcessor.traceFailure(
           Action.CreateNewNotebook,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
             error: errorMessage,
             errorStack: getErrorStack(error),
@@ -2077,6 +2246,38 @@ export default class Explorer {
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
   }
 
+  public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
+
+    this.uploadFilePane.openWithOptions({
+      paneTitle: "Upload file to notebook server",
+      selectFileInputLabel: "Select file to upload",
+      errorMessage: "Could not upload file",
+      inProgressMessage: "Uploading file to notebook server",
+      successMessage: "Successfully uploaded file to notebook server",
+      onSubmit: async (file: File): Promise<NotebookContentItem> => {
+        const readFileAsText = (inputFile: File): Promise<string> => {
+          const reader = new FileReader();
+          return new Promise((resolve, reject) => {
+            reader.onerror = () => {
+              reader.abort();
+              reject(`Problem parsing file: ${inputFile}`);
+            };
+            reader.onload = () => {
+              resolve(reader.result as string);
+            };
+            reader.readAsText(inputFile);
+          });
+        };
+
+        const fileContent = await readFileAsText(file);
+        return this.uploadFile(file.name, fileContent, parent);
+      },
+      extensions: undefined,
+      submitButtonLabel: "Upload",
+    });
+  }
+
   public refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to refresh notebook list, but notebook is not enabled";
@@ -2158,7 +2359,7 @@ export default class Explorer {
       account: userContext.databaseAccount,
       container: this,
       junoClient: this.notebookManager?.junoClient,
-      selectedTab: selectedTab || GalleryTab.PublicGallery,
+      selectedTab: selectedTab || GalleryTab.OfficialSamples,
       notebookUrl,
       galleryItem,
       isFavorite,
@@ -2239,12 +2440,10 @@ export default class Explorer {
   public onNewCollectionClicked(): void {
     if (this.isPreferredApiCassandra()) {
       this.cassandraAddCollectionPane.open();
-    } else if (userContext.features.enableReactPane) {
-      this.openAddCollectionPanel();
     } else {
       this.addCollectionPane.open(this.selectedDatabaseId());
-      document.getElementById("linkAddCollection").focus();
     }
+    document.getElementById("linkAddCollection").focus();
   }
 
   private refreshCommandBarButtons(): void {
@@ -2373,7 +2572,7 @@ export default class Explorer {
   }
 
   public openDeleteCollectionConfirmationPane(): void {
-    userContext.features.enableKOPanel
+    this.isFeatureEnabled(Constants.Features.enableKOPanel)
       ? this.deleteCollectionConfirmationPane.open()
       : this.openSidePanel(
           "Delete Collection",
@@ -2384,54 +2583,4 @@ export default class Explorer {
           />
         );
   }
-
-  public openDeleteDatabaseConfirmationPane(): void {
-    this.openSidePanel(
-      "Delete Database",
-      <DeleteDatabaseConfirmationPanel
-        explorer={this}
-        openNotificationConsole={this.expandConsole}
-        closePanel={this.closeSidePanel}
-        selectedDatabase={this.findSelectedDatabase()}
-      />
-    );
-  }
-
-  public openUploadItemsPanePane(): void {
-    this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openSettingPane(): void {
-    this.openSidePanel("Settings", <SettingsPane explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openExecuteSprocParamsPanel(): void {
-    this.openSidePanel(
-      "Input parameters",
-      <ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
-    );
-  }
-
-  public async openAddCollectionPanel(): Promise<void> {
-    await this.loadDatabaseOffers();
-    this.openSidePanel(
-      "New Collection",
-      <AddCollectionPanel
-        explorer={this}
-        closePanel={() => this.closeSidePanel()}
-        openNotificationConsole={() => this.expandConsole()}
-      />
-    );
-  }
-  public openUploadFilePanel(parent?: NotebookContentItem): void {
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
-    this.openSidePanel(
-      "Upload File",
-      <UploadFilePane
-        explorer={this}
-        closePanel={this.closeSidePanel}
-        uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)}
-      />
-    );
-  }
 }

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import { NeighborVertexBasicInfo, EditedEdges, GraphNewEdgeData, PossibleVertex } from "./GraphExplorer";
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
 import DeleteIcon from "../../../../images/delete.svg";
 import AddPropertyIcon from "../../../../images/Add-property.svg";

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -9,7 +9,7 @@ import { GraphVizComponentProps } from "./GraphVizComponent";
 import * as GraphData from "./GraphData";
 import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import * as GremlinClient from "./GremlinClient";
@@ -1031,8 +1031,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       TelemetryProcessor.traceSuccess(
         Action.Tab,
         {
+          databaseAccountName: this.props.resourceId,
           databaseName: this.props.databaseId,
           collectionName: this.props.collectionId,
+          defaultExperience: Constants.DefaultAccountExperience.Graph,
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: "Graph",
         },

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts

@@ -1,4 +1,4 @@
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
 import * as sinon from "sinon";
 import { GraphExplorer } from "./GraphExplorer";
@@ -69,7 +69,7 @@ describe("Process Gremlin vertex", () => {
 describe("getLimitedArrayString()", () => {
   const expectedEmptyResult = { result: "", consumedCount: 0 };
   it("should handle null array", () => {
-    expect(GraphUtil.getLimitedArrayString(undefined, 10)).toEqual(expectedEmptyResult);
+    expect(GraphUtil.getLimitedArrayString(null, 10)).toEqual(expectedEmptyResult);
   });
 
   it("should handle empty array", () => {

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts

@@ -7,13 +7,8 @@ interface JoinArrayMaxCharOutput {
   consumedCount: number; // Number of items consumed
 }
 
-interface EdgePropertyType {
+export class GraphUtil {
-  id: string;
+  public static getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
-  outV?: string;
-  inV?: string;
-}
-
-export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
     return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
   }
 
@@ -23,17 +18,17 @@ export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
    * @param graphData
    * @param newNodes (optional) object describing new nodes encountered
    */
-export function createEdgesfromNode(
+  public static createEdgesfromNode(
     vertex: GraphData.GremlinVertex,
     graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
     newNodes?: { [id: string]: boolean }
   ): void {
-  if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
+    if (vertex.hasOwnProperty("outE")) {
-    const outE = vertex.outE;
+      let outE = vertex.outE;
-    for (const label in outE) {
+      for (var label in outE) {
-      $.each(outE[label], (index: number, edge: EdgePropertyType) => {
+        $.each(outE[label], (index: number, edge: any) => {
           // We create our own edge. No need to fetch
-        const e = {
+          let e = {
             id: edge.id,
             label: label,
             inV: edge.inV,
@@ -47,12 +42,12 @@ export function createEdgesfromNode(
         });
       }
     }
-  if (Object.prototype.hasOwnProperty.call(vertex, "inE")) {
+    if (vertex.hasOwnProperty("inE")) {
-    const inE = vertex.inE;
+      let inE = vertex.inE;
-    for (const label in inE) {
+      for (var label in inE) {
-      $.each(inE[label], (index: number, edge: EdgePropertyType) => {
+        $.each(inE[label], (index: number, edge: any) => {
           // We create our own edge. No need to fetch
-        const e = {
+          let e = {
             id: edge.id,
             label: label,
             inV: vertex.id,
@@ -75,7 +70,7 @@ export function createEdgesfromNode(
    * @param maxSize
    * @return
    */
-export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
+  public static getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
     if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
       return { result: "", consumedCount: 0 };
     }
@@ -98,7 +93,7 @@ export function getLimitedArrayString(array: string[], maxSize: number): JoinArr
     };
   }
 
-export function createFetchEdgePairQuery(
+  public static createFetchEdgePairQuery(
     outE: boolean,
     pkid: string,
     excludedEdgeIds: string[],
@@ -109,8 +104,8 @@ export function createFetchEdgePairQuery(
     let gremlinQuery: string;
     if (excludedEdgeIds.length > 0) {
       // build a string up to max char
-    const joined = getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
+      const joined = GraphUtil.getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
-    const hasWithoutStep = joined.result ? `.has(id, without(${joined.result}))` : "";
+      const hasWithoutStep = !!joined.result ? `.has(id, without(${joined.result}))` : "";
 
       if (joined.consumedCount === excludedEdgeIds.length) {
         gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.limit(${pageSize}).as('e').${
@@ -133,7 +128,7 @@ export function createFetchEdgePairQuery(
   /**
    * Trim graph
    */
-export function trimGraph(
+  public static trimGraph(
     currentRoot: GraphData.GremlinVertex,
     graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
   ) {
@@ -146,14 +141,14 @@ export function trimGraph(
     });
   }
 
-export function addRootChildToGraph(
+  public static addRootChildToGraph(
     root: GraphData.GremlinVertex,
     child: GraphData.GremlinVertex,
     graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
   ) {
     child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
     graphData.addVertex(child);
-  createEdgesfromNode(child, graphData);
+    GraphUtil.createEdgesfromNode(child, graphData);
     graphData.addNeighborInfo(child);
   }
 
@@ -161,23 +156,23 @@ export function addRootChildToGraph(
    * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
    * @param value
    */
-export function escapeDoubleQuotes(value: string): string {
+  public static escapeDoubleQuotes(value: string): string {
-  return value === undefined ? value : value.replace(/"/g, '\\"');
+    return value == null ? value : value.replace(/"/g, '\\"');
   }
 
   /**
    * Surround with double-quotes if val is a string.
    * @param val
    */
-export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
+  public static getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
     switch (ip.type) {
       case "number":
       case "boolean":
         return `${ip.value}`;
       case "null":
-      return undefined;
+        return null;
       default:
-      return `"${escapeDoubleQuotes(ip.value as string)}"`;
+        return `"${GraphUtil.escapeDoubleQuotes(ip.value as string)}"`;
     }
   }
 
@@ -185,6 +180,7 @@ export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
    * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
    * @param value
    */
-export function escapeSingleQuotes(value: string): string {
+  public static escapeSingleQuotes(value: string): string {
-  return value === undefined ? value : value.replace(/'/g, "\\'");
+    return value == null ? value : value.replace(/'/g, "\\'");
+  }
 }

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

@@ -4,8 +4,11 @@
  * - inspired from gremlin-javascript for nodejs: https://github.com/jbmusso/gremlin-javascript
  * - tested on cosmosdb gremlin server
  * - only supports sessionless gremlin requests
+ * - Relies on text-encoding polyfill (github.com/inexorabletash/text-encoding) for TextEncoder/TextDecoder on IE, Edge.
  */
 
+import { TextEncoder, TextDecoder } from "text-encoding";
+
 export interface GremlinSimpleClientParameters {
   endpoint: string; // The websocket endpoint
   user: string;

src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import { GraphHighlightedNodeData, NeighborVertexBasicInfo } from "./GraphExplorer";
-import * as GraphUtil from "./GraphUtil";
+import { GraphUtil } from "./GraphUtil";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 
 export interface ReadOnlyNeighborsComponentProps {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts

@@ -1,10 +1,8 @@
 import * as ko from "knockout";
-import { AuthType } from "../../../AuthType";
-import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
-import { updateUserContext } from "../../../UserContext";
-import Explorer from "../../Explorer";
-import NotebookManager from "../../Notebook/NotebookManager";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
+import NotebookManager from "../../Notebook/NotebookManager";
+import Explorer from "../../Explorer";
 
 describe("CommandBarComponentButtonFactory tests", () => {
   let mockExplorer: Explorer;
@@ -15,6 +13,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -54,6 +53,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -118,6 +118,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
@@ -198,6 +199,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
@@ -279,6 +281,7 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(false);
       mockExplorer.isPreferredApiTable = ko.computed(() => true);
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
@@ -337,13 +340,12 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
+      mockExplorer.isAuthWithResourceToken = ko.observable(true);
       mockExplorer.isPreferredApiDocumentDB = ko.computed(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
+
       mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
-      updateUserContext({
-        authType: AuthType.ResourceToken,
-      });
     });
 
     it("should only show New SQL Query and Open Query buttons", () => {

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,38 +1,37 @@
-import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
-import AddCollectionIcon from "../../../../images/AddCollection.svg";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { Areas } from "../../../Common/Constants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
+import AddCollectionIcon from "../../../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
-import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../../../images/AddTrigger.svg";
-import AddUdfIcon from "../../../../images/AddUdf.svg";
 import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
+import * as Constants from "../../../Common/Constants";
+import OpenInTabIcon from "../../../../images/open-in-tab.svg";
+import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
 import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
-import FeedbackIcon from "../../../../images/Feedback-Command.svg";
-import GitHubIcon from "../../../../images/github.svg";
 import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
+import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
+import SettingsIcon from "../../../../images/settings_15x15.svg";
+import AddUdfIcon from "../../../../images/AddUdf.svg";
+import AddTriggerIcon from "../../../../images/AddTrigger.svg";
+import FeedbackIcon from "../../../../images/Feedback-Command.svg";
 import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
 import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
 import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
-import OpenInTabIcon from "../../../../images/open-in-tab.svg";
+import GitHubIcon from "../../../../images/github.svg";
-import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
-import SettingsIcon from "../../../../images/settings_15x15.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
-import { AuthType } from "../../../AuthType";
-import * as Constants from "../../../Common/Constants";
-import { Areas } from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as React from "react";
 import { OpenFullScreen } from "../../OpenFullScreen";
 
 let counter = 0;
 
 export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  if (userContext.authType === AuthType.ResourceToken) {
+  if (container.isAuthWithResourceToken()) {
     return createStaticCommandBarButtonsForResourceToken(container);
   }
 
@@ -164,7 +163,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     const settingsPaneButton: CommandButtonComponentProps = {
       iconSrc: SettingsIcon,
       iconAlt: label,
-      onCommandClick: () => container.openSettingPane(),
+      onCommandClick: () => container.settingsPane.open(),
       commandButtonLabel: undefined,
       ariaLabel: label,
       tooltipText: label,
@@ -407,7 +406,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
   return {
     iconSrc: NewNotebookIcon,
     iconAlt: label,
-    onCommandClick: () => container.openUploadFilePanel(),
+    onCommandClick: () => container.onUploadToNotebookServerClicked(),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,
@@ -549,6 +548,8 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
     onCommandClick: () => {
       if (!connectedToGitHub) {
         TelemetryProcessor.trace(Action.NotebooksGitHubConnect, ActionModifiers.Mark, {
+          databaseAccountName: container.databaseAccount() && container.databaseAccount().name,
+          defaultExperience: container.defaultExperience && container.defaultExperience(),
           dataExplorerArea: Areas.Notebook,
         });
       }

src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx

@@ -1,4 +1,5 @@
 import * as CommandBarUtil from "./CommandBarUtil";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import { ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 
@@ -25,7 +26,7 @@ describe("CommandBarUtil tests", () => {
     const converteds = CommandBarUtil.convertButton([btn], backgroundColor);
     expect(converteds.length).toBe(1);
     const converted = converteds[0];
-    expect(converted.split).toBe(undefined);
+    expect(!converted.split);
     expect(converted.iconProps.imageProps.src).toEqual(btn.iconSrc);
     expect(converted.iconProps.imageProps.alt).toEqual(btn.iconAlt);
     expect(converted.text).toEqual(btn.commandButtonLabel);
@@ -49,7 +50,7 @@ describe("CommandBarUtil tests", () => {
     const converteds = CommandBarUtil.convertButton([btn], "backgroundColor");
     expect(converteds.length).toBe(1);
     const converted = converteds[0];
-    expect(converted.split).toBe(true);
+    expect(converted.split);
     expect(converted.subMenuProps.items.length).toBe(btn.children.length);
     for (let i = 0; i < converted.subMenuProps.items.length; i++) {
       expect(converted.subMenuProps.items[i].text).toEqual(btn.children[i].commandButtonLabel);
@@ -63,6 +64,7 @@ describe("CommandBarUtil tests", () => {
     }
 
     const converteds = CommandBarUtil.convertButton(btns, "backgroundColor");
+    const keys = converteds.map((btn: ICommandBarItemProps) => btn.key);
     const uniqueKeys = converteds
       .map((btn: ICommandBarItemProps) => btn.key)
       .filter((value: string, index: number, self: string[]) => self.indexOf(value) === index);
@@ -73,7 +75,7 @@ describe("CommandBarUtil tests", () => {
     const btn = createButton();
     const backgroundColor = "backgroundColor";
 
-    btn.commandButtonLabel = undefined;
+    btn.commandButtonLabel = null;
     let converted = CommandBarUtil.convertButton([btn], backgroundColor)[0];
     expect(converted.text).toEqual(btn.tooltipText);
 

src/Explorer/Menus/NavBar/ControlBarComponent.tsx

@@ -17,7 +17,7 @@ export class ControlBarComponent extends React.Component<ControlBarComponentProp
     return commandButtonOptions.map(
       (btn: CommandButtonComponentProps, index: number): JSX.Element => {
         // Remove label
-        btn.commandButtonLabel = undefined;
+        btn.commandButtonLabel = null;
         return CommandButtonComponent.renderButton(btn, `${index}`);
       }
     );

src/Explorer/MostRecentActivity/MostRecentActivity.test.ts

@@ -1,86 +0,0 @@
-import { observable } from "knockout";
-import { mostRecentActivity } from "./MostRecentActivity";
-
-describe("MostRecentActivity", () => {
-  const accountId = "some account";
-
-  beforeEach(() => mostRecentActivity.clear(accountId));
-
-  it("Has no items at first", () => {
-    expect(mostRecentActivity.getItems(accountId)).toStrictEqual([]);
-  });
-
-  it("Can record collections being opened", () => {
-    const collectionId = "some collection";
-    const databaseId = "some database";
-    const collection = {
-      id: observable(collectionId),
-      databaseId,
-    };
-
-    mostRecentActivity.collectionWasOpened(accountId, collection);
-
-    const activity = mostRecentActivity.getItems(accountId);
-    expect(activity).toEqual([
-      expect.objectContaining({
-        collectionId,
-        databaseId,
-      }),
-    ]);
-  });
-
-  it("Can record notebooks being opened", () => {
-    const name = "some notebook";
-    const path = "some path";
-    const notebook = { name, path };
-
-    mostRecentActivity.notebookWasItemOpened(accountId, notebook);
-
-    const activity = mostRecentActivity.getItems(accountId);
-    expect(activity).toEqual([expect.objectContaining(notebook)]);
-  });
-
-  it("Filters out duplicates", () => {
-    const name = "some notebook";
-    const path = "some path";
-    const notebook = { name, path };
-    const sameNotebook = { name, path };
-
-    mostRecentActivity.notebookWasItemOpened(accountId, notebook);
-    mostRecentActivity.notebookWasItemOpened(accountId, sameNotebook);
-
-    const activity = mostRecentActivity.getItems(accountId);
-    expect(activity.length).toEqual(1);
-    expect(activity).toEqual([expect.objectContaining(notebook)]);
-  });
-
-  it("Allows for multiple accounts", () => {
-    const name = "some notebook";
-    const path = "some path";
-    const notebook = { name, path };
-
-    const anotherNotebook = { name: "Another " + name, path };
-    const anotherAccountId = "Another " + accountId;
-
-    mostRecentActivity.notebookWasItemOpened(accountId, notebook);
-    mostRecentActivity.notebookWasItemOpened(anotherAccountId, anotherNotebook);
-
-    expect(mostRecentActivity.getItems(accountId)).toEqual([expect.objectContaining(notebook)]);
-    expect(mostRecentActivity.getItems(anotherAccountId)).toEqual([expect.objectContaining(anotherNotebook)]);
-  });
-
-  it("Can store multiple distinct elements, in FIFO order", () => {
-    const name = "some notebook";
-    const path = "some path";
-    const first = { name, path };
-    const second = { name: "Another " + name, path };
-    const third = { name, path: "Another " + path };
-
-    mostRecentActivity.notebookWasItemOpened(accountId, first);
-    mostRecentActivity.notebookWasItemOpened(accountId, second);
-    mostRecentActivity.notebookWasItemOpened(accountId, third);
-
-    const activity = mostRecentActivity.getItems(accountId);
-    expect(activity).toEqual([third, second, first].map(expect.objectContaining));
-  });
-});

src/Explorer/MostRecentActivity/MostRecentActivity.ts

@@ -1,6 +1,9 @@
-import { CollectionBase } from "../../Contracts/ViewModels";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { StorageKey, LocalStorageUtility } from "../../Shared/StorageUtility";
-import { NotebookContentItem } from "../Notebook/NotebookContentItem";
+
+import CollectionIcon from "../../../images/tree-collection.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import Explorer from "../Explorer";
 
 export enum Type {
   OpenCollection,
@@ -8,18 +11,21 @@ export enum Type {
 }
 
 export interface OpenNotebookItem {
-  type: Type.OpenNotebook;
   name: string;
   path: string;
 }
 
 export interface OpenCollectionItem {
-  type: Type.OpenCollection;
   databaseId: string;
   collectionId: string;
 }
 
-type Item = OpenNotebookItem | OpenCollectionItem;
+export interface Item {
+  type: Type;
+  title: string;
+  description: string;
+  data: OpenNotebookItem | OpenCollectionItem;
+}
 
 // Update schemaVersion if you are going to change this interface
 interface StoredData {
@@ -30,11 +36,11 @@ interface StoredData {
 /**
  * Stores most recent activity
  */
-class MostRecentActivity {
+export class MostRecentActivity {
-  private static readonly schemaVersion: string = "2";
+  private static readonly schemaVersion: string = "1";
   private static itemsMaxNumber: number = 5;
   private storedData: StoredData;
-  constructor() {
+  constructor(private container: Explorer) {
     // Retrieve from local storage
     if (LocalStorageUtility.hasItem(StorageKey.MostRecentActivity)) {
       const rawData = LocalStorageUtility.getEntryString(StorageKey.MostRecentActivity);
@@ -91,7 +97,7 @@ class MostRecentActivity {
     LocalStorageUtility.setEntryString(StorageKey.MostRecentActivity, JSON.stringify(this.storedData));
   }
 
-  private addItem(accountId: string, newItem: Item): void {
+  public addItem(accountId: string, newItem: Item): void {
     // When debugging, accountId is "undefined": most recent activity cannot be saved by account. Uncomment to disable.
     // if (!accountId) {
     //   return;
@@ -110,28 +116,47 @@ class MostRecentActivity {
     return this.storedData.itemsMap[accountId] || [];
   }
 
-  public collectionWasOpened(accountId: string, { id, databaseId }: Pick<CollectionBase, "id" | "databaseId">) {
-    const collectionId = id();
-    this.addItem(accountId, {
-      type: Type.OpenCollection,
-      databaseId,
-      collectionId,
-    });
-  }
-
-  public notebookWasItemOpened(accountId: string, { name, path }: Pick<NotebookContentItem, "name" | "path">) {
-    this.addItem(accountId, {
-      type: Type.OpenNotebook,
-      name,
-      path,
-    });
-  }
-
   public clear(accountId: string): void {
     delete this.storedData.itemsMap[accountId];
     this.saveToLocalStorage();
   }
 
+  public onItemClicked(item: Item) {
+    switch (item.type) {
+      case Type.OpenCollection: {
+        const openCollectionitem = item.data as OpenCollectionItem;
+        const collection = this.container.findCollection(
+          openCollectionitem.databaseId,
+          openCollectionitem.collectionId
+        );
+        if (collection) {
+          collection.openTab();
+        }
+        break;
+      }
+      case Type.OpenNotebook: {
+        const openNotebookItem = item.data as OpenNotebookItem;
+        const notebookItem = this.container.createNotebookContentItemFile(openNotebookItem.name, openNotebookItem.path);
+        notebookItem && this.container.openNotebook(notebookItem);
+        break;
+      }
+      default:
+        console.error("Unknown item type", item);
+        break;
+    }
+  }
+
+  public static getItemIcon(item: Item): string {
+    switch (item.type) {
+      case Type.OpenCollection:
+        return CollectionIcon;
+      case Type.OpenNotebook:
+        return NotebookIcon;
+      default:
+        return null;
+    }
+  }
+
   /**
    * Find items by doing strict comparison and remove from array if duplicate is found
    * @param item
@@ -144,7 +169,11 @@ class MostRecentActivity {
     let index = -1;
     for (let i = 0; i < itemsArray.length; i++) {
       const currentItem = itemsArray[i];
-      if (JSON.stringify(currentItem) === JSON.stringify(item)) {
+      if (
+        currentItem.title === item.title &&
+        currentItem.description === item.description &&
+        JSON.stringify(currentItem.data) === JSON.stringify(item.data)
+      ) {
         index = i;
         break;
       }
@@ -174,5 +203,3 @@ class MostRecentActivity {
     }
   }
 }
-
-export const mostRecentActivity = new MostRecentActivity();

src/Explorer/Notebook/FileSystemUtil.ts

@@ -1,3 +1,6 @@
+// Utilities for file system
+
+export class FileSystemUtil {
   /**
    * file list returns path starting with ./blah
    * rename returns simply blah.
@@ -7,7 +10,7 @@
    * @param path1
    * @param path2
    */
-export function isPathEqual(path1: string, path2: string): boolean {
+  public static isPathEqual(path1: string, path2: string): boolean {
     const normalize = (path: string): string => {
       const dotSlash = "./";
       if (path.indexOf(dotSlash) === 0) {
@@ -24,10 +27,11 @@ export function isPathEqual(path1: string, path2: string): boolean {
    * @param path
    * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
    */
-export function stripExtension(path: string, extension: string): string {
+  public static stripExtension(path: string, extension: string): string {
     const splitted = path.split(".");
     if (splitted[splitted.length - 1] === extension) {
       splitted.pop();
     }
     return splitted.join(".");
   }
+}

src/Explorer/Notebook/NTeractUtil.ts

@@ -3,7 +3,8 @@ import { NotebookContentRecordProps, selectors } from "@nteract/core";
 /**
  * A bunch of utilities to interact with nteract
  */
-export function getCurrentCellType(content: NotebookContentRecordProps): "markdown" | "code" | "raw" | undefined {
+export default class NTeractUtil {
+  public static getCurrentCellType(content: NotebookContentRecordProps): "markdown" | "code" | "raw" | undefined {
     if (!content) {
       return undefined;
     }
@@ -18,3 +19,4 @@ export function getCurrentCellType(content: NotebookContentRecordProps): "markdo
 
     return undefined;
   }
+}

src/Explorer/Notebook/NotebookClientV2.ts

@@ -1,14 +1,16 @@
 // Manages all the redux logic for the notebook nteract code
 // TODO: Merge with NotebookClient?
+import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
+import * as Constants from "../../Common/Constants";
+import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
+
 // Vendor modules
 import {
   actions,
   AppState,
-  ContentRecord, createHostRef,
+  createHostRef,
   createKernelspecsRef,
-  HostRecord,
+  makeAppRecord,
-  HostRef,
-  IContentProvider, KernelspecsRef, makeAppRecord,
   makeCommsRecord,
   makeContentsRecord,
   makeEditorsRecord,
@@ -16,22 +18,24 @@ import {
   makeHostsRecord,
   makeJupyterHostRecord,
   makeStateRecord,
-  makeTransformsRecord
+  makeTransformsRecord,
+  ContentRecord,
+  HostRecord,
+  HostRef,
+  KernelspecsRef,
+  IContentProvider,
 } from "@nteract/core";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
-import { Notification } from "react-notification-system";
+import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
-import { AnyAction, Dispatch, Middleware, MiddlewareAPI, Store } from "redux";
+
-import * as Constants from "../../Common/Constants";
-import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import configureStore from "./NotebookComponent/store";
-import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
+
-import IFrameHTML from "./NotebookRenderer/outputs/IFrameHTML";
+import { Notification } from "react-notification-system";
-import IFrameJavaScript from "./NotebookRenderer/outputs/IFrameJavaScript";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };
 
@@ -164,8 +168,8 @@ export class NotebookClientV2 {
               "application/vnd.vega.v5+json": NullTransform,
               "application/vdom.v1+json": TransformVDOM,
               "application/json": Media.Json,
-              "application/javascript": IFrameJavaScript,
+              "application/javascript": Media.JavaScript,
-              "text/html": IFrameHTML,
+              "text/html": Media.HTML,
               "text/markdown": Media.Markdown,
               "text/latex": Media.LaTeX,
               "image/svg+xml": Media.SVG,
@@ -220,6 +224,8 @@ export class NotebookClientV2 {
 
     const traceErrorFct = (title: string, message: string) => {
       TelemetryProcessor.traceFailure(Action.NotebookErrorNotification, {
+        databaseAccountName: this.databaseAccountName,
+        defaultExperience: this.defaultExperience,
         dataExplorerArea: Constants.Areas.Notebook,
         title,
         message,
@@ -264,6 +270,8 @@ export class NotebookClientV2 {
   private handleNotification = (msg: Notification): void => {
     if (msg.level === "error") {
       TelemetryProcessor.traceFailure(Action.NotebookErrorNotification, {
+        databaseAccountName: this.databaseAccountName,
+        defaultExperience: this.defaultExperience,
         dataExplorerArea: Constants.Areas.Notebook,
         title: msg.title,
         message: msg.message,

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -29,7 +29,7 @@ import "@nteract/styles/global-variables.css";
 import "react-table/react-table.css";
 
 import * as CdbActions from "./actions";
-import * as NteractUtil from "../NTeractUtil";
+import NteractUtil from "../NTeractUtil";
 
 export interface NotebookComponentBootstrapperOptions {
   notebookClient: NotebookClientV2;

src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { AppState, ContentRef, selectors } from "@nteract/core";
 import { connect } from "react-redux";
-import * as NteractUtil from "../NTeractUtil";
+import NteractUtil from "../NTeractUtil";
 
 interface VirtualCommandBarComponentProps {
   kernelSpecName: string;

src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx

@@ -1,4 +1,4 @@
-import * as StringUtils from "../../../../../Utils/StringUtils";
+import { StringUtils } from "../../../../../Utils/StringUtils";
 import { actions, AppState, ContentRef, selectors } from "@nteract/core";
 import { IMonacoProps as MonacoEditorProps } from "@nteract/monaco-editor";
 import * as React from "react";

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -1,4 +1,4 @@
-import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer, from } from "rxjs";
+import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
 import { webSocket } from "rxjs/webSocket";
 import { StateObservable } from "redux-observable";
 import { ofType } from "redux-observable";
@@ -44,7 +44,7 @@ import { CdbAppState } from "./types";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import * as TextFile from "./contents/file/text-file";
 import { NotebookUtil } from "../NotebookUtil";
-import * as FileSystemUtil from "../FileSystemUtil";
+import { FileSystemUtil } from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";
 
@@ -54,6 +54,8 @@ interface NotebookServiceConfig extends JupyterServerConfig {
 
 const logFailureToTelemetry = (state: CdbAppState, title: string, error?: string) => {
   TelemetryProcessor.traceFailure(TelemetryAction.NotebookErrorNotification, {
+    databaseAccountName: state.cdb.databaseAccountName,
+    defaultExperience: state.cdb.defaultExperience,
     dataExplorerArea: Constants.Areas.Notebook,
     title,
     error,
@@ -944,39 +946,6 @@ const traceNotebookKernelEpic = (
   );
 };
 
-const resetCellStatusOnExecuteCanceledEpic = (
-  action$: Observable<actions.ExecuteCanceled>,
-  state$: StateObservable<AppState>
-): Observable<actions.UpdateCellStatus> => {
-  return action$.pipe(
-    ofType(actions.EXECUTE_CANCELED),
-    mergeMap((action) => {
-      const contentRef = action.payload.contentRef;
-      const model = state$.value.core.entities.contents.byRef.get(contentRef).model;
-      let busyCellIds: string[] = [];
-
-      if (model.type === "notebook") {
-        const cellMap = model.transient.get("cellMap");
-        if (cellMap) {
-          for (const entry of cellMap.toArray()) {
-            const cellId = entry[0];
-            const status = model.transient.getIn(["cellMap", cellId, "status"]);
-            if (status === "busy") {
-              busyCellIds.push(cellId);
-            }
-          }
-        }
-      }
-
-      return from(busyCellIds).pipe(
-        map((busyCellId) => {
-          return actions.updateCellStatus({ id: busyCellId, contentRef, status: undefined });
-        })
-      );
-    })
-  );
-};
-
 export const allEpics = [
   addInitialCodeCellEpic,
   focusInitialCodeCellEpic,
@@ -993,5 +962,4 @@ export const allEpics = [
   traceNotebookTelemetryEpic,
   traceNotebookInfoEpic,
   traceNotebookKernelEpic,
-  resetCellStatusOnExecuteCanceledEpic,
 ];

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,12 +1,13 @@
-import { stringifyNotebook } from "@nteract/commutable";
-import { FileType, IContent, IContentProvider, IEmptyContent, ServerConfig } from "@nteract/core";
-import { AjaxResponse } from "rxjs/ajax";
 import * as DataModels from "../../Contracts/DataModels";
-import * as StringUtils from "../../Utils/StringUtils";
-import * as FileSystemUtil from "./FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
+import { StringUtils } from "../../Utils/StringUtils";
+import { FileSystemUtil } from "./FileSystemUtil";
 import { NotebookUtil } from "./NotebookUtil";
 
+import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } from "@nteract/core";
+import { AjaxResponse } from "rxjs/ajax";
+import { stringifyNotebook } from "@nteract/commutable";
+
 export class NotebookContentClient {
   constructor(
     private notebookServerInfo: ko.Observable<DataModels.NotebookWorkspaceConnectionInfo>,

src/Explorer/Notebook/NotebookManager.ts

@@ -160,6 +160,9 @@ export default class NotebookManager {
         primaryButtonLabel || "Commit",
         () => {
           TelemetryProcessor.trace(Action.NotebooksGitHubCommit, ActionModifiers.Mark, {
+            databaseAccountName:
+              this.params.container.databaseAccount() && this.params.container.databaseAccount().name,
+            defaultExperience: this.params.container.defaultExperience && this.params.container.defaultExperience(),
             dataExplorerArea: Areas.Notebook,
           });
           resolve(commitMsg);

src/Explorer/Notebook/NotebookRenderer/outputs/IFrameHTML.tsx

@@ -1,63 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-
-interface Props {
-  /**
-   * The HTML string that will be rendered.
-   */
-  data: string;
-  /**
-   * The media type associated with the HTML
-   * string. This defaults to text/html.
-   */
-  mediaType: "text/html";
-}
-
-const StyledIFrame = styled.iframe`
-  width: 100%;
-  border-style: unset;
-`;
-
-export class IFrameHTML extends React.PureComponent<Props> {
-  static defaultProps = {
-    data: "",
-    mediaType: "text/html"
-  };
-
-  frame?: HTMLIFrameElement;
-
-  appendChildDOM(): void {
-    if (!this.frame) {
-      return;
-    }
-
-    this.frame.contentDocument.open();
-    this.frame.contentDocument.write(this.props.data);
-    this.frame.contentDocument.close();
-  }
-
-  componentDidMount(): void {
-    this.appendChildDOM();
-  }
-
-  componentDidUpdate(): void {
-    this.appendChildDOM();
-  }
-
-  render() {
-    return (
-      <StyledIFrame
-        ref={frame => this.frame = frame}
-        allow="accelerometer; autoplay; camera; gyroscope; magnetometer; microphone; xr-spatial-tracking"
-        sandbox="allow-downloads allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox"
-        onLoad={() => this.onFrameLoaded()} />
-    );
-  }
-
-  onFrameLoaded() {
-    this.frame.height = (this.frame.contentDocument.body.scrollHeight + 4) + "px";
-    this.frame.contentDocument.body.style.margin = "0px";
-  }
-}
-
-export default IFrameHTML;

src/Explorer/Notebook/NotebookRenderer/outputs/IFrameJavaScript.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import IFrameHTML from "./IFrameHTML";
-
-interface Props {
-  /**
-   * The JavaScript code that we would like to execute.
-   */
-  data: string;
-  /**
-   * The media type associated with our component.
-   */
-  mediaType: "text/javascript";
-}
-
-export class IFrameJavaScript extends React.PureComponent<Props> {
-  static defaultProps = {
-    data: "",
-    mediaType: "application/javascript"
-  };
-
-  render() {
-    return (
-      <IFrameHTML data={`<script>${this.props.data}</script>`} />
-    );
-  }
-}
-
-export default IFrameJavaScript;

src/Explorer/Notebook/NotebookUtil.ts

@@ -1,7 +1,7 @@
 import path from "path";
 import { ImmutableNotebook, ImmutableCodeCell } from "@nteract/commutable";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
-import * as StringUtils from "../../Utils/StringUtils";
+import { StringUtils } from "../../Utils/StringUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 
 // Must match rx-jupyter' FileType

src/Explorer/OpenActions.ts

@@ -1,7 +1,7 @@
 // TODO convert this file to an action registry in order to have actions and their handlers be more tightly coupled.
 
-import { ActionContracts } from "../Contracts/ExplorerContracts";
 import * as ViewModels from "../Contracts/ViewModels";
+import { ActionContracts } from "../Contracts/ExplorerContracts";
 import Explorer from "./Explorer";
 
 export function handleOpenAction(
@@ -145,7 +145,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: Explorer) {
     (<any>action).paneKind === ActionContracts.PaneKind[ActionContracts.PaneKind.GlobalSettings]
   ) {
     explorer.closeAllPanes();
-    explorer.openSettingPane();
+    explorer.settingsPane.open();
   }
 }
 

src/Explorer/Panes/AddCollectionPane.html

@@ -214,6 +214,7 @@
                                                                                                                   maxAutoPilotThroughputSet: sharedAutoPilotThroughput,
                                                                                                                   autoPilotUsageCost: autoPilotUsageCost,
                                                                                                                   canExceedMaximumValue: canExceedMaximumValue,
+                                                                                                                  showAutoPilot: !isFreeTierAccount(),
                                                                                                                   freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
                                                                                                               }"
         >
@@ -434,6 +435,7 @@
                                               maxAutoPilotThroughputSet: autoPilotThroughput,
                                               autoPilotUsageCost: autoPilotUsageCost,
                                               canExceedMaximumValue: canExceedMaximumValue,
+                                              showAutoPilot: !isFixedStorageSelected(),
                                               freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
                                             }"
           >

src/Explorer/Panes/AddCollectionPane.ts

@@ -1,22 +1,22 @@
-import * as ko from "knockout";
 import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import { createCollection } from "../../Common/dataAccess/createCollection";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as ViewModels from "../../Contracts/ViewModels";
 import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
-import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import editable from "../../Common/EditableUtility";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { configContext, Platform } from "../../ConfigContext";
 import { ContextualPaneBase } from "./ContextualPaneBase";
+import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
+import { createCollection } from "../../Common/dataAccess/createCollection";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { userContext } from "../../UserContext";
 
 export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
   isPreferredApiTable: ko.Computed<boolean>;
@@ -49,7 +49,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
   public throughputDatabase: ViewModels.Editable<number>;
   public isPreferredApiTable: ko.Computed<boolean>;
   public partitionKeyPlaceholder: ko.Computed<string>;
-  public isTryCosmosDBSubscription: ko.Observable<boolean>;
+  public isTryCosmosDBSubscription: ko.Computed<boolean>;
   public maxThroughputRU: ko.Observable<number>;
   public minThroughputRU: ko.Observable<number>;
   public throughputRangeText: ko.Computed<string>;
@@ -186,6 +186,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
+      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -199,28 +200,23 @@ export default class AddCollectionPane extends ContextualPaneBase {
       if (!this.isSharedAutoPilotSelected()) {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
         );
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
@@ -244,6 +240,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
+      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -257,28 +254,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
       if (!this.isAutoPilotSelected()) {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.throughputMultiPartition(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedSpendHtml(
           this.throughputMultiPartition(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.autoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.autoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
@@ -288,7 +285,9 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return estimatedSpend;
     });
 
-    this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
+    this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
+      return (this.container && this.container.isTryCosmosDBSubscription()) || false;
+    });
 
     this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
       if (!!isTryCosmosDB) {
@@ -299,7 +298,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.canRequestSupport = ko.pureComputed(() => {
       if (
         configContext.platform !== Platform.Emulator &&
-        !userContext.isTryCosmosDBSubscription &&
+        !this.container.isTryCosmosDBSubscription() &&
         configContext.platform !== Platform.Portal
       ) {
         const offerThroughput: number = this._getThroughput();
@@ -490,7 +489,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     this.upsellMessage = ko.pureComputed<string>(() => {
       return PricingUtils.getUpsellMessage(
-        userContext.portalEnv,
+        this.container.serverId(),
         this.isFreeTierAccount(),
         this.container.isFirstResourceCreated(),
         this.container.defaultExperience(),
@@ -694,6 +693,8 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.databaseId(databaseId);
 
     const addCollectionPaneOpenMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       collection: ko.toJS({
         id: this.collectionId(),
         storage: this.storage(),
@@ -750,17 +751,13 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return undefined;
     }
 
-    // return undefined if autopilot is selected for the new database/collection
+    if (this.isAutoPilotSelected()) {
-    if (this.databaseCreateNew()) {
+      return undefined;
-      // database is shared and autopilot is sleected for the database
+    }
+
     if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
       return undefined;
     }
-      // database is not shared and autopilot is selected for the collection
-      if (!this.databaseCreateNewShared() && this.isAutoPilotSelected()) {
-        return undefined;
-      }
-    }
 
     return this._getThroughput();
   }
@@ -791,6 +788,8 @@ export default class AddCollectionPane extends ContextualPaneBase {
     const autoPilot: DataModels.AutoPilotCreationSettings = this._getAutoPilot();
 
     const addCollectionPaneStartMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       database: ko.toJS({
         id: this.databaseId(),
         new: this.databaseCreateNew(),
@@ -864,6 +863,8 @@ export default class AddCollectionPane extends ContextualPaneBase {
         this.close();
         this.container.refreshAllDatabases();
         const addCollectionPaneSuccessMessage = {
+          databaseAccountName: this.container.databaseAccount().name,
+          defaultExperience: this.container.defaultExperience(),
           database: ko.toJS({
             id: this.databaseId(),
             new: this.databaseCreateNew(),
@@ -896,6 +897,8 @@ export default class AddCollectionPane extends ContextualPaneBase {
         this.formErrors(errorMessage);
         this.formErrorsDetails(errorMessage);
         const addCollectionPaneFailedMessage = {
+          databaseAccountName: this.container.databaseAccount().name,
+          defaultExperience: this.container.defaultExperience(),
           database: ko.toJS({
             id: this.databaseId(),
             new: this.databaseCreateNew(),
@@ -994,7 +997,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.container.openEnableSynapseLinkDialog();
   }
 
-  public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
+  public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);
 
   public isValid(): boolean {
     // TODO add feature flag that disables validation for customers with custom accounts
@@ -1202,7 +1205,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     if (this.isAnalyticalStorageOn()) {
       // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
+      return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
         ? Constants.AnalyticalStorageTtl.Days90
         : Constants.AnalyticalStorageTtl.Infinite;
     }

src/Explorer/Panes/AddDatabasePane.html

@@ -149,6 +149,7 @@
                                               maxAutoPilotThroughputSet: maxAutoPilotThroughputSet,
                                               autoPilotUsageCost: autoPilotUsageCost,
                                               canExceedMaximumValue: canExceedMaximumValue,
+                                              showAutoPilot: !isFreeTierAccount(),
                                               freeTierExceedThroughputTooltip: freeTierExceedThroughputTooltip
                                           }"
         >