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,7 @@ 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
@@ -51,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
@@ -86,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
@@ -99,6 +110,7 @@ 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
@@ -158,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
@@ -166,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
@@ -248,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
@@ -256,14 +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
@@ -310,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/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,72 +143,48 @@ jobs:
         env:
           NODE_TLS_REJECT_UNAUTHORIZED: 0
   endtoendhosted:
-    name: "End to End Tests"
-    needs: [cleanupaccounts]
+    name: "End to End Hosted Tests"
+    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
-    env:
-      NODE_TLS_REJECT_UNAUTHORIZED: 0
-      PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
-      PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
-      PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
-      PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
-      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
-      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
-      NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-      PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-      MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-      CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
-      TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
-      DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
-    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
+      - name: Use Node.js 12.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'] }}
+          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 }}
+          PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
+          PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
+          PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
+          PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
+          PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
+          NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
+          NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+          NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+          PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
+          MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
+          CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
+          TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
+          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
           path: failed-*
-  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

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

less/tree.less

@@ -7,7 +7,6 @@
     .main {
         height: 100%;
     }
-    border-right: 1px solid @BaseMedium;
 }
 
 .resourceTreeScroll {

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",
@@ -62,6 +61,7 @@
     "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",
@@ -77,7 +77,6 @@
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
     "monaco-editor": "0.18.1",
-    "ms": "2.1.3",
     "msal": "1.4.4",
     "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.134.1",
@@ -214,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

@@ -392,9 +392,6 @@ export class Notebook {
   public static readonly kernelRestartInitialDelayMs = 1000;
   public static readonly kernelRestartMaxDelayMs = 20000;
   public static readonly autoSaveIntervalMs = 120000;
-
-  public static readonly MyNotebooksTitle = "My Notebooks";
-  public static readonly GitHubReposTitle = "GitHub repos";
 }
 
 export class SparkLibrary {

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/ThemeUtility.ts

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

src/Contracts/DataModels.ts

@@ -9,10 +9,10 @@ export interface DatabaseAccount {
 }
 
 export interface DatabaseAccountExtendedProperties {
-  documentEndpoint?: string;
-  tableEndpoint?: string;
-  gremlinEndpoint?: string;
-  cassandraEndpoint?: string;
+  documentEndpoint: string;
+  tableEndpoint: string;
+  gremlinEndpoint: 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

@@ -393,16 +393,7 @@ export interface DataExplorerInputsFrame {
   isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
-}
-
-export interface SelfServeFrameInputs {
-  selfServeType: SelfServeType;
-  databaseAccount: any;
-  subscriptionId: string;
-  resourceGroup: string;
-  authorizationToken: string;
-  csmEndpoint: string;
-  flights?: readonly string[];
+  selfServeType?: SelfServeType;
 }
 
 export interface CollectionCreationDefaults {

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/GitHub/AddRepoComponent.tsx

@@ -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,8 +13,6 @@ import {
   LinkBase,
   Separator,
   TooltipHost,
-  Spinner,
-  SpinnerSize,
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
@@ -31,14 +29,10 @@ export interface GalleryCardComponentProps {
   onFavoriteClick: () => void;
   onUnfavoriteClick: () => void;
   onDownloadClick: () => void;
-  onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) => void;
+  onDeleteClick: () => void;
 }
 
-interface GalleryCardComponentState {
-  isDeletingPublishedNotebook: boolean;
-}
-
-export class GalleryCardComponent extends React.Component<GalleryCardComponentProps, GalleryCardComponentState> {
+export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
   public static readonly CARD_WIDTH = 256;
   private static readonly cardImageHeight = 144;
   public static readonly cardHeightToWidthRatio =
@@ -46,14 +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;
-
-  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;
@@ -73,110 +59,91 @@ 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}
-                text={this.props.data.author}
-                secondaryText={dateString}
-              />
-            </Card.Item>
+        <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
+          <Persona
+            imageUrl={this.props.data.isSample && CosmosDBLogo}
+            text={this.props.data.author}
+            secondaryText={dateString}
+          />
+        </Card.Item>
 
-            <Card.Item>
-              <Image
-                src={this.props.data.thumbnailUrl}
-                width={GalleryCardComponent.CARD_WIDTH}
-                height={GalleryCardComponent.cardImageHeight}
-                imageFit={ImageFit.cover}
-                alt={`${cardTitle} cover image`}
-              />
-            </Card.Item>
+        <Card.Item>
+          <Image
+            src={this.props.data.thumbnailUrl}
+            width={GalleryCardComponent.CARD_WIDTH}
+            height={GalleryCardComponent.cardImageHeight}
+            imageFit={ImageFit.cover}
+            alt={`${cardTitle} cover image`}
+          />
+        </Card.Item>
 
-            <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap>
-                {this.props.data.tags ? (
-                  this.props.data.tags.map((tag, index, array) => (
-                    <span key={tag}>
-                      <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
-                      {index === array.length - 1 ? <></> : ", "}
-                    </span>
-                  ))
-                ) : (
-                  <br />
-                )}
-              </Text>
-
-              <Text
-                styles={{
-                  root: {
-                    fontWeight: FontWeights.semibold,
-                    paddingTop: GalleryCardComponent.cardItemGapSmall,
-                    paddingBottom: GalleryCardComponent.cardItemGapSmall,
-                  },
-                }}
-                nowrap
-              >
-                {cardTitle}
-              </Text>
-
-              <Text variant="small" styles={{ root: { height: 36 } }}>
-                {this.renderTruncatedDescription()}
-              </Text>
-
-              <span>
-                {this.props.data.views !== undefined &&
-                  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 &&
-                  this.generateIconText("Heart", this.props.data.favorites.toString())}
-              </span>
-            </Card.Section>
-
-            {cardButtonsVisible && (
-              <Card.Section
-                styles={{
-                  root: {
-                    marginLeft: GalleryCardComponent.cardItemGapBig,
-                    marginRight: GalleryCardComponent.cardItemGapBig,
-                  },
-                }}
-              >
-                <Separator styles={{ root: { padding: 0, height: 1 } }} />
-
-                <span>
-                  {this.props.isFavorite !== undefined &&
-                    this.generateIconButtonWithTooltip(
-                      this.props.isFavorite ? "HeartFill" : "Heart",
-                      this.props.isFavorite ? "Unfavorite" : "Favorite",
-                      "left",
-                      this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
-                    )}
-
-                  {this.props.showDownload &&
-                    this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
-
-                  {this.props.showDelete &&
-                    this.generateIconButtonWithTooltip("Delete", "Remove", "right", () =>
-                      this.props.onDeleteClick(
-                        () => this.setState({ isDeletingPublishedNotebook: true }),
-                        () => this.setState({ isDeletingPublishedNotebook: false })
-                      )
-                    )}
+        <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
+          <Text variant="small" nowrap>
+            {this.props.data.tags ? (
+              this.props.data.tags.map((tag, index, array) => (
+                <span key={tag}>
+                  <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
+                  {index === array.length - 1 ? <></> : ", "}
                 </span>
-              </Card.Section>
+              ))
+            ) : (
+              <br />
             )}
-          </>
+          </Text>
+
+          <Text
+            styles={{
+              root: {
+                fontWeight: FontWeights.semibold,
+                paddingTop: GalleryCardComponent.cardItemGapSmall,
+                paddingBottom: GalleryCardComponent.cardItemGapSmall,
+              },
+            }}
+            nowrap
+          >
+            {cardTitle}
+          </Text>
+
+          <Text variant="small" styles={{ root: { height: 36 } }}>
+            {this.renderTruncatedDescription()}
+          </Text>
+
+          <span>
+            {this.props.data.views !== undefined && 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 &&
+              this.generateIconText("Heart", this.props.data.favorites.toString())}
+          </span>
+        </Card.Section>
+
+        {cardButtonsVisible && (
+          <Card.Section
+            styles={{
+              root: {
+                marginLeft: GalleryCardComponent.cardItemGapBig,
+                marginRight: GalleryCardComponent.cardItemGapBig,
+              },
+            }}
+          >
+            <Separator styles={{ root: { padding: 0, height: 1 } }} />
+
+            <span>
+              {this.props.isFavorite !== undefined &&
+                this.generateIconButtonWithTooltip(
+                  this.props.isFavorite ? "HeartFill" : "Heart",
+                  this.props.isFavorite ? "Unfavorite" : "Favorite",
+                  "left",
+                  this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
+                )}
+
+              {this.props.showDownload &&
+                this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
+
+              {this.props.showDelete &&
+                this.generateIconButtonWithTooltip("Delete", "Remove", "right", this.props.onDeleteClick)}
+            </span>
+          </Card.Section>
         )}
       </Card>
     );

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));
-    }
+    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) =>
-        this.deleteItem(data, beforeDelete, afterDelete),
+      onDeleteClick: () => this.deleteItem(data),
     };
 
     return (
@@ -710,18 +708,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   };
 
-  private deleteItem = async (data: IGalleryItem, beforeDelete: () => void, afterDelete: () => void): Promise<void> => {
-    GalleryUtils.deleteItem(
-      this.props.container,
-      this.props.junoClient,
-      data,
-      (item) => {
-        this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
-        this.refreshSelectedTab(item);
-      },
-      beforeDelete,
-      afterDelete
-    );
+  private deleteItem = async (data: IGalleryItem): Promise<void> => {
+    GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, (item) => {
+      this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
+      this.refreshSelectedTab(item);
+    });
   };
 
   private onPivotChange = (item: PivotItem): void => {

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"
-      itemKey="OfficialSamples"
-      key="OfficialSamples"
+      headerText="My favorites"
+      itemKey="Favorites"
+      key="Favorites"
       style={
         Object {
           "marginTop": 20,
         }
       }
     >
-      <Stack
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
+      <StyledSpinnerBase
+        size={3}
+      />
+    </PivotItem>
+    <PivotItem
+      headerText="My published work"
+      itemKey="Published"
+      key="Published"
+      style={
+        Object {
+          "marginTop": 20,
         }
-      >
-        <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>
+      }
+    >
+      <StyledSpinnerBase
+        size={3}
+      />
     </PivotItem>
   </StyledPivotBase>
 </div>

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/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.tsx

@@ -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(),
     });
@@ -331,9 +333,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       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),
@@ -406,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(),
         },
@@ -705,8 +709,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     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(),
       },
@@ -805,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(),
           },
@@ -817,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),
@@ -868,8 +875,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     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(),
       },

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

@@ -458,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",
     });
   };

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

