Merge branch 'master' of https://github.com/Azure/cosmos-explorer into eslit/fixed-lint-notebook-utils

.eslintignore

@@ -14,6 +14,8 @@ src/Common/DataAccessUtilityBase.ts
 src/Common/EditableUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
+src/Common/IteratorUtilities.test.ts
+src/Common/IteratorUtilities.ts
 src/Common/Logger.test.ts
 src/Common/MessageHandler.test.ts
 src/Common/MessageHandler.ts
@@ -24,6 +26,7 @@ src/Common/ObjectCache.test.ts
 src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
+src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
 src/Contracts/DataModels.ts
@@ -98,6 +101,7 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
 src/Explorer/Notebook/FileSystemUtil.ts
+src/Explorer/Notebook/NTeractUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -111,7 +115,6 @@ src/Explorer/Notebook/NotebookComponent/types.ts
 src/Explorer/Notebook/NotebookContainerClient.ts
 src/Explorer/Notebook/NotebookContentClient.ts
 src/Explorer/Notebook/NotebookContentItem.ts
-src/Explorer/Notebook/NotebookUtil.ts
 src/Explorer/OpenActions.test.ts
 src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
@@ -247,6 +250,8 @@ src/Shared/ExplorerSettings.ts
 src/Shared/PriceEstimateCalculator.ts
 src/Shared/StorageUtility.test.ts
 src/Shared/StorageUtility.ts
+src/Shared/StringUtility.test.ts
+src/Shared/StringUtility.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
@@ -257,6 +262,7 @@ src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
 src/Utils/DatabaseAccountUtils.test.ts
 src/Utils/DatabaseAccountUtils.ts
+src/Utils/NotebookConfigurationUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
 src/Utils/QueryUtils.ts
@@ -309,7 +315,15 @@ src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
+src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
+src/Explorer/Menus/NavBar/ControlBarComponent.tsx
+src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx
+src/Explorer/Menus/NavBar/MeControlComponent.test.tsx
+src/Explorer/Menus/NavBar/MeControlComponent.tsx
+src/Explorer/Menus/NavBar/MeControlComponentAdapter.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx

.github/workflows/ci.yml

@@ -15,10 +15,10 @@ jobs:
     if: github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: node utils/codeMetrics.js
         env:
@@ -28,10 +28,10 @@ jobs:
     name: "Compile TypeScript"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run compile
       - run: npm run compile:strict
@@ -40,10 +40,10 @@ jobs:
     name: "Check Format"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run format:check
   lint:
@@ -51,10 +51,10 @@ jobs:
     name: "Lint"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run lint
   unittest:
@@ -62,10 +62,10 @@ jobs:
     name: "Unit Tests"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run test
   build:
@@ -74,10 +74,10 @@ jobs:
     name: "Build"
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - run: npm ci
       - run: npm run build:contracts
       - name: Restore Build Cache
@@ -94,14 +94,14 @@ jobs:
           path: dist/
   endtoendemulator:
     name: "End To End Emulator Tests"
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
+    needs: [lint, format, compile, unittest]
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - uses: southpolesteve/cosmos-emulator-github-action@v1
       - name: End to End Tests
         run: |
@@ -125,10 +125,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
         uses: actions/setup-node@v1
         with:
-          node-version: 14.x
+          node-version: 12.x
       - name: Accessibility Check
         run: |
           # Ubuntu gets mad when webpack runs too many files watchers
@@ -163,7 +163,6 @@ 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

.vscode/settings.json

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

README.md

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

jest-puppeteer.config.js

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

jest.config.js

@@ -21,13 +21,17 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+  // collectCoverageFrom: [
+  //   "src/Common/Headers*"
+  // ],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: ["/node_modules/"],
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ["json", "text", "cobertura"],
@@ -35,10 +39,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 25,
+      branches: 22,
-      functions: 25,
+      functions: 28,
-      lines: 30,
+      lines: 33,
-      statements: 30,
+      statements: 31,
     },
   },
 

package.json

@@ -80,7 +80,7 @@
     "ms": "2.1.3",
     "msal": "1.4.4",
     "object.entries": "1.1.0",
-    "office-ui-fabric-react": "7.164.2",
+    "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
     "promise-polyfill": "8.1.0",
@@ -121,15 +121,15 @@
     "@types/d3": "5.9.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.5",
+    "@types/expect-puppeteer": "4.4.3",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.4.1",
+    "@types/jest-environment-puppeteer": "4.3.2",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
     "@types/promise.prototype.finally": "2.0.3",
     "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "5.4.3",
+    "@types/puppeteer": "3.0.1",
     "@types/q": "1.5.1",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
@@ -176,7 +176,7 @@
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "prettier": "2.2.1",
-    "puppeteer": "8.0.0",
+    "puppeteer": "4.0.0",
     "raw-loader": "0.5.1",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",

src/Common/Constants.ts

@@ -120,7 +120,6 @@ export class Features {
   public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
   public static readonly selfServeType = "selfservetype";
   public static readonly enableKOPanel = "enablekopanel";
-  public static readonly enableReactPane = "enablereactpane";
 }
 
 // flight names returned from the portal are always lowercase

src/Common/CosmosClient.ts

@@ -1,10 +1,10 @@
 import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { configContext, Platform } from "../ConfigContext";
-import { userContext } from "../UserContext";
+import { getErrorMessage } from "./ErrorHandlingUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
-import { getErrorMessage } from "./ErrorHandlingUtils";
+import { userContext } from "../UserContext";
 
 const _global = typeof self === "undefined" ? window : self;
 

src/Common/ErrorHandlingUtils.ts

@@ -1,9 +1,8 @@
+import { ARMError } from "../Utils/arm/request";
+import { HttpStatusCodes } from "./Constants";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
-import { userContext } from "../UserContext";
-import { ARMError } from "../Utils/arm/request";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
-import { HttpStatusCodes } from "./Constants";
 import { logError } from "./Logger";
 import { sendMessage } from "./MessageHandler";
 
@@ -45,7 +44,7 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri
 
 const replaceKnownError = (errorMessage: string): string => {
   if (
-    userContext.subscriptionType === SubscriptionType.Internal &&
+    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
     errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
   ) {
     return "Database throughput is not supported for internal subscriptions.";

src/Common/IteratorUtilities.ts

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

src/Common/MessageHandler.ts

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

src/Common/UrlUtility.ts

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

src/Contracts/DataModels.ts

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

src/Contracts/SelfServeContracts.ts

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

src/Contracts/ViewModels.ts

@@ -390,18 +390,10 @@ export interface DataExplorerInputsFrame {
   sharedThroughputMaximum?: number;
   sharedThroughputDefault?: number;
   dataExplorerVersion?: string;
+  isAuthWithresourceToken?: boolean;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
-}
+  selfServeType?: SelfServeType;
-
-export interface SelfServeFrameInputs {
-  selfServeType: SelfServeType;
-  databaseAccount: any;
-  subscriptionId: string;
-  resourceGroup: string;
-  authorizationToken: string;
-  csmEndpoint: string;
-  flights?: readonly string[];
 }
 
 export interface CollectionCreationDefaults {

src/Controls/Heatmap/Heatmap.ts

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

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

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

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

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

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

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

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

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

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

@@ -47,7 +47,6 @@ 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);
@@ -104,7 +103,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
             </Card.Item>
 
             <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
+              <Text variant="small" nowrap>
                 {this.props.data.tags ? (
                   this.props.data.tags.map((tag, index, array) => (
                     <span key={tag}>
@@ -130,7 +129,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
                 {cardTitle}
               </Text>
 
-              <Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
+              <Text variant="small" styles={{ root: { height: 36 } }}>
                 {this.renderTruncatedDescription()}
               </Text>
 

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

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -388,7 +388,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createSearchBarHeader(content: JSX.Element): JSX.Element {
     return (
       <Stack tokens={{ childrenGap: 10 }}>
-        <Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
+        <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
           <Stack.Item grow>
             <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
           </Stack.Item>

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

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

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

@@ -36,7 +36,6 @@ exports[`GalleryViewerComponent renders 1`] = `
                 "padding": 10,
               }
             }
-            wrap={true}
           >
             <StackItem
               grow={true}
@@ -122,7 +121,6 @@ exports[`GalleryViewerComponent renders 1`] = `
               "padding": 10,
             }
           }
-          wrap={true}
         >
           <StackItem
             grow={true}

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

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

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -1,51 +1,49 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
-import DiscardIcon from "../../../../images/discard.svg";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import SaveIcon from "../../../../images/save-cosmos.svg";
-import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
-import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
-import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import DiscardIcon from "../../../../images/discard.svg";
+import SaveIcon from "../../../../images/save-cosmos.svg";
+import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
-import {
+import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
-  ConflictResolutionComponent,
-  ConflictResolutionComponentProps,
-} from "./SettingsSubComponents/ConflictResolutionComponent";
-import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
 import {
   MongoIndexingPolicyComponent,
   MongoIndexingPolicyComponentProps,
 } from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
-import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
-import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
 import {
-  AddMongoIndexProps,
-  ChangeFeedPolicyState,
-  GeospatialConfigType,
-  getMongoNotification,
-  getTabTitle,
   hasDatabaseSharedThroughput,
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  SettingsV2TabTypes,
+  getTabTitle,
   isDirty,
+  AddMongoIndexProps,
   MongoIndexTypes,
   parseConflictResolutionMode,
   parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
+  getMongoNotification,
-  TtlType,
 } from "./SettingsUtils";
+import {
+  ConflictResolutionComponent,
+  ConflictResolutionComponentProps,
+} from "./SettingsSubComponents/ConflictResolutionComponent";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
+import { Pivot, PivotItem, IPivotProps, IPivotItemProps } from "office-ui-fabric-react";
+import "./SettingsComponent.less";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
+import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 
 interface SettingsV2TabInfo {
   tab: SettingsV2TabTypes;
@@ -327,6 +325,7 @@ 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(
@@ -700,6 +699,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
+    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
@@ -862,6 +862,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         });
       }
     }
+    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
@@ -876,18 +877,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     );
   };
 
-  public getMongoIndexTabContent = (
-    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
-  ): JSX.Element => {
-    if (userContext.authType === AuthType.AAD) {
-      if (this.container.isEnableMongoCapabilityPresent()) {
-        return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
-      }
-      return undefined;
-    }
-    return mongoIndexingPolicyAADError;
-  };
-
   public render(): JSX.Element {
     const scaleComponentProps: ScaleComponentProps = {
       collection: this.collection,
@@ -1005,11 +994,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
       });
     } else if (this.container.isPreferredApiMongoDB()) {
-      const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
+      if (this.container.isEnableMongoCapabilityPresent()) {
-      if (mongoIndexTabContext) {
         tabs.push({
           tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexTabContext,
+          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
+        });
+      } else {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: mongoIndexingPolicyAADError,
         });
       }
     }

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

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

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

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

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

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

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

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

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

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

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

@@ -1,53 +1,55 @@
+import React from "react";
+import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import {
-  Checkbox,
+  getTextFieldStyles,
+  getToolTipContainer,
+  noLeftPaddingCheckBoxStyle,
+  titleAndInputStackProps,
+  checkBoxAndInputStackProps,
+  getChoiceGroupStyles,
+  messageBarStyles,
+  getEstimatedSpendingElement,
+  getAutoPilotV3SpendElement,
+  manualToAutoscaleDisclaimerElement,
+  saveThroughputWarningMessage,
+  ManualEstimatedSpendingDisplayProps,
+  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
+  transparentDetailsHeaderStyle,
+} from "../../SettingsRenderUtils";
+import {
+  Text,
+  TextField,
   ChoiceGroup,
-  FontIcon,
   IChoiceGroupOption,
-  IColumn,
+  Checkbox,
+  Stack,
   Label,
   Link,
   MessageBar,
-  Stack,
+  FontIcon,
-  Text,
+  IColumn,
-  TextField,
 } from "office-ui-fabric-react";
-import React from "react";
-import { Features } from "../../../../../Common/Constants";
-import * as DataModels from "../../../../../Contracts/DataModels";
-import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import * as SharedConstants from "../../../../../Shared/Constants";
-import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../../../UserContext";
-import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
-import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
-import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
-import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import {
-  AutoscaleEstimatedSpendingDisplayProps,
-  checkBoxAndInputStackProps,
-  getAutoPilotV3SpendElement,
-  getChoiceGroupStyles,
-  getEstimatedSpendingElement,
-  getRuPriceBreakdown,
-  getTextFieldStyles,
-  getToolTipContainer,
-  ManualEstimatedSpendingDisplayProps,
-  manualToAutoscaleDisclaimerElement,
-  messageBarStyles,
-  noLeftPaddingCheckBoxStyle,
-  PriceBreakdown,
-  saveThroughputWarningMessage,
-  titleAndInputStackProps,
-  transparentDetailsHeaderStyle,
-} from "../../SettingsRenderUtils";
-import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import * as SharedConstants from "../../../../../Shared/Constants";
+import * as DataModels from "../../../../../Contracts/DataModels";
+import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
+import { userContext } from "../../../../../UserContext";
+import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
+import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
+import { Features } from "../../../../../Common/Constants";
+import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
+
+import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
 
 export interface ThroughputInputAutoPilotV3Props {
   databaseAccount: DataModels.DatabaseAccount;
   databaseName: string;
   collectionName: string;
+  serverId: string;
   throughput: number;
   throughputBaseline: number;
   onThroughputChange: (newThroughput: number) => void;
@@ -180,6 +182,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     }
 
     const isDirty: boolean = this.IsComponentDirty().isDiscardable;
+    const serverId: string = this.props.serverId;
     const regions = account?.properties?.readLocations?.length || 1;
     const multimaster = account?.properties?.enableMultipleWriteLocations || false;
 
