es2017 everywhere

* Initial change of estimated cost to table format

* Converted cost estimate to table format and added different data for current vs updated cost estimates.

* lint fixes

* Changed the names of some interfaces

* Refactored a unit call to use an argument interface to avoid future confusion.

* Changed the severity of the save warning

* Format fix

* Fixed test due to styling change

Co-authored-by: Steve Faulkner <southpolesteve@gmail.com>

.github/workflows/ci.yml

@@ -167,7 +167,7 @@ jobs:
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -191,7 +191,7 @@ jobs:
   nugetmpac:
     name: Publish Nuget MPAC
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
     runs-on: ubuntu-latest
     env:
       NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -213,3 +213,28 @@ jobs:
         name: packages
         with:
           path: "*.nupkg"
+  nugetie:
+    name: Publish Nuget IE
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    runs-on: ubuntu-latest
+    env:
+      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
+      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
+    steps:
+      - uses: nuget/setup-nuget@v1
+        with:
+          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
+      - name: Download Dist Folder
+        uses: actions/download-artifact@v2
+        with:
+          name: dist
+      - run: cp ./configs/prod.json config.json
+      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.IE/g' DataExplorer.nuspec
+      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
+      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - uses: actions/upload-artifact@v2
+        name: packages
+        with:
+          path: "*.nupkg"

package-lock.json

@@ -9231,6 +9231,53 @@
         "through": "~2.3.6"
       }
     },
+    "esbuild-loader": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/esbuild-loader/-/esbuild-loader-2.7.0.tgz",
+      "integrity": "sha512-1v7PVHZ+GvHPlTYVKjNDblUZbzx58Iwt0LJrBI1INzi4/UHz9D3IJ/skNOimaypHDTohj6HtS3ExWJX2xCRzWg==",
+      "dev": true,
+      "requires": {
+        "esbuild": "^0.8.17",
+        "loader-utils": "^2.0.0",
+        "type-fest": "^0.20.2",
+        "webpack-sources": "^2.2.0"
+      },
+      "dependencies": {
+        "esbuild": {
+          "version": "0.8.26",
+          "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.26.tgz",
+          "integrity": "sha512-u3MMHOOumdWoAKF+073GHPpzvVB2cM+y9VD4ZwYs1FAQ6atRPISya35dbrbOu/mM68mQ42P+nwPzQVBTfQhkvQ==",
+          "dev": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+          "dev": true
+        },
+        "webpack-sources": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.2.0.tgz",
+          "integrity": "sha512-bQsA24JLwcnWGArOKUxYKhX3Mz/nK1Xf6hxullKERyktjNMC4x8koOeaDNTA2fEJ09BdWLbM/iTW0ithREUP0w==",
+          "dev": true,
+          "requires": {
+            "source-list-map": "^2.0.1",
+            "source-map": "^0.6.1"
+          }
+        }
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",

package.json

@@ -6,8 +6,8 @@
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
     "@azure/cosmos": "3.9.0",
-    "@azure/identity": "1.1.0",
     "@azure/cosmos-language-service": "0.0.5",
+    "@azure/identity": "1.1.0",
     "@jupyterlab/services": "6.0.0-rc.2",
     "@jupyterlab/terminal": "3.0.0-rc.2",
     "@microsoft/applicationinsights-web": "2.5.9",
@@ -139,6 +139,7 @@
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.5",
     "enzyme-to-json": "3.6.1",
+    "esbuild-loader": "2.7.0",
     "eslint": "7.8.1",
     "eslint-cli": "1.1.1",
     "eslint-plugin-no-null": "1.0.2",

src/Contracts/ViewModels.ts

