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"
+    name: "End to End Hosted Tests"
-    needs: [cleanupaccounts]
+    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
+          node-version: 12.x
-      - run: npm ci
+      - name: End to End Hosted Tests
-      - run: npm start &
+        run: |
-      - run: node utils/cleanupDBs.js
+          npm ci
-      - run: npm run wait-for-server
+          npm start &
-      - name: ${{ matrix['test-file'] }}
+          node utils/cleanupDBs.js
-        run: npx jest -c ./jest.config.e2e.js --detectOpenHandles ${{ matrix['test-file'] }}
+          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": {
+    "files.exclude": {
-    ".vs": true,
+        ".vs": true,
-    ".vscode/**": true,
+        ".vscode/**": true,
-    "*.trx": true,
+        "*.trx": true,
-    "**/.DS_Store": true,
+        "**/.DS_Store": true,
-    "**/.git": true,
+        "**/.git": true,
-    "**/.hg": true,
+        "**/.hg": true,
-    "**/.svn": true,
+        "**/.svn": true,
-    "built/**": true,
+        "built/**": true,
-    "coverage/**": true,
+        "coverage/**": true,
-    "libs/**": true,
+        "libs/**": true,
-    "node_modules/**": true,
+        "node_modules/**": true,
-    "package-lock.json": true,
+        "package-lock.json": true,
-    "quickstart/**": true,
+        "quickstart/**": true,
-    "test/out/**": true,
+        "test/out/**": true,
-    "workers/libs/**": true
+        "workers/libs/**": true
-  },
+    },
-  "typescript.tsdk": "node_modules/typescript/lib",
+    "typescript.tsdk": "node_modules/typescript/lib"
-  "editor.formatOnSave": true,
+}
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": true
-  }
-}

config.json

@@ -1,4 +0,0 @@
-{
-  "GITHUB_CLIENT_ID": "167ea4b09801db1de03d",
-  "GITHUB_CLIENT_SECRET": "e7bb10a3a8da428815805c6fc483560a035a73c1"
-}

package-lock.json

@@ -218,11 +218,6 @@
         }
       }
     },
-    "@azure/ms-rest-azure-env": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@azure/ms-rest-azure-env/-/ms-rest-azure-env-2.0.0.tgz",
-      "integrity": "sha512-dG76W7ElfLi+fbTjnZVGj+M9e0BIEJmRxU6fHaUQ12bZBe8EJKYb2GV50YWNaP2uJiVQ5+7nXEVj1VN1UQtaEw=="
-    },
     "@azure/ms-rest-azure-js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@azure/ms-rest-azure-js/-/ms-rest-azure-js-2.1.0.tgz",
@@ -251,16 +246,6 @@
         "xml2js": "^0.4.19"
       }
     },
-    "@azure/ms-rest-nodeauth": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@azure/ms-rest-nodeauth/-/ms-rest-nodeauth-3.0.7.tgz",
-      "integrity": "sha512-7Q1MyMB+eqUQy8JO+virSIzAjqR2UbKXE/YQZe+53gC8yakm8WOQ5OzGfPP+eyHqeRs6bQESyw2IC5feLWlT2A==",
-      "requires": {
-        "@azure/ms-rest-azure-env": "^2.0.0",
-        "@azure/ms-rest-js": "^2.0.4",
-        "adal-node": "^0.1.28"
-      }
-    },
     "@azure/msal-common": {
       "version": "1.7.2",
       "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-1.7.2.tgz",
@@ -713,20 +698,12 @@
       }
     },
     "@babel/plugin-syntax-class-properties": {
-      "version": "7.12.13",
+      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.1.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "integrity": "sha512-U40A76x5gTwmESz+qiqssqmeEsKvcSyvtgktrm0uzcARAmM9I1jR221f6Oq+GmHrcD+LvZDag1UTOTe2fL3TeA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.12.13"
+        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.13.0",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
-          "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==",
-          "dev": true
-        }
       }
     },
     "@babel/plugin-syntax-decorators": {
@@ -1634,6 +1611,15 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@ianvs/eslint-stats": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@ianvs/eslint-stats/-/eslint-stats-2.0.0.tgz",
+      "integrity": "sha512-DnIVVAiXR4tfWERTiQxr1Prrs/uFEbC1C4gTGORMvbF4k7ENyVQeLcoUfNyhlAj2MB/OeorCrN3wSnYuDOUS6Q==",
+      "requires": {
+        "chalk": "^2.4.2",
+        "lodash": "^4.17.15"
+      }
+    },
     "@icons/material": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
@@ -1695,9 +1681,9 @@
       }
     },
     "@istanbuljs/schema": {
-      "version": "0.1.3",
+      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "integrity": "sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==",
       "dev": true
     },
     "@jest/console": {
@@ -1837,9 +1823,9 @@
           }
         },
         "@types/yargs": {
-          "version": "15.0.13",
+          "version": "15.0.12",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.12.tgz",
-          "integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
+          "integrity": "sha512-f+fD/fQAo3BCbCDlrUpznF1A5Zp9rB0noS5vnoormHSIPFKL0Z2DcUJ3Gxp5ytH4uLRNxy7AwYUC9exZzqGMAw==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -4454,9 +4440,9 @@
       }
     },
     "@types/graceful-fs": {
-      "version": "4.1.5",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.4.tgz",
-      "integrity": "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==",
+      "integrity": "sha512-mWA/4zFQhfvOA8zWkXobwJvBD7vzcxgrOQ0J5CH1votGqdq9m7+FwtGaqyCZqC3NyyBkc9z4m+iry4LlqcMWJg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -5664,38 +5650,6 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
       "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
     },
-    "adal-node": {
-      "version": "0.1.28",
-      "resolved": "https://registry.npmjs.org/adal-node/-/adal-node-0.1.28.tgz",
-      "integrity": "sha1-RoxLs+u9lrEnBmn0ucuk4AZepIU=",
-      "requires": {
-        "@types/node": "^8.0.47",
-        "async": ">=0.6.0",
-        "date-utils": "*",
-        "jws": "3.x.x",
-        "request": ">= 2.52.0",
-        "underscore": ">= 1.3.1",
-        "uuid": "^3.1.0",
-        "xmldom": ">= 0.1.x",
-        "xpath.js": "~1.1.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "8.10.66",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.66.tgz",
-          "integrity": "sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw=="
-        },
-        "jws": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-          "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-          "requires": {
-            "jwa": "^1.4.1",
-            "safe-buffer": "^5.0.1"
-          }
-        }
-      }
-    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -6114,6 +6068,7 @@
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
       "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "dev": true,
       "requires": {
         "lodash": "^4.17.14"
       }
@@ -7075,6 +7030,11 @@
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
       "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
     },
+    "chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
+    },
     "check-types": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
@@ -7331,6 +7291,19 @@
         }
       }
     },
+    "cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "requires": {
+        "restore-cursor": "^3.1.0"
+      }
+    },
+    "cli-width": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw=="
+    },
     "clipboard": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
@@ -8579,11 +8552,6 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
       "integrity": "sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw=="
     },
