fixed typescript strict of priceUtils

.eslintignore

@@ -21,8 +21,16 @@ src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
+src/Config.ts
+src/Contracts/ActionContracts.ts
+src/Contracts/DataModels.ts
+src/Contracts/Diagnostics.ts
+src/Contracts/ExplorerContracts.ts
+src/Contracts/Versions.ts
+src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
+src/Controls/Heatmap/HeatmapDatatypes.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -36,10 +44,29 @@ src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
+src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
-
+src/Explorer/Controls/DynamicList/DynamicList.test.ts
+src/Explorer/Controls/DynamicList/DynamicListComponent.ts
 src/Explorer/Controls/Editor/EditorComponent.ts
+src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts
+src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
+src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts
+src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts
+src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
+src/Explorer/Controls/Toolbar/IToolbarAction.ts
+src/Explorer/Controls/Toolbar/IToolbarDisplayable.ts
+src/Explorer/Controls/Toolbar/IToolbarDropDown.ts
+src/Explorer/Controls/Toolbar/IToolbarItem.ts
+src/Explorer/Controls/Toolbar/IToolbarSeperator.ts
+src/Explorer/Controls/Toolbar/IToolbarToggle.ts
+src/Explorer/Controls/Toolbar/KeyCodes.ts
+src/Explorer/Controls/Toolbar/Toolbar.ts
+src/Explorer/Controls/Toolbar/ToolbarAction.ts
+src/Explorer/Controls/Toolbar/ToolbarDropDown.ts
+src/Explorer/Controls/Toolbar/ToolbarToggle.ts
+src/Explorer/Controls/Toolbar/Utilities.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts

src/Controls/Heatmap/Heatmap.test.ts

@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
   };
 
   let heatmap: Heatmap;