@@ -362,7 +362,7 @@ export enum CollectionTabKind {
   Gallery = 17,
   NotebookViewer = 18,
   Schema = 19,
-  SettingsV2 = 19
+  SettingsV2 = 20
 }
 
 export enum TerminalKind {

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

@@ -1,9 +1,9 @@
 import { shallow } from "enzyme";
 import React from "react";
+import { IColumn, Text } from "office-ui-fabric-react";
 import {
   getAutoPilotV3SpendElement,
-  getEstimatedSpendElement,
-  getEstimatedAutoscaleSpendElement,
+  getEstimatedSpendingElement,
   manualToAutoscaleDisclaimerElement,
   ttlWarning,
   indexingPolicynUnsavedWarningMessage,
@@ -19,11 +19,37 @@ import {
   mongoIndexingPolicyDisclaimer,
   mongoIndexingPolicyAADError,
   mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage
+  renderMongoIndexTransformationRefreshMessage,
+  ManualEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown
 } from "./SettingsRenderUtils";
 
 class SettingsRenderUtilsTestComponent extends React.Component {
   public render(): JSX.Element {
+    const estimatedSpendingColumns: IColumn[] = [
+      { key: "costType", name: "", fieldName: "costType", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "hourly", name: "Hourly", fieldName: "hourly", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "daily", name: "Daily", fieldName: "daily", minWidth: 100, maxWidth: 200, isResizable: true },
+      { key: "monthly", name: "Monthly", fieldName: "monthly", minWidth: 100, maxWidth: 200, isResizable: true }
+    ];
+    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        hourly: <Text>$ 1.02</Text>,
+        daily: <Text>$ 24.48</Text>,
+        monthly: <Text>$ 744.6</Text>
+      }
+    ];
+    const priceBreakdown: PriceBreakdown = {
+      hourlyPrice: 1.02,
+      dailyPrice: 24.48,
+      monthlyPrice: 744.6,
+      pricePerRu: 0.00051,
+      currency: "RMB",
+      currencySign: "¥"
+    };
+
     return (
       <>
         {getAutoPilotV3SpendElement(1000, false)}
@@ -31,9 +57,7 @@ class SettingsRenderUtilsTestComponent extends React.Component {
         {getAutoPilotV3SpendElement(1000, true)}
         {getAutoPilotV3SpendElement(undefined, true)}
 
-        {getEstimatedSpendElement(1000, "mooncake", 2, false)}
-
-        {getEstimatedAutoscaleSpendElement(1000, "mooncake", 2, false)}
+        {getEstimatedSpendingElement(estimatedSpendingColumns, estimatedSpendingItems, 1000, 2, priceBreakdown, false)}
 
         {manualToAutoscaleDisclaimerElement}
         {ttlWarning}
@@ -69,4 +93,14 @@ describe("SettingsUtils functions", () => {
     const wrapper = shallow(<SettingsRenderUtilsTestComponent />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("should return correct price breakdown for a manual RU setting of 500, 1 region, multimaster disabled", () => {
+    const prices = getRuPriceBreakdown(500, "", 1, false, false);
+    expect(prices.hourlyPrice).toBe(0.04);
+    expect(prices.dailyPrice).toBe(0.96);
+    expect(prices.monthlyPrice).toBe(29.2);
+    expect(prices.pricePerRu).toBe(0.00008);
+    expect(prices.currency).toBe("USD");
+    expect(prices.currencySign).toBe("$");
+  });
 });

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -3,14 +3,13 @@ import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
 import { Urls, StyleConstants } from "../../../Common/Constants";
 import {
-  computeAutoscaleUsagePriceHourly,
   getPriceCurrency,
   getCurrencySign,
   getAutoscalePricePerRu,
   getMultimasterMultiplier,
   computeRUUsagePriceHourly,
   getPricePerRu,
-  calculateEstimateNumber
+  estimatedCostDisclaimer
 } from "../../../Utils/PricingUtils";
 import {
   ITextFieldStyles,
@@ -32,10 +31,41 @@ import {
   MessageBarType,
   Stack,
   Spinner,
-  SpinnerSize
+  SpinnerSize,
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  DetailsListLayoutMode,
+  IDetailsRowProps,
+  DetailsRow,
+  IDetailsColumnStyles
 } from "office-ui-fabric-react";
 import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
+export interface EstimatedSpendingDisplayProps {
+  costType: JSX.Element;
+}
+
+export interface ManualEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
+  hourly: JSX.Element;
+  daily: JSX.Element;
+  monthly: JSX.Element;
+}
+
+export interface AutoscaleEstimatedSpendingDisplayProps extends EstimatedSpendingDisplayProps {
+  minPerMonth: JSX.Element;
+  maxPerMonth: JSX.Element;
+}
+
+export interface PriceBreakdown {
+  hourlyPrice: number;
+  dailyPrice: number;
+  monthlyPrice: number;
+  pricePerRu: number;
+  currency: string;
+  currencySign: string;
+}
+
 export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 12 } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
@@ -104,6 +134,16 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
   }
 };
 
+export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
+  root: {
+    selectors: {
+      ":hover": {
+        background: "transparent"
+      }
+    }
+  }
+};
+
 export const customDetailsListStyles: Partial<IDetailsListStyles> = {
   root: {
     selectors: {
@@ -130,6 +170,10 @@ export const messageBarStyles: Partial<IMessageBarStyles> = { root: { marginTop:
 
 export const throughputUnit = "RU/s";
 
+export function onRenderRow(props: IDetailsRowProps): JSX.Element {
+  return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
+}
+
 export const getAutoPilotV3SpendElement = (
   maxAutoPilotThroughputSet: number,
   isDatabaseThroughput: boolean,
@@ -165,63 +209,61 @@ export const getAutoPilotV3SpendElement = (
   );
 };
 
-export const getEstimatedAutoscaleSpendElement = (
+export const getRuPriceBreakdown = (
   throughput: number,
   serverId: string,
-  regions: number,
-  multimaster: boolean
-): JSX.Element => {
-  const hourlyPrice: number = computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster);
-  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
-  const currency: string = getPriceCurrency(serverId);
-  const currencySign: string = getCurrencySign(serverId);
-  const pricePerRu =
-    getAutoscalePricePerRu(serverId, getMultimasterMultiplier(regions, multimaster)) *
-    getMultimasterMultiplier(regions, multimaster);
-
-  return (
-    <Text id="autoscaleSpendElement">
-      Estimated monthly cost ({currency}) is{" "}
-      <b>
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice / 10)}
-        {` - `}
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice)}{" "}
-      </b>
-      ({"regions: "} {regions}, {throughput / 10} - {throughput} RU/s, {currencySign}
-      {pricePerRu}/RU)
-    </Text>
-  );
+  numberOfRegions: number,
+  isMultimaster: boolean,
+  isAutoscale: boolean
+): PriceBreakdown => {
+  const hourlyPrice: number = computeRUUsagePriceHourly({
+    serverId: serverId,
+    requestUnits: throughput,
+    numberOfRegions: numberOfRegions,
+    multimasterEnabled: isMultimaster,
+    isAutoscale: isAutoscale
+  });
+  const basePricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+    : getPricePerRu(serverId);
+  return {
+    hourlyPrice: hourlyPrice,
+    dailyPrice: hourlyPrice * 24,
+    monthlyPrice: hourlyPrice * hoursInAMonth,
+    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
+    currency: getPriceCurrency(serverId),
+    currencySign: getCurrencySign(serverId)
+  };
 };
 
-export const getEstimatedSpendElement = (
+export const getEstimatedSpendingElement = (
+  estimatedSpendingColumns: IColumn[],
+  estimatedSpendingItems: EstimatedSpendingDisplayProps[],
   throughput: number,
-  serverId: string,
-  regions: number,
-  multimaster: boolean
+  numberOfRegions: number,
+  priceBreakdown: PriceBreakdown,
+  isAutoscale: boolean
 ): JSX.Element => {
-  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, throughput, regions, multimaster);
-  const dailyPrice: number = hourlyPrice * 24;
-  const monthlyPrice: number = hourlyPrice * hoursInAMonth;
-  const currency: string = getPriceCurrency(serverId);
-  const currencySign: string = getCurrencySign(serverId);
-  const pricePerRu = getPricePerRu(serverId) * getMultimasterMultiplier(regions, multimaster);
-
+  const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
   return (
-    <Text id="throughputSpendElement">
-      Estimated cost ({currency}):{" "}
-      <b>
-        {currencySign}
-        {calculateEstimateNumber(hourlyPrice)} hourly {` / `}
-        {currencySign}
-        {calculateEstimateNumber(dailyPrice)} daily {` / `}
-        {currencySign}
-        {calculateEstimateNumber(monthlyPrice)} monthly{" "}
-      </b>
-      ({"regions: "} {regions}, {throughput}RU/s, {currencySign}
-      {pricePerRu}/RU)
-    </Text>
+    <Stack {...addMongoIndexStackProps} styles={mediumWidthStackStyles}>
+      <DetailsList
+        disableSelectionZone
+        items={estimatedSpendingItems}
+        columns={estimatedSpendingColumns}
+        selectionMode={SelectionMode.none}
+        layoutMode={DetailsListLayoutMode.justified}
+        onRenderRow={onRenderRow}
+      />
+      <Text id="throughputSpendElement">
+        ({"regions: "} {numberOfRegions}, {ruRange}
+        {throughput} RU/s, {priceBreakdown.currencySign}
+        {priceBreakdown.pricePerRu}/RU)
+      </Text>
+      <Text>
+        <em>{estimatedCostDisclaimer}</em>
+      </Text>
+    </Stack>
   );
 };
 
@@ -265,6 +307,13 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
   </Text>
 );
 
+export const saveThroughputWarningMessage: JSX.Element = (
+  <Text styles={infoAndToolTipTextStyle}>
+    Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
+    before saving your changes
+  </Text>
+);
+
 const getCurrentThroughput = (
   isAutoscale: boolean,
   throughput: number,

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

@@ -6,8 +6,6 @@ import {
   IconButton,
   Text,
   SelectionMode,
-  IDetailsRowProps,
-  DetailsRow,
   IColumn,
   MessageBar,
   MessageBarType,
@@ -21,11 +19,11 @@ import {
   mongoIndexingPolicyDisclaimer,
   mediumWidthStackStyles,
   subComponentStackProps,
-  transparentDetailsRowStyles,
   createAndAddMongoIndexStackProps,
   separatorStyles,
   indexingPolicynUnsavedWarningMessage,
-  infoAndToolTipTextStyle
+  infoAndToolTipTextStyle,
+  onRenderRow
 } from "../../SettingsRenderUtils";
 import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
@@ -140,10 +138,6 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
     return undefined;
   };
 
-  private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
-    return <DetailsRow {...props} styles={transparentDetailsRowStyles} />;
-  };
-
   private getActionButton = (arrayPosition: number, isCurrentIndex: boolean): JSX.Element => {
     return isCurrentIndex ? (
       <IconButton
@@ -253,7 +247,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
                 items={initialIndexes}
                 columns={this.initialIndexesColumns}
                 selectionMode={SelectionMode.none}
-                onRenderRow={this.onRenderRow}
+                onRenderRow={onRenderRow}
                 layoutMode={DetailsListLayoutMode.justified}
               />
               {this.renderIndexesToBeAdded()}
@@ -279,7 +273,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP
               items={indexesToBeDropped}
               columns={this.indexesToBeDroppedColumns}
               selectionMode={SelectionMode.none}
-              onRenderRow={this.onRenderRow}
+              onRenderRow={onRenderRow}
               layoutMode={DetailsListLayoutMode.justified}
             />
           )}

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

@@ -54,7 +54,6 @@ describe("ThroughputInputAutoPilotV3Component", () => {
     expect(wrapper.exists("#throughputInput")).toEqual(true);
     expect(wrapper.exists("#autopilotInput")).toEqual(false);
     expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
-    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(false);
   });
 
   it("autopilot input visible", () => {
@@ -72,8 +71,7 @@ describe("ThroughputInputAutoPilotV3Component", () => {
 
     wrapper.setProps({ wasAutopilotOriginallySet: true });
     wrapper.update();
-    expect(wrapper.exists("#autoscaleSpendElement")).toEqual(true);
-    expect(wrapper.exists("#throughputSpendElement")).toEqual(false);
+    expect(wrapper.exists("#throughputSpendElement")).toEqual(true);
   });
 
   it("spendAck checkbox visible", () => {

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

@@ -8,10 +8,15 @@ import {
   checkBoxAndInputStackProps,
   getChoiceGroupStyles,
   messageBarStyles,
-  getEstimatedSpendElement,
-  getEstimatedAutoscaleSpendElement,
+  getEstimatedSpendingElement,
   getAutoPilotV3SpendElement,
-  manualToAutoscaleDisclaimerElement
+  manualToAutoscaleDisclaimerElement,
+  saveThroughputWarningMessage,
+  ManualEstimatedSpendingDisplayProps,
+  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
+  transparentDetailsHeaderStyle
 } from "../../SettingsRenderUtils";
 import {
   Text,
@@ -23,7 +28,9 @@ import {
   Label,
   Link,
   MessageBar,
-  MessageBarType
+  MessageBarType,
+  FontIcon,
+  IColumn
 } from "office-ui-fabric-react";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
@@ -32,7 +39,7 @@ import * as DataModels from "../../../../../Contracts/DataModels";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import { userContext } from "../../../../../UserContext";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import { usageInGB } from "../../../../../Utils/PricingUtils";
+import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
 import { Features } from "../../../../../Common/Constants";
 
 export interface ThroughputInputAutoPilotV3Props {
@@ -165,33 +172,243 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
       return <></>;
     }
 
+    const isDirty: boolean = this.IsComponentDirty().isDiscardable;
     const serverId: string = this.props.serverId;
-    const offerThroughput: number = this.props.throughput;
-
     const regions = account?.properties?.readLocations?.length || 1;
     const multimaster = account?.properties?.enableMultipleWriteLocations || false;
 
     let estimatedSpend: JSX.Element;
 
     if (!this.props.isAutoPilotSelected) {
-      estimatedSpend = getEstimatedSpendElement(
+      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 : offerThroughput,
+        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
         serverId,
         regions,
-        multimaster
+        multimaster,
+        isDirty ? this.props.throughput : undefined
       );
     } else {
-      estimatedSpend = getEstimatedAutoscaleSpendElement(
-        this.props.maxAutoPilotThroughput,
+      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
+        this.props.maxAutoPilotThroughputBaseline,
         serverId,
         regions,
-        multimaster
+        multimaster,
+        isDirty ? this.props.maxAutoPilotThroughput : undefined
       );
     }
     return estimatedSpend;
   };
 
+  private getEstimatedAutoscaleSpendElement = (
+    throughput: number,
+    serverId: string,
+    numberOfRegions: number,
+    isMultimaster: boolean,
+    newThroughput?: number
+  ): JSX.Element => {
+    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, true);
+    const estimatedSpendingColumns: IColumn[] = [
+      {
+        key: "costType",
+        name: "",
+        fieldName: "costType",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "minPerMonth",
+        name: "Min Per Month",
+        fieldName: "minPerMonth",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "maxPerMonth",
+        name: "Max Per Month",
+        fieldName: "maxPerMonth",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      }
+    ];
+    const estimatedSpendingItems: AutoscaleEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        minPerMonth: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)}
+          </Text>
+        ),
+        maxPerMonth: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
+          </Text>
+        )
+      }
+    ];
+
+    if (newThroughput) {
+      const newPrices: PriceBreakdown = getRuPriceBreakdown(
+        newThroughput,
+        serverId,
+        numberOfRegions,
+        isMultimaster,
+        true
+      );
+      estimatedSpendingItems.unshift({
+        costType: (
+          <Text>
+            <b>Updated Cost</b>
+          </Text>
+        ),
+        minPerMonth: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)}
+            </b>
+          </Text>
+        ),
+        maxPerMonth: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
+            </b>
+          </Text>
+        )
+      });
+    }
+
+    return getEstimatedSpendingElement(
+      estimatedSpendingColumns,
+      estimatedSpendingItems,
+      newThroughput ?? throughput,
+      numberOfRegions,
+      prices,
+      true
+    );
+  };
+
+  private getEstimatedManualSpendElement = (
+    throughput: number,
+    serverId: string,
+    numberOfRegions: number,
+    isMultimaster: boolean,
+    newThroughput?: number
+  ): JSX.Element => {
+    const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
+    const estimatedSpendingColumns: IColumn[] = [
+      {
+        key: "costType",
+        name: "",
+        fieldName: "costType",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "hourly",
+        name: "Hourly",
+        fieldName: "hourly",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "daily",
+        name: "Daily",
+        fieldName: "daily",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      },
+      {
+        key: "monthly",
+        name: "Monthly",
+        fieldName: "monthly",
+        minWidth: 100,
+        maxWidth: 200,
+        isResizable: true,
+        styles: transparentDetailsHeaderStyle
+      }
+    ];
+    const estimatedSpendingItems: ManualEstimatedSpendingDisplayProps[] = [
+      {
+        costType: <Text>Current Cost</Text>,
+        hourly: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}
+          </Text>
+        ),
+        daily: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}
+          </Text>
+        ),
+        monthly: (
+          <Text>
+            {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
+          </Text>
+        )
+      }
+    ];
+
+    if (newThroughput) {
+      const newPrices: PriceBreakdown = getRuPriceBreakdown(
+        newThroughput,
+        serverId,
+        numberOfRegions,
+        isMultimaster,
+        false
+      );
+      estimatedSpendingItems.unshift({
+        costType: (
+          <Text>
+            <b>Updated Cost</b>
+          </Text>
+        ),
+        hourly: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}
+            </b>
+          </Text>
+        ),
+        daily: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}
+            </b>
+          </Text>
+        ),
+        monthly: (
+          <Text>
+            <b>
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
+            </b>
+          </Text>
+        )
+      });
+    }
+
+    return getEstimatedSpendingElement(
+      estimatedSpendingColumns,
+      estimatedSpendingItems,
+      newThroughput ?? throughput,
+      numberOfRegions,
+      prices,
+      false
+    );
+  };
+
   private getAutoPilotUsageCost = (): JSX.Element => {
     if (!this.props.maxAutoPilotThroughput) {
       return <></>;
@@ -318,6 +535,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
 
   private renderThroughputInput = (): JSX.Element => (
     <Stack {...titleAndInputStackProps}>
+      <Text>
+        Estimate your required throughput with
+        <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
+          {` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />
+        </Link>
+      </Text>
       <TextField
         required
         type="number"
@@ -349,13 +572,24 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           onChange={this.onSpendAckChecked}
         />
       )}
+      <br />
       {this.props.isFixed && <p>When using a collection with fixed storage capacity, you can set up to 10,000 RU/s.</p>}
     </Stack>
   );
 
+  private renderWarningMessage = (): JSX.Element => {
+    let warningMessage: JSX.Element;
+    if (this.IsComponentDirty().isDiscardable) {
+      warningMessage = saveThroughputWarningMessage;
+    }
+
+    return <>{warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}</>;
+  };
+
   public render(): JSX.Element {
     return (
       <Stack {...checkBoxAndInputStackProps}>
+        {this.renderWarningMessage()}
         {this.renderThroughputModeChoices()}
 
         {this.props.isAutoPilotSelected ? this.renderAutoPilotInput() : this.renderThroughputInput()}

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

@@ -8,6 +8,21 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     }
   }
 >
+  <StyledMessageBarBase
+    messageBarType={5}
+  >
+    <Text
+      styles={
+        Object {
+          "root": Object {
+            "fontSize": 12,
+          },
+        }
+      }
+    >
+      Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
+    </Text>
+  </StyledMessageBarBase>
   <Stack>
     <StyledLabelBase
       id="settingsV2RadioButtonLabelId"
@@ -214,6 +229,19 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       }
     }
   >
+    <Text>
+      Estimate your required throughput with
+      <StyledLinkBase
+        href="https://cosmos.azure.com/capacitycalculator/"
+        target="_blank"
+      >
+         capacity calculator
+         
+        <Component
+          iconName="NavigateExternalInline"
+        />
+      </StyledLinkBase>
+    </Text>
     <StyledTextFieldBase
       disabled={false}
       id="throughputInput"
@@ -239,38 +267,142 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
       type="number"
       value="100"
     />
-    <Text
-      id="throughputSpendElement"
+    <Stack
+      styles={
+        Object {
+          "root": Object {
+            "width": 600,
+          },
+        }
+      }
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
     >
-      Estimated cost (
-      USD
-      ):
-       
-      <b>
-        $
-        0.0080
-         hourly 
-         / 
-        $
-        0.19
-         daily 
-         / 
-        $
-        5.84
-         monthly
+      <StyledWithViewportComponent
+        columns={
+          Array [
+            Object {
+              "fieldName": "costType",
+              "isResizable": true,
+              "key": "costType",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "hourly",
+              "isResizable": true,
+              "key": "hourly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Hourly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "daily",
+              "isResizable": true,
+              "key": "daily",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Daily",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "monthly",
+              "isResizable": true,
+              "key": "monthly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Monthly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+          ]
+        }
+        disableSelectionZone={true}
+        items={
+          Array [
+            Object {
+              "costType": <Text>
+                Current Cost
+              </Text>,
+              "daily": <Text>
+                $
+                 
+                0.19
+              </Text>,
+              "hourly": <Text>
+                $
+                 
+                0.0080
+              </Text>,
+              "monthly": <Text>
+                $
+                 
+                5.84
+              </Text>,
+            },
+          ]
+        }
+        layoutMode={1}
+        onRenderRow={[Function]}
+        selectionMode={0}
+      />
+      <Text
+        id="throughputSpendElement"
+      >
+        (
+        regions: 
          
-      </b>
-      (
-      regions: 
-       
-      1
-      , 
-      100
-      RU/s, 
-      $
-      0.00008
-      /RU)
-    </Text>
+        1
+        , 
+        100
+         RU/s, 
+        $
+        0.00008
+        /RU)
+      </Text>
+      <Text>
+        <em>
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+        </em>
+      </Text>
+    </Stack>
     <StyledCheckboxBase
       checked={false}
       id="spendAckCheckBox"
@@ -288,6 +420,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
         }
       }
     />
+    <br />
   </Stack>
 </Stack>
 `;
@@ -369,6 +502,19 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       }
     }
   >
+    <Text>
+      Estimate your required throughput with
+      <StyledLinkBase
+        href="https://cosmos.azure.com/capacitycalculator/"
+        target="_blank"
+      >
+         capacity calculator
+         
+        <Component
+          iconName="NavigateExternalInline"
+        />
+      </StyledLinkBase>
+    </Text>
     <StyledTextFieldBase
       disabled={false}
       id="throughputInput"
@@ -394,38 +540,143 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
       type="number"
       value="100"
     />
-    <Text
-      id="throughputSpendElement"
+    <Stack
+      styles={
+        Object {
+          "root": Object {
+            "width": 600,
+          },
+        }
+      }
+      tokens={
+        Object {
+          "childrenGap": 10,
+        }
+      }
     >
-      Estimated cost (
-      USD
-      ):
-       
-      <b>
-        $
-        0.0080
-         hourly 
-         / 
-        $
-        0.19
-         daily 
-         / 
-        $
-        5.84
-         monthly
+      <StyledWithViewportComponent
+        columns={
+          Array [
+            Object {
+              "fieldName": "costType",
+              "isResizable": true,
+              "key": "costType",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "hourly",
+              "isResizable": true,
+              "key": "hourly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Hourly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "daily",
+              "isResizable": true,
+              "key": "daily",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Daily",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+            Object {
+              "fieldName": "monthly",
+              "isResizable": true,
+              "key": "monthly",
+              "maxWidth": 200,
+              "minWidth": 100,
+              "name": "Monthly",
+              "styles": Object {
+                "root": Object {
+                  "selectors": Object {
+                    ":hover": Object {
+                      "background": "transparent",
+                    },
+                  },
+                },
+              },
+            },
+          ]
+        }
+        disableSelectionZone={true}
+        items={
+          Array [
+            Object {
+              "costType": <Text>
+                Current Cost
+              </Text>,
+              "daily": <Text>
+                $
+                 
+                0.19
+              </Text>,
+              "hourly": <Text>
+                $
+                 
+                0.0080
+              </Text>,
+              "monthly": <Text>
+                $
+                 
+                5.84
+              </Text>,
+            },
+          ]
+        }
+        layoutMode={1}
+        onRenderRow={[Function]}
+        selectionMode={0}
+      />
+      <Text
+        id="throughputSpendElement"
+      >
+        (
+        regions: 
          
-      </b>
-      (
-      regions: 
-       
-      1
-      , 
-      100
-      RU/s, 
-      $
-      0.00008
-      /RU)
-    </Text>
+        1
+        , 
+        100
+         RU/s, 
+        $
+        0.00008
+        /RU)
+      </Text>
+      <Text>
+        <em>
+          *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+        </em>
+      </Text>
+    </Stack>
+    <br />
   </Stack>
 </Stack>
 `;

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

@@ -60,66 +60,100 @@ exports[`SettingsUtils functions render 1`] = `
     </StyledLinkBase>
     .
   </Text>
-  <Text
-    id="throughputSpendElement"
+  <Stack
+    styles={
+      Object {
+        "root": Object {
+          "width": 600,
+        },
+      }
+    }
+    tokens={
+      Object {
+        "childrenGap": 10,
+      }
+    }
   >
-    Estimated cost (
-    RMB
-    ):
-     
-    <b>
-      ¥
-      1.02
-       hourly 
-       / 
-      ¥
-      24.48
-       daily 
-       / 
-      ¥
-      744.60
-       monthly
+    <StyledWithViewportComponent
+      columns={
+        Array [
+          Object {
+            "fieldName": "costType",
+            "isResizable": true,
+            "key": "costType",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "",
+          },
+          Object {
+            "fieldName": "hourly",
+            "isResizable": true,
+            "key": "hourly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Hourly",
+          },
+          Object {
+            "fieldName": "daily",
+            "isResizable": true,
+            "key": "daily",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Daily",
+          },
+          Object {
+            "fieldName": "monthly",
+            "isResizable": true,
+            "key": "monthly",
+            "maxWidth": 200,
+            "minWidth": 100,
+            "name": "Monthly",
+          },
+        ]
+      }
+      disableSelectionZone={true}
+      items={
+        Array [
+          Object {
+            "costType": <Text>
+              Current Cost
+            </Text>,
+            "daily": <Text>
+              $ 24.48
+            </Text>,
+            "hourly": <Text>
+              $ 1.02
+            </Text>,
+            "monthly": <Text>
+              $ 744.6
+            </Text>,
+          },
+        ]
+      }
+      layoutMode={1}
+      onRenderRow={[Function]}
+      selectionMode={0}
+    />
+    <Text
+      id="throughputSpendElement"
+    >
+      (
+      regions: 
        
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    1000
-    RU/s, 
-    ¥
-    0.00051
-    /RU)
-  </Text>
-  <Text
-    id="autoscaleSpendElement"
-  >
-    Estimated monthly cost (
-    RMB
-    ) is
-     
-    <b>
+      2
+      , 
+      1000
+       RU/s, 
       ¥
-      111.69
-       - 
-      ¥
-      1116.90
-       
-    </b>
-    (
-    regions: 
-     
-    2
-    , 
-    100
-     - 
-    1000
-     RU/s, 
-    ¥
-    0.000765
-    /RU)
-  </Text>
+      0.00051
+      /RU)
+    </Text>
+    <Text>
+      <em>
+        *This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account
+      </em>
+    </Text>
+  </Stack>
   <Text
     id="manualToAutoscaleDisclaimerElement"
     styles={

src/Explorer/Tabs/QueryTab.html

@@ -103,7 +103,7 @@
         </div>
         <json-editor
           params="{ content: queryResults, isReadOnly: true, ariaLabel: 'Query results' }"
-          data-bind="visible: queryResults().length > 0 && isResultToggled() && allResultsMetadata().length > 0 && !error()"
+          data-bind="visible: queryResults() && queryResults().length > 0 && isResultToggled() && allResultsMetadata().length > 0 && !error()"
         >
         </json-editor>
         <div

src/Explorer/Tabs/TabsManager.html

@@ -142,7 +142,7 @@
       <notebook-viewer-tab params="{data: $data}"></notebook-viewer-tab>
       <!-- /ko -->
 
-      <!-- ko if: $data.tabKind === 19 -->
+      <!-- ko if: $data.tabKind === 20 -->
       <settings-tab-v2 params="{data: $data}"></settings-tab-v2>
       <!-- /ko -->
     </div>

src/Explorer/Tree/Collection.ts

@@ -551,7 +551,7 @@ export default class Collection implements ViewModels.Collection {
 
     const tabTitle = !this.offer() ? "Settings" : "Scale & Settings";
     const pendingNotificationsPromise: Q.Promise<DataModels.Notification> = this._getPendingThroughputSplitNotification();
-    const matchingTabs = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.Settings, tab => {
+    const matchingTabs = this.container.tabsManager.getTabs(ViewModels.CollectionTabKind.SettingsV2, tab => {
       return tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id();
     });
 

src/RouteHandlers/TabRouteHandler.ts

@@ -17,9 +17,7 @@ export class TabRouteHandler {
   ): void {
     this._initRouter();
     const parseHash = (newHash: string, oldHash: string) => this._tabRouter.parse(newHash);
-    const defaultRoutedCallback = (request: string, data: { route: any; params: string[]; isFirst: boolean }) => {
-      console.log(request);
-    };
+    const defaultRoutedCallback = (request: string, data: { route: any; params: string[]; isFirst: boolean }) => {};
     this._tabRouter.routed.add(onMatch || defaultRoutedCallback);
     hasher.initialized.add(parseHash);
     hasher.changed.add(parseHash);

src/Utils/PricingUtils.test.ts

@@ -25,39 +25,151 @@ describe("PricingUtils Tests", () => {
 
   describe("computeRUUsagePriceHourly()", () => {
     it("should return 0 for NaN regions default cloud", () => {
-      const value = PricingUtils.computeRUUsagePriceHourly("default", 1, null, false);
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: null,
+        multimasterEnabled: false,
+        isAutoscale: false
+      });
+      expect(value).toBe(0);
+    });
+    it("should return 0 for NaN regions default cloud, autoscale", () => {
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: null,
+        multimasterEnabled: false,
+        isAutoscale: true
+      });
       expect(value).toBe(0);
     });
 
     it("should return 0 for -1 regions", () => {
-      const value = PricingUtils.computeRUUsagePriceHourly("default", 1, -1, false);
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: -1,
+        multimasterEnabled: false,
+        isAutoscale: false
+      });
+      expect(value).toBe(0);
+    });
+    it("should return 0 for -1 regions, autoscale", () => {
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: -1,
+        multimasterEnabled: false,
+        isAutoscale: true
+      });
       expect(value).toBe(0);
     });
 
     it("should return 0.00008 for default cloud, 1RU, 1 region, multimaster disabled", () => {
-      const value = PricingUtils.computeRUUsagePriceHourly("default", 1, 1, false);
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 1,
+        multimasterEnabled: false,
+        isAutoscale: false
+      });
       expect(value).toBe(0.00008);
     });