@@ -189,7 +192,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       estimatedSpend = this.getEstimatedManualSpendElement(
         // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
         this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
-        userContext.portalEnv,
+        serverId,
         regions,
         multimaster,
         isDirty ? this.props.throughput : undefined
@@ -197,7 +200,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     } else {
       estimatedSpend = this.getEstimatedAutoscaleSpendElement(
         this.props.maxAutoPilotThroughputBaseline,
-        userContext.portalEnv,
+        serverId,
         regions,
         multimaster,
         isDirty ? this.props.maxAutoPilotThroughput : undefined

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

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

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

@@ -920,6 +920,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
+                "isAuthWithResourceToken": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
@@ -936,6 +937,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
+                "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
@@ -944,6 +946,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
+                "isTryCosmosDBSubscription": [Function],
                 "loadQueryPane": LoadQueryPane {
                   "container": [Circular],
                   "files": [Function],
@@ -1057,6 +1060,15 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
+                "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
@@ -2117,6 +2129,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
+              "isAuthWithResourceToken": [Function],
               "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
@@ -2133,6 +2146,7 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
+              "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
@@ -2141,6 +2155,7 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
+              "isTryCosmosDBSubscription": [Function],
               "loadQueryPane": LoadQueryPane {
                 "container": [Circular],
                 "files": [Function],
@@ -2254,6 +2269,15 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
+              "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,
@@ -3327,6 +3351,7 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "hasWriteAccess": [Function],
                 "isAccountReady": [Function],
+                "isAuthWithResourceToken": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
                 "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
@@ -3343,6 +3368,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
+                "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
@@ -3351,6 +3377,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
+                "isTryCosmosDBSubscription": [Function],
                 "loadQueryPane": LoadQueryPane {
                   "container": [Circular],
                   "files": [Function],
@@ -3464,6 +3491,15 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "selfServeComponentAdapter": SelfServeComponentAdapter {
+                  "container": [Circular],
+                  "parameters": [Function],
+                },
+                "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                  "parameters": [Function],
+                },
+                "selfServeType": [Function],
+                "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
@@ -4524,6 +4560,7 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "hasWriteAccess": [Function],
               "isAccountReady": [Function],
+              "isAuthWithResourceToken": [Function],
               "isAutoscaleDefaultEnabled": [Function],
               "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
@@ -4540,6 +4577,7 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
+              "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
@@ -4548,6 +4586,7 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
+              "isTryCosmosDBSubscription": [Function],
               "loadQueryPane": LoadQueryPane {
                 "container": [Circular],
                 "files": [Function],
@@ -4661,6 +4700,15 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "selfServeComponentAdapter": SelfServeComponentAdapter {
+                "container": [Circular],
+                "parameters": [Function],
+              },
+              "selfServeLoadingComponentAdapter": SelfServeLoadingComponentAdapter {
+                "parameters": [Function],
+              },
+              "selfServeType": [Function],
+              "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,

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

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

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

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

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

@@ -9,7 +9,25 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     }
   }
 >
-  <StackItem />
+  <StackItem>
+    <StyledMessageBarBase
+      styles={
+        Object {
+          "root": Object {
+            "width": 400,
+          },
+        }
+      }
+    >
+      Start at $24/mo per database
+      <StyledLinkBase
+        href="https://aka.ms/azure-cosmos-db-pricing"
+        target="_blank"
+      >
+        More Details
+      </StyledLinkBase>
+    </StyledMessageBarBase>
+  </StackItem>
   <div
     key="description"
   >
@@ -22,23 +40,18 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <Text
-          <Stack>
+          id="description-text-display"
-            <Text
+        >
-              aria-labelledby="description-label"
+          this is an example description text.
-              id="description-text-display"
-            >
-              this is an example description text.
            
-              <StyledLinkBase
+          <StyledLinkBase
-                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-                target="_blank"
+            target="_blank"
-              >
+          >
-                Click here for more information.
+            Click here for more information.
-              </StyledLinkBase>
+          </StyledLinkBase>
-            </Text>
+        </Text>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -54,55 +67,53 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <Stack
-          <Stack>
+          styles={
-            <StyledLabelBase
+            Object {
-              id="throughput-label"
+              "root": Object {
-            >
+                "width": 400,
-              <ToolTipLabelComponent
+              },
-                label="Throughput (input)"
+            }
-              />
+          }
-            </StyledLabelBase>
+          tokens={
-            <Stack
+            Object {
-              styles={
+              "childrenGap": 2,
-                Object {
+            }
-                  "root": Object {
+          }
-                    "width": 400,
+        >
-                  },
+          <CustomizedSpinButton
-                }
+            ariaLabel="Throughput (input)"
+            decrementButtonIcon={
+              Object {
+                "iconName": "ChevronDownSmall",
               }
-              tokens={
+            }
-                Object {
+            disabled={true}
-                  "childrenGap": 2,
+            id="throughput-spinner-input"
-                }
+            incrementButtonIcon={
+              Object {
+                "iconName": "ChevronUpSmall",
               }
-            >
+            }
-              <CustomizedSpinButton
+            label="Throughput (input)"
-                aria-labelledby="throughput-label"
+            labelPosition={0}
-                ariaLabel="Throughput (input)"
+            max={500}
-                decrementButtonIcon={
+            min={400}
-                  Object {
+            onDecrement={[Function]}
-                    "iconName": "ChevronDownSmall",
+            onIncrement={[Function]}
-                  }
+            onValidate={[Function]}
-                }
+            step={10}
-                disabled={true}
+            styles={
-                id="throughput-spinner-input"
+              Object {
-                incrementButtonIcon={
+                "label": Object {
-                  Object {
+                  "color": "#393939",
-                    "iconName": "ChevronUpSmall",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  }
+                  "fontSize": 12,
-                }
+                  "fontWeight": 600,
-                label=""
+                },
-                labelPosition={0}
+              }
-                max={500}
+            }
-                min={400}
+          />
-                onDecrement={[Function]}
-                onIncrement={[Function]}
-                onValidate={[Function]}
-                step={10}
-              />
-            </Stack>
-          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -119,41 +130,37 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <div
-          <Stack>
+          id="throughput2-slider-input"
-            <StyledLabelBase
+        >
-              id="throughput2-label"
+          <StyledSliderBase
-            >
+            ariaLabel="Throughput (Slider)"
-              <ToolTipLabelComponent
+            disabled={true}
-                label="Throughput (Slider)"
+            label="Throughput (Slider)"
-              />
+            max={500}
-            </StyledLabelBase>
+            min={400}
-            <div
+            onChange={[Function]}
-              id="throughput2-slider-input"
+            step={10}
-            >
+            styles={
-              <StyledSliderBase
+              Object {
-                ariaLabel="Throughput (Slider)"
+                "root": Object {
-                disabled={true}
+                  "width": 400,
-                max={500}
+                },
-                min={400}
+                "titleLabel": Object {
-                onChange={[Function]}
+                  "color": "#393939",
-                step={10}
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                styles={
+                  "fontSize": 12,
-                  Object {
+                  "fontWeight": 600,
-                    "root": Object {
+                },
-                      "width": 400,
+                "valueLabel": Object {
-                    },
+                  "color": "#393939",
-                    "valueLabel": Object {
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "color": "#393939",
+                  "fontSize": 12,
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                },
-                      "fontSize": 12,
+              }
-                    },
+            }
-                  }
+          />
-                }
+        </div>
-              />
-            </div>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -190,32 +197,35 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <div
-          <Stack>
+          className="stringInputContainer"
-            <StyledLabelBase
+        >
-              id="containerId-label"
+          <StyledTextFieldBase
-            >
+            disabled={true}
-              <ToolTipLabelComponent
+            id="containerId-textField-input"
-                label="Container id"
+            label="Container id"
-              />
+            onChange={[Function]}
-            </StyledLabelBase>
+            styles={
-            <StyledTextFieldBase
+              Object {
-              aria-labelledby="containerId-label"
+                "root": Object {
-              disabled={true}
+                  "width": 400,
-              id="containerId-textField-input"
+                },
-              onChange={[Function]}
+                "subComponentStyles": Object {
-              styles={
+                  "label": Object {
-                Object {
+                    "root": Object {
-                  "root": Object {
+                      "color": "#393939",
-                    "width": 400,
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                      "fontWeight": 600,
+                    },
                   },
-                }
+                },
               }
-              type="text"
+            }
-              value=""
+            type="text"
-            />
+            value=""
-          </Stack>
+          />
-        </Stack>
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -231,33 +241,22 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <StyledToggleBase
-          <Stack>
+          checked={false}
-            <StyledLabelBase
+          disabled={true}
-              id="analyticalStore-label"
+          id="analyticalStore-toggle-input"
-            >
+          label="Analytical Store"
-              <ToolTipLabelComponent
+          offText="Disabled"
-                label="Analytical Store"
+          onChange={[Function]}
-              />
+          onText="Enabled"
-            </StyledLabelBase>
+          styles={
-            <StyledToggleBase
+            Object {
-              aria-labelledby="analyticalStore-label"
+              "root": Object {
-              checked={false}
+                "width": 400,
-              disabled={true}
+              },
-              id="analyticalStore-toggle-input"
+            }
-              offText="Disabled"
+          }
-              onChange={[Function]}
+        />
-              onText="Enabled"
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
-            />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -273,53 +272,47 @@ exports[`SmartUiComponent disable all inputs 1`] = `
       }
     >
       <StackItem>
-        <Stack>
+        <StyledWithResponsiveMode
-          <Stack>
+          disabled={true}
-            <StyledLabelBase
+          id="database-dropdown-input"
-              id="database-label"
+          label="Database"
-            >
+          onChange={[Function]}
-              <ToolTipLabelComponent
+          options={
-                label="Database"
+            Array [
-              />
+              Object {
-            </StyledLabelBase>
+                "key": "db1",
-            <StyledWithResponsiveMode
+                "text": "Database 1",
-              aria-labelledby="database-label"
+              },
-              disabled={true}
+              Object {
-              dropdownWidth="auto"
+                "key": "db2",
-              id="database-dropdown-input"
+                "text": "Database 2",
-              onChange={[Function]}
+              },
-              options={
+              Object {
-                Array [
+                "key": "db3",
-                  Object {
+                "text": "Database 3",
-                    "key": "db1",
+              },
-                    "text": "Database 1",
+            ]
-                  },
+          }
-                  Object {
+          selectedKey="db2"
-                    "key": "db2",
+          styles={
-                    "text": "Database 2",
+            Object {
-                  },
+              "dropdown": Object {
-                  Object {
+                "color": "#393939",
-                    "key": "db3",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "text": "Database 3",
+                "fontSize": 12,
-                  },
+              },
-                ]
+              "label": Object {
-              }
+                "color": "#393939",
-              selectedKey="db2"
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-              styles={
+                "fontSize": 12,
-                Object {
+                "fontWeight": 600,
-                  "dropdown": Object {
+              },
-                    "color": "#393939",
+              "root": Object {
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "width": 400,
-                    "fontSize": 12,
+              },
-                  },
+            }
-                  "root": Object {
+          }
-                    "width": 400,
+        />
-                  },
-                }
-              }
-            />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -335,7 +328,25 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     }
   }
 >
-  <StackItem />
+  <StackItem>
+    <StyledMessageBarBase
+      styles={
+        Object {
+          "root": Object {
+            "width": 400,
+          },
+        }
+      }
+    >
+      Start at $24/mo per database
+      <StyledLinkBase
+        href="https://aka.ms/azure-cosmos-db-pricing"
+        target="_blank"
+      >
+        More Details
+      </StyledLinkBase>
+    </StyledMessageBarBase>
+  </StackItem>
   <div
     key="description"
   >
@@ -348,23 +359,18 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <Text
-          <Stack>
+          id="description-text-display"
-            <Text
+        >
-              aria-labelledby="description-label"
+          this is an example description text.
-              id="description-text-display"
-            >
-              this is an example description text.
            
-              <StyledLinkBase
+          <StyledLinkBase
-                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+            href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-                target="_blank"
+            target="_blank"
-              >
+          >
-                Click here for more information.
+            Click here for more information.
-              </StyledLinkBase>
+          </StyledLinkBase>
-            </Text>
+        </Text>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -380,55 +386,53 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <Stack
-          <Stack>
+          styles={
-            <StyledLabelBase
+            Object {
-              id="throughput-label"
+              "root": Object {
-            >
+                "width": 400,
-              <ToolTipLabelComponent
+              },
-                label="Throughput (input)"
+            }
-              />
+          }
-            </StyledLabelBase>
+          tokens={
-            <Stack
+            Object {
-              styles={
+              "childrenGap": 2,
-                Object {
+            }
-                  "root": Object {
+          }
-                    "width": 400,
+        >
-                  },
+          <CustomizedSpinButton
-                }
+            ariaLabel="Throughput (input)"
+            decrementButtonIcon={
+              Object {
+                "iconName": "ChevronDownSmall",
               }
-              tokens={
+            }
-                Object {
+            disabled={false}
-                  "childrenGap": 2,
+            id="throughput-spinner-input"
-                }
+            incrementButtonIcon={
+              Object {
+                "iconName": "ChevronUpSmall",
               }
-            >
+            }
-              <CustomizedSpinButton
+            label="Throughput (input)"
-                aria-labelledby="throughput-label"
+            labelPosition={0}
-                ariaLabel="Throughput (input)"
+            max={500}
-                decrementButtonIcon={
+            min={400}
-                  Object {
+            onDecrement={[Function]}
-                    "iconName": "ChevronDownSmall",
+            onIncrement={[Function]}
-                  }
+            onValidate={[Function]}
-                }
+            step={10}
-                disabled={false}
+            styles={
-                id="throughput-spinner-input"
+              Object {
-                incrementButtonIcon={
+                "label": Object {
-                  Object {
+                  "color": "#393939",
-                    "iconName": "ChevronUpSmall",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                  }
+                  "fontSize": 12,
-                }
+                  "fontWeight": 600,
-                label=""
+                },
-                labelPosition={0}
+              }
-                max={500}
+            }
-                min={400}
+          />
-                onDecrement={[Function]}
-                onIncrement={[Function]}
-                onValidate={[Function]}
-                step={10}
-              />
-            </Stack>
-          </Stack>
         </Stack>
       </StackItem>
     </Stack>
@@ -445,40 +449,36 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <div
-          <Stack>
+          id="throughput2-slider-input"
-            <StyledLabelBase
+        >
-              id="throughput2-label"
+          <StyledSliderBase
-            >
+            ariaLabel="Throughput (Slider)"
-              <ToolTipLabelComponent
+            label="Throughput (Slider)"
-                label="Throughput (Slider)"
+            max={500}
-              />
+            min={400}
-            </StyledLabelBase>
+            onChange={[Function]}
-            <div
+            step={10}
-              id="throughput2-slider-input"
+            styles={
-            >
+              Object {
-              <StyledSliderBase
+                "root": Object {
-                ariaLabel="Throughput (Slider)"
+                  "width": 400,
-                max={500}
+                },
-                min={400}
+                "titleLabel": Object {
-                onChange={[Function]}
+                  "color": "#393939",
-                step={10}
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                styles={
+                  "fontSize": 12,
-                  Object {
+                  "fontWeight": 600,
-                    "root": Object {
+                },
-                      "width": 400,
+                "valueLabel": Object {
-                    },
+                  "color": "#393939",
-                    "valueLabel": Object {
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "color": "#393939",
+                  "fontSize": 12,
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                },
-                      "fontSize": 12,
+              }
-                    },
+            }
-                  }
+          />
-                }
+        </div>
-              />
-            </div>
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -515,31 +515,34 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <div
-          <Stack>
+          className="stringInputContainer"
-            <StyledLabelBase
+        >
-              id="containerId-label"
+          <StyledTextFieldBase
-            >
+            id="containerId-textField-input"
-              <ToolTipLabelComponent
+            label="Container id"
-                label="Container id"
+            onChange={[Function]}
-              />
+            styles={
-            </StyledLabelBase>
+              Object {
-            <StyledTextFieldBase
+                "root": Object {
-              aria-labelledby="containerId-label"
+                  "width": 400,
-              id="containerId-textField-input"
+                },
-              onChange={[Function]}
+                "subComponentStyles": Object {
-              styles={
+                  "label": Object {
-                Object {
+                    "root": Object {
-                  "root": Object {
+                      "color": "#393939",
-                    "width": 400,
+                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                      "fontSize": 12,
+                      "fontWeight": 600,
+                    },
                   },
-                }
+                },
               }
-              type="text"
+            }
-              value=""
+            type="text"
-            />
+            value=""
-          </Stack>
+          />
-        </Stack>
+        </div>
       </StackItem>
     </Stack>
   </div>
@@ -555,32 +558,21 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <StyledToggleBase
-          <Stack>
+          checked={false}
-            <StyledLabelBase
+          id="analyticalStore-toggle-input"
-              id="analyticalStore-label"
+          label="Analytical Store"
-            >
+          offText="Disabled"
-              <ToolTipLabelComponent
+          onChange={[Function]}
-                label="Analytical Store"
+          onText="Enabled"
-              />
+          styles={
-            </StyledLabelBase>
+            Object {
-            <StyledToggleBase
+              "root": Object {
-              aria-labelledby="analyticalStore-label"
+                "width": 400,
-              checked={false}
+              },
-              id="analyticalStore-toggle-input"
+            }
-              offText="Disabled"
+          }
-              onChange={[Function]}
+        />
-              onText="Enabled"
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
-            />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>
@@ -596,52 +588,46 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
       }
     >
       <StackItem>
-        <Stack>
+        <StyledWithResponsiveMode
-          <Stack>
+          id="database-dropdown-input"
-            <StyledLabelBase
+          label="Database"
-              id="database-label"
+          onChange={[Function]}
-            >
+          options={
-              <ToolTipLabelComponent
+            Array [
-                label="Database"
+              Object {
-              />
+                "key": "db1",
-            </StyledLabelBase>
+                "text": "Database 1",
-            <StyledWithResponsiveMode
+              },
-              aria-labelledby="database-label"
+              Object {
-              dropdownWidth="auto"
+                "key": "db2",
-              id="database-dropdown-input"
+                "text": "Database 2",
-              onChange={[Function]}
+              },
-              options={
+              Object {
-                Array [
+                "key": "db3",
-                  Object {
+                "text": "Database 3",
-                    "key": "db1",
+              },
-                    "text": "Database 1",
+            ]
-                  },
+          }
-                  Object {
+          selectedKey="db2"
-                    "key": "db2",
+          styles={
-                    "text": "Database 2",
+            Object {
-                  },
+              "dropdown": Object {
-                  Object {
+                "color": "#393939",
-                    "key": "db3",
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "text": "Database 3",
+                "fontSize": 12,
-                  },
+              },
-                ]
+              "label": Object {
-              }
+                "color": "#393939",
-              selectedKey="db2"
+                "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-              styles={
+                "fontSize": 12,
-                Object {
+                "fontWeight": 600,
-                  "dropdown": Object {
+              },
-                    "color": "#393939",
+              "root": Object {
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                "width": 400,
-                    "fontSize": 12,
+              },
-                  },
+            }
-                  "root": Object {
+          }
-                    "width": 400,
+        />
-                  },
-                }
-              }
-            />
-          </Stack>
-        </Stack>
       </StackItem>
     </Stack>
   </div>

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

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

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

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

src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts

@@ -129,6 +129,7 @@ export interface ThroughputInputParams {
   throughputModeRadioName: string;
   maxAutoPilotThroughputSet: ViewModels.Editable<number>;
   autoPilotUsageCost: ko.Computed<string>;
+  showAutoPilot?: ko.Observable<boolean>;
   overrideWithAutoPilotSettings: ko.Observable<boolean>;
   overrideWithProvisionedThroughputSettings: ko.Observable<boolean>;
   freeTierExceedThroughputTooltip?: ko.Observable<string>;
@@ -157,6 +158,7 @@ export class ThroughputInputViewModel extends WaitsForTemplateViewModel {
   public infoBubbleText: string | ko.Observable<string>;
   public label: ko.Observable<string>;
   public isFixed: boolean;
+  public showAutoPilot: ko.Observable<boolean>;
   public isAutoPilotSelected: ko.Observable<boolean>;
   public throughputAutoPilotRadioId: string;
   public throughputProvisionedRadioId: string;
@@ -200,6 +202,7 @@ 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 class="throughputModeContainer">
+  <div data-bind="visible: showAutoPilot" class="throughputModeContainer">
     <input
       class="throughputModeRadio"
       aria-label="Autopilot mode"

src/Explorer/Explorer.tsx

@@ -1,88 +1,93 @@
-import * as ko from "knockout";
-import { IChoiceGroupProps } from "office-ui-fabric-react";
-import * as path from "path";
-import Q from "q";
 import React from "react";
-import _ from "underscore";
+import * as ComponentRegisterer from "./ComponentRegisterer";
-import { AuthType } from "../AuthType";
-import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
-import { ReactAdapter } from "../Bindings/ReactBindingHandler";
 import * as Constants from "../Common/Constants";
-import { ExplorerMetrics } from "../Common/Constants";
+import * as DataModels from "../Contracts/DataModels";
+import * as ko from "knockout";
+import * as path from "path";
+import * as SharedConstants from "../Shared/Constants";
+import * as ViewModels from "../Contracts/ViewModels";
+import _ from "underscore";
+import AddCollectionPane from "./Panes/AddCollectionPane";
+import AddDatabasePane from "./Panes/AddDatabasePane";
+import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
+import AuthHeadersUtil from "../Platform/Hosted/Authorization";
+import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
+import Database from "./Tree/Database";
+import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
+import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
-import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
+import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import * as Logger from "../Common/Logger";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendCachedDataMessage, sendMessage } from "../Common/MessageHandler";
-import { QueriesClient } from "../Common/QueriesClient";
-import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
-import { configContext, Platform } from "../ConfigContext";
-import * as DataModels from "../Contracts/DataModels";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { SubscriptionType } from "../Contracts/SubscriptionType";
-import * as ViewModels from "../Contracts/ViewModels";
-import { IGalleryItem } from "../Juno/JunoClient";
-import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
-import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
-import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { appInsights } from "../Shared/appInsights";
-import * as SharedConstants from "../Shared/Constants";
-import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
-import { ExplorerSettings } from "../Shared/ExplorerSettings";
-import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
-import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
-import { updateUserContext, userContext } from "../UserContext";
-import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
-import { stringToBlob } from "../Utils/BlobUtils";
-import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as ComponentRegisterer from "./ComponentRegisterer";
-import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
-import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
-import { DialogProps, TextFieldProps } from "./Controls/Dialog";
-import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
-import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
-import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import { FileSystemUtil } from "./Notebook/FileSystemUtil";
-import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
-import { NotebookUtil } from "./Notebook/NotebookUtil";
-import AddCollectionPane from "./Panes/AddCollectionPane";
-import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
-import AddDatabasePane from "./Panes/AddDatabasePane";
-import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
-import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
-import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
-import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
-import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
-import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPane } from "./Panes/LoadQueryPane";
 import NewVertexPane from "./Panes/NewVertexPane";
+import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
+import Q from "q";
+import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
+import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
+import TerminalTab from "./Tabs/TerminalTab";
+import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
+import { ArcadiaResourceManager } from "../SparkClusterManager/ArcadiaResourceManager";
+import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
+import { AuthType } from "../AuthType";
+import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
+import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
+import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
+import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
+import { configContext, Platform, updateConfigContext } from "../ConfigContext";
+import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
+import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
+import { DialogProps, TextFieldProps } from "./Controls/Dialog";
+import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
+import { ExplorerMetrics } from "../Common/Constants";
+import { ExplorerSettings } from "../Shared/ExplorerSettings";
+import { FileSystemUtil } from "./Notebook/FileSystemUtil";
+import { IGalleryItem } from "../Juno/JunoClient";
+import { LoadQueryPane } from "./Panes/LoadQueryPane";
+import * as Logger from "../Common/Logger";
+import { sendMessage, sendCachedDataMessage } from "../Common/MessageHandler";
+import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
+import * as NotebookUtil from "./Notebook/NotebookUtil";
+import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { QueriesClient } from "../Common/QueriesClient";
+import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
+import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
+import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
+import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
+import { RouteHandler } from "../RouteHandlers/RouteHandler";
 import { SaveQueryPane } from "./Panes/SaveQueryPane";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
+import { SplashScreen } from "./SplashScreen/SplashScreen";
+import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter";
 import { StringInputPane } from "./Panes/StringInputPane";
-import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
-import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
 import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
+import { TabsManager } from "./Tabs/TabsManager";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
 import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
-import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
+import { ReactAdapter } from "../Bindings/ReactBindingHandler";
-import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
+import { toRawContentUri, fromContentUri } from "../Utils/GitHubUtils";
-import TabsBase from "./Tabs/TabsBase";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
-import { TabsManager } from "./Tabs/TabsManager";
-import TerminalTab from "./Tabs/TerminalTab";
-import Database from "./Tree/Database";
-import ResourceTokenCollection from "./Tree/ResourceTokenCollection";
-import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
-import { ResourceTreeAdapterForResourceToken } from "./Tree/ResourceTreeAdapterForResourceToken";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
+import TabsBase from "./Tabs/TabsBase";
+import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
+import { updateUserContext, userContext } from "../UserContext";
+import { stringToBlob } from "../Utils/BlobUtils";
+import { IChoiceGroupProps } from "office-ui-fabric-react";
+import { getErrorMessage, handleError, getErrorStack } from "../Common/ErrorHandlingUtils";
+import { SubscriptionType } from "../Contracts/SubscriptionType";
+import { appInsights } from "../Shared/appInsights";
+import { SelfServeLoadingComponentAdapter } from "../SelfServe/SelfServeLoadingComponentAdapter";
+import { SelfServeType } from "../SelfServe/SelfServeUtils";
+import { SelfServeComponentAdapter } from "../SelfServe/SelfServeComponentAdapter";
+import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
+import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 // Hold a reference to ComponentRegisterer to prevent transpiler to ignore import
@@ -113,57 +118,24 @@ export default class Explorer {
   public hasWriteAccess: ko.Observable<boolean>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
-  /**
-   * @deprecated
-   * Use userContext.databaseAccount instead
-   * */
   public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
-  /**
-   * @deprecated
-   * Use userContext.subscriptionType instead
-   * */
   public subscriptionType: ko.Observable<SubscriptionType>;
-  /**
-   * @deprecated
-   * Use userContext.apiType instead
-   * */
   public defaultExperience: ko.Observable<string>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "SQL"
-   * */
   public isPreferredApiDocumentDB: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Cassandra"
-   * */
   public isPreferredApiCassandra: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
-   * */
   public isPreferredApiMongoDB: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Gremlin"
-   * */
   public isPreferredApiGraph: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Tables"
-   * */
   public isPreferredApiTable: ko.Computed<boolean>;
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
-   * */
   public isEnableMongoCapabilityPresent: ko.Computed<boolean>;
   public isServerlessEnabled: ko.Computed<boolean>;
   public isAccountReady: ko.Observable<boolean>;
+  public selfServeType: ko.Observable<SelfServeType>;
   public canSaveQueries: ko.Computed<boolean>;
   public features: ko.Observable<any>;
+  public serverId: ko.Observable<string>;
+  public isTryCosmosDBSubscription: ko.Observable<boolean>;
   public queriesClient: QueriesClient;
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
@@ -185,15 +157,18 @@ export default class Explorer {
   public selectedCollectionId: ko.Computed<string>;
   public isLeftPaneExpanded: ko.Observable<boolean>;
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
+  public isRefreshingExplorer: ko.Observable<boolean>;
   private resourceTree: ResourceTreeAdapter;
+  private selfServeComponentAdapter: SelfServeComponentAdapter;
 
   // Resource Token
   public resourceTokenDatabaseId: ko.Observable<string>;
   public resourceTokenCollectionId: ko.Observable<string>;
   public resourceTokenCollection: ko.Observable<ViewModels.CollectionBase>;
   public resourceTokenPartitionKey: ko.Observable<string>;
+  public isAuthWithResourceToken: ko.Observable<boolean>;
   public isResourceTokenCollectionNodeSelected: ko.Computed<boolean>;
-  public resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
+  private resourceTreeForResourceToken: ResourceTreeAdapterForResourceToken;
 
   // Tabs
   public isTabsContentExpanded: ko.Observable<boolean>;
@@ -268,6 +243,7 @@ export default class Explorer {
 
   // React adapters
   private commandBarComponentAdapter: CommandBarComponentAdapter;
+  private selfServeLoadingComponentAdapter: SelfServeLoadingComponentAdapter;
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
@@ -294,7 +270,24 @@ export default class Explorer {
 
     this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
     this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
+    let firstInitialization = true;
+    this.isRefreshingExplorer = ko.observable<boolean>(true);
+    this.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
+      if (!isRefreshing && firstInitialization) {
+        // set focus on first element
+        firstInitialization = false;
+        try {
+          document.getElementById("createNewContainerCommandButton").parentElement.parentElement.focus();
+        } catch (e) {
+          Logger.logWarning(
+            "getElementById('createNewContainerCommandButton') failed to find element",
+            "Explorer/this.isRefreshingExplorer.subscribe"
+          );
+        }
+      }
+    });
     this.isAccountReady = ko.observable<boolean>(false);
+    this.selfServeType = ko.observable<SelfServeType>(undefined);
     this._isInitializingNotebooks = false;
     this.arcadiaToken = ko.observable<string>();
     this.arcadiaToken.subscribe((token: string) => {
@@ -314,9 +307,7 @@ export default class Explorer {
     this.isSynapseLinkUpdating = ko.observable<boolean>(false);
     this.isAccountReady.subscribe(async (isAccountReady: boolean) => {
       if (isAccountReady) {
-        userContext.authType === AuthType.ResourceToken
+        this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases(true);
-          ? this.refreshDatabaseForResourceToken()
-          : this.refreshAllDatabases(true);
         RouteHandler.getInstance().initHandler();
         this.notebookWorkspaceManager = new NotebookWorkspaceManager();
         this.arcadiaWorkspaces = ko.observableArray();
@@ -327,7 +318,7 @@ export default class Explorer {
         Promise.all([this._refreshNotebooksEnabledStateForAccount(), this._refreshSparkEnabledStateForAccount()]).then(
           async () => {
             this.isNotebookEnabled(
-              userContext.authType !== AuthType.ResourceToken &&
+              !this.isAuthWithResourceToken() &&
                 ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
                   this.isFeatureEnabled(Constants.Features.enableNotebooks))
             );
@@ -376,12 +367,15 @@ export default class Explorer {
     this.memoryUsageInfo = ko.observable<DataModels.MemoryUsageInfo>();
 
     this.features = ko.observable();
+    this.serverId = ko.observable<string>();
     this.queriesClient = new QueriesClient(this);
+    this.isTryCosmosDBSubscription = ko.observable<boolean>(false);
 
     this.resourceTokenDatabaseId = ko.observable<string>();
     this.resourceTokenCollectionId = ko.observable<string>();
     this.resourceTokenCollection = ko.observable<ViewModels.CollectionBase>();
     this.resourceTokenPartitionKey = ko.observable<string>();
+    this.isAuthWithResourceToken = ko.observable<boolean>(false);
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isMongoIndexingEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
@@ -445,7 +439,6 @@ export default class Explorer {
         databaseAccount
       );
       this.defaultExperience(defaultExperience);
-      // TODO. Remove this entirely
       updateUserContext({
         defaultExperience: DefaultExperienceUtility.mapDefaultExperienceStringToEnum(defaultExperience),
       });
@@ -669,6 +662,7 @@ export default class Explorer {
     });
 
     this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
+    this.selfServeComponentAdapter = new SelfServeComponentAdapter(this);
 
     this.loadQueryPane = new LoadQueryPane({
       id: "loadquerypane",
@@ -751,90 +745,99 @@ export default class Explorer {
       $(document.body).click(() => $(".commandDropdownContainer").hide());
     });
 
-    switch (userContext.apiType) {
+    // TODO move this to API customization class
-      case "SQL":
+    this.defaultExperience.subscribe((defaultExperience) => {
-        this.addCollectionText("New Container");
+      const defaultExperienceNormalizedString = (
-        this.addDatabaseText("New Database");
+        defaultExperience || Constants.DefaultAccountExperience.Default
-        this.collectionTitle("SQL API");
+      ).toLowerCase();
-        this.collectionTreeNodeAltText("Container");
+
-        this.deleteCollectionText("Delete Container");
+      switch (defaultExperienceNormalizedString) {
-        this.deleteDatabaseText("Delete Database");
+        case Constants.DefaultAccountExperience.DocumentDB.toLowerCase():
-        this.addCollectionPane.title("Add Container");
+          this.addCollectionText("New Container");
-        this.addCollectionPane.collectionIdTitle("Container id");
+          this.addDatabaseText("New Database");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
+          this.collectionTitle("SQL API");
-          "Provision dedicated throughput for this container"
+          this.collectionTreeNodeAltText("Container");
-        );
+          this.deleteCollectionText("Delete Container");
-        this.deleteCollectionConfirmationPane.title("Delete Container");
+          this.deleteDatabaseText("Delete Database");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
+          this.addCollectionPane.title("Add Container");
-        this.refreshTreeTitle("Refresh containers");
+          this.addCollectionPane.collectionIdTitle("Container id");
-        break;
+          this.addCollectionPane.collectionWithThroughputInSharedTitle(
-      case "Mongo":
+            "Provision dedicated throughput for this container"
-        this.addCollectionText("New Collection");
+          );
-        this.addDatabaseText("New Database");
+          this.deleteCollectionConfirmationPane.title("Delete Container");
-        this.collectionTitle("Collections");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the container id");
-        this.collectionTreeNodeAltText("Collection");
+          this.refreshTreeTitle("Refresh containers");
-        this.deleteCollectionText("Delete Collection");
+          break;
-        this.deleteDatabaseText("Delete Database");
+        case Constants.DefaultAccountExperience.MongoDB.toLowerCase():
-        this.addCollectionPane.title("Add Collection");
+        case Constants.DefaultAccountExperience.ApiForMongoDB.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Collection id");
+          this.addCollectionText("New Collection");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle(
+          this.addDatabaseText("New Database");
-          "Provision dedicated throughput for this collection"
+          this.collectionTitle("Collections");
-        );
+          this.collectionTreeNodeAltText("Collection");
-        this.refreshTreeTitle("Refresh collections");
+          this.deleteCollectionText("Delete Collection");
-        break;
+          this.deleteDatabaseText("Delete Database");
-      case "Gremlin":
+          this.addCollectionPane.title("Add Collection");
-        this.addCollectionText("New Graph");
+          this.addCollectionPane.collectionIdTitle("Collection id");
-        this.addDatabaseText("New Database");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle(
-        this.deleteCollectionText("Delete Graph");
+            "Provision dedicated throughput for this collection"
-        this.deleteDatabaseText("Delete Database");
+          );
-        this.collectionTitle("Gremlin API");
+          this.refreshTreeTitle("Refresh collections");
-        this.collectionTreeNodeAltText("Graph");
+          break;
-        this.addCollectionPane.title("Add Graph");
+        case Constants.DefaultAccountExperience.Graph.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Graph id");
+          this.addCollectionText("New Graph");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
+          this.addDatabaseText("New Database");
-        this.deleteCollectionConfirmationPane.title("Delete Graph");
+          this.deleteCollectionText("Delete Graph");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
+          this.deleteDatabaseText("Delete Database");
-        this.refreshTreeTitle("Refresh graphs");
+          this.collectionTitle("Gremlin API");
-        break;
+          this.collectionTreeNodeAltText("Graph");
-      case "Tables":
+          this.addCollectionPane.title("Add Graph");
-        this.addCollectionText("New Table");
+          this.addCollectionPane.collectionIdTitle("Graph id");
-        this.addDatabaseText("New Database");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this graph");
-        this.deleteCollectionText("Delete Table");
+          this.deleteCollectionConfirmationPane.title("Delete Graph");
-        this.deleteDatabaseText("Delete Database");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the graph id");
-        this.collectionTitle("Azure Table API");
+          this.refreshTreeTitle("Refresh graphs");
-        this.collectionTreeNodeAltText("Table");
+          break;
-        this.addCollectionPane.title("Add Table");
+        case Constants.DefaultAccountExperience.Table.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Table id");
+          this.addCollectionText("New Table");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
+          this.addDatabaseText("New Database");
-        this.refreshTreeTitle("Refresh tables");
+          this.deleteCollectionText("Delete Table");
-        this.addTableEntityPane.title("Add Table Entity");
+          this.deleteDatabaseText("Delete Database");
-        this.editTableEntityPane.title("Edit Table Entity");
+          this.collectionTitle("Azure Table API");
-        this.deleteCollectionConfirmationPane.title("Delete Table");
+          this.collectionTreeNodeAltText("Table");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+          this.addCollectionPane.title("Add Table");
-        this.tableDataClient = new TablesAPIDataClient();
+          this.addCollectionPane.collectionIdTitle("Table id");
-        break;
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
-      case "Cassandra":
+          this.refreshTreeTitle("Refresh tables");
-        this.addCollectionText("New Table");
+          this.addTableEntityPane.title("Add Table Entity");
-        this.addDatabaseText("New Keyspace");
+          this.editTableEntityPane.title("Edit Table Entity");
-        this.deleteCollectionText("Delete Table");
+          this.deleteCollectionConfirmationPane.title("Delete Table");
-        this.deleteDatabaseText("Delete Keyspace");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-        this.collectionTitle("Cassandra API");
+          this.tableDataClient = new TablesAPIDataClient();
-        this.collectionTreeNodeAltText("Table");
+          break;
-        this.addCollectionPane.title("Add Table");
+        case Constants.DefaultAccountExperience.Cassandra.toLowerCase():
-        this.addCollectionPane.collectionIdTitle("Table id");
+          this.addCollectionText("New Table");
-        this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
+          this.addDatabaseText("New Keyspace");
-        this.refreshTreeTitle("Refresh tables");
+          this.deleteCollectionText("Delete Table");
-        this.addTableEntityPane.title("Add Table Row");
+          this.deleteDatabaseText("Delete Keyspace");
-        this.editTableEntityPane.title("Edit Table Row");
+          this.collectionTitle("Cassandra API");
-        this.deleteCollectionConfirmationPane.title("Delete Table");
+          this.collectionTreeNodeAltText("Table");
-        this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+          this.addCollectionPane.title("Add Table");
-        this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
+          this.addCollectionPane.collectionIdTitle("Table id");
-        this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
+          this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
-        this.tableDataClient = new CassandraAPIDataClient();
+          this.refreshTreeTitle("Refresh tables");
-        break;
+          this.addTableEntityPane.title("Add Table Row");
-    }
+          this.editTableEntityPane.title("Edit Table Row");
+          this.deleteCollectionConfirmationPane.title("Delete Table");
+          this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
+          this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
+          this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
+          this.tableDataClient = new CassandraAPIDataClient();
+          break;
+      }
+    });
 
     this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
+    this.selfServeLoadingComponentAdapter = new SelfServeLoadingComponentAdapter();
 
     this._initSettings();
 
@@ -1062,6 +1065,7 @@ export default class Explorer {
   }
 
   public refreshAllDatabases(isInitialLoad?: boolean): Q.Promise<any> {
+    this.isRefreshingExplorer(true);
     const startKey: number = TelemetryProcessor.traceStart(Action.LoadDatabases, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
@@ -1091,19 +1095,22 @@ export default class Explorer {
         this.deleteDatabasesFromList(deltaDatabases.toDelete);
         this.selectedNode(currentlySelectedNode);
         this._setLoadingStatusText("Fetching containers...");
-        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
+        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
-          () => {
+          .then(
-            this._setLoadingStatusText("Successfully fetched containers.");
+            () => {
-            deferred.resolve();
+              this._setLoadingStatusText("Successfully fetched containers.");
-          },
+              deferred.resolve();
-          (reason) => {
+            },
-            this._setLoadingStatusText("Failed to fetch containers.");
+            (reason) => {
-            deferred.reject(reason);
+              this._setLoadingStatusText("Failed to fetch containers.");
-          }
+              deferred.reject(reason);
-        );
+            }
+          )
+          .finally(() => this.isRefreshingExplorer(false));
       },
       (error) => {
         this._setLoadingStatusText("Failed to fetch databases.");
+        this.isRefreshingExplorer(false);
         deferred.reject(error);
         const errorMessage = getErrorMessage(error);
         TelemetryProcessor.traceFailure(
@@ -1163,9 +1170,8 @@ export default class Explorer {
       description: "Refresh button clicked",
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
-    userContext.authType === AuthType.ResourceToken
+    this.isRefreshingExplorer(true);
-      ? this.refreshDatabaseForResourceToken()
+    this.isAuthWithResourceToken() ? this.refreshDatabaseForResourceToken() : this.refreshAllDatabases();
-      : this.refreshAllDatabases();
     this.refreshNotebookList();
   };
 
@@ -1401,6 +1407,20 @@ export default class Explorer {
     return false;
   }
 
+  public setSelfServeType(inputs: ViewModels.DataExplorerInputsFrame): void {
+    const selfServeFeature = inputs.features[Constants.Features.selfServeType];
+    if (selfServeFeature) {
+      // self serve type received from query string
+      const selfServeType = SelfServeType[selfServeFeature?.toLowerCase() as keyof typeof SelfServeType];
+      this.selfServeType(selfServeType ? selfServeType : SelfServeType.invalid);
+    } else if (inputs.selfServeType) {
+      // self serve type received from portal
+      this.selfServeType(inputs.selfServeType);
+    } else {
+      this.selfServeType(SelfServeType.none);
+    }
+  }
+
   public configure(inputs: ViewModels.DataExplorerInputsFrame): void {
     if (inputs != null) {
       // In development mode, save the iframe message from the portal in session storage.
@@ -1409,18 +1429,39 @@ export default class Explorer {
         sessionStorage.setItem("portalDataExplorerInitMessage", JSON.stringify(inputs));
       }
 
+      const authorizationToken = inputs.authorizationToken || "";
+      const masterKey = inputs.masterKey || "";
       const databaseAccount = inputs.databaseAccount || null;
       if (inputs.defaultCollectionThroughput) {
         this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
       }
       this.features(inputs.features);
+      this.serverId(inputs.serverId ?? Constants.ServerIds.productionPortal);
       this.databaseAccount(databaseAccount);
       this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
       this.hasWriteAccess(inputs.hasWriteAccess ?? true);
       if (inputs.addCollectionDefaultFlight) {
         this.flight(inputs.addCollectionDefaultFlight);
       }
+      this.isTryCosmosDBSubscription(inputs.isTryCosmosDBSubscription ?? false);
+      this.isAuthWithResourceToken(inputs.isAuthWithresourceToken ?? false);
       this.setFeatureFlagsFromFlights(inputs.flights);
+      this.setSelfServeType(inputs);
+
+      updateConfigContext({
+        BACKEND_ENDPOINT: inputs.extensionEndpoint || configContext.BACKEND_ENDPOINT,
+        ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
+      });
+
+      updateUserContext({
+        authorizationToken,
+        masterKey,
+        databaseAccount,
+        resourceGroup: inputs.resourceGroup,
+        subscriptionId: inputs.subscriptionId,
+        subscriptionType: inputs.subscriptionType,
+        quotaId: inputs.quotaId,
+      });
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
         {
@@ -1500,9 +1541,9 @@ export default class Explorer {
 
   public isRunningOnNationalCloud(): boolean {
     return (
-      userContext.portalEnv === "blackforest" ||
+      this.serverId() === Constants.ServerIds.blackforest ||
-      userContext.portalEnv === "fairfax" ||
+      this.serverId() === Constants.ServerIds.fairfax ||
-      userContext.portalEnv === "mooncake"
+      this.serverId() === Constants.ServerIds.mooncake
     );
   }
 
@@ -2367,12 +2408,10 @@ export default class Explorer {
   public onNewCollectionClicked(): void {
     if (this.isPreferredApiCassandra()) {
       this.cassandraAddCollectionPane.open();
-    } else if (this.isFeatureEnabled(Constants.Features.enableReactPane)) {
-      this.openAddCollectionPanel();
     } else {
       this.addCollectionPane.open(this.selectedDatabaseId());
-      document.getElementById("linkAddCollection").focus();
     }
+    document.getElementById("linkAddCollection").focus();
   }
 
   private refreshCommandBarButtons(): void {
@@ -2512,16 +2551,4 @@ export default class Explorer {
           />
         );
   }
-
-  public async openAddCollectionPanel(): Promise<void> {
-    await this.loadDatabaseOffers();
-    this.openSidePanel(
-      "New Collection",
-      <AddCollectionPanel
-        explorer={this}
-        closePanel={() => this.closeSidePanel()}
-        openNotificationConsole={() => this.expandConsole()}
-      />
-    );
-  }
 }

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

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

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -1,38 +1,37 @@
-import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
-import AddCollectionIcon from "../../../../images/AddCollection.svg";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { Areas } from "../../../Common/Constants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+
 import AddDatabaseIcon from "../../../../images/AddDatabase.svg";
+import AddCollectionIcon from "../../../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../../../images/AddSqlQuery_16x16.svg";
-import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../../../images/AddTrigger.svg";
-import AddUdfIcon from "../../../../images/AddUdf.svg";
 import BrowseQueriesIcon from "../../../../images/BrowseQuery.svg";
+import * as Constants from "../../../Common/Constants";
+import OpenInTabIcon from "../../../../images/open-in-tab.svg";
+import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
 import CosmosTerminalIcon from "../../../../images/Cosmos-Terminal.svg";
-import FeedbackIcon from "../../../../images/Feedback-Command.svg";
-import GitHubIcon from "../../../../images/github.svg";
 import HostedTerminalIcon from "../../../../images/Hosted-Terminal.svg";
+import AddStoredProcedureIcon from "../../../../images/AddStoredProcedure.svg";
+import SettingsIcon from "../../../../images/settings_15x15.svg";
+import AddUdfIcon from "../../../../images/AddUdf.svg";
+import AddTriggerIcon from "../../../../images/AddTrigger.svg";
+import FeedbackIcon from "../../../../images/Feedback-Command.svg";
 import EnableNotebooksIcon from "../../../../images/notebook/Notebook-enable.svg";
 import NewNotebookIcon from "../../../../images/notebook/Notebook-new.svg";
 import ResetWorkspaceIcon from "../../../../images/notebook/Notebook-reset-workspace.svg";
-import OpenInTabIcon from "../../../../images/open-in-tab.svg";
+import GitHubIcon from "../../../../images/github.svg";
-import OpenQueryFromDiskIcon from "../../../../images/OpenQueryFromDisk.svg";
-import SettingsIcon from "../../../../images/settings_15x15.svg";
 import SynapseIcon from "../../../../images/synapse-link.svg";
-import { AuthType } from "../../../AuthType";
-import * as Constants from "../../../Common/Constants";
-import { Areas } from "../../../Common/Constants";
 import { configContext, Platform } from "../../../ConfigContext";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as React from "react";
 import { OpenFullScreen } from "../../OpenFullScreen";
 
 let counter = 0;
 
 export function createStaticCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  if (userContext.authType === AuthType.ResourceToken) {
+  if (container.isAuthWithResourceToken()) {
     return createStaticCommandBarButtonsForResourceToken(container);
   }
 

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

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

src/Explorer/Menus/NavBar/ControlBarComponent.tsx

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

src/Explorer/MostRecentActivity/MostRecentActivity.test.ts

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

src/Explorer/MostRecentActivity/MostRecentActivity.ts

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

src/Explorer/Notebook/NTeractUtil.ts

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

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

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

src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx

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

src/Explorer/Notebook/NotebookComponent/epics.test.ts

@@ -8,7 +8,7 @@ import * as sinon from "sinon";
 
 import { CdbAppState, makeCdbRecord } from "./types";
 import { launchWebSocketKernelEpic } from "./epics";
-import { NotebookUtil } from "../NotebookUtil";
+import * as NotebookUtil from "../NotebookUtil";
 
 import { sessions } from "rx-jupyter";
 

src/Explorer/Notebook/NotebookComponent/epics.ts

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

src/Explorer/Notebook/NotebookContentClient.ts

@@ -2,7 +2,7 @@ import * as DataModels from "../../Contracts/DataModels";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
 import * as StringUtils from "../../Utils/StringUtils";
 import { FileSystemUtil } from "./FileSystemUtil";
-import { NotebookUtil } from "./NotebookUtil";
+import * as NotebookUtil from "./NotebookUtil";
 
 import { ServerConfig, IContent, IContentProvider, FileType, IEmptyContent } from "@nteract/core";
 import { AjaxResponse } from "rxjs/ajax";

src/Explorer/Notebook/NotebookUtil.test.ts

@@ -1,4 +1,4 @@
-import { NotebookUtil } from "./NotebookUtil";
+import * as NotebookUtil from "./NotebookUtil";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import {
   ImmutableNotebook,

src/Explorer/Notebook/NotebookUtil.ts

@@ -7,157 +7,155 @@ import * as GitHubUtils from "../../Utils/GitHubUtils";
 // Must match rx-jupyter' FileType
 export type FileType = "directory" | "file" | "notebook";
 // Utilities for notebooks
-export class NotebookUtil {
+/**
-  /**
+ * It's a notebook file if the filename ends with .ipynb.
-   * It's a notebook file if the filename ends with .ipynb.
+ */
-   */
+export function isNotebookFile(notebookPath: string): boolean {
-  public static isNotebookFile(notebookPath: string): boolean {
+  const fileName = getName(notebookPath);
-    const fileName = NotebookUtil.getName(notebookPath);
+  return !!fileName && StringUtils.endsWith(fileName, ".ipynb");
-    return !!fileName && StringUtils.endsWith(fileName, ".ipynb");
+}
-  }
 
-  /**
+/**
-   * Note: this does not connect the item to a parent in a tree.
+ * Note: this does not connect the item to a parent in a tree.
-   * @param name
+ * @param name
-   * @param path
+ * @param path
-   */
+ */
-  public static createNotebookContentItem(name: string, path: string, type: FileType): NotebookContentItem {
+export function createNotebookContentItem(name: string, path: string, type: FileType): NotebookContentItem {
-    return {
+  return {
-      name,
+    name,
-      path,
+    path,
-      type: NotebookUtil.getType(type),
+    type: getType(type),
-      timestamp: NotebookUtil.getCurrentTimestamp(),
+    timestamp: getCurrentTimestamp(),
-    };
+  };
-  }
+}
 
-  /**
+/**
-   * Convert rx-jupyter type to our type
+ * Convert rx-jupyter type to our type
-   * @param type
+ * @param type
-   */
+ */
-  public static getType(type: FileType): NotebookContentItemType {
+export function getType(type: FileType): NotebookContentItemType {
-    switch (type) {
+  switch (type) {
-      case "directory":
+    case "directory":
-        return NotebookContentItemType.Directory;
+      return NotebookContentItemType.Directory;
-      case "notebook":
+    case "notebook":
-        return NotebookContentItemType.Notebook;
+      return NotebookContentItemType.Notebook;
-      case "file":
+    case "file":
-        return NotebookContentItemType.File;
+      return NotebookContentItemType.File;
-      default:
+    default:
-        throw new Error(`Unknown file type: ${type}`);
+      throw new Error(`Unknown file type: ${type}`);
-    }
-  }
-
-  public static getCurrentTimestamp(): number {
-    return new Date().getTime();
-  }
-
-  /**
-   * Override from kernel-lifecycle.ts to improve kernel selection:
-   * Only return the kernel name persisted in the notebook
-   *
-   * @param filepath
-   * @param notebook
-   */
-  public static extractNewKernel(filepath: string | null, notebook: ImmutableNotebook) {
-    const cwd = (filepath && path.dirname(filepath)) || "/";
-
-    const kernelSpecName =
-      notebook.getIn(["metadata", "kernelspec", "name"]) || notebook.getIn(["metadata", "language_info", "name"]);
-
-    return {
-      cwd,
-      kernelSpecName,
-    };
-  }
-
-  public static getFilePath(path: string, fileName: string): string {
-    const contentInfo = GitHubUtils.fromContentUri(path);
-    if (contentInfo) {
-      let path = fileName;
-      if (contentInfo.path) {
-        path = `${contentInfo.path}/${path}`;
-      }
-      return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, path);
-    }
-
-    return `${path}/${fileName}`;
-  }
-
-  public static getParentPath(filepath: string): undefined | string {
-    const basename = NotebookUtil.getName(filepath);
-    if (basename) {
-      const contentInfo = GitHubUtils.fromContentUri(filepath);
-      if (contentInfo) {
-        const parentPath = contentInfo.path.split(basename).shift();
-        if (parentPath === undefined) {
-          return undefined;
-        }
-
-        return GitHubUtils.toContentUri(
-          contentInfo.owner,
-          contentInfo.repo,
-          contentInfo.branch,
-          parentPath.replace(/\/$/, "") // no trailling slash
-        );
-      }
-
-      const parentPath = filepath.split(basename).shift();
-      if (parentPath) {
-        return parentPath.replace(/\/$/, ""); // no trailling slash
-      }
-    }
-
-    return undefined;
-  }
-
-  public static getName(path: string): undefined | string {
-    let relativePath: string = path;
-    const contentInfo = GitHubUtils.fromContentUri(path);
-    if (contentInfo) {
-      relativePath = contentInfo.path;
-    }
-
-    return relativePath.split("/").pop();
-  }
-
-  public static replaceName(path: string, newName: string): string {
-    const contentInfo = GitHubUtils.fromContentUri(path);
-    if (contentInfo) {
-      const contentName = contentInfo.path.split("/").pop();
-      if (!contentName) {
-        throw new Error(`Failed to extract name from github path ${contentInfo.path}`);
-      }
-
-      const basePath = contentInfo.path.split(contentName).shift();
-      return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, `${basePath}${newName}`);
-    }
-
-    const contentName = path.split("/").pop();
-    if (!contentName) {
-      throw new Error(`Failed to extract name from path ${path}`);
-    }
-
-    const basePath = path.split(contentName).shift();
-    return `${basePath}${newName}`;
-  }
-
-  public static findFirstCodeCellWithDisplay(notebookObject: ImmutableNotebook): number {
-    let codeCellIndex = 0;
-    for (let i = 0; i < notebookObject.cellOrder.size; i++) {
-      const cellId = notebookObject.cellOrder.get(i);
-      if (cellId) {
-        const cell = notebookObject.cellMap.get(cellId);
-        if (cell?.cell_type === "code") {
-          const displayOutput = (cell as ImmutableCodeCell)?.outputs?.find(
-            (output) => output.output_type === "display_data" || output.output_type === "execute_result"
-          );
-          if (displayOutput) {
-            return codeCellIndex;
-          }
-          codeCellIndex++;
-        }
-      }
-    }
-    throw new Error("Output does not exist for any of the cells.");
   }
 }
+
+export function getCurrentTimestamp(): number {
+  return new Date().getTime();
+}
+
+/**
+ * Override from kernel-lifecycle.ts to improve kernel selection:
+ * Only return the kernel name persisted in the notebook
+ *
+ * @param filepath
+ * @param notebook
+ */
+export function extractNewKernel(filepath: string | null, notebook: ImmutableNotebook) {
+  const cwd = (filepath && path.dirname(filepath)) || "/";
+
+  const kernelSpecName =
+    notebook.getIn(["metadata", "kernelspec", "name"]) || notebook.getIn(["metadata", "language_info", "name"]);
+
+  return {
+    cwd,
+    kernelSpecName,
+  };
+}
+
+export function getFilePath(path: string, fileName: string): string {
+  const contentInfo = GitHubUtils.fromContentUri(path);
+  if (contentInfo) {
+    let path = fileName;
+    if (contentInfo.path) {
+      path = `${contentInfo.path}/${path}`;
+    }
+    return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, path);
+  }
+
+  return `${path}/${fileName}`;
+}
+
+export function getParentPath(filepath: string): undefined | string {
+  const basename = getName(filepath);
+  if (basename) {
+    const contentInfo = GitHubUtils.fromContentUri(filepath);
+    if (contentInfo) {
+      const parentPath = contentInfo.path.split(basename).shift();
+      if (parentPath === undefined) {
+        return undefined;
+      }
+
+      return GitHubUtils.toContentUri(
+        contentInfo.owner,
+        contentInfo.repo,
+        contentInfo.branch,
+        parentPath.replace(/\/$/, "") // no trailling slash
+      );
+    }
+
+    const parentPath = filepath.split(basename).shift();
+    if (parentPath) {
+      return parentPath.replace(/\/$/, ""); // no trailling slash
+    }
+  }
+
+  return undefined;
+}
+
+export function getName(path: string): undefined | string {
+  let relativePath: string = path;
+  const contentInfo = GitHubUtils.fromContentUri(path);
+  if (contentInfo) {
+    relativePath = contentInfo.path;
+  }
+
+  return relativePath.split("/").pop();
+}
+
+export function replaceName(path: string, newName: string): string {
+  const contentInfo = GitHubUtils.fromContentUri(path);
+  if (contentInfo) {
+    const contentName = contentInfo.path.split("/").pop();
+    if (!contentName) {
+      throw new Error(`Failed to extract name from github path ${contentInfo.path}`);
+    }
+
+    const basePath = contentInfo.path.split(contentName).shift();
+    return GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, `${basePath}${newName}`);
+  }
+
+  const contentName = path.split("/").pop();
+  if (!contentName) {
+    throw new Error(`Failed to extract name from path ${path}`);
+  }
+
+  const basePath = path.split(contentName).shift();
+  return `${basePath}${newName}`;
+}
+
+export function findFirstCodeCellWithDisplay(notebookObject: ImmutableNotebook): number {
+  let codeCellIndex = 0;
+  for (let i = 0; i < notebookObject.cellOrder.size; i++) {
+    const cellId = notebookObject.cellOrder.get(i);
+    if (cellId) {
+      const cell = notebookObject.cellMap.get(cellId);
+      if (cell?.cell_type === "code") {
+        const displayOutput = (cell as ImmutableCodeCell)?.outputs?.find(
+          (output) => output.output_type === "display_data" || output.output_type === "execute_result"
+        );
+        if (displayOutput) {
+          return codeCellIndex;
+        }
+        codeCellIndex++;
+      }
+    }
+  }
+  throw new Error("Output does not exist for any of the cells.");
+}

src/Explorer/Panes/AddCollectionPane.html

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

src/Explorer/Panes/AddCollectionPane.ts

@@ -1,22 +1,22 @@
-import * as ko from "knockout";
 import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import { createCollection } from "../../Common/dataAccess/createCollection";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as ViewModels from "../../Contracts/ViewModels";
 import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
-import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import editable from "../../Common/EditableUtility";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { configContext, Platform } from "../../ConfigContext";
 import { ContextualPaneBase } from "./ContextualPaneBase";
+import { DynamicListItem } from "../Controls/DynamicList/DynamicListComponent";
+import { createCollection } from "../../Common/dataAccess/createCollection";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { userContext } from "../../UserContext";
 
 export interface AddCollectionPaneOptions extends ViewModels.PaneOptions {
   isPreferredApiTable: ko.Computed<boolean>;
@@ -49,7 +49,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
   public throughputDatabase: ViewModels.Editable<number>;
   public isPreferredApiTable: ko.Computed<boolean>;
   public partitionKeyPlaceholder: ko.Computed<string>;
-  public isTryCosmosDBSubscription: ko.Observable<boolean>;
+  public isTryCosmosDBSubscription: ko.Computed<boolean>;
   public maxThroughputRU: ko.Observable<number>;
   public minThroughputRU: ko.Observable<number>;
   public throughputRangeText: ko.Computed<string>;
@@ -186,6 +186,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
+      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -199,28 +200,23 @@ export default class AddCollectionPane extends ContextualPaneBase {
       if (!this.isSharedAutoPilotSelected()) {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
         );
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
@@ -244,6 +240,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
+      const serverId: string = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -257,28 +254,28 @@ export default class AddCollectionPane extends ContextualPaneBase {
       if (!this.isAutoPilotSelected()) {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.throughputMultiPartition(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedSpendHtml(
           this.throughputMultiPartition(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
       } else {
         throughputSpendAckText = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.autoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
         );
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.autoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
@@ -288,7 +285,9 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return estimatedSpend;
     });
 
-    this.isTryCosmosDBSubscription = ko.observable<boolean>(userContext.isTryCosmosDBSubscription || false);
+    this.isTryCosmosDBSubscription = ko.pureComputed<boolean>(() => {
+      return (this.container && this.container.isTryCosmosDBSubscription()) || false;
+    });
 
     this.isTryCosmosDBSubscription.subscribe((isTryCosmosDB: boolean) => {
       if (!!isTryCosmosDB) {
@@ -299,7 +298,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.canRequestSupport = ko.pureComputed(() => {
       if (
         configContext.platform !== Platform.Emulator &&
-        !userContext.isTryCosmosDBSubscription &&
+        !this.container.isTryCosmosDBSubscription() &&
         configContext.platform !== Platform.Portal
       ) {
         const offerThroughput: number = this._getThroughput();
@@ -490,7 +489,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     this.upsellMessage = ko.pureComputed<string>(() => {
       return PricingUtils.getUpsellMessage(
-        userContext.portalEnv,
+        this.container.serverId(),
         this.isFreeTierAccount(),
         this.container.isFirstResourceCreated(),
         this.container.defaultExperience(),
@@ -750,16 +749,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return undefined;
     }
 
-    // return undefined if autopilot is selected for the new database/collection
+    if (this.isAutoPilotSelected()) {
-    if (this.databaseCreateNew()) {
+      return undefined;
-      // database is shared and autopilot is sleected for the database
+    }
-      if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
+
-        return undefined;
+    if (this.databaseCreateNewShared() && this.isSharedAutoPilotSelected()) {
-      }
+      return undefined;
-      // database is not shared and autopilot is selected for the collection
-      if (!this.databaseCreateNewShared() && this.isAutoPilotSelected()) {
-        return undefined;
-      }
     }
 
     return this._getThroughput();

src/Explorer/Panes/AddDatabasePane.html

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

src/Explorer/Panes/AddDatabasePane.ts

@@ -1,19 +1,19 @@
-import * as ko from "knockout";
-import * as Constants from "../../Common/Constants";
-import { createDatabase } from "../../Common/dataAccess/createDatabase";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import editable from "../../Common/EditableUtility";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { ContextualPaneBase } from "./ContextualPaneBase";
+import { createDatabase } from "../../Common/dataAccess/createDatabase";
+import { configContext, Platform } from "../../ConfigContext";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { userContext } from "../../UserContext";
 
 export default class AddDatabasePane extends ContextualPaneBase {
   public defaultExperience: ko.Computed<string>;
@@ -122,6 +122,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
         return "";
       }
 
+      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -133,15 +134,10 @@ export default class AddDatabasePane extends ContextualPaneBase {
       let estimatedSpendAcknowledge: string;
       let estimatedSpend: string;
       if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
         estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -149,13 +145,13 @@ export default class AddDatabasePane extends ContextualPaneBase {
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.maxAutoPilotThroughputSet(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
         estimatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.maxAutoPilotThroughputSet(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -169,7 +165,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
     this.canRequestSupport = ko.pureComputed(() => {
       if (
         configContext.platform !== Platform.Emulator &&
-        !userContext.isTryCosmosDBSubscription &&
+        !this.container.isTryCosmosDBSubscription() &&
         configContext.platform !== Platform.Portal
       ) {
         const offerThroughput: number = this.throughput();
@@ -243,7 +239,7 @@ export default class AddDatabasePane extends ContextualPaneBase {
 
     this.upsellMessage = ko.pureComputed<string>(() => {
       return PricingUtils.getUpsellMessage(
-        userContext.portalEnv,
+        this.container.serverId(),
         this.isFreeTierAccount(),
         this.container.isFirstResourceCreated(),
         this.container.defaultExperience(),

src/Explorer/Panes/CassandraAddCollectionPane.html

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

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -1,21 +1,21 @@
-import * as ko from "knockout";
 import * as _ from "underscore";
-import * as Constants from "../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { HashMap } from "../../Common/HashMap";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as ViewModels from "../../Contracts/ViewModels";
 import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
+import * as SharedConstants from "../../Shared/Constants";
+import * as ViewModels from "../../Contracts/ViewModels";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { CassandraAPIDataClient } from "../Tables/TableDataClient";
 import { ContextualPaneBase } from "./ContextualPaneBase";
+import { HashMap } from "../../Common/HashMap";
+import { configContext, Platform } from "../../ConfigContext";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { SubscriptionType } from "../../Contracts/SubscriptionType";
+import { userContext } from "../../UserContext";
 
 export default class CassandraAddCollectionPane extends ContextualPaneBase {
   public createTableQuery: ko.Observable<string>;
@@ -127,6 +127,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
+      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -138,15 +139,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       let estimatedSpend: string;
       let estimatedDedicatedSpendAcknowledge: string;
       if (!this.isAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, regions, multimaster);
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
         estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           offerThroughput,
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -154,13 +150,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
         estimatedDedicatedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.selectedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isAutoPilotSelected()
@@ -176,6 +172,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         return "";
       }
 
+      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -186,15 +183,10 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       let estimatedSpend: string;
       let estimatedSharedSpendAcknowledge: string;
       if (!this.isSharedAutoPilotSelected()) {
-        estimatedSpend = PricingUtils.getEstimatedSpendHtml(
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, regions, multimaster);
-          this.keyspaceThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
         estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.keyspaceThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
@@ -202,13 +194,13 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
         estimatedSharedSpendAcknowledge = PricingUtils.getEstimatedSpendAcknowledgeString(
           this.sharedAutoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster,
           this.isSharedAutoPilotSelected()
@@ -223,7 +215,7 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
     });
 
     this.canRequestSupport = ko.pureComputed(() => {
-      if (configContext.platform !== Platform.Emulator && !userContext.isTryCosmosDBSubscription) {
+      if (configContext.platform !== Platform.Emulator && !this.container.isTryCosmosDBSubscription()) {
         const offerThroughput: number = this.throughput();
         return offerThroughput <= 100000;
       }

src/Explorer/Panes/DeleteCollectionConfirmationPane.test.tsx

@@ -133,7 +133,7 @@ describe("Delete Collection Confirmation Pane", () => {
         .simulate("change", { target: { value: selectedCollectionId } });
 
       expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       wrapper.unmount();
@@ -154,7 +154,7 @@ describe("Delete Collection Confirmation Pane", () => {
         .simulate("change", { target: { value: feedbackText } });
 
       expect(wrapper.exists("#sidePanelOkButton")).toBe(true);
-      wrapper.find("#sidePanelOkButton").hostNodes().simulate("submit");
+      wrapper.find("#sidePanelOkButton").hostNodes().simulate("click");
       expect(deleteCollection).toHaveBeenCalledWith(databaseId, selectedCollectionId);
 
       const deleteFeedback = new DeleteFeedback(

src/Explorer/Panes/DeleteCollectionConfirmationPanel.tsx

@@ -1,19 +1,20 @@
-import { Text, TextField } from "office-ui-fabric-react";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import * as React from "react";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { PanelFooterComponent } from "./PanelFooterComponent";
+import { Collection } from "../../Contracts/ViewModels";
+import { Text, TextField } from "office-ui-fabric-react";
+import { userContext } from "../../UserContext";
 import { Areas } from "../../Common/Constants";
 import { deleteCollection } from "../../Common/dataAccess/deleteCollection";
-import DeleteFeedback from "../../Common/DeleteFeedback";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { Collection } from "../../Contracts/ViewModels";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import DeleteFeedback from "../../Common/DeleteFeedback";
-import { userContext } from "../../UserContext";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
+import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
-import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
+
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
 export interface DeleteCollectionConfirmationPanelProps {
   explorer: Explorer;
   closePanel: () => void;
@@ -43,8 +44,8 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
 
   render(): JSX.Element {
     return (
-      <form className="panelFormWrapper" onSubmit={this.submit.bind(this)}>
+      <div className="panelContentContainer">
-        <PanelInfoErrorComponent {...this.getPanelErrorProps()} />
+        <PanelErrorComponent {...this.getPanelErrorProps()} />
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
             <span className="mandatoryStar">* </span>
@@ -78,16 +79,18 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
             </div>
           )}
         </div>
-        <PanelFooterComponent buttonLabel="OK" />
+        <PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
-        {this.state.isExecuting && <PanelLoadingScreen />}
+        <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
-      </form>
+          <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
+        </div>
+      </div>
     );
   }
 
-  private getPanelErrorProps(): PanelInfoErrorProps {
+  private getPanelErrorProps(): PanelErrorProps {
     if (this.state.formError) {
       return {
-        messageType: "error",
+        isWarning: false,
         message: this.state.formError,
         showErrorDetails: true,
         openNotificationConsole: this.props.openNotificationConsole,
@@ -95,7 +98,7 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
     }
 
     return {
-      messageType: "warning",
+      isWarning: true,
       showErrorDetails: false,
       message:
         "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
@@ -106,10 +109,9 @@ export class DeleteCollectionConfirmationPanel extends React.Component<
     return this.props.explorer.isLastCollection() && !this.props.explorer.isSelectedDatabaseShared();
   }
 
-  public async submit(event: React.FormEvent<HTMLFormElement>): Promise<void> {
+  public async submit(): Promise<void> {
-    event.preventDefault();
-
     const collection = this.props.explorer.findSelectedCollection();
+
     if (!collection || this.inputCollectionName !== collection.id()) {
       const errorMessage = "Input collection name does not match the selected collection";
       this.setState({ formError: errorMessage });

src/Explorer/Panes/PanelComponent.less

@@ -1,58 +1,12 @@
 @import "../../../less/Common/Constants";
 
-.panelFormWrapper {
+.panelContentContainer {
   display: flex;
   flex-direction: column;
   height: 100%;
 
   .panelMainContent {
     flex-grow: 1;
-    padding: 0 34px;
-    margin: 20px 0;
-    overflow: auto;
-
-    & > * {
-      margin-bottom: @DefaultSpace;
-
-      & > * {
-        margin-bottom: @SmallSpace;
-      }
-    }
-
-    .panelInfoIcon {
-      font-size: @mediumFontSize;
-      width: @mediumFontSize;
-      margin: auto 0 auto @SmallSpace;
-      color: @InfoIconColor;
-      cursor: default;
-      vertical-align: middle;
-    }
-
-    .panelTextBold {
-      font-weight: 600;
-      line-height: 20px;
-    }
-
-    .panelTextField {
-      font-size: @mediumFontSize;
-      border: 1px solid #605e5c;
-      color: #000;
-      padding: 4px 10px;
-      width: @newCollectionPaneInputWidth;
-    }
-
-    .panelRadioBtn {
-      margin: 0;
-    }
-
-    .panelRadioBtnLabel {
-      font-size: @mediumFontSize;
-      padding: 0 @LargeSpace 0 @SmallSpace;
-    }
-
-    .collapsibleSection {
-      margin-bottom: 0;
-    }
   }
 }
 
@@ -62,30 +16,26 @@
   font-weight: 400;
 }
 
-.panelInfoErrorContainer {
+.panelWarningErrorContainer {
   background-color: @BaseLow;
   padding: @DefaultSpace;
   display: inline-flex;
-  margin: 20px 34px 0 34px;
+  margin-bottom: 24px;
-
-  i {
-    font-size: @WarningErrorIconSize;
-    width: @WarningErrorIconSize;
-    margin-left: @SmallSpace;
-  }
 
   .panelWarningIcon {
+    font-size: @WarningErrorIconSize;
+    width: @WarningErrorIconSize;
+    margin: auto 0 auto @SmallSpace;
     color: @WarningIconColor;
   }
 
   .panelErrorIcon {
+    font-size: @WarningErrorIconSize;
+    width: @WarningErrorIconSize;
+    margin: auto 0 auto @SmallSpace;
     color: @ErrorIconColor;
   }
 
-  .panelLargeInfoIcon {
-    color: @InfoIconColor;
-  }
-
   .panelWarningErrorDetailsLinkContainer {
     display: flex;
     flex-direction: column;
@@ -98,19 +48,10 @@
   }
 }
 
-.panelFooter {
+.panelFooter button {
-  padding: 20px 34px;
+  height: 30px;
-  border-top: solid 1px #bbbbbb;
-
-  & button {
-    height: 30px;
-  }
 }
 
 .deleteCollectionFeedback {
   margin-top: 12px;
 }
-
-.panelGroupSpacing > * {
-  margin-bottom: @SmallSpace;
-}

src/Explorer/Panes/PanelContainerComponent.tsx

@@ -9,30 +9,10 @@ export interface PanelContainerProps {
   closePanel: () => void;
 }
 
-export interface PanelContainerState {
+export class PanelContainerComponent extends React.Component<PanelContainerProps> {
-  height: string;
-}
-
-export class PanelContainerComponent extends React.Component<PanelContainerProps, PanelContainerState> {
   private static readonly consoleHeaderHeight = 32;
   private static readonly consoleContentHeight = 220;
 
-  constructor(props: PanelContainerProps) {
-    super(props);
-
-    this.state = {
-      height: this.getPanelHeight(),
-    };
-  }
-
-  componentDidMount(): void {
-    window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
-  }
-
-  componentWillUnmount(): void {
-    window.removeEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
-  }
-
   render(): JSX.Element {
     if (!this.props.panelContent) {
       return <></>;
@@ -50,10 +30,8 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
         headerClassName="panelHeader"
         styles={{
           navigation: { borderBottom: "1px solid #cccccc" },
-          content: { padding: 0, height: "100%" },
+          content: { padding: "24px 34px 20px 34px", height: "100%" },
           scrollableContent: { height: "100%" },
-          header: { padding: "0 0 8px 34px" },
-          commands: { marginTop: 8 },
         }}
         style={{ height: this.getPanelHeight() }}
       >

src/Explorer/Panes/PanelErrorComponent.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Icon, Text } from "office-ui-fabric-react";
+
+export interface PanelErrorProps {
+  message: string;
+  isWarning: boolean;
+  showErrorDetails: boolean;
+  openNotificationConsole?: () => void;
+}
+
+export const PanelErrorComponent: React.FunctionComponent<PanelErrorProps> = (props: PanelErrorProps): JSX.Element => (
+  <div className="panelWarningErrorContainer">
+    {props.isWarning ? (
+      <Icon iconName="WarningSolid" className="panelWarningIcon" />
+    ) : (
+      <Icon iconName="StatusErrorFull" className="panelErrorIcon" />
+    )}
+    <span className="panelWarningErrorDetailsLinkContainer">
+      <Text className="panelWarningErrorMessage" variant="small">
+        {props.message}
+      </Text>
+      {props.showErrorDetails && (
+        <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
+          More details
+        </a>
+      )}
+    </span>
+  </div>
+);

src/Explorer/Panes/PanelFooterComponent.tsx

@@ -3,12 +3,13 @@ import { PrimaryButton } from "office-ui-fabric-react";
 
 export interface PanelFooterProps {
   buttonLabel: string;
+  onOKButtonClicked: () => void;
 }
 
 export const PanelFooterComponent: React.FunctionComponent<PanelFooterProps> = (
   props: PanelFooterProps
 ): JSX.Element => (
   <div className="panelFooter">
-    <PrimaryButton type="submit" id="sidePanelOkButton" text={props.buttonLabel} />
+    <PrimaryButton id="sidePanelOkButton" text={props.buttonLabel} onClick={() => props.onOKButtonClicked()} />
   </div>
 );

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { Icon, Link, Stack, Text } from "office-ui-fabric-react";
-
-export interface PanelInfoErrorProps {
-  message: string;
-  messageType: string;
-  showErrorDetails: boolean;
-  link?: string;
-  linkText?: string;
-  openNotificationConsole?: () => void;
-}
-
-export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProps> = (
-  props: PanelInfoErrorProps
-): JSX.Element => {
-  let icon: JSX.Element;
-  if (props.messageType === "error") {
-    icon = <Icon iconName="StatusErrorFull" className="panelErrorIcon" />;
-  } else if (props.messageType === "warning") {
-    icon = <Icon iconName="WarningSolid" className="panelWarningIcon" />;
-  } else if (props.messageType === "info") {
-    icon = <Icon iconName="InfoSolid" className="panelLargeInfoIcon" />;
-  }
-
-  return (
-    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="start">
-      {icon}
-      <span className="panelWarningErrorDetailsLinkContainer">
-        <Text className="panelWarningErrorMessage" variant="small">
-          {props.message}{" "}
-          {props.link && props.linkText && (
-            <Link target="_blank" href={props.link}>
-              {props.linkText}
-            </Link>
-          )}
-        </Text>
-        {props.showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={props.openNotificationConsole}>
-            More details
-          </a>
-        )}
-      </span>
-    </Stack>
-  );
-};

src/Explorer/Panes/PanelLoadingScreen.tsx

@@ -1,8 +0,0 @@
-import React from "react";
-import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
-
-export const PanelLoadingScreen: React.FunctionComponent = () => (
-  <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
-    <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
-  </div>
-);

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

@@ -5,7 +5,7 @@ import { FileSystemUtil } from "../Notebook/FileSystemUtil";
 import "./PublishNotebookPaneComponent.less";
 import Html2Canvas from "html2canvas";
 import { ImmutableNotebook } from "@nteract/commutable/src";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
+import * as NotebookUtil from "../Notebook/NotebookUtil";
 
 export interface PublishNotebookPaneProps {
   notebookName: string;

src/Explorer/Panes/SettingsPane.ts

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

src/Explorer/Panes/__snapshots__/PanelContainerComponent.test.tsx.snap

@@ -16,15 +16,9 @@ exports[`PaneContainerComponent test should be resize if notification console is
   }
   styles={
     Object {
-      "commands": Object {
-        "marginTop": 8,
-      },
       "content": Object {
         "height": "100%",
-        "padding": 0,
+        "padding": "24px 34px 20px 34px",
-      },
-      "header": Object {
-        "padding": "0 0 8px 34px",
       },
       "navigation": Object {
         "borderBottom": "1px solid #cccccc",
@@ -58,15 +52,9 @@ exports[`PaneContainerComponent test should render with panel content and header
   }
   styles={
     Object {
-      "commands": Object {
-        "marginTop": 8,
-      },
       "content": Object {
         "height": "100%",
-        "padding": 0,
+        "padding": "24px 34px 20px 34px",
-      },
-      "header": Object {
-        "padding": "0 0 8px 34px",
       },
       "navigation": Object {
         "borderBottom": "1px solid #cccccc",

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -1,26 +1,25 @@
 /**
  * Accordion top class
  */
-import { Link } from "office-ui-fabric-react/lib/Link";
 import * as React from "react";
-import AddDatabaseIcon from "../../../images/AddDatabase.svg";
+import * as ViewModels from "../../Contracts/ViewModels";
-import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
+import * as Constants from "../../Common/Constants";
-import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
+import { Link } from "office-ui-fabric-react/lib/Link";
-import OpenQueryIcon from "../../../images/BrowseQuery.svg";
 import NewContainerIcon from "../../../images/Hero-new-container.svg";
 import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
-import SampleIcon from "../../../images/Hero-sample.svg";
+import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
-import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
+import OpenQueryIcon from "../../../images/BrowseQuery.svg";
+import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
 import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
-import CollectionIcon from "../../../images/tree-collection.svg";
+import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
-import { AuthType } from "../../AuthType";
+import AddDatabaseIcon from "../../../images/AddDatabase.svg";
-import * as Constants from "../../Common/Constants";
+import SampleIcon from "../../../images/Hero-sample.svg";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { userContext } from "../../UserContext";
-import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
 import { DataSamplesUtil } from "../DataSamples/DataSamplesUtil";
 import Explorer from "../Explorer";
-import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
+import { userContext } from "../../UserContext";
+import { FeaturePanelLauncher } from "../Controls/FeaturePanel/FeaturePanelLauncher";
+import CollectionIcon from "../../../images/tree-collection.svg";
+import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 
 export interface SplashScreenItem {
   iconSrc: string;
@@ -218,10 +217,46 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     return heroes;
   }
 
+  private getItemIcon(item: MostRecentActivity.Item): string {
+    switch (item.type) {
+      case MostRecentActivity.Type.OpenCollection:
+        return CollectionIcon;
+      case MostRecentActivity.Type.OpenNotebook:
+        return NotebookIcon;
+      default:
+        return null;
+    }
+  }
+
+  private onItemClicked(item: MostRecentActivity.Item) {
+    switch (item.type) {
+      case MostRecentActivity.Type.OpenCollection: {
+        const openCollectionitem = item.data as MostRecentActivity.OpenCollectionItem;
+        const collection = this.container.findCollection(
+          openCollectionitem.databaseId,
+          openCollectionitem.collectionId
+        );
+        if (collection) {
+          collection.openTab();
+        }
+        break;
+      }
+      case MostRecentActivity.Type.OpenNotebook: {
+        const openNotebookItem = item.data as MostRecentActivity.OpenNotebookItem;
+        const notebookItem = this.container.createNotebookContentItemFile(openNotebookItem.name, openNotebookItem.path);
+        notebookItem && this.container.openNotebook(notebookItem);
+        break;
+      }
+      default:
+        console.error("Unknown item type", item);
+        break;
+    }
+  }
+
   private createCommonTaskItems(): SplashScreenItem[] {
     const items: SplashScreenItem[] = [];
 
-    if (userContext.authType === AuthType.ResourceToken) {
+    if (this.container.isAuthWithResourceToken()) {
       return items;
     }
 
@@ -298,45 +333,23 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     return items;
   }
 
-  private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
+  private static getInfo(item: MostRecentActivity.Item): string {
-    return {
+    if (item.type === MostRecentActivity.Type.OpenNotebook) {
-      iconSrc: NotebookIcon,
+      const data = item.data as MostRecentActivity.OpenNotebookItem;
-      title: collectionId,
+      return data.path;
-      description: "Data",
+    } else {
-      onClick: () => {
+      return undefined;
-        const collection = this.container.findCollection(databaseId, collectionId);
+    }
-        collection && collection.openTab();
-      },
-    };
-  }
-
-  private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
-    return {
-      info: path,
-      iconSrc: CollectionIcon,
-      title: name,
-      description: "Notebook",
-      onClick: () => {
-        const notebookItem = this.container.createNotebookContentItemFile(name, path);
-        notebookItem && this.container.openNotebook(notebookItem);
-      },
-    };
   }
 
   private createRecentItems(): SplashScreenItem[] {
-    return MostRecentActivity.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((activity) => {
+    return MostRecentActivity.mostRecentActivity.getItems(userContext.databaseAccount?.id).map((item) => ({
-      switch (activity.type) {
+      iconSrc: this.getItemIcon(item),
-        default: {
+      title: item.title,
-          const unknownActivity: never = activity;
+      description: item.description,
-          throw new Error(`Unknown activity: ${unknownActivity}`);
+      info: SplashScreen.getInfo(item),
-        }
+      onClick: () => this.onItemClicked(item),
-        case MostRecentActivity.Type.OpenNotebook:
+    }));
-          return this.decorateOpenNotebookActivity(activity);
-
-        case MostRecentActivity.Type.OpenCollection:
-          return this.decorateOpenCollectionActivity(activity);
-      }
-    });
   }
 
   private createTipsItems(): SplashScreenItem[] {

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -1,21 +1,22 @@
 import * as ko from "knockout";
-import Q from "q";
 import * as _ from "underscore";
-import { Areas } from "../../../Common/Constants";
+import Q from "q";
-import * as ViewModels from "../../../Contracts/ViewModels";
+
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { CassandraTableKey, CassandraAPIDataClient } from "../TableDataClient";
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
-import * as Constants from "../Constants";
-import { getQuotedCqlIdentifier } from "../CqlUtilities";
-import * as Entities from "../Entities";
-import { CassandraAPIDataClient, CassandraTableKey } from "../TableDataClient";
-import * as TableEntityProcessor from "../TableEntityProcessor";
-import * as Utilities from "../Utilities";
-import * as DataTableUtilities from "./DataTableUtilities";
 import DataTableViewModel from "./DataTableViewModel";
+import * as DataTableUtilities from "./DataTableUtilities";
+import { getQuotedCqlIdentifier } from "../CqlUtilities";
 import TableCommands from "./TableCommands";
 import TableEntityCache from "./TableEntityCache";
+import * as Constants from "../Constants";
+import { Areas } from "../../../Common/Constants";
+import * as Utilities from "../Utilities";
+import * as Entities from "../Entities";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
+import * as TableEntityProcessor from "../TableEntityProcessor";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as ViewModels from "../../../Contracts/ViewModels";
 
 interface IListTableEntitiesSegmentedResult extends Entities.IListTableEntitiesResult {
   ExceedMaximumRetries?: boolean;
@@ -353,8 +354,8 @@ export default class TableEntityListViewModel extends DataTableViewModel {
           itemB = new Date(<string>(<any>rowB[col])._);
           break;
         default:
-          itemA = <string>(<any>rowA[col])._?.toLowerCase();
+          itemA = <string>(<any>rowA[col])._.toLowerCase();
-          itemB = <string>(<any>rowB[col])._?.toLowerCase();
+          itemB = <string>(<any>rowB[col])._.toLowerCase();
       }
       var compareResult: number = itemA < itemB ? -1 : itemA > itemB ? 1 : 0;
       if (compareResult !== 0) {

src/Explorer/Tabs/DatabaseSettingsTab.html

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

src/Explorer/Tabs/DatabaseSettingsTab.ts

@@ -1,23 +1,23 @@
-import * as ko from "knockout";
-import Q from "q";
-import DiscardIcon from "../../../images/discard.svg";
-import SaveIcon from "../../../images/save-cosmos.svg";
-import * as Constants from "../../Common/Constants";
-import { updateOffer } from "../../Common/dataAccess/updateOffer";
-import editable from "../../Common/EditableUtility";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import { configContext, Platform } from "../../ConfigContext";
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import * as SharedConstants from "../../Shared/Constants";
-import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
+import * as Constants from "../../Common/Constants";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ko from "knockout";
 import * as PricingUtils from "../../Utils/PricingUtils";
-import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import * as SharedConstants from "../../Shared/Constants";
-import Explorer from "../Explorer";
+import * as ViewModels from "../../Contracts/ViewModels";
+import DiscardIcon from "../../../images/discard.svg";
+import editable from "../../Common/EditableUtility";
+import Q from "q";
+import SaveIcon from "../../../images/save-cosmos.svg";
 import TabsBase from "./TabsBase";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action } from "../../Shared/Telemetry/TelemetryConstants";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
+import Explorer from "../Explorer";
+import { updateOffer } from "../../Common/dataAccess/updateOffer";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
+import { configContext, Platform } from "../../ConfigContext";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 
 const updateThroughputBeyondLimitWarningMessage: string = `
 You are about to request an increase in throughput beyond the pre-allocated capacity. 
@@ -73,6 +73,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
   public shouldShowStatusBar: ko.Computed<boolean>;
   public throughputTitle: ko.PureComputed<string>;
   public throughputAriaLabel: ko.PureComputed<string>;
+  public userCanChangeProvisioningTypes: ko.Observable<boolean>;
   public autoPilotUsageCost: ko.PureComputed<string>;
   public warningMessage: ko.Computed<string>;
   public canExceedMaximumValue: ko.PureComputed<boolean>;
@@ -105,6 +106,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this._wasAutopilotOriginallySet = ko.observable(false);
     this.isAutoPilotSelected = editable.observable(false);
     this.autoPilotThroughput = editable.observable<number>();
+    this.userCanChangeProvisioningTypes = ko.observable(true);
 
     const autoscaleMaxThroughput = this.database?.offer()?.autoscaleMaxThroughput;
     if (autoscaleMaxThroughput) {
@@ -116,6 +118,9 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     }
 
     this._hasProvisioningTypeChanged = ko.pureComputed<boolean>(() => {
+      if (!this.userCanChangeProvisioningTypes()) {
+        return false;
+      }
       if (this._wasAutopilotOriginallySet() !== this.isAutoPilotSelected()) {
         return true;
       }
@@ -131,11 +136,12 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     });
 
     this.requestUnitsUsageCost = ko.pureComputed(() => {
-      const account = userContext.databaseAccount;
+      const account = this.container.databaseAccount();
       if (!account) {
         return "";
       }
 
+      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -149,14 +155,14 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
         estimatedSpend = PricingUtils.getEstimatedSpendHtml(
           // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
           this.overrideWithAutoPilotSettings() ? this.autoPilotThroughput() : this.throughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
       } else {
         estimatedSpend = PricingUtils.getEstimatedAutoscaleSpendHtml(
           this.autoPilotThroughput(),
-          userContext.portalEnv,
+          serverId,
           regions,
           multimaster
         );
@@ -356,7 +362,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this.isTemplateReady = ko.observable<boolean>(false);
 
     this.isFreeTierAccount = ko.computed<boolean>(() => {
-      const databaseAccount = userContext.databaseAccount;
+      const databaseAccount = this.container?.databaseAccount();
       return databaseAccount?.properties?.enableFreeTier;
     });
 
@@ -401,6 +407,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
       this._setBaseline();
       this._wasAutopilotOriginallySet(this.isAutoPilotSelected());
     } catch (error) {
+      this.container.isRefreshingExplorer(false);
       this.isExecutionError(true);
       console.error(error);
       const errorMessage = getErrorMessage(error);
@@ -441,6 +448,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
     this.isAutoPilotSelected.setBaseline(AutoPilotUtils.isValidAutoPilotThroughput(offer.autoscaleMaxThroughput));
     this.autoPilotThroughput.setBaseline(offer.autoscaleMaxThroughput);
     this.throughput.setBaseline(offer.manualThroughput);
+    this.userCanChangeProvisioningTypes(true);
   }
 
   protected getTabsButtons(): CommandButtonComponentProps[] {

src/Explorer/Tabs/GalleryTab.tsx

@@ -36,7 +36,7 @@ export default class GalleryTab extends TabsBase {
       galleryItem: options.galleryItem,
       isFavorite: options.isFavorite,
       selectedTab: options.selectedTab,
-      sortBy: SortBy.MostRecent,
+      sortBy: SortBy.MostViewed,
       searchText: undefined,
     };
     this.galleryAndNotebookViewerComponentAdapter = new GalleryAndNotebookViewerComponentAdapter(

src/Explorer/Tabs/MongoShellTab.ts

@@ -1,16 +1,18 @@
-import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
-import { HashMap } from "../../Common/HashMap";
+import * as ko from "knockout";
-import { configContext, Platform } from "../../ConfigContext";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import AuthHeadersUtil from "../../Platform/Hosted/Authorization";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
 import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import Q from "q";
+import TabsBase from "./TabsBase";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { HashMap } from "../../Common/HashMap";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { userContext } from "../../UserContext";
-import TabsBase from "./TabsBase";
+import { configContext, Platform } from "../../ConfigContext";
 
 export default class MongoShellTab extends TabsBase {
   public url: ko.Computed<string>;
@@ -31,7 +33,7 @@ export default class MongoShellTab extends TabsBase {
       this._runtimeEndpoint = configContext.platform === Platform.Hosted ? configContext.BACKEND_ENDPOINT : "";
       const extensionEndpoint: string = configContext.BACKEND_ENDPOINT || this._runtimeEndpoint || "";
       let baseUrl = "/content/mongoshell/dist/";
-      if (userContext.portalEnv === "localhost") {
+      if (this._container.serverId() === "localhost") {
         baseUrl = "/content/mongoshell/";
       }
 
@@ -83,10 +85,10 @@ export default class MongoShellTab extends TabsBase {
   }
 
   private handleReadyMessage(event: MessageEvent, shellIframe: HTMLIFrameElement) {
-    if (typeof event.data["kind"] !== "string") {
+    if (typeof event.data["data"] !== "string") {
       return;
     }
-    if (event.data.kind !== "ready") {
+    if (event.data.data !== "ready") {
       return;
     }
 

src/Explorer/Tabs/NotebookV2Tab.ts

@@ -24,7 +24,7 @@ import * as CommandBarComponentButtonFactory from "../Menus/CommandBar/CommandBa
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { NotebookComponentAdapter } from "../Notebook/NotebookComponent/NotebookComponentAdapter";
-import * as NotebookConfigurationUtils from "../../Utils/NotebookConfigurationUtils";
+import { NotebookConfigurationUtils } from "../../Utils/NotebookConfigurationUtils";
 import { KernelSpecsDisplay, NotebookClientV2 } from "../Notebook/NotebookClientV2";
 import { configContext } from "../../ConfigContext";
 import Explorer from "../Explorer";

src/Explorer/Tree/Collection.ts

@@ -4,24 +4,18 @@ import * as _ from "underscore";
 import UploadWorker from "worker-loader!../../workers/upload";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
-import { createDocument } from "../../Common/dataAccess/createDocument";
-import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
-import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
 import { readStoredProcedures } from "../../Common/dataAccess/readStoredProcedures";
 import { readTriggers } from "../../Common/dataAccess/readTriggers";
 import { readUserDefinedFunctions } from "../../Common/dataAccess/readUserDefinedFunctions";
-import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { readCollectionOffer } from "../../Common/dataAccess/readCollectionOffer";
+import { getCollectionUsageSizeInKB } from "../../Common/dataAccess/getCollectionDataUsageSize";
 import * as Logger from "../../Common/Logger";
-import { fetchPortalNotifications } from "../../Common/PortalNotifications";
-import { configContext, Platform } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
 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 * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
 import { StartUploadMessageParams, UploadDetails, UploadDetailsRecord } from "../../workers/upload/definitions";
-import Explorer from "../Explorer";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
 import ConflictsTab from "../Tabs/ConflictsTab";
@@ -38,6 +32,12 @@ import DocumentId from "./DocumentId";
 import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
+import { configContext, Platform } from "../../ConfigContext";
+import Explorer from "../Explorer";
+import { userContext } from "../../UserContext";
+import { fetchPortalNotifications } from "../../Common/PortalNotifications";
+import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
+import { createDocument } from "../../Common/dataAccess/createDocument";
 
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
@@ -1200,6 +1200,7 @@ export default class Collection implements ViewModels.Collection {
 
   public async loadOffer(): Promise<void> {
     if (!this.container.isServerlessEnabled() && !this.offer()) {
+      this.container.isRefreshingExplorer(true);
       const startKey: number = TelemetryProcessor.traceStart(Action.LoadOffers, {
         databaseName: this.databaseId,
         collectionName: this.id(),
@@ -1236,6 +1237,8 @@ export default class Collection implements ViewModels.Collection {
           startKey
         );
         throw error;
+      } finally {
+        this.container.isRefreshingExplorer(false);
       }
     }
   }

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -6,7 +6,7 @@ import { TreeComponent, TreeNode, TreeNodeMenuItem, TreeNodeComponent } from "..
 import * as ViewModels from "../../Contracts/ViewModels";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { ResourceTreeContextMenuButtonFactory } from "../ContextMenuButtonFactory";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import CopyIcon from "../../../images/notebook/Notebook-copy.svg";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
@@ -17,7 +17,7 @@ import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
 import FileIcon from "../../../images/notebook/file-cosmos.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import { ArrayHashMap } from "../../Common/ArrayHashMap";
-import { NotebookUtil } from "../Notebook/NotebookUtil";
+import * as NotebookUtil from "../Notebook/NotebookUtil";
 import _ from "underscore";
 import { IPinnedRepo } from "../../Juno/JunoClient";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -264,7 +264,15 @@ export class ResourceTreeAdapter implements ReactAdapter {
       onClick: () => {
         collection.openTab();
         // push to most recent
-        mostRecentActivity.collectionWasOpened(userContext.databaseAccount?.id, collection);
+        MostRecentActivity.mostRecentActivity.addItem(userContext.databaseAccount?.id, {
+          type: MostRecentActivity.Type.OpenCollection,
+          title: collection.id(),
+          description: "Data",
+          data: {
+            databaseId: collection.databaseId,
+            collectionId: collection.id(),
+          },
+        });
       },
       isSelected: () =>
         this.isDataNodeSelected(collection.databaseId, collection.id(), [
@@ -565,7 +573,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       (item: NotebookContentItem) => {
         this.container.openNotebook(item).then((hasOpened) => {
           if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+            this.pushItemToMostRecent(item);
           }
         });
       },
@@ -586,7 +594,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       (item: NotebookContentItem) => {
         this.container.openNotebook(item).then((hasOpened) => {
           if (hasOpened) {
-            mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
+            this.pushItemToMostRecent(item);
           }
         });
       },
@@ -616,6 +624,18 @@ export class ResourceTreeAdapter implements ReactAdapter {
     return gitHubNotebooksTree;
   }
 
+  private pushItemToMostRecent(item: NotebookContentItem) {
+    MostRecentActivity.mostRecentActivity.addItem(userContext.databaseAccount?.id, {
+      type: MostRecentActivity.Type.OpenNotebook,
+      title: item.name,
+      description: "Notebook",
+      data: {
+        name: item.name,
+        path: item.path,
+      },
+    });
+  }
+
   private buildChildNodes(
     item: NotebookContentItem,
     onFileClick: (item: NotebookContentItem) => void,

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx

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

src/GalleryViewer/GalleryViewer.tsx

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

src/GitHub/GitHubClient.ts

@@ -1,8 +1,8 @@
 import { Octokit } from "@octokit/rest";
 import { HttpStatusCodes } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
-import * as UrlUtility from "../Common/UrlUtility";
+import UrlUtility from "../Common/UrlUtility";
-import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
+import * as NotebookUtil from "../Explorer/Notebook/NotebookUtil";
 import { getErrorMessage } from "../Common/ErrorHandlingUtils";
 
 export interface IGitHubPageInfo {

src/GitHub/GitHubContentProvider.ts

@@ -5,10 +5,10 @@ import { AjaxResponse } from "rxjs/ajax";
 import * as Base64Utils from "../Utils/Base64Utils";
 import { HttpStatusCodes } from "../Common/Constants";
 import * as Logger from "../Common/Logger";
-import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
+import * as NotebookUtil from "../Explorer/Notebook/NotebookUtil";
 import { GitHubClient, IGitHubFile, IGitHubResponse } from "./GitHubClient";
 import * as GitHubUtils from "../Utils/GitHubUtils";
-import * as UrlUtility from "../Common/UrlUtility";
+import UrlUtility from "../Common/UrlUtility";
 import { getErrorMessage } from "../Common/ErrorHandlingUtils";
 
 export interface GitHubContentProviderParams {

src/Localization/en/translations.json

@@ -9,11 +9,9 @@
             "North Central US": "North Central US",
             "West US": "West US",
             "East US 2": "East US 2",
-            "Current Region": "Current Region",
+            "ClassInfo": "This is a self serve class",
             "RegionDropdownInfo": "More regions can be added in the future.",
-            "RegionsAndAccountNameValidationError": "Regions and account name should not be empty.",
+            "ValidationError": "Regions and AccountName should not be empty.",
-            "DbThroughputValidationError": "Please update throughput for database.",
-            "DescriptionLabel": "Description",
             "DescriptionText": "This class sets collection and database throughput.",
             "DecriptionLinkText": "Click here for more information",
             "Regions": "Regions",
@@ -24,69 +22,12 @@
             "Account Name": "Account Name",
             "AccountNamePlaceHolder": "Enter the account name",
             "Collection Throughput": "Collection Throughput",
-            "Enable DB level throughput": "Enable Database Level Throughput",
+            "Enable DB level throughput": "Enable DB level throughput",
             "Database Throughput": "Database Throughput",
-            "UpdateInProgressMessage": "Data is being updated",
+            "RefreshMessage": "Self Serve Example successfully refreshing",
-            "UpdateCompletedMessageTitle": "Update succeeded",
+            "SubmissionMessage": "Submitted successfully"
-            "UpdateCompletedMessageText": "Data update completed.",
-            "SubmissionMessageSuccessTitle": "Update started",
-            "SubmissionMessageForNewRegionText": "Data update started. Region changed.",
-            "SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
-            "SubmissionMessageErrorTitle": "Data update failed",
-            "SubmissionMessageErrorText": "Data update failed because of errors.",
-            "OnSaveFailureMessage": "Data save operation not currently permitted."
         },
         "SqlX": {
-            "DedicatedGatewayDescription": "Provision a dedicated gateway cluster for your Azure Cosmos DB account. A dedicated gateway is compute that is a front-end to data in your Azure Cosmos DB account. Your dedicated gateway automatically includes the integrated cache, which can improve read performance. ",
-            "DedicatedGateway": "Dedicated Gateway",
-            "Enable": "Enable",
-            "Disable": "Disable",
-            "LearnAboutDedicatedGateway": "Learn more about dedicated gateway.",
-            "DeprovisioningDetailsText": "Learn more about deprovisioning the dedicated gateway.",
-            "DedicatedGatewayPricing": "Learn more about dedicated gateway pricing",
-            "SKUs": "SKUs",
-            "SKUsPlaceHolder": "Select SKUs",
-            "NumberOfInstances": "Number of instances",
-            "CosmosD4s": "Cosmos.D4s (General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory)",
-            "CosmosD8s": "Cosmos.D8s (General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory)",
-            "CosmosD16s": "Cosmos.D16s (General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory)",
-            "CosmosD32s": "Cosmos.D32s (General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory)",
-            "CreateMessage": "Dedicated gateway resource is being created.",
-            "CreateInitializeTitle": "Provisioning resource",
-            "CreateInitializeMessage": "Dedicated gateway resource will be provisioned.",
-            "CreateSuccessTitle": "Resource provisioned",
-            "CreateSuccesseMessage": "Dedicated gateway resource provisioned.",
-            "CreateFailureTitle": "Failed to provision resource",
-            "CreateFailureMessage": "Dedicated gateway resource provisioning failed.",
-            "UpdateMessage": "Dedicated gateway resource is being updated.",
-            "UpdateInitializeTitle": "Updating resource",
-            "UpdateInitializeMessage": "Dedicated gateway resource will be updated.",
-            "UpdateSuccessTitle": "Resource updated",
-            "UpdateSuccesseMessage": "Dedicated gateway resource updated.",
-            "UpdateFailureTitle": "Failed to update resource",
-            "UpdateFailureMessage": "Dedicated gateway resource updation failed.",
-            "DeleteMessage": "Dedicated gateway resource is being deleted.",
-            "DeleteInitializeTitle": "Deleting resource",
-            "DeleteInitializeMessage": "Dedicated gateway resource will be deleted.",
-            "DeleteSuccessTitle": "Resource deleted",
-            "DeleteSuccesseMessage": "Dedicated gateway resource deleted.",
-            "DeleteFailureTitle": "Failed to delete resource",
-            "DeleteFailureMessage": "Dedicated gateway resource deletion failed.",
-            "CannotSave": "Cannot save the changes to the Dedicated gateway resource at the moment",
-            "DedicatedGatewayEndpoint": "Dedicated gatewayEndpoint",
-            "NoValue": "",
-            "SKUDetails": "SKU Details: ",
-            "CosmosD4Details": "General Purpose Cosmos Compute with 4 vCPUs, 16 GB Memory",
-            "CosmosD8Details": "General Purpose Cosmos Compute with 8 vCPUs, 32 GB Memory",
-            "CosmosD16Details": "General Purpose Cosmos Compute with 16 vCPUs, 64 GB Memory",
-            "CosmosD32Details": "General Purpose Cosmos Compute with 32 vCPUs, 128 GB Memory",
-            "Cost": "Cost",
-            "CostText": "Hourly cost of the dedicated gateway resource depends on the SKU selection, number of instances per region, and number of regions.",
-            "ConnectionString": "Connection String",
-            "ConnectionStringText": "To use the dedicated gateway, use the connection string shown in ",
-            "KeysBlade": "the keys blade",
-            "WarningBannerOnUpdate": "Adding or modifying dedicated gateway instances may affect your bill.",
-            "WarningBannerOnDelete": "After deprovisioning the dedicated gateway, you must update any applications using the old dedicated gateway connection string."
         }
     }
 }

src/Main.tsx

@@ -1,73 +1,74 @@
 // CSS Dependencies
-import "abort-controller/polyfill";
-import "babel-polyfill";
 import "bootstrap/dist/css/bootstrap.css";
-import "es6-object-assign/auto";
+import "../less/documentDB.less";
-import "es6-symbol/implement";
+import "../less/tree.less";
-import "object.entries/auto";
+import "../less/forms.less";
-import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import "../less/menus.less";
-import "promise-polyfill/src/polyfill";
+import "../less/infobox.less";
-import "promise.prototype.finally/auto";
+import "../less/messagebox.less";
-import React, { useState } from "react";
+import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
-import ReactDOM from "react-dom";
+import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
-import "url-polyfill/url-polyfill.min";
+import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
-import "webcrypto-liner/build/webcrypto-liner.shim.min";
+import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
-import "whatwg-fetch";
+import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
+import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
+import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
+import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
+import "./Explorer/Panes/PanelComponent.less";
+import "../less/TableStyles/queryBuilder.less";
+import "../externals/jquery.dataTables.min.css";
+import "../less/TableStyles/fulldatatables.less";
+import "../less/TableStyles/EntityEditor.less";
+import "../less/TableStyles/CustomizeColumns.less";
+import "../less/resourceTree.less";
+import "../externals/jquery.typeahead.min.css";
 import "../externals/jquery-ui.min.css";
-import "../externals/jquery-ui.min.js";
 import "../externals/jquery-ui.structure.min.css";
 import "../externals/jquery-ui.theme.min.css";
-import "../externals/jquery.dataTables.min.css";
+import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
-import "../externals/jquery.typeahead.min.css";
+import "./Explorer/Panes/GraphNewVertexPane.less";
-import "../externals/jquery.typeahead.min.js";
+import "./Explorer/Tabs/QueryTab.less";
+import "./Explorer/Controls/TreeComponent/treeComponent.less";
+import "./Explorer/Controls/Accordion/AccordionComponent.less";
+import "./Explorer/SplashScreen/SplashScreen.less";
+import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
+
 // Image Dependencies
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import "../images/favicon.ico";
-import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
+
-import arrowLeftImg from "../images/imgarrowlefticon.svg";
+import "./Shared/appInsights";
-import refreshImg from "../images/refresh-cosmos.svg";
+import "babel-polyfill";
-import "../less/documentDB.less";
+import "es6-symbol/implement";
-import "../less/forms.less";
+import "webcrypto-liner/build/webcrypto-liner.shim.min";
-import "../less/infobox.less";
+import "./Libs/jquery";
-import "../less/menus.less";
+import "bootstrap/dist/js/npm";
-import "../less/messagebox.less";
+import "../externals/jquery.typeahead.min.js";
-import "../less/resourceTree.less";
+import "../externals/jquery-ui.min.js";
-import "../less/TableStyles/CustomizeColumns.less";
+import "promise-polyfill/src/polyfill";
-import "../less/TableStyles/EntityEditor.less";
+import "abort-controller/polyfill";
-import "../less/TableStyles/fulldatatables.less";
+import "whatwg-fetch";
-import "../less/TableStyles/queryBuilder.less";
+import "es6-object-assign/auto";
-import "../less/tree.less";
+import "promise.prototype.finally/auto";
-import { AuthType } from "./AuthType";
+import "object.entries/auto";
-import "./Explorer/Controls/Accordion/AccordionComponent.less";
+import "./Libs/is-integer-polyfill";
-import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
+import "url-polyfill/url-polyfill.min";
-import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
+
-import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
+import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
-import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
-import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
-import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";
-import "./Explorer/Controls/ThroughputInput/ThroughputInput.less";
-import "./Explorer/Controls/TreeComponent/treeComponent.less";
 import { ExplorerParams } from "./Explorer/Explorer";
-import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
+import React, { useState } from "react";
-import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
+import ReactDOM from "react-dom";
-import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
+import hdeConnectImage from "../images/HdeConnectCosmosDB.svg";
-import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
+import refreshImg from "../images/refresh-cosmos.svg";
-import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
+import arrowLeftImg from "../images/imgarrowlefticon.svg";
-import { NotificationConsoleComponent } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { KOCommentEnd, KOCommentIfStart } from "./koComment";
-import "./Explorer/Panes/GraphNewVertexPane.less";
-import "./Explorer/Panes/PanelComponent.less";
-import { PanelContainerComponent } from "./Explorer/Panes/PanelContainerComponent";
-import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
-import "./Explorer/SplashScreen/SplashScreen.less";
-import "./Explorer/Tabs/QueryTab.less";
 import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { useSidePanel } from "./hooks/useSidePanel";
-import { KOCommentEnd, KOCommentIfStart } from "./koComment";
+import { NotificationConsoleComponent } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
-import "./Libs/is-integer-polyfill";
+import { PanelContainerComponent } from "./Explorer/Panes/PanelContainerComponent";
-import "./Libs/jquery";
+import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
-import "./Shared/appInsights";
+import { Dialog, DialogProps } from "./Explorer/Controls/Dialog";
-import { userContext } from "./UserContext";
 
 initializeIcons();
 
@@ -102,14 +103,19 @@ const App: React.FunctionComponent = () => {
   const config = useConfig();
   const explorer = useKnockoutExplorer(config?.platform, explorerParams);
 
-  if (!explorer) {
-    return <LoadingExplorer />;
-  }
-
   return (
     <div className="flexContainer">
-      <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
+      <div
-        {/* Main Command Bar - Start */}
+        id="divSelfServe"
+        className="flexContainer"
+        data-bind="visible: selfServeType() && selfServeType() !== 'none', react: selfServeComponentAdapter"
+      ></div>
+      <div
+        id="divExplorer"
+        data-bind="if: selfServeType() === 'none'"
+        className="flexContainer hideOverflows"
+        style={{ display: "none" }}
+      >
         <div data-bind="react: commandBarComponentAdapter" />
         {/* Collections Tree and Tabs - Begin */}
         <div className="resourceTreeAndTabs">
@@ -157,11 +163,11 @@ const App: React.FunctionComponent = () => {
                       </div>
                     </div>
                   </div>
-                  {userContext.authType === AuthType.ResourceToken ? (
+                  <div
-                    <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
+                    style={{ overflowY: "auto" }}
-                  ) : (
+                    data-bind="if: isAuthWithResourceToken(), react:resourceTreeForResourceToken"
-                    <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+                  />
-                  )}
+                  <div style={{ overflowY: "auto" }} data-bind="if: !isAuthWithResourceToken(), react:resourceTree" />
                 </div>
                 {/*  Collections Window - End */}
               </div>
@@ -211,7 +217,10 @@ const App: React.FunctionComponent = () => {
             {/* Splitter - End */}
           </div>
           {/* Collections Tree - End */}
-          <div className="connectExplorerContainer" data-bind="visible: tabsManager.openedTabs().length === 0">
+          <div
+            className="connectExplorerContainer"
+            data-bind="visible: !isRefreshingExplorer() && tabsManager.openedTabs().length === 0"
+          >
             <form className="connectExplorerFormContainer">
               <SplashScreen explorer={explorer} />
             </form>
@@ -236,6 +245,25 @@ const App: React.FunctionComponent = () => {
           />
         </div>
       </div>
+      {/* Global loader - Start */}
+
+      <div className="splashLoaderContainer" data-bind="visible: isRefreshingExplorer">
+        <div className="splashLoaderContentContainer">
+          <div data-bind="visible: selfServeType() === undefined, react: selfServeLoadingComponentAdapter"></div>
+          <div data-bind="if: selfServeType() === 'none'" style={{ display: "none" }}>
+            <p className="connectExplorerContent">
+              <img src={hdeConnectImage} alt="Azure Cosmos DB" />
+            </p>
+            <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
+              Welcome to Azure Cosmos DB
+            </p>
+            <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
+              Connecting...
+            </p>
+          </div>
+        </div>
+      </div>
+      {/* Global loader - End */}
       <PanelContainerComponent
         isOpen={isPanelOpen}
         panelContent={panelContent}
@@ -279,21 +307,3 @@ const App: React.FunctionComponent = () => {
 };
 
 ReactDOM.render(<App />, document.body);
-
-function LoadingExplorer(): JSX.Element {
-  return (
-    <div className="splashLoaderContainer">
-      <div className="splashLoaderContentContainer">
-        <p className="connectExplorerContent">
-          <img src={hdeConnectImage} alt="Azure Cosmos DB" />
-        </p>
-        <p className="splashLoaderTitle" id="explorerLoadingStatusTitle">
-          Welcome to Azure Cosmos DB
-        </p>
-        <p className="splashLoaderText" id="explorerLoadingStatusText" role="alert">
-          Connecting...
-        </p>
-      </div>
-    </div>
-  );
-}

src/ResourceProvider/ResourceProviderClient.ts

@@ -3,7 +3,7 @@ import { HttpStatusCodes } from "../Common/Constants";
 import { IResourceProviderClient, IResourceProviderRequestOptions } from "./IResourceProviderClient";
 import { OperationStatus } from "../Contracts/DataModels";
 import { TokenProviderFactory } from "../TokenProviders/TokenProviderFactory";
-import * as UrlUtility from "../Common/UrlUtility";
+import UrlUtility from "../Common/UrlUtility";
 
 export class ResourceProviderClient<T> implements IResourceProviderClient<T> {
   private httpClient: HttpClient;

src/RouteHandlers/TabRouteHandler.ts

@@ -1,8 +1,9 @@
-import crossroads from "crossroads";
-import hasher from "hasher";
 import * as _ from "underscore";
 import * as Constants from "../Common/Constants";
 import * as ViewModels from "../Contracts/ViewModels";
+
+import crossroads from "crossroads";
+import hasher from "hasher";
 import ScriptTabBase from "../Explorer/Tabs/ScriptTabBase";
 import TabsBase from "../Explorer/Tabs/TabsBase";
 
@@ -397,7 +398,14 @@ export class TabRouteHandler {
 
   private _executeActionHelper(action: () => void): void {
     const explorer = window.dataExplorer;
-    if (explorer && explorer.isAccountReady()) {
+    if (!!explorer && (explorer.isRefreshingExplorer() || !explorer.isAccountReady())) {
+      const refreshSubscription = explorer.isRefreshingExplorer.subscribe((isRefreshing: boolean) => {
+        if (!isRefreshing) {
+          action();
+          refreshSubscription.dispose();
+        }
+      });
+    } else {
       action();
     }
   }

src/SelfServe/Decorators.tsx

@@ -1,4 +1,4 @@
-import { ChoiceItem, Description, Info, InputType, NumberUiType, SmartUiInput, RefreshParams } from "./SelfServeTypes";
+import { ChoiceItem, Description, Info, InputType, NumberUiType, SmartUiInput } from "./SelfServeTypes";
 import { addPropertyToMap, DecoratorProperties, buildSmartUiDescriptor } from "./SelfServeUtils";
 
 type ValueOf<T> = T[keyof T];
@@ -33,9 +33,7 @@ export interface ChoiceInputOptions extends InputOptionsBase {
 }
 
 export interface DescriptionDisplayOptions {
-  labelTKey?: string;
   description?: (() => Promise<Description>) | Description;
-  isDynamicDescription?: boolean;
 }
 
 type InputOptions =
@@ -58,7 +56,7 @@ const isChoiceInputOptions = (inputOptions: InputOptions): inputOptions is Choic
 };
 
 const isDescriptionDisplayOptions = (inputOptions: InputOptions): inputOptions is DescriptionDisplayOptions => {
-  return "description" in inputOptions || "isDynamicDescription" in inputOptions;
+  return "description" in inputOptions;
 };
 
 const addToMap = (...decorators: Decorator[]): PropertyDecorator => {
@@ -82,11 +80,7 @@ const addToMap = (...decorators: Decorator[]): PropertyDecorator => {
 };
 
 export const OnChange = (
-  onChange: (
+  onChange: (currentState: Map<string, SmartUiInput>, newValue: InputType) => Map<string, SmartUiInput>
-    newValue: InputType,
-    currentState: Map<string, SmartUiInput>,
-    baselineValues: ReadonlyMap<string, SmartUiInput>
-  ) => Map<string, SmartUiInput>
 ): PropertyDecorator => {
   return addToMap({ name: "onChange", value: onChange });
 };
@@ -117,11 +111,7 @@ export const Values = (inputOptions: InputOptions): PropertyDecorator => {
       { name: "choices", value: inputOptions.choices }
     );
   } else if (isDescriptionDisplayOptions(inputOptions)) {
-    return addToMap(
+    return addToMap({ name: "description", value: inputOptions.description });
-      { name: "labelTKey", value: inputOptions.labelTKey },
-      { name: "description", value: inputOptions.description },
-      { name: "isDynamicDescription", value: inputOptions.isDynamicDescription }
-    );
   } else {
     return addToMap(
       { name: "labelTKey", value: inputOptions.labelTKey },
@@ -136,8 +126,8 @@ export const IsDisplayable = (): ClassDecorator => {
   };
 };
 
-export const RefreshOptions = (refreshParams: RefreshParams): ClassDecorator => {
+export const ClassInfo = (info: (() => Promise<Info>) | Info): ClassDecorator => {
   return (target) => {
-    addPropertyToMap(target.prototype, "root", target.name, "refreshParams", refreshParams);
+    addPropertyToMap(target.prototype, "root", target.name, "info", info);
   };
 };

src/SelfServe/Example/SelfServeExample.rp.ts

@@ -64,20 +64,13 @@ export const initialize = async (): Promise<InitializeResponse> => {
 };
 
 export const onRefreshSelfServeExample = async (): Promise<RefreshResult> => {
-  const refreshCountString = SessionStorageUtility.getEntry("refreshCount");
-  const refreshCount = refreshCountString ? parseInt(refreshCountString) : 0;
-
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
   const databaseAccountName = userContext.databaseAccount.name;
   const databaseAccountGetResults = await get(subscriptionId, resourceGroup, databaseAccountName);
   const isUpdateInProgress = databaseAccountGetResults.properties.provisioningState !== "Succeeded";
-
-  const progressToBeSent = refreshCount % 5 === 0 ? isUpdateInProgress : true;
-  SessionStorageUtility.setEntry("refreshCount", (refreshCount + 1).toString());
-
   return {
-    isUpdateInProgress: progressToBeSent,
+    isUpdateInProgress: isUpdateInProgress,
-    updateInProgressMessageTKey: "UpdateInProgressMessage",
+    notificationMessage: "RefreshMessage",
   };
 };

src/SelfServe/Example/SelfServeExample.tsx

@@ -1,25 +1,24 @@
-import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
+import { PropertyInfo, OnChange, Values, IsDisplayable, ClassInfo } from "../Decorators";
 import {
   ChoiceItem,
-  Description,
-  DescriptionType,
   Info,
   InputType,
   NumberUiType,
-  OnSaveResult,
   RefreshResult,
   SelfServeBaseClass,
+  SelfServeNotification,
+  SelfServeNotificationType,
   SmartUiInput,
 } from "../SelfServeTypes";
 import {
-  getMaxCollectionThroughput,
-  getMaxDatabaseThroughput,
-  getMinCollectionThroughput,
-  getMinDatabaseThroughput,
-  initialize,
   onRefreshSelfServeExample,
   Regions,
   update,
+  initialize,
+  getMinDatabaseThroughput,
+  getMaxDatabaseThroughput,
+  getMinCollectionThroughput,
+  getMaxCollectionThroughput,
 } from "./SelfServeExample.rp";
 
 const regionDropdownItems: ChoiceItem[] = [
@@ -28,19 +27,16 @@ const regionDropdownItems: ChoiceItem[] = [
   { label: "East US 2", key: Regions.EastUS2 },
 ];
 
+const selfServeExampleInfo: Info = {
+  messageTKey: "ClassInfo",
+};
+
 const regionDropdownInfo: Info = {
   messageTKey: "RegionDropdownInfo",
 };
 
-const onRegionsChange = (newValue: InputType, currentState: Map<string, SmartUiInput>): Map<string, SmartUiInput> => {
+const onRegionsChange = (currentState: Map<string, SmartUiInput>, newValue: InputType): Map<string, SmartUiInput> => {
   currentState.set("regions", { value: newValue });
-
-  const currentRegionText = `current region selected is ${newValue}`;
-  currentState.set("currentRegionText", {
-    value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description,
-    hidden: false,
-  });
-
   const currentEnableLogging = currentState.get("enableLogging");
   if (newValue === Regions.NorthCentralUS) {
     currentState.set("enableLogging", { value: false, disabled: true });
@@ -51,8 +47,8 @@ const onRegionsChange = (newValue: InputType, currentState: Map<string, SmartUiI
 };
 
 const onEnableDbLevelThroughputChange = (
-  newValue: InputType,
+  currentState: Map<string, SmartUiInput>,
-  currentState: Map<string, SmartUiInput>
+  newValue: InputType
 ): Map<string, SmartUiInput> => {
   currentState.set("enableDbLevelThroughput", { value: newValue });
   const currentDbThroughput = currentState.get("dbThroughput");
@@ -61,15 +57,9 @@ const onEnableDbLevelThroughputChange = (
   return currentState;
 };
 
-const validate = (
+const validate = (currentvalues: Map<string, SmartUiInput>): void => {
-  currentvalues: Map<string, SmartUiInput>,
-  baselineValues: ReadonlyMap<string, SmartUiInput>
-): void => {
-  if (currentvalues.get("dbThroughput") === baselineValues.get("dbThroughput")) {
-    throw new Error("DbThroughputValidationError");
-  }
   if (!currentvalues.get("regions").value || !currentvalues.get("accountName").value) {
-    throw new Error("RegionsAndAccountNameValidationError");
+    throw new Error("ValidationError");
   }
 };
 
@@ -96,12 +86,12 @@ const validate = (
 */
 @IsDisplayable()
 /*
-  @RefreshOptions()
+  @ClassInfo()
-    - role: Passes the refresh options to be used by the self serve model.
+    - optional
-    - inputs: 
+    - input: Info | () => Promise<Info>
-        retryIntervalInMs - The time interval between refresh attempts when an update in ongoing.
+    - role: Display an Info bar as the first element of the UI.
 */
-@RefreshOptions({ retryIntervalInMs: 2000 })
+@ClassInfo(selfServeExampleInfo)
 export default class SelfServeExample extends SelfServeBaseClass {
   /*
   onRefresh()
@@ -119,21 +109,18 @@ export default class SelfServeExample extends SelfServeBaseClass {
 
   /*
   onSave()
-    - input: (currentValues: Map<string, InputType>, baselineValues: ReadonlyMap<string, SmartUiInput>) => Promise<string>
+    - input: (currentValues: Map<string, InputType>) => Promise<void>
     - role: Callback that is triggerred when the submit button is clicked. You should perform your rest API
             calls here using the data from the different inputs passed as a Map to this callback function.
 
             In this example, the onSave callback simply sets the value for keys corresponding to the field name
-            in the SessionStorage. It uses the currentValues and baselineValues maps to perform custom validations
+            in the SessionStorage.
-            as well.
+    - returns: SelfServeNotification -
-
+                message: The message to be displayed in the message bar after the onSave is completed
-    - returns: The initialize, success and failure messages to be displayed in the Portal Notification blade after the operation is completed.
+                type: The type of message bar to be used (info, warning, error)
   */
-  public onSave = async (
+  public onSave = async (currentValues: Map<string, SmartUiInput>): Promise<SelfServeNotification> => {
-    currentValues: Map<string, SmartUiInput>,
+    validate(currentValues);
-    baselineValues: ReadonlyMap<string, SmartUiInput>
-  ): Promise<OnSaveResult> => {
-    validate(currentValues, baselineValues);
     const regions = Regions[currentValues.get("regions")?.value as keyof typeof Regions];
     const enableLogging = currentValues.get("enableLogging")?.value as boolean;
     const accountName = currentValues.get("accountName")?.value as string;
@@ -141,48 +128,8 @@ export default class SelfServeExample extends SelfServeBaseClass {
     const enableDbLevelThroughput = currentValues.get("enableDbLevelThroughput")?.value as boolean;
     let dbThroughput = currentValues.get("dbThroughput")?.value as number;
     dbThroughput = enableDbLevelThroughput ? dbThroughput : undefined;
-    try {
+    await update(regions, enableLogging, accountName, collectionThroughput, dbThroughput);
-      await update(regions, enableLogging, accountName, collectionThroughput, dbThroughput);
+    return { message: "SubmissionMessage", type: SelfServeNotificationType.info };
-      if (currentValues.get("regions") === baselineValues.get("regions")) {
-        return {
-          operationStatusUrl: undefined,
-          portalNotification: {
-            initialize: {
-              titleTKey: "SubmissionMessageSuccessTitle",
-              messageTKey: "SubmissionMessageForSameRegionText",
-            },
-            success: {
-              titleTKey: "UpdateCompletedMessageTitle",
-              messageTKey: "UpdateCompletedMessageText",
-            },
-            failure: {
-              titleTKey: "SubmissionMessageErrorTitle",
-              messageTKey: "SubmissionMessageErrorText",
-            },
-          },
-        };
-      } else {
-        return {
-          operationStatusUrl: undefined,
-          portalNotification: {
-            initialize: {
-              titleTKey: "SubmissionMessageSuccessTitle",
-              messageTKey: "SubmissionMessageForNewRegionText",
-            },
-            success: {
-              titleTKey: "UpdateCompletedMessageTitle",
-              messageTKey: "UpdateCompletedMessageText",
-            },
-            failure: {
-              titleTKey: "SubmissionMessageErrorTitle",
-              messageTKey: "SubmissionMessageErrorText",
-            },
-          },
-        };
-      }
-    } catch (error) {
-      throw new Error("OnSaveFailureMessage");
-    }
   };
 
   /*
@@ -203,7 +150,6 @@ export default class SelfServeExample extends SelfServeBaseClass {
   public initialize = async (): Promise<Map<string, SmartUiInput>> => {
     const initializeResponse = await initialize();
     const defaults = new Map<string, SmartUiInput>();
-    defaults.set("currentRegionText", undefined);
     defaults.set("regions", { value: initializeResponse.regions });
     defaults.set("enableLogging", { value: initializeResponse.enableLogging });
     const accountName = initializeResponse.accountName;
@@ -226,24 +172,15 @@ export default class SelfServeExample extends SelfServeBaseClass {
             e) Text (with optional hyperlink) for descriptions
   */
   @Values({
-    labelTKey: "DescriptionLabel",
     description: {
       textTKey: "DescriptionText",
-      type: DescriptionType.Text,
       link: {
-        href: "https://aka.ms/cosmos-create-account-portal",
+        href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
         textTKey: "DecriptionLinkText",
       },
     },
   })
   description: string;
-
-  @Values({
-    labelTKey: "Current Region",
-    isDynamicDescription: true,
-  })
-  currentRegionText: string;
-
   /*
   @PropertyInfo()
     - optional
@@ -255,8 +192,8 @@ export default class SelfServeExample extends SelfServeBaseClass {
   /*
   @OnChange()
     - optional
-    - input: (currentValues: Map<string, InputType>, newValue: InputType, baselineValues: ReadonlyMap<string, SmartUiInput>) => Map<string, InputType>
+    - input: (currentValues: Map<string, InputType>, newValue: InputType) => Map<string, InputType>
-    - role: Takes a Map of current values, the newValue for this property and a ReadonlyMap of baselineValues as inputs. This is called when a property,
+    - role: Takes a Map of current values and the newValue for this property as inputs. This is called when a property,
             say prop1, changes its value in the UI. This can be used to 
             a) Change the value (and reflect it in the UI) for prop2 based on prop1.
             b) Change the visibility for prop2 in the UI, based on prop1