@@ -962,6 +962,13 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "memoryUsageInfo": [Function],
+                "mostRecentActivity": MostRecentActivity {
+                  "container": [Circular],
+                  "storedData": Object {
+                    "itemsMap": Object {},
+                    "schemaVersion": "1",
+                  },
+                },
                 "newVertexPane": NewVertexPane {
                   "buildString": [Function],
                   "container": [Circular],
@@ -986,7 +993,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onSwitchToConnectionString": [Function],
                 "openDialog": undefined,
                 "openSidePanel": undefined,
-                "params": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -1019,6 +1025,26 @@ exports[`SettingsComponent renders 1`] = `
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
                 "resourceTokenPartitionKey": [Function],
+                "resourceTree": ResourceTreeAdapter {
+                  "container": [Circular],
+                  "copyNotebook": [Function],
+                  "databaseCollectionIdMap": ArrayHashMap {
+                    "store": HashMap {
+                      "container": Object {},
+                    },
+                  },
+                  "koSubsCollectionIdMap": ArrayHashMap {
+                    "store": HashMap {
+                      "container": Object {},
+                    },
+                  },
+                  "koSubsDatabaseIdMap": ArrayHashMap {
+                    "store": HashMap {
+                      "container": Object {},
+                    },
+                  },
+                  "parameters": [Function],
+                },
                 "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
                   "container": [Circular],
                   "parameters": [Function],
@@ -1041,6 +1067,14 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
                 "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
@@ -2144,6 +2178,13 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "memoryUsageInfo": [Function],
+              "mostRecentActivity": MostRecentActivity {
+                "container": [Circular],
+                "storedData": Object {
+                  "itemsMap": Object {},
+                  "schemaVersion": "1",
+                },
+              },
               "newVertexPane": NewVertexPane {
                 "buildString": [Function],
                 "container": [Circular],
@@ -2168,7 +2209,6 @@ exports[`SettingsComponent renders 1`] = `
               "onSwitchToConnectionString": [Function],
               "openDialog": undefined,
               "openSidePanel": undefined,
-              "params": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -2201,6 +2241,26 @@ exports[`SettingsComponent renders 1`] = `
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
               "resourceTokenPartitionKey": [Function],
+              "resourceTree": ResourceTreeAdapter {
+                "container": [Circular],
+                "copyNotebook": [Function],
+                "databaseCollectionIdMap": ArrayHashMap {
+                  "store": HashMap {
+                    "container": Object {},
+                  },
+                },
+                "koSubsCollectionIdMap": ArrayHashMap {
+                  "store": HashMap {
+                    "container": Object {},
+                  },
+                },
+                "koSubsDatabaseIdMap": ArrayHashMap {
+                  "store": HashMap {
+                    "container": Object {},
+                  },
+                },
+                "parameters": [Function],
+              },
               "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
                 "container": [Circular],
                 "parameters": [Function],
@@ -2223,6 +2283,14 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
               "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
@@ -3339,6 +3407,13 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "memoryUsageInfo": [Function],
+                "mostRecentActivity": MostRecentActivity {
+                  "container": [Circular],
+                  "storedData": Object {
+                    "itemsMap": Object {},
+                    "schemaVersion": "1",
+                  },
+                },
                 "newVertexPane": NewVertexPane {
                   "buildString": [Function],
                   "container": [Circular],
@@ -3363,7 +3438,6 @@ exports[`SettingsComponent renders 1`] = `
                 "onSwitchToConnectionString": [Function],
                 "openDialog": undefined,
                 "openSidePanel": undefined,
-                "params": undefined,
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -3396,6 +3470,26 @@ exports[`SettingsComponent renders 1`] = `
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
                 "resourceTokenPartitionKey": [Function],
+                "resourceTree": ResourceTreeAdapter {
+                  "container": [Circular],
+                  "copyNotebook": [Function],
+                  "databaseCollectionIdMap": ArrayHashMap {
+                    "store": HashMap {
+                      "container": Object {},
+                    },
+                  },
+                  "koSubsCollectionIdMap": ArrayHashMap {
+                    "store": HashMap {
+                      "container": Object {},
+                    },
+                  },
+                  "koSubsDatabaseIdMap": ArrayHashMap {
+                    "store": HashMap {
+                      "container": Object {},
+                    },
+                  },
+                  "parameters": [Function],
+                },
                 "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
                   "container": [Circular],
                   "parameters": [Function],
@@ -3418,6 +3512,14 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
                 "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
@@ -4521,6 +4623,13 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "memoryUsageInfo": [Function],
+              "mostRecentActivity": MostRecentActivity {
+                "container": [Circular],
+                "storedData": Object {
+                  "itemsMap": Object {},
+                  "schemaVersion": "1",
+                },
+              },
               "newVertexPane": NewVertexPane {
                 "buildString": [Function],
                 "container": [Circular],
@@ -4545,7 +4654,6 @@ exports[`SettingsComponent renders 1`] = `
               "onSwitchToConnectionString": [Function],
               "openDialog": undefined,
               "openSidePanel": undefined,
-              "params": undefined,
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
                 "container": [Circular],
@@ -4578,6 +4686,26 @@ exports[`SettingsComponent renders 1`] = `
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
               "resourceTokenPartitionKey": [Function],
+              "resourceTree": ResourceTreeAdapter {
+                "container": [Circular],
+                "copyNotebook": [Function],
+                "databaseCollectionIdMap": ArrayHashMap {
+                  "store": HashMap {
+                    "container": Object {},
+                  },
+                },
+                "koSubsCollectionIdMap": ArrayHashMap {
+                  "store": HashMap {
+                    "container": Object {},
+                  },
+                },
+                "koSubsDatabaseIdMap": ArrayHashMap {
+                  "store": HashMap {
+                    "container": Object {},
+                  },
+                },
+                "parameters": [Function],
+              },
               "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
                 "container": [Circular],
                 "parameters": [Function],
@@ -4600,6 +4728,14 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
               "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { shallow } from "enzyme";
 import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
-import { NumberUiType, SmartUiInput, DescriptionType } from "../../../SelfServe/SelfServeTypes";
+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.",

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -6,13 +6,12 @@ import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { TextField } from "office-ui-fabric-react/lib/TextField";
 import { Text } from "office-ui-fabric-react/lib/Text";
 import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
-import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+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,
@@ -20,7 +19,6 @@ import {
   SmartUiInput,
 } from "../../../SelfServe/SelfServeTypes";
 import { TFunction } from "i18next";
-import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
 
 /**
  * Generic UX renderer
@@ -31,14 +29,15 @@ import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTip
  */
 
 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;
-  isDynamicDescription?: boolean;
+  description: Description;
 }
 
 type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
@@ -125,27 +123,25 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
   private renderInfo(info: Info): JSX.Element {
     return (
-      info && (
-        <Text>
-          {this.props.getTranslation(info.messageTKey)}{" "}
-          {info.link && (
-            <Link href={info.link.href} target="_blank">
-              {this.props.getTranslation(info.link.textTKey)}
-            </Link>
-          )}
-        </Text>
-      )
+      <MessageBar styles={{ root: { width: 400 } }}>
+        {this.props.getTranslation(info.messageTKey)}
+        {info.link && (
+          <Link href={info.link.href} target="_blank">
+            {this.props.getTranslation(info.link.textTKey)}
+          </Link>
+        )}
+      </MessageBar>
     );
   }
 
-  private renderTextInput(input: StringInput, labelId: string): 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 (
       <div className="stringInputContainer">
         <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)}
@@ -153,35 +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,
+                },
+              },
+            },
           }}
         />
       </div>
     );
   }
 
-  private renderDescription(input: DescriptionDisplay, labelId: string): JSX.Element {
-    const dataFieldName = input.dataFieldName;
-    const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
-    if (!description) {
-      return this.renderError("Description is not provided.");
-    }
-    const descriptionElement = (
-      <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
-        {this.props.getTranslation(description.textTKey)}{" "}
+  private renderDescription(input: DescriptionDisplay): JSX.Element {
+    const description = input.description;
+    return (
+      <Text id={`${input.dataFieldName}-text-display`}>
+        {this.props.getTranslation(input.description.textTKey)}{" "}
         {description.link && (
-          <Link target="_blank" href={description.link.href}>
-            {this.props.getTranslation(description.link.textTKey)}
+          <Link target="_blank" href={input.description.link.href}>
+            {this.props.getTranslation(input.description.link.textTKey)}
           </Link>
         )}
       </Text>
     );
-
-    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 {
@@ -227,12 +220,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return undefined;
   };
 
-  private renderNumberInput(input: NumberInput, labelId: string): 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,
     };
 
@@ -249,8 +243,13 @@ 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}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
@@ -267,6 +266,10 @@ 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,
             }}
           />
@@ -277,13 +280,13 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     }
   }
 
-  private renderBooleanInput(input: BooleanInput, labelId: string): 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 (
       <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)}
@@ -294,8 +297,8 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     );
   }
 
-  private renderChoiceInput(input: ChoiceInput, labelId: string): JSX.Element {
-    const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
+  private renderChoiceInput(input: ChoiceInput): JSX.Element {
+    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;
@@ -305,7 +308,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return (
       <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)}
@@ -316,53 +319,40 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
         }))}
         styles={{
           root: { width: 400 },
+          label: {
+            ...SmartUiComponent.labelStyle,
+            fontWeight: 600,
+          },
           dropdown: SmartUiComponent.labelStyle,
         }}
       />
     );
   }
 
-  private renderError(errorMessage: string): JSX.Element {
-    return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
+  private renderError(input: AnyDisplay): JSX.Element {
+    return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
   }
 
-  private renderDisplayWithInfoBubble(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`;
-    return (
-      <Stack>
-        {input.labelTKey && (
-          <Label id={labelId}>
-            <ToolTipLabelComponent
-              label={this.props.getTranslation(input.labelTKey)}
-              toolTipElement={this.renderInfo(info)}
-            />
-          </Label>
-        )}
-        {this.renderDisplay(input, labelId)}
-      </Stack>
-    );
-  }
-
-  private renderDisplay(input: AnyDisplay, labelId: string): JSX.Element {
     switch (input.type) {
       case "string":
-        if ("description" in input || "isDynamicDescription" in input) {
-          return this.renderDescription(input as DescriptionDisplay, labelId);
+        if ("description" in input) {
+          return this.renderDescription(input as DescriptionDisplay);
         }
-        return this.renderTextInput(input as StringInput, labelId);
+        return this.renderTextInput(input as StringInput);
       case "number":
-        return this.renderNumberInput(input as NumberInput, labelId);
+        return this.renderNumberInput(input as NumberInput);
       case "boolean":
-        return this.renderBooleanInput(input as BooleanInput, labelId);
+        return this.renderBooleanInput(input as BooleanInput);
       case "object":
-        return this.renderChoiceInput(input as ChoiceInput, labelId);
+        return this.renderChoiceInput(input as ChoiceInput);
       default:
         throw new Error(`Unknown input type: ${input.type}`);
     }
@@ -373,7 +363,10 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
     return (
       <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        <Stack.Item>{node.input && this.renderDisplayWithInfoBubble(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,21 +40,18 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <Text
-            aria-labelledby="description-label"
-            id="description-text-display"
+        <Text
+          id="description-text-display"
+        >
+          this is an example description text.
+           
+          <StyledLinkBase
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+            target="_blank"
           >
-            this is an example description text.
-             
-            <StyledLinkBase
-              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-              target="_blank"
-            >
-              Click here for more information.
-            </StyledLinkBase>
-          </Text>
-        </Stack>
+            Click here for more information.
+          </StyledLinkBase>
+        </Text>
       </StackItem>
     </Stack>
   </div>
@@ -52,53 +67,53 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="throughput-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (input)"
-            />
-          </StyledLabelBase>
-          <Stack
+        <Stack
+          styles={
+            Object {
+              "root": Object {
+                "width": 400,
+              },
+            }
+          }
+          tokens={
+            Object {
+              "childrenGap": 2,
+            }
+          }
+        >
+          <CustomizedSpinButton
+            ariaLabel="Throughput (input)"
+            decrementButtonIcon={
+              Object {
+                "iconName": "ChevronDownSmall",
+              }
+            }
+            disabled={true}
+            id="throughput-spinner-input"
+            incrementButtonIcon={
+              Object {
+                "iconName": "ChevronUpSmall",
+              }
+            }
+            label="Throughput (input)"
+            labelPosition={0}
+            max={500}
+            min={400}
+            onDecrement={[Function]}
+            onIncrement={[Function]}
+            onValidate={[Function]}
+            step={10}
             styles={
               Object {
-                "root": Object {
-                  "width": 400,
+                "label": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                  "fontWeight": 600,
                 },
               }
             }
-            tokens={
-              Object {
-                "childrenGap": 2,
-              }
-            }
-          >
-            <CustomizedSpinButton
-              aria-labelledby="throughput-label"
-              ariaLabel="Throughput (input)"
-              decrementButtonIcon={
-                Object {
-                  "iconName": "ChevronDownSmall",
-                }
-              }
-              disabled={true}
-              id="throughput-spinner-input"
-              incrementButtonIcon={
-                Object {
-                  "iconName": "ChevronUpSmall",
-                }
-              }
-              label=""
-              labelPosition={0}
-              max={500}
-              min={400}
-              onDecrement={[Function]}
-              onIncrement={[Function]}
-              onValidate={[Function]}
-              step={10}
-            />
-          </Stack>
+          />
         </Stack>
       </StackItem>
     </Stack>
@@ -115,39 +130,37 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="throughput2-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (Slider)"
-            />
-          </StyledLabelBase>
-          <div
-            id="throughput2-slider-input"
-          >
-            <StyledSliderBase
-              ariaLabel="Throughput (Slider)"
-              disabled={true}
-              max={500}
-              min={400}
-              onChange={[Function]}
-              step={10}
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                  "valueLabel": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
-                }
+        <div
+          id="throughput2-slider-input"
+        >
+          <StyledSliderBase
+            ariaLabel="Throughput (Slider)"
+            disabled={true}
+            label="Throughput (Slider)"
+            max={500}
+            min={400}
+            onChange={[Function]}
+            step={10}
+            styles={
+              Object {
+                "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",
+                  "fontSize": 12,
+                },
               }
-            />
-          </div>
-        </Stack>
+            }
+          />
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -184,34 +197,35 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="containerId-label"
-          >
-            <ToolTipLabelComponent
-              label="Container id"
-            />
-          </StyledLabelBase>
-          <div
-            className="stringInputContainer"
-          >
-            <StyledTextFieldBase
-              aria-labelledby="containerId-label"
-              disabled={true}
-              id="containerId-textField-input"
-              onChange={[Function]}
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
+        <div
+          className="stringInputContainer"
+        >
+          <StyledTextFieldBase
+            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=""
-            />
-          </div>
-        </Stack>
+            }
+            type="text"
+            value=""
+          />
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -227,31 +241,22 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="analyticalStore-label"
-          >
-            <ToolTipLabelComponent
-              label="Analytical Store"
-            />
-          </StyledLabelBase>
-          <StyledToggleBase
-            aria-labelledby="analyticalStore-label"
-            checked={false}
-            disabled={true}
-            id="analyticalStore-toggle-input"
-            offText="Disabled"
-            onChange={[Function]}
-            onText="Enabled"
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-              }
+        <StyledToggleBase
+          checked={false}
+          disabled={true}
+          id="analyticalStore-toggle-input"
+          label="Analytical Store"
+          offText="Disabled"
+          onChange={[Function]}
+          onText="Enabled"
+          styles={
+            Object {
+              "root": Object {
+                "width": 400,
+              },
             }
-          />
-        </Stack>
+          }
+        />
       </StackItem>
     </Stack>
   </div>
@@ -267,50 +272,47 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="database-label"
-          >
-            <ToolTipLabelComponent
-              label="Database"
-            />
-          </StyledLabelBase>
-          <StyledWithResponsiveMode
-            aria-labelledby="database-label"
-            disabled={true}
-            id="database-dropdown-input"
-            onChange={[Function]}
-            options={
-              Array [
-                Object {
-                  "key": "db1",
-                  "text": "Database 1",
-                },
-                Object {
-                  "key": "db2",
-                  "text": "Database 2",
-                },
-                Object {
-                  "key": "db3",
-                  "text": "Database 3",
-                },
-              ]
-            }
-            selectedKey="db2"
-            styles={
+        <StyledWithResponsiveMode
+          disabled={true}
+          id="database-dropdown-input"
+          label="Database"
+          onChange={[Function]}
+          options={
+            Array [
               Object {
-                "dropdown": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-                "root": Object {
-                  "width": 400,
-                },
-              }
+                "key": "db1",
+                "text": "Database 1",
+              },
+              Object {
+                "key": "db2",
+                "text": "Database 2",
+              },
+              Object {
+                "key": "db3",
+                "text": "Database 3",
+              },
+            ]
+          }
+          selectedKey="db2"
+          styles={
+            Object {
+              "dropdown": Object {
+                "color": "#393939",
+                "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>
+          }
+        />
       </StackItem>
     </Stack>
   </div>
@@ -326,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"
   >
@@ -339,21 +359,18 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <Text
-            aria-labelledby="description-label"
-            id="description-text-display"
+        <Text
+          id="description-text-display"
+        >
+          this is an example description text.
+           
+          <StyledLinkBase
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+            target="_blank"
           >
-            this is an example description text.
-             
-            <StyledLinkBase
-              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-              target="_blank"
-            >
-              Click here for more information.
-            </StyledLinkBase>
-          </Text>
-        </Stack>
+            Click here for more information.
+          </StyledLinkBase>
+        </Text>
       </StackItem>
     </Stack>
   </div>
@@ -369,53 +386,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="throughput-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (input)"
-            />
-          </StyledLabelBase>
-          <Stack
+        <Stack
+          styles={
+            Object {
+              "root": Object {
+                "width": 400,
+              },
+            }
+          }
+          tokens={
+            Object {
+              "childrenGap": 2,
+            }
+          }
+        >
+          <CustomizedSpinButton
+            ariaLabel="Throughput (input)"
+            decrementButtonIcon={
+              Object {
+                "iconName": "ChevronDownSmall",
+              }
+            }
+            disabled={false}
+            id="throughput-spinner-input"
+            incrementButtonIcon={
+              Object {
+                "iconName": "ChevronUpSmall",
+              }
+            }
+            label="Throughput (input)"
+            labelPosition={0}
+            max={500}
+            min={400}
+            onDecrement={[Function]}
+            onIncrement={[Function]}
+            onValidate={[Function]}
+            step={10}
             styles={
               Object {
-                "root": Object {
-                  "width": 400,
+                "label": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                  "fontWeight": 600,
                 },
               }
             }
-            tokens={
-              Object {
-                "childrenGap": 2,
-              }
-            }
-          >
-            <CustomizedSpinButton
-              aria-labelledby="throughput-label"
-              ariaLabel="Throughput (input)"
-              decrementButtonIcon={
-                Object {
-                  "iconName": "ChevronDownSmall",
-                }
-              }
-              disabled={false}
-              id="throughput-spinner-input"
-              incrementButtonIcon={
-                Object {
-                  "iconName": "ChevronUpSmall",
-                }
-              }
-              label=""
-              labelPosition={0}
-              max={500}
-              min={400}
-              onDecrement={[Function]}
-              onIncrement={[Function]}
-              onValidate={[Function]}
-              step={10}
-            />
-          </Stack>
+          />
         </Stack>
       </StackItem>
     </Stack>
@@ -432,38 +449,36 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="throughput2-label"
-          >
-            <ToolTipLabelComponent
-              label="Throughput (Slider)"
-            />
-          </StyledLabelBase>
-          <div
-            id="throughput2-slider-input"
-          >
-            <StyledSliderBase
-              ariaLabel="Throughput (Slider)"
-              max={500}
-              min={400}
-              onChange={[Function]}
-              step={10}
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                  "valueLabel": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
-                }
+        <div
+          id="throughput2-slider-input"
+        >
+          <StyledSliderBase
+            ariaLabel="Throughput (Slider)"
+            label="Throughput (Slider)"
+            max={500}
+            min={400}
+            onChange={[Function]}
+            step={10}
+            styles={
+              Object {
+                "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",
+                  "fontSize": 12,
+                },
               }
-            />
-          </div>
-        </Stack>
+            }
+          />
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -500,33 +515,34 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="containerId-label"
-          >
-            <ToolTipLabelComponent
-              label="Container id"
-            />
-          </StyledLabelBase>
-          <div
-            className="stringInputContainer"
-          >
-            <StyledTextFieldBase
-              aria-labelledby="containerId-label"
-              id="containerId-textField-input"
-              onChange={[Function]}
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
+        <div
+          className="stringInputContainer"
+        >
+          <StyledTextFieldBase
+            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=""
-            />
-          </div>
-        </Stack>
+            }
+            type="text"
+            value=""
+          />
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -542,30 +558,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="analyticalStore-label"
-          >
-            <ToolTipLabelComponent
-              label="Analytical Store"
-            />
-          </StyledLabelBase>
-          <StyledToggleBase
-            aria-labelledby="analyticalStore-label"
-            checked={false}
-            id="analyticalStore-toggle-input"
-            offText="Disabled"
-            onChange={[Function]}
-            onText="Enabled"
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-              }
+        <StyledToggleBase
+          checked={false}
+          id="analyticalStore-toggle-input"
+          label="Analytical Store"
+          offText="Disabled"
+          onChange={[Function]}
+          onText="Enabled"
+          styles={
+            Object {
+              "root": Object {
+                "width": 400,
+              },
             }
-          />
-        </Stack>
+          }
+        />
       </StackItem>
     </Stack>
   </div>
