Re-add package-lock.json

* Make it easy to include preview links

* Fix display of currently previewed branch

.eslintignore

@@ -11,15 +11,9 @@ 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
@@ -30,8 +24,6 @@ src/Common/ObjectCache.test.ts
 src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Common/ThemeUtility.ts
-src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
 src/Contracts/DataModels.ts
@@ -58,8 +50,6 @@ 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
@@ -95,8 +85,6 @@ 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
@@ -109,8 +97,6 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
-src/Explorer/Notebook/FileSystemUtil.ts
-src/Explorer/Notebook/NTeractUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -139,29 +125,20 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SaveQueryPane.ts
-src/Explorer/Panes/SettingsPane.test.ts
-src/Explorer/Panes/SettingsPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
 src/Explorer/Panes/Tables/AddTableEntityPane.ts
 src/Explorer/Panes/Tables/EditTableEntityPane.ts
 src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
-src/Explorer/Panes/Tables/QuerySelectPane.ts
-src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
 src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
-src/Explorer/Panes/UploadFilePane.ts
-src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -170,7 +147,6 @@ src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
 src/Explorer/Tables/DataTable/DataTableOperations.ts
-src/Explorer/Tables/DataTable/DataTableUtilities.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
 src/Explorer/Tables/DataTable/TableCommands.ts
 src/Explorer/Tables/DataTable/TableEntityCache.ts
@@ -179,8 +155,6 @@ src/Explorer/Tables/Entities.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.test.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts
 src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
@@ -263,8 +237,6 @@ src/Shared/ExplorerSettings.ts
 src/Shared/PriceEstimateCalculator.ts
 src/Shared/StorageUtility.test.ts
 src/Shared/StorageUtility.ts
-src/Shared/StringUtility.test.ts
-src/Shared/StringUtility.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
@@ -273,25 +245,11 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
-src/Utils/AuthorizationUtils.test.ts
-src/Utils/AuthorizationUtils.ts
-src/Utils/AutoPilotUtils.test.ts
-src/Utils/AutoPilotUtils.ts
-src/Utils/DatabaseAccountUtils.test.ts
-src/Utils/DatabaseAccountUtils.ts
-src/Utils/JunoUtils.ts
-src/Utils/MessageValidation.ts
-src/Utils/NotebookConfigurationUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
-src/Utils/QueryUtils.ts
-src/Utils/StringUtils.test.ts
-src/Utils/StringUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
-src/quickstart.ts
 src/setupTests.ts
-src/workers/upload/definitions.ts
 src/workers/upload/index.ts
 src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
 src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -338,18 +296,8 @@ src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