-    "date-utils": {
-      "version": "1.2.21",
-      "resolved": "https://registry.npmjs.org/date-utils/-/date-utils-1.2.21.tgz",
-      "integrity": "sha1-YfsWzcEnSzyayq/+n8ad+HIKK2Q="
-    },
     "dayjs": {
       "version": "1.8.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.8.19.tgz",
@@ -8600,13 +8568,6 @@
       "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
       "requires": {
         "ms": "2.1.2"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        }
       }
     },
     "decamelize": {
@@ -9745,6 +9706,100 @@
         }
       }
     },
+    "eslint-filtered-fix": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-filtered-fix/-/eslint-filtered-fix-0.1.2.tgz",
+      "integrity": "sha512-WjubxjjPpqT+kQWKH59ZK17b0sdAwnDNVHXVcscCGNfKS36Big+AnlR3o9/0v3WRbeU6HSkrfE4vaFFRoywpUw==",
+      "requires": {
+        "optionator": "^0.9.1"
+      },
+      "dependencies": {
+        "levn": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+          "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+          "requires": {
+            "prelude-ls": "^1.2.1",
+            "type-check": "~0.4.0"
+          }
+        },
+        "optionator": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+          "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+          "requires": {
+            "deep-is": "^0.1.3",
+            "fast-levenshtein": "^2.0.6",
+            "levn": "^0.4.1",
+            "prelude-ls": "^1.2.1",
+            "type-check": "^0.4.0",
+            "word-wrap": "^1.2.3"
+          }
+        },
+        "prelude-ls": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+          "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
+        },
+        "type-check": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+          "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+          "requires": {
+            "prelude-ls": "^1.2.1"
+          }
+        }
+      }
+    },
+    "eslint-formatter-friendly": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-formatter-friendly/-/eslint-formatter-friendly-7.0.0.tgz",
+      "integrity": "sha512-WXg2D5kMHcRxIZA3ulxdevi8/BGTXu72pfOO5vXHqcAfClfIWDSlOljROjCSOCcKvilgmHz1jDWbvFCZHjMQ5w==",
+      "requires": {
+        "@babel/code-frame": "7.0.0",
+        "chalk": "2.4.2",
+        "extend": "3.0.2",
+        "strip-ansi": "5.2.0",
+        "text-table": "0.2.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
+          "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
+          "requires": {
+            "@babel/highlight": "^7.0.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "eslint-nibble": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-nibble/-/eslint-nibble-6.1.0.tgz",
+      "integrity": "sha512-GFgHPsoJMKkvNALHhR6C29KM0jtjBK+fS0pBUCZ6eOU38/hJyd9rNjdo+4LsoxrHhh69hEePZ0LgmFeuMsrT4g==",
+      "requires": {
+        "@ianvs/eslint-stats": "^2.0.0",
+        "chalk": "^2.4.2",
+        "eslint-filtered-fix": "^0.1.1",
+        "eslint-formatter-friendly": "^7.0.0",
+        "eslint-summary": "^1.0.0",
+        "inquirer": "7.0.1 - 7.2.0",
+        "optionator": "^0.8.3"
+      }
+    },
     "eslint-plugin-jest": {
       "version": "23.13.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-23.13.2.tgz",
@@ -9811,6 +9866,39 @@
         "estraverse": "^4.1.1"
       }
     },
+    "eslint-summary": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-summary/-/eslint-summary-1.0.0.tgz",
+      "integrity": "sha1-uBHwBDcBayDA9vUjRHm9Y5W1eIY=",
+      "requires": {
+        "chalk": "^1.0.0",
+        "text-table": "^0.2.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
     "eslint-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
@@ -10151,6 +10239,16 @@
         }
       }
     },
+    "external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "requires": {
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
+      }
+    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -10394,6 +10492,14 @@
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
       "dev": true
     },
+    "figures": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+      "requires": {
+        "escape-string-regexp": "^1.0.5"
+      }
+    },
     "file-entry-cache": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
@@ -11486,7 +11592,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -12220,6 +12325,117 @@
         }
       }
     },
+    "inquirer": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.2.0.tgz",
+      "integrity": "sha512-E0c4rPwr9ByePfNlTIB8z51kK1s2n6jrHuJeEHENl/sbq2G/S1auvibgEwNR4uSyiU+PiYHqSwsgGiXjG8p5ZQ==",
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^3.0.0",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^2.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.15",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.5.3",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6"
+      },
+      "dependencies": {
+        "ansi-escapes": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
+          "requires": {
+            "type-fest": "^0.11.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
+        "string-width": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.1.tgz",
+          "integrity": "sha512-LL0OLyN6AnfV9xqGQpDBwedT2Rt63737LxvsRxbcwpa2aIeynBApG2Sm//F3TaLHIR1aJBN52DWklc06b94o5Q==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ=="
+        }
+      }
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -12914,9 +13130,9 @@
           }
         },
         "@types/yargs": {
-          "version": "15.0.13",
+          "version": "15.0.12",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.12.tgz",
-          "integrity": "sha512-kQ5JNTrbDv3Rp5X2n/iUu37IJBDU2gsZ5R/g1/KHOOEc5IKfUFjXT6DENPGduh08I/pamwtEq4oul7gUqKTQDQ==",
+          "integrity": "sha512-f+fD/fQAo3BCbCDlrUpznF1A5Zp9rB0noS5vnoormHSIPFKL0Z2DcUJ3Gxp5ytH4uLRNxy7AwYUC9exZzqGMAw==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -13169,9 +13385,9 @@
           }
         },
         "fsevents": {
-          "version": "2.3.2",
+          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz",
-          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+          "integrity": "sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw==",
           "dev": true,
           "optional": true
         },
@@ -13957,9 +14173,9 @@
           }
         },
         "string-width": {
-          "version": "4.2.2",
+          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
-          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
           "dev": true,
           "requires": {
             "emoji-regex": "^8.0.0",
@@ -15855,8 +16071,7 @@
     "mimic-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
-      "dev": true
     },
     "mimic-response": {
       "version": "2.1.0",
@@ -16096,9 +16311,9 @@
       }
     },
     "ms": {
-      "version": "2.1.3",
+      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "msal": {
       "version": "1.4.4",
@@ -16129,6 +16344,11 @@
       "resolved": "https://registry.npmjs.org/mute-stdout/-/mute-stdout-1.0.1.tgz",
       "integrity": "sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg=="
     },
+    "mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
+    },
     "nan": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
@@ -16682,7 +16902,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
       "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
       "requires": {
         "mimic-fn": "^2.1.0"
       }
@@ -16770,6 +16989,11 @@
         "windows-release": "^3.1.0"
       }
     },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -18749,6 +18973,15 @@
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
       "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
     },
+    "restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "requires": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      }
+    },
     "ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
@@ -18798,6 +19031,11 @@
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
       "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
     },
+    "run-async": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
+    },
     "run-parallel": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz",
@@ -20563,8 +20801,7 @@
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
-      "dev": true
     },
     "throat": {
       "version": "4.1.0",
@@ -20574,8 +20811,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
-      "dev": true
     },
     "through2": {
       "version": "2.0.5",
@@ -20623,6 +20859,14 @@
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-1.2.3.tgz",
       "integrity": "sha512-Qz9RgWuO9l8lT+Y9xvbzhPT2efIUIFd69N7eF7tJ9lnQl0iLj1M7peK7IoUGZL9DJHw9XftqLreccfxcQgYLxA=="
     },
