Pass masterkey in connection string mode (#572)

.eslintignore

@@ -24,6 +24,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

.github/dependabot.yml

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

README.md

@@ -18,6 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)
 
 - Visit: `https://localhost:1234/hostedExplorer.html`
+- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.
 
 ### Emulator Development

jest-puppeteer.config.js

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

jest.config.js

@@ -67,8 +67,7 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
-    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
     "worker-loader": "<rootDir>/mockModule",
     "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
     "^dnd-core$": "dnd-core/dist/cjs",

less/documentDB.less

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

package.json

@@ -44,7 +44,9 @@
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
     "@uifabric/styling": "7.13.7",
+    "abort-controller": "3.0.0",
     "applicationinsights": "1.8.0",
+    "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
@@ -58,13 +60,15 @@
     "date-fns": "1.29.0",
     "dayjs": "1.8.19",
     "dotenv": "8.2.0",
+    "es6-object-assign": "1.1.0",
+    "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",
     "i18next": "19.8.4",
     "i18next-browser-languagedetector": "6.0.1",
-    "i18next-http-backend": "1.2.1",
+    "i18next-http-backend": "1.0.23",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
@@ -75,9 +79,12 @@
     "monaco-editor": "0.18.1",
     "ms": "2.1.3",
     "msal": "1.4.4",
-    "office-ui-fabric-react": "7.164.2",
+    "object.entries": "1.1.0",
+    "office-ui-fabric-react": "7.134.1",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
+    "promise-polyfill": "8.1.0",
+    "promise.prototype.finally": "3.1.0",
     "q": "1.5.1",
     "react": "16.13.1",
     "react-animate-height": "2.0.8",
@@ -94,9 +101,13 @@
     "rxjs": "6.6.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
+    "text-encoding": "0.7.0",
     "underscore": "1.9.1",
-    "utility-types": "3.10.0"
+    "url-polyfill": "1.1.7",
+    "utility-types": "3.10.0",
+    "webcrypto-liner": "1.1.4",
+    "webfontloader": "1.6.28",
+    "whatwg-fetch": "3.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
@@ -110,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",
@@ -126,7 +137,9 @@
     "@types/react-redux": "7.1.7",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
+    "@types/text-encoding": "0.0.33",
     "@types/underscore": "1.7.36",
+    "@types/webfontloader": "1.6.29",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
     "axe-puppeteer": "1.1.0",
@@ -163,11 +176,12 @@
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
     "prettier": "2.2.1",
-    "puppeteer": "8.0.0",
+    "puppeteer": "4.0.0",
     "raw-loader": "0.5.1",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
+    "terser-webpack-plugin": "3.0.5",
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",

src/Common/Constants.ts

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

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

src/Contracts/ViewModels.ts