@@ -581,49 +588,46 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
-          <StyledLabelBase
-            id="database-label"
-          >
-            <ToolTipLabelComponent
-              label="Database"
-            />
-          </StyledLabelBase>
-          <StyledWithResponsiveMode
-            aria-labelledby="database-label"
-            id="database-dropdown-input"
-            onChange={[Function]}
-            options={
-              Array [
-                Object {
-                  "key": "db1",
-                  "text": "Database 1",
-                },
-                Object {
-                  "key": "db2",
-                  "text": "Database 2",
-                },
-                Object {
-                  "key": "db3",
-                  "text": "Database 3",
-                },
-              ]
-            }
-            selectedKey="db2"
-            styles={
+        <StyledWithResponsiveMode
+          id="database-dropdown-input"
+          label="Database"
+          onChange={[Function]}
+          options={
+            Array [
               Object {
-                "dropdown": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-                "root": Object {
-                  "width": 400,
-                },
-              }
+                "key": "db1",
+                "text": "Database 1",
+              },
+              Object {
+                "key": "db2",
+                "text": "Database 2",
+              },
+              Object {
+                "key": "db3",
+                "text": "Database 3",
+              },
+            ]
+          }
+          selectedKey="db2"
+          styles={
+            Object {
+              "dropdown": Object {
+                "color": "#393939",
+                "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>
+          }
+        />
       </StackItem>
     </Stack>
   </div>

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

@@ -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/Explorer.tsx

@@ -1,86 +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 { 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 { readCollection } from "../Common/dataAccess/readCollection";
-import { readDatabases } from "../Common/dataAccess/readDatabases";
-import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
-import * as Logger from "../Common/Logger";
-import { sendCachedDataMessage, sendMessage } from "../Common/MessageHandler";
-import { QueriesClient } from "../Common/QueriesClient";
-import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
-import { configContext, Platform } from "../ConfigContext";
-import * as DataModels from "../Contracts/DataModels";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { SubscriptionType } from "../Contracts/SubscriptionType";
-import * as ViewModels from "../Contracts/ViewModels";
-import { IGalleryItem, IPinnedRepo } 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 { 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 { DialogProps, TextFieldProps } from "./Controls/Dialog";
-import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
-import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
-import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import { FileSystemUtil } from "./Notebook/FileSystemUtil";
-import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
-import { NotebookUtil } from "./Notebook/NotebookUtil";
+import * as Constants 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 { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
+import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
+import AuthHeadersUtil from "../Platform/Hosted/Authorization";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
-import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import Database from "./Tree/Database";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
-import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
 import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
+import { readCollection } from "../Common/dataAccess/readCollection";
+import { readDatabases } from "../Common/dataAccess/readDatabases";
+import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
+import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
+import Q from "q";
+import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
+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 { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
+import { AuthType } from "../AuthType";
+import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
+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 { 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 { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { QueriesClient } from "../Common/QueriesClient";
+import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
+import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
+import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
+import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
+import { RouteHandler } from "../RouteHandlers/RouteHandler";
 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 { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
-import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
-import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
-import TabsBase from "./Tabs/TabsBase";
-import { TabsManager } from "./Tabs/TabsManager";
-import TerminalTab from "./Tabs/TerminalTab";
-import Database from "./Tree/Database";
-import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
+import { ReactAdapter } from "../Bindings/ReactBindingHandler";
+import { toRawContentUri, fromContentUri } from "../Utils/GitHubUtils";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 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
@@ -94,10 +102,6 @@ export interface ExplorerParams {
   closeSidePanel: () => void;
   closeDialog: () => void;
   openDialog: (props: DialogProps) => void;
-
-  onRefreshNotebookList: () => void;
-  initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
-  getMyNotebooksContentRoot: () => NotebookContentItem;
 }
 
 export default class Explorer {
@@ -115,55 +119,20 @@ 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>;
@@ -171,6 +140,7 @@ export default class Explorer {
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
+  public mostRecentActivity: MostRecentActivity.MostRecentActivity;
 
   // Notification Console
   private setIsNotificationConsoleExpanded: (isExpanded: boolean) => void;
@@ -189,11 +159,9 @@ export default class Explorer {
   public selectedCollectionId: ko.Computed<string>;
   public isLeftPaneExpanded: ko.Observable<boolean>;
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
-  /**
-   * @deprecated
-   * Use a local loading state and spinner instead. Using a global isRefreshing state causes problems.
-   * */
   public isRefreshingExplorer: ko.Observable<boolean>;
+  private resourceTree: ResourceTreeAdapter;
+  private selfServeComponentAdapter: SelfServeComponentAdapter;
 
   // Resource Token
   public resourceTokenDatabaseId: ko.Observable<string>;
@@ -277,10 +245,11 @@ export default class Explorer {
 
   // React adapters
   private commandBarComponentAdapter: CommandBarComponentAdapter;
+  private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
-  constructor(public params?: ExplorerParams) {
+  constructor(params?: ExplorerParams) {
     this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
     this.setNotificationConsoleData = params?.setNotificationConsoleData;
     this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
@@ -320,6 +289,7 @@ export default class Explorer {
       }
     });
     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) => {
@@ -357,6 +327,8 @@ export default class Explorer {
 
             TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
               isNotebookEnabled: this.isNotebookEnabled(),
+              databaseAccountName: this.databaseAccount() && this.databaseAccount().name,
+              defaultExperience: this.defaultExperience && this.defaultExperience(),
               dataExplorerArea: Constants.Areas.Notebook,
             });
 
@@ -471,7 +443,6 @@ export default class Explorer {
         databaseAccount
       );
       this.defaultExperience(defaultExperience);
-      // TODO. Remove this entirely
       updateUserContext({
         defaultExperience: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience),
       });
@@ -695,6 +666,7 @@ export default class Explorer {
     });
 
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
@@ -777,90 +749,99 @@ export default class Explorer {
       $(document.body).click(() => $(".commandDropdownContainer").hide());
     });
 
-    switch (userContext.apiType) {
-      case "SQL":
-        this.addCollectionText("New Container");
-        this.addDatabaseText("New Database");
-        this.collectionTitle("SQL API");
-        this.collectionTreeNodeAltText("Container");
-        this.deleteCollectionText("Delete Container");
-        this.deleteDatabaseText("Delete Database");
-        this.addCollectionPane.title("Add Container");
-        this.addCollectionPane.collectionIdTitle("Container id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
-          "Provision dedicated throughput for this container"
-        );
-        this.deleteCollectionConfirmationPane.title("Delete Container");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
-        this.refreshTreeTitle("Refresh containers");
-        break;
-      case "Mongo":
-        this.addCollectionText("New Collection");
-        this.addDatabaseText("New Database");
-        this.collectionTitle("Collections");
-        this.collectionTreeNodeAltText("Collection");
-        this.deleteCollectionText("Delete Collection");
-        this.deleteDatabaseText("Delete Database");
-        this.addCollectionPane.title("Add Collection");
-        this.addCollectionPane.collectionIdTitle("Collection id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
-          "Provision dedicated throughput for this collection"
-        );
-        this.refreshTreeTitle("Refresh collections");
-        break;
-      case "Gremlin":
-        this.addCollectionText("New Graph");
-        this.addDatabaseText("New Database");
-        this.deleteCollectionText("Delete Graph");
-        this.deleteDatabaseText("Delete Database");
-        this.collectionTitle("Gremlin API");
-        this.collectionTreeNodeAltText("Graph");
-        this.addCollectionPane.title("Add Graph");
-        this.addCollectionPane.collectionIdTitle("Graph id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
-        this.deleteCollectionConfirmationPane.title("Delete Graph");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
-        this.refreshTreeTitle("Refresh graphs");
-        break;
-      case "Tables":
-        this.addCollectionText("New Table");
-        this.addDatabaseText("New Database");
-        this.deleteCollectionText("Delete Table");
-        this.deleteDatabaseText("Delete Database");
-        this.collectionTitle("Azure Table API");
-        this.collectionTreeNodeAltText("Table");
-        this.addCollectionPane.title("Add Table");
-        this.addCollectionPane.collectionIdTitle("Table id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
-        this.refreshTreeTitle("Refresh tables");
-        this.addTableEntityPane.title("Add Table Entity");
-        this.editTableEntityPane.title("Edit Table Entity");
-        this.deleteCollectionConfirmationPane.title("Delete Table");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-        this.tableDataClient = new TablesAPIDataClient();
-        break;
-      case "Cassandra":
-        this.addCollectionText("New Table");
-        this.addDatabaseText("New Keyspace");
-        this.deleteCollectionText("Delete Table");
-        this.deleteDatabaseText("Delete Keyspace");
-        this.collectionTitle("Cassandra API");
-        this.collectionTreeNodeAltText("Table");
-        this.addCollectionPane.title("Add Table");
-        this.addCollectionPane.collectionIdTitle("Table id");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
-        this.refreshTreeTitle("Refresh tables");
-        this.addTableEntityPane.title("Add Table Row");
-        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;
-    }
+    // TODO move this to API customization class
+    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");
+          this.collectionTreeNodeAltText("Container");
+          this.deleteCollectionText("Delete Container");
+          this.deleteDatabaseText("Delete Database");
+          this.addCollectionPane.title("Add Container");
+          this.addCollectionPane.collectionIdTitle("Container id");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle(
+            "Provision dedicated throughput for this container"
+          );
+          this.deleteCollectionConfirmationPane.title("Delete Container");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
+          this.refreshTreeTitle("Refresh containers");
+          break;
+        case Constants.DefaultAccountExperience.MongoDB.toLowerCase():
+        case Constants.DefaultAccountExperience.ApiForMongoDB.toLowerCase():
+          this.addCollectionText("New Collection");
+          this.addDatabaseText("New Database");
+          this.collectionTitle("Collections");
+          this.collectionTreeNodeAltText("Collection");
+          this.deleteCollectionText("Delete Collection");
+          this.deleteDatabaseText("Delete Database");
+          this.addCollectionPane.title("Add Collection");
+          this.addCollectionPane.collectionIdTitle("Collection id");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle(
+            "Provision dedicated throughput for this collection"
+          );
+          this.refreshTreeTitle("Refresh collections");
+          break;
+        case Constants.DefaultAccountExperience.Graph.toLowerCase():
+          this.addCollectionText("New Graph");
+          this.addDatabaseText("New Database");
+          this.deleteCollectionText("Delete Graph");
+          this.deleteDatabaseText("Delete Database");
+          this.collectionTitle("Gremlin API");
+          this.collectionTreeNodeAltText("Graph");
+          this.addCollectionPane.title("Add Graph");
+          this.addCollectionPane.collectionIdTitle("Graph id");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
+          this.deleteCollectionConfirmationPane.title("Delete Graph");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
+          this.refreshTreeTitle("Refresh graphs");
+          break;
+        case Constants.DefaultAccountExperience.Table.toLowerCase():
+          this.addCollectionText("New Table");
+          this.addDatabaseText("New Database");
+          this.deleteCollectionText("Delete Table");
+          this.deleteDatabaseText("Delete Database");
+          this.collectionTitle("Azure Table API");
+          this.collectionTreeNodeAltText("Table");
+          this.addCollectionPane.title("Add Table");
+          this.addCollectionPane.collectionIdTitle("Table id");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
+          this.refreshTreeTitle("Refresh tables");
+          this.addTableEntityPane.title("Add Table Entity");
+          this.editTableEntityPane.title("Edit Table Entity");
+          this.deleteCollectionConfirmationPane.title("Delete Table");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+          this.tableDataClient = new TablesAPIDataClient();
+          break;
+        case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
+          this.addCollectionText("New Table");
+          this.addDatabaseText("New Keyspace");
+          this.deleteCollectionText("Delete Table");
+          this.deleteDatabaseText("Delete Keyspace");
+          this.collectionTitle("Cassandra API");
+          this.collectionTreeNodeAltText("Table");
+          this.addCollectionPane.title("Add Table");
+          this.addCollectionPane.collectionIdTitle("Table id");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
+          this.refreshTreeTitle("Refresh tables");
+          this.addTableEntityPane.title("Add Table Row");
+          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();
 
@@ -880,6 +861,7 @@ export default class Explorer {
         this.notebookManager.initialize({
           container: this,
           notebookBasePath: this.notebookBasePath,
+          resourceTree: this.resourceTree,
           refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
           refreshNotebookList: () => this.refreshNotebookList(),
         });
@@ -894,6 +876,7 @@ export default class Explorer {
 
     this.isSparkEnabled = ko.observable(false);
     this.isSparkEnabled.subscribe((isEnabled: boolean) => this.refreshCommandBarButtons());
+    this.resourceTree = new ResourceTreeAdapter(this);
     this.resourceTreeForResourceToken = new ResourceTreeAdapterForResourceToken(this);
     this.notebookServerInfo = ko.observable<DataModels.NotebookWorkspaceConnectionInfo>({
       notebookServerEndpoint: undefined,
@@ -943,6 +926,8 @@ export default class Explorer {
 
       featureSubcription.dispose();
     });
+
+    this.mostRecentActivity = new MostRecentActivity.MostRecentActivity(this);
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -985,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);
@@ -993,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);
         }
@@ -1088,11 +1073,15 @@ 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,
       });
     }
@@ -1106,6 +1095,8 @@ export default class Explorer {
         TelemetryProcessor.traceSuccess(
           Action.LoadDatabases,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.ResourceTree,
           },
           startKey
@@ -1137,6 +1128,8 @@ export default class Explorer {
         TelemetryProcessor.traceFailure(
           Action.LoadDatabases,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.ResourceTree,
             error: errorMessage,
             errorStack: getErrorStack(error),
@@ -1156,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
@@ -1167,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),
@@ -1189,6 +1186,8 @@ 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,
     });
     this.isRefreshingExplorer(true);
@@ -1428,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.
@@ -1436,6 +1449,8 @@ 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;
@@ -1451,10 +1466,28 @@ export default class Explorer {
       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
       );
@@ -1585,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) => {
@@ -1610,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),
@@ -1707,7 +1744,7 @@ export default class Explorer {
 
     const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent);
     promise
-      .then(() => this.params.onRefreshNotebookList())
+      .then(() => this.resourceTree.triggerRender())
       .catch((reason: any) => this.showOkModalDialog("Unable to upload file", reason));
     return promise;
   }
@@ -1715,7 +1752,7 @@ export default class Explorer {
   public async importAndOpen(path: string): Promise<boolean> {
     const name = NotebookUtil.getName(path);
     const item = NotebookUtil.createNotebookContentItem(name, path, "file");
-    const parent = this.params.getMyNotebooksContentRoot();
+    const parent = this.resourceTree.myNotebooksContentRoot;
 
     if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
       const existingItem = _.find(parent.children, (node) => node.name === name);
@@ -1732,8 +1769,7 @@ export default class Explorer {
   }
 
   public async importAndOpenContent(name: string, content: string): Promise<boolean> {
-    // const parent = this.params.getMyNotebooksContentRoot();
-    const parent = this.params.getMyNotebooksContentRoot();
+    const parent = this.resourceTree.myNotebooksContentRoot;
 
     if (parent && parent.children && this.isNotebookEnabled() && this.notebookManager?.notebookClient) {
       if (this.notebookToImport && this.notebookToImport.name === name && this.notebookToImport.content === content) {
@@ -1918,6 +1954,7 @@ export default class Explorer {
 
         return newNotebookFile;
       });
+    result.then(() => this.resourceTree.triggerRender());
     return result;
   }
 
@@ -1938,6 +1975,7 @@ export default class Explorer {
       defaultInput: "",
       onSubmit: (input: string) => this.notebookManager?.notebookContentClient.createDirectory(parent, input),
     });
+    result.then(() => this.resourceTree.triggerRender());
     return result;
   }
 
@@ -2093,14 +2131,12 @@ export default class Explorer {
       return false;
     }
   };
-
   private refreshNotebookList = async (): Promise<void> => {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       return;
     }
 
-    this.params?.onRefreshNotebookList();
-
+    await this.resourceTree.initialize();
     this.notebookManager?.refreshPinnedRepos();
     if (this.notebookToImport) {
       this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
@@ -2163,7 +2199,7 @@ export default class Explorer {
       throw new Error(error);
     }
 
-    parent = parent || this.params.getMyNotebooksContentRoot();
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
 
     const notificationProgressId = NotificationConsoleUtils.logConsoleMessage(
       ConsoleDataType.InProgress,
@@ -2171,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,
     });
 
@@ -2181,19 +2219,23 @@ export default class Explorer {
         TelemetryProcessor.traceSuccess(
           Action.CreateNewNotebook,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
           },
           startKey
         );
         return this.openNotebook(newFile);
       })
-      .then(() => this.params.onRefreshNotebookList())
+      .then(() => this.resourceTree.triggerRender())
       .catch((error: any) => {
         const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
         NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, errorMessage);
         TelemetryProcessor.traceFailure(
           Action.CreateNewNotebook,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
             error: errorMessage,
             errorStack: getErrorStack(error),
@@ -2205,7 +2247,7 @@ export default class Explorer {
   }
 
   public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
-    parent = parent || this.params.getMyNotebooksContentRoot();
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
 
     this.uploadFilePane.openWithOptions({
       paneTitle: "Upload file to notebook server",
@@ -2236,7 +2278,7 @@ export default class Explorer {
     });
   }
 
-  public refreshContentItem(item: NotebookContentItem): Promise<NotebookContentItem> {
+  public refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to refresh notebook list, but notebook is not enabled";
       handleError(error, "Explorer/refreshContentItem");
@@ -2317,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,

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,184 +7,180 @@ interface JoinArrayMaxCharOutput {
   consumedCount: number; // Number of items consumed
 }
 
-interface EdgePropertyType {
-  id: string;
-  outV?: string;
-  inV?: string;
-}
+export class GraphUtil {
+  public static getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
+    return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
+  }
 
-export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
-  return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
-}
+  /**
+   * Collect all edges from this node
+   * @param vertex
+   * @param graphData
+   * @param newNodes (optional) object describing new nodes encountered
+   */
+  public static createEdgesfromNode(
+    vertex: GraphData.GremlinVertex,
+    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
+    newNodes?: { [id: string]: boolean }
+  ): void {
+    if (vertex.hasOwnProperty("outE")) {
+      let outE = vertex.outE;
+      for (var label in outE) {
+        $.each(outE[label], (index: number, edge: any) => {
+          // We create our own edge. No need to fetch
+          let e = {
+            id: edge.id,
+            label: label,
+            inV: edge.inV,
+            outV: vertex.id,
+          };
 
-/**
- * Collect all edges from this node
- * @param vertex
- * @param graphData
- * @param newNodes (optional) object describing new nodes encountered
- */
-export function createEdgesfromNode(
-  vertex: GraphData.GremlinVertex,
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
-  newNodes?: { [id: string]: boolean }
-): void {
-  if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
-    const outE = vertex.outE;
-    for (const label in outE) {
-      $.each(outE[label], (index: number, edge: EdgePropertyType) => {
-        // We create our own edge. No need to fetch
-        const e = {
-          id: edge.id,
-          label: label,
-          inV: edge.inV,
-          outV: vertex.id,
-        };
+          graphData.addEdge(e);
+          if (newNodes) {
+            newNodes[edge.inV] = true;
+          }
+        });
+      }
+    }
+    if (vertex.hasOwnProperty("inE")) {
+      let inE = vertex.inE;
+      for (var label in inE) {
+        $.each(inE[label], (index: number, edge: any) => {
+          // We create our own edge. No need to fetch
+          let e = {
+            id: edge.id,
+            label: label,
+            inV: vertex.id,
+            outV: edge.outV,
+          };
 
-        graphData.addEdge(e);
-        if (newNodes) {
-          newNodes[edge.inV] = true;
-        }
-      });
+          graphData.addEdge(e);
+          if (newNodes) {
+            newNodes[edge.outV] = true;
+          }
+        });
+      }
     }
   }
-  if (Object.prototype.hasOwnProperty.call(vertex, "inE")) {
-    const inE = vertex.inE;
-    for (const label in inE) {
-      $.each(inE[label], (index: number, edge: EdgePropertyType) => {
-        // We create our own edge. No need to fetch
-        const e = {
-          id: edge.id,
-          label: label,
-          inV: vertex.id,
-          outV: edge.outV,
-        };
 
-        graphData.addEdge(e);
-        if (newNodes) {
-          newNodes[edge.outV] = true;
-        }
-      });
+  /**
+   * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
+   * The string length cannot exceed maxSize.
+   *  @param array
+   * @param maxSize
+   * @return
+   */
+  public static getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
+    if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
+      return { result: "", consumedCount: 0 };
     }
-  }
-}
 
-/**
- * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
- * The string length cannot exceed maxSize.
- *  @param array
- * @param maxSize
- * @return
- */
-export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
-  if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
-    return { result: "", consumedCount: 0 };
+    const end = array.length - 1;
+    let output = `'${array[0]}'`;
+    let i = 0;
+    for (; i < end; i++) {
+      const candidate = `${output},'${array[i + 1]}'`;
+      if (candidate.length <= maxSize) {
+        output = candidate;
+      } else {
+        break;
+      }
+    }
+
+    return {
+      result: output,
+      consumedCount: i + 1,
+    };
   }
 
-  const end = array.length - 1;
-  let output = `'${array[0]}'`;
-  let i = 0;
-  for (; i < end; i++) {
-    const candidate = `${output},'${array[i + 1]}'`;
-    if (candidate.length <= maxSize) {
-      output = candidate;
+  public static createFetchEdgePairQuery(
+    outE: boolean,
+    pkid: string,
+    excludedEdgeIds: string[],
+    startIndex: number,
+    pageSize: number,
+    withoutStepArgMaxLenght: number
+  ): string {
+    let gremlinQuery: string;
+    if (excludedEdgeIds.length > 0) {
+      // build a string up to max char
+      const joined = GraphUtil.getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
+      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').${
+          outE ? "inV" : "outV"
+        }().as('v').select('e', 'v')`;
+      } else {
+        const start = startIndex - joined.consumedCount;
+        gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.range(${start},${
+          start + pageSize
+        }).as('e').${outE ? "inV" : "outV"}().as('v').select('e', 'v')`;
+      }
     } else {
-      break;
-    }
-  }
-
-  return {
-    result: output,
-    consumedCount: i + 1,
-  };
-}
-
-export function createFetchEdgePairQuery(
-  outE: boolean,
-  pkid: string,
-  excludedEdgeIds: string[],
-  startIndex: number,
-  pageSize: number,
-  withoutStepArgMaxLenght: number
-): string {
-  let gremlinQuery: string;
-  if (excludedEdgeIds.length > 0) {
-    // build a string up to max char
-    const joined = getLimitedArrayString(excludedEdgeIds, withoutStepArgMaxLenght);
-    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').${
+      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
         outE ? "inV" : "outV"
       }().as('v').select('e', 'v')`;
-    } else {
-      const start = startIndex - joined.consumedCount;
-      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}()${hasWithoutStep}.range(${start},${
-        start + pageSize
-      }).as('e').${outE ? "inV" : "outV"}().as('v').select('e', 'v')`;
     }
-  } else {
-    gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
-      outE ? "inV" : "outV"
-    }().as('v').select('e', 'v')`;
+    return gremlinQuery;
   }
-  return gremlinQuery;
-}
 
-/**
- * Trim graph
- */
-export function trimGraph(
-  currentRoot: GraphData.GremlinVertex,
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-) {
-  const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
-  graphData.unloadAllVertices(importantNodes);
+  /**
+   * Trim graph
+   */
+  public static trimGraph(
+    currentRoot: GraphData.GremlinVertex,
+    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
+  ) {
+    const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
+    graphData.unloadAllVertices(importantNodes);
 
-  // Keep only ancestors node in fixed position
-  $.each(graphData.ids, (index: number, id: string) => {
-    graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
-  });
-}
+    // Keep only ancestors node in fixed position
+    $.each(graphData.ids, (index: number, id: string) => {
+      graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
+    });
+  }
 
-export function 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);
-  graphData.addNeighborInfo(child);
-}
+  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);
+    GraphUtil.createEdgesfromNode(child, graphData);
+    graphData.addNeighborInfo(child);
+  }
 
-/**
- * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
- * @param value
- */
-export function escapeDoubleQuotes(value: string): string {
-  return value === undefined ? value : value.replace(/"/g, '\\"');
-}
+  /**
+   * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
+   * @param value
+   */
+  public static escapeDoubleQuotes(value: string): string {
+    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 {
-  switch (ip.type) {
-    case "number":
-    case "boolean":
-      return `${ip.value}`;
-    case "null":
-      return undefined;
-    default:
-      return `"${escapeDoubleQuotes(ip.value as string)}"`;
+  /**
+   * Surround with double-quotes if val is a string.
+   * @param val
+   */
+  public static getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
+    switch (ip.type) {
+      case "number":
+      case "boolean":
+        return `${ip.value}`;
+      case "null":
+        return null;
+      default:
+        return `"${GraphUtil.escapeDoubleQuotes(ip.value as string)}"`;
+    }
+  }
+
+  /**
+   * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
+   * @param value
+   */
+  public static escapeSingleQuotes(value: string): string {
+    return value == null ? value : value.replace(/'/g, "\\'");
   }
 }
-
-/**
- * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
- * @param value
- */
-export function escapeSingleQuotes(value: string): string {
-  return value === undefined ? value : value.replace(/'/g, "\\'");
-}

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.tsx

@@ -548,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 {
-  private static readonly schemaVersion: string = "2";
+export class MostRecentActivity {
+  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/NTeractUtil.ts

@@ -3,18 +3,20 @@ import { NotebookContentRecordProps, selectors } from "@nteract/core";
 /**
  * A bunch of utilities to interact with nteract
  */
-export function getCurrentCellType(content: NotebookContentRecordProps): "markdown" | "code" | "raw" | undefined {
-  if (!content) {
+export default class NTeractUtil {
+  public static getCurrentCellType(content: NotebookContentRecordProps): "markdown" | "code" | "raw" | undefined {
+    if (!content) {
+      return undefined;
+    }
+
+    const cellFocusedId = selectors.notebook.cellFocused(content.model);
+    if (cellFocusedId) {
+      const cell = selectors.notebook.cellById(content.model, { id: cellFocusedId });
+      if (cell) {
+        return cell.cell_type;
+      }
+    }
+
     return undefined;
   }
-
-  const cellFocusedId = selectors.notebook.cellFocused(content.model);
-  if (cellFocusedId) {
-    const cell = selectors.notebook.cellById(content.model, { id: cellFocusedId });
-    if (cell) {
-      return cell.cell_type;
-    }
-  }
-
-  return undefined;
 }

src/Explorer/Notebook/NotebookClientV2.ts

@@ -224,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,
@@ -268,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

@@ -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,

src/Explorer/Notebook/NotebookContentClient.ts

@@ -1,6 +1,6 @@
 import * as DataModels from "../../Contracts/DataModels";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
-import * as StringUtils from "../../Utils/StringUtils";
+import { StringUtils } from "../../Utils/StringUtils";
 import { FileSystemUtil } from "./FileSystemUtil";
 import { NotebookUtil } from "./NotebookUtil";
 
@@ -18,13 +18,11 @@ export class NotebookContentClient {
   /**
    * This updates the item and points all the children's parent to this item
    * @param item
-   * @return updated item
    */
-  public updateItemChildren(item: NotebookContentItem): Promise<NotebookContentItem> {
+  public updateItemChildren(item: NotebookContentItem): Promise<void> {
     return this.fetchNotebookFiles(item.path).then((subItems) => {
       item.children = subItems;
       subItems.forEach((subItem) => (subItem.parent = item));
-      return item;
     });
   }
 

src/Explorer/Notebook/NotebookManager.ts

@@ -18,6 +18,7 @@ import { contents } from "rx-jupyter";
 import { NotebookContainerClient } from "./NotebookContainerClient";
 import { MemoryUsageInfo } from "../../Contracts/DataModels";
 import { NotebookContentClient } from "./NotebookContentClient";
+import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
 import { getFullName } from "../../Utils/UserUtils";
 import { ImmutableNotebook } from "@nteract/commutable";
@@ -29,6 +30,7 @@ import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 export interface NotebookManagerOptions {
   container: Explorer;
   notebookBasePath: ko.Observable<string>;
+  resourceTree: ResourceTreeAdapter;
   refreshCommandBarButtons: () => void;
   refreshNotebookList: () => void;
 }
@@ -105,8 +107,8 @@ export default class NotebookManager {
     });
 
     this.junoClient.subscribeToPinnedRepos((pinnedRepos) => {
-      // TODO Move this out of NotebookManager?
-      this.params.container.params.initializeGitHubRepos(pinnedRepos);
+      this.params.resourceTree.initializeGitHubRepos(pinnedRepos);
+      this.params.resourceTree.triggerRender();
     });
     this.refreshPinnedRepos();
   }
@@ -158,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/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/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

@@ -693,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(),
@@ -749,16 +751,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return undefined;
     }
 
-    // return undefined if autopilot is selected for the new database/collection
-    if (this.databaseCreateNew()) {
-      // 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;
-      }
+    if (this.isAutoPilotSelected()) {
+      return undefined;
+    }
+
+    if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
+      return undefined;
     }
 
     return this._getThroughput();
@@ -790,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(),
@@ -863,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(),
@@ -895,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(),

src/Explorer/Panes/AddDatabasePane.html

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

src/Explorer/Panes/AddDatabasePane.ts

@@ -272,6 +272,8 @@ export default class AddDatabasePane extends ContextualPaneBase {
     super.open();
     this.resetData();
     const addDatabasePaneOpenMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       subscriptionType: SubscriptionType[this.container.subscriptionType()],
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
@@ -293,6 +295,8 @@ export default class AddDatabasePane extends ContextualPaneBase {
     const offerThroughput: number = this._computeOfferThroughput();
 
     const addDatabasePaneStartMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       database: ko.toJS({
         id: this.databaseId(),
         shared: this.databaseCreateNewShared(),
@@ -355,6 +359,8 @@ export default class AddDatabasePane extends ContextualPaneBase {
     this.close();
     this.container.refreshAllDatabases();
     const addDatabasePaneSuccessMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       database: ko.toJS({
         id: this.databaseId(),
         shared: this.databaseCreateNewShared(),
@@ -377,6 +383,8 @@ export default class AddDatabasePane extends ContextualPaneBase {
     this.formErrors(errorMessage);
     this.formErrorsDetails(errorMessage);
     const addDatabasePaneFailedMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       database: ko.toJS({
         id: this.databaseId(),
         shared: this.databaseCreateNewShared(),

src/Explorer/Panes/BrowseQueriesPane.ts

@@ -41,6 +41,8 @@ export class BrowseQueriesPane extends ContextualPaneBase {
     }
 
     const startKey: number = TelemetryProcessor.traceStart(Action.SetupSavedQueries, {
+      databaseAccountName: this.container && this.container.databaseAccount().name,
+      defaultExperience: this.container && this.container.defaultExperience(),
       dataExplorerArea: Areas.ContextualPane,
       paneTitle: this.title(),
     });
@@ -51,6 +53,8 @@ export class BrowseQueriesPane extends ContextualPaneBase {
       TelemetryProcessor.traceSuccess(
         Action.SetupSavedQueries,
         {
+          databaseAccountName: this.container && this.container.databaseAccount().name,
+          defaultExperience: this.container && this.container.defaultExperience(),
           dataExplorerArea: Areas.ContextualPane,
           paneTitle: this.title(),
         },
@@ -61,6 +65,8 @@ export class BrowseQueriesPane extends ContextualPaneBase {
       TelemetryProcessor.traceFailure(
         Action.SetupSavedQueries,
         {
+          databaseAccountName: this.container && this.container.databaseAccount().name,
+          defaultExperience: this.container && this.container.defaultExperience(),
           dataExplorerArea: Areas.ContextualPane,
           paneTitle: this.title(),
           error: errorMessage,
@@ -91,6 +97,8 @@ export class BrowseQueriesPane extends ContextualPaneBase {
     queryTab.initialEditorContent(savedQuery.query);
     queryTab.sqlQueryEditorContent(savedQuery.query);
     TelemetryProcessor.trace(Action.LoadSavedQuery, ActionModifiers.Mark, {
+      databaseAccountName: this.container && this.container.databaseAccount().name,
+      defaultExperience: this.container && this.container.defaultExperience(),
       dataExplorerArea: Areas.ContextualPane,
       queryName: savedQuery.queryName,
       paneTitle: this.title(),

src/Explorer/Panes/CassandraAddCollectionPane.html

@@ -166,6 +166,7 @@
                                     autoPilotUsageCost: autoPilotUsageCost,
                                     canExceedMaximumValue: canExceedMaximumValue,
                             costsVisible: costsVisible,
+                                    showAutoPilot: !isFreeTierAccount()
                                     }"
               >
               </throughput-input-autopilot-v3>

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -293,6 +293,8 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
     }
     const addCollectionPaneOpenMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       collection: ko.toJS({
         id: this.tableId(),
         storage: Constants.BackendDefaults.multiPartitionStorageInGb,
@@ -343,6 +345,8 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
     }
 
     const addCollectionPaneStartMessage = {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       collection: ko.toJS({
         id: this.tableId(),
         storage: Constants.BackendDefaults.multiPartitionStorageInGb,
@@ -387,6 +391,8 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         this.isExecuting(false);
         this.close();
         const addCollectionPaneSuccessMessage = {
+          databaseAccountName: this.container.databaseAccount().name,
+          defaultExperience: this.container.defaultExperience(),
           collection: ko.toJS({
             id: this.tableId(),
             storage: Constants.BackendDefaults.multiPartitionStorageInGb,
@@ -415,6 +421,8 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         this.formErrors(errorMessage);
         this.isExecuting(false);
         const addCollectionPaneFailedMessage = {
+          databaseAccountName: this.container.databaseAccount().name,
+          defaultExperience: this.container.defaultExperience(),
           collection: {
             id: this.tableId(),
             storage: Constants.BackendDefaults.multiPartitionStorageInGb,

src/Explorer/Panes/ContextualPaneBase.ts

@@ -35,6 +35,8 @@ export abstract class ContextualPaneBase extends WaitsForTemplateViewModel {
     this.close();
     this.container.isAccountReady() &&
       TelemetryProcessor.trace(Action.ContextualPane, ActionModifiers.Close, {
+        databaseAccountName: this.container.databaseAccount().name,
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.ContextualPane,
         paneTitle: this.title(),
       });
@@ -54,6 +56,8 @@ export abstract class ContextualPaneBase extends WaitsForTemplateViewModel {
     this.resizePane();
     this.container.isAccountReady() &&
       TelemetryProcessor.trace(Action.ContextualPane, ActionModifiers.Open, {
+        databaseAccountName: this.container.databaseAccount().name,
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.ContextualPane,
         paneTitle: this.title(),
       });
@@ -74,6 +78,8 @@ export abstract class ContextualPaneBase extends WaitsForTemplateViewModel {
     event.stopPropagation();
     this.container.isAccountReady() &&
       TelemetryProcessor.trace(Action.ContextualPane, ActionModifiers.Submit, {
+        databaseAccountName: this.container.databaseAccount().name,
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.ContextualPane,
         paneTitle: this.title(),
       });

src/Explorer/Panes/CopyNotebookPane.tsx

@@ -8,9 +8,10 @@ import { GenericRightPaneComponent, GenericRightPaneProps } from "./GenericRight
 import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
 import { IDropdownOption } from "office-ui-fabric-react";
 import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { HttpStatusCodes, Notebook } from "../../Common/Constants";
+import { HttpStatusCodes } from "../../Common/Constants";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { NotebookContentItemType, NotebookContentItem } from "../Notebook/NotebookContentItem";
+import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import { handleError, getErrorMessage } from "../../Common/ErrorHandlingUtils";
 
 interface Location {
@@ -150,7 +151,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
     switch (location.type) {
       case "MyNotebooks":
         parent = {
-          name: Notebook.MyNotebooksTitle,
+          name: ResourceTreeAdapter.MyNotebooksTitle,
           path: this.container.getNotebookBasePath(),
           type: NotebookContentItemType.Directory,
         };
@@ -158,7 +159,7 @@ export class CopyNotebookPaneAdapter implements ReactAdapter {
 
       case "GitHub":
         parent = {
-          name: Notebook.GitHubReposTitle,
+          name: ResourceTreeAdapter.GitHubReposTitle,
           path: GitHubUtils.toContentUri(
             this.selectedLocation.owner,
             this.selectedLocation.repo,

src/Explorer/Panes/CopyNotebookPaneComponent.tsx

@@ -1,6 +1,7 @@
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as React from "react";
 import { IPinnedRepo } from "../../Juno/JunoClient";
+import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import {
   Stack,
   Label,
@@ -12,7 +13,6 @@ import {
   IRenderFunction,
   ISelectableOption,
 } from "office-ui-fabric-react";
-import { Notebook } from "../../Common/Constants";
 
 interface Location {
   type: "MyNotebooks" | "GitHub";
@@ -70,8 +70,8 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
 
     options.push({
       key: "MyNotebooks-Item",
-      text: Notebook.MyNotebooksTitle,
-      title: Notebook.MyNotebooksTitle,
+      text: ResourceTreeAdapter.MyNotebooksTitle,
+      title: ResourceTreeAdapter.MyNotebooksTitle,
       data: {
         type: "MyNotebooks",
       } as Location,
@@ -86,7 +86,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
 
       options.push({
         key: "GitHub-Header",
-        text: Notebook.GitHubReposTitle,
+        text: ResourceTreeAdapter.GitHubReposTitle,
         itemType: SelectableOptionMenuItemType.Header,
       });
 

src/Explorer/Panes/DeleteCollectionConfirmationPane.ts

@@ -42,6 +42,8 @@ export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
     this.isExecuting(true);
     const selectedCollection = <ViewModels.Collection>this.container.findSelectedCollection();
     const startKey: number = TelemetryProcessor.traceStart(Action.DeleteCollection, {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       collectionId: selectedCollection.id(),
       dataExplorerArea: Constants.Areas.ContextualPane,
       paneTitle: this.title(),
@@ -61,6 +63,8 @@ export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
         TelemetryProcessor.traceSuccess(
           Action.DeleteCollection,
           {
+            databaseAccountName: this.container.databaseAccount().name,
+            defaultExperience: this.container.defaultExperience(),
             collectionId: selectedCollection.id(),
             dataExplorerArea: Constants.Areas.ContextualPane,
             paneTitle: this.title(),
@@ -90,6 +94,8 @@ export default class DeleteCollectionConfirmationPane extends ContextualPaneBase
         TelemetryProcessor.traceFailure(
           Action.DeleteCollection,
           {
+            databaseAccountName: this.container.databaseAccount().name,
+            defaultExperience: this.container.defaultExperience(),
             collectionId: selectedCollection.id(),
             dataExplorerArea: Constants.Areas.ContextualPane,
             paneTitle: this.title(),

src/Explorer/Panes/DeleteCollectionConfirmationPanel.tsx

@@ -122,6 +122,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
     this.setState({ formError: "", isExecuting: true });
 
     const startKey: number = TelemetryProcessor.traceStart(Action.DeleteCollection, {
+      databaseAccountName: userContext.databaseAccount?.name,
+      defaultExperience: userContext.defaultExperience,
       collectionId: collection.id(),
       dataExplorerArea: Areas.ContextualPane,
       paneTitle: "Delete Collection",
@@ -140,6 +142,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
       TelemetryProcessor.traceSuccess(
         Action.DeleteCollection,
         {
+          databaseAccountName: userContext.databaseAccount?.name,
+          defaultExperience: userContext.defaultExperience,
           collectionId: collection.id(),
           dataExplorerArea: Areas.ContextualPane,
           paneTitle: "Delete Collection",
@@ -167,6 +171,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
       TelemetryProcessor.traceFailure(
         Action.DeleteCollection,
         {
+          databaseAccountName: userContext.databaseAccount?.name,
+          defaultExperience: userContext.defaultExperience,
           collectionId: collection.id(),
           dataExplorerArea: Areas.ContextualPane,
           paneTitle: "Delete Collection",

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

@@ -46,6 +46,8 @@ export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
     this.isExecuting(true);
     const selectedDatabase = this.container.findSelectedDatabase();
     const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDatabase, {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       databaseId: selectedDatabase.id(),
       dataExplorerArea: Constants.Areas.ContextualPane,
       paneTitle: this.title(),
@@ -71,6 +73,8 @@ export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
           TelemetryProcessor.traceSuccess(
             Action.DeleteDatabase,
             {
+              databaseAccountName: this.container.databaseAccount().name,
+              defaultExperience: this.container.defaultExperience(),
               databaseId: selectedDatabase.id(),
               dataExplorerArea: Constants.Areas.ContextualPane,
               paneTitle: this.title(),
@@ -101,6 +105,8 @@ export default class DeleteDatabaseConfirmationPane extends ContextualPaneBase {
           TelemetryProcessor.traceFailure(
             Action.DeleteDatabase,
             {
+              databaseAccountName: this.container.databaseAccount().name,
+              defaultExperience: this.container.defaultExperience(),
               databaseId: selectedDatabase.id(),
               dataExplorerArea: Constants.Areas.ContextualPane,
               paneTitle: this.title(),

src/Explorer/Panes/GitHubReposPane.ts

@@ -6,7 +6,7 @@ import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
-import * as JunoUtils from "../../Utils/JunoUtils";
+import { JunoUtils } from "../../Utils/JunoUtils";
 import { AuthorizeAccessComponent } from "../Controls/GitHub/AuthorizeAccessComponent";
 import { GitHubReposComponent, GitHubReposComponentProps, RepoListItem } from "../Controls/GitHub/GitHubReposComponent";
 import { GitHubReposComponentAdapter } from "../Controls/GitHub/GitHubReposComponentAdapter";
@@ -157,6 +157,8 @@ export class GitHubReposPane extends ContextualPaneBase {
     this.isExecuting(false);
     this.title(GitHubReposComponent.ManageGitHubRepoTitle); // Used for telemetry
     TelemetryProcessor.trace(Action.NotebooksGitHubManageRepo, ActionModifiers.Mark, {
+      databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience && this.container.defaultExperience(),
       dataExplorerArea: Areas.Notebook,
     });
     this.triggerRender();
@@ -337,6 +339,8 @@ export class GitHubReposPane extends ContextualPaneBase {
   private connectToGitHub(scope: string): void {
     this.isExecuting(true);
     TelemetryProcessor.trace(Action.NotebooksGitHubAuthorize, ActionModifiers.Mark, {
+      databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience && this.container.defaultExperience(),
       dataExplorerArea: Areas.Notebook,
       scopesSelected: scope,
     });

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

@@ -152,7 +152,10 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
     }
 
     try {
-      startKey = traceStart(Action.NotebooksGalleryPublish, {});
+      startKey = traceStart(Action.NotebooksGalleryPublish, {
+        databaseAccountName: this.container.databaseAccount()?.name,
+        defaultExperience: this.container.defaultExperience(),
+      });
 
       const response = await this.junoClient.publishNotebook(
         this.name,
@@ -180,6 +183,8 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
         traceSuccess(
           Action.NotebooksGalleryPublish,
           {
+            databaseAccountName: this.container.databaseAccount()?.name,
+            defaultExperience: this.container.defaultExperience(),
             notebookId: data.id,
             isPublishPending,
           },
@@ -190,6 +195,8 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
       traceFailure(
         Action.NotebooksGalleryPublish,
         {
+          databaseAccountName: this.container.databaseAccount()?.name,
+          defaultExperience: this.container.defaultExperience(),
           error: getErrorMessage(error),
           errorStack: getErrorStack(error),
         },

src/Explorer/Panes/SaveQueryPane.ts

@@ -63,6 +63,8 @@ export class SaveQueryPane extends ContextualPaneBase {
       query: query,
     };
     const startKey: number = TelemetryProcessor.traceStart(Action.SaveQuery, {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ContextualPane,
       paneTitle: this.title(),
     });
@@ -75,6 +77,8 @@ export class SaveQueryPane extends ContextualPaneBase {
         TelemetryProcessor.traceSuccess(
           Action.SaveQuery,
           {
+            databaseAccountName: this.container.databaseAccount().name,
+            defaultExperience: this.container.defaultExperience(),
             dataExplorerArea: Constants.Areas.ContextualPane,
             paneTitle: this.title(),
           },
@@ -90,6 +94,8 @@ export class SaveQueryPane extends ContextualPaneBase {
         TelemetryProcessor.traceFailure(
           Action.SaveQuery,
           {
+            databaseAccountName: this.container.databaseAccount().name,
+            defaultExperience: this.container.defaultExperience(),
             dataExplorerArea: Constants.Areas.ContextualPane,
             paneTitle: this.title(),
             error: errorMessage,
@@ -107,6 +113,8 @@ export class SaveQueryPane extends ContextualPaneBase {
     }
 
     const startKey: number = TelemetryProcessor.traceStart(Action.SetupSavedQueries, {
+      databaseAccountName: this.container && this.container.databaseAccount().name,
+      defaultExperience: this.container && this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ContextualPane,
       paneTitle: this.title(),
     });
@@ -117,6 +125,8 @@ export class SaveQueryPane extends ContextualPaneBase {
       TelemetryProcessor.traceSuccess(
         Action.SetupSavedQueries,
         {
+          databaseAccountName: this.container && this.container.databaseAccount().name,
+          defaultExperience: this.container && this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ContextualPane,
           paneTitle: this.title(),
         },
@@ -127,6 +137,8 @@ export class SaveQueryPane extends ContextualPaneBase {
       TelemetryProcessor.traceFailure(
         Action.SetupSavedQueries,
         {
+          databaseAccountName: this.container && this.container.databaseAccount().name,
+          defaultExperience: this.container && this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ContextualPane,
           paneTitle: this.title(),
           error: errorMessage,

src/Explorer/Panes/SettingsPane.ts

@@ -5,7 +5,7 @@ import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsol
 import { ContextualPaneBase } from "./ContextualPaneBase";
 import { LocalStorageUtility, StorageKey } from "../../Shared/StorageUtility";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as StringUtility from "../../Shared/StringUtility";
+import { StringUtility } from "../../Shared/StringUtility";
 import { configContext } from "../../ConfigContext";
 
 export class SettingsPane extends ContextualPaneBase {

src/Explorer/Panes/SetupNotebooksPane.ts

@@ -54,6 +54,8 @@ export class SetupNotebooksPane extends ContextualPaneBase {
     }
 
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateNotebookWorkspace, {
+      databaseAccountName: this.container && this.container.databaseAccount().name,
+      defaultExperience: this.container && this.container.defaultExperience(),
       dataExplorerArea: Areas.ContextualPane,
       paneTitle: this.title(),
     });
@@ -72,6 +74,8 @@ export class SetupNotebooksPane extends ContextualPaneBase {
       TelemetryProcessor.traceSuccess(
         Action.CreateNotebookWorkspace,
         {
+          databaseAccountName: this.container && this.container.databaseAccount().name,
+          defaultExperience: this.container && this.container.defaultExperience(),
           dataExplorerArea: Areas.ContextualPane,
           paneTitle: this.title(),
         },
@@ -86,6 +90,8 @@ export class SetupNotebooksPane extends ContextualPaneBase {
       TelemetryProcessor.traceFailure(
         Action.CreateNotebookWorkspace,
         {
+          databaseAccountName: this.container && this.container.databaseAccount().name,
+          defaultExperience: this.container && this.container.defaultExperience(),
           dataExplorerArea: Areas.ContextualPane,
           paneTitle: this.title(),
           error: errorMessage,

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -18,8 +18,6 @@ import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
 import { userContext } from "../../UserContext";
 import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
-import CollectionIcon from "../../../images/tree-collection.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 
 export interface SplashScreenItem {
   iconSrc: string;
@@ -41,34 +39,21 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
   private static readonly failoverUrl = "https://docs.microsoft.com/azure/cosmos-db/high-availability";
 
   private readonly container: Explorer;
-  private subscriptions: Array<{ dispose: () => void }>;
 
   constructor(props: SplashScreenProps) {
     super(props);
     this.container = props.explorer;
-    this.subscriptions = [];
+    this.container.tabsManager.openedTabs.subscribe(() => this.setState({}));
+    this.container.selectedNode.subscribe(() => this.setState({}));
+    this.container.isNotebookEnabled.subscribe(() => this.setState({}));
   }
 
   public shouldComponentUpdate() {
     return this.container.tabsManager.openedTabs.length === 0;
   }
 
-  public componentWillUnmount() {
-    while (this.subscriptions.length) {
-      this.subscriptions.pop().dispose();
-    }
-  }
-
-  public componentDidMount() {
-    this.subscriptions.push(
-      this.container.tabsManager.openedTabs.subscribe(() => this.setState({})),
-      this.container.selectedNode.subscribe(() => this.setState({})),
-      this.container.isNotebookEnabled.subscribe(() => this.setState({}))
-    );
-  }
-
   private clearMostRecent = (): void => {
-    MostRecentActivity.mostRecentActivity.clear(userContext.databaseAccount?.id);
+    this.container.mostRecentActivity.clear(userContext.databaseAccount?.id);
     this.setState({});
   };
 
@@ -297,45 +282,23 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     return items;
   }
 
-  private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
-    return {
-      iconSrc: NotebookIcon,
-      title: collectionId,
-      description: "Data",
-      onClick: () => {
-        const collection = this.container.findCollection(databaseId, collectionId);
-        collection && collection.openTab();
-      },
-    };
-  }
-
-  private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
-    return {
-      info: path,
-      iconSrc: CollectionIcon,
-      title: name,
-      description: "Notebook",
-      onClick: () => {
-        const notebookItem = this.container.createNotebookContentItemFile(name, path);
-        notebookItem && this.container.openNotebook(notebookItem);
-      },
-    };
+  private static getInfo(item: MostRecentActivity.Item): string {
+    if (item.type === MostRecentActivity.Type.OpenNotebook) {
+      const data = item.data as MostRecentActivity.OpenNotebookItem;
+      return data.path;
+    } else {
+      return undefined;
+    }
   }
 
   private createRecentItems(): SplashScreenItem[] {
-    return MostRecentActivity.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((activity) => {
-      switch (activity.type) {
-        default: {
-          const unknownActivity: never = activity;
-          throw new Error(`Unknown activity: ${unknownActivity}`);
-        }
-        case MostRecentActivity.Type.OpenNotebook:
-          return this.decorateOpenNotebookActivity(activity);
-
-        case MostRecentActivity.Type.OpenCollection:
-          return this.decorateOpenCollectionActivity(activity);
-      }
-    });
+    return this.container.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((item) => ({
+      iconSrc: MostRecentActivity.MostRecentActivity.getItemIcon(item),
+      title: item.title,
+      description: item.description,
+      info: SplashScreen.getInfo(item),
+      onClick: () => this.container.mostRecentActivity.onItemClicked(item),
+    }));
   }
 
   private createTipsItems(): SplashScreenItem[] {

src/Explorer/Tables/DataTable/DataTableUtilities.ts

@@ -37,6 +37,23 @@ export function containItems<T>(items: T[]): boolean {
   return items && items.length > 0;
 }
 
+// export function setTargetIcon(idToIconHandlerMap: CloudHub.Common.IToolbarElementIdIconMap, $sourceElement: JQuery, toIconState: IconState): void {
+//     if (idToIconHandlerMap) {
+//         var iconId: string = $sourceElement.attr("id");
+//         var iconHandler = idToIconHandlerMap[iconId];
+//         switch (toIconState) {
+//             case IconState.default:
+//                 iconHandler.observable(iconHandler.default);
+//                 break;
+//             case IconState.hoverState:
+//                 iconHandler.observable(iconHandler.hoverState);
+//                 break;
+//             default:
+//                 window.console.log("error");
+//         }
+//     }
+// }
+
 export function addCssClass($sourceElement: JQuery, cssClassName: string): void {
   if (!$sourceElement.hasClass(cssClassName)) {
     $sourceElement.addClass(cssClassName);
@@ -61,9 +78,8 @@ export function getPropertyIntersectionFromTableEntities(
   entities: Entities.ITableEntity[],
   isCassandraApi: boolean
 ): string[] {
-  const headerUnion: string[] = [];
+  var headerUnion: string[] = [];
   entities &&
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     entities.forEach((row: any) => {
       const keys = Object.keys(row);
       keys &&

src/Explorer/Tables/DataTable/DataTableViewModel.ts

@@ -203,8 +203,10 @@ abstract class DataTableViewModel {
       TelemetryProcessor.traceSuccess(
         Action.Tab,
         {
+          databaseAccountName: this.queryTablesTab.collection.container.databaseAccount().name,
           databaseName: this.queryTablesTab.collection.databaseId,
           collectionName: this.queryTablesTab.collection.id(),
+          defaultExperience: this.queryTablesTab.collection.container.defaultExperience(),
           dataExplorerArea: CommonConstants.Areas.Tab,
           tabTitle: this.queryTablesTab.tabTitle(),
         },

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -463,8 +463,10 @@ export default class TableEntityListViewModel extends DataTableViewModel {
           TelemetryProcessor.traceFailure(
             Action.Tab,
             {
+              databaseAccountName: this.queryTablesTab.collection.container.databaseAccount().name,
               databaseName: this.queryTablesTab.collection.databaseId,
               collectionName: this.queryTablesTab.collection.id(),
+              defaultExperience: this.queryTablesTab.collection.container.defaultExperience(),
               dataExplorerArea: Areas.Tab,
               tabTitle: this.queryTablesTab.tabTitle(),
               error: error,

src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts

@@ -2,26 +2,26 @@ const epochTicks = 621355968000000000;
 const ticksPerMillisecond = 10000;
 
 export function getLocalDateTime(dateTime: string): string {
-  const dateTimeObject: Date = new Date(dateTime);
-  const year: number = dateTimeObject.getFullYear();
-  const month: string = ensureDoubleDigits(dateTimeObject.getMonth() + 1); // Month ranges from 0 to 11
-  const day: string = ensureDoubleDigits(dateTimeObject.getDate());
-  const hours: string = ensureDoubleDigits(dateTimeObject.getHours());
-  const minutes: string = ensureDoubleDigits(dateTimeObject.getMinutes());
-  const seconds: string = ensureDoubleDigits(dateTimeObject.getSeconds());
-  const milliseconds: string = ensureTripleDigits(dateTimeObject.getMilliseconds());
+  var dateTimeObject: Date = new Date(dateTime);
+  var year: number = dateTimeObject.getFullYear();
+  var month: string = ensureDoubleDigits(dateTimeObject.getMonth() + 1); // Month ranges from 0 to 11
+  var day: string = ensureDoubleDigits(dateTimeObject.getDate());
+  var hours: string = ensureDoubleDigits(dateTimeObject.getHours());
+  var minutes: string = ensureDoubleDigits(dateTimeObject.getMinutes());
+  var seconds: string = ensureDoubleDigits(dateTimeObject.getSeconds());
+  var milliseconds: string = ensureTripleDigits(dateTimeObject.getMilliseconds());
 
-  const localDateTime = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`;
+  var localDateTime: string = `${year}-${month}-${day}T${hours}:${minutes}:${seconds}.${milliseconds}`;
   return localDateTime;
 }
 
 export function getUTCDateTime(dateTime: string): string {
-  const dateTimeObject = new Date(dateTime);
+  var dateTimeObject: Date = new Date(dateTime);
   return dateTimeObject.toISOString();
 }
 
 export function ensureDoubleDigits(num: number): string {
-  let doubleDigitsString: string = num.toString();
+  var doubleDigitsString: string = num.toString();
   if (num < 10) {
     doubleDigitsString = `0${doubleDigitsString}`;
   } else if (num > 99) {
@@ -31,7 +31,7 @@ export function ensureDoubleDigits(num: number): string {
 }
 
 export function ensureTripleDigits(num: number): string {
-  let tripleDigitsString: string = num.toString();
+  var tripleDigitsString: string = num.toString();
   if (num < 10) {
     tripleDigitsString = `00${tripleDigitsString}`;
   } else if (num < 100) {
@@ -51,17 +51,17 @@ export function convertJSDateToUnix(dateTime: string): number {
 }
 
 export function convertTicksToJSDate(ticks: string): Date {
-  const ticksJSBased = Number(ticks) - epochTicks;
-  const timeInMillisecond = ticksJSBased / ticksPerMillisecond;
+  var ticksJSBased = Number(ticks) - epochTicks;
+  var timeInMillisecond = ticksJSBased / ticksPerMillisecond;
   return new Date(timeInMillisecond);
 }
 
 export function convertJSDateToTicksWithPadding(dateTime: string): string {
-  const ticks = epochTicks + new Date(dateTime).getTime() * ticksPerMillisecond;
+  var ticks = epochTicks + new Date(dateTime).getTime() * ticksPerMillisecond;
   return padDateTicksWithZeros(ticks.toString());
 }
 
 function padDateTicksWithZeros(value: string): string {
-  const s = "0000000000000000000" + value;
+  var s = "0000000000000000000" + value;
   return s.substr(s.length - 20);
 }

src/Explorer/Tabs/ConflictsTab.ts

@@ -261,6 +261,8 @@ export default class ConflictsTab extends TabsBase {
     const selectedConflict = this.selectedConflictId();
 
     const startKey: number = TelemetryProcessor.traceStart(Action.ResolveConflict, {
+      databaseAccountName: this._container.databaseAccount().name,
+      defaultExperience: this._container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
       conflictResourceType: selectedConflict.resourceType,
@@ -306,6 +308,8 @@ export default class ConflictsTab extends TabsBase {
       TelemetryProcessor.traceSuccess(
         Action.ResolveConflict,
         {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
           conflictResourceType: selectedConflict.resourceType,
@@ -321,6 +325,8 @@ export default class ConflictsTab extends TabsBase {
       TelemetryProcessor.traceFailure(
         Action.ResolveConflict,
         {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
           conflictResourceType: selectedConflict.resourceType,
@@ -343,6 +349,8 @@ export default class ConflictsTab extends TabsBase {
     const selectedConflict = this.selectedConflictId();
 
     const startKey: number = TelemetryProcessor.traceStart(Action.DeleteConflict, {
+      databaseAccountName: this._container.databaseAccount().name,
+      defaultExperience: this._container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
       conflictResourceType: selectedConflict.resourceType,
@@ -360,6 +368,8 @@ export default class ConflictsTab extends TabsBase {
       TelemetryProcessor.traceSuccess(
         Action.DeleteConflict,
         {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
           conflictResourceType: selectedConflict.resourceType,
@@ -375,6 +385,8 @@ export default class ConflictsTab extends TabsBase {
       TelemetryProcessor.traceFailure(
         Action.DeleteConflict,
         {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
           conflictResourceType: selectedConflict.resourceType,
@@ -431,9 +443,10 @@ export default class ConflictsTab extends TabsBase {
           TelemetryProcessor.traceFailure(
             Action.Tab,
             {
+              databaseAccountName: this.collection.container.databaseAccount().name,
               databaseName: this.collection.databaseId,
               collectionName: this.collection.id(),
-
+              defaultExperience: this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(error),
@@ -480,9 +493,10 @@ export default class ConflictsTab extends TabsBase {
             TelemetryProcessor.traceSuccess(
               Action.Tab,
               {
+                databaseAccountName: this.collection.container.databaseAccount().name,
                 databaseName: this.collection.databaseId,
                 collectionName: this.collection.id(),
-
+                defaultExperience: this.collection.container.defaultExperience(),
                 dataExplorerArea: Constants.Areas.Tab,
                 tabTitle: this.tabTitle(),
               },
@@ -497,9 +511,10 @@ export default class ConflictsTab extends TabsBase {
             TelemetryProcessor.traceFailure(
               Action.Tab,
               {
+                databaseAccountName: this.collection.container.databaseAccount().name,
                 databaseName: this.collection.databaseId,
                 collectionName: this.collection.id(),
-
+                defaultExperience: this.collection.container.defaultExperience(),
                 dataExplorerArea: Constants.Areas.Tab,
                 tabTitle: this.tabTitle(),
                 error: getErrorMessage(error),

src/Explorer/Tabs/DatabaseSettingsTab.html

@@ -53,6 +53,7 @@
                     throughputAutoPilotRadioId: throughputAutoPilotRadioId,
                     throughputProvisionedRadioId: throughputProvisionedRadioId,
                     throughputModeRadioName: throughputModeRadioName,
+                    showAutoPilot: userCanChangeProvisioningTypes,
                     isAutoPilotSelected: isAutoPilotSelected,
                     maxAutoPilotThroughputSet: autoPilotThroughput,
                     autoPilotUsageCost: autoPilotUsageCost,

src/Explorer/Tabs/DatabaseSettingsTab.ts

@@ -1,23 +1,23 @@
-import * as ko from "knockout";
-import Q from "q";
-import DiscardIcon from "../../../images/discard.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import * as Constants from "../../Common/Constants";
-import { updateOffer } from "../../Common/dataAccess/updateOffer";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action } 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 { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import Explorer from "../Explorer";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import DiscardIcon from "../../../images/discard.svg";
+import editable from "../../Common/EditableUtility";
+import Q from "q";
+import SaveIcon from "../../../images/save-cosmos.svg";
 import TabsBase from "./TabsBase";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import Explorer from "../Explorer";
+import { updateOffer } from "../../Common/dataAccess/updateOffer";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import { configContext, Platform } from "../../ConfigContext";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 
 const updateThroughputBeyondLimitWarningMessage: string = `
 You are about to request an increase in throughput beyond the pre-allocated capacity. 
@@ -73,6 +73,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
   public shouldShowStatusBar: ko.Computed<boolean>;
   public throughputTitle: ko.PureComputed<string>;
   public throughputAriaLabel: ko.PureComputed<string>;
+  public userCanChangeProvisioningTypes: ko.Observable<boolean>;
   public autoPilotUsageCost: ko.PureComputed<string>;
   public warningMessage: ko.Computed<string>;
   public canExceedMaximumValue: ko.PureComputed<boolean>;
@@ -105,6 +106,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this._wasAutopilotOriginallySet = ko.observable(false);
     this.isAutoPilotSelected = editable.observable(false);
     this.autoPilotThroughput = editable.observable<number>();
+    this.userCanChangeProvisioningTypes = ko.observable(true);
 
     const autoscaleMaxThroughput = this.database?.offer()?.autoscaleMaxThroughput;
     if (autoscaleMaxThroughput) {
@@ -116,6 +118,9 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     }
 
     this._hasProvisioningTypeChanged = ko.pureComputed<boolean>(() => {
+      if (!this.userCanChangeProvisioningTypes()) {
+        return false;
+      }
       if (this._wasAutopilotOriginallySet() !== this.isAutoPilotSelected()) {
         return true;
       }
@@ -131,7 +136,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     });
 
     this.requestUnitsUsageCost = ko.pureComputed(() => {
-      const account = userContext.databaseAccount;
+      const account = this.container.databaseAccount();
       if (!account) {
         return "";
       }
@@ -357,7 +362,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this.isTemplateReady = ko.observable<boolean>(false);
 
     this.isFreeTierAccount = ko.computed<boolean>(() => {
-      const databaseAccount = userContext.databaseAccount;
+      const databaseAccount = this.container?.databaseAccount();
       return databaseAccount?.properties?.enableFreeTier;
     });
 
@@ -376,6 +381,8 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this.isExecuting(true);
 
     const startKey: number = TelemetryProcessor.traceStart(Action.UpdateSettings, {
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -410,8 +417,9 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
       TelemetryProcessor.traceFailure(
         Action.UpdateSettings,
         {
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.database && this.database.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
           error: errorMessage,
@@ -443,6 +451,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this.isAutoPilotSelected.setBaseline(AutoPilotUtils.isValidAutoPilotThroughput(offer.autoscaleMaxThroughput));
     this.autoPilotThroughput.setBaseline(offer.autoscaleMaxThroughput);
     this.throughput.setBaseline(offer.manualThroughput);
+    this.userCanChangeProvisioningTypes(true);
   }
 
   protected getTabsButtons(): CommandButtonComponentProps[] {

src/Explorer/Tabs/DocumentsTab.ts

@@ -425,6 +425,8 @@ export default class DocumentsTab extends TabsBase {
   public onSaveNewDocumentClick = (): Promise<any> => {
     this.isExecutionError(false);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -451,6 +453,8 @@ export default class DocumentsTab extends TabsBase {
           TelemetryProcessor.traceSuccess(
             Action.CreateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -464,6 +468,8 @@ export default class DocumentsTab extends TabsBase {
           TelemetryProcessor.traceFailure(
             Action.CreateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: errorMessage,
@@ -495,6 +501,8 @@ export default class DocumentsTab extends TabsBase {
 
     this.isExecutionError(false);
     const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -514,6 +522,8 @@ export default class DocumentsTab extends TabsBase {
           TelemetryProcessor.traceSuccess(
             Action.UpdateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -527,6 +537,8 @@ export default class DocumentsTab extends TabsBase {
           TelemetryProcessor.traceFailure(
             Action.UpdateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: errorMessage,
@@ -608,9 +620,10 @@ export default class DocumentsTab extends TabsBase {
           TelemetryProcessor.traceFailure(
             Action.Tab,
             {
+              databaseAccountName: this.collection.container.databaseAccount().name,
               databaseName: this.collection.databaseId,
               collectionName: this.collection.id(),
-
+              defaultExperience: this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(error),
@@ -636,6 +649,8 @@ export default class DocumentsTab extends TabsBase {
   private _deleteDocument(selectedDocumentId: DocumentId): Promise<void> {
     this.isExecutionError(false);
     const startKey: number = TelemetryProcessor.traceStart(Action.DeleteDocument, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -650,6 +665,8 @@ export default class DocumentsTab extends TabsBase {
           TelemetryProcessor.traceSuccess(
             Action.DeleteDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -662,6 +679,8 @@ export default class DocumentsTab extends TabsBase {
           TelemetryProcessor.traceFailure(
             Action.DeleteDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(error),
@@ -719,9 +738,10 @@ export default class DocumentsTab extends TabsBase {
             TelemetryProcessor.traceSuccess(
               Action.Tab,
               {
+                databaseAccountName: this.collection.container.databaseAccount().name,
                 databaseName: this.collection.databaseId,
                 collectionName: this.collection.id(),
-
+                defaultExperience: this.collection.container.defaultExperience(),
                 dataExplorerArea: Constants.Areas.Tab,
                 tabTitle: this.tabTitle(),
               },
@@ -738,9 +758,10 @@ export default class DocumentsTab extends TabsBase {
             TelemetryProcessor.traceFailure(
               Action.Tab,
               {
+                databaseAccountName: this.collection.container.databaseAccount().name,
                 databaseName: this.collection.databaseId,
                 collectionName: this.collection.id(),
-
+                defaultExperience: this.collection.container.defaultExperience(),
                 dataExplorerArea: Constants.Areas.Tab,
                 tabTitle: this.tabTitle(),
                 error: errorMessage,

src/Explorer/Tabs/MongoDocumentsTab.ts

@@ -48,6 +48,8 @@ export default class MongoDocumentsTab extends DocumentsTab {
     const documentContent = JSON.parse(this.selectedDocumentContent());
     this.displayedError("");
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateDocument, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -67,6 +69,8 @@ export default class MongoDocumentsTab extends DocumentsTab {
       TelemetryProcessor.traceFailure(
         Action.CreateDocument,
         {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
           error: message,
@@ -103,6 +107,8 @@ export default class MongoDocumentsTab extends DocumentsTab {
           TelemetryProcessor.traceSuccess(
             Action.CreateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -116,6 +122,8 @@ export default class MongoDocumentsTab extends DocumentsTab {
           TelemetryProcessor.traceFailure(
             Action.CreateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: errorMessage,
@@ -134,6 +142,8 @@ export default class MongoDocumentsTab extends DocumentsTab {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.UpdateDocument, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -161,6 +171,8 @@ export default class MongoDocumentsTab extends DocumentsTab {
           TelemetryProcessor.traceSuccess(
             Action.UpdateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -174,6 +186,8 @@ export default class MongoDocumentsTab extends DocumentsTab {
           TelemetryProcessor.traceFailure(
             Action.UpdateDocument,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: errorMessage,
@@ -232,9 +246,10 @@ export default class MongoDocumentsTab extends DocumentsTab {
             TelemetryProcessor.traceSuccess(
               Action.Tab,
               {
+                databaseAccountName: this.collection.container.databaseAccount().name,
                 databaseName: this.collection.databaseId,
                 collectionName: this.collection.id(),
-
+                defaultExperience: this.collection.container.defaultExperience(),
                 dataExplorerArea: Constants.Areas.Tab,
                 tabTitle: this.tabTitle(),
               },
@@ -248,9 +263,10 @@ export default class MongoDocumentsTab extends DocumentsTab {
             TelemetryProcessor.traceFailure(
               Action.Tab,
               {
+                databaseAccountName: this.collection.container.databaseAccount().name,
                 databaseName: this.collection.databaseId,
                 collectionName: this.collection.id(),
-
+                defaultExperience: this.collection.container.defaultExperience(),
                 dataExplorerArea: Constants.Areas.Tab,
                 tabTitle: this.tabTitle(),
                 error: getErrorMessage(error),

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -24,7 +24,7 @@ import * as CommandBarComponentButtonFactory from "../Menus/CommandBar/CommandBa
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
-import * as NotebookConfigurationUtils from "../../Utils/NotebookConfigurationUtils";
+import { NotebookConfigurationUtils } from "../../Utils/NotebookConfigurationUtils";
 import { KernelSpecsDisplay, NotebookClientV2 } from "../Notebook/NotebookClientV2";
 import { configContext } from "../../ConfigContext";
 import Explorer from "../Explorer";
@@ -509,6 +509,8 @@ export default class NotebookTabV2 extends TabsBase {
 
   private traceTelemetry(actionType: number) {
     TelemetryProcessor.trace(actionType, ActionModifiers.Mark, {
+      databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience && this.container.defaultExperience(),
       dataExplorerArea: Areas.Notebook,
     });
   }

src/Explorer/Tabs/QueryTab.ts

@@ -284,6 +284,8 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
     this.isExecutionError(false);
     this._resetAggregateQueryMetrics();
     const startKey: number = TelemetryProcessor.traceStart(Action.ExecuteQuery, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -331,6 +333,8 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
       TelemetryProcessor.traceSuccess(
         Action.ExecuteQuery,
         {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
         },
@@ -343,6 +347,8 @@ export default class QueryTab extends TabsBase implements ViewModels.WaitsForTem
       TelemetryProcessor.traceFailure(
         Action.ExecuteQuery,
         {
+          databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+          defaultExperience: this.collection && this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle(),
           error: errorMessage,

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -64,9 +64,10 @@ export class CollectionSettingsTabV2 extends SettingsTabV2 {
       traceFailure(
         Action.Tab,
         {
+          databaseAccountName: this.collection.container.databaseAccount().name,
           databaseName: this.collection.databaseId,
           collectionName: this.collection.id(),
-
+          defaultExperience: this.collection.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle,
           error: errorMessage,
@@ -119,7 +120,9 @@ export class DatabaseSettingsTabV2 extends SettingsTabV2 {
       traceFailure(
         Action.Tab,
         {
+          databaseAccountName: this.database?.container.databaseAccount().name,
           databaseName: this.database.id(),
+          defaultExperience: this.database?.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.Tab,
           tabTitle: this.tabTitle,
           error: errorMessage,

src/Explorer/Tabs/StoredProcedureTab.ts

@@ -77,6 +77,8 @@ export default class StoredProcedureTab extends ScriptTabBase {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.UpdateStoredProcedure, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -95,6 +97,8 @@ export default class StoredProcedureTab extends ScriptTabBase {
           TelemetryProcessor.traceSuccess(
             Action.UpdateStoredProcedure,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -106,6 +110,8 @@ export default class StoredProcedureTab extends ScriptTabBase {
           TelemetryProcessor.traceFailure(
             Action.UpdateStoredProcedure,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(error),
@@ -226,6 +232,8 @@ export default class StoredProcedureTab extends ScriptTabBase {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateStoredProcedure, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -251,6 +259,8 @@ export default class StoredProcedureTab extends ScriptTabBase {
           TelemetryProcessor.traceSuccess(
             Action.CreateStoredProcedure,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -264,6 +274,8 @@ export default class StoredProcedureTab extends ScriptTabBase {
           TelemetryProcessor.traceFailure(
             Action.CreateStoredProcedure,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(createError),

src/Explorer/Tabs/TabsBase.ts

@@ -7,7 +7,7 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import { RouteHandler } from "../../RouteHandlers/RouteHandler";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import * as ThemeUtility from "../../Common/ThemeUtility";
+import ThemeUtility from "../../Common/ThemeUtility";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 
@@ -86,7 +86,8 @@ export default class TabsBase extends WaitsForTemplateViewModel {
 
     TelemetryProcessor.trace(Action.Tab, ActionModifiers.Close, {
       tabName: this.constructor.name,
-
+      databaseAccountName: this.getContainer().databaseAccount().name,
+      defaultExperience: this.getContainer().defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
       tabId: this.tabId,
@@ -143,7 +144,8 @@ export default class TabsBase extends WaitsForTemplateViewModel {
 
     TelemetryProcessor.trace(Action.Tab, ActionModifiers.Open, {
       tabName: this.constructor.name,
-
+      databaseAccountName: this.getContainer().databaseAccount().name,
+      defaultExperience: this.getContainer().defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
       tabId: this.tabId,

src/Explorer/Tabs/TriggerTab.ts

@@ -42,6 +42,8 @@ export default class TriggerTab extends ScriptTabBase {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.UpdateTrigger, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       tabTitle: this.tabTitle(),
     });
 
@@ -63,6 +65,8 @@ export default class TriggerTab extends ScriptTabBase {
           TelemetryProcessor.traceSuccess(
             Action.UpdateTrigger,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -80,6 +84,8 @@ export default class TriggerTab extends ScriptTabBase {
           TelemetryProcessor.traceFailure(
             Action.UpdateTrigger,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(createError),
@@ -119,6 +125,8 @@ export default class TriggerTab extends ScriptTabBase {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateTrigger, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -145,6 +153,8 @@ export default class TriggerTab extends ScriptTabBase {
           TelemetryProcessor.traceSuccess(
             Action.CreateTrigger,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -158,6 +168,8 @@ export default class TriggerTab extends ScriptTabBase {
           TelemetryProcessor.traceFailure(
             Action.CreateTrigger,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(createError),

src/Explorer/Tabs/UserDefinedFunctionTab.ts

@@ -30,6 +30,8 @@ export default class UserDefinedFunctionTab extends ScriptTabBase {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.UpdateUDF, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -45,6 +47,8 @@ export default class UserDefinedFunctionTab extends ScriptTabBase {
           TelemetryProcessor.traceSuccess(
             Action.UpdateUDF,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
             },
@@ -62,6 +66,8 @@ export default class UserDefinedFunctionTab extends ScriptTabBase {
           TelemetryProcessor.traceFailure(
             Action.UpdateUDF,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(createError),
@@ -95,6 +101,8 @@ export default class UserDefinedFunctionTab extends ScriptTabBase {
     this.isExecutionError(false);
     this.isExecuting(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateUDF, {
+      databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+      defaultExperience: this.collection && this.collection.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: this.tabTitle(),
     });
@@ -120,8 +128,9 @@ export default class UserDefinedFunctionTab extends ScriptTabBase {
           TelemetryProcessor.traceSuccess(
             Action.CreateUDF,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
               dataExplorerArea: Constants.Areas.Tab,
-
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               tabTitle: this.tabTitle(),
             },
             startKey
@@ -134,6 +143,8 @@ export default class UserDefinedFunctionTab extends ScriptTabBase {
           TelemetryProcessor.traceFailure(
             Action.CreateUDF,
             {
+              databaseAccountName: this.collection && this.collection.container.databaseAccount().name,
+              defaultExperience: this.collection && this.collection.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: this.tabTitle(),
               error: getErrorMessage(createError),

src/Explorer/Tree/Collection.ts

@@ -220,10 +220,10 @@ export default class Collection implements ViewModels.Collection {
     this.container.selectedNode(this);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Collection node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     if (this.isCollectionExpanded()) {
@@ -245,10 +245,10 @@ export default class Collection implements ViewModels.Collection {
     this.isCollectionExpanded(false);
     TelemetryProcessor.trace(Action.CollapseTreeNode, ActionModifiers.Mark, {
       description: "Collection node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -261,10 +261,10 @@ export default class Collection implements ViewModels.Collection {
     this.isCollectionExpanded(true);
     TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
       description: "Collection node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -274,10 +274,10 @@ export default class Collection implements ViewModels.Collection {
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Documents node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -291,9 +291,10 @@ export default class Collection implements ViewModels.Collection {
       this.container.tabsManager.activateTab(documentsTab);
     } else {
       const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+        databaseAccountName: this.container.databaseAccount().name,
         databaseName: this.databaseId,
         collectionName: this.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: "Items",
       });
@@ -322,10 +323,10 @@ export default class Collection implements ViewModels.Collection {
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Conflicts);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Conflicts node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -339,9 +340,10 @@ export default class Collection implements ViewModels.Collection {
       this.container.tabsManager.activateTab(conflictsTab);
     } else {
       const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+        databaseAccountName: this.container.databaseAccount().name,
         databaseName: this.databaseId,
         collectionName: this.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: "Conflicts",
       });
@@ -370,10 +372,10 @@ export default class Collection implements ViewModels.Collection {
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.QueryTables);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Entities node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -398,9 +400,10 @@ export default class Collection implements ViewModels.Collection {
         title = `Rows`;
       }
       const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+        databaseAccountName: this.container.databaseAccount().name,
         databaseName: this.databaseId,
         collectionName: this.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: title,
       });
@@ -428,10 +431,10 @@ export default class Collection implements ViewModels.Collection {
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Graph);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Documents node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -447,9 +450,10 @@ export default class Collection implements ViewModels.Collection {
       this.documentIds([]);
       const title = "Graph";
       const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+        databaseAccountName: this.container.databaseAccount().name,
         databaseName: this.databaseId,
         collectionName: this.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: title,
       });
@@ -482,10 +486,10 @@ export default class Collection implements ViewModels.Collection {
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Documents node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -499,9 +503,10 @@ export default class Collection implements ViewModels.Collection {
       this.container.tabsManager.activateTab(mongoDocumentsTab);
     } else {
       const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+        databaseAccountName: this.container.databaseAccount().name,
         databaseName: this.databaseId,
         collectionName: this.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: "Documents",
       });
@@ -531,10 +536,10 @@ export default class Collection implements ViewModels.Collection {
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Settings);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Settings node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -547,9 +552,10 @@ export default class Collection implements ViewModels.Collection {
     );
 
     const traceStartData = {
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: tabTitle,
     };
@@ -590,9 +596,10 @@ export default class Collection implements ViewModels.Collection {
     const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
     const title = "Query " + id;
     const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: title,
     });
@@ -620,9 +627,10 @@ export default class Collection implements ViewModels.Collection {
 
     const title = "Query " + id;
     const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: title,
     });
@@ -648,9 +656,10 @@ export default class Collection implements ViewModels.Collection {
     const title: string = "Graph Query " + id;
 
     const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: title,
     });
@@ -762,20 +771,20 @@ export default class Collection implements ViewModels.Collection {
         this.isStoredProceduresExpanded(true);
         TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
           description: "Stored procedures node",
-
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.databaseId,
           collectionName: this.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ResourceTree,
         });
       },
       (error) => {
         TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Failed, {
           description: "Stored procedures node",
-
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.databaseId,
           collectionName: this.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ResourceTree,
           error: getErrorMessage(error),
         });
@@ -791,10 +800,10 @@ export default class Collection implements ViewModels.Collection {
     this.isStoredProceduresExpanded(false);
     TelemetryProcessor.trace(Action.CollapseTreeNode, ActionModifiers.Mark, {
       description: "Stored procedures node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -821,20 +830,20 @@ export default class Collection implements ViewModels.Collection {
         this.isUserDefinedFunctionsExpanded(true);
         TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
           description: "UDF node",
-
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.databaseId,
           collectionName: this.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ResourceTree,
         });
       },
       (error) => {
         TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Failed, {
           description: "UDF node",
-
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.databaseId,
           collectionName: this.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ResourceTree,
           error: getErrorMessage(error),
         });
@@ -850,10 +859,10 @@ export default class Collection implements ViewModels.Collection {
     this.isUserDefinedFunctionsExpanded(false);
     TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
       description: "UDF node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -880,10 +889,10 @@ export default class Collection implements ViewModels.Collection {
         this.isTriggersExpanded(true);
         TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
           description: "Triggers node",
-
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.databaseId,
           collectionName: this.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ResourceTree,
         });
       },
@@ -891,10 +900,10 @@ export default class Collection implements ViewModels.Collection {
         this.isTriggersExpanded(true);
         TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
           description: "Triggers node",
-
+          databaseAccountName: this.container.databaseAccount().name,
           databaseName: this.databaseId,
           collectionName: this.id(),
-
+          defaultExperience: this.container.defaultExperience(),
           dataExplorerArea: Constants.Areas.ResourceTree,
           error: getErrorMessage(error),
         });
@@ -910,10 +919,10 @@ export default class Collection implements ViewModels.Collection {
     this.isTriggersExpanded(false);
     TelemetryProcessor.trace(Action.CollapseTreeNode, ActionModifiers.Mark, {
       description: "Triggers node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -1202,8 +1211,10 @@ export default class Collection implements ViewModels.Collection {
     if (!this.container.isServerlessEnabled() && !this.offer()) {
       this.container.isRefreshingExplorer(true);
       const startKey: number = TelemetryProcessor.traceStart(Action.LoadOffers, {
+        databaseAccountName: this.container.databaseAccount().name,
         databaseName: this.databaseId,
         collectionName: this.id(),
+        defaultExperience: this.container.defaultExperience(),
       });
 
       const params: DataModels.ReadCollectionOfferParams = {
@@ -1219,8 +1230,10 @@ export default class Collection implements ViewModels.Collection {
         TelemetryProcessor.traceSuccess(
           Action.LoadOffers,
           {
+            databaseAccountName: this.container.databaseAccount().name,
             databaseName: this.databaseId,
             collectionName: this.id(),
+            defaultExperience: this.container.defaultExperience(),
           },
           startKey
         );
@@ -1228,9 +1241,10 @@ export default class Collection implements ViewModels.Collection {
         TelemetryProcessor.traceFailure(
           Action.LoadOffers,
           {
+            databaseAccountName: this.container.databaseAccount().name,
             databaseName: this.databaseId,
             collectionName: this.id(),
-
+            defaultExperience: this.container.defaultExperience(),
             error: getErrorMessage(error),
             errorStack: getErrorStack(error),
           },

src/Explorer/Tree/Database.ts

@@ -53,7 +53,8 @@ export default class Database implements ViewModels.Database {
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.DatabaseSettings);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Settings node",
-
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -70,8 +71,9 @@ export default class Database implements ViewModels.Database {
       : (matchingTabs?.[0] as DatabaseSettingsTabV2);
     if (!settingsTab) {
       const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+        databaseAccountName: this.container.databaseAccount().name,
         databaseName: this.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: "Scale",
       });
@@ -103,9 +105,10 @@ export default class Database implements ViewModels.Database {
           TelemetryProcessor.traceFailure(
             Action.Tab,
             {
+              databaseAccountName: this.container.databaseAccount().name,
               databaseName: this.id(),
               collectionName: this.id(),
-
+              defaultExperience: this.container.defaultExperience(),
               dataExplorerArea: Constants.Areas.Tab,
               tabTitle: "Scale",
               error: errorMessage,
@@ -152,7 +155,8 @@ export default class Database implements ViewModels.Database {
     this.container.selectedNode(this);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Database node",
-
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -167,7 +171,8 @@ export default class Database implements ViewModels.Database {
     this.isDatabaseExpanded(true);
     TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
       description: "Database node",
-
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -180,7 +185,8 @@ export default class Database implements ViewModels.Database {
     this.isDatabaseExpanded(false);
     TelemetryProcessor.trace(Action.CollapseTreeNode, ActionModifiers.Mark, {
       description: "Database node",
-
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }

src/Explorer/Tree/ResourceTokenCollection.ts

@@ -49,10 +49,10 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
     this.isCollectionExpanded(true);
     TelemetryProcessor.trace(Action.ExpandTreeNode, ActionModifiers.Mark, {
       description: "Collection node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -65,10 +65,10 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
     this.isCollectionExpanded(false);
     TelemetryProcessor.trace(Action.CollapseTreeNode, ActionModifiers.Mark, {
       description: "Collection node",
-
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }
@@ -78,9 +78,10 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
     const id = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Query).length + 1;
     const title = "Query " + id;
     const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+      databaseAccountName: this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.Tab,
       tabTitle: title,
     });
@@ -108,9 +109,10 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Documents);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Documents node",
+      databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
       databaseName: this.databaseId,
       collectionName: this.id(),
-
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
 
@@ -126,9 +128,10 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
       this.container.tabsManager.activateTab(documentsTab);
     } else {
       const startKey: number = TelemetryProcessor.traceStart(Action.Tab, {
+        databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
         databaseName: this.databaseId,
         collectionName: this.id(),
-
+        defaultExperience: this.container.defaultExperience(),
         dataExplorerArea: Constants.Areas.Tab,
         tabTitle: "Items",
       });

src/Explorer/Tree/ResourceTreeAdapter.test.ts

@@ -1,6 +1,6 @@
 import Explorer from "../Explorer";
 import * as ko from "knockout";
-import { ResourceTree } from "./ResourceTree";
+import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
 import * as ViewModels from "../../Contracts/ViewModels";
 import TabsBase from "../Tabs/TabsBase";
 
@@ -26,40 +26,22 @@ describe("ResourceTreeAdapter", () => {
     it("it should not select if no selected node", () => {
       const explorer = mockContainer();
       explorer.selectedNode(undefined);
-      const resourceTree = new ResourceTree({
-        explorer,
-        lastRefreshedTime: 0,
-        galleryContentRoot: undefined,
-        myNotebooksContentRoot: undefined,
-        gitHubNotebooksContentRoot: undefined,
-      });
-      const isDataNodeSelected = resourceTree.isDataNodeSelected("foo", "bar", undefined);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
       expect(isDataNodeSelected).toBeFalsy();
     });
 
     it("it should not select incorrect subnodekinds", () => {
-      const resourceTree = new ResourceTree({
-        explorer: mockContainer(),
-        lastRefreshedTime: 0,
-        galleryContentRoot: undefined,
-        myNotebooksContentRoot: undefined,
-        gitHubNotebooksContentRoot: undefined,
-      });
-      const isDataNodeSelected = resourceTree.isDataNodeSelected("foo", "bar", undefined);
+      const resourceTreeAdapter = new ResourceTreeAdapter(mockContainer());
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
       expect(isDataNodeSelected).toBeFalsy();
     });
 
     it("it should not select if no active tab", () => {
       const explorer = mockContainer();
       explorer.tabsManager.activeTab(undefined);
-      const resourceTree = new ResourceTree({
-        explorer,
-        lastRefreshedTime: 0,
-        galleryContentRoot: undefined,
-        myNotebooksContentRoot: undefined,
-        gitHubNotebooksContentRoot: undefined,
-      });
-      const isDataNodeSelected = resourceTree.isDataNodeSelected("foo", "bar", undefined);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("foo", "bar", undefined);
       expect(isDataNodeSelected).toBeFalsy();
     });
 
@@ -72,14 +54,8 @@ describe("ResourceTreeAdapter", () => {
         id: ko.observable<string>("dbid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
       } as unknown) as ViewModels.TreeNode);
-      const resourceTree = new ResourceTree({
-        explorer,
-        lastRefreshedTime: 0,
-        galleryContentRoot: undefined,
-        myNotebooksContentRoot: undefined,
-        gitHubNotebooksContentRoot: undefined,
-      });
-      const isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", undefined, [
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", undefined, [
         ViewModels.CollectionTabKind.Documents,
       ]);
       expect(isDataNodeSelected).toBeTruthy();
@@ -98,14 +74,8 @@ describe("ResourceTreeAdapter", () => {
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
       } as unknown) as ViewModels.TreeNode);
-      const resourceTree = new ResourceTree({
-        explorer,
-        lastRefreshedTime: 0,
-        galleryContentRoot: undefined,
-        myNotebooksContentRoot: undefined,
-        gitHubNotebooksContentRoot: undefined,
-      });
-      let isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", "collid", [subNodeKind]);
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      let isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
       expect(isDataNodeSelected).toBeTruthy();
 
       subNodeKind = ViewModels.CollectionTabKind.Graph;
@@ -119,7 +89,7 @@ describe("ResourceTreeAdapter", () => {
         id: ko.observable<string>("collid"),
         selectedSubnodeKind: ko.observable<ViewModels.CollectionTabKind>(subNodeKind),
       } as unknown) as ViewModels.TreeNode);
-      isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", "collid", [subNodeKind]);
+      isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [subNodeKind]);
       expect(isDataNodeSelected).toBeTruthy();
     });
 
@@ -135,14 +105,8 @@ describe("ResourceTreeAdapter", () => {
       explorer.tabsManager.activeTab({
         tabKind: ViewModels.CollectionTabKind.Documents,
       } as TabsBase);
-      const resourceTree = new ResourceTree({
-        explorer,
-        lastRefreshedTime: 0,
-        galleryContentRoot: undefined,
-        myNotebooksContentRoot: undefined,
-        gitHubNotebooksContentRoot: undefined,
-      });
-      const isDataNodeSelected = resourceTree.isDataNodeSelected("dbid", "collid", [
+      const resourceTreeAdapter = new ResourceTreeAdapter(explorer);
+      const isDataNodeSelected = resourceTreeAdapter.isDataNodeSelected("dbid", "collid", [
         ViewModels.CollectionTabKind.Settings,
       ]);
       expect(isDataNodeSelected).toBeFalsy();

src/Explorer/Tree/ResourceTreeAdapter.test.tsx

@@ -2,7 +2,7 @@ import * as ko from "knockout";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import React from "react";
-import { ResourceTree } from "./ResourceTree";
+import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
 import { shallow } from "enzyme";
 import { TreeComponent, TreeNode, TreeComponentProps } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
@@ -237,13 +237,7 @@ const createMockCollection = (): ViewModels.Collection => {
 
 describe("Resource tree for schema", () => {
   const mockContainer: Explorer = createMockContainer();
-  const resourceTree = new ResourceTree({
-    explorer: mockContainer,
-    lastRefreshedTime: 0,
-    galleryContentRoot: undefined,
-    myNotebooksContentRoot: undefined,
-    gitHubNotebooksContentRoot: undefined,
-  });
+  const resourceTree = new ResourceTreeAdapter(mockContainer);
 
   it("should render", () => {
     const rootNode: TreeNode = resourceTree.buildSchemaNode(createMockCollection());

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -1,11 +1,12 @@
 import * as ko from "knockout";
 import * as React from "react";
+import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
-import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
+import { TreeComponent, TreeNode, TreeNodeMenuItem, TreeNodeComponent } from "../Controls/TreeComponent/TreeComponent";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { ResourceTreeContextMenuButtonFactory } from "../ContextMenuButtonFactory";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
@@ -17,6 +18,8 @@ import FileIcon from "../../../images/notebook/file-cosmos.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import { ArrayHashMap } from "../../Common/ArrayHashMap";
 import { NotebookUtil } from "../Notebook/NotebookUtil";
+import _ from "underscore";
+import { IPinnedRepo } from "../../Juno/JunoClient";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers, Source } from "../../Shared/Telemetry/TelemetryConstants";
 import { Areas } from "../../Common/Constants";
@@ -31,39 +34,31 @@ import Trigger from "./Trigger";
 import TabsBase from "../Tabs/TabsBase";
 import { userContext } from "../../UserContext";
 import * as DataModels from "../../Contracts/DataModels";
-import { DataTitle, NotebooksTitle, PseudoDirPath } from "../../hooks/useNotebooks";
 
-export interface ResourceTreeProps {
-  // TODO remove eventually
-  explorer: Explorer;
+export class ResourceTreeAdapter implements ReactAdapter {
+  public static readonly MyNotebooksTitle = "My Notebooks";
+  public static readonly GitHubReposTitle = "GitHub repos";
 
-  lastRefreshedTime: number;
+  private static readonly DataTitle = "DATA";
+  private static readonly NotebooksTitle = "NOTEBOOKS";
+  private static readonly PseudoDirPath = "PsuedoDir";
 
-  galleryContentRoot: NotebookContentItem;
-  myNotebooksContentRoot: NotebookContentItem;
-  gitHubNotebooksContentRoot: NotebookContentItem;
-}
+  public parameters: ko.Observable<number>;
+
+  public galleryContentRoot: NotebookContentItem;
+  public myNotebooksContentRoot: NotebookContentItem;
+  public gitHubNotebooksContentRoot: NotebookContentItem;
 
-export class ResourceTree extends React.Component<ResourceTreeProps> {
   private koSubsDatabaseIdMap: ArrayHashMap<ko.Subscription>; // database id -> ko subs
   private koSubsCollectionIdMap: ArrayHashMap<ko.Subscription>; // collection id -> ko subs
   private databaseCollectionIdMap: ArrayHashMap<string>; // database id -> collection ids
 
-  private readonly container: Explorer;
+  public constructor(private container: Explorer) {
+    this.parameters = ko.observable(Date.now());
 
-  constructor(props: ResourceTreeProps) {
-    super(props);
-    this.state = {
-      galleryContentRoot: undefined,
-      myNotebooksContentRoot: undefined,
-      gitHubNotebooksContentRoot: undefined,
-    };
-
-    this.container = props.explorer;
-
-    this.container.selectedNode.subscribe(() => this.triggerRender());
-    this.container.tabsManager.activeTab.subscribe(() => this.triggerRender());
-    this.container.isNotebookEnabled.subscribe(() => this.triggerRender());
+    this.container.selectedNode.subscribe((newValue: any) => this.triggerRender());
+    this.container.tabsManager.activeTab.subscribe((newValue: TabsBase) => this.triggerRender());
+    this.container.isNotebookEnabled.subscribe((newValue) => this.triggerRender());
 
     this.koSubsDatabaseIdMap = new ArrayHashMap();
     this.koSubsCollectionIdMap = new ArrayHashMap();
@@ -78,9 +73,34 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
     });
 
     this.container.nonSystemDatabases().forEach((database: ViewModels.Database) => this.watchDatabase(database));
+    this.triggerRender();
   }
 
-  render(): JSX.Element {
+  private traceMyNotebookTreeInfo() {
+    const myNotebooksTree = this.myNotebooksContentRoot;
+    if (myNotebooksTree.children) {
+      // Count 1st generation children (tree is lazy-loaded)
+      const nodeCounts = { files: 0, notebooks: 0, directories: 0 };
+      myNotebooksTree.children.forEach((treeNode) => {
+        switch ((treeNode as NotebookContentItem).type) {
+          case NotebookContentItemType.File:
+            nodeCounts.files++;
+            break;
+          case NotebookContentItemType.Directory:
+            nodeCounts.directories++;
+            break;
+          case NotebookContentItemType.Notebook:
+            nodeCounts.notebooks++;
+            break;
+          default:
+            break;
+        }
+      });
+      TelemetryProcessor.trace(Action.RefreshResourceTreeMyNotebooks, ActionModifiers.Mark, { ...nodeCounts });
+    }
+  }
+
+  public renderComponent(): JSX.Element {
     const dataRootNode = this.buildDataTree();
     const notebooksRootNode = this.buildNotebooksTrees();
 
@@ -88,15 +108,15 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
       return (
         <>
           <AccordionComponent>
-            <AccordionItemComponent title={DataTitle} isExpanded={!this.props.gitHubNotebooksContentRoot}>
+            <AccordionItemComponent title={ResourceTreeAdapter.DataTitle} isExpanded={!this.gitHubNotebooksContentRoot}>
               <TreeComponent className="dataResourceTree" rootNode={dataRootNode} />
             </AccordionItemComponent>
-            <AccordionItemComponent title={NotebooksTitle}>
+            <AccordionItemComponent title={ResourceTreeAdapter.NotebooksTitle}>
               <TreeComponent className="notebookResourceTree" rootNode={notebooksRootNode} />
             </AccordionItemComponent>
           </AccordionComponent>
 
-          {this.props.galleryContentRoot && this.buildGalleryCallout()}
+          {this.galleryContentRoot && this.buildGalleryCallout()}
         </>
       );
     } else {
@@ -104,6 +124,71 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
     }
   }
 
+  public async initialize(): Promise<void[]> {
+    const refreshTasks: Promise<void>[] = [];
+
+    this.galleryContentRoot = {
+      name: "Gallery",
+      path: "Gallery",
+      type: NotebookContentItemType.File,
+    };
+
+    this.myNotebooksContentRoot = {
+      name: ResourceTreeAdapter.MyNotebooksTitle,
+      path: this.container.getNotebookBasePath(),
+      type: NotebookContentItemType.Directory,
+    };
+
+    // Only if notebook server is available we can refresh
+    if (this.container.notebookServerInfo().notebookServerEndpoint) {
+      refreshTasks.push(
+        this.container.refreshContentItem(this.myNotebooksContentRoot).then(() => {
+          this.triggerRender();
+          this.traceMyNotebookTreeInfo();
+        })
+      );
+    }
+
+    if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
+      this.gitHubNotebooksContentRoot = {
+        name: ResourceTreeAdapter.GitHubReposTitle,
+        path: ResourceTreeAdapter.PseudoDirPath,
+        type: NotebookContentItemType.Directory,
+      };
+    } else {
+      this.gitHubNotebooksContentRoot = undefined;
+    }
+
+    return Promise.all(refreshTasks);
+  }
+
+  public initializeGitHubRepos(pinnedRepos: IPinnedRepo[]): void {
+    if (this.gitHubNotebooksContentRoot) {
+      this.gitHubNotebooksContentRoot.children = [];
+      pinnedRepos?.forEach((pinnedRepo) => {
+        const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
+        const repoTreeItem: NotebookContentItem = {
+          name: repoFullName,
+          path: ResourceTreeAdapter.PseudoDirPath,
+          type: NotebookContentItemType.Directory,
+          children: [],
+        };
+
+        pinnedRepo.branches.forEach((branch) => {
+          repoTreeItem.children.push({
+            name: branch.name,
+            path: GitHubUtils.toContentUri(pinnedRepo.owner, pinnedRepo.name, branch.name, ""),
+            type: NotebookContentItemType.Directory,
+          });
+        });
+
+        this.gitHubNotebooksContentRoot.children.push(repoTreeItem);
+      });
+
+      this.triggerRender();
+    }
+  }
+
   private buildDataTree(): TreeNode {
     const databaseTreeNodes: TreeNode[] = this.container.nonSystemDatabases().map((database: ViewModels.Database) => {
       const databaseNode: TreeNode = {
@@ -179,7 +264,15 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
       onClick: () => {
         collection.openTab();
         // push to most recent
-        mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
+        this.container.mostRecentActivity.addItem(userContext.databaseAccount?.id, {
+          type: MostRecentActivity.Type.OpenCollection,
+          title: collection.id(),
+          description: "Data",
+          data: {
+            databaseId: collection.databaseId,
+            collectionId: collection.id(),
+          },
+        });
       },
       isSelected: () =>
         this.isDataNodeSelected(collection.databaseId, collection.id(), [
@@ -203,7 +296,7 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
       children.push(schemaNode);
     }
 
-    if (ResourceTree.showScriptNodes(this.container)) {
+    if (ResourceTreeAdapter.showScriptNodes(this.container)) {
       children.push(this.buildStoredProcedureNode(collection));
       children.push(this.buildUserDefinedFunctionsNode(collection));
       children.push(this.buildTriggerNode(collection));
@@ -244,7 +337,7 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
         );
       },
       onExpanded: () => {
-        if (ResourceTree.showScriptNodes(this.container)) {
+        if (ResourceTreeAdapter.showScriptNodes(this.container)) {
           collection.loadStoredProcedures();
           collection.loadUserDefinedFunctions();
           collection.loadTriggers();
@@ -323,7 +416,7 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
   }
 
   public buildSchemaNode(collection: ViewModels.Collection): TreeNode {
-    if (collection.analyticalStorageTtl() === undefined) {
+    if (collection.analyticalStorageTtl() == undefined) {
       return undefined;
     }
 
@@ -344,14 +437,12 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
   }
 
   private getSchemaNodes(fields: DataModels.IDataField[]): TreeNode[] {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const schema: any = {};
 
     //unflatten
-    fields.forEach((field: DataModels.IDataField) => {
+    fields.forEach((field: DataModels.IDataField, fieldIndex: number) => {
       const path: string[] = field.path.split(".");
       const fieldProperties = [field.dataType.name, `HasNulls: ${field.hasNulls}`];
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       let current: any = {};
       path.forEach((name: string, pathIndex: number) => {
         if (pathIndex === 0) {
@@ -376,11 +467,9 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
       });
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const traverse = (obj: any): TreeNode[] => {
       const children: TreeNode[] = [];
 
-      // eslint-disable-next-line no-null/no-null
       if (obj !== null && !Array.isArray(obj) && typeof obj === "object") {
         Object.entries(obj).forEach(([key, value]) => {
           children.push({ label: key, children: traverse(value) });
@@ -396,21 +485,21 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
   }
 
   private buildNotebooksTrees(): TreeNode {
-    const notebooksTree: TreeNode = {
+    let notebooksTree: TreeNode = {
       label: undefined,
       isExpanded: true,
       children: [],
     };
 
-    if (this.props.galleryContentRoot) {
+    if (this.galleryContentRoot) {
       notebooksTree.children.push(this.buildGalleryNotebooksTree());
     }
 
-    if (this.props.myNotebooksContentRoot) {
+    if (this.myNotebooksContentRoot) {
       notebooksTree.children.push(this.buildMyNotebooksTree());
     }
 
-    if (this.props.gitHubNotebooksContentRoot) {
+    if (this.gitHubNotebooksContentRoot) {
       // collapse all other notebook nodes
       notebooksTree.children.forEach((node) => (node.isExpanded = false));
       notebooksTree.children.push(this.buildGitHubNotebooksTree());
@@ -480,11 +569,11 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
 
   private buildMyNotebooksTree(): TreeNode {
     const myNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
-      this.props.myNotebooksContentRoot,
+      this.myNotebooksContentRoot,
       (item: NotebookContentItem) => {
         this.container.openNotebook(item).then((hasOpened) => {
           if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+            this.pushItemToMostRecent(item);
           }
         });
       },
@@ -501,11 +590,11 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
 
   private buildGitHubNotebooksTree(): TreeNode {
     const gitHubNotebooksTree: TreeNode = this.buildNotebookDirectoryNode(
-      this.props.gitHubNotebooksContentRoot,
+      this.gitHubNotebooksContentRoot,
       (item: NotebookContentItem) => {
         this.container.openNotebook(item).then((hasOpened) => {
           if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+            this.pushItemToMostRecent(item);
           }
         });
       },
@@ -522,6 +611,8 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
         label: "Disconnect from GitHub",
         onClick: () => {
           TelemetryProcessor.trace(Action.NotebooksGitHubDisconnect, ActionModifiers.Mark, {
+            databaseAccountName: this.container.databaseAccount() && this.container.databaseAccount().name,
+            defaultExperience: this.container.defaultExperience && this.container.defaultExperience(),
             dataExplorerArea: Areas.Notebook,
           });
           this.container.notebookManager?.gitHubOAuthService.logout();
@@ -535,6 +626,18 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
     return gitHubNotebooksTree;
   }
 
+  private pushItemToMostRecent(item: NotebookContentItem) {
+    this.container.mostRecentActivity.addItem(userContext.databaseAccount?.id, {
+      type: MostRecentActivity.Type.OpenNotebook,
+      title: item.name,
+      description: "Notebook",
+      data: {
+        name: item.name,
+        path: item.path,
+      },
+    });
+  }
+
   private buildChildNodes(
     item: NotebookContentItem,
     onFileClick: (item: NotebookContentItem) => void,
@@ -573,7 +676,6 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
           /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
              NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
            */
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (activeTab as any).notebookPath() === item.path
         );
       },
@@ -587,7 +689,7 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
       {
         label: "Rename",
         iconSrc: NotebookIcon,
-        onClick: () => this.container.renameNotebook(item).then(() => this.triggerRender()),
+        onClick: () => this.container.renameNotebook(item),
       },
       {
         label: "Delete",
@@ -676,7 +778,7 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
       {
         label: "New Directory",
         iconSrc: NewNotebookIcon,
-        onClick: () => this.container.onCreateDirectory(item).then(() => this.triggerRender()),
+        onClick: () => this.container.onCreateDirectory(item),
       },
       {
         label: "New Notebook",
@@ -729,19 +831,20 @@ export class ResourceTree extends React.Component<ResourceTreeProps> {
           /* TODO Redesign Tab interface so that resource tree doesn't need to know about NotebookV2Tab.
              NotebookV2Tab could be dynamically imported, but not worth it to just get this type right.
            */
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           (activeTab as any).notebookPath() === item.path
         );
       },
       contextMenu:
-        createDirectoryContextMenu && item.path !== PseudoDirPath ? this.createDirectoryContextMenu(item) : undefined,
+        createDirectoryContextMenu && item.path !== ResourceTreeAdapter.PseudoDirPath
+          ? this.createDirectoryContextMenu(item)
+          : undefined,
       data: item,
       children: this.buildChildNodes(item, onFileClick, createDirectoryContextMenu, createFileContextMenu),
     };
   }
 
-  private triggerRender() {
-    this.setState({});
+  public triggerRender() {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
   }
 
   /**

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx

@@ -13,6 +13,7 @@ const createMockContainer = (): Explorer => {
   let mockContainer = {} as Explorer;
   mockContainer.resourceTokenCollection = createMockCollection(mockContainer);
   mockContainer.selectedNode = ko.observable<ViewModels.TreeNode>();
+  mockContainer.mostRecentActivity = new MostRecentActivity.MostRecentActivity(mockContainer);
   mockContainer.onUpdateTabsButtons = () => {};
 
   return mockContainer;

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx

@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import * as React from "react";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { NotebookContentItem } from "../Notebook/NotebookContentItem";
@@ -44,7 +44,15 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
       onClick: () => {
         collection.onDocumentDBDocumentsClick();
         // push to most recent
-        mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
+        this.container.mostRecentActivity.addItem(userContext.databaseAccount?.id, {
+          type: MostRecentActivity.Type.OpenCollection,
+          title: collection.id(),
+          description: "Data",
+          data: {
+            databaseId: collection.databaseId,
+            collectionId: collection.id(),
+          },
+        });
       },
       isSelected: () =>
         this.isDataNodeSelected(collection.databaseId, collection.id(), ViewModels.CollectionTabKind.Documents),

src/Explorer/Tree/StoredProcedure.ts

@@ -86,7 +86,8 @@ export default class StoredProcedure {
     this.container.selectedNode(this);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
       description: "Stored procedure node",
-
+      databaseAccountName: this.container.databaseAccount().name,
+      defaultExperience: this.container.defaultExperience(),
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
   }