+    it("should return 0.00008 for default cloud, 1RU, 1 region, multimaster disabled, autoscale", () => {
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 1,
+        multimasterEnabled: false,
+        isAutoscale: true
+      });
+      expect(value).toBe(0.00012);
+    });
 
     it("should return 0.00051 for Mooncake cloud, 1RU, 1 region, multimaster disabled", () => {
-      const value = PricingUtils.computeRUUsagePriceHourly("mooncake", 1, 1, false);
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "mooncake",
+        requestUnits: 1,
+        numberOfRegions: 1,
+        multimasterEnabled: false,
+        isAutoscale: false
+      });
       expect(value).toBe(0.00051);
     });
+    it("should return 0.00051 for Mooncake cloud, 1RU, 1 region, multimaster disabled, autoscale", () => {
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "mooncake",
+        requestUnits: 1,
+        numberOfRegions: 1,
+        multimasterEnabled: false,
+        isAutoscale: true
+      });
+      expect(value).toBe(0.00076);
+    });
 
     it("should return 0.00016 for default cloud, 1RU, 2 regions, multimaster disabled", () => {
-      const value = PricingUtils.computeRUUsagePriceHourly("default", 1, 2, false);
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 2,
+        multimasterEnabled: false,
+        isAutoscale: false
+      });
       expect(value).toBe(0.00016);
     });