@@ -376,6 +376,7 @@ export interface DataExplorerInputsFrame {
   masterKey?: string;
   hasWriteAccess?: boolean;
   authorizationToken?: string;
+  features: { [key: string]: string };
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;

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 { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import "./Heatmap.less";
+import dayjs from "dayjs";
 import {
   ChartSettings,
   DataPayload,
@@ -16,6 +11,11 @@ import {
   PartitionTimeStampToData,
   PortalTheme,
 } from "./HeatmapDatatypes";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { StyleConstants } from "../../Common/Constants";
+import "./Heatmap.less";
 
 export class Heatmap {
   public static readonly elementId: string = "heatmap";
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }
 
 window.addEventListener("message", handleMessage, false);
-sendReadyMessage();
+sendMessage("ready");

src/Explorer/ComponentRegisterer.ts

@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import * as PaneComponents from "./Panes/PaneComponents";
+import * as TabComponents from "./Tabs/TabComponents";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
@@ -8,25 +9,9 @@ import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleCompo
 import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
 import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
+import { TabsManagerKOComponent } from "./Tabs/TabsManager";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 
-import DocumentsTab from "./Tabs/DocumentsTab";
-import StoredProcedureTab from "./Tabs/StoredProcedureTab";
-import TriggerTab from "./Tabs/TriggerTab";
-import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
-import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
-import QueryTab from "./Tabs/QueryTab";
-import QueryTablesTab from "./Tabs/QueryTablesTab";
-import GraphTab from "./Tabs/GraphTab";
-import MongoShellTab from "./Tabs/MongoShellTab";
-import ConflictsTab from "./Tabs/ConflictsTab";
-import NotebookTabV2 from "./Tabs/NotebookV2Tab";
-import TerminalTab from "./Tabs/TerminalTab";
-import GalleryTab from "./Tabs/GalleryTab";
-import NotebookViewerTab from "./Tabs/NotebookViewerTab";
-import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
-import TabsManagerTemplate from "./Tabs/TabsManager.html";
-
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
 ko.components.register("error-display", new ErrorDisplayComponent());
@@ -36,27 +21,28 @@ ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-ko.components.register("tabs-manager", { template: TabsManagerTemplate });
+ko.components.register("tabs-manager", TabsManagerKOComponent());
 
 // Collection Tabs
-[
-  DocumentsTab,
-  StoredProcedureTab,
-  TriggerTab,
-  UserDefinedFunctionTab,
-  SettingsTabV2,
-  QueryTab,
-  QueryTablesTab,
-  GraphTab,
-  MongoShellTab,
-  ConflictsTab,
-  NotebookTabV2,
-  TerminalTab,
-  GalleryTab,
-  NotebookViewerTab,
-  DatabaseSettingsTab,
-  DatabaseSettingsTabV2,
-].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
+ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
+ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
+ko.components.register("trigger-tab", new TabComponents.TriggerTab());
+ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
+ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
+ko.components.register("query-tab", new TabComponents.QueryTab());
+ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
+ko.components.register("graph-tab", new TabComponents.GraphTab());
+ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
+ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
+ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
+ko.components.register("terminal-tab", new TabComponents.TerminalTab());
+ko.components.register("gallery-tab", new TabComponents.GalleryTab());
+ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
+
+// Database Tabs
+ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());

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
-          className="collapsibleSection"
-          horizontal
-          verticalAlign="center"
-          tokens={accordionStackTokens}
-          onClick={this.toggleCollapsed}
-        >
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
+        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
+          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
           <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 {
-                                    "MsHighContrastAdjust": "none",
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                     "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/__snapshots__/GalleryCardComponent.test.tsx.snap

@@ -107,7 +107,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <Icon
+        <StyledIconBase
           iconName="RedEye"
           styles={
             Object {
@@ -131,7 +131,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <Icon
+        <StyledIconBase
           iconName="Download"
           styles={
             Object {
@@ -155,7 +155,7 @@ exports[`GalleryCardComponent renders 1`] = `
         }
         variant="tiny"
       >
-        <Icon
+        <StyledIconBase
           iconName="Heart"
           styles={
             Object {
@@ -180,7 +180,7 @@ exports[`GalleryCardComponent renders 1`] = `
       }
     }
   >
-    <Separator
+    <Styled
       styles={
         Object {
           "root": Object {

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

@@ -139,7 +139,9 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.shouldShowIndexingPolicyEditor =
         this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
 
-      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );
 
       // Mongo container with system partition key still treat as "Fixed"
       this.isFixedContainer =
@@ -325,6 +327,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(
@@ -698,6 +701,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       }
     }
 
+    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(
@@ -860,6 +864,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
         });
       }
     }
+    this.container.isRefreshingExplorer(false);
     this.setBaseline();
     this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
     traceSuccess(

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

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

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

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

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

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

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

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

@@ -895,6 +895,7 @@ exports[`SettingsComponent renders 1`] = `
                   "validPartitionKeyValue": [Function],
                   "visible": [Function],
                 },
+                "features": [Function],
                 "flight": [Function],
                 "graphStylingPane": GraphStylingPane {
                   "container": [Circular],
@@ -935,6 +936,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
+                "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
@@ -943,6 +945,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
+                "isTryCosmosDBSubscription": [Function],
                 "loadQueryPane": LoadQueryPane {
                   "container": [Circular],
                   "files": [Function],
@@ -1056,6 +1059,7 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
@@ -2091,6 +2095,7 @@ exports[`SettingsComponent renders 1`] = `
                 "validPartitionKeyValue": [Function],
                 "visible": [Function],
               },
+              "features": [Function],
               "flight": [Function],
               "graphStylingPane": GraphStylingPane {
                 "container": [Circular],
@@ -2131,6 +2136,7 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
+              "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
@@ -2139,6 +2145,7 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
+              "isTryCosmosDBSubscription": [Function],
               "loadQueryPane": LoadQueryPane {
                 "container": [Circular],
                 "files": [Function],
@@ -2252,6 +2259,7 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,
@@ -3300,6 +3308,7 @@ exports[`SettingsComponent renders 1`] = `
                   "validPartitionKeyValue": [Function],
                   "visible": [Function],
                 },
+                "features": [Function],
                 "flight": [Function],
                 "graphStylingPane": GraphStylingPane {
                   "container": [Circular],
@@ -3340,6 +3349,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isPreferredApiMongoDB": [Function],
                 "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
+                "isRefreshingExplorer": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
                 "isSchemaEnabled": [Function],
@@ -3348,6 +3358,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isSparkEnabledForAccount": [Function],
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
+                "isTryCosmosDBSubscription": [Function],
                 "loadQueryPane": LoadQueryPane {
                   "container": [Circular],
                   "files": [Function],
@@ -3461,6 +3472,7 @@ exports[`SettingsComponent renders 1`] = `
                 },
                 "selectedDatabaseId": [Function],
                 "selectedNode": [Function],
+                "serverId": [Function],
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
@@ -4496,6 +4508,7 @@ exports[`SettingsComponent renders 1`] = `
                 "validPartitionKeyValue": [Function],
                 "visible": [Function],
               },
+              "features": [Function],
               "flight": [Function],
               "graphStylingPane": GraphStylingPane {
                 "container": [Circular],
@@ -4536,6 +4549,7 @@ exports[`SettingsComponent renders 1`] = `
               "isPreferredApiMongoDB": [Function],
               "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
+              "isRefreshingExplorer": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
               "isSchemaEnabled": [Function],
@@ -4544,6 +4558,7 @@ exports[`SettingsComponent renders 1`] = `
               "isSparkEnabledForAccount": [Function],
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
+              "isTryCosmosDBSubscription": [Function],
               "loadQueryPane": LoadQueryPane {
                 "container": [Circular],
                 "files": [Function],
@@ -4657,6 +4672,7 @@ exports[`SettingsComponent renders 1`] = `
               },
               "selectedDatabaseId": [Function],
               "selectedNode": [Function],
+              "serverId": [Function],
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

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

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

@@ -23,21 +23,19 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <Text
-              aria-labelledby="description-label"
-              id="description-text-display"
+          <Text
+            aria-labelledby="description-label"
+            id="description-text-display"
+          >
+            this is an example description text.
+             
+            <StyledLinkBase
+              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+              target="_blank"
             >
-              this is an example description text.
-               
-              <StyledLinkBase
-                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-                target="_blank"
-              >
-                Click here for more information.
-              </StyledLinkBase>
-            </Text>
-          </Stack>
+              Click here for more information.
+            </StyledLinkBase>
+          </Text>
         </Stack>
       </StackItem>
     </Stack>
@@ -55,53 +53,51 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (input)"
-              />
-            </StyledLabelBase>
-            <Stack
-              styles={
+          <StyledLabelBase
+            id="throughput-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (input)"
+            />
+          </StyledLabelBase>
+          <Stack
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+            tokens={
+              Object {
+                "childrenGap": 2,
+              }
+            }
+          >
+            <CustomizedSpinButton
+              aria-labelledby="throughput-label"
+              ariaLabel="Throughput (input)"
+              decrementButtonIcon={
                 Object {
-                  "root": Object {
-                    "width": 400,
-                  },
+                  "iconName": "ChevronDownSmall",
                 }
               }
-              tokens={
+              disabled={true}
+              id="throughput-spinner-input"
+              incrementButtonIcon={
                 Object {
-                  "childrenGap": 2,
+                  "iconName": "ChevronUpSmall",
                 }
               }
-            >
-              <CustomizedSpinButton
-                aria-labelledby="throughput-label"
-                ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
-                disabled={true}
-                id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
-                labelPosition={0}
-                max={500}
-                min={400}
-                onDecrement={[Function]}
-                onIncrement={[Function]}
-                onValidate={[Function]}
-                step={10}
-              />
-            </Stack>
+              label=""
+              labelPosition={0}
+              max={500}
+              min={400}
+              onDecrement={[Function]}
+              onIncrement={[Function]}
+              onValidate={[Function]}
+              step={10}
+            />
           </Stack>
         </Stack>
       </StackItem>
@@ -120,39 +116,37 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput2-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (Slider)"
-              />
-            </StyledLabelBase>
-            <div
-              id="throughput2-slider-input"
-            >
-              <StyledSliderBase
-                ariaLabel="Throughput (Slider)"
-                disabled={true}
-                max={500}
-                min={400}
-                onChange={[Function]}
-                step={10}
-                styles={
-                  Object {
-                    "root": Object {
-                      "width": 400,
-                    },
-                    "valueLabel": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                    },
-                  }
+          <StyledLabelBase
+            id="throughput2-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (Slider)"
+            />
+          </StyledLabelBase>
+          <div
+            id="throughput2-slider-input"
+          >
+            <StyledSliderBase
+              ariaLabel="Throughput (Slider)"
+              disabled={true}
+              max={500}
+              min={400}
+              onChange={[Function]}
+              step={10}
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                  "valueLabel": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
                 }
-              />
-            </div>
-          </Stack>
+              }
+            />
+          </div>
         </Stack>
       </StackItem>
     </Stack>
@@ -191,14 +185,16 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="containerId-label"
-            >
-              <ToolTipLabelComponent
-                label="Container id"
-              />
-            </StyledLabelBase>
+          <StyledLabelBase
+            id="containerId-label"
+          >
+            <ToolTipLabelComponent
+              label="Container id"
+            />
+          </StyledLabelBase>
+          <div
+            className="stringInputContainer"
+          >
             <StyledTextFieldBase
               aria-labelledby="containerId-label"
               disabled={true}
@@ -214,7 +210,7 @@ exports[`SmartUiComponent disable all inputs 1`] = `
               type="text"
               value=""
             />
-          </Stack>
+          </div>
         </Stack>
       </StackItem>
     </Stack>
@@ -232,31 +228,29 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="analyticalStore-label"
-            >
-              <ToolTipLabelComponent
-                label="Analytical Store"
-              />
-            </StyledLabelBase>
-            <StyledToggleBase
-              aria-labelledby="analyticalStore-label"
-              checked={false}
-              disabled={true}
-              id="analyticalStore-toggle-input"
-              offText="Disabled"
-              onChange={[Function]}
-              onText="Enabled"
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="analyticalStore-label"
+          >
+            <ToolTipLabelComponent
+              label="Analytical Store"
             />
-          </Stack>
+          </StyledLabelBase>
+          <StyledToggleBase
+            aria-labelledby="analyticalStore-label"
+            checked={false}
+            disabled={true}
+            id="analyticalStore-toggle-input"
+            offText="Disabled"
+            onChange={[Function]}
+            onText="Enabled"
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
         </Stack>
       </StackItem>
     </Stack>
@@ -274,51 +268,48 @@ exports[`SmartUiComponent disable all inputs 1`] = `
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="database-label"
-            >
-              <ToolTipLabelComponent
-                label="Database"
-              />
-            </StyledLabelBase>
-            <StyledWithResponsiveMode
-              aria-labelledby="database-label"
-              disabled={true}
-              dropdownWidth="auto"
-              id="database-dropdown-input"
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": "db1",
-                    "text": "Database 1",
-                  },
-                  Object {
-                    "key": "db2",
-                    "text": "Database 2",
-                  },
-                  Object {
-                    "key": "db3",
-                    "text": "Database 3",
-                  },
-                ]
-              }
-              selectedKey="db2"
-              styles={
-                Object {
-                  "dropdown": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="database-label"
+          >
+            <ToolTipLabelComponent
+              label="Database"
             />
-          </Stack>
+          </StyledLabelBase>
+          <StyledWithResponsiveMode
+            aria-labelledby="database-label"
+            disabled={true}
+            id="database-dropdown-input"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "key": "db1",
+                  "text": "Database 1",
+                },
+                Object {
+                  "key": "db2",
+                  "text": "Database 2",
+                },
+                Object {
+                  "key": "db3",
+                  "text": "Database 3",
+                },
+              ]
+            }
+            selectedKey="db2"
+            styles={
+              Object {
+                "dropdown": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                },
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
         </Stack>
       </StackItem>
     </Stack>
@@ -349,21 +340,19 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <Text
-              aria-labelledby="description-label"
-              id="description-text-display"
+          <Text
+            aria-labelledby="description-label"
+            id="description-text-display"
+          >
+            this is an example description text.
+             
+            <StyledLinkBase
+              href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
+              target="_blank"
             >
-              this is an example description text.
-               
-              <StyledLinkBase
-                href="https://docs.microsoft.com/en-us/azure/cosmos-db/introduction"
-                target="_blank"
-              >
-                Click here for more information.
-              </StyledLinkBase>
-            </Text>
-          </Stack>
+              Click here for more information.
+            </StyledLinkBase>
+          </Text>
         </Stack>
       </StackItem>
     </Stack>
@@ -381,53 +370,51 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (input)"
-              />
-            </StyledLabelBase>
-            <Stack
-              styles={
+          <StyledLabelBase
+            id="throughput-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (input)"
+            />
+          </StyledLabelBase>
+          <Stack
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+            tokens={
+              Object {
+                "childrenGap": 2,
+              }
+            }
+          >
+            <CustomizedSpinButton
+              aria-labelledby="throughput-label"
+              ariaLabel="Throughput (input)"
+              decrementButtonIcon={
                 Object {
-                  "root": Object {
-                    "width": 400,
-                  },
+                  "iconName": "ChevronDownSmall",
                 }
               }
-              tokens={
+              disabled={false}
+              id="throughput-spinner-input"
+              incrementButtonIcon={
                 Object {
-                  "childrenGap": 2,
+                  "iconName": "ChevronUpSmall",
                 }
               }
-            >
-              <CustomizedSpinButton
-                aria-labelledby="throughput-label"
-                ariaLabel="Throughput (input)"
-                decrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronDownSmall",
-                  }
-                }
-                disabled={false}
-                id="throughput-spinner-input"
-                incrementButtonIcon={
-                  Object {
-                    "iconName": "ChevronUpSmall",
-                  }
-                }
-                label=""
-                labelPosition={0}
-                max={500}
-                min={400}
-                onDecrement={[Function]}
-                onIncrement={[Function]}
-                onValidate={[Function]}
-                step={10}
-              />
-            </Stack>
+              label=""
+              labelPosition={0}
+              max={500}
+              min={400}
+              onDecrement={[Function]}
+              onIncrement={[Function]}
+              onValidate={[Function]}
+              step={10}
+            />
           </Stack>
         </Stack>
       </StackItem>
@@ -446,38 +433,36 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="throughput2-label"
-            >
-              <ToolTipLabelComponent
-                label="Throughput (Slider)"
-              />
-            </StyledLabelBase>
-            <div
-              id="throughput2-slider-input"
-            >
-              <StyledSliderBase
-                ariaLabel="Throughput (Slider)"
-                max={500}
-                min={400}
-                onChange={[Function]}
-                step={10}
-                styles={
-                  Object {
-                    "root": Object {
-                      "width": 400,
-                    },
-                    "valueLabel": Object {
-                      "color": "#393939",
-                      "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                      "fontSize": 12,
-                    },
-                  }
+          <StyledLabelBase
+            id="throughput2-label"
+          >
+            <ToolTipLabelComponent
+              label="Throughput (Slider)"
+            />
+          </StyledLabelBase>
+          <div
+            id="throughput2-slider-input"
+          >
+            <StyledSliderBase
+              ariaLabel="Throughput (Slider)"
+              max={500}
+              min={400}
+              onChange={[Function]}
+              step={10}
+              styles={
+                Object {
+                  "root": Object {
+                    "width": 400,
+                  },
+                  "valueLabel": Object {
+                    "color": "#393939",
+                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                    "fontSize": 12,
+                  },
                 }
-              />
-            </div>
-          </Stack>
+              }
+            />
+          </div>
         </Stack>
       </StackItem>
     </Stack>
@@ -516,14 +501,16 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="containerId-label"
-            >
-              <ToolTipLabelComponent
-                label="Container id"
-              />
-            </StyledLabelBase>
+          <StyledLabelBase
+            id="containerId-label"
+          >
+            <ToolTipLabelComponent
+              label="Container id"
+            />
+          </StyledLabelBase>
+          <div
+            className="stringInputContainer"
+          >
             <StyledTextFieldBase
               aria-labelledby="containerId-label"
               id="containerId-textField-input"
@@ -538,7 +525,7 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
               type="text"
               value=""
             />
-          </Stack>
+          </div>
         </Stack>
       </StackItem>
     </Stack>
@@ -556,30 +543,28 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="analyticalStore-label"
-            >
-              <ToolTipLabelComponent
-                label="Analytical Store"
-              />
-            </StyledLabelBase>
-            <StyledToggleBase
-              aria-labelledby="analyticalStore-label"
-              checked={false}
-              id="analyticalStore-toggle-input"
-              offText="Disabled"
-              onChange={[Function]}
-              onText="Enabled"
-              styles={
-                Object {
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="analyticalStore-label"
+          >
+            <ToolTipLabelComponent
+              label="Analytical Store"
             />
-          </Stack>
+          </StyledLabelBase>
+          <StyledToggleBase
+            aria-labelledby="analyticalStore-label"
+            checked={false}
+            id="analyticalStore-toggle-input"
+            offText="Disabled"
+            onChange={[Function]}
+            onText="Enabled"
+            styles={
+              Object {
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
         </Stack>
       </StackItem>
     </Stack>
@@ -597,50 +582,47 @@ exports[`SmartUiComponent should render and honor input's hidden, disabled state
     >
       <StackItem>
         <Stack>
-          <Stack>
-            <StyledLabelBase
-              id="database-label"
-            >
-              <ToolTipLabelComponent
-                label="Database"
-              />
-            </StyledLabelBase>
-            <StyledWithResponsiveMode
-              aria-labelledby="database-label"
-              dropdownWidth="auto"
-              id="database-dropdown-input"
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": "db1",
-                    "text": "Database 1",
-                  },
-                  Object {
-                    "key": "db2",
-                    "text": "Database 2",
-                  },
-                  Object {
-                    "key": "db3",
-                    "text": "Database 3",
-                  },
-                ]
-              }
-              selectedKey="db2"
-              styles={
-                Object {
-                  "dropdown": Object {
-                    "color": "#393939",
-                    "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
-                    "fontSize": 12,
-                  },
-                  "root": Object {
-                    "width": 400,
-                  },
-                }
-              }
+          <StyledLabelBase
+            id="database-label"
+          >
+            <ToolTipLabelComponent
+              label="Database"
             />
-          </Stack>
+          </StyledLabelBase>
+          <StyledWithResponsiveMode
+            aria-labelledby="database-label"
+            id="database-dropdown-input"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "key": "db1",
+                  "text": "Database 1",
+                },
+                Object {
+                  "key": "db2",
+                  "text": "Database 2",
+                },
+                Object {
+                  "key": "db3",
+                  "text": "Database 3",
+                },
+              ]
+            }
+            selectedKey="db2"
+            styles={
+              Object {
+                "dropdown": Object {
+                  "color": "#393939",
+                  "fontFamily": "wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif",
+                  "fontSize": 12,
+                },
+                "root": Object {
+                  "width": 400,
+                },
+              }
+            }
+          />
         </Stack>
       </StackItem>
     </Stack>

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

@@ -48,7 +48,6 @@ 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";
@@ -164,6 +163,8 @@ export default class Explorer {
   public isAccountReady: ko.Observable<boolean>;
   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,6 +186,11 @@ export default class Explorer {
   public selectedCollectionId: ko.Computed<string>;
   public isLeftPaneExpanded: ko.Observable<boolean>;
   public selectedNode: ko.Observable<ViewModels.TreeNode>;
+  /**
+   * @deprecated
+   * Use a local loading state and spinner instead. Using a global isRefreshing state causes problems.
+   * */
+  public isRefreshingExplorer: ko.Observable<boolean>;
   private resourceTree: ResourceTreeAdapter;
 
   // Resource Token
@@ -294,6 +300,22 @@ 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._isInitializingNotebooks = false;
     this.arcadiaToken = ko.observable<string>();
@@ -329,7 +351,7 @@ export default class Explorer {
             this.isNotebookEnabled(
               userContext.authType !== AuthType.ResourceToken &&
                 ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
-                  userContext.features.enableNotebooks)
+                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
             );
 
             TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
@@ -351,7 +373,7 @@ export default class Explorer {
                 this.isSparkEnabledForAccount() &&
                 this.arcadiaWorkspaces() &&
                 this.arcadiaWorkspaces().length > 0) ||
-                userContext.features.enableSpark
+                this.isFeatureEnabled(Constants.Features.enableSpark)
             );
             if (this.isSparkEnabled()) {
               appInsights.trackEvent(
@@ -375,7 +397,10 @@ 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>();
@@ -386,9 +411,11 @@ export default class Explorer {
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
     this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
-    this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
+    this.canExceedMaximumValue = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.canExceedMaximumValue)
+    );
 
-    this.isSchemaEnabled = ko.computed<boolean>(() => userContext.features.enableSchema);
+    this.isSchemaEnabled = ko.computed<boolean>(() => this.isFeatureEnabled(Constants.Features.enableSchema));
 
     this.isAutoscaleDefaultEnabled = ko.observable<boolean>(false);
 
@@ -468,7 +495,7 @@ export default class Explorer {
     });
 
     this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
-      if (userContext.features.enableFixedCollectionWithSharedThroughput) {
+      if (this.isFeatureEnabled(Constants.Features.enableFixedCollectionWithSharedThroughput)) {
         return true;
       }
 
@@ -527,7 +554,9 @@ export default class Explorer {
       () =>
         configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
     );
-    this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
+    this.isRightPanelV2Enabled = ko.computed<boolean>(() =>
+      this.isFeatureEnabled(Constants.Features.enableRightPanelV2)
+    );
     this.defaultExperience.subscribe((defaultExperience: string) => {
       if (
         defaultExperience &&
@@ -878,29 +907,42 @@ export default class Explorer {
     });
 
     // Override notebook server parameters from URL parameters
-    if (userContext.features.notebookServerUrl && userContext.features.notebookServerToken) {
-      this.notebookServerInfo({
-        notebookServerEndpoint: userContext.features.notebookServerUrl,
-        authToken: userContext.features.notebookServerToken,
-      });
-    }
+    const featureSubcription = this.features.subscribe((features) => {
+      const serverInfo = this.notebookServerInfo();
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
+        serverInfo.notebookServerEndpoint = features[Constants.Features.notebookServerUrl];
+      }
 
-    if (userContext.features.notebookBasePath) {
-      this.notebookBasePath(userContext.features.notebookBasePath);
-    }
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        serverInfo.authToken = features[Constants.Features.notebookServerToken];
+      }
+      this.notebookServerInfo(serverInfo);
+      this.notebookServerInfo.valueHasMutated();
 
-    if (userContext.features.livyEndpoint) {
-      this.sparkClusterConnectionInfo({
-        userName: undefined,
-        password: undefined,
-        endpoints: [
-          {
-            endpoint: userContext.features.livyEndpoint,
-            kind: DataModels.SparkClusterEndpointKind.Livy,
-          },
-        ],
-      });
-    }
+      if (this.isFeatureEnabled(Constants.Features.notebookBasePath)) {
+        this.notebookBasePath(features[Constants.Features.notebookBasePath]);
+      }
+
+      if (this.isFeatureEnabled(Constants.Features.livyEndpoint)) {
+        this.sparkClusterConnectionInfo({
+          userName: undefined,
+          password: undefined,
+          endpoints: [
+            {
+              endpoint: features[Constants.Features.livyEndpoint],
+              kind: DataModels.SparkClusterEndpointKind.Livy,
+            },
+          ],
+        });
+        this.sparkClusterConnectionInfo.valueHasMutated();
+      }
+
+      if (this.isFeatureEnabled(Constants.Features.enableSDKoperations)) {
+        updateUserContext({ useSDKOperations: true });
+      }
+
+      featureSubcription.dispose();
+    });
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -984,6 +1026,20 @@ export default class Explorer {
     return this.selectedNode() == null;
   }
 
+  public isFeatureEnabled(feature: string): boolean {
+    const features = this.features();
+
+    if (!features) {
+      return false;
+    }
+
+    if (feature in features && features[feature]) {
+      return true;
+    }
+
+    return false;
+  }
+
   public logConsoleData(consoleData: ConsoleData): void {
     this.setNotificationConsoleData(consoleData);
   }
@@ -1030,6 +1086,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,
     });
@@ -1059,19 +1116,22 @@ export default class Explorer {
         this.deleteDatabasesFromList(deltaDatabases.toDelete);
         this.selectedNode(currentlySelectedNode);
         this._setLoadingStatusText("Fetching containers...");
-        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
-          () => {
-            this._setLoadingStatusText("Successfully fetched containers.");
-            deferred.resolve();
-          },
-          (reason) => {
-            this._setLoadingStatusText("Failed to fetch containers.");
-            deferred.reject(reason);
-          }
-        );
+        this.refreshAndExpandNewDatabases(deltaDatabases.toAdd)
+          .then(
+            () => {
+              this._setLoadingStatusText("Successfully fetched containers.");
+              deferred.resolve();
+            },
+            (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(
@@ -1131,6 +1191,7 @@ export default class Explorer {
       description: "Refresh button clicked",
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
+    this.isRefreshingExplorer(true);
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
@@ -1226,12 +1287,12 @@ export default class Explorer {
       throw error;
     } finally {
       // Overwrite with feature flags
-      if (userContext.features.notebookServerUrl) {
-        connectionInfo.notebookServerEndpoint = userContext.features.notebookServerUrl;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerUrl)) {
+        connectionInfo.notebookServerEndpoint = this.features()[Constants.Features.notebookServerUrl];
       }
 
-      if (userContext.features.notebookServerToken) {
-        connectionInfo.authToken = userContext.features.notebookServerToken;
+      if (this.isFeatureEnabled(Constants.Features.notebookServerToken)) {
+        connectionInfo.authToken = this.features()[Constants.Features.notebookServerToken];
       }
 
       this.notebookServerInfo(connectionInfo);
@@ -1381,12 +1442,15 @@ export default class Explorer {
       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.setFeatureFlagsFromFlights(inputs.flights);
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
@@ -1467,9 +1531,9 @@ export default class Explorer {
 
   public isRunningOnNationalCloud(): boolean {
     return (
-      userContext.portalEnv === "blackforest" ||
-      userContext.portalEnv === "fairfax" ||
-      userContext.portalEnv === "mooncake"
+      this.serverId() === Constants.ServerIds.blackforest ||
+      this.serverId() === Constants.ServerIds.fairfax ||
+      this.serverId() === Constants.ServerIds.mooncake
     );
   }
 
@@ -2334,12 +2398,10 @@ export default class Explorer {
   public onNewCollectionClicked(): void {
     if (this.isPreferredApiCassandra()) {
       this.cassandraAddCollectionPane.open();
-    } else if (userContext.features.enableReactPane) {
-      this.openAddCollectionPanel();
     } else {
       this.addCollectionPane.open(this.selectedDatabaseId());
-      document.getElementById("linkAddCollection").focus();
     }
+    document.getElementById("linkAddCollection").focus();
   }
 
   private refreshCommandBarButtons(): void {
@@ -2468,7 +2530,7 @@ export default class Explorer {
   }
 
   public openDeleteCollectionConfirmationPane(): void {
-    userContext.features.enableKOPanel
+    this.isFeatureEnabled(Constants.Features.enableKOPanel)
       ? this.deleteCollectionConfirmationPane.open()
       : this.openSidePanel(
           "Delete Collection",
@@ -2479,16 +2541,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/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

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

src/Explorer/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";
@@ -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/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(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, 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(),
@@ -994,7 +993,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.container.openEnableSynapseLinkDialog();
   }
 
-  public ttl90DaysEnabled: () => boolean = () => userContext.features.ttl90Days;
+  public ttl90DaysEnabled: () => boolean = () => this.container.isFeatureEnabled(Constants.Features.ttl90Days);
 
   public isValid(): boolean {
     // TODO add feature flag that disables validation for customers with custom accounts
@@ -1202,7 +1201,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
     if (this.isAnalyticalStorageOn()) {
       // TODO: always default to 90 days once the backend hotfix is deployed
-      return userContext.features.ttl90Days
+      return this.container.isFeatureEnabled(Constants.Features.ttl90Days)
         ? Constants.AnalyticalStorageTtl.Days90
         : Constants.AnalyticalStorageTtl.Infinite;
     }

src/Explorer/Panes/AddDatabasePane.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(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, 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.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(
-          offerThroughput,
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(offerThroughput, serverId, 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(
-          this.keyspaceThroughput(),
-          userContext.portalEnv,
-          regions,
-          multimaster
-        );
+        estimatedSpend = PricingUtils.getEstimatedSpendHtml(this.keyspaceThroughput(), serverId, 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 * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../UserContext";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { PanelErrorComponent, PanelErrorProps } from "./PanelErrorComponent";
+import DeleteFeedback from "../../Common/DeleteFeedback";
 import Explorer from "../Explorer";
-import { PanelFooterComponent } from "./PanelFooterComponent";
-import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
-import { PanelLoadingScreen } from "./PanelLoadingScreen";
+import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares.gif";
+
 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)}>
-        <PanelInfoErrorComponent {...this.getPanelErrorProps()} />
+      <div className="panelContentContainer">
+        <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" />
-        {this.state.isExecuting && <PanelLoadingScreen />}
-      </form>
+        <PanelFooterComponent buttonLabel="OK" onOKButtonClicked={() => this.submit()} />
+        <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" hidden={!this.state.isExecuting}>
+          <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> {
-    event.preventDefault();
-
+  public async submit(): Promise<void> {
     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;
-
-  i {
-    font-size: @WarningErrorIconSize;
-    width: @WarningErrorIconSize;
-    margin-left: @SmallSpace;
-  }
+  margin-bottom: 24px;
 
   .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 {
-  padding: 20px 34px;
-  border-top: solid 1px #bbbbbb;
-
-  & button {
-    height: 30px;
-  }
+.panelFooter 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 {
-  height: string;
-}
-
-export class PanelContainerComponent extends React.Component<PanelContainerProps, PanelContainerState> {
+export class PanelContainerComponent extends React.Component<PanelContainerProps> {
   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/__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,
-      },
-      "header": Object {
-        "padding": "0 0 8px 34px",
+        "padding": "24px 34px 20px 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,
-      },
-      "header": Object {
-        "padding": "0 0 8px 34px",
+        "padding": "24px 34px 20px 34px",
       },
       "navigation": Object {
         "borderBottom": "1px solid #cccccc",

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 * as ViewModels from "../../../Contracts/ViewModels";
+import Q from "q";
+
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-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 { CassandraTableKey, CassandraAPIDataClient } from "../TableDataClient";
 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();
-          itemB = <string>(<any>rowB[col])._?.toLowerCase();
+          itemA = <string>(<any>rowA[col])._.toLowerCase();
+          itemB = <string>(<any>rowB[col])._.toLowerCase();
       }
       var compareResult: number = itemA < itemB ? -1 : itemA > itemB ? 1 : 0;
       if (compareResult !== 0) {

src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts

@@ -1,17 +1,17 @@
 import * as ko from "knockout";
-import { KeyCodes } from "../../../Common/Constants";
-import * as Constants from "../Constants";
+import * as CustomTimestampHelper from "./CustomTimestampHelper";
 import { getQuotedCqlIdentifier } from "../CqlUtilities";
-import * as DataTableUtilities from "../DataTable/DataTableUtilities";
-import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
-import * as TableEntityProcessor from "../TableEntityProcessor";
-import * as Utilities from "../Utilities";
+import QueryClauseViewModel from "./QueryClauseViewModel";
 import ClauseGroup from "./ClauseGroup";
 import ClauseGroupViewModel from "./ClauseGroupViewModel";
-import * as CustomTimestampHelper from "./CustomTimestampHelper";
-import * as DateTimeUtilities from "./DateTimeUtilities";
-import QueryClauseViewModel from "./QueryClauseViewModel";
 import QueryViewModel from "./QueryViewModel";
+import * as Constants from "../Constants";
+import TableEntityListViewModel from "../DataTable/TableEntityListViewModel";
+import * as DateTimeUtilities from "./DateTimeUtilities";
+import * as DataTableUtilities from "../DataTable/DataTableUtilities";
+import * as TableEntityProcessor from "../TableEntityProcessor";
+import * as Utilities from "../Utilities";
+import { KeyCodes } from "../../../Common/Constants";
 
 export default class QueryBuilderViewModel {
   /* Labels */
@@ -182,7 +182,7 @@ export default class QueryBuilderViewModel {
             value = `["${TableEntityProcessor.keyProperties.PartitionKey}"]`;
             filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
           } else if (value === Constants.EntityKeyNames.RowKey) {
-            value = `["${TableEntityProcessor.keyProperties.Id}"]`;
+            value = `["${TableEntityProcessor.keyProperties.Id2}"]`;
             filterString = filterString.concat(filterString === "SELECT" ? " c" : ", c");
           } else {
             if (value === Constants.EntityKeyNames.Timestamp) {

src/Explorer/Tables/TableEntityProcessor.ts

@@ -1,6 +1,6 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import * as Constants from "./Constants";
 import * as Entities from "./Entities";
+import * as Constants from "./Constants";
 import * as DateTimeUtilities from "./QueryBuilder/DateTimeUtilities";
 
 // For use exclusively with Tables API.
@@ -36,7 +36,7 @@ export function convertDocumentsToEntities(documents: any[]): Entities.ITableEnt
   let results: Entities.ITableEntityForTablesAPI[] = [];
   documents &&
     documents.forEach((document) => {
-      if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id)) {
+      if (!document.hasOwnProperty(keyProperties.PartitionKey) || !document.hasOwnProperty(keyProperties.Id2)) {
         //Document does not match the current required format for Tables, so we ignore it
         return; // The rest of the key properties should be guaranteed as DocumentDB properties
       }

src/Explorer/Tabs/ConflictsTab.ts

@@ -26,10 +26,8 @@ import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import { deleteConflict } from "../../Common/dataAccess/deleteConflict";
 import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
-import template from "./ConflictsTab.html";
 
 export default class ConflictsTab extends TabsBase {
-  public static readonly component = { name: "conflicts-tab", template };
   public selectedConflictId: ko.Observable<ConflictId>;
   public selectedConflictContent: ViewModels.Editable<string>;
   public selectedConflictCurrent: ViewModels.Editable<string>;

src/Explorer/Tabs/DatabaseSettingsTab.ts

@@ -17,7 +17,6 @@ import * as AutoPilotUtils from "../../Utils/AutoPilotUtils";
 import * as PricingUtils from "../../Utils/PricingUtils";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer";
-import template from "./DatabaseSettingsTab.html";
 import TabsBase from "./TabsBase";
 
 const updateThroughputBeyondLimitWarningMessage: string = `
@@ -45,7 +44,6 @@ const throughputApplyLongDelayMessage = (isAutoscale: boolean, throughput: numbe
   Database: ${databaseName}, ${currentThroughput(isAutoscale, throughput)}`;
 
 export default class DatabaseSettingsTab extends TabsBase implements ViewModels.WaitsForTemplate {
-  public static readonly component = { name: "database-settings-tab", template };
   // editables
   public isAutoPilotSelected: ViewModels.Editable<boolean>;
   public throughput: ViewModels.Editable<number>;
@@ -138,6 +136,7 @@ export default class DatabaseSettingsTab extends TabsBase implements ViewModels.
         return "";
       }
 
+      const serverId = this.container.serverId();
       const regions =
         (account &&
           account.properties &&
@@ -151,14 +150,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
         );
@@ -403,6 +402,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);

src/Explorer/Tabs/DocumentsTab.ts

@@ -37,10 +37,8 @@ import { readDocument } from "../../Common/dataAccess/readDocument";
 import { deleteDocument } from "../../Common/dataAccess/deleteDocument";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import { createDocument } from "../../Common/dataAccess/createDocument";
-import template from "./DocumentsTab.html";
 
 export default class DocumentsTab extends TabsBase {
-  public static readonly component = { name: "documents-tab", template };
   public selectedDocumentId: ko.Observable<DocumentId>;
   public selectedDocumentContent: ViewModels.Editable<string>;
   public initialDocumentContent: ko.Observable<string>;
@@ -882,6 +880,8 @@ export default class DocumentsTab extends TabsBase {
       buttons.push(DocumentsTab._createUploadButton(this.collection.container));
     }
 
+    const features = this.collection.container.features() || {};
+
     return buttons;
   }
 

src/Explorer/Tabs/GalleryTab.tsx

@@ -6,7 +6,6 @@ import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { JunoClient, IGalleryItem } from "../../Juno/JunoClient";
-import template from "./GalleryTab.html";
 
 interface GalleryTabOptions extends ViewModels.TabOptions {
   account: DatabaseAccount;
@@ -22,7 +21,6 @@ interface GalleryTabOptions extends ViewModels.TabOptions {
  * Notebook gallery tab
  */
 export default class GalleryTab extends TabsBase {
-  public static readonly component = { name: "gallery-tab", template };
   private container: Explorer;
   private galleryAndNotebookViewerComponentProps: GalleryAndNotebookViewerComponentProps;
   public galleryAndNotebookViewerComponentAdapter: GalleryAndNotebookViewerComponentAdapter;

src/Explorer/Tabs/GraphTab.ts

@@ -10,7 +10,6 @@ import GraphStylingPane from "../Panes/GraphStylingPane";
 import NewVertexPane from "../Panes/NewVertexPane";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./GraphTab.html";
 
 export interface GraphIconMap {
   [key: string]: { data: string; format: string };
@@ -37,7 +36,6 @@ interface GraphTabOptions extends ViewModels.TabOptions {
 }
 
 export default class GraphTab extends TabsBase {
-  public static readonly component = { name: "graph-tab", template };
   // Graph default configuration
   public static readonly DEFAULT_NODE_CAPTION = "id";
   private static readonly LINK_COLOR = "#aaa";

src/Explorer/Tabs/MongoDocumentsTab.html

@@ -0,0 +1,426 @@
+<div
+  class="tab-pane active tabdocuments flexContainer"
+  data-bind="
+    attr:{
+        id: tabId
+    },
+    visible: isActive"
+  role="tabpanel"
+>
+  <!-- Documents Tab Command Bar - Start -->
+  <div class="contentdiv">
+    <div class="tabCommandButton documentMenu">
+      <!-- New Document - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onNewDocumentClick,
+                    visible: newDocumentButton.visible() && newDocumentButton.enabled()"
+      >
+        <img class="commandIcon" src="/createDoc.svg" />New Document
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: newDocumentButton.visible() && !newDocumentButton.enabled()"
+      >
+        <img class="commandIcon" src="/createDoc-disabled.svg" />New Document
+      </span>
+      <!-- New Document - End -->
+
+      <!-- New Query - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    visible: !$root.isPreferredApiMongoDB,
+                click: collection.onNewQueryClick"
+      >
+        <img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New SQL Query
+      </span>
+      <span
+        class="commandButton"
+        data-bind="
+                visible: $root.isPreferredApiMongoDB,
+                click: collection.onNewMongoQueryClick"
+      >
+        <img class="commandIcon" src="/AddSqlQuery_16x16.svg" /> New Query
+      </span>
+      <!-- New Query - End -->
+
+      <!-- Save New - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onSaveNewDocumentClick,
+                    visible: saveNewDocumentButton.visible() && saveNewDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-cosmos.svg" />Save
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: saveNewDocumentButton.visible() && !saveNewDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-disabled.svg" />Save
+      </span>
+      <!-- Save New - End -->
+
+      <!-- Discard New - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onRevertNewDocumentClick,
+                    visible: discardNewDocumentChangesButton.visible() && discardNewDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard.svg" />Discard
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: discardNewDocumentChangesButton.visible() && !discardNewDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard-disabled.svg" />Discard
+      </span>
+      <!-- Discard New - End -->
+
+      <!-- Save Exisiting - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onSaveExisitingDocumentClick,
+                    visible: saveExisitingDocumentButton.visible() && saveExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-cosmos.svg" />Update
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: saveExisitingDocumentButton.visible() && !saveExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/save-disabled.svg" />Update
+      </span>
+      <!-- Save Exisiting - End -->
+
+      <!-- Discard Exisiting - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onRevertExisitingDocumentClick,
+                    visible: discardExisitingDocumentChangesButton.visible() && discardExisitingDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard.svg" />Discard
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: discardExisitingDocumentChangesButton.visible() && !discardExisitingDocumentChangesButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/discard-disabled.svg" />Discard
+      </span>
+      <!-- Discard Exisiting - End -->
+
+      <!-- Delete Exisiting - Start -->
+      <span
+        class="commandButton"
+        data-bind="
+                    click: onDeleteExisitingDocumentClick,
+                    visible: deleteExisitingDocumentButton.visible() && deleteExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/delete.svg" />Delete
+      </span>
+      <span
+        class="commandButton tabCommandDisabled"
+        data-bind="
+                    visible: deleteExisitingDocumentButton.visible() && !deleteExisitingDocumentButton.enabled()"
+      >
+        <img class="imgiconwidth" src="/delete-disabled.svg" />Delete
+      </span>
+      <!-- Delete Exisiting - End -->
+    </div>
+  </div>
+  <script type="text/html" id="toolbarItemTemplate">
+    <!-- ko if: type === "action" -->
+    <div class="toolbar-group" data-bind="visible: visible">
+      <button
+        class="toolbar-group-button"
+        data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
+      >
+        <div class="toolbar-group-button-icon">
+          <div class="toolbar_icon" data-bind="icon: icon"></div>
+        </div>
+        <span data-bind="text: displayName"></span>
+      </button>
+    </div>
+    <!-- /ko -->
+
+    <!-- ko if: type === "toggle" -->
+    <div class="toolbar-group" data-bind="visible: visible">
+      <button
+        class="toolbar-group-button toggle-button"
+        data-bind="hasFocus: focused, attr: {id: id, title: title}, event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
+      >
+        <div class="toolbar-group-button-icon" data-bind="css: { 'toggle-checked': checked }">
+          <div class="toolbar_icon" data-bind="icon: icon"></div>
+        </div>
+        <span data-bind="text: displayName"></span>
+      </button>
+    </div>
+    <!-- /ko -->
+    <!-- ko if: type === "dropdown" -->
+    <div class="toolbar-group" data-bind="visible: visible">
+      <div class="dropdown" data-bind="attr: {id: (id + '-dropdown')}">
+        <button
+          role="menu"
+          class="toolbar-group-button"
+          data-bind="hasFocus: focused, attr: {id: id, title: title, 'aria-label': displayName},  event: { mousedown: mouseDown, keydown: keyDown, keyup: keyUp }, enable: enabled"
+        >
+          <div class="toolbar-group-button-icon">
+            <div class="toolbar_icon" data-bind="icon: icon"></div>
+          </div>
+          <span data-bind="text: displayName"></span>
+        </button>
+      </div>
+    </div>
+    <!-- /ko -->
+
+    <!-- ko if: type === "separator" -->
+    <div class="toolbar-group vertical-separator" data-bind="visible: visible"></div>
+    <!-- /ko -->
+  </script>
+  <!-- Documents Tab Command Bar - End -->
+  <!-- ko if: false -->
+  <!-- Messagebox Ok Cancel- Start -->
+  <div class="messagebox-background">
+    <div class="messagebox">
+      <h2 class="messagebox-title">Title</h2>
+      <div class="messagebox-text" tabindex="0">Text</div>
+      <div class="messagebox-buttons">
+        <div class="messagebox-buttons-container">
+          <button value="ok" class="messagebox-button-primary">Ok</button>
+          <button value="cancel" class="messagebox-button-default">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Messagebox OK Cancel - End -->
+  <!-- /ko -->
+
+  <!-- Filter - Start -->
+  <div class="filterdivs">
+    <!-- Read-only Filter - Start -->
+    <div
+      class="filterDocCollapsed"
+      data-bind="
+                visible: !isFilterExpanded() && !$root.isPreferredApiMongoDB()"
+    >
+      SELECT * FROM c
+      <span
+        data-bind="
+                    text: appliedFilter"
+      ></span>
+      <button
+        class="filterbtnstyle queryButton"
+        data-bind="
+                    click: onShowFilterClick"
+      >
+        Edit Filter
+      </button>
+    </div>
+    <div
+      class="filterDocCollapsed"
+      data-bind="
+                visible: !isFilterExpanded() && $root.isPreferredApiMongoDB()"
+    >
+      <span
+        data-bind="
+                visible: appliedFilter().length > 0"
+        >Filter :
+      </span>
+      <span
+        data-bind="
+                visible: !appliedFilter().length > 0"
+        >No filter applied</span
+      >
+      <span
+        data-bind="
+                text: appliedFilter"
+      ></span>
+      <button
+        class="filterbtnstyle queryButton"
+        data-bind="
+                    click: onShowFilterClick"
+      >
+        Edit Filter
+      </button>
+    </div>
+    <!-- Read-only Filter - End -->
+
+    <!-- Editable Filter - start -->
+    <div
+      class="filterDocExpanded"
+      data-bind="
+                visible: isFilterExpanded"
+    >
+      <div>
+        <div>
+          <span
+            class="filterspan"
+            data-bind="
+                        visible: !$root.isPreferredApiMongoDB()"
+          >
+            SELECT * FROM c
+          </span>
+
+          <input
+            type="text"
+            list="filtersList"
+            class="querydropdown"
+            title="Type a query predicate or choose one from the list."
+            data-bind="
+                                attr:{
+                                    placeholder:$root.isPreferredApiMongoDB()?'Type a query predicate (e.g., {´a´:´foo´}), or choose one from the drop down list, or leave empty to query all documents.':'Type a query predicate (e.g., WHERE c.id=´1´), or choose one from the drop down list, or leave empty to query all documents.'
+                                },
+                                textInput: filterContent"
+          />
+
+          <datalist
+            id="filtersList"
+            data-bind="
+                            foreach: lastFilterContents"
+          >
+            <option
+              data-bind="
+                                value: $data"
+            ></option>
+          </datalist>
+
+          <span class="filterbuttonpad">
+            <button
+              class="filterbtnstyle queryButton"
+              data-bind="
+                                click: refreshDocumentsGrid,
+                                enable: applyFilterButton.enabled"
+            >
+              Apply Filter
+            </button>
+          </span>
+          <span
+            class="filterclose"
+            data-bind="
+                            click: onHideFilterClick"
+          >
+            <img src="/close-black.svg" style="height: 14px; width: 14px" />
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- Editable Filter - End -->
+  </div>
+  <!-- Filter - End -->
+
+  <!-- Ids and Editor - Start -->
+  <div>
+    <div class="row rowoverride documentsTabGridAndEditor">
+      <div class="documentsGridHeaderContainer documentsContainer">
+        <!-- ko if: !partitionKeyProperty -->
+        <table>
+          <tbody>
+            <tr>
+              <!-- ko if: $root.isPreferredApiMongoDB -->
+              <td class="documentsGridHeader">_id</td>
+              <!-- /ko -->
+              <!-- ko if: !$root.isPreferredApiMongoDB() -->
+              <td class="documentsGridHeader">id</td>
+              <!-- /ko -->
+              <td class="refreshColHeader">
+                <img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <!-- /ko -->
+
+        <!-- ko if: partitionKeyProperty -->
+        <table>
+          <tbody>
+            <tr>
+              <td class="documentsGridHeader fixedWidthHeader">_id</td>
+              <td
+                class="documentsGridHeader documentsGridPartition"
+                data-bind="
+                                attr: {
+                                    title: partitionKeyPropertyHeader
+                                },
+                                text: partitionKeyPropertyHeader"
+              ></td>
+              <td class="refreshColHeader">
+                <img class="refreshcol" src="/refresh-cosmos.svg" data-bind="click: refreshDocumentsGrid" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <!-- /ko -->
+      </div>
+      <!-- Document Ids - Start -->
+      <div
+        class="tabdocuments scrollable"
+        data-bind="
+                attr: { 
+                    id: documentContentsGridId,
+                    tabindex: collection.documentIds().length <= 0 ? -1 : 0
+                },
+                style: { height: dataContentsGridScrollHeight },
+                event: { keydown: accessibleDocumentList.onKeyDown }"
+      >
+        <table class="table can-select table-hover dataTable">
+          <tbody id="tbodycontent">
+            <!-- ko foreach: documentIds -->
+            <tr
+              class="pointer accessibleListElement"
+              data-bind="
+                                click: $data.click,
+                                css: {
+                                    gridRowSelected: $parent.selectedDocumentId && $parent.selectedDocumentId() && $parent.selectedDocumentId().rid === $data.rid,
+                                    gridRowHighlighted: $parent.accessibleDocumentList.currentItem() && $parent.accessibleDocumentList.currentItem().rid === $data.rid
+                                }"
+            >
+              <td style="width: 82px">
+                <a
+                  data-bind="
+                                    text: $data.id, attr: { title: $data.id }"
+                ></a>
+              </td>
+              <!-- ko if: $data.partitionKeyProperty -->
+              <td><a data-bind="text: $data.partitionKeyValue, attr: { title: $data.partitionKeyValue }"></a></td>
+              <!-- /ko -->
+            </tr>
+            <!-- /ko -->
+          </tbody>
+        </table>
+
+        <div class="loadMore">
+          <a role="button" data-bind="click: loadNextPage, event: { keypress: onLoadMoreKeyInput }" tabindex="0"
+            >Load more</a
+          >
+        </div>
+      </div>
+      <!-- Document Ids - End -->
+
+      <!-- Editor - Start -->
+      <div id="divcontent" style="float: left; width: calc(100% - 200px)">
+        <div
+          style="height: 100vh; border-left: 1px solid #d6d7d8; float: initial; display: flow-root !important"
+          data-bind="
+                    attr: {
+                        id: documentEditorId
+                    },
+                    css: {
+                        mongoDocumentEditor:$root.isPreferredApiMongoDB()
+                    }"
+        ></div>
+      </div>
+      <!-- Editor - End -->
+    </div>
+  </div>
+  <!-- Ids and Editor - End -->
+</div>

src/Explorer/Tabs/MongoQueryTab.ts

@@ -5,10 +5,8 @@ import QueryTab from "./QueryTab";
 import * as HeadersUtility from "../../Common/HeadersUtility";
 import { queryIterator } from "../../Common/MongoProxyClient";
 import { MinimalQueryIterator } from "../../Common/IteratorUtilities";
-import template from "./MongoQueryTab.html";
 
 export default class MongoQueryTab extends QueryTab {
-  public static readonly component = { name: "mongo-query-tab", template };
   public collection: ViewModels.Collection;
 
   constructor(options: ViewModels.QueryTabOptions) {

src/Explorer/Tabs/MongoShellTab.ts

@@ -1,20 +1,20 @@
-import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
-import { HashMap } from "../../Common/HashMap";
-import { configContext, Platform } from "../../ConfigContext";
+import * as ko from "knockout";
 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 AuthHeadersUtil from "../../Platform/Hosted/Authorization";
 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 template from "./MongoShellTab.html";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import TabsBase from "./TabsBase";
+import { userContext } from "../../UserContext";
+import { configContext, Platform } from "../../ConfigContext";
 
 export default class MongoShellTab extends TabsBase {
-  public static readonly component = { name: "mongo-shell-tab", template };
   public url: ko.Computed<string>;
   private _container: Explorer;
   private _runtimeEndpoint: string;
@@ -33,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/";
       }
 
@@ -85,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

@@ -33,7 +33,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { toJS, stringifyNotebook } from "@nteract/commutable";
 import { appInsights } from "../../Shared/appInsights";
 import { userContext } from "../../UserContext";
-import template from "./NotebookV2Tab.html";
 
 export interface NotebookTabOptions extends ViewModels.TabOptions {
   account: DataModels.DatabaseAccount;
@@ -43,7 +42,6 @@ export interface NotebookTabOptions extends ViewModels.TabOptions {
 }
 
 export default class NotebookTabV2 extends TabsBase {
-  public static readonly component = { name: "notebookv2-tab", template };
   private static clientManager: NotebookClientV2;
   private container: Explorer;
   public notebookPath: ko.Observable<string>;

src/Explorer/Tabs/NotebookViewerTab.tsx

@@ -10,7 +10,6 @@ import TabsBase from "./TabsBase";
 import Explorer from "../Explorer";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./NotebookViewerTab.html";
 
 interface NotebookViewerTabOptions extends ViewModels.TabOptions {
   account: DatabaseAccount;
@@ -39,7 +38,6 @@ class NotebookViewerComponentAdapter implements ReactAdapter {
 }
 
 export default class NotebookViewerTab extends TabsBase {
-  public static readonly component = { name: "notebook-viewer-tab", template };
   private container: Explorer;
   public notebookUrl: string;
 

src/Explorer/Tabs/QueryTab.ts

@@ -17,7 +17,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { queryDocuments } from "../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../Common/dataAccess/queryDocumentsPage";
-import template from "./QueryTab.html";
 
 enum ToggleState {
   Result,
@@ -25,7 +24,6 @@ enum ToggleState {
 }
 
 export default class QueryTab extends TabsBase implements ViewModels.WaitsForTemplate {
-  public static readonly component = { name: "query-tab", template };
   public queryEditorId: string;
   public executeQueryButton: ViewModels.Button;
   public fetchNextPageButton: ViewModels.Button;

src/Explorer/Tabs/QueryTablesTab.ts

@@ -15,11 +15,9 @@ import EditEntityIcon from "../../../images/Edit-entity.svg";
 import DeleteEntitiesIcon from "../../../images/DeleteEntities.svg";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./QueryTablesTab.html";
 
 // Will act as table explorer class
 export default class QueryTablesTab extends TabsBase {
-  public static readonly component = { name: "tables-query-tab", template };
   public collection: ViewModels.Collection;
   public tableEntityListViewModel = ko.observable<TableEntityListViewModel>();
   public queryViewModel = ko.observable<QueryViewModel>();

src/Explorer/Tabs/SettingsTabV2.tsx

@@ -9,10 +9,8 @@ import * as Constants from "../../Common/Constants";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./SettingsTabV2.html";
 
 export class SettingsTabV2 extends TabsBase {
-  public static readonly component = { name: "collection-settings-tab-v2", template };
   public settingsComponentAdapter: SettingsComponentAdapter;
 
   constructor(options: ViewModels.TabOptions) {
@@ -89,7 +87,6 @@ export class CollectionSettingsTabV2 extends SettingsTabV2 {
 }
 
 export class DatabaseSettingsTabV2 extends SettingsTabV2 {
-  public static readonly component = { name: "database-settings-tab-v2", template };
   private notificationRead: ko.Observable<boolean>;
   private notification: DataModels.Notification;
 

src/Explorer/Tabs/StoredProcedureTab.ts

@@ -14,7 +14,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 import StoredProcedure from "../Tree/StoredProcedure";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./StoredProcedureTab.html";
 
 enum ToggleState {
   Result = "result",
@@ -22,7 +21,6 @@ enum ToggleState {
 }
 
 export default class StoredProcedureTab extends ScriptTabBase {
-  public static readonly component = { name: "stored-procedure-tab", template };
   public collection: ViewModels.Collection;
   public node: StoredProcedure;
   public executeResultsEditorId: string;

src/Explorer/Tabs/TabComponents.ts

@@ -0,0 +1,186 @@
+import DocumentsTabTemplate from "./DocumentsTab.html";
+import ConflictsTabTemplate from "./ConflictsTab.html";
+import GraphTabTemplate from "./GraphTab.html";
+import NotebookV2TabTemplate from "./NotebookV2Tab.html";
+import TerminalTabTemplate from "./TerminalTab.html";
+import MongoDocumentsTabTemplate from "./MongoDocumentsTab.html";
+import MongoQueryTabTemplate from "./MongoQueryTab.html";
+import MongoShellTabTemplate from "./MongoShellTab.html";
+import QueryTabTemplate from "./QueryTab.html";
+import QueryTablesTabTemplate from "./QueryTablesTab.html";
+import SettingsTabV2Template from "./SettingsTabV2.html";
+import DatabaseSettingsTabTemplate from "./DatabaseSettingsTab.html";
+import StoredProcedureTabTemplate from "./StoredProcedureTab.html";
+import TriggerTabTemplate from "./TriggerTab.html";
+import UserDefinedFunctionTabTemplate from "./UserDefinedFunctionTab.html";
+import GalleryTabTemplate from "./GalleryTab.html";
+import NotebookViewerTabTemplate from "./NotebookViewerTab.html";
+import TabsManagerTemplate from "./TabsManager.html";
+
+export class TabComponent {
+  constructor(data: any) {
+    return data.data;
+  }
+}
+
+export class TabsManager {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: TabsManagerTemplate,
+    };
+  }
+}
+
+export class DocumentsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: DocumentsTabTemplate,
+    };
+  }
+}
+
+export class ConflictsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: ConflictsTabTemplate,
+    };
+  }
+}
+
+export class GraphTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: GraphTabTemplate,
+    };
+  }
+}
+
+export class NotebookV2Tab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: NotebookV2TabTemplate,
+    };
+  }
+}
+
+export class TerminalTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: TerminalTabTemplate,
+    };
+  }
+}
+
+export class MongoDocumentsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: MongoDocumentsTabTemplate,
+    };
+  }
+}
+
+export class MongoQueryTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: MongoQueryTabTemplate,
+    };
+  }
+}
+
+export class MongoShellTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: MongoShellTabTemplate,
+    };
+  }
+}
+
+export class QueryTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: QueryTabTemplate,
+    };
+  }
+}
+
+export class QueryTablesTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: QueryTablesTabTemplate,
+    };
+  }
+}
+
+export class SettingsTabV2 {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: SettingsTabV2Template,
+    };
+  }
+}
+
+export class DatabaseSettingsTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: DatabaseSettingsTabTemplate,
+    };
+  }
+}
+
+export class StoredProcedureTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: StoredProcedureTabTemplate,
+    };
+  }
+}
+
+export class TriggerTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: TriggerTabTemplate,
+    };
+  }
+}
+
+export class UserDefinedFunctionTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: UserDefinedFunctionTabTemplate,
+    };
+  }
+}
+
+export class GalleryTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: GalleryTabTemplate,
+    };
+  }
+}
+
+export class NotebookViewerTab {
+  constructor() {
+    return {
+      viewModel: TabComponent,
+      template: NotebookViewerTabTemplate,
+    };
+  }
+}

src/Explorer/Tabs/TabsBase.ts

@@ -13,7 +13,6 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu
 
 // TODO: Use specific actions for logging telemetry data
 export default class TabsBase extends WaitsForTemplateViewModel {
-  public static readonly component = { name: "tab", template: "" };
   public closeTabButton: ViewModels.Button;
   public node: ViewModels.TreeNode;
   public collection: ViewModels.CollectionBase;

src/Explorer/Tabs/TabsManager.html

@@ -78,9 +78,77 @@
   <div class="tabPanesContainer">
     <!-- ko foreach: openedTabs -->
     <div class="tabs-container" data-bind="visible: $data.isActive">
-      <span
-        data-bind="class: $data.constructor.component.name, component: { name: $data.constructor.component.name, params: $data }"
-      ></span>
+      <!-- ko if: $data.tabKind === 0 -->
+      <documents-tab params="{data: $data}"></documents-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 1 -->
+      <settings-tab params="{data: $data}"></settings-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 2 -->
+      <stored-procedure-tab params="{data: $data}"></stored-procedure-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 3 -->
+      <user-defined-function-tab params="{data: $data}"></user-defined-function-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 4 -->
+      <trigger-tab params="{data: $data}"></trigger-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 5 -->
+      <query-tab params="{data: $data}"></query-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 6 -->
+      <graph-tab params="{data: $data}"></graph-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 9 -->
+      <tables-query-tab class="flexContainer" params="{data: $data}"></tables-query-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 10 -->
+      <mongo-shell-tab params="{data: $data}"></mongo-shell-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 11 -->
+      <database-settings-tab params="{data: $data}"></database-settings-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 12 -->
+      <conflicts-tab params="{data: $data}"></conflicts-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 14 -->
+      <terminal-tab params="{data: $data}"></terminal-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 15 -->
+      <notebookv2-tab params="{data: $data}"></notebookv2-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 16 -->
+      <spark-master-tab params="{data: $data}"></spark-master-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 17 -->
+      <gallery-tab params="{data: $data}"></gallery-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 18 -->
+      <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 20 -->
+      <collection-settings-tab-v2 params="{data: $data}"></collection-settings-tab-v2>
+      <!-- /ko -->
+
+      <!-- ko if: $data.tabKind === 21 -->
+      <database-settings-tab-v2 params="{data: $data}"></database-settings-tab-v2>
+      <!-- /ko -->
     </div>
     <!-- /ko -->
   </div>

src/Explorer/Tabs/TabsManager.ts

@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import * as ViewModels from "../../Contracts/ViewModels";
+import TabsManagerTemplate from "./TabsManager.html";
 import Explorer from "../Explorer";
 import TabsBase from "./TabsBase";
 
@@ -81,3 +82,14 @@ export class TabsManager {
     return this.activeTab() && this.activeTab().tabKind === tabKind;
   }
 }
+
+function TabsManagerWrapperViewModel(params: { data: TabsManager }) {
+  return params.data;
+}
+
+export function TabsManagerKOComponent(): unknown {
+  return {
+    viewModel: TabsManagerWrapperViewModel,
+    template: TabsManagerTemplate,
+  };
+}

src/Explorer/Tabs/TerminalTab.tsx

@@ -7,7 +7,6 @@ import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import { NotebookTerminalComponent } from "../Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "../Explorer";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
-import template from "./TerminalTab.html";
 
 export interface TerminalTabOptions extends ViewModels.TabOptions {
   account: DataModels.DatabaseAccount;
@@ -39,7 +38,6 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
 }
 
 export default class TerminalTab extends TabsBase {
-  public static readonly component = { name: "terminal-tab", template };
   private container: Explorer;
   private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
 

src/Explorer/Tabs/TriggerTab.ts

@@ -9,10 +9,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Trigger from "../Tree/Trigger";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./TriggerTab.html";
 
 export default class TriggerTab extends ScriptTabBase {
-  public static readonly component = { name: "trigger-tab", template };
   public collection: ViewModels.Collection;
   public node: Trigger;
   public triggerType: ViewModels.Editable<string>;

src/Explorer/Tabs/UserDefinedFunctionTab.ts

@@ -8,10 +8,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import UserDefinedFunction from "../Tree/UserDefinedFunction";
 import ScriptTabBase from "./ScriptTabBase";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
-import template from "./UserDefinedFunctionTab.html";
 
 export default class UserDefinedFunctionTab extends ScriptTabBase {
-  public static readonly component = { name: "user-defined-function-tab", template };
   public collection: ViewModels.Collection;
   public node: UserDefinedFunction;
   constructor(options: ViewModels.ScriptTabOption) {

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

@@ -58,7 +58,9 @@ export default class Database implements ViewModels.Database {
     });
 
     const pendingNotificationsPromise: Promise<DataModels.Notification> = this.getPendingThroughputSplitNotification();
-    const useDatabaseSettingsTabV1 = userContext.features.enableDatabaseSettingsTabV1;
+    const useDatabaseSettingsTabV1: boolean = this.container.isFeatureEnabled(
+      Constants.Features.enableDatabaseSettingsTabV1
+    );
     const tabKind: ViewModels.CollectionTabKind = useDatabaseSettingsTabV1
       ? ViewModels.CollectionTabKind.DatabaseSettings
       : ViewModels.CollectionTabKind.DatabaseSettingsV2;

src/Explorer/Tree/StoredProcedure.ts

@@ -3,14 +3,13 @@ import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import { deleteStoredProcedure } from "../../Common/dataAccess/deleteStoredProcedure";
 import { executeStoredProcedure } from "../../Common/dataAccess/executeStoredProcedure";
-import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 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 Explorer from "../Explorer";
 import StoredProcedureTab from "../Tabs/StoredProcedureTab";
 import TabsBase from "../Tabs/TabsBase";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 
 const sampleStoredProcedureBody: string = `// SAMPLE STORED PROCEDURE
 function sample(prefix) {
@@ -57,7 +56,7 @@ export default class StoredProcedure {
     this.rid = data._rid;
     this.id = ko.observable(data.id);
     this.body = ko.observable(data.body as string);
-    this.isExecuteEnabled = userContext.features.executeSproc;
+    this.isExecuteEnabled = this.container.isFeatureEnabled(Constants.Features.executeSproc);
   }
 
   public static create(source: ViewModels.Collection, event: MouseEvent) {

src/GitHub/GitHubClient.ts

@@ -1,7 +1,7 @@
 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 { getErrorMessage } from "../Common/ErrorHandlingUtils";
 

src/GitHub/GitHubContentProvider.ts

@@ -8,7 +8,7 @@ import * as Logger from "../Common/Logger";
 import { 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/Libs/is-integer-polyfill.js

@@ -0,0 +1,5 @@
+Number.isInteger =
+  Number.isInteger ||
+  function(value) {
+    return typeof value === "number" && isFinite(value) && Math.floor(value) === value;
+  };

src/Localization/en/translations.json

@@ -27,8 +27,8 @@
             "Enable DB level throughput": "Enable Database Level Throughput",
             "Database Throughput": "Database Throughput",
             "UpdateInProgressMessage": "Data is being updated",
-            "UpdateCompletedMessageTitle": "Update succeeded",
-            "UpdateCompletedMessageText": "Data update completed.",
+            "UpdateCompletedMessageTitle":"Update succeeded",
+            "UpdateCompletedMessageText":  "Data updation completed.",
             "SubmissionMessageSuccessTitle": "Update started",
             "SubmissionMessageForNewRegionText": "Data update started. Region changed.",
             "SubmissionMessageForSameRegionText": "Data update started. Region not changed.",
@@ -37,56 +37,6 @@
             "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,8 +1,18 @@
 // CSS Dependencies
+import "abort-controller/polyfill";
+import "babel-polyfill";
 import "bootstrap/dist/css/bootstrap.css";
+import "es6-object-assign/auto";
+import "es6-symbol/implement";
+import "object.entries/auto";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import "promise-polyfill/src/polyfill";
+import "promise.prototype.finally/auto";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
+import "url-polyfill/url-polyfill.min";
+import "webcrypto-liner/build/webcrypto-liner.shim.min";
+import "whatwg-fetch";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
 import "../externals/jquery-ui.structure.min.css";
@@ -35,7 +45,6 @@ import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
 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";
@@ -54,6 +63,7 @@ import { useConfig } from "./hooks/useConfig";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { useSidePanel } from "./hooks/useSidePanel";
 import { KOCommentEnd, KOCommentIfStart } from "./koComment";
+import "./Libs/is-integer-polyfill";
 import "./Libs/jquery";
 import "./Shared/appInsights";
 import { userContext } from "./UserContext";
@@ -200,12 +210,18 @@ 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>
           </div>
-          <div className="tabsManagerContainer" data-bind='component: { name: "tabs-manager", params: tabsManager }' />
+          <div
+            className="tabsManagerContainer"
+            data-bind='component: { name: "tabs-manager", params: {data: tabsManager} }'
+          />
         </div>
         {/* Collections Tree and Tabs - End */}
         <div

src/Platform/Hosted/extractFeatures.test.ts

@@ -1,22 +1,17 @@
 import { extractFeatures } from "./extractFeatures";
 
 describe("extractFeatures", () => {
-  it("correctly detects feature flags in a case insensitive manner", () => {
-    const url = "https://localhost:10001/12345/notebook";
-    const token = "super secret";
-    const notebooksEnabled = false;
-    const params = new URLSearchParams({
-      platform: "Hosted",
-      "feature.NOTEBOOKSERVERURL": url,
-      "feature.NoTeBooKServerToken": token,
-      "feature.NotAFeature": "nope",
-      "feature.ENABLEnotebooks": notebooksEnabled.toString(),
-    });
-
+  it("correctly detects feature flags", () => {
+    // Search containing non-features, with Camelcase keys and uri encoded values
+    const params = new URLSearchParams(
+      "?platform=Hosted&feature.notebookserverurl=https%3A%2F%2Flocalhost%3A10001%2F12345%2Fnotebook&feature.notebookServerToken=token&feature.enablenotebooks=true&key=mykey"
+    );
     const features = extractFeatures(params);
 
-    expect(features.notebookServerUrl).toBe(url);
-    expect(features.notebookServerToken).toBe(token);
-    expect(features.enableNotebooks).toBe(notebooksEnabled);
+    expect(features).toEqual({
+      notebookserverurl: "https://localhost:10001/12345/notebook",
+      notebookservertoken: "token",
+      enablenotebooks: "true",
+    });
   });
 });

src/Platform/Hosted/extractFeatures.ts

@@ -1,56 +1,14 @@
-export type Features = {
-  readonly canExceedMaximumValue: boolean;
-  readonly cosmosdb: boolean;
-  readonly enableChangeFeedPolicy: boolean;
-  readonly enableDatabaseSettingsTabV1: boolean;
-  readonly enableFixedCollectionWithSharedThroughput: boolean;
-  readonly enableKOPanel: boolean;
-  readonly enableNotebooks: boolean;
-  readonly enableReactPane: boolean;
-  readonly enableRightPanelV2: boolean;
-  readonly enableSchema: boolean;
-  readonly enableSDKoperations: boolean;
-  readonly enableSpark: boolean;
-  readonly enableTtl: boolean;
-  readonly executeSproc: boolean;
-  readonly hostedDataExplorer: boolean;
-  readonly livyEndpoint?: string;
-  readonly notebookBasePath?: string;
-  readonly notebookServerToken?: string;
-  readonly notebookServerUrl?: string;
-  readonly selfServeType?: string;
-  readonly showMinRUSurvey: boolean;
-  readonly ttl90Days: boolean;
-};
-
-export function extractFeatures(params?: URLSearchParams): Features {
-  params = params || new URLSearchParams(window.location.search);
-  const downcased = new URLSearchParams();
-  params.forEach((value, key) => downcased.append(key.toLocaleLowerCase(), value));
-  const get = (key: string) => downcased.get("feature." + key.toLocaleLowerCase()) ?? undefined;
-
-  return {
-    canExceedMaximumValue: "true" === get("canexceedmaximumvalue"),
-    cosmosdb: "true" === get("cosmosdb"),
-    enableChangeFeedPolicy: "true" === get("enablechangefeedpolicy"),
-    enableDatabaseSettingsTabV1: "true" === get("enabledbsettingsv1"),
-    enableFixedCollectionWithSharedThroughput: "true" === get("enablefixedcollectionwithsharedthroughput"),
-    enableKOPanel: "true" === get("enablekopanel"),
-    enableNotebooks: "true" === get("enablenotebooks"),
-    enableReactPane: "true" === get("enablereactpane"),
-    enableRightPanelV2: "true" === get("enablerightpanelv2"),
-    enableSchema: "true" === get("enableschema"),
-    enableSDKoperations: "true" === get("enablesdkoperations"),
-    enableSpark: "true" === get("enablespark"),
-    enableTtl: "true" === get("enablettl"),
-    executeSproc: "true" === get("dataexplorerexecutesproc"),
-    hostedDataExplorer: "true" === get("hosteddataexplorerenabled"),
-    livyEndpoint: get("livyendpoint"),
-    notebookBasePath: get("notebookbasepath"),
-    notebookServerToken: get("notebookservertoken"),
-    notebookServerUrl: get("notebookserverurl"),
-    selfServeType: get("selfservetype"),
-    showMinRUSurvey: "true" === get("showminrusurvey"),
-    ttl90Days: "true" === get("ttl90days"),
-  };
+export function extractFeatures(params?: URLSearchParams): { [key: string]: string } {
+  params = params || new URLSearchParams(window.parent.location.search);
+  const featureParamRegex = /feature.(.*)/i;
+  const features: { [key: string]: string } = {};
+  params.forEach((value: string, param: string) => {
+    if (featureParamRegex.test(param)) {
+      const matches: string[] = param.match(featureParamRegex);
+      if (matches.length > 0) {
+        features[matches[1].toLowerCase()] = value;
+      }
+    }
+  });
+  return features;
 }

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

@@ -1,4 +1,4 @@
-import { IsDisplayable, OnChange, PropertyInfo, RefreshOptions, Values } from "../Decorators";
+import { PropertyInfo, OnChange, Values, IsDisplayable, RefreshOptions } from "../Decorators";
 import {
   ChoiceItem,
   Description,
@@ -12,14 +12,14 @@ import {
   SmartUiInput,
 } from "../SelfServeTypes";
 import {
-  getMaxCollectionThroughput,
-  getMaxDatabaseThroughput,
-  getMinCollectionThroughput,
-  getMinDatabaseThroughput,
-  initialize,
   onRefreshSelfServeExample,
   Regions,
   update,
+  initialize,
+  getMinDatabaseThroughput,
+  getMaxDatabaseThroughput,
+  getMinCollectionThroughput,
+  getMaxCollectionThroughput,
 } from "./SelfServeExample.rp";
 
 const regionDropdownItems: ChoiceItem[] = [
@@ -203,7 +203,11 @@ 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);
+    const currentRegionText = `current region selected is ${initializeResponse.regions}`;
+    defaults.set("currentRegionText", {
+      value: { textTKey: currentRegionText, type: DescriptionType.Text } as Description,
+      hidden: false,
+    });
     defaults.set("regions", { value: initializeResponse.regions });
     defaults.set("enableLogging", { value: initializeResponse.enableLogging });
     const accountName = initializeResponse.accountName;

src/SelfServe/SelfServe.tsx

@@ -1,17 +1,17 @@
-import { Spinner, SpinnerSize } from "office-ui-fabric-react";
-import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendReadyMessage } from "../Common/MessageHandler";
-import { configContext, updateConfigContext } from "../ConfigContext";
-import { SelfServeFrameInputs } from "../Contracts/ViewModels";
-import { updateUserContext } from "../UserContext";
+import { sendMessage } from "../Common/MessageHandler";
 import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
-import "./SelfServe.less";
 import { SelfServeComponent } from "./SelfServeComponent";
 import { SelfServeDescriptor } from "./SelfServeTypes";
 import { SelfServeType } from "./SelfServeUtils";
+import { SelfServeFrameInputs } from "../Contracts/ViewModels";
+import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
+import { configContext, updateConfigContext } from "../ConfigContext";
+import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
+import { updateUserContext } from "../UserContext";
+import "./SelfServe.less";
+import { Spinner, SpinnerSize } from "office-ui-fabric-react";
 initializeIcons();
 
 const getDescriptor = async (selfServeType: SelfServeType): Promise<SelfServeDescriptor> => {
@@ -89,4 +89,4 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
 ReactDOM.render(renderSpinner(), document.getElementById("selfServeContent"));
 window.addEventListener("message", handleMessage, false);
-sendReadyMessage();
+sendMessage("ready");

src/SelfServe/SelfServeComponent.tsx

@@ -1,36 +1,34 @@
-import { TFunction } from "i18next";
+import React from "react";
 import {
   CommandBar,
   ICommandBarItemProps,
+  IStackTokens,
   MessageBar,
   MessageBarType,
-  Separator,
   Spinner,
   SpinnerSize,
   Stack,
 } from "office-ui-fabric-react";
-import promiseRetry, { AbortError } from "p-retry";
-import React from "react";
-import { Translation } from "react-i18next";
-import * as _ from "underscore";
-import { sendMessage } from "../Common/MessageHandler";
-import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
-import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
-import "../i18n";
-import { commandBarItemStyles, commandBarStyles, containerStackTokens, separatorStyles } from "./SelfServeStyles";
 import {
   AnyDisplay,
-  BooleanInput,
-  ChoiceInput,
-  DescriptionDisplay,
-  InputType,
   Node,
-  NumberInput,
+  InputType,
   RefreshResult,
   SelfServeDescriptor,
   SmartUiInput,
+  DescriptionDisplay,
   StringInput,
+  NumberInput,
+  BooleanInput,
+  ChoiceInput,
 } from "./SelfServeTypes";
+import { SmartUiComponent, SmartUiDescriptor } from "../Explorer/Controls/SmartUi/SmartUiComponent";
+import { Translation } from "react-i18next";
+import { TFunction } from "i18next";
+import "../i18n";
+import { sendMessage } from "../Common/MessageHandler";
+import { SelfServeMessageTypes } from "../Contracts/SelfServeContracts";
+import promiseRetry, { AbortError } from "p-retry";
 
 interface SelfServeNotification {
   message: string;
@@ -129,7 +127,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
     this.props.descriptor.inputNames.map((inputName) => {
       let initialValue = initialValues.get(inputName);
       if (!initialValue) {
-        initialValue = { value: undefined, hidden: false, disabled: false };
+        initialValue = { value: undefined, hidden: false };
       }
       currentValues = currentValues.set(inputName, initialValue);
       baselineValues = baselineValues.set(inputName, initialValue);
@@ -313,41 +311,34 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
     this.performSave();
   };
 
-  public isInputModified = (): boolean => {
+  public isDiscardButtonDisabled = (): boolean => {
+    if (this.state.isSaving) {
+      return true;
+    }
     for (const key of this.state.currentValues.keys()) {
-      const currentValue = this.state.currentValues.get(key);
-      if (currentValue && currentValue.hidden === undefined) {
-        currentValue.hidden = false;
-      }
-      if (currentValue && currentValue.disabled === undefined) {
-        currentValue.disabled = false;
-      }
+      const currentValue = JSON.stringify(this.state.currentValues.get(key));
+      const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
 
-      const baselineValue = this.state.baselineValues.get(key);
-      if (baselineValue && baselineValue.hidden === undefined) {
-        baselineValue.hidden = false;
-      }
-      if (baselineValue && baselineValue.disabled === undefined) {
-        baselineValue.disabled = false;
-      }
-
-      if (!_.isEqual(currentValue, baselineValue)) {
-        return true;
+      if (currentValue !== baselineValue) {
+        return false;
       }
     }
-    return false;
-  };
-
-  public isRefreshing = (): boolean => {
-    return this.state.isSaving || this.state.isInitializing || this.state.refreshResult?.isUpdateInProgress;
-  };
-
-  public isDiscardButtonDisabled = (): boolean => {
-    return this.isRefreshing() || !this.isInputModified();
+    return true;
   };
 
   public isSaveButtonDisabled = (): boolean => {
-    return this.state.hasErrors || this.isRefreshing() || !this.isInputModified();
+    if (this.state.hasErrors || this.state.isSaving) {
+      return true;
+    }
+    for (const key of this.state.currentValues.keys()) {
+      const currentValue = JSON.stringify(this.state.currentValues.get(key));
+      const baselineValue = JSON.stringify(this.state.baselineValues.get(key));
+
+      if (currentValue !== baselineValue) {
+        return false;
+      }
+    }
+    return true;
   };
 
   private performRefresh = async (): Promise<void> => {
@@ -406,6 +397,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
         key: "save",
         text: this.getCommonTranslation("Save"),
         iconProps: { iconName: "Save" },
+        split: true,
         disabled: this.isSaveButtonDisabled(),
         onClick: () => this.onSaveButtonClick(),
       },
@@ -413,21 +405,21 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
         key: "discard",
         text: this.getCommonTranslation("Discard"),
         iconProps: { iconName: "Undo" },
+        split: true,
         disabled: this.isDiscardButtonDisabled(),
         onClick: () => {
           this.discard();
         },
-        buttonStyles: commandBarItemStyles,
       },
       {
         key: "refresh",
         text: this.getCommonTranslation("Refresh"),
         disabled: this.state.isInitializing,
         iconProps: { iconName: "Refresh" },
+        split: true,
         onClick: () => {
           this.onRefreshClicked();
         },
-        buttonStyles: commandBarItemStyles,
       },
     ];
   };
@@ -440,6 +432,7 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
   };
 
   public render(): JSX.Element {
+    const containerStackTokens: IStackTokens = { childrenGap: 5 };
     if (this.state.compileErrorMessage) {
       return <MessageBar messageBarType={MessageBarType.error}>{this.state.compileErrorMessage}</MessageBar>;
     }
@@ -452,13 +445,13 @@ export class SelfServeComponent extends React.Component<SelfServeComponentProps,
 
           return (
             <div style={{ overflowX: "auto" }}>
-              <Stack tokens={containerStackTokens}>
-                <Stack.Item>
-                  <CommandBar styles={commandBarStyles} items={this.getCommandBarItems()} />
-                  <Separator styles={separatorStyles} />
-                </Stack.Item>
+              <Stack tokens={containerStackTokens} styles={{ root: { padding: 10 } }}>
+                <CommandBar styles={{ root: { paddingLeft: 0 } }} items={this.getCommandBarItems()} />
                 {this.state.isInitializing ? (
-                  <Spinner size={SpinnerSize.large} />
+                  <Spinner
+                    size={SpinnerSize.large}
+                    styles={{ root: { textAlign: "center", justifyContent: "center", width: "100%", height: "100%" } }}
+                  />
                 ) : (
                   <>
                     {this.state.notification && (

src/SelfServe/SelfServeStyles.tsx

@@ -1,20 +0,0 @@
-import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "office-ui-fabric-react";
-import { StyleConstants } from "../Common/Constants";
-
-export const commandBarItemStyles: IButtonStyles = { root: { paddingLeft: 20 } };
-
-export const commandBarStyles: ICommandBarStyles = { root: { paddingLeft: 0 } };
-
-export const containerStackTokens: IStackTokens = { childrenGap: 5, padding: 10 };
-
-export const separatorStyles: Partial<ISeparatorStyles> = {
-  root: {
-    selectors: {
-      "::before": {
-        background: StyleConstants.BaseMedium,
-      },
-    },
-    padding: 0,
-    height: 1,
-  },
-};

src/SelfServe/SelfServeUtils.tsx

@@ -1,6 +1,6 @@
 import "reflect-metadata";
-import { userContext } from "../UserContext";
 import {
+  Node,
   AnyDisplay,
   BooleanInput,
   ChoiceInput,
@@ -10,13 +10,13 @@ import {
   Info,
   InputType,
   InputTypeValue,
-  Node,
   NumberInput,
-  RefreshParams,
   SelfServeDescriptor,
   SmartUiInput,
   StringInput,
+  RefreshParams,
 } from "./SelfServeTypes";
+import { userContext } from "../UserContext";
 
 export enum SelfServeType {
   // No self serve type passed, launch explorer
@@ -195,5 +195,5 @@ export const generateBladeLink = (blade: BladeType): string => {
   const subscriptionId = userContext.subscriptionId;
   const resourceGroupName = userContext.resourceGroup;
   const databaseAccountName = userContext.databaseAccount.name;
-  return `https://portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
+  return `www.portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${subscriptionId}/resourceGroups/${resourceGroupName}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}/${blade}`;
 };

src/SelfServe/SqlX/SqlX.rp.ts

@@ -1,98 +1,33 @@
 import { RefreshResult } from "../SelfServeTypes";
-import { userContext } from "../../UserContext";
-import { armRequestWithoutPolling } from "../../Utils/arm/request";
-import { configContext } from "../../ConfigContext";
-import { SqlxServiceResource, UpdateDedicatedGatewayRequestParameters } from "./SqlxTypes";
-
-const apiVersion = "2020-06-01-preview";
-
-export enum ResourceStatus {
-  Running = "Running",
-  Creating = "Creating",
-  Updating = "Updating",
-  Deleting = "Deleting",
-}
 
 export interface DedicatedGatewayResponse {
   sku: string;
   instances: number;
-  status: string;
-  endpoint: string;
 }
 
-export const getPath = (subscriptionId: string, resourceGroup: string, name: string): string => {
-  return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDB/databaseAccounts/${name}/services/sqlx`;
+export const getRegionSpecificMinInstances = async (): Promise<number> => {
+  // TODO: write RP call to get min number of instances needed for this region
+  throw new Error("getRegionSpecificMinInstances not implemented");
 };
 
-export const updateDedicatedGatewayResource = async (sku: string, instances: number): Promise<string> => {
-  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  const body: UpdateDedicatedGatewayRequestParameters = {
-    properties: {
-      instanceSize: sku,
-      instanceCount: instances,
-      serviceType: "Sqlx",
-    },
-  };
-  const armRequestResult = await armRequestWithoutPolling({
-    host: configContext.ARM_ENDPOINT,
-    path,
-    method: "PUT",
-    apiVersion,
-    body,
-  });
-  return armRequestResult.operationStatusUrl;
+export const getRegionSpecificMaxInstances = async (): Promise<number> => {
+  // TODO: write RP call to get max number of instances needed for this region
+  throw new Error("getRegionSpecificMaxInstances not implemented");
 };
 
-export const deleteDedicatedGatewayResource = async (): Promise<string> => {
-  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  const armRequestResult = await armRequestWithoutPolling({
-    host: configContext.ARM_ENDPOINT,
-    path,
-    method: "DELETE",
-    apiVersion,
-  });
-  return armRequestResult.operationStatusUrl;
+export const updateDedicatedGatewayProvisioning = async (sku: string, instances: number): Promise<void> => {
+  // TODO: write RP call to update dedicated gateway provisioning
+  throw new Error(
+    `updateDedicatedGatewayProvisioning not implemented. Parameters- sku: ${sku}, instances:${instances}`
+  );
 };
 
-export const getDedicatedGatewayResource = async (): Promise<SqlxServiceResource> => {
-  const path = getPath(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name);
-  const armRequestResult = await armRequestWithoutPolling<SqlxServiceResource>({
-    host: configContext.ARM_ENDPOINT,
-    path,
-    method: "GET",
-    apiVersion,
-  });
-  return armRequestResult.result;
-};
-
-export const getCurrentProvisioningState = async (): Promise<DedicatedGatewayResponse> => {
-  try {
-    const response = await getDedicatedGatewayResource();
-    return {
-      sku: response.properties.instanceSize,
-      instances: response.properties.instanceCount,
-      status: response.properties.status,
-      endpoint: response.properties.sqlxEndPoint,
-    };
-  } catch (e) {
-    return { sku: undefined, instances: undefined, status: undefined, endpoint: undefined };
-  }
+export const initializeDedicatedGatewayProvisioning = async (): Promise<DedicatedGatewayResponse> => {
+  // TODO: write RP call to initialize UI for dedicated gateway provisioning
+  throw new Error("initializeDedicatedGatewayProvisioning not implemented");
 };
 
 export const refreshDedicatedGatewayProvisioning = async (): Promise<RefreshResult> => {
-  try {
-    const response = await getDedicatedGatewayResource();
-    if (response.properties.status === ResourceStatus.Running.toString()) {
-      return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
-    } else if (response.properties.status === ResourceStatus.Creating.toString()) {
-      return { isUpdateInProgress: true, updateInProgressMessageTKey: "CreateMessage" };
-    } else if (response.properties.status === ResourceStatus.Deleting.toString()) {
-      return { isUpdateInProgress: true, updateInProgressMessageTKey: "DeleteMessage" };
-    } else {
-      return { isUpdateInProgress: true, updateInProgressMessageTKey: "UpdateMessage" };
-    }
-  } catch {
-    //TODO differentiate between different failures
-    return { isUpdateInProgress: false, updateInProgressMessageTKey: undefined };
-  }
+  // TODO: write RP call to check if dedicated gateway update has gone through
+  throw new Error("refreshDedicatedGatewayProvisioning not implemented");
 };

src/SelfServe/SqlX/SqlX.tsx

@@ -1,7 +1,6 @@
-import { IsDisplayable, OnChange, RefreshOptions, Values } from "../Decorators";
+import { IsDisplayable, OnChange, Values } from "../Decorators";
 import {
   ChoiceItem,
-  Description,
   DescriptionType,
   InputType,
   NumberUiType,
@@ -10,284 +9,65 @@ import {
   SelfServeBaseClass,
   SmartUiInput,
 } from "../SelfServeTypes";
-import { BladeType, generateBladeLink } from "../SelfServeUtils";
-import {
-  deleteDedicatedGatewayResource,
-  getCurrentProvisioningState,
-  refreshDedicatedGatewayProvisioning,
-  updateDedicatedGatewayResource,
-} from "./SqlX.rp";
-
-const costPerHourValue: Description = {
-  textTKey: "CostText",
-  type: DescriptionType.Text,
-  link: {
-    href: "https://azure.microsoft.com/en-us/pricing/details/cosmos-db/",
-    textTKey: "DedicatedGatewayPricing",
-  },
-};
-
-const connectionStringValue: Description = {
-  textTKey: "ConnectionStringText",
-  type: DescriptionType.Text,
-  link: {
-    href: generateBladeLink(BladeType.SqlKeys),
-    textTKey: "KeysBlade",
-  },
-};
-
-const CosmosD4s = "Cosmos.D4s";
-const CosmosD8s = "Cosmos.D8s";
-const CosmosD16s = "Cosmos.D16s";
-const CosmosD32s = "Cosmos.D32s";
-
-const getSKUDetails = (sku: string): string => {
-  if (sku === CosmosD4s) {
-    return "CosmosD4Details";
-  } else if (sku === CosmosD8s) {
-    return "CosmosD8Details";
-  } else if (sku === CosmosD16s) {
-    return "CosmosD16Details";
-  } else if (sku === CosmosD32s) {
-    return "CosmosD32Details";
-  }
-  return "Not Supported Yet";
-};
-
-const onSKUChange = (newValue: InputType, currentValues: Map<string, SmartUiInput>): Map<string, SmartUiInput> => {
-  currentValues.set("sku", { value: newValue });
-  currentValues.set("skuDetails", {
-    value: { textTKey: getSKUDetails(`${newValue.toString()}`), type: DescriptionType.Text } as Description,
-  });
-  currentValues.set("costPerHour", { value: costPerHourValue });
-  return currentValues;
-};
-
-const onNumberOfInstancesChange = (
-  newValue: InputType,
-  currentValues: Map<string, SmartUiInput>
-): Map<string, SmartUiInput> => {
-  currentValues.set("instances", { value: newValue });
-  currentValues.set("warningBanner", {
-    value: { textTKey: "WarningBannerOnUpdate" } as Description,
-    hidden: false,
-  });
-
-  return currentValues;
-};
+import { refreshDedicatedGatewayProvisioning } from "./SqlX.rp";
 
 const onEnableDedicatedGatewayChange = (
   newValue: InputType,
-  currentValues: Map<string, SmartUiInput>,
-  baselineValues: ReadonlyMap<string, SmartUiInput>
+  currentState: Map<string, SmartUiInput>
 ): Map<string, SmartUiInput> => {
-  currentValues.set("enableDedicatedGateway", { value: newValue });
-  const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
-  if (dedicatedGatewayOriginallyEnabled === newValue) {
-    currentValues.set("sku", baselineValues.get("sku"));
-    currentValues.set("instances", baselineValues.get("instances"));
-    currentValues.set("skuDetails", baselineValues.get("skuDetails"));
-    currentValues.set("costPerHour", baselineValues.get("costPerHour"));
-    currentValues.set("warningBanner", baselineValues.get("warningBanner"));
-    currentValues.set("connectionString", baselineValues.get("connectionString"));
-    return currentValues;
-  }
-
-  currentValues.set("warningBanner", undefined);
-  if (newValue === true) {
-    currentValues.set("warningBanner", {
-      value: {
-        textTKey: "WarningBannerOnUpdate",
-        link: {
-          href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
-          textTKey: "DedicatedGatewayPricing",
-        },
-      } as Description,
-      hidden: false,
-    });
-  } else {
-    currentValues.set("warningBanner", {
-      value: {
-        textTKey: "WarningBannerOnDelete",
-        link: {
-          href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
-          textTKey: "DeprovisioningDetailsText",
-        },
-      } as Description,
-      hidden: false,
-    });
-  }
-  const sku = currentValues.get("sku");
-  const instances = currentValues.get("instances");
-  const hideAttributes = newValue === undefined || !(newValue as boolean);
-  currentValues.set("sku", {
-    value: sku.value,
-    hidden: hideAttributes,
-    disabled: dedicatedGatewayOriginallyEnabled,
-  });
-  currentValues.set("instances", {
-    value: instances.value,
-    hidden: hideAttributes,
-    disabled: dedicatedGatewayOriginallyEnabled,
-  });
-
-  currentValues.set("skuDetails", {
-    value: { textTKey: getSKUDetails(`${currentValues.get("sku").value}`), type: DescriptionType.Text } as Description,
-    hidden: hideAttributes,
-    disabled: dedicatedGatewayOriginallyEnabled,
-  });
-
-  currentValues.set("costPerHour", { value: costPerHourValue, hidden: hideAttributes });
-  currentValues.set("connectionString", {
-    value: connectionStringValue,
-    hidden: !newValue || !dedicatedGatewayOriginallyEnabled,
-  });
-
-  return currentValues;
+  const sku = currentState.get("sku");
+  const instances = currentState.get("instances");
+  const isSkuHidden = newValue === undefined || !(newValue as boolean);
+  currentState.set("enableDedicatedGateway", { value: newValue });
+  currentState.set("sku", { value: sku.value, hidden: isSkuHidden });
+  currentState.set("instances", { value: instances.value, hidden: isSkuHidden });
+  return currentState;
 };
 
-const skuDropDownItems: ChoiceItem[] = [
-  { label: "CosmosD4s", key: CosmosD4s },
-  { label: "CosmosD8s", key: CosmosD8s },
-  { label: "CosmosD16s", key: CosmosD16s },
-  { label: "CosmosD32s", key: CosmosD32s },
-];
-
 const getSkus = async (): Promise<ChoiceItem[]> => {
-  return skuDropDownItems;
+  // TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
+  throw new Error("getSkus not implemented.");
 };
 
 const getInstancesMin = async (): Promise<number> => {
-  return 1;
+  // TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
+  throw new Error("getInstancesMin not implemented.");
 };
 
 const getInstancesMax = async (): Promise<number> => {
-  return 5;
+  // TODO: get SKUs from getRegionSpecificSkus() RP call and return array of {label:..., key:...}.
+  throw new Error("getInstancesMax not implemented.");
+};
+
+const validate = (currentValues: Map<string, SmartUiInput>): void => {
+  // TODO: add cusom validation logic to be called before Saving the data.
+  throw new Error(`validate not implemented. No. of properties to validate: ${currentValues.size}`);
 };
 
 @IsDisplayable()
-@RefreshOptions({ retryIntervalInMs: 20000 })
 export default class SqlX extends SelfServeBaseClass {
   public onRefresh = async (): Promise<RefreshResult> => {
-    return await refreshDedicatedGatewayProvisioning();
+    return refreshDedicatedGatewayProvisioning();
   };
 
-  public onSave = async (
-    currentValues: Map<string, SmartUiInput>,
-    baselineValues: Map<string, SmartUiInput>
-  ): Promise<OnSaveResult> => {
-    const dedicatedGatewayCurrentlyEnabled = currentValues.get("enableDedicatedGateway")?.value as boolean;
-    const dedicatedGatewayOriginallyEnabled = baselineValues.get("enableDedicatedGateway")?.value as boolean;
-
-    currentValues.set("warningBanner", undefined);
-
-    //TODO : Add try catch for each RP call and return relevant notifications
-    if (dedicatedGatewayOriginallyEnabled) {
-      if (!dedicatedGatewayCurrentlyEnabled) {
-        const operationStatusUrl = await deleteDedicatedGatewayResource();
-        return {
-          operationStatusUrl: operationStatusUrl,
-          portalNotification: {
-            initialize: {
-              titleTKey: "DeleteInitializeTitle",
-              messageTKey: "DeleteInitializeMessage",
-            },
-            success: {
-              titleTKey: "DeleteSuccessTitle",
-              messageTKey: "DeleteSuccesseMessage",
-            },
-            failure: {
-              titleTKey: "DeleteFailureTitle",
-              messageTKey: "DeleteFailureMessage",
-            },
-          },
-        };
-      } else {
-        // Check for scaling up/down/in/out
-        return {
-          operationStatusUrl: undefined,
-          portalNotification: {
-            initialize: {
-              titleTKey: "UpdateInitializeTitle",
-              messageTKey: "UpdateInitializeMessage",
-            },
-            success: {
-              titleTKey: "UpdateSuccessTitle",
-              messageTKey: "UpdateSuccesseMessage",
-            },
-            failure: {
-              titleTKey: "UpdateFailureTitle",
-              messageTKey: "UpdateFailureMessage",
-            },
-          },
-        };
-      }
-    } else {
-      const sku = currentValues.get("sku")?.value as string;
-      const instances = currentValues.get("instances").value as number;
-      const operationStatusUrl = await updateDedicatedGatewayResource(sku, instances);
-      return {
-        operationStatusUrl: operationStatusUrl,
-        portalNotification: {
-          initialize: {
-            titleTKey: "CreateInitializeTitle",
-            messageTKey: "CreateInitializeTitle",
-          },
-          success: {
-            titleTKey: "CreateSuccessTitle",
-            messageTKey: "CreateSuccesseMessage",
-          },
-          failure: {
-            titleTKey: "CreateFailureTitle",
-            messageTKey: "CreateFailureMessage",
-          },
-        },
-      };
-    }
+  public onSave = async (currentValues: Map<string, SmartUiInput>): Promise<OnSaveResult> => {
+    validate(currentValues);
+    // TODO: add pre processing logic before calling the updateDedicatedGatewayProvisioning() RP call.
+    throw new Error(`onSave not implemented. No. of properties to save: ${currentValues.size}`);
   };
 
   public initialize = async (): Promise<Map<string, SmartUiInput>> => {
-    // Based on the RP call enableDedicatedGateway will be true if it has not yet been enabled and false if it has.
-    const defaults = new Map<string, SmartUiInput>();
-    defaults.set("enableDedicatedGateway", { value: false });
-    defaults.set("sku", { value: CosmosD4s, hidden: true });
-    defaults.set("instances", { value: await getInstancesMin(), hidden: true });
-    defaults.set("skuDetails", undefined);
-    defaults.set("costPerHour", undefined);
-    defaults.set("connectionString", undefined);
-
-    const response = await getCurrentProvisioningState();
-    if (response.status && response.status !== "Deleting") {
-      defaults.set("enableDedicatedGateway", { value: true });
-      defaults.set("sku", { value: response.sku, disabled: true });
-      defaults.set("instances", { value: response.instances, disabled: true });
-      defaults.set("costPerHour", { value: costPerHourValue });
-      defaults.set("skuDetails", {
-        value: { textTKey: getSKUDetails(`${defaults.get("sku").value}`), type: DescriptionType.Text } as Description,
-        hidden: false,
-      });
-      defaults.set("connectionString", {
-        value: connectionStringValue,
-        hidden: false,
-      });
-    }
-
-    defaults.set("warningBanner", undefined);
-    return defaults;
+    // TODO: get initialization data from initializeDedicatedGatewayProvisioning() RP call.
+    throw new Error("onSave not implemented");
   };
 
-  @Values({
-    isDynamicDescription: true,
-  })
-  warningBanner: string;
-
   @Values({
     description: {
-      textTKey: "DedicatedGatewayDescription",
+      textTKey: "Provisioning dedicated gateways for SqlX accounts.",
       type: DescriptionType.Text,
       link: {
         href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
-        textTKey: "LearnAboutDedicatedGateway",
+        textTKey: "Learn more about dedicated gateway.",
       },
     },
   })
@@ -295,45 +75,25 @@ export default class SqlX extends SelfServeBaseClass {
 
   @OnChange(onEnableDedicatedGatewayChange)
   @Values({
-    labelTKey: "DedicatedGateway",
-    trueLabelTKey: "Provisioned",
-    falseLabelTKey: "Deprovisioned",
+    labelTKey: "Dedicated Gateway",
+    trueLabelTKey: "Enable",
+    falseLabelTKey: "Disable",
   })
   enableDedicatedGateway: boolean;
 
-  @OnChange(onSKUChange)
   @Values({
     labelTKey: "SKUs",
     choices: getSkus,
-    placeholderTKey: "SKUsPlaceHolder",
+    placeholderTKey: "Select SKUs",
   })
   sku: ChoiceItem;
 
   @Values({
-    labelTKey: "SKUDetails",
-    isDynamicDescription: true,
-  })
-  skuDetails: string;
-
-  @OnChange(onNumberOfInstancesChange)
-  @Values({
-    labelTKey: "NumberOfInstances",
+    labelTKey: "Number of instances",
     min: getInstancesMin,
     max: getInstancesMax,
     step: 1,
     uiType: NumberUiType.Spinner,
   })
   instances: number;
-
-  @Values({
-    labelTKey: "Cost",
-    isDynamicDescription: true,
-  })
-  costPerHour: string;
-
-  @Values({
-    labelTKey: "ConnectionString",
-    isDynamicDescription: true,
-  })
-  connectionString: string;
 }

src/SelfServe/SqlX/SqlxTypes.ts

@@ -1,31 +0,0 @@
-export type SqlxServiceResource = {
-  id: string;
-  name: string;
-  type: string;
-  properties: SqlxServiceProps;
-  locations: SqlxServiceLocations;
-};
-export type SqlxServiceProps = {
-  serviceType: string;
-  creationTime: string;
-  status: string;
-  instanceSize: string;
-  instanceCount: number;
-  sqlxEndPoint: string;
-};
-
-export type SqlxServiceLocations = {
-  location: string;
-  status: string;
-  sqlxEndpoint: string;
-};
-
-export type UpdateDedicatedGatewayRequestParameters = {
-  properties: UpdateDedicatedGatewayRequestProperties;
-};
-
-export type UpdateDedicatedGatewayRequestProperties = {
-  instanceSize: string;
-  instanceCount: number;
-  serviceType: string;
-};

src/Terminal/index.ts

@@ -1,3 +1,5 @@
+import "babel-polyfill";
+import "promise-polyfill/src/polyfill"; // polyfill Promise on IE
 import "@jupyterlab/terminal/style/index.css";
 import "./index.css";
 import { ServerConnection } from "@jupyterlab/services";

src/UserContext.ts

@@ -2,44 +2,31 @@ import { AuthType } from "./AuthType";
 import { DatabaseAccount } from "./Contracts/DataModels";
 import { SubscriptionType } from "./Contracts/SubscriptionType";
 import { DefaultAccountExperienceType } from "./DefaultAccountExperienceType";
-import { extractFeatures, Features } from "./Platform/Hosted/extractFeatures";
 
 interface UserContext {
-  readonly authType?: AuthType;
-  readonly masterKey?: string;
-  readonly subscriptionId?: string;
-  readonly resourceGroup?: string;
-  readonly databaseAccount?: DatabaseAccount;
-  readonly endpoint?: string;
-  readonly accessToken?: string;
-  readonly authorizationToken?: string;
-  readonly resourceToken?: string;
-  readonly useSDKOperations: boolean;
-  readonly defaultExperience?: DefaultAccountExperienceType;
-  readonly subscriptionType?: SubscriptionType;
-  readonly quotaId?: string;
+  authType?: AuthType;
+  masterKey?: string;
+  subscriptionId?: string;
+  resourceGroup?: string;
+  databaseAccount?: DatabaseAccount;
+  endpoint?: string;
+  accessToken?: string;
+  authorizationToken?: string;
+  resourceToken?: string;
+  defaultExperience?: DefaultAccountExperienceType;
+  useSDKOperations?: boolean;
+  subscriptionType?: SubscriptionType;
+  quotaId?: string;
   // API Type is not yet provided by ARM. You need to manually inspect all the capabilities+kind so we abstract that logic in userContext
   // This is coming in a future Cosmos ARM API version as a prperty on databaseAccount
-  readonly apiType?: ApiType;
-  readonly isTryCosmosDBSubscription?: boolean;
-  readonly portalEnv?: PortalEnv;
-  readonly features: Features;
+  apiType?: ApiType;
 }
 
 type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
-export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";
 
-const features = extractFeatures();
-const { enableSDKoperations: useSDKOperations } = features;
+const userContext: UserContext = {};
 
-const userContext: UserContext = {
-  isTryCosmosDBSubscription: false,
-  portalEnv: "prod",
-  features,
-  useSDKOperations,
-};
-
-function updateUserContext(newContext: Partial<UserContext>): void {
+function updateUserContext(newContext: UserContext): void {
   Object.assign(userContext, newContext);
   Object.assign(userContext, { apiType: apiType(userContext.databaseAccount) });
 }

src/hooks/useKnockoutExplorer.ts

@@ -3,7 +3,7 @@ import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
 import { AccountKind, DefaultAccountExperience } from "../Common/Constants";
 import { normalizeArmEndpoint } from "../Common/EnvironmentUtility";
-import { sendReadyMessage } from "../Common/MessageHandler";
+import { sendMessage } from "../Common/MessageHandler";
 import { configContext, Platform, updateConfigContext } from "../ConfigContext";
 import { ActionType, DataExplorerAction } from "../Contracts/ActionContracts";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
@@ -18,13 +18,14 @@ import {
   ResourceToken,
 } from "../HostedExplorerChildFrame";
 import { emulatorAccount } from "../Platform/Emulator/emulatorAccount";
+import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { parseResourceTokenConnectionString } from "../Platform/Hosted/Helpers/ResourceTokenUtils";
 import {
   getDatabaseAccountKindFromExperience,
   getDatabaseAccountPropertiesFromMetadata,
 } from "../Platform/Hosted/HostedUtils";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
-import { PortalEnv, updateUserContext } from "../UserContext";
+import { updateUserContext } from "../UserContext";
 import { listKeys } from "../Utils/arm/generatedClients/2020-04-01/databaseAccounts";
 import { isInvalidParentFrameOrigin } from "../Utils/MessageValidation";
 
@@ -100,6 +101,7 @@ async function configureHostedWithAAD(config: AAD, explorerParams: ExplorerParam
     resourceGroup,
     masterKey: keys.primaryMasterKey,
     authorizationToken: `Bearer ${config.authorizationToken}`,
+    features: extractFeatures(),
   });
   return explorer;
 }
@@ -126,6 +128,7 @@ function configureHostedWithConnectionString(config: ConnectionString, explorerP
   explorer.configure({
     databaseAccount,
     masterKey: config.masterKey,
+    features: extractFeatures(),
   });
   return explorer;
 }
@@ -154,7 +157,11 @@ function configureHostedWithResourceToken(config: ResourceToken, explorerParams:
   if (parsedResourceToken.partitionKey) {
     explorer.resourceTokenPartitionKey(parsedResourceToken.partitionKey);
   }
-  explorer.configure({ databaseAccount });
+  explorer.configure({
+    databaseAccount,
+    features: extractFeatures(),
+  });
+  explorer.isRefreshingExplorer(false);
   return explorer;
 }
 
@@ -175,6 +182,7 @@ function configureHostedWithEncryptedToken(config: EncryptedToken, explorerParam
       properties: getDatabaseAccountPropertiesFromMetadata(config.encryptedTokenMetadata),
       tags: {},
     },
+    features: extractFeatures(),
   });
   return explorer;
 }
@@ -253,7 +261,6 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
             subscriptionId: inputs.subscriptionId,
             subscriptionType: inputs.subscriptionType,
             quotaId: inputs.quotaId,
-            portalEnv: inputs.serverId as PortalEnv,
           });
 
           const explorer = new Explorer(explorerParams);
@@ -267,7 +274,7 @@ async function configurePortal(explorerParams: ExplorerParams): Promise<Explorer
       false
     );
 
-    sendReadyMessage();
+    sendMessage("ready");
   });
 }
 

src/setupTests.ts

@@ -1,8 +1,7 @@
-import { configure } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
+import { configure } from "enzyme";
 import "jest-canvas-mock";
 import { initializeIcons } from "office-ui-fabric-react";
-import { TextDecoder, TextEncoder } from "util";
 configure({ adapter: new Adapter() });
 initializeIcons();
 
@@ -14,5 +13,3 @@ if (typeof window.URL.createObjectURL === "undefined") {
 (<any>window).$ = (<any>window).jQuery = require("jquery");
 (<any>global).$ = (<any>global).$.jQuery = require("jquery");
 require("jquery-ui-dist/jquery-ui");
-(<any>global).TextEncoder = TextEncoder;
-(<any>global).TextDecoder = TextDecoder;