Merge branch 'master' into replace_jqeury_ajax_with_fetch

* 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

@@ -101,6 +101,7 @@ jobs:
           PLATFORM: "Emulator"
           NODE_TLS_REJECT_UNAUTHORIZED: 0
       - uses: actions/upload-artifact@v2
+        if: failure()
         with:
           name: screenshots
           path: failed-*
@@ -159,13 +160,14 @@ jobs:
           TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
           DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
       - uses: actions/upload-artifact@v2
+        if: failure()
         with:
           name: screenshots
           path: failed-*
   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 }}
@@ -189,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 }}
@@ -211,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"

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/Tables/TableDataClient.ts

@@ -265,9 +265,11 @@ export class CassandraAPIDataClient extends TableDataClient {
         authType === AuthType.EncryptedToken
           ? Constants.CassandraBackend.guestQueryApi
           : Constants.CassandraBackend.queryApi;
-      const data: any = await $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
-        type: "POST",
-        data: {
+      const authorizationHeader = getAuthorizationHeader();
+
+      const response = await fetch(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+        method: "POST",
+        body: JSON.stringify({
           accountName:
             collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
           cassandraEndpoint: this.trimCassandraEndpoint(
@@ -278,11 +280,19 @@ export class CassandraAPIDataClient extends TableDataClient {
           tableId: collection.id(),
           query,
           paginationToken
-        },
-        beforeSend: this.setAuthorizationHeader,
-        error: this.handleAjaxError,
-        cache: false
+        }),
+        headers: {
+          [authorizationHeader.header]: authorizationHeader.token,
+          [Constants.HttpHeaders.contentType]: "application/json"
+        }
       });
+
+      if (!response.ok) {
+        displayTokenRenewalPromptForStatus(response.status);
+        throw Error(`Failed to query rows for table ${collection.id()}`);
+      }
+
+      const data = await response.json();
       shouldNotify &&
         NotificationConsoleUtils.logConsoleInfo(
           `Successfully fetched ${data.result.length} rows for table ${collection.id()}`
@@ -450,9 +460,9 @@ export class CassandraAPIDataClient extends TableDataClient {
     return deferred.promise;
   }
 
-  public getTableKeys(collection: ViewModels.Collection): Q.Promise<CassandraTableKeys> {
+  public async getTableKeys(collection: ViewModels.Collection): Promise<CassandraTableKeys> {
     if (!!collection.cassandraKeys) {
-      return Q.resolve(collection.cassandraKeys);
+      return collection.cassandraKeys;
     }
     const notificationId = NotificationConsoleUtils.logConsoleMessage(
       ConsoleDataType.InProgress,
@@ -464,45 +474,51 @@ export class CassandraAPIDataClient extends TableDataClient {
         ? Constants.CassandraBackend.guestKeysApi
         : Constants.CassandraBackend.keysApi;
     let endpoint = `${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`;
-    const deferred = Q.defer<CassandraTableKeys>();
-    $.ajax(endpoint, {
-      type: "POST",
-      data: {
-        accountName: collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
-        cassandraEndpoint: this.trimCassandraEndpoint(
-          collection.container.databaseAccount().properties.cassandraEndpoint
-        ),
-        resourceId: collection.container.databaseAccount().id,
-        keyspaceId: collection.databaseId,
-        tableId: collection.id()
-      },
-      beforeSend: this.setAuthorizationHeader,
-      error: this.handleAjaxError,
-      cache: false
-    })
-      .then(
-        (data: CassandraTableKeys) => {
-          collection.cassandraKeys = data;
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully fetched keys for table ${collection.id()}`
-          );
-          deferred.resolve(data);
-        },
-        (error: any) => {
-          handleError(error, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
-          deferred.reject(error);
+    const authorizationHeader = getAuthorizationHeader();
+
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        body: JSON.stringify({
+          accountName:
+            collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
+          cassandraEndpoint: this.trimCassandraEndpoint(
+            collection.container.databaseAccount().properties.cassandraEndpoint
+          ),
+          resourceId: collection.container.databaseAccount().id,
+          keyspaceId: collection.databaseId,
+          tableId: collection.id()
+        }),
+        headers: {
+          [authorizationHeader.header]: authorizationHeader.token,
+          [Constants.HttpHeaders.contentType]: "application/json"
         }
-      )
-      .done(() => {
-        NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
       });
-    return deferred.promise;
+
+      if (!response.ok) {
+        displayTokenRenewalPromptForStatus(response.status);
+        throw Error(`Fetching keys for table ${collection.id()} failed`);
+      }
+
+      const data: CassandraTableKeys = await response.json();
+      collection.cassandraKeys = data;
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Info,
+        `Successfully fetched keys for table ${collection.id()}`
+      );
+
+      return data;
+    } catch (error) {
+      handleError(error, "FetchKeysCassandra", `Error fetching keys for table ${collection.id()}`);
+      throw error;
+    } finally {
+      NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
+    }
   }
 
-  public getTableSchema(collection: ViewModels.Collection): Q.Promise<CassandraTableKey[]> {
+  public async getTableSchema(collection: ViewModels.Collection): Promise<CassandraTableKey[]> {
     if (!!collection.cassandraSchema) {
-      return Q.resolve(collection.cassandraSchema);
+      return collection.cassandraSchema;
     }
     const notificationId = NotificationConsoleUtils.logConsoleMessage(
       ConsoleDataType.InProgress,
@@ -514,74 +530,79 @@ export class CassandraAPIDataClient extends TableDataClient {
         ? Constants.CassandraBackend.guestSchemaApi
         : Constants.CassandraBackend.schemaApi;
     let endpoint = `${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`;
-    const deferred = Q.defer<CassandraTableKey[]>();
-    $.ajax(endpoint, {
-      type: "POST",
-      data: {
-        accountName: collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
-        cassandraEndpoint: this.trimCassandraEndpoint(
-          collection.container.databaseAccount().properties.cassandraEndpoint
-        ),
-        resourceId: collection.container.databaseAccount().id,
-        keyspaceId: collection.databaseId,
-        tableId: collection.id()
-      },
-      beforeSend: this.setAuthorizationHeader,
-      error: this.handleAjaxError,
-      cache: false
-    })
-      .then(
-        (data: any) => {
-          collection.cassandraSchema = data.columns;
-          NotificationConsoleUtils.logConsoleMessage(
-            ConsoleDataType.Info,
-            `Successfully fetched schema for table ${collection.id()}`
-          );
-          deferred.resolve(data.columns);
-        },
-        (error: any) => {
-          handleError(error, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
-          deferred.reject(error);
+    const authorizationHeader = getAuthorizationHeader();
+
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        body: JSON.stringify({
+          accountName:
+            collection && collection.container.databaseAccount && collection.container.databaseAccount().name,
+          cassandraEndpoint: this.trimCassandraEndpoint(
+            collection.container.databaseAccount().properties.cassandraEndpoint
+          ),
+          resourceId: collection.container.databaseAccount().id,
+          keyspaceId: collection.databaseId,
+          tableId: collection.id()
+        }),
+        headers: {
+          [authorizationHeader.header]: authorizationHeader.token,
+          [Constants.HttpHeaders.contentType]: "application/json"
         }
-      )
-      .done(() => {
-        NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
       });
-    return deferred.promise;
+
+      if (!response.ok) {
+        displayTokenRenewalPromptForStatus(response.status);
+        throw Error(`Failed to fetch schema for table ${collection.id()}`);
+      }
+
+      const data = await response.json();
+      collection.cassandraSchema = data.columns;
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Info,
+        `Successfully fetched schema for table ${collection.id()}`
+      );
+
+      return data.columns;
+    } catch (error) {
+      handleError(error, "FetchSchemaCassandra", `Error fetching schema for table ${collection.id()}`);
+      throw error;
+    } finally {
+      NotificationConsoleUtils.clearInProgressMessageWithId(notificationId);
+    }
   }
 
-  private createOrDeleteQuery(
+  private async createOrDeleteQuery(
     cassandraEndpoint: string,
     resourceId: string,
     query: string,
     explorer: Explorer
-  ): Q.Promise<any> {
-    const deferred = Q.defer();
+  ): Promise<void> {
     const authType = window.authType;
     const apiEndpoint: string =
       authType === AuthType.EncryptedToken
         ? Constants.CassandraBackend.guestCreateOrDeleteApi
         : Constants.CassandraBackend.createOrDeleteApi;
-    $.ajax(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
-      type: "POST",
-      data: {
+    const authorizationHeader = getAuthorizationHeader();
+
+    const response = await fetch(`${configContext.BACKEND_ENDPOINT}/${apiEndpoint}`, {
+      method: "POST",
+      body: JSON.stringify({
         accountName: explorer.databaseAccount() && explorer.databaseAccount().name,
         cassandraEndpoint: this.trimCassandraEndpoint(cassandraEndpoint),
-        resourceId: resourceId,
-        query: query
-      },
-      beforeSend: this.setAuthorizationHeader,
-      error: this.handleAjaxError,
-      cache: false
-    }).then(
-      (data: any) => {
-        deferred.resolve();
-      },
-      reason => {
-        deferred.reject(reason);
+        resourceId,
+        query
+      }),
+      headers: {
+        [authorizationHeader.header]: authorizationHeader.token,
+        [Constants.HttpHeaders.contentType]: "application/json"
       }
-    );
-    return deferred.promise;
+    });
+
+    if (!response.ok) {
+      displayTokenRenewalPromptForStatus(response.status);
+      throw Error(`Failed to create or delete keyspace/table`);
+    }
   }
 
   private trimCassandraEndpoint(cassandraEndpoint: string): string {
@@ -600,13 +621,6 @@ export class CassandraAPIDataClient extends TableDataClient {
     return cassandraEndpoint;
   }
 
-  private setAuthorizationHeader: (xhr: XMLHttpRequest) => boolean = (xhr: XMLHttpRequest): boolean => {
-    const authorizationHeaderMetadata: ViewModels.AuthorizationTokenHeaderMetadata = getAuthorizationHeader();
-    xhr.setRequestHeader(authorizationHeaderMetadata.header, authorizationHeaderMetadata.token);
-
-    return true;
-  };
-
   private isStringType(dataType: string): boolean {
     // TODO figure out rest of types that are considered strings by Cassandra (if any have been missed)
     return (
@@ -620,12 +634,4 @@ export class CassandraAPIDataClient extends TableDataClient {
   private getCassandraPartitionKeyProperty(collection: ViewModels.Collection): string {
     return collection.cassandraKeys.partitionKeys[0].property;
   }
-
-  private handleAjaxError = (xhrObj: XMLHttpRequest, textStatus: string, errorThrown: string): void => {
-    if (!xhrObj) {
-      return;
-    }
-
-    displayTokenRenewalPromptForStatus(xhrObj.status);
-  };
 }

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/Platform/Hosted/Authorization.ts

@@ -10,6 +10,7 @@ import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility"
 import * as Logger from "../../Common/Logger";
 import { configContext } from "../../ConfigContext";
 import { userContext } from "../../UserContext";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 
 export default class AuthHeadersUtil {
   public static serverId: string = Constants.ServerIds.productionPortal;
@@ -37,8 +38,7 @@ export default class AuthHeadersUtil {
     cacheLocation: window.navigator.userAgent.indexOf("Edge") > -1 ? "localStorage" : undefined
   });
 
-  public static getAccessInputMetadata(accessInput: string): Q.Promise<DataModels.AccessInputMetadata> {
-    const deferred: Q.Deferred<DataModels.AccessInputMetadata> = Q.defer<DataModels.AccessInputMetadata>();
+  public static async getAccessInputMetadata(accessInput: string): Promise<DataModels.AccessInputMetadata> {
     const url = `${configContext.BACKEND_ENDPOINT}${Constants.ApiEndpoints.guestRuntimeProxy}/accessinputmetadata`;
     const authType: string = (<any>window).authType;
     const headers: { [headerName: string]: string } = {};
@@ -49,58 +49,55 @@ export default class AuthHeadersUtil {
       headers[Constants.HttpHeaders.connectionString] = accessInput;
     }
 
-    $.ajax({
-      url: url,
-      type: "GET",
-      headers: headers,
-      cache: false,
-      dataType: "text"
-    }).then(
-      (data: string, textStatus: string, xhr: JQueryXHR<any>) => {
-        if (!data) {
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, `Failed to get access input metadata`);
-          deferred.reject(`Failed to get access input metadata`);
-        }
+    let responseText: string;
+    try {
+      const timeout = setTimeout(() => {
+        throw Error("Request timed out while fetching access input metadata");
+      }, Constants.ClientDefaults.requestTimeoutMs);
 
-        try {
-          const metadata: DataModels.AccessInputMetadata = JSON.parse(JSON.parse(data));
-          deferred.resolve(metadata); // TODO: update to a single JSON parse once backend response is stringified exactly once
-        } catch (error) {
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, "Failed to parse access input metadata");
-          deferred.reject("Failed to parse access input metadata");
-          throw error;
-        }
-      },
-      (xhr: JQueryXHR<any>, textStatus: string, error: any) => {
-        NotificationConsoleUtils.logConsoleMessage(
-          ConsoleDataType.Error,
-          `Error while fetching access input metadata: ${JSON.stringify(xhr.responseText)}`
-        );
-        deferred.reject(xhr.responseText);
+      const response = await fetch(url, {
+        headers,
+        method: "GET"
+      });
+
+      clearTimeout(timeout);
+
+      responseText = await response.text();
+      if (!response.ok || !responseText) {
+        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, `Failed to get access input metadata`);
+        throw Error("Failed to get access input metadata");
       }
-    );
+    } catch (error) {
+      const errorMessage: string = getErrorMessage(error);
+      NotificationConsoleUtils.logConsoleMessage(
+        ConsoleDataType.Error,
+        `Error while fetching access input metadata: ${errorMessage}`
+      );
+      throw error;
+    }
 
-    return deferred.promise.timeout(Constants.ClientDefaults.requestTimeoutMs);
+    try {
+      const metadata: DataModels.AccessInputMetadata = JSON.parse(JSON.parse(responseText));
+      return metadata; // TODO: update to a single JSON parse once backend response is stringified exactly once
+    } catch (error) {
+      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, "Failed to parse access input metadata");
+      throw error;
+    }
   }
 
-  public static generateEncryptedToken(): Q.Promise<DataModels.GenerateTokenResponse> {
+  public static async generateEncryptedToken(): Promise<DataModels.GenerateTokenResponse> {
     const url = configContext.BACKEND_ENDPOINT + "/api/tokens/generateToken" + AuthHeadersUtil._generateResourceUrl();
     const explorer = window.dataExplorer;
     const headers: any = { authorization: userContext.authorizationToken };
     headers[Constants.HttpHeaders.getReadOnlyKey] = !explorer.hasWriteAccess();
+    headers[Constants.HttpHeaders.contentType] = "application/json";
 
-    return AuthHeadersUtil._initiateGenerateTokenRequest({
-      url: url,
-      type: "POST",
-      headers: headers,
-      contentType: "application/json",
-      cache: false
-    });
+    return await AuthHeadersUtil._initiateGenerateTokenRequest(url, "POST", headers);
   }
 
-  public static generateUnauthenticatedEncryptedTokenForConnectionString(
+  public static async generateUnauthenticatedEncryptedTokenForConnectionString(
     connectionString: string
-  ): Q.Promise<DataModels.GenerateTokenResponse> {
+  ): Promise<DataModels.GenerateTokenResponse> {
     if (!connectionString) {
       return Q.reject("None or empty connection string specified");
     }
@@ -108,14 +105,9 @@ export default class AuthHeadersUtil {
     const url = configContext.BACKEND_ENDPOINT + "/api/guest/tokens/generateToken";
     const headers: any = {};
     headers[Constants.HttpHeaders.connectionString] = connectionString;
+    headers[Constants.HttpHeaders.contentType] = "application/json";
 
-    return AuthHeadersUtil._initiateGenerateTokenRequest({
-      url: url,
-      type: "POST",
-      headers: headers,
-      contentType: "application/json",
-      cache: false
-    });
+    return await AuthHeadersUtil._initiateGenerateTokenRequest(url, "POST", headers);
   }
 
   public static isUserSignedIn(): boolean {
@@ -282,24 +274,27 @@ export default class AuthHeadersUtil {
     return `?resourceUrl=${resourceUrl}&rid=${rid}&rtype=${rtype}&sid=${sid}&rg=${rg}&dba=${dba}&api=${apiKind}`;
   }
 
-  private static _initiateGenerateTokenRequest(
-    requestSettings: JQueryAjaxSettings<any>
-  ): Q.Promise<DataModels.GenerateTokenResponse> {
-    const deferred: Q.Deferred<DataModels.GenerateTokenResponse> = Q.defer<DataModels.GenerateTokenResponse>();
+  private static async _initiateGenerateTokenRequest(
+    url: string,
+    method: string,
+    headers: any
+  ): Promise<DataModels.GenerateTokenResponse> {
+    const timeout = setTimeout(() => {
+      throw Error("Request timed out while generating token");
+    }, Constants.ClientDefaults.requestTimeoutMs);
 
-    $.ajax(requestSettings).then(
-      (data: string, textStatus: string, xhr: JQueryXHR<any>) => {
-        if (!data) {
-          deferred.reject("No token generated");
-        }
+    const response = await fetch(url, {
+      headers,
+      method
+    });
 
-        deferred.resolve(JSON.parse(data));
-      },
-      (xhr: JQueryXHR<any>, textStatus: string, error: any) => {
-        deferred.reject(xhr.responseText);
-      }
-    );
+    clearTimeout(timeout);
 
-    return deferred.promise.timeout(Constants.ClientDefaults.requestTimeoutMs);
+    const token: string = await response.json();
+    if (response.ok && token) {
+      return JSON.parse(token);
+    }
+
+    throw Error("No token generated");
   }
 }

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