+    "tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "requires": {
+        "os-tmpdir": "~1.0.2"
+      }
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -22650,16 +22894,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "xmldom": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.4.0.tgz",
-      "integrity": "sha512-2E93k08T30Ugs+34HBSTQLVtpi6mCddaY8uO+pMNk1pqSjV5vElzn4mmh6KLxN3hki8rNcHSYzILoh3TEWORvA=="
-    },
-    "xpath.js": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/xpath.js/-/xpath.js-1.1.0.tgz",
-      "integrity": "sha512-jg+qkfS4K8E7965sqaUl8mRngXiKb3WZGfONgE18pr03FUQiuSV6G+Ej4tS55B+rIQSFEIw3phdVAQ4pPqNWfQ=="
-    },
     "xregexp": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.4.1.tgz",

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/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 {
+export default class ThemeUtility {
-  switch (theme) {
+  public static getMonacoTheme(theme: string): string {
-    case "default":
+    switch (theme) {
-    case "hc-white":
+      case "default":
-      return "vs";
+      case "hc-white":
-    case "dark":
+        return "vs";
-      return "vs-dark";
+      case "dark":
-    case "hc-black":
+        return "vs-dark";
-      return "hc-black";
+      case "hc-black":
-    default:
+        return "hc-black";
-      return "vs";
+      default:
+        return "vs";
+    }
   }
 }

src/Contracts/DataModels.ts

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

src/Contracts/SelfServeContracts.ts

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

src/Contracts/ViewModels.ts

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

src/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 {
+export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
-  isDeletingPublishedNotebook: boolean;
-}
-
-export class GalleryCardComponent extends React.Component<GalleryCardComponentProps, GalleryCardComponentState> {
   public static readonly CARD_WIDTH = 256;
   private static readonly cardImageHeight = 144;
   public static readonly cardHeightToWidthRatio =
@@ -46,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 }}>
-          <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
+          <Persona
-            <Spinner
+            imageUrl={this.props.data.isSample && CosmosDBLogo}
-              size={SpinnerSize.large}
+            text={this.props.data.author}
-              label={`Deleting '${cardTitle}'`}
+            secondaryText={dateString}
-              styles={{ root: { height: GalleryCardComponent.cardDeleteSpinnerHeight } }}
+          />
-            />
+        </Card.Item>
-          </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>
+        <Card.Item>
-              <Image
+          <Image
-                src={this.props.data.thumbnailUrl}
+            src={this.props.data.thumbnailUrl}
-                width={GalleryCardComponent.CARD_WIDTH}
+            width={GalleryCardComponent.CARD_WIDTH}
-                height={GalleryCardComponent.cardImageHeight}
+            height={GalleryCardComponent.cardImageHeight}
-                imageFit={ImageFit.cover}
+            imageFit={ImageFit.cover}
-                alt={`${cardTitle} cover image`}
+            alt={`${cardTitle} cover image`}
-              />
+          />
-            </Card.Item>
+        </Card.Item>
 
-            <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
+        <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap>
+          <Text variant="small" nowrap>
-                {this.props.data.tags ? (
+            {this.props.data.tags ? (
-                  this.props.data.tags.map((tag, index, array) => (
+              this.props.data.tags.map((tag, index, array) => (
-                    <span key={tag}>
+                <span key={tag}>
-                      <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
+                  <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
-                      {index === array.length - 1 ? <></> : ", "}
+                  {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 })
-                      )
-                    )}
                 </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.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+    tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
-      tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
-    }
 
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
@@ -200,13 +199,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
 
     switch (this.state.selectedTab) {
-      case GalleryTab.PublicGallery:
-        if (!this.viewPublicGalleryTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewPublicGalleryTraced = true;
-          trace(Action.NotebooksGalleryViewPublicGallery);
-        }
-        break;
       case GalleryTab.OfficialSamples:
         if (!this.viewOfficialSamplesTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -214,6 +206,13 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           trace(Action.NotebooksGalleryViewOfficialSamples);
         }
         break;
+      case GalleryTab.PublicGallery:
+        if (!this.viewPublicGalleryTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewPublicGalleryTraced = true;
+          trace(Action.NotebooksGalleryViewPublicGallery);
+        }
+        break;
       case GalleryTab.Favorites:
         if (!this.viewFavoritesTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -388,7 +387,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createSearchBarHeader(content: JSX.Element): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
-        <Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
+        <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
           <Stack.Item grow>
             <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
           </Stack.Item>
@@ -443,14 +442,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
     switch (tab) {
-      case GalleryTab.PublicGallery:
-        this.loadPublicNotebooks(searchText, sortBy, offline);
-        break;
-
       case GalleryTab.OfficialSamples:
         this.loadSampleNotebooks(searchText, sortBy, offline);
         break;
 
+      case GalleryTab.PublicGallery:
+        this.loadPublicNotebooks(searchText, sortBy, offline);
+        break;
+
       case GalleryTab.Favorites:
         this.loadFavoriteNotebooks(searchText, sortBy, offline);
         break;
@@ -665,8 +664,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       onFavoriteClick: () => this.favoriteItem(data),
       onUnfavoriteClick: () => this.unfavoriteItem(data),
       onDownloadClick: () => this.downloadItem(data),
-      onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) =>
+      onDeleteClick: () => this.deleteItem(data),
-        this.deleteItem(data, beforeDelete, afterDelete),
     };
 
     return (
@@ -710,18 +708,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     );
   };
 
-  private deleteItem = async (data: IGalleryItem, beforeDelete: () => void, afterDelete: () => void): Promise<void> => {
+  private deleteItem = async (data: IGalleryItem): Promise<void> => {
-    GalleryUtils.deleteItem(
+    GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, (item) => {
-      this.props.container,
+      this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
-      this.props.junoClient,
+      this.refreshSelectedTab(item);
-      data,
+    });
-      (item) => {
-        this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
-        this.refreshSelectedTab(item);
-      },
-      beforeDelete,
-      afterDelete
-    );
   };
 
   private onPivotChange = (item: PivotItem): void => {

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

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

src/Explorer/Controls/NotebookViewer/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],
@@ -1060,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,
@@ -2163,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],
@@ -2261,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,
@@ -3377,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],
@@ -3475,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,
@@ -4578,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],
@@ -4676,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;
+  description: Description;
-  isDynamicDescription?: boolean;
 }
 
 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 && (
+      <MessageBar styles={{ root: { width: 400 } }}>
-        <Text>
+        {this.props.getTranslation(info.messageTKey)}
-          {this.props.getTranslation(info.messageTKey)}{" "}
+        {info.link && (
-          {info.link && (
+          <Link href={info.link.href} target="_blank">
-            <Link href={info.link.href} target="_blank">
+            {this.props.getTranslation(info.link.textTKey)}
-              {this.props.getTranslation(info.link.textTKey)}
+          </Link>
-            </Link>
+        )}
-          )}
+      </MessageBar>
-        </Text>
-      )
     );
   }
 