-src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
-src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
-src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
-src/Explorer/Menus/NavBar/ControlBarComponent.tsx
-src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx
-src/Explorer/Menus/NavBar/MeControlComponent.test.tsx
-src/Explorer/Menus/NavBar/MeControlComponent.tsx
-src/Explorer/Menus/NavBar/MeControlComponentAdapter.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es6: true,
   },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   globals: {
     Atomics: "readonly",
@@ -20,7 +20,7 @@ module.exports = {
   overrides: [
     {
       files: ["**/*.tsx"],
-      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
+      extends: ["plugin:react/recommended"],
       plugins: ["react"],
     },
     {
@@ -42,6 +42,8 @@ module.exports = {
     "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
     eqeqeq: "error",
     "react/display-name": "off",
+    "react-hooks/rules-of-hooks": "warn", // TODO: error
+    "react-hooks/exhaustive-deps": "warn", // TODO: error
     "no-restricted-syntax": [
       "error",
       {

.github/PULL_REQUEST_TEMPLATE.md

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

.github/dependabot.yml

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

.github/workflows/ci.yml

@@ -15,10 +15,10 @@ jobs:
     if: github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: node utils/codeMetrics.js
         env:
@@ -28,10 +28,10 @@ jobs:
     name: "Compile TypeScript"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run compile
       - run: npm run compile:strict
@@ -40,10 +40,10 @@ jobs:
     name: "Check Format"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run format:check
   lint:
@@ -51,10 +51,10 @@ jobs:
     name: "Lint"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run lint
   unittest:
@@ -62,22 +62,21 @@ jobs:
     name: "Unit Tests"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run test
   build:
     runs-on: ubuntu-latest
-    needs: [lint, format, compile, unittest]
     name: "Build"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
@@ -92,16 +91,24 @@ jobs:
         with:
           name: dist
           path: dist/
+      - name: Upload build to preview blob storage
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+      - name: Upload preview config to blob storage
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
   endtoendemulator:
     name: "End To End Emulator Tests"
-    needs: [lint, format, compile, unittest]
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - uses: southpolesteve/cosmos-emulator-github-action@v1
       - name: End to End Tests
         run: |
@@ -125,10 +132,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - name: Accessibility Check
         run: |
           # Ubuntu gets mad when webpack runs too many files watchers
@@ -163,12 +170,11 @@ jobs:
       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/container.spec.ts
           - ./test/mongo/mongoIndexPolicy.spec.ts
-          - ./test/mongo/openMongoAccount.spec.ts
           - ./test/notebooks/uploadAndOpenNotebook.spec.ts
           - ./test/selfServe/selfServeExample.spec.ts
           - ./test/sql/container.spec.ts
@@ -194,7 +200,6 @@ jobs:
           path: failed-*
   cleanupaccounts:
     name: "Cleanup Test Database Accounts"
-    needs: [lint, format, compile, unittest]
     runs-on: ubuntu-latest
     env:
       NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}

.vscode/settings.json

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

README.md

@@ -18,7 +18,6 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)
 
 - Visit: `https://localhost:1234/hostedExplorer.html`
-- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development
@@ -69,7 +68,7 @@ Jest and Puppeteer are used for end to end browser based tests and are contained
 
 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.
 
-### Architechture
+### Architecture
 
 [![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)
 

jest-puppeteer.config.js

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

jest.config.js

@@ -21,17 +21,13 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: [
-  //   "src/Common/Headers*"
-  // ],
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  coveragePathIgnorePatterns: ["/node_modules/"],
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ["json", "text", "cobertura"],
@@ -39,10 +35,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 22,
-      functions: 28,
-      lines: 33,
-      statements: 31,
+      branches: 25,
+      functions: 25,
+      lines: 30,
+      statements: 30,
     },
   },
 
@@ -71,7 +67,8 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
+    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
     "worker-loader": "<rootDir>/mockModule",
     "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
     "^dnd-core$": "dnd-core/dist/cjs",

less/documentDB.less

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

package.json

@@ -13,7 +13,7 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
-    "@microsoft/applicationinsights-web": "2.5.9",
+    "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
@@ -25,12 +25,12 @@
     "@nteract/iron-icons": "1.0.0",
     "@nteract/jupyter-widgets": "2.0.0",
     "@nteract/logos": "1.0.0",
-    "@nteract/markdown": "4.4.0",
+    "@nteract/markdown": "4.6.1",
     "@nteract/monaco-editor": "3.2.2",
     "@nteract/octicons": "2.0.0",
     "@nteract/outputs": "3.0.9",
     "@nteract/presentational-components": "3.0.7",
-    "@nteract/stateful-components": "1.7.0",
+    "@nteract/stateful-components": "1.7.7",
     "@nteract/styles": "2.0.2",
     "@nteract/transform-geojson": "5.1.8",
     "@nteract/transform-model-debug": "5.0.1",
@@ -44,9 +44,7 @@
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
     "@uifabric/styling": "7.13.7",
-    "abort-controller": "3.0.0",
     "applicationinsights": "1.8.0",
-    "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
@@ -60,8 +58,6 @@
     "date-fns": "1.29.0",
     "dayjs": "1.8.19",
     "dotenv": "8.2.0",
-    "es6-object-assign": "1.1.0",
-    "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
@@ -77,13 +73,11 @@
     "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",
+    "office-ui-fabric-react": "7.164.2",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
-    "promise-polyfill": "8.1.0",
-    "promise.prototype.finally": "3.1.0",
     "q": "1.5.1",
     "react": "16.13.1",
     "react-animate-height": "2.0.8",
@@ -100,13 +94,9 @@
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "text-encoding": "0.7.0",
+    "terser-webpack-plugin": "3.1.0",
     "underscore": "1.9.1",
-    "url-polyfill": "1.1.7",
-    "utility-types": "3.10.0",
-    "webcrypto-liner": "1.1.4",
-    "webfontloader": "1.6.28",
-    "whatwg-fetch": "3.0.0"
+    "utility-types": "3.10.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
@@ -120,15 +110,15 @@
     "@types/d3": "5.9.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.3",
+    "@types/expect-puppeteer": "4.4.5",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.3.2",
+    "@types/jest-environment-puppeteer": "4.4.1",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
     "@types/promise.prototype.finally": "2.0.3",
     "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "3.0.1",
+    "@types/puppeteer": "5.4.3",
     "@types/q": "1.5.1",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
@@ -136,9 +126,7 @@
     "@types/react-redux": "7.1.7",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
-    "@types/text-encoding": "0.0.33",
     "@types/underscore": "1.7.36",
-    "@types/webfontloader": "1.6.29",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
     "axe-puppeteer": "1.1.0",
@@ -163,7 +151,6 @@
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
     "html-webpack-plugin": "3.2.0",
-    "inline-css": "2.2.5",
     "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
     "jest-puppeteer": "4.4.0",
@@ -175,16 +162,15 @@
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "prettier": "2.2.1",
-    "puppeteer": "4.0.0",
+    "puppeteer": "8.0.0",
     "raw-loader": "0.5.1",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
-    "terser-webpack-plugin": "3.0.5",
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.0.2",
+    "typescript": "4.2.3",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",
@@ -214,8 +200,8 @@
     "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
     "build:contracts": "npm run compile:contracts",
-    "strictEligibleFiles": "node ./strict-migration-tools/index.js",
-    "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
+    "strict:find": "node ./strict-null-checks/find.js",
+    "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
     "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
   },

preview/.azure/config

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

preview/README.md

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

preview/config.json

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

preview/index.js

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

preview/package.json

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

src/Common/Constants.ts

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

src/Common/CosmosClient.ts

@@ -1,10 +1,10 @@
 import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { configContext, Platform } from "../ConfigContext";
-import { getErrorMessage } from "./ErrorHandlingUtils";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
-import { userContext } from "../UserContext";
+import { getErrorMessage } from "./ErrorHandlingUtils";
 
 const _global = typeof self === "undefined" ? window : self;
 
@@ -32,7 +32,7 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };
 
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = configContext.PROXY_PATH;
+  requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
   return next(requestContext);
 };

src/Common/ErrorHandlingUtils.ts

@@ -1,8 +1,9 @@
-import { ARMError } from "../Utils/arm/request";
-import { HttpStatusCodes } from "./Constants";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
+import { userContext } from "../UserContext";
+import { ARMError } from "../Utils/arm/request";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { HttpStatusCodes } from "./Constants";
 import { logError } from "./Logger";
 import { sendMessage } from "./MessageHandler";
 
@@ -44,7 +45,7 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri
 
 const replaceKnownError = (errorMessage: string): string => {
   if (
-    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
+    userContext.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,28 +1,5 @@
-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,6 +1,8 @@
 import { QueryResults } from "../Contracts/ViewModels";
 
 interface QueryResponse {
+  // [Todo] remove any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   resources: any[];
   hasMoreResults: boolean;
   activityId: string;
@@ -16,6 +18,7 @@ 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/Logger.ts

@@ -1,7 +1,7 @@
-import { sendMessage } from "./MessageHandler";
-import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
-import { appInsights } from "../Shared/appInsights";
 import { SeverityLevel } from "@microsoft/applicationinsights-web";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { trackTrace } from "../Shared/appInsights";
+import { sendMessage } from "./MessageHandler";
 
 // TODO: Move to a separate Diagnostics folder
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,7 +46,7 @@ function _logEntry(entry: Diagnostics.LogEntry): void {
         return SeverityLevel.Information;
     }
   })(entry.level);
-  appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
 }
 
 function _generateLogEntry(

src/Common/MessageHandler.ts

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

src/Common/QueriesClient.ts

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

src/Common/ThemeUtility.ts

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

src/Common/Tooltip/index.tsx

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

src/Common/Upload/index.tsx

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

src/Common/UrlUtility.ts

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

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

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

src/Common/dataAccess/readCollections.ts

@@ -1,15 +1,15 @@
-import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
+import * as DataModels from "../../Contracts/DataModels";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { userContext } from "../../UserContext";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
@@ -17,7 +17,6 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
       return await readCollectionsWithARM(databaseId);

src/Common/dataAccess/updateCollection.ts

@@ -1,39 +1,37 @@
+import { ContainerDefinition } from "@azure/cosmos";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
-import { ContainerDefinition } from "@azure/cosmos";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import {
-  CreateUpdateOptions,
-  ExtendedResourceProperties,
-  MongoDBCollectionCreateUpdateParameters,
-  MongoDBCollectionResource,
-  SqlContainerCreateUpdateParameters,
-  SqlContainerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { client } from "../CosmosClient";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraTable,
   getCassandraTable,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateMongoDBCollection,
-  getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import {
   createUpdateGremlinGraph,
   getGremlinGraph,
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection,
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { handleError } from "../ErrorHandlingUtils";
+import {
+  ExtendedResourceProperties,
+  MongoDBCollectionCreateUpdateParameters,
+  SqlContainerCreateUpdateParameters,
+  SqlContainerResource,
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function updateCollection(
   databaseId: string,
   collectionId: string,
-  newCollection: Collection,
+  newCollection: Partial<Collection>,
   options: RequestOptions = {}
 ): Promise<Collection> {
   let collection: Collection;
@@ -43,7 +41,6 @@ export async function updateCollection(
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
       collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
@@ -69,7 +66,7 @@ export async function updateCollection(
 async function updateCollectionWithARM(
   databaseId: string,
   collectionId: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
@@ -85,6 +82,15 @@ async function updateCollectionWithARM(
       return updateGremlinGraph(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
     case DefaultAccountExperienceType.Table:
       return updateTable(collectionId, subscriptionId, resourceGroup, accountName, newCollection);
+    case DefaultAccountExperienceType.MongoDB:
+      return updateMongoDBCollection(
+        databaseId,
+        collectionId,
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        newCollection
+      );
     default:
       throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
@@ -96,7 +102,7 @@ async function updateSqlContainer(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -115,35 +121,26 @@ async function updateSqlContainer(
   throw new Error(`Sql container to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`);
 }
 
-export async function updateMongoDBCollectionThroughRP(
+export async function updateMongoDBCollection(
   databaseId: string,
   collectionId: string,
-  newCollection: MongoDBCollectionResource,
-  updateOptions?: CreateUpdateOptions
-): Promise<MongoDBCollectionResource> {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
+  subscriptionId: string,
+  resourceGroup: string,
+  accountName: string,
+  newCollection: Partial<Collection>
+): Promise<Collection> {
   const getResponse = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
-    const updateParams: MongoDBCollectionCreateUpdateParameters = {
-      properties: {
-        resource: newCollection,
-        options: updateOptions,
-      },
-    };
-
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
     const updateResponse = await createUpdateMongoDBCollection(
       subscriptionId,
       resourceGroup,
       accountName,
       databaseId,
       collectionId,
-      updateParams
+      getResponse as MongoDBCollectionCreateUpdateParameters
     );
-
-    return updateResponse && (updateResponse.properties.resource as MongoDBCollectionResource);
+    return updateResponse && (updateResponse.properties.resource as Collection);
   }
 
   throw new Error(
@@ -157,7 +154,7 @@ async function updateCassandraTable(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -184,7 +181,7 @@ async function updateGremlinGraph(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -208,7 +205,7 @@ async function updateTable(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getTable(subscriptionId, resourceGroup, accountName, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {

src/Contracts/DataModels.ts

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

src/Contracts/SelfServeContracts.ts

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

src/Contracts/ViewModels.ts

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

src/Controls/Heatmap/Heatmap.ts

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

src/Explorer/ComponentRegisterer.test.ts

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

src/Explorer/ComponentRegisterer.ts

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

src/Explorer/ContextMenuButtonFactory.ts

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

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

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

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

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

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

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

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

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

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

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

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -7,7 +7,7 @@ import { ChildrenMargin } from "./GitHubStyleConstants";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import { IGitHubRepo } from "../../../GitHub/GitHubClient";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import UrlUtility from "../../../Common/UrlUtility";
+import * as UrlUtility from "../../../Common/UrlUtility";
 import Explorer from "../../Explorer";
 
 export interface AddRepoComponentProps {

src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx

@@ -4,7 +4,7 @@
 
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import { StringUtils } from "../../../Utils/StringUtils";
+import * as 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

@@ -18,7 +18,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
-import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
+import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";
 
 export interface GalleryCardComponentProps {
@@ -47,6 +47,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
   private static readonly cardItemGapBig = 10;
   private static readonly cardItemGapSmall = 8;
   private static readonly cardDeleteSpinnerHeight = 360;
+  private static readonly smallTextLineHeight = 18;
 
   constructor(props: GalleryCardComponentProps) {
     super(props);
@@ -103,7 +104,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
             </Card.Item>
 
             <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap>
+              <Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
                 {this.props.data.tags ? (
                   this.props.data.tags.map((tag, index, array) => (
                     <span key={tag}>
@@ -129,7 +130,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
                 {cardTitle}
               </Text>
 
-              <Text variant="small" styles={{ root: { height: 36 } }}>
+              <Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
                 {this.renderTruncatedDescription()}
               </Text>
 

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

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -47,8 +47,8 @@ export interface GalleryViewerComponentProps {
 }
 
 export enum GalleryTab {
-  OfficialSamples,
   PublicGallery,
+  OfficialSamples,
   Favorites,
   Published,
 }
@@ -151,15 +151,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   public render(): JSX.Element {
     this.traceViewGallery();
 
-    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
-
-    tabs.push(
+    const tabs: GalleryTabInfo[] = [
       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));
@@ -201,13 +200,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
 
     switch (this.state.selectedTab) {
-      case GalleryTab.OfficialSamples:
-        if (!this.viewOfficialSamplesTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewOfficialSamplesTraced = true;
-          trace(Action.NotebooksGalleryViewOfficialSamples);
-        }
-        break;
       case GalleryTab.PublicGallery:
         if (!this.viewPublicGalleryTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -215,6 +207,13 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           trace(Action.NotebooksGalleryViewPublicGallery);
         }
         break;
+      case GalleryTab.OfficialSamples:
+        if (!this.viewOfficialSamplesTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewOfficialSamplesTraced = true;
+          trace(Action.NotebooksGalleryViewOfficialSamples);
+        }
+        break;
       case GalleryTab.Favorites:
         if (!this.viewFavoritesTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -389,7 +388,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createSearchBarHeader(content: JSX.Element): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
-        <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
+        <Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
           <Stack.Item grow>
             <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
           </Stack.Item>
@@ -444,14 +443,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
     switch (tab) {
-      case GalleryTab.OfficialSamples:
-        this.loadSampleNotebooks(searchText, sortBy, offline);
-        break;
-
       case GalleryTab.PublicGallery:
         this.loadPublicNotebooks(searchText, sortBy, offline);
         break;
 
+      case GalleryTab.OfficialSamples:
+        this.loadSampleNotebooks(searchText, sortBy, offline);
+        break;
+
       case GalleryTab.Favorites:
         this.loadFavoriteNotebooks(searchText, sortBy, offline);
         break;

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

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

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

@@ -8,90 +8,6 @@ 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"
@@ -120,6 +36,7 @@ exports[`GalleryViewerComponent renders 1`] = `
                 "padding": 10,
               }
             }
+            wrap={true}
           >
             <StackItem
               grow={true}
@@ -180,6 +97,91 @@ exports[`GalleryViewerComponent renders 1`] = `
         </Stack>
       </div>
     </PivotItem>
+    <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,
+            }
+          }
+          wrap={true}
+        >
+          <StackItem
+            grow={true}
+          >
+            <StyledSearchBoxBase
+              onChange={[Function]}
+              placeholder="Search"
+            />
+          </StackItem>
+          <StackItem>
+            <StyledLabelBase>
+              Sort by
+            </StyledLabelBase>
+          </StackItem>
+          <StackItem
+            styles={
+              Object {
+                "root": Object {
+                  "minWidth": 200,
+                },
+              }
+            }
+          >
+            <StyledWithResponsiveMode
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": 0,
+                    "text": "Most viewed",
+                  },
+                  Object {
+                    "key": 1,
+                    "text": "Most downloaded",
+                  },
+                  Object {
+                    "key": 3,
+                    "text": "Most recent",
+                  },
+                  Object {
+                    "key": 2,
+                    "text": "Most favorited",
+                  },
+                ]
+              }
+              selectedKey={0}
+            />
+          </StackItem>
+          <StackItem>
+            <InfoComponent />
+          </StackItem>
+        </Stack>
+        <StackItem>
+          <StyledSpinnerBase
+            size={3}
+          />
+        </StackItem>
+      </Stack>
+    </PivotItem>
   </StyledPivotBase>
 </div>
 `;

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

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

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

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -1,20 +1,15 @@
-import * as _ from "underscore";
-import * as React from "react";
-import * as Constants from "../../../Common/Constants";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
+import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
 import {
   DetailsList,
   DetailsListLayoutMode,
+  DetailsRow,
+  IColumn,
   IDetailsListProps,
   IDetailsRowProps,
-  DetailsRow,
 } from "office-ui-fabric-react/lib/DetailsList";
 import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { IconButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
-import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
-import { IContextualMenuProps, ContextualMenu } from "office-ui-fabric-react/lib/ContextualMenu";
+import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
 import {
   IObjectWithKey,
   ISelectionZoneProps,
@@ -22,13 +17,18 @@ import {
   SelectionMode,
   SelectionZone,
 } from "office-ui-fabric-react/lib/utilities/selection/index";
+import * as React from "react";
+import * as _ from "underscore";
+import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
+import * as Constants from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/Constants";
-import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+import { QueriesClient } from "../../../Common/QueriesClient";
+import * as DataModels from "../../../Contracts/DataModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 
-import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
-import { QueriesClient } from "../../../Common/QueriesClient";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
+const title: string = "Open Saved Queries";
 
 export interface QueriesGridComponentProps {
   queriesClient: QueriesClient;
@@ -76,6 +76,11 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
     }
   }
 
+  // fetched saved queries when panel open
+  public componentDidMount() {
+    this.fetchSavedQueries();
+  }
+
   public render(): JSX.Element {
     if (this.state.queries.length === 0) {
       return this.renderBannerComponent();
@@ -136,7 +141,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
       },
     };
     return (
-      <div>
+      <div id="emptyQueryBanner">
         <div>
           You have not saved any queries yet. <br /> <br />
           To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
@@ -222,7 +227,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                       const container = window.dataExplorer;
                       const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
                         dataExplorerArea: Constants.Areas.ContextualPane,
-                        paneTitle: container && container.browseQueriesPane.title(),
+                        paneTitle: title,
                       });
                       try {
                         await this.props.queriesClient.deleteQuery(query);
@@ -230,7 +235,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                           Action.DeleteSavedQuery,
                           {
                             dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: container && container.browseQueriesPane.title(),
+                            paneTitle: title,
                           },
                           startKey
                         );
@@ -239,7 +244,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                           Action.DeleteSavedQuery,
                           {
                             dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: container && container.browseQueriesPane.title(),
+                            paneTitle: title,
                             error: getErrorMessage(error),
                             errorStack: getErrorStack(error),
                           },

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

@@ -1,33 +0,0 @@
-/**
- * This adapter is responsible to render the QueriesGrid 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 * as ViewModels from "../../../Contracts/ViewModels";
-import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import Explorer from "../../Explorer";
-
-export class QueriesGridComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(private container: Explorer) {
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    const props: QueriesGridComponentProps = {
-      queriesClient: this.container.queriesClient,
-      onQuerySelect: this.container.browseQueriesPane.loadSavedQuery,
-      containerVisible: this.container.browseQueriesPane.visible(),
-      saveQueryEnabled: this.container.canSaveQueries(),
-    };
-    return <QueriesGridComponent {...props} />;
-  }
-
-  public forceRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}

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

@@ -1,17 +1,18 @@
 import { shallow } from "enzyme";
-import React from "react";
-import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { collection } from "./TestUtils";
-import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty } from "./SettingsUtils";
+import React from "react";
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
+import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
+import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
+import { isDirty, TtlType } from "./SettingsUtils";
+import { collection } from "./TestUtils";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -21,16 +22,9 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     changeFeedPolicy: undefined,
     analyticalStorageTtl: undefined,
     geospatialConfig: undefined,
-  } as DataModels.Collection),
-  updateMongoDBCollectionThroughRP: jest.fn().mockReturnValue({
-    id: undefined,
-    shardKey: undefined,
     indexes: [],
-    analyticalStorageTtl: undefined,
-  } as MongoDBCollectionResource),
+  }),
 }));
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -134,7 +128,6 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
-      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,
@@ -194,7 +187,6 @@ describe("SettingsComponent", () => {
     };
     await settingsComponentInstance.onSaveClick();
     expect(updateCollection).toBeCalled();
-    expect(updateMongoDBCollectionThroughRP).toBeCalled();
     expect(updateOffer).toBeCalled();
   });
 

src/Explorer/Controls/Settings/SettingsComponent.tsx

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

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
-import React from "react";
 import { shallow } from "enzyme";
+import React from "react";
+import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
 import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
-import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
 
 describe("SmartUiComponent", () => {
   const exampleData: SmartUiDescriptor = {
@@ -18,10 +18,12 @@ 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.",
@@ -95,9 +97,9 @@ describe("SmartUiComponent", () => {
             dataFieldName: "database",
             type: "object",
             choices: [
-              { label: "Database 1", key: "db1" },
-              { label: "Database 2", key: "db2" },
-              { label: "Database 3", key: "db3" },
+              { labelTKey: "Database 1", key: "db1" },
+              { labelTKey: "Database 2", key: "db2" },
+              { labelTKey: "Database 3", key: "db3" },
             ],
             defaultKey: "db2",
           },

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

@@ -1,24 +1,26 @@
-import * as React from "react";
-import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
+import { TFunction } from "i18next";
+import { Label, Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
+import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
 import { Slider } from "office-ui-fabric-react/lib/Slider";
 import { SpinButton } from "office-ui-fabric-react/lib/SpinButton";
-import { Dropdown, IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
-import { TextField } from "office-ui-fabric-react/lib/TextField";
+import { IStackTokens, Stack } from "office-ui-fabric-react/lib/Stack";
 import { Text } from "office-ui-fabric-react/lib/Text";
-import { Stack, IStackTokens } from "office-ui-fabric-react/lib/Stack";
-import { Link, MessageBar, MessageBarType, Toggle } from "office-ui-fabric-react";
-import * as InputUtils from "./InputUtils";
-import "./SmartUiComponent.less";
+import { TextField } from "office-ui-fabric-react/lib/TextField";
+import { Position } from "office-ui-fabric-react/lib/utilities/positioning";
+import * as React from "react";
 import {
   ChoiceItem,
   Description,
+  DescriptionType,
   Info,
   InputType,
   InputTypeValue,
   NumberUiType,
   SmartUiInput,
 } from "../../../SelfServe/SelfServeTypes";
-import { TFunction } from "i18next";
+import { ToolTipLabelComponent } from "../Settings/SettingsSubComponents/ToolTipLabelComponent";
+import * as InputUtils from "./InputUtils";
+import "./SmartUiComponent.less";
 
 /**
  * Generic UX renderer
@@ -29,15 +31,14 @@ import { TFunction } from "i18next";
  */
 
 interface BaseDisplay {
+  labelTKey: string;
   dataFieldName: string;
   errorMessage?: string;
   type: InputTypeValue;
 }
 
 interface BaseInput extends BaseDisplay {
-  labelTKey: string;
   placeholderTKey?: string;
-  errorMessage?: string;
 }
 
 /**
@@ -67,7 +68,8 @@ interface ChoiceInput extends BaseInput {
 }
 
 interface DescriptionDisplay extends BaseDisplay {
-  description: Description;
+  description?: Description;
+  isDynamicDescription?: boolean;
 }
 
 type AnyDisplay = NumberInput | BooleanInput | StringInput | ChoiceInput | DescriptionDisplay;
@@ -123,25 +125,28 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
   private renderInfo(info: Info): JSX.Element {
     return (
-      <MessageBar styles={{ root: { width: 400 } }}>
-        {this.props.getTranslation(info.messageTKey)}
-        {info.link && (
-          <Link href={info.link.href} target="_blank">
-            {this.props.getTranslation(info.link.textTKey)}
-          </Link>
-        )}
-      </MessageBar>
+      info && (
+        <Text>
+          {this.props.getTranslation(info.messageTKey)}{" "}
+          {info.link && (
+            <Link href={info.link.href} target="_blank">
+              {this.props.getTranslation(info.link.textTKey)}
+            </Link>
+          )}
+        </Text>
+      )
     );
   }
 
-  private renderTextInput(input: StringInput): JSX.Element {
+  private renderTextInput(input: StringInput, labelId: string, labelElement: JSX.Element): 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">
+      <Stack>
+        {labelElement}
         <TextField
           id={`${input.dataFieldName}-textField-input`}
-          label={this.props.getTranslation(input.labelTKey)}
+          aria-labelledby={labelId}
           type="text"
           value={value || ""}
           placeholder={this.props.getTranslation(input.placeholderTKey)}
@@ -149,32 +154,42 @@ 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>
+      </Stack>
     );
   }
 
-  private renderDescription(input: DescriptionDisplay): JSX.Element {
-    const description = input.description;
-    return (
-      <Text id={`${input.dataFieldName}-text-display`}>
-        {this.props.getTranslation(input.description.textTKey)}{" "}
-        {description.link && (
-          <Link target="_blank" href={input.description.link.href}>
-            {this.props.getTranslation(input.description.link.textTKey)}
-          </Link>
-        )}
-      </Text>
+  private renderDescription(input: DescriptionDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
+    const dataFieldName = input.dataFieldName;
+    const description = input.description || (this.props.currentValues.get(dataFieldName)?.value as Description);
+    if (!description) {
+      if (!input.isDynamicDescription) {
+        return this.renderError("Description is not provided.");
+      }
+      // If input is a dynamic description and description is not available, empty element is rendered
+      return <></>;
+    }
+    const descriptionElement = (
+      <Stack>
+        {labelElement}
+        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
+          {this.props.getTranslation(description.textTKey)}{" "}
+          {description.link && (
+            <Link target="_blank" href={description.link.href}>
+              {this.props.getTranslation(description.link.textTKey)}
+            </Link>
+          )}
+        </Text>
+      </Stack>
     );
+
+    if (description.type === DescriptionType.Text) {
+      return descriptionElement;
+    }
+    const messageBarType =
+      description.type === DescriptionType.InfoMessageBar ? MessageBarType.info : MessageBarType.warning;
+    return <MessageBar messageBarType={messageBarType}>{descriptionElement}</MessageBar>;
   }
 
   private clearError(dataFieldName: string): void {
@@ -220,13 +235,12 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     return undefined;
   };
 
-  private renderNumberInput(input: NumberInput): JSX.Element {
+  private renderNumberInput(input: NumberInput, labelId: string, labelElement: JSX.Element): JSX.Element {
     const { labelTKey, min, max, dataFieldName, step } = input;
     const props = {
-      label: this.props.getTranslation(labelTKey),
       min: min,
       max: max,
-      ariaLabel: labelTKey,
+      ariaLabel: this.props.getTranslation(labelTKey),
       step: step,
     };
 
@@ -234,71 +248,73 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
     const disabled = this.props.disabled || this.props.currentValues.get(dataFieldName)?.disabled;
     if (input.uiType === NumberUiType.Spinner) {
       return (
-        <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
-          <SpinButton
-            {...props}
-            id={`${input.dataFieldName}-spinner-input`}
-            value={value?.toString()}
-            onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
-            onIncrement={(newValue) => this.onIncrement(input, newValue, props.step, props.max)}
-            onDecrement={(newValue) => this.onDecrement(input, newValue, props.step, props.min)}
-            labelPosition={Position.top}
-            disabled={disabled}
-            styles={{
-              label: {
-                ...SmartUiComponent.labelStyle,
-                fontWeight: 600,
-              },
-            }}
-          />
-          {this.state.errors.has(dataFieldName) && (
-            <MessageBar messageBarType={MessageBarType.error}>Error: {this.state.errors.get(dataFieldName)}</MessageBar>
-          )}
+        <Stack>
+          {labelElement}
+          <Stack styles={{ root: { width: 400 } }} tokens={{ childrenGap: 2 }}>
+            <SpinButton
+              {...props}
+              id={`${input.dataFieldName}-spinner-input`}
+              value={value?.toString()}
+              onValidate={(newValue) => this.onValidate(input, newValue, props.min, props.max)}
+              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}
+            />
+            {this.state.errors.has(dataFieldName) && (
+              <MessageBar messageBarType={MessageBarType.error}>
+                Error: {this.state.errors.get(dataFieldName)}
+              </MessageBar>
+            )}
+          </Stack>
         </Stack>
       );
     } else if (input.uiType === NumberUiType.Slider) {
       return (
-        <div id={`${input.dataFieldName}-slider-input`}>
-          <Slider
-            {...props}
-            value={value}
-            disabled={disabled}
-            onChange={(newValue) => this.props.onInputChange(input, newValue)}
-            styles={{
-              root: { width: 400 },
-              titleLabel: {
-                ...SmartUiComponent.labelStyle,
-                fontWeight: 600,
-              },
-              valueLabel: SmartUiComponent.labelStyle,
-            }}
-          />
-        </div>
+        <Stack>
+          {labelElement}
+          <div id={`${input.dataFieldName}-slider-input`}>
+            <Slider
+              {...props}
+              value={value}
+              disabled={disabled}
+              onChange={(newValue) => this.props.onInputChange(input, newValue)}
+              styles={{
+                root: { width: 400 },
+                valueLabel: SmartUiComponent.labelStyle,
+              }}
+            />
+          </div>
+        </Stack>
       );
     } else {
       return <>Unsupported number UI type {input.uiType}</>;
     }
   }
 
-  private renderBooleanInput(input: BooleanInput): JSX.Element {
+  private renderBooleanInput(input: BooleanInput, labelId: string, labelElement: JSX.Element): 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`}
-        label={this.props.getTranslation(input.labelTKey)}
-        checked={value || false}
-        onText={this.props.getTranslation(input.trueLabelTKey)}
-        offText={this.props.getTranslation(input.falseLabelTKey)}
-        disabled={disabled}
-        onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
-        styles={{ root: { width: 400 } }}
-      />
+      <Stack>
+        {labelElement}
+        <Toggle
+          id={`${input.dataFieldName}-toggle-input`}
+          aria-labelledby={labelId}
+          checked={value || false}
+          onText={this.props.getTranslation(input.trueLabelTKey)}
+          offText={this.props.getTranslation(input.falseLabelTKey)}
+          disabled={disabled}
+          onChange={(event, checked: boolean) => this.props.onInputChange(input, checked)}
+          styles={{ root: { width: 400 } }}
+        />
+      </Stack>
     );
   }
 
-  private renderChoiceInput(input: ChoiceInput): JSX.Element {
-    const { labelTKey, defaultKey, dataFieldName, choices, placeholderTKey } = input;
+  private renderChoiceInput(input: ChoiceInput, labelId: string, labelElement: JSX.Element): JSX.Element {
+    const { 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;
@@ -306,53 +322,67 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
       selectedKey = "";
     }
     return (
-      <Dropdown
-        id={`${input.dataFieldName}-dropdown-input`}
-        label={this.props.getTranslation(labelTKey)}
-        selectedKey={selectedKey}
-        onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
-        placeholder={this.props.getTranslation(placeholderTKey)}
-        disabled={disabled}
-        options={choices.map((c) => ({
-          key: c.key,
-          text: this.props.getTranslation(c.label),
-        }))}
-        styles={{
-          root: { width: 400 },
-          label: {
-            ...SmartUiComponent.labelStyle,
-            fontWeight: 600,
-          },
-          dropdown: SmartUiComponent.labelStyle,
-        }}
-      />
+      <Stack>
+        {labelElement}
+        <Dropdown
+          id={`${input.dataFieldName}-dropdown-input`}
+          aria-labelledby={labelId}
+          selectedKey={selectedKey}
+          onChange={(_, item: IDropdownOption) => this.props.onInputChange(input, item.key.toString())}
+          placeholder={this.props.getTranslation(placeholderTKey)}
+          disabled={disabled}
+          // Removed dropdownWidth="auto" as dropdown accept only number
+          options={choices.map((c) => ({
+            key: c.key,
+            text: this.props.getTranslation(c.labelTKey),
+          }))}
+          styles={{
+            root: { width: 400 },
+            dropdown: SmartUiComponent.labelStyle,
+          }}
+        />
+      </Stack>
     );
   }
 
-  private renderError(input: AnyDisplay): JSX.Element {
-    return <MessageBar messageBarType={MessageBarType.error}>Error: {input.errorMessage}</MessageBar>;
+  private renderError(errorMessage: string): JSX.Element {
+    return <MessageBar messageBarType={MessageBarType.error}>Error: {errorMessage}</MessageBar>;
   }
 
-  private renderDisplay(input: AnyDisplay): JSX.Element {
+  private renderElement(input: AnyDisplay, info: Info): JSX.Element {
     if (input.errorMessage) {
-      return this.renderError(input);
+      return this.renderError(input.errorMessage);
     }
     const inputHidden = this.props.currentValues.get(input.dataFieldName)?.hidden;
     if (inputHidden) {
       return <></>;
     }
+    const labelId = `${input.dataFieldName}-label`;
+    const labelElement: JSX.Element = input.labelTKey && (
+      <Label id={labelId}>
+        <ToolTipLabelComponent
+          label={this.props.getTranslation(input.labelTKey)}
+          toolTipElement={this.renderInfo(info)}
+        />
+      </Label>
+    );
+
+    return <Stack>{this.renderControl(input, labelId, labelElement)}</Stack>;
+  }
+
+  private renderControl(input: AnyDisplay, labelId: string, labelElement: JSX.Element): JSX.Element {
     switch (input.type) {
       case "string":
-        if ("description" in input) {
-          return this.renderDescription(input as DescriptionDisplay);
+        if ("description" in input || "isDynamicDescription" in input) {
+          return this.renderDescription(input as DescriptionDisplay, labelId, labelElement);
         }
-        return this.renderTextInput(input as StringInput);
+        return this.renderTextInput(input as StringInput, labelId, labelElement);
       case "number":
-        return this.renderNumberInput(input as NumberInput);
+        return this.renderNumberInput(input as NumberInput, labelId, labelElement);
       case "boolean":
-        return this.renderBooleanInput(input as BooleanInput);
+        return this.renderBooleanInput(input as BooleanInput, labelId, labelElement);
       case "object":
-        return this.renderChoiceInput(input as ChoiceInput);
+        return this.renderChoiceInput(input as ChoiceInput, labelId, labelElement);
       default:
         throw new Error(`Unknown input type: ${input.type}`);
     }
@@ -363,10 +393,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
 
     return (
       <Stack tokens={containerStackTokens} className="widgetRendererContainer">
-        <Stack.Item>
-          {node.info && this.renderInfo(node.info as Info)}
-          {node.input && this.renderDisplay(node.input)}
-        </Stack.Item>
+        <Stack.Item>{node.input && this.renderElement(node.input, node.info as Info)}</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,25 +9,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     }
   }
 >
-  <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>
+  <StackItem />
   <div
     key="description"
   >
@@ -40,18 +22,23 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Text
-          id="description-text-display"
-        >
-          this is an example description text.
-           
-          <StyledLinkBase
-            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-            target="_blank"
-          >
-            Click here for more information.
-          </StyledLinkBase>
-        </Text>
+        <Stack>
+          <Stack>
+            <Text
+              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"
+              >
+                Click here for more information.
+              </StyledLinkBase>
+            </Text>
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -67,53 +54,55 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-          tokens={
-            Object {
-              "childrenGap": 2,
-            }
-          }
-        >
-          <CustomizedSpinButton
-            ariaLabel="Throughput (input)"
-            decrementButtonIcon={
-              Object {
-                "iconName": "ChevronDownSmall",
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="throughput-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (input)"
+              />
+            </StyledLabelBase>
+            <Stack
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
               }
-            }
-            disabled={true}
-            id="throughput-spinner-input"
-            incrementButtonIcon={
-              Object {
-                "iconName": "ChevronUpSmall",
+              tokens={
+                Object {
+                  "childrenGap": 2,
+                }
               }
-            }
-            label="Throughput (input)"
-            labelPosition={0}
-            max={500}
-            min={400}
-            onDecrement={[Function]}
-            onIncrement={[Function]}
-            onValidate={[Function]}
-            step={10}
-            styles={
-              Object {
-                "label": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                  "fontWeight": 600,
-                },
-              }
-            }
-          />
+            >
+              <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>
         </Stack>
       </StackItem>
     </Stack>
@@ -130,37 +119,41 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <div
-          id="throughput2-slider-input"
-        >
-          <StyledSliderBase
-            ariaLabel="Throughput (Slider)"
-            disabled={true}
-            label="Throughput (Slider)"
-            max={500}
-            min={400}
-            onChange={[Function]}
-            step={10}
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-                "titleLabel": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                  "fontWeight": 600,
-                },
-                "valueLabel": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-              }
-            }
-          />
-        </div>
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="throughput2-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (Slider)"
+              />
+            </StyledLabelBase>
+            <div
+              id="throughput2-slider-input"
+            >
+              <StyledSliderBase
+                ariaLabel="Throughput (Slider)"
+                disabled={true}
+                max={500}
+                min={400}
+                onChange={[Function]}
+                step={10}
+                styles={
+                  Object {
+                    "root": Object {
+                      "width": 400,
+                    },
+                    "valueLabel": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                    },
+                  }
+                }
+              />
+            </div>
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -197,35 +190,32 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <div
-          className="stringInputContainer"
-        >
-          <StyledTextFieldBase
-            disabled={true}
-            id="containerId-textField-input"
-            label="Container id"
-            onChange={[Function]}
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-                "subComponentStyles": Object {
-                  "label": Object {
-                    "root": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                      "fontWeight": 600,
-                    },
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="containerId-label"
+            >
+              <ToolTipLabelComponent
+                label="Container id"
+              />
+            </StyledLabelBase>
+            <StyledTextFieldBase
+              aria-labelledby="containerId-label"
+              disabled={true}
+              id="containerId-textField-input"
+              onChange={[Function]}
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
                   },
-                },
+                }
               }
-            }
-            type="text"
-            value=""
-          />
-        </div>
+              type="text"
+              value=""
+            />
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -241,22 +231,33 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <StyledToggleBase
-          checked={false}
-          disabled={true}
-          id="analyticalStore-toggle-input"
-          label="Analytical Store"
-          offText="Disabled"
-          onChange={[Function]}
-          onText="Enabled"
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-        />
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="analyticalStore-label"
+            >
+              <ToolTipLabelComponent
+                label="Analytical Store"
+              />
+            </StyledLabelBase>
+            <StyledToggleBase
+              aria-labelledby="analyticalStore-label"
+              checked={false}
+              disabled={true}
+              id="analyticalStore-toggle-input"
+              offText="Disabled"
+              onChange={[Function]}
+              onText="Enabled"
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
+              }
+            />
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -272,47 +273,52 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <StyledWithResponsiveMode
-          disabled={true}
-          id="database-dropdown-input"
-          label="Database"
-          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 {
-                "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>
+          <Stack>
+            <StyledLabelBase
+              id="database-label"
+            >
+              <ToolTipLabelComponent
+                label="Database"
+              />
+            </StyledLabelBase>
+            <StyledWithResponsiveMode
+              aria-labelledby="database-label"
+              disabled={true}
+              id="database-dropdown-input"
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": "db1",
+                    "text": "Database 1",
+                  },
+                  Object {
+                    "key": "db2",
+                    "text": "Database 2",
+                  },
+                  Object {
+                    "key": "db3",
+                    "text": "Database 3",
+                  },
+                ]
+              }
+              selectedKey="db2"
+              styles={
+                Object {
+                  "dropdown": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
+              }
+            />
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -328,25 +334,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     }
   }
 >
-  <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>
+  <StackItem />
   <div
     key="description"
   >
@@ -359,18 +347,23 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Text
-          id="description-text-display"
-        >
-          this is an example description text.
-           
-          <StyledLinkBase
-            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-            target="_blank"
-          >
-            Click here for more information.
-          </StyledLinkBase>
-        </Text>
+        <Stack>
+          <Stack>
+            <Text
+              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"
+              >
+                Click here for more information.
+              </StyledLinkBase>
+            </Text>
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -386,53 +379,55 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-          tokens={
-            Object {
-              "childrenGap": 2,
-            }
-          }
-        >
-          <CustomizedSpinButton
-            ariaLabel="Throughput (input)"
-            decrementButtonIcon={
-              Object {
-                "iconName": "ChevronDownSmall",
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="throughput-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (input)"
+              />
+            </StyledLabelBase>
+            <Stack
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
               }
-            }
-            disabled={false}
-            id="throughput-spinner-input"
-            incrementButtonIcon={
-              Object {
-                "iconName": "ChevronUpSmall",
+              tokens={
+                Object {
+                  "childrenGap": 2,
+                }
               }
-            }
-            label="Throughput (input)"
-            labelPosition={0}
-            max={500}
-            min={400}
-            onDecrement={[Function]}
-            onIncrement={[Function]}
-            onValidate={[Function]}
-            step={10}
-            styles={
-              Object {
-                "label": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                  "fontWeight": 600,
-                },
-              }
-            }
-          />
+            >
+              <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>
         </Stack>
       </StackItem>
     </Stack>
@@ -449,36 +444,40 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <div
-          id="throughput2-slider-input"
-        >
-          <StyledSliderBase
-            ariaLabel="Throughput (Slider)"
-            label="Throughput (Slider)"
-            max={500}
-            min={400}
-            onChange={[Function]}
-            step={10}
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-                "titleLabel": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                  "fontWeight": 600,
-                },
-                "valueLabel": Object {
-                  "color": "#393939",
-                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  "fontSize": 12,
-                },
-              }
-            }
-          />
-        </div>
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="throughput2-label"
+            >
+              <ToolTipLabelComponent
+                label="Throughput (Slider)"
+              />
+            </StyledLabelBase>
+            <div
+              id="throughput2-slider-input"
+            >
+              <StyledSliderBase
+                ariaLabel="Throughput (Slider)"
+                max={500}
+                min={400}
+                onChange={[Function]}
+                step={10}
+                styles={
+                  Object {
+                    "root": Object {
+                      "width": 400,
+                    },
+                    "valueLabel": Object {
+                      "color": "#393939",
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                    },
+                  }
+                }
+              />
+            </div>
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -515,34 +514,31 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <div
-          className="stringInputContainer"
-        >
-          <StyledTextFieldBase
-            id="containerId-textField-input"
-            label="Container id"
-            onChange={[Function]}
-            styles={
-              Object {
-                "root": Object {
-                  "width": 400,
-                },
-                "subComponentStyles": Object {
-                  "label": Object {
-                    "root": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                      "fontWeight": 600,
-                    },
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="containerId-label"
+            >
+              <ToolTipLabelComponent
+                label="Container id"
+              />
+            </StyledLabelBase>
+            <StyledTextFieldBase
+              aria-labelledby="containerId-label"
+              id="containerId-textField-input"
+              onChange={[Function]}
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
                   },
-                },
+                }
               }
-            }
-            type="text"
-            value=""
-          />
-        </div>
+              type="text"
+              value=""
+            />
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -558,21 +554,32 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <StyledToggleBase
-          checked={false}
-          id="analyticalStore-toggle-input"
-          label="Analytical Store"
-          offText="Disabled"
-          onChange={[Function]}
-          onText="Enabled"
-          styles={
-            Object {
-              "root": Object {
-                "width": 400,
-              },
-            }
-          }
-        />
+        <Stack>
+          <Stack>
+            <StyledLabelBase
+              id="analyticalStore-label"
+            >
+              <ToolTipLabelComponent
+                label="Analytical Store"
+              />
+            </StyledLabelBase>
+            <StyledToggleBase
+              aria-labelledby="analyticalStore-label"
+              checked={false}
+              id="analyticalStore-toggle-input"
+              offText="Disabled"
+              onChange={[Function]}
+              onText="Enabled"
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
+              }
+            />
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -588,46 +595,51 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <StyledWithResponsiveMode
-          id="database-dropdown-input"
-          label="Database"
-          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 {
-                "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>
+          <Stack>
+            <StyledLabelBase
+              id="database-label"
+            >
+              <ToolTipLabelComponent
+                label="Database"
+              />
+            </StyledLabelBase>
+            <StyledWithResponsiveMode
+              aria-labelledby="database-label"
+              id="database-dropdown-input"
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": "db1",
+                    "text": "Database 1",
+                  },
+                  Object {
+                    "key": "db2",
+                    "text": "Database 2",
+                  },
+                  Object {
+                    "key": "db3",
+                    "text": "Database 3",
+                  },
+                ]
+              }
+              selectedKey="db2"
+              styles={
+                Object {
+                  "dropdown": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
+                  "root": Object {
+                    "width": 400,
+                  },
+                }
+              }
+            />
+          </Stack>
+        </Stack>
       </StackItem>
     </Stack>
   </div>

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

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

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

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

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -129,7 +129,6 @@ 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>;
@@ -158,7 +157,6 @@ 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;
@@ -202,7 +200,6 @@ 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, {

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoscaleV3.html

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

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

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

src/Explorer/DataSamples/DataSamplesUtil.test.ts

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

src/Explorer/DataSamples/DataSamplesUtil.ts

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

src/Explorer/Explorer.test.tsx

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

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -5,7 +5,7 @@
 
 import * as React from "react";
 import { NeighborVertexBasicInfo, EditedEdges, GraphNewEdgeData, PossibleVertex } from "./GraphExplorer";
-import { GraphUtil } from "./GraphUtil";
+import * as 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 { GraphUtil } from "./GraphUtil";
+import * as GraphUtil from "./GraphUtil";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import * as GremlinClient from "./GremlinClient";

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

@@ -1,4 +1,4 @@
-import { GraphUtil } from "./GraphUtil";
+import * as 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(null, 10)).toEqual(expectedEmptyResult);
+    expect(GraphUtil.getLimitedArrayString(undefined, 10)).toEqual(expectedEmptyResult);
   });
 
   it("should handle empty array", () => {

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts

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

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

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

src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx

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

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

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

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

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

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

@@ -1,5 +1,4 @@
 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";
 
@@ -26,7 +25,7 @@ describe("CommandBarUtil tests", () => {
     const converteds = CommandBarUtil.convertButton([btn], backgroundColor);
     expect(converteds.length).toBe(1);
     const converted = converteds[0];
-    expect(!converted.split);
+    expect(converted.split).toBe(undefined);
     expect(converted.iconProps.imageProps.src).toEqual(btn.iconSrc);
     expect(converted.iconProps.imageProps.alt).toEqual(btn.iconAlt);
     expect(converted.text).toEqual(btn.commandButtonLabel);
@@ -50,7 +49,7 @@ describe("CommandBarUtil tests", () => {
     const converteds = CommandBarUtil.convertButton([btn], "backgroundColor");
     expect(converteds.length).toBe(1);
     const converted = converteds[0];
-    expect(converted.split);
+    expect(converted.split).toBe(true);
     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);
@@ -64,7 +63,6 @@ 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);
@@ -75,7 +73,7 @@ describe("CommandBarUtil tests", () => {
     const btn = createButton();
     const backgroundColor = "backgroundColor";
 
-    btn.commandButtonLabel = null;
+    btn.commandButtonLabel = undefined;
     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 = null;
+        btn.commandButtonLabel = undefined;
         return CommandButtonComponent.renderButton(btn, `${index}`);
       }
     );

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx

@@ -1,9 +1,9 @@
-import React from "react";
 import { shallow } from "enzyme";
+import React from "react";
 import {
-  NotificationConsoleComponentProps,
-  NotificationConsoleComponent,
   ConsoleDataType,
+  NotificationConsoleComponent,
+  NotificationConsoleComponentProps,
 } from "./NotificationConsoleComponent";
 
 describe("NotificationConsoleComponent", () => {
@@ -12,7 +12,7 @@ describe("NotificationConsoleComponent", () => {
       consoleData: undefined,
       isConsoleExpanded: false,
       inProgressConsoleDataIdToBeDeleted: "",
-      setIsConsoleExpanded: (isExpanded: boolean): void => {},
+      setIsConsoleExpanded: (): void => undefined,
     };
   };
 
@@ -98,7 +98,7 @@ describe("NotificationConsoleComponent", () => {
     wrapper.setProps(props);
     expect(wrapper.find(".notificationConsoleData .date").text()).toEqual(date);
     expect(wrapper.find(".notificationConsoleData .message").text()).toEqual(message);
-    expect(wrapper.exists(`.notificationConsoleData .${iconClassName}`));
+    expect(wrapper.exists(`.notificationConsoleData .${iconClassName}`)).toBe(true);
   };
 
   it("renders progress notifications", () => {
@@ -139,7 +139,7 @@ describe("NotificationConsoleComponent", () => {
     wrapper.setProps(props);
 
     wrapper.find(".clearNotificationsButton").simulate("click");
-    expect(!wrapper.exists(".notificationConsoleData"));
+    expect(wrapper.exists(".notificationConsoleData")).toBe(true);
   });
 
   it("collapses and hide content", () => {
@@ -155,7 +155,7 @@ describe("NotificationConsoleComponent", () => {
     wrapper.setProps(props);
 
     wrapper.find(".notificationConsoleHeader").simulate("click");
-    expect(!wrapper.exists(".notificationConsoleContent"));
+    expect(wrapper.exists(".notificationConsoleContent")).toBe(false);
   });
 
   it("display latest data in header", () => {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -2,19 +2,20 @@
  * React component for control bar
  */
 
-import * as React from "react";
-import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
-import AnimateHeight from "react-animate-height";
 import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
-import LoadingIcon from "../../../../images/loading.svg";
+import * as React from "react";
+import AnimateHeight from "react-animate-height";
+import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
+import ClearIcon from "../../../../images/Clear.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
+import ErrorRedIcon from "../../../../images/error_red.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
-import ErrorRedIcon from "../../../../images/error_red.svg";
-import ClearIcon from "../../../../images/Clear.svg";
-import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
-import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
+import LoadingIcon from "../../../../images/loading.svg";
 import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
+import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
+import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
+import { userContext } from "../../../UserContext";
 
 /**
  * Log levels
@@ -76,7 +77,7 @@ export class NotificationConsoleComponent extends React.Component<
   public componentDidUpdate(
     prevProps: NotificationConsoleComponentProps,
     prevState: NotificationConsoleComponentState
-  ) {
+  ): void {
     const currentHeaderStatus = NotificationConsoleComponent.extractHeaderStatus(this.props.consoleData);
 
     if (
@@ -97,7 +98,7 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement) => {
+  public setElememntRef = (element: HTMLElement): void => {
     this.consoleHeaderElement = element;
   };
 
@@ -116,7 +117,7 @@ export class NotificationConsoleComponent extends React.Component<
           className="notificationConsoleHeader"
           id="notificationConsoleHeader"
           ref={this.setElememntRef}
-          onClick={(event: React.MouseEvent<HTMLDivElement>) => this.expandCollapseConsole()}
+          onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
         >
@@ -135,6 +136,7 @@ export class NotificationConsoleComponent extends React.Component<
                 <span className="numInfoItems">{numInfoItems}</span>
               </span>
             </span>
+            {userContext.features.pr && <PrPreview pr={userContext.features.pr} />}
             <span className="consoleSplitter" />
             <span className="headerStatus">
               <span className="headerStatusEllipsis">{this.state.headerStatus}</span>
@@ -304,3 +306,18 @@ export class NotificationConsoleComponent extends React.Component<
     );
   };
 }
+
+const PrPreview = (props: { pr: string }) => {
+  const url = new URL(props.pr);
+  const [, ref] = url.hash.split("#");
+  url.hash = "";
+
+  return (
+    <>
+      <span className="consoleSplitter" />
+      <a target="_blank" rel="noreferrer" href={url.href} style={{ marginRight: "1em", fontWeight: "bold" }}>
+        {ref}
+      </a>
+    </>
+  );
+};

src/Explorer/MostRecentActivity/MostRecentActivity.test.ts

@@ -0,0 +1,86 @@
+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,4 +1,6 @@
+import { CollectionBase } from "../../Contracts/ViewModels";
 import { StorageKey, LocalStorageUtility } from "../../Shared/StorageUtility";
+import { NotebookContentItem } from "../Notebook/NotebookContentItem";
 
 export enum Type {
   OpenCollection,
@@ -6,21 +8,18 @@ export enum Type {
 }
 
 export interface OpenNotebookItem {
+  type: Type.OpenNotebook;
   name: string;
   path: string;
 }
 
 export interface OpenCollectionItem {
+  type: Type.OpenCollection;
   databaseId: string;
   collectionId: string;
 }
 
-export interface Item {
-  type: Type;
-  title: string;
-  description: string;
-  data: OpenNotebookItem | OpenCollectionItem;
-}
+type Item = OpenNotebookItem | OpenCollectionItem;
 
 // Update schemaVersion if you are going to change this interface
 interface StoredData {
@@ -32,7 +31,7 @@ interface StoredData {
  * Stores most recent activity
  */
 class MostRecentActivity {
-  private static readonly schemaVersion: string = "1";
+  private static readonly schemaVersion: string = "2";
   private static itemsMaxNumber: number = 5;
   private storedData: StoredData;
   constructor() {
@@ -92,7 +91,7 @@ class MostRecentActivity {
     LocalStorageUtility.setEntryString(StorageKey.MostRecentActivity, JSON.stringify(this.storedData));
   }
 
-  public addItem(accountId: string, newItem: Item): void {
+  private 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;
@@ -111,6 +110,23 @@ 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();
@@ -128,11 +144,7 @@ class MostRecentActivity {
     let index = -1;
     for (let i = 0; i < itemsArray.length; i++) {
       const currentItem = itemsArray[i];
-      if (
-        currentItem.title === item.title &&
-        currentItem.description === item.description &&
-        JSON.stringify(currentItem.data) === JSON.stringify(item.data)
-      ) {
+      if (JSON.stringify(currentItem) === JSON.stringify(item)) {
         index = i;
         break;
       }

src/Explorer/Notebook/FileSystemUtil.ts

@@ -1,37 +1,33 @@
-// Utilities for file system
-
-export class FileSystemUtil {
-  /**
-   * file list returns path starting with ./blah
-   * rename returns simply blah.
-   * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
-   * ./ inside the path.
-   * TODO: this should go away when not using jupyter for file operations and use normalized paths.
-   * @param path1
-   * @param path2
-   */
-  public static isPathEqual(path1: string, path2: string): boolean {
-    const normalize = (path: string): string => {
-      const dotSlash = "./";
-      if (path.indexOf(dotSlash) === 0) {
-        path = path.substring(dotSlash.length);
-      }
-      return path;
-    };
-
-    return normalize(path1) === normalize(path2);
-  }
-
-  /**
-   * Remove extension
-   * @param path
-   * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
-   */
-  public static stripExtension(path: string, extension: string): string {
-    const splitted = path.split(".");
-    if (splitted[splitted.length - 1] === extension) {
-      splitted.pop();
+/**
+ * file list returns path starting with ./blah
+ * rename returns simply blah.
+ * Both are the same. This method only handles these two cases and no other complicated paths that may contain ..
+ * ./ inside the path.
+ * TODO: this should go away when not using jupyter for file operations and use normalized paths.
+ * @param path1
+ * @param path2
+ */
+export function isPathEqual(path1: string, path2: string): boolean {
+  const normalize = (path: string): string => {
+    const dotSlash = "./";
+    if (path.indexOf(dotSlash) === 0) {
+      path = path.substring(dotSlash.length);
     }
-    return splitted.join(".");
-  }
+    return path;
+  };
+
+  return normalize(path1) === normalize(path2);
+}
+
+/**
+ * Remove extension
+ * @param path
+ * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
+ */
+export function stripExtension(path: string, extension: string): string {
+  const splitted = path.split(".");
+  if (splitted[splitted.length - 1] === extension) {
+    splitted.pop();
+  }
+  return splitted.join(".");
 }

src/Explorer/Notebook/NTeractUtil.ts

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

src/Explorer/Notebook/NotebookClientV2.ts

@@ -1,15 +1,16 @@
 // Manages all the redux logic for the notebook nteract code
 // TODO: Merge with NotebookClient?
-import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
-import * as Constants from "../../Common/Constants";
-import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
-
 // Vendor modules
 import {
   actions,
   AppState,
+  ContentRecord,
   createHostRef,
   createKernelspecsRef,
+  HostRecord,
+  HostRef,
+  IContentProvider,
+  KernelspecsRef,
   makeAppRecord,
   makeCommsRecord,
   makeContentsRecord,
@@ -19,23 +20,21 @@ import {
   makeJupyterHostRecord,
   makeStateRecord,
   makeTransformsRecord,
-  ContentRecord,
-  HostRecord,
-  HostRef,
-  KernelspecsRef,
-  IContentProvider,
 } from "@nteract/core";
+import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
-import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
-
-import configureStore from "./NotebookComponent/store";
-
 import { Notification } from "react-notification-system";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { AnyAction, Dispatch, Middleware, MiddlewareAPI, Store } from "redux";
+import * as Constants from "../../Common/Constants";
+import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import configureStore from "./NotebookComponent/store";
+import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
+import JavaScript from "./NotebookRenderer/outputs/javascript";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };
 
@@ -168,7 +167,7 @@ export class NotebookClientV2 {
               "application/vnd.vega.v5+json": NullTransform,
               "application/vdom.v1+json": TransformVDOM,
               "application/json": Media.Json,
-              "application/javascript": Media.JavaScript,
+              "application/javascript": userContext.features.sandboxNotebookOutputs ? JavaScript : Media.JavaScript,
               "text/html": Media.HTML,
               "text/markdown": Media.Markdown,
               "text/latex": Media.LaTeX,

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 NteractUtil from "../NTeractUtil";
+import * as 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 NteractUtil from "../NTeractUtil";
+import * as NteractUtil from "../NTeractUtil";
 
 interface VirtualCommandBarComponentProps {
   kernelSpecName: string;

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

@@ -1,4 +1,4 @@
-import { StringUtils } from "../../../../../Utils/StringUtils";
+import * as 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";