+    it("should return 0.00016 for default cloud, 1RU, 2 regions, multimaster disabled, autoscale", () => {
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 2,
+        multimasterEnabled: false,
+        isAutoscale: true
+      });
+      expect(value).toBe(0.00024);
+    });
 
     it("should return 0.00008 for default cloud, 1RU, 1 region, multimaster enabled", () => {
-      const value = PricingUtils.computeRUUsagePriceHourly("default", 1, 1, true);
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 1,
+        multimasterEnabled: true,
+        isAutoscale: false
+      });
       expect(value).toBe(0.00008);
     });
+    it("should return 0.00008 for default cloud, 1RU, 1 region, multimaster enabled, autoscale", () => {
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 1,
+        multimasterEnabled: true,
+        isAutoscale: true
+      });
+      expect(value).toBe(0.00012);
+    });
 
     it("should return 0.00048 for default cloud, 1RU, 2 region, multimaster enabled", () => {
-      const value = PricingUtils.computeRUUsagePriceHourly("default", 1, 2, true);
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 2,
+        multimasterEnabled: true,
+        isAutoscale: false
+      });
       expect(value).toBe(0.00048);
     });
+    it("should return 0.00048 for default cloud, 1RU, 2 region, multimaster enabled, autoscale", () => {
+      const value = PricingUtils.computeRUUsagePriceHourly({
+        serverId: "default",
+        requestUnits: 1,
+        numberOfRegions: 2,
+        multimasterEnabled: true,
+        isAutoscale: true
+      });
+      expect(value).toBe(0.00096);
+    });
   });
 
   describe("getPriceCurrency()", () => {

src/Utils/PricingUtils.ts

@@ -1,6 +1,17 @@
 import * as AutoPilotUtils from "../Utils/AutoPilotUtils";
 import * as Constants from "../Shared/Constants";
 
+interface ComputeRUUsagePriceHourlyArgs {
+  serverId: string;
+  requestUnits: number;
+  numberOfRegions: number;
+  multimasterEnabled: boolean;
+  isAutoscale: boolean;
+}
+
+export const estimatedCostDisclaimer =
+  "*This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account";
+
 /**
  * Anything that is not a number should return 0
  * Otherwise, return numberOfRegions
@@ -47,15 +58,16 @@ export function getMultimasterMultiplier(numberOfRegions: number, multimasterEna
   return multimasterMultiplier;
 }
 
-export function computeRUUsagePriceHourly(
-  serverId: string,
-  requestUnits: number,
-  numberOfRegions: number,
-  multimasterEnabled: boolean
-): number {
+export function computeRUUsagePriceHourly({
+  serverId,
+  requestUnits,
+  numberOfRegions,
+  multimasterEnabled,
+  isAutoscale
+}: ComputeRUUsagePriceHourlyArgs): number {
   const regionMultiplier: number = getRegionMultiplier(numberOfRegions, multimasterEnabled);
   const multimasterMultiplier: number = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = getPricePerRu(serverId);
+  const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multimasterMultiplier) : getPricePerRu(serverId);
   const ruCharge = requestUnits * pricePerRu * multimasterMultiplier * regionMultiplier;
 
   return Number(ruCharge.toFixed(5));
@@ -159,28 +171,19 @@ export function getAutoPilotV3SpendHtml(maxAutoPilotThroughputSet: number, isDat
   }' target='_blank' aria-label='Learn more about autoscale throughput'>Learn more</a>.`;
 }
 
-export function computeAutoscaleUsagePriceHourly(
-  serverId: string,
-  requestUnits: number,
-  numberOfRegions: number,
-  multimasterEnabled: boolean
-): number {
-  const regionMultiplier: number = getRegionMultiplier(numberOfRegions, multimasterEnabled);
-  const multimasterMultiplier: number = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-
-  const pricePerRu = getAutoscalePricePerRu(serverId, multimasterMultiplier);
-  const ruCharge = requestUnits * pricePerRu * multimasterMultiplier * regionMultiplier;
-
-  return Number(ruCharge.toFixed(5));
-}
-
 export function getEstimatedAutoscaleSpendHtml(
   throughput: number,
   serverId: string,
   regions: number,
   multimaster: boolean
 ): string {
-  const hourlyPrice: number = computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster);
+  const hourlyPrice: number = computeRUUsagePriceHourly({
+    serverId: serverId,
+    requestUnits: throughput,
+    numberOfRegions: regions,
+    multimasterEnabled: multimaster,
+    isAutoscale: true
+  });
   const monthlyPrice: number = hourlyPrice * Constants.hoursInAMonth;
   const currency: string = getPriceCurrency(serverId);
   const currencySign: string = getCurrencySign(serverId);
@@ -203,7 +206,13 @@ export function getEstimatedSpendHtml(
   regions: number,
   multimaster: boolean
 ): string {
-  const hourlyPrice: number = computeRUUsagePriceHourly(serverId, throughput, regions, multimaster);
+  const hourlyPrice: number = computeRUUsagePriceHourly({
+    serverId: serverId,
+    requestUnits: throughput,
+    numberOfRegions: regions,
+    multimasterEnabled: multimaster,
+    isAutoscale: false
+  });
   const dailyPrice: number = hourlyPrice * 24;
   const monthlyPrice: number = hourlyPrice * Constants.hoursInAMonth;
   const currency: string = getPriceCurrency(serverId);
@@ -217,7 +226,7 @@ export function getEstimatedSpendHtml(
     `${currencySign}${calculateEstimateNumber(monthlyPrice)} monthly </b> ` +
     `(${regions} ${regions === 1 ? "region" : "regions"}, ${throughput}RU/s, ${currencySign}${pricePerRu}/RU)` +
     `<p style='padding: 10px 0px 0px 0px;'>` +
-    `<em>*This cost is an estimate and may vary based on the regions where your account is deployed and potential discounts applied to your account</em></p>`
+    `<em>${estimatedCostDisclaimer}</em></p>`
   );
 }
 
@@ -228,9 +237,13 @@ export function getEstimatedSpendAcknowledgeString(
   multimaster: boolean,
   isAutoscale: boolean
 ): string {
-  const hourlyPrice: number = isAutoscale
-    ? computeAutoscaleUsagePriceHourly(serverId, throughput, regions, multimaster)
-    : computeRUUsagePriceHourly(serverId, throughput, regions, multimaster);
+  const hourlyPrice: number = computeRUUsagePriceHourly({
+    serverId: serverId,
+    requestUnits: throughput,
+    numberOfRegions: regions,
+    multimasterEnabled: multimaster,
+    isAutoscale: isAutoscale
+  });
   const dailyPrice: number = hourlyPrice * 24;
   const monthlyPrice: number = hourlyPrice * Constants.hoursInAMonth;
   const currencySign: string = getCurrencySign(serverId);

test/cassandra/container.spec.ts

@@ -120,7 +120,7 @@ describe("Collection Add and Delete Cassandra spec", () => {
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `./failed-${testName}.jpg` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

test/mongo/container.spec.ts

@@ -136,7 +136,7 @@ describe("Collection Add and Delete Mongo spec", () => {
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `./failed-${testName}.jpg` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

test/sql/container.spec.ts

@@ -54,7 +54,7 @@ describe("Collection Add and Delete SQL spec", () => {
       // validate created
       // open database menu
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
-      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitFor(CREATE_DELAY);
       await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
       const databases = await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
       const selectedDbId = await frame.evaluate(element => {
@@ -139,7 +139,7 @@ describe("Collection Add and Delete SQL spec", () => {
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `./failed-${testName}.jpg` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

test/tables/container.spec.ts

@@ -83,7 +83,7 @@ describe("Collection Add and Delete Tables spec", () => {
     } catch (error) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `./failed-${testName}.jpg` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
       throw error;
     }
   });

tsconfig.json

@@ -11,7 +11,7 @@
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
     "module": "esnext",
-    "target": "es5",
+    "target": "es2017",
     "lib": ["es5", "es6", "dom", "webworker.importscripts"],
     "jsx": "react",
     "moduleResolution": "node",

webpack.config.js

@@ -9,8 +9,8 @@ const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 const CreateFileWebpack = require("create-file-webpack");
 const childProcess = require("child_process");
 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
-const TerserPlugin = require("terser-webpack-plugin");
 const isCI = require("is-ci");
+const { ESBuildPlugin, ESBuildMinifyPlugin } = require("esbuild-loader");
 
 const gitSha = childProcess.execSync("git rev-parse HEAD").toString("utf8");
 
@@ -56,37 +56,20 @@ const htmlRule = {
   ]
 };
 
-// We compile our own code with ts-loader
 const typescriptRule = {
   test: /\.tsx?$/,
   use: [
     {
-      loader: "ts-loader",
+      loader: "esbuild-loader",
       options: {
-        transpileOnly: true
+        loader: "tsx",
+        target: "es2017"
       }
     }
   ],
   exclude: /node_modules/
 };
 
-// Third party modules are compiled with babel since using ts-loader that much causes webpack to run out of memory
-const ModulesRule = {
-  test: /\.js$/,
-  use: [
-    {
-      loader: "babel-loader",
-      options: {
-        cacheDirectory: ".cache/babel",
-        presets: [["@babel/preset-env", { targets: { ie: "11" }, useBuiltIns: false }]]
-      }
-    }
-  ],
-  include: /node_modules/,
-  // Exclude large modules we know don't need transpiling
-  exclude: /vega|monaco|plotly/
-};
-
 module.exports = function(env = {}, argv = {}) {
   const mode = argv.mode || "development";
   const rules = [fontRule, lessRule, imagesRule, cssRule, htmlRule, typescriptRule];
@@ -96,7 +79,6 @@ module.exports = function(env = {}, argv = {}) {
   };
 
   if (mode === "production") {
-    rules.push(ModulesRule);
     envVars.NODE_ENV = "production";
   }
 
@@ -105,6 +87,7 @@ module.exports = function(env = {}, argv = {}) {
   }
 
   const plugins = [
+    new ESBuildPlugin(),
     new CleanWebpackPlugin(["dist"]),
     new CreateFileWebpack({
       path: "./dist",
@@ -211,13 +194,8 @@ module.exports = function(env = {}, argv = {}) {
     optimization: {
       minimize: mode === "production" ? true : false,
       minimizer: [
-        new TerserPlugin({
-          cache: ".cache/terser",
-          terserOptions: {
-            // These options increase our initial bundle size by ~5% but the builds are significantly faster and won't run out of memory
-            compress: false,
-            mangle: true
-          }
+        new ESBuildMinifyPlugin({
+          target: "es2017" // Syntax to compile to (see options below for possible values)
         })
       ]
     },