-  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 {
+  private renderDescription(input: DescriptionDisplay): JSX.Element {
-    const dataFieldName = input.dataFieldName;
+    const description = input.description;
-    const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
+    return (
-    if (!description) {
+      <Text id={`${input.dataFieldName}-text-display`}>
-      return this.renderError("Description is not provided.");
+        {this.props.getTranslation(input.description.textTKey)}{" "}
-    }
-    const descriptionElement = (
-      <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
-        {this.props.getTranslation(description.textTKey)}{" "}
         {description.link && (
-          <Link target="_blank" href={description.link.href}>
+          <Link target="_blank" href={input.description.link.href}>
-            {this.props.getTranslation(description.link.textTKey)}
+            {this.props.getTranslation(input.description.link.textTKey)}
           </Link>
         )}
       </Text>
     );
-
-    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 {
+  private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    const { defaultKey, dataFieldName, choices, placeholderTKey } = input;
+    const { labelTKey, defaultKey, dataFieldName, choices, placeholderTKey } = input;
     const value = this.props.currentValues.get(dataFieldName)?.value as string;
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
     let selectedKey = value ? value : defaultKey;
@@ -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 {
+  private renderError(input: AnyDisplay): JSX.Element {
-    return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
+    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) {
+        if ("description" in input) {
-          return this.renderDescription(input as DescriptionDisplay, labelId);
+          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
-          <Text
+          id="description-text-display"
-            aria-labelledby="description-label"
+        >
-            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.
+            Click here for more information.
-             
+          </StyledLinkBase>
-            <StyledLinkBase
+        </Text>
-              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-              target="_blank"
-            >
-              Click here for more information.
-            </StyledLinkBase>
-          </Text>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -52,53 +67,53 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <Stack
-          <StyledLabelBase
+          styles={
-            id="throughput-label"
+            Object {
-          >
+              "root": Object {
-            <ToolTipLabelComponent
+                "width": 400,
-              label="Throughput (input)"
+              },
-            />
+            }
-          </StyledLabelBase>
+          }
-          <Stack
+          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 {
+                "label": Object {
-                  "width": 400,
+                  "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>
+        <div
-          <StyledLabelBase
+          id="throughput2-slider-input"
-            id="throughput2-label"
+        >
-          >
+          <StyledSliderBase
-            <ToolTipLabelComponent
+            ariaLabel="Throughput (Slider)"
-              label="Throughput (Slider)"
+            disabled={true}
-            />
+            label="Throughput (Slider)"
-          </StyledLabelBase>
+            max={500}
-          <div
+            min={400}
-            id="throughput2-slider-input"
+            onChange={[Function]}
-          >
+            step={10}
-            <StyledSliderBase
+            styles={
-              ariaLabel="Throughput (Slider)"
+              Object {
-              disabled={true}
+                "root": Object {
-              max={500}
+                  "width": 400,
-              min={400}
+                },
-              onChange={[Function]}
+                "titleLabel": Object {
-              step={10}
+                  "color": "#393939",
-              styles={
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                Object {
+                  "fontSize": 12,
-                  "root": Object {
+                  "fontWeight": 600,
-                    "width": 400,
+                },
-                  },
+                "valueLabel": Object {
-                  "valueLabel": Object {
+                  "color": "#393939",
-                    "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
-                    "fontSize": 12,
+                },
-                  },
-                }
               }
-            />
+            }
-          </div>
+          />
-        </Stack>
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -184,34 +197,35 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <div
-          <StyledLabelBase
+          className="stringInputContainer"
-            id="containerId-label"
+        >
-          >
+          <StyledTextFieldBase
-            <ToolTipLabelComponent
+            disabled={true}
-              label="Container id"
+            id="containerId-textField-input"
-            />
+            label="Container id"
-          </StyledLabelBase>
+            onChange={[Function]}
-          <div
+            styles={
-            className="stringInputContainer"
+              Object {
-          >
+                "root": Object {
-            <StyledTextFieldBase
+                  "width": 400,
-              aria-labelledby="containerId-label"
+                },
-              disabled={true}
+                "subComponentStyles": Object {
-              id="containerId-textField-input"
+                  "label": Object {
-              onChange={[Function]}
+                    "root": Object {
-              styles={
+                      "color": "#393939",
-                Object {
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "root": Object {
+                      "fontSize": 12,
-                    "width": 400,
+                      "fontWeight": 600,
+                    },
                   },
-                }
+                },
               }
-              type="text"
+            }
-              value=""
+            type="text"
-            />
+            value=""
-          </div>
+          />
-        </Stack>
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -227,31 +241,22 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <StyledToggleBase
-          <StyledLabelBase
+          checked={false}
-            id="analyticalStore-label"
+          disabled={true}
-          >
+          id="analyticalStore-toggle-input"
-            <ToolTipLabelComponent
+          label="Analytical Store"
-              label="Analytical Store"
+          offText="Disabled"
-            />
+          onChange={[Function]}
-          </StyledLabelBase>
+          onText="Enabled"
-          <StyledToggleBase
+          styles={
-            aria-labelledby="analyticalStore-label"
+            Object {
-            checked={false}
+              "root": Object {
-            disabled={true}
+                "width": 400,
-            id="analyticalStore-toggle-input"
+              },
-            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>
+        <StyledWithResponsiveMode
-          <StyledLabelBase
+          disabled={true}
-            id="database-label"
+          id="database-dropdown-input"
-          >
+          label="Database"
-            <ToolTipLabelComponent
+          onChange={[Function]}
-              label="Database"
+          options={
-            />
+            Array [
-          </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={
               Object {
-                "dropdown": Object {
+                "key": "db1",
-                  "color": "#393939",
+                "text": "Database 1",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+              },
-                  "fontSize": 12,
+              Object {
-                },
+                "key": "db2",
-                "root": Object {
+                "text": "Database 2",
-                  "width": 400,
+              },
-                },
+              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
-          <Text
+          id="description-text-display"
-            aria-labelledby="description-label"
+        >
-            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.
+            Click here for more information.
-             
+          </StyledLinkBase>
-            <StyledLinkBase
+        </Text>
-              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-              target="_blank"
-            >
-              Click here for more information.
-            </StyledLinkBase>
-          </Text>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -369,53 +386,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <Stack
-          <StyledLabelBase
+          styles={
-            id="throughput-label"
+            Object {
-          >
+              "root": Object {
-            <ToolTipLabelComponent
+                "width": 400,
-              label="Throughput (input)"
+              },
-            />
+            }
-          </StyledLabelBase>
+          }
-          <Stack
+          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 {
+                "label": Object {
-                  "width": 400,
+                  "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>
+        <div
-          <StyledLabelBase
+          id="throughput2-slider-input"
-            id="throughput2-label"
+        >
-          >
+          <StyledSliderBase
-            <ToolTipLabelComponent
+            ariaLabel="Throughput (Slider)"
-              label="Throughput (Slider)"
+            label="Throughput (Slider)"
-            />
+            max={500}
-          </StyledLabelBase>
+            min={400}
-          <div
+            onChange={[Function]}
-            id="throughput2-slider-input"
+            step={10}
-          >
+            styles={
-            <StyledSliderBase
+              Object {
-              ariaLabel="Throughput (Slider)"
+                "root": Object {
-              max={500}
+                  "width": 400,
-              min={400}
+                },
-              onChange={[Function]}
+                "titleLabel": Object {
-              step={10}
+                  "color": "#393939",
-              styles={
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                Object {
+                  "fontSize": 12,
-                  "root": Object {
+                  "fontWeight": 600,
-                    "width": 400,
+                },
-                  },
+                "valueLabel": Object {
-                  "valueLabel": Object {
+                  "color": "#393939",
-                    "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
-                    "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>
+        <div
-          <StyledLabelBase
+          className="stringInputContainer"
-            id="containerId-label"
+        >
-          >
+          <StyledTextFieldBase
-            <ToolTipLabelComponent
+            id="containerId-textField-input"
-              label="Container id"
+            label="Container id"
-            />
+            onChange={[Function]}
-          </StyledLabelBase>
+            styles={
-          <div
+              Object {
-            className="stringInputContainer"
+                "root": Object {
-          >
+                  "width": 400,
-            <StyledTextFieldBase
+                },
-              aria-labelledby="containerId-label"
+                "subComponentStyles": Object {
-              id="containerId-textField-input"
+                  "label": Object {
-              onChange={[Function]}
+                    "root": Object {
-              styles={
+                      "color": "#393939",
-                Object {
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "root": Object {
+                      "fontSize": 12,
-                    "width": 400,
+                      "fontWeight": 600,
+                    },
                   },
-                }
+                },
               }
-              type="text"
+            }
-              value=""
+            type="text"
-            />
+            value=""
-          </div>
+          />
-        </Stack>
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -542,30 +558,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <StyledToggleBase
-          <StyledLabelBase
+          checked={false}
-            id="analyticalStore-label"
+          id="analyticalStore-toggle-input"
-          >
+          label="Analytical Store"
-            <ToolTipLabelComponent
+          offText="Disabled"
-              label="Analytical Store"
+          onChange={[Function]}
-            />
+          onText="Enabled"
-          </StyledLabelBase>
+          styles={
-          <StyledToggleBase
+            Object {
-            aria-labelledby="analyticalStore-label"
+              "root": Object {
-            checked={false}
+                "width": 400,
-            id="analyticalStore-toggle-input"
+              },
-            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>
+        <StyledWithResponsiveMode
-          <StyledLabelBase
+          id="database-dropdown-input"
-            id="database-label"
+          label="Database"
-          >
+          onChange={[Function]}
-            <ToolTipLabelComponent
+          options={
-              label="Database"
+            Array [
-            />
-          </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={
               Object {
-                "dropdown": Object {
+                "key": "db1",
-                  "color": "#393939",
+                "text": "Database 1",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+              },
-                  "fontSize": 12,
+              Object {
-                },
+                "key": "db2",
-                "root": Object {
+                "text": "Database 2",
-                  "width": 400,
+              },
-                },
+              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,87 +1,94 @@
-import * as ko from "knockout";
-import { IChoiceGroupProps } from "office-ui-fabric-react";
-import * as path from "path";
-import Q from "q";
 import React from "react";
-import _ from "underscore";
-import { 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 } 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 * as Constants from "../Common/Constants";
-import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
+import * as DataModels from "../Contracts/DataModels";
-import { DialogProps, TextFieldProps } from "./Controls/Dialog";
+import * as ko from "knockout";
-import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
+import * as MostRecentActivity from "./MostRecentActivity/MostRecentActivity";
-import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
+import * as path from "path";
-import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
+import * as SharedConstants from "../Shared/Constants";
-import { FileSystemUtil } from "./Notebook/FileSystemUtil";
+import * as ViewModels from "../Contracts/ViewModels";
-import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
+import _ from "underscore";
-import { NotebookUtil } from "./Notebook/NotebookUtil";
 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 { ReactAdapter } from "../Bindings/ReactBindingHandler";
-import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
+import { toRawContentUri, fromContentUri } from "../Utils/GitHubUtils";
-import TabsBase from "./Tabs/TabsBase";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
-import { TabsManager } from "./Tabs/TabsManager";
-import TerminalTab from "./Tabs/TerminalTab";
-import Database from "./Tree/Database";
-import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
-import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import TabsBase from "./Tabs/TabsBase";
+import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
+import { updateUserContext, userContext } from "../UserContext";
+import { stringToBlob } from "../Utils/BlobUtils";
+import { IChoiceGroupProps } from "office-ui-fabric-react";
+import { getErrorMessage, handleError, getErrorStack } from "../Common/ErrorHandlingUtils";
+import { SubscriptionType } from "../Contracts/SubscriptionType";
+import { appInsights } from "../Shared/appInsights";
+import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
+import { SelfServeType } from "../SelfServe/SelfServeUtils";
+import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";
+import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
+import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -112,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>;
@@ -168,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;
@@ -186,12 +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>;
@@ -275,6 +245,7 @@ export default class Explorer {
 
   // React adapters
   private commandBarComponentAdapter: CommandBarComponentAdapter;
+  private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
@@ -318,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) => {
@@ -355,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,
             });
 
@@ -469,7 +443,6 @@ export default class Explorer {
         databaseAccount
       );
       this.defaultExperience(defaultExperience);
-      // TODO. Remove this entirely
       updateUserContext({
         defaultExperience: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience),
       });
@@ -693,6 +666,7 @@ export default class Explorer {
     });
 
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
@@ -775,90 +749,99 @@ export default class Explorer {
       $(document.body).click(() => $(".commandDropdownContainer").hide());
     });
 
-    switch (userContext.apiType) {
+    // TODO move this to API customization class
-      case "SQL":
+    this.defaultExperience.subscribe((defaultExperience) => {
-        this.addCollectionText("New Container");
+      const defaultExperienceNormalizedString = (
-        this.addDatabaseText("New Database");
+        defaultExperience || Constants.DefaultAccountExperience.Default
-        this.collectionTitle("SQL API");
+      ).toLowerCase();
-        this.collectionTreeNodeAltText("Container");
+
-        this.deleteCollectionText("Delete Container");
+      switch (defaultExperienceNormalizedString) {
-        this.deleteDatabaseText("Delete Database");
+        case Constants.DefaultAccountExperience.DocumentDB.toLowerCase():
-        this.addCollectionPane.title("Add Container");
+          this.addCollectionText("New Container");
-        this.addCollectionPane.collectionIdTitle("Container id");
+          this.addDatabaseText("New Database");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
+          this.collectionTitle("SQL API");
-          "Provision dedicated throughput for this container"
+          this.collectionTreeNodeAltText("Container");
-        );
+          this.deleteCollectionText("Delete Container");
-        this.deleteCollectionConfirmationPane.title("Delete Container");
+          this.deleteDatabaseText("Delete Database");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
+          this.addCollectionPane.title("Add Container");
-        this.refreshTreeTitle("Refresh containers");
+          this.addCollectionPane.collectionIdTitle("Container id");
-        break;
+          this.addCollectionPane.collectionWithThroughputInSharedTitle(
-      case "Mongo":
+            "Provision dedicated throughput for this container"
-        this.addCollectionText("New Collection");
+          );
-        this.addDatabaseText("New Database");
+          this.deleteCollectionConfirmationPane.title("Delete Container");
-        this.collectionTitle("Collections");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
-        this.collectionTreeNodeAltText("Collection");
+          this.refreshTreeTitle("Refresh containers");
-        this.deleteCollectionText("Delete Collection");
+          break;
-        this.deleteDatabaseText("Delete Database");
+        case Constants.DefaultAccountExperience.MongoDB.toLowerCase():
-        this.addCollectionPane.title("Add Collection");
+        case Constants.DefaultAccountExperience.ApiForMongoDB.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Collection id");
+          this.addCollectionText("New Collection");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
+          this.addDatabaseText("New Database");
-          "Provision dedicated throughput for this collection"
+          this.collectionTitle("Collections");
-        );
+          this.collectionTreeNodeAltText("Collection");
-        this.refreshTreeTitle("Refresh collections");
+          this.deleteCollectionText("Delete Collection");
-        break;
+          this.deleteDatabaseText("Delete Database");
-      case "Gremlin":
+          this.addCollectionPane.title("Add Collection");
-        this.addCollectionText("New Graph");
+          this.addCollectionPane.collectionIdTitle("Collection id");
-        this.addDatabaseText("New Database");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle(
-        this.deleteCollectionText("Delete Graph");
+            "Provision dedicated throughput for this collection"
-        this.deleteDatabaseText("Delete Database");
+          );
-        this.collectionTitle("Gremlin API");
+          this.refreshTreeTitle("Refresh collections");
-        this.collectionTreeNodeAltText("Graph");
+          break;
-        this.addCollectionPane.title("Add Graph");
+        case Constants.DefaultAccountExperience.Graph.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Graph id");
+          this.addCollectionText("New Graph");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
+          this.addDatabaseText("New Database");
-        this.deleteCollectionConfirmationPane.title("Delete Graph");
+          this.deleteCollectionText("Delete Graph");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
+          this.deleteDatabaseText("Delete Database");
-        this.refreshTreeTitle("Refresh graphs");
+          this.collectionTitle("Gremlin API");
-        break;
+          this.collectionTreeNodeAltText("Graph");
-      case "Tables":
+          this.addCollectionPane.title("Add Graph");
-        this.addCollectionText("New Table");
+          this.addCollectionPane.collectionIdTitle("Graph id");
-        this.addDatabaseText("New Database");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
-        this.deleteCollectionText("Delete Table");
+          this.deleteCollectionConfirmationPane.title("Delete Graph");
-        this.deleteDatabaseText("Delete Database");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
-        this.collectionTitle("Azure Table API");
+          this.refreshTreeTitle("Refresh graphs");
-        this.collectionTreeNodeAltText("Table");
+          break;
-        this.addCollectionPane.title("Add Table");
+        case Constants.DefaultAccountExperience.Table.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Table id");
+          this.addCollectionText("New Table");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
+          this.addDatabaseText("New Database");
-        this.refreshTreeTitle("Refresh tables");
+          this.deleteCollectionText("Delete Table");
-        this.addTableEntityPane.title("Add Table Entity");
+          this.deleteDatabaseText("Delete Database");
-        this.editTableEntityPane.title("Edit Table Entity");
+          this.collectionTitle("Azure Table API");
-        this.deleteCollectionConfirmationPane.title("Delete Table");
+          this.collectionTreeNodeAltText("Table");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+          this.addCollectionPane.title("Add Table");
-        this.tableDataClient = new TablesAPIDataClient();
+          this.addCollectionPane.collectionIdTitle("Table id");
-        break;
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
-      case "Cassandra":
+          this.refreshTreeTitle("Refresh tables");
-        this.addCollectionText("New Table");
+          this.addTableEntityPane.title("Add Table Entity");
-        this.addDatabaseText("New Keyspace");
+          this.editTableEntityPane.title("Edit Table Entity");
-        this.deleteCollectionText("Delete Table");
+          this.deleteCollectionConfirmationPane.title("Delete Table");
-        this.deleteDatabaseText("Delete Keyspace");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-        this.collectionTitle("Cassandra API");
+          this.tableDataClient = new TablesAPIDataClient();
-        this.collectionTreeNodeAltText("Table");
+          break;
-        this.addCollectionPane.title("Add Table");
+        case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Table id");
+          this.addCollectionText("New Table");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
+          this.addDatabaseText("New Keyspace");
-        this.refreshTreeTitle("Refresh tables");
+          this.deleteCollectionText("Delete Table");
-        this.addTableEntityPane.title("Add Table Row");
+          this.deleteDatabaseText("Delete Keyspace");
-        this.editTableEntityPane.title("Edit Table Row");
+          this.collectionTitle("Cassandra API");
-        this.deleteCollectionConfirmationPane.title("Delete Table");
+          this.collectionTreeNodeAltText("Table");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+          this.addCollectionPane.title("Add Table");
-        this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
+          this.addCollectionPane.collectionIdTitle("Table id");
-        this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
-        this.tableDataClient = new CassandraAPIDataClient();
+          this.refreshTreeTitle("Refresh tables");
-        break;
+          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();
 
@@ -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),
@@ -2170,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,
     });
 
@@ -2180,6 +2219,8 @@ export default class Explorer {
         TelemetryProcessor.traceSuccess(
           Action.CreateNewNotebook,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
           },
           startKey
@@ -2193,6 +2234,8 @@ export default class Explorer {
         TelemetryProcessor.traceFailure(
           Action.CreateNewNotebook,
           {
+            databaseAccountName: this.databaseAccount().name,
+            defaultExperience: this.defaultExperience(),
             dataExplorerArea: Constants.Areas.Notebook,
             error: errorMessage,
             errorStack: getErrorStack(error),
@@ -2316,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 {
+export class GraphUtil {
-  id: string;
+  public static getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
-  outV?: string;
+    return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
-  inV?: string;
+  }
-}
 
-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,
+          };
 
-/**
+          graphData.addEdge(e);
- * Collect all edges from this node
+          if (newNodes) {
- * @param vertex
+            newNodes[edge.inV] = true;
- * @param graphData
+          }
- * @param newNodes (optional) object describing new nodes encountered
+        });
- */
+      }
-export function createEdgesfromNode(
+    }
-  vertex: GraphData.GremlinVertex,
+    if (vertex.hasOwnProperty("inE")) {
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
+      let inE = vertex.inE;
-  newNodes?: { [id: string]: boolean }
+      for (var label in inE) {
-): void {
+        $.each(inE[label], (index: number, edge: any) => {
-  if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
+          // We create our own edge. No need to fetch
-    const outE = vertex.outE;
+          let e = {
-    for (const label in outE) {
+            id: edge.id,
-      $.each(outE[label], (index: number, edge: EdgePropertyType) => {
+            label: label,
-        // We create our own edge. No need to fetch
+            inV: vertex.id,
-        const e = {
+            outV: edge.outV,
-          id: edge.id,
+          };
-          label: label,
-          inV: edge.inV,
-          outV: vertex.id,
-        };
 
-        graphData.addEdge(e);
+          graphData.addEdge(e);
-        if (newNodes) {
+          if (newNodes) {
-          newNodes[edge.inV] = true;
+            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) {
+   * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
-          newNodes[edge.outV] = true;
+   * 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 };
     }
-  }
-}
 
-/**
+    const end = array.length - 1;
- * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
+    let output = `'${array[0]}'`;
- * The string length cannot exceed maxSize.
+    let i = 0;
- *  @param array
+    for (; i < end; i++) {
- * @param maxSize
+      const candidate = `${output},'${array[i + 1]}'`;
- * @return
+      if (candidate.length <= maxSize) {
- */
+        output = candidate;
-export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
+      } else {
-  if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
+        break;
-    return { result: "", consumedCount: 0 };
+      }
+    }
+
+    return {
+      result: output,
+      consumedCount: i + 1,
+    };
   }
 
-  const end = array.length - 1;
+  public static createFetchEdgePairQuery(
-  let output = `'${array[0]}'`;
+    outE: boolean,
-  let i = 0;
+    pkid: string,
-  for (; i < end; i++) {
+    excludedEdgeIds: string[],
-    const candidate = `${output},'${array[i + 1]}'`;
+    startIndex: number,
-    if (candidate.length <= maxSize) {
+    pageSize: number,
-      output = candidate;
+    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;
+      gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
-    }
-  }
-
-  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').${
         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 {
+    return gremlinQuery;
-    gremlinQuery = `g.V(${pkid}).${outE ? "outE" : "inE"}().limit(${pageSize}).as('e').${
-      outE ? "inV" : "outV"
-    }().as('v').select('e', 'v')`;
   }
-  return gremlinQuery;
-}
 
-/**
+  /**
- * Trim graph
+   * Trim graph
- */
+   */
-export function trimGraph(
+  public static trimGraph(
-  currentRoot: GraphData.GremlinVertex,
+    currentRoot: GraphData.GremlinVertex,
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
+    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-) {
+  ) {
-  const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
+    const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
-  graphData.unloadAllVertices(importantNodes);
+    graphData.unloadAllVertices(importantNodes);
 
-  // Keep only ancestors node in fixed position
+    // Keep only ancestors node in fixed position
-  $.each(graphData.ids, (index: number, id: string) => {
+    $.each(graphData.ids, (index: number, id: string) => {
-    graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
+      graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
-  });
+    });
-}
+  }
 
-export function addRootChildToGraph(
+  public static addRootChildToGraph(
-  root: GraphData.GremlinVertex,
+    root: GraphData.GremlinVertex,
-  child: GraphData.GremlinVertex,
+    child: GraphData.GremlinVertex,
-  graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
+    graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-) {
+  ) {
-  child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
+    child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
-  graphData.addVertex(child);
+    graphData.addVertex(child);
-  createEdgesfromNode(child, graphData);
+    GraphUtil.createEdgesfromNode(child, graphData);
-  graphData.addNeighborInfo(child);
+    graphData.addNeighborInfo(child);
-}
+  }
 
-/**
+  /**
- * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
+   * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
- * @param value
+   * @param value
- */
+   */
-export function escapeDoubleQuotes(value: string): string {
+  public static escapeDoubleQuotes(value: string): string {
-  return value === undefined ? value : value.replace(/"/g, '\\"');
+    return value == null ? value : value.replace(/"/g, '\\"');
-}
+  }
 
-/**
+  /**
- * Surround with double-quotes if val is a string.
+   * Surround with double-quotes if val is a string.
- * @param val
+   * @param val
- */
+   */
-export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
+  public static getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
-  switch (ip.type) {
+    switch (ip.type) {
-    case "number":
+      case "number":
-    case "boolean":
+      case "boolean":
-      return `${ip.value}`;
+        return `${ip.value}`;
-    case "null":
+      case "null":
-      return undefined;
+        return null;
-    default:
+      default:
-      return `"${escapeDoubleQuotes(ip.value as string)}"`;
+        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/CommandBarComponent.tsx

@@ -1,107 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
- * and update any knockout observables passed from the parent.
- */
-import * as ko from "knockout";
-import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import * as React from "react";
-import { StyleConstants } from "../../../Common/Constants";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
-import * as CommandBarUtil from "./CommandBarUtil";
-
-export interface CommandBarComponentProps {
-  isNotebookTabActive: boolean;
-  tabsButtons: CommandButtonComponentProps[];
-}
-
-export const CommandBarComponent: React.FunctionComponent = ({ isNotebookTabActive, tabsButtons }: CommandBarComponentProps) {
-
-  constructor(props: CommandBarComponentProps) {
-    super(props);
-    this.state = {
-      isNotebookTabActive: false
-    }
-
-    this.container = container;
-    this.tabsButtons = [];
-    // this.isNotebookTabActive = ko.computed(() =>
-    //   container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
-    // );
-
-    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
-    const toWatch = [
-      container.isPreferredApiTable,
-      container.isPreferredApiMongoDB,
-      container.isPreferredApiDocumentDB,
-      container.isPreferredApiCassandra,
-      container.isPreferredApiGraph,
-      container.deleteCollectionText,
-      container.deleteDatabaseText,
-      container.addCollectionText,
-      container.addDatabaseText,
-      container.isDatabaseNodeOrNoneSelected,
-      container.isDatabaseNodeSelected,
-      container.isNoneSelected,
-      container.isResourceTokenCollectionNodeSelected,
-      container.isHostedDataExplorerEnabled,
-      container.isSynapseLinkUpdating,
-      container.databaseAccount,
-      this.isNotebookTabActive,
-      container.isServerlessEnabled,
-    ];
-
-    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
-    this.parameters = ko.observable(Date.now());
-  }
-
-  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
-  this.tabsButtons = buttons;
-  this.triggerRender();
-}
-
-const backgroundColor = StyleConstants.BaseLight;
-
-const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
-const contextButtons = (this.tabsButtons || []).concat(
-  CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
-);
-const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
-
-const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
-if (this.tabsButtons && this.tabsButtons.length > 0) {
-  uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-}
-
-const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
-
-if (uiFabricTabsButtons.length > 0) {
-  uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
-}
-
-const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
-uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-
-if (props.isNotebookTabActive) {
-  uiFabricControlButtons.unshift(
-    CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
-  );
-}
-
-return (
-  <React.Fragment>
-    <div className="commandBarContainer">
-      <CommandBar
-        ariaLabel="Use left and right arrow keys to navigate between commands"
-        items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
-        farItems={uiFabricControlButtons}
-        styles={{
-          root: { backgroundColor: backgroundColor },
-        }}
-        overflowButtonProps={{ ariaLabel: "More commands" }}
-      />
-    </div>
-  </React.Fragment>
-);
-}

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -0,0 +1,110 @@
+/**
+ * This adapter is responsible to render the React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import { StyleConstants } from "../../../Common/Constants";
+import * as CommandBarUtil from "./CommandBarUtil";
+import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+
+export class CommandBarComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+  public container: Explorer;
+  private tabsButtons: CommandButtonComponentProps[];
+  private isNotebookTabActive: ko.Computed<boolean>;
+
+  constructor(container: Explorer) {
+    this.container = container;
+    this.tabsButtons = [];
+    this.isNotebookTabActive = ko.computed(() =>
+      container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
+    );
+
+    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
+    const toWatch = [
+      container.isPreferredApiTable,
+      container.isPreferredApiMongoDB,
+      container.isPreferredApiDocumentDB,
+      container.isPreferredApiCassandra,
+      container.isPreferredApiGraph,
+      container.deleteCollectionText,
+      container.deleteDatabaseText,
+      container.addCollectionText,
+      container.addDatabaseText,
+      container.isDatabaseNodeOrNoneSelected,
+      container.isDatabaseNodeSelected,
+      container.isNoneSelected,
+      container.isResourceTokenCollectionNodeSelected,
+      container.isHostedDataExplorerEnabled,
+      container.isSynapseLinkUpdating,
+      container.databaseAccount,
+      this.isNotebookTabActive,
+      container.isServerlessEnabled,
+    ];
+
+    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
+    this.parameters = ko.observable(Date.now());
+  }
+
+  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
+    this.tabsButtons = buttons;
+    this.triggerRender();
+  }
+
+  public renderComponent(): JSX.Element {
+    const backgroundColor = StyleConstants.BaseLight;
+
+    const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
+    const contextButtons = (this.tabsButtons || []).concat(
+      CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
+    );
+    const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
+
+    const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+    if (this.tabsButtons && this.tabsButtons.length > 0) {
+      uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+    }
+
+    const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+
+    if (uiFabricTabsButtons.length > 0) {
+      uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
+    }
+
+    const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+    uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+
+    if (this.isNotebookTabActive()) {
+      uiFabricControlButtons.unshift(
+        CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <div className="commandBarContainer">
+          <CommandBar
+            ariaLabel="Use left and right arrow keys to navigate between commands"
+            items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
+            farItems={uiFabricControlButtons}
+            styles={{
+              root: { backgroundColor: backgroundColor },
+            }}
+            overflowButtonProps={{ ariaLabel: "More commands" }}
+          />
+        </div>
+      </React.Fragment>
+    );
+  }
+
+  private triggerRender() {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}

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

src/Explorer/Notebook/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 {
+export default class NTeractUtil {
-  if (!content) {
+  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";
 

src/Explorer/Notebook/NotebookManager.ts

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

src/Explorer/Notebook/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.isAutoPilotSelected()) {
-    if (this.databaseCreateNew()) {
+      return undefined;
-      // database is shared and autopilot is sleected for the database
+    }
-      if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
+
-        return undefined;
+    if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
-      }
+      return undefined;
-      // database is not shared and autopilot is selected for the collection
-      if (!this.databaseCreateNewShared() && this.isAutoPilotSelected()) {
-        return undefined;
-      }
     }
 
     return this._getThroughput();
@@ -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/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) {
+  private static getInfo(item: MostRecentActivity.Item): string {
-    return {
+    if (item.type === MostRecentActivity.Type.OpenNotebook) {
-      iconSrc: NotebookIcon,
+      const data = item.data as MostRecentActivity.OpenNotebookItem;
-      title: collectionId,
+      return data.path;
-      description: "Data",
+    } else {
-      onClick: () => {
+      return undefined;
-        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 createRecentItems(): SplashScreenItem[] {
-    return MostRecentActivity.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((activity) => {
+    return this.container.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((item) => ({
-      switch (activity.type) {
+      iconSrc: MostRecentActivity.MostRecentActivity.getItemIcon(item),
-        default: {
+      title: item.title,
-          const unknownActivity: never = activity;
+      description: item.description,
-          throw new Error(`Unknown activity: ${unknownActivity}`);
+      info: SplashScreen.getInfo(item),
-        }
+      onClick: () => this.container.mostRecentActivity.onItemClicked(item),
-        case MostRecentActivity.Type.OpenNotebook:
+    }));
-          return this.decorateOpenNotebookActivity(activity);
-
-        case MostRecentActivity.Type.OpenCollection:
-          return this.decorateOpenCollectionActivity(activity);
-      }
-    });
   }
 
   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);
+  var dateTimeObject: Date = new Date(dateTime);
-  const year: number = dateTimeObject.getFullYear();
+  var year: number = dateTimeObject.getFullYear();
-  const month: string = ensureDoubleDigits(dateTimeObject.getMonth() + 1); // Month ranges from 0 to 11
+  var month: string = ensureDoubleDigits(dateTimeObject.getMonth() + 1); // Month ranges from 0 to 11
-  const day: string = ensureDoubleDigits(dateTimeObject.getDate());
+  var day: string = ensureDoubleDigits(dateTimeObject.getDate());
-  const hours: string = ensureDoubleDigits(dateTimeObject.getHours());
+  var hours: string = ensureDoubleDigits(dateTimeObject.getHours());
-  const minutes: string = ensureDoubleDigits(dateTimeObject.getMinutes());
+  var minutes: string = ensureDoubleDigits(dateTimeObject.getMinutes());
-  const seconds: string = ensureDoubleDigits(dateTimeObject.getSeconds());
+  var seconds: string = ensureDoubleDigits(dateTimeObject.getSeconds());
-  const milliseconds: string = ensureTripleDigits(dateTimeObject.getMilliseconds());
+  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;
+  var ticksJSBased = Number(ticks) - epochTicks;
-  const timeInMillisecond = ticksJSBased / ticksPerMillisecond;
+  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 * as SharedConstants from "../../Shared/Constants";
-import Explorer from "../Explorer";
+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.tsx

@@ -6,7 +6,7 @@ import { TreeComponent, TreeNode, TreeNodeMenuItem, TreeNodeComponent } from "..
 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";
@@ -264,7 +264,15 @@ export class ResourceTreeAdapter implements ReactAdapter {
       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(), [
@@ -565,7 +573,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       (item: NotebookContentItem) => {
         this.container.openNotebook(item).then((hasOpened) => {
           if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+            this.pushItemToMostRecent(item);
           }
         });
       },
@@ -586,7 +594,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       (item: NotebookContentItem) => {
         this.container.openNotebook(item).then((hasOpened) => {
           if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+            this.pushItemToMostRecent(item);
           }
         });
       },
@@ -603,6 +611,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
         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();
@@ -616,6 +626,18 @@ export class ResourceTreeAdapter implements ReactAdapter {
     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,

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

src/Explorer/Tree/Trigger.ts

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

src/Explorer/Tree/UserDefinedFunction.ts

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

src/GalleryViewer/GalleryViewer.tsx

@@ -26,7 +26,7 @@ const onInit = async () => {
 
   const props: GalleryAndNotebookViewerComponentProps = {
     junoClient: new JunoClient(),
-    selectedTab: galleryViewerProps.selectedTab || GalleryTab.PublicGallery,
+    selectedTab: galleryViewerProps.selectedTab || GalleryTab.OfficialSamples,
     sortBy: galleryViewerProps.sortBy || SortBy.MostViewed,
     searchText: galleryViewerProps.searchText,
   };
@@ -36,7 +36,7 @@ const onInit = async () => {
       <header>
         <GalleryHeaderComponent />
       </header>
-      <div style={{ margin: "auto", width: "85%" }}>
+      <div style={{ marginLeft: 138, marginRight: 138 }}>
         <div style={{ paddingLeft: 26, paddingRight: 26, paddingTop: 20 }}>
           <Text block>
             Welcome to the Azure Cosmos DB notebooks gallery! View the sample notebooks to learn about use cases, best