-  const theme: PortalTheme = 1;
-  const divElement = `<div id="${Heatmap.elementId}"></div>`;
+  let theme: PortalTheme = 1;
+  const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
 
   describe("drawHeatmap rendering", () => {
     beforeEach(() => {
@@ -100,7 +100,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a dark theme", () => {
-    const data = {
+    let data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);
@@ -120,7 +120,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a white theme", () => {
-    const data = {
+    let data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);

src/Controls/Heatmap/Heatmap.ts

@@ -39,7 +39,7 @@ export class Heatmap {
     }
   }
 
-  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color = "#838383"): FontSettings {
+  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color: string = "#838383"): FontSettings {
     return {
       family: StyleConstants.DataExplorerFont,
       size,
@@ -78,9 +78,9 @@ export class Heatmap {
     // go thru all rows and create 2d matrix for heatmap...
     for (let i = 0; i < rows.length; i++) {
       output.yAxisPoints.push(rows[i]);
-      const dataPoints: number[] = [];
+      let dataPoints: number[] = [];
       for (let a = 0; a < output.xAxisPoints.length; a++) {
-        const row: PartitionTimeStampToData = data[rows[i]];
+        let row: PartitionTimeStampToData = data[rows[i]];
         dataPoints.push(row[output.xAxisPoints[a]]["Normalized Throughput"]);
       }
       output.dataPoints.push(dataPoints);
@@ -193,7 +193,7 @@ export class Heatmap {
       this._getLayoutSettings(),
       this._getChartDisplaySettings()
     );
-    const plotDiv: any = document.getElementById(Heatmap.elementId);
+    let plotDiv: any = document.getElementById(Heatmap.elementId);
     plotDiv.on("plotly_click", (data: any) => {
       let timeSelected: string = data.points[0].x;
       timeSelected = timeSelected.replace(" ", "T");
@@ -205,7 +205,7 @@ export class Heatmap {
           break;
         }
       }
-      const output = [];
+      let output = [];
       for (let i = 0; i < this._chartData.dataPoints.length; i++) {
         output.push(this._chartData.dataPoints[i][xAxisIndex]);
       }

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

@@ -12,7 +12,7 @@ export interface GremlinSimpleClientParameters {
   password: string;
   successCallback: (result: Result) => void;
   progressCallback: (result: Result) => void;
-  failureCallback: (result: Result | null, error: string) => void;
+  failureCallback: (result: Result, error: string) => void;
   infoCallback: (msg: string) => void;
 }
 
@@ -62,15 +62,14 @@ export class GremlinSimpleClient {
   private static readonly requestChargeHeader = "x-ms-request-charge";
 
   public params: GremlinSimpleClientParameters;
-  private ws: WebSocket | undefined;
+  private protocols: string | string[];
+  private ws: WebSocket;
 
   public requestsToSend: { [requestId: string]: GremlinRequestMessage };
   public pendingRequests: { [requestId: string]: GremlinRequestMessage };
 
   constructor(params: GremlinSimpleClientParameters) {
     this.params = params;
-    this.ws = undefined;
-
     this.pendingRequests = {};
     this.requestsToSend = {};
   }
@@ -118,7 +117,7 @@ export class GremlinSimpleClient {
     }
   }
 
-  public decodeMessage(msg: MessageEvent): GremlinResponseMessage | null {
+  public decodeMessage(msg: MessageEvent): GremlinResponseMessage {
     if (msg.data === null) {
       return null;
     }
@@ -281,7 +280,7 @@ export class GremlinSimpleClient {
 
   public static utf8ToB64(utf8Str: string) {
     return btoa(
-      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (_match, p1) {
+      encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
         return String.fromCharCode(parseInt(p1, 16));
       })
     );
@@ -306,7 +305,7 @@ export class GremlinSimpleClient {
     return binaryMessage;
   }
 
-  private onOpen(_event: any) {
+  private onOpen(event: any) {
     this.executeRequestsToSend();
   }
 
@@ -349,6 +348,6 @@ export class GremlinSimpleClient {
 
   private sendGremlinMessage(gremlinRequestMessage: GremlinRequestMessage) {
     const gremlinFrame = GremlinSimpleClient.buildGremlinMessage(gremlinRequestMessage);
-    this.ws && this.ws.send(gremlinFrame);
+    this.ws.send(gremlinFrame);
   }
 }

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -550,72 +550,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
           )}
 
-          {this.shouldShowAnalyticalStoreOptions() && (
-            <Stack className="panelGroupSpacing">
-              <Stack horizontal>
-                <Text className="panelTextBold" variant="small">
-                  Analytical store
-                </Text>
-                <TooltipHost
-                  directionalHint={DirectionalHint.bottomLeftEdge}
-                  content={this.getAnalyticalStorageTooltipContent()}
-                >
-                  <Icon iconName="Info" className="panelInfoIcon" />
-                </TooltipHost>
-              </Stack>
-
-              <Stack horizontal verticalAlign="center">
-                <input
-                  className="panelRadioBtn"
-                  checked={this.state.enableAnalyticalStore}
-                  disabled={!this.isSynapseLinkEnabled()}
-                  aria-label="Enable analytical store"
-                  aria-checked={this.state.enableAnalyticalStore}
-                  name="analyticalStore"
-                  type="radio"
-                  role="radio"
-                  id="enableAnalyticalStoreBtn"
-                  tabIndex={0}
-                  onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">On</span>
-
-                <input
-                  className="panelRadioBtn"
-                  checked={!this.state.enableAnalyticalStore}
-                  disabled={!this.isSynapseLinkEnabled()}
-                  aria-label="Disable analytical store"
-                  aria-checked={!this.state.enableAnalyticalStore}
-                  name="analyticalStore"
-                  type="radio"
-                  role="radio"
-                  id="disableAnalyticalStoreBtn"
-                  tabIndex={0}
-                  onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
-                />
-                <span className="panelRadioBtnLabel">Off</span>
-              </Stack>
-
-              {!this.isSynapseLinkEnabled() && (
-                <Stack className="panelGroupSpacing">
-                  <Text variant="small">
-                    Azure Synapse Link is required for creating an analytical store{" "}
-                    {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
-                    <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
-                      Learn more
-                    </Link>
-                  </Text>
-                  <DefaultButton
-                    text="Enable"
-                    onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
-                    style={{ height: 27, width: 80 }}
-                    styles={{ label: { fontSize: 12 } }}
-                  />
-                </Stack>
-              )}
-            </Stack>
-          )}
-
           {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
@@ -670,6 +604,72 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     }
                   />
                 )}
+
+                {this.shouldShowAnalyticalStoreOptions() && (
+                  <Stack className="panelGroupSpacing">
+                    <Stack horizontal>
+                      <Text className="panelTextBold" variant="small">
+                        Analytical store
+                      </Text>
+                      <TooltipHost
+                        directionalHint={DirectionalHint.bottomLeftEdge}
+                        content={this.getAnalyticalStorageTooltipContent()}
+                      >
+                        <Icon iconName="Info" className="panelInfoIcon" />
+                      </TooltipHost>
+                    </Stack>
+
+                    <Stack horizontal verticalAlign="center">
+                      <input
+                        className="panelRadioBtn"
+                        checked={this.state.enableAnalyticalStore}
+                        disabled={!this.isSynapseLinkEnabled()}
+                        aria-label="Enable analytical store"
+                        aria-checked={this.state.enableAnalyticalStore}
+                        name="analyticalStore"
+                        type="radio"
+                        role="radio"
+                        id="enableAnalyticalStoreBtn"
+                        tabIndex={0}
+                        onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
+                      />
+                      <span className="panelRadioBtnLabel">On</span>
+
+                      <input
+                        className="panelRadioBtn"
+                        checked={!this.state.enableAnalyticalStore}
+                        disabled={!this.isSynapseLinkEnabled()}
+                        aria-label="Disable analytical store"
+                        aria-checked={!this.state.enableAnalyticalStore}
+                        name="analyticalStore"
+                        type="radio"
+                        role="radio"
+                        id="disableAnalyticalStoreBtn"
+                        tabIndex={0}
+                        onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
+                      />
+                      <span className="panelRadioBtnLabel">Off</span>
+                    </Stack>
+
+                    {!this.isSynapseLinkEnabled() && (
+                      <Stack className="panelGroupSpacing">
+                        <Text variant="small">
+                          Azure Synapse Link is required for creating an analytical store{" "}
+                          {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
+                          <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
+                            Learn more
+                          </Link>
+                        </Text>
+                        <DefaultButton
+                          text="Enable"
+                          onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
+                          style={{ height: 27, width: 80 }}
+                          styles={{ label: { fontSize: 12 } }}
+                        />
+                      </Stack>
+                    )}
+                  </Stack>
+                )}
               </Stack>
             </CollapsibleSectionComponent>
           )}

src/Utils/PricingUtils.ts

@@ -5,7 +5,7 @@ import * as AutoPilotUtils from "../Utils/AutoPilotUtils";
 interface ComputeRUUsagePriceHourlyArgs {
   serverId: string;
   requestUnits: number;
-  numberOfRegions: number;
+  numberOfRegions?: number;
   multimasterEnabled: boolean;
   isAutoscale: boolean;
 }
@@ -34,7 +34,7 @@ export function getRuToolTipText(): string {
  * Otherwise, return numberOfRegions
  * @param numberOfRegions
  */
-export function getRegionMultiplier(numberOfRegions: number, multimasterEnabled: boolean): number {
+export function getRegionMultiplier(numberOfRegions: number | undefined, multimasterEnabled: boolean): number {
   const normalizedNumberOfRegions: number = normalizeNumber(numberOfRegions);
 
   if (normalizedNumberOfRegions <= 0) {
@@ -45,6 +45,10 @@ export function getRegionMultiplier(numberOfRegions: number, multimasterEnabled:
     return numberOfRegions;
   }
 
+  if (!numberOfRegions) {
+    return 0;
+  }
+
   if (multimasterEnabled) {
     return numberOfRegions + 1;
   }
@@ -52,7 +56,7 @@ export function getRegionMultiplier(numberOfRegions: number, multimasterEnabled:
   return numberOfRegions;
 }
 
-export function getMultimasterMultiplier(numberOfRegions: number, multimasterEnabled: boolean): number {
+export function getMultimasterMultiplier(numberOfRegions: number | undefined, multimasterEnabled: boolean): number {
   const regionMultiplier: number = getRegionMultiplier(numberOfRegions, multimasterEnabled);
   const multimasterMultiplier: number = !multimasterEnabled ? 1 : regionMultiplier > 1 ? 2 : 1;
 
@@ -118,7 +122,7 @@ export function numberWithCommasFormatter(n: number): string {
   return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 
-export function isLargerThanDefaultMinRU(ru: number): boolean {
+export function isLargerThanDefaultMinRU(ru: number | undefined): boolean {
   if (typeof ru === "number" && ru > Constants.CollectionCreation.DefaultCollectionRUs400) {
     return true;
   }

tsconfig.strict.json

@@ -8,7 +8,7 @@
     "noUnusedParameters": true
   },
   "files": [
-    "./src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts",
+    "./src/Utils/PricingUtils.test.ts",
     "./src/AuthType.ts",
     "./src/Bindings/ReactBindingHandler.ts",
     "./src/Common/ArrayHashMap.ts",