fixed tableEntity treeComponent and DefaultExperienceUtility file typescript issue

.eslintignore

@@ -21,16 +21,8 @@ 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
@@ -44,29 +36,10 @@ 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
@@ -153,6 +126,7 @@ src/Juno/JunoClient.test.ts
 src/Juno/JunoClient.ts
 src/Platform/Hosted/Authorization.ts
 src/ReactDevTools.ts
+src/Shared/Constants.ts
 src/Shared/DefaultExperienceUtility.test.ts
 src/Shared/DefaultExperienceUtility.ts
 src/Shared/appInsights.ts

src/Common/TableEntity.tsx

@@ -36,7 +36,7 @@ export interface TableEntityProps {
   onDeleteEntity?: () => void;
   onEditEntity?: () => void;
   onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption | undefined) => void;
   onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
   onSelectDate: (date: Date | null | undefined) => void;
   onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;

src/Controls/Heatmap/Heatmap.test.ts

@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
   };
 
   let heatmap: Heatmap;
-  let theme: PortalTheme = 1;
-  const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+  const theme: PortalTheme = 1;
+  const divElement = `<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", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<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", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<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: string = "#838383"): FontSettings {
+  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color = "#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]);
-      let dataPoints: number[] = [];
+      const dataPoints: number[] = [];
       for (let a = 0; a < output.xAxisPoints.length; a++) {
-        let row: PartitionTimeStampToData = data[rows[i]];
+        const 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()
     );
-    let plotDiv: any = document.getElementById(Heatmap.elementId);
+    const 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;
         }
       }
-      let output = [];
+      const output = [];
       for (let i = 0; i < this._chartData.dataPoints.length; i++) {
         output.push(this._chartData.dataPoints[i][xAxisIndex]);
       }

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -43,7 +43,7 @@ export interface TreeNode {
   isLeavesParentsSeparate?: boolean; // Display parents together first, then leaves
   isLoading?: boolean;
   isSelected?: () => boolean;
-  onClick?: (isExpanded: boolean) => void; // Only if a leaf, other click will expand/collapse
+  onClick?: (isExpanded?: boolean) => void; // Only if a leaf, other click will expand/collapse
   onExpanded?: () => void;
   onCollapsed?: () => void;
   onContextMenuOpen?: () => void;
@@ -73,7 +73,7 @@ interface TreeNodeComponentProps {
 }
 
 interface TreeNodeComponentState {
-  isExpanded: boolean;
+  isExpanded?: boolean;
   isMenuShowing: boolean;
 }
 export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, TreeNodeComponentState> {
@@ -82,7 +82,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
   private static readonly transitionDurationMS = 200;
   private static readonly callbackDelayMS = 100; // avoid calling at the same time as transition to make it smoother
   private contextMenuRef = React.createRef<HTMLDivElement>();
-  private isExpanded: boolean;
+  private isExpanded?: boolean;
 
   constructor(props: TreeNodeComponentProps) {
     super(props);
@@ -93,7 +93,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     };
   }
 
-  componentDidUpdate(prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
+  componentDidUpdate(_prevProps: TreeNodeComponentProps, prevState: TreeNodeComponentState) {
     // Only call when expand has actually changed
     if (this.state.isExpanded !== prevState.isExpanded) {
       if (this.state.isExpanded) {
@@ -103,7 +103,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
       }
     }
     if (this.props.node.isExpanded !== this.isExpanded) {
-      this.isExpanded = this.props.node.isExpanded;
+      this.isExpanded = this.props.node && this.props.node.isExpanded;
       this.setState({
         isExpanded: this.props.node.isExpanded,
       });
@@ -114,7 +114,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     return this.renderNode(this.props.node, this.props.generation);
   }
 
-  private static getSortedChildren(treeNode: TreeNode): TreeNode[] {
+  private static getSortedChildren(treeNode: TreeNode): TreeNode[] | undefined {
     if (!treeNode || !treeNode.children) {
       return undefined;
     }
@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
         {node.children && (
           <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
             <div className="nodeChildren" data-test={node.label}>
-              {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
+              {TreeNodeComponent?.getSortedChildren(node)?.map((childNode: TreeNode) => (
                 <TreeNodeComponent
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}
                   node={childNode}
@@ -214,15 +214,15 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
    * Recursive: is the node or any descendant selected
    * @param node
    */
+
   private static isAnyDescendantSelected(node: TreeNode): boolean {
-    return (
-      node.children &&
-      node.children.reduce(
-        (previous: boolean, child: TreeNode) =>
-          previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
-        false
-      )
-    );
+    return node.children
+      ? node.children.reduce(
+          (previous: boolean, child: TreeNode) =>
+            previous || (child.isSelected && child.isSelected()) || TreeNodeComponent.isAnyDescendantSelected(child),
+          false
+        )
+      : false;
   }
 
   private static createClickEvent(): MouseEvent {
@@ -230,7 +230,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
   }
 
   private onRightClick = (): void => {
-    this.contextMenuRef.current.firstChild.dispatchEvent(TreeNodeComponent.createClickEvent());
+    this.contextMenuRef?.current?.firstChild?.dispatchEvent(TreeNodeComponent.createClickEvent());
   };
 
   private renderContextMenuButton(node: TreeNode): JSX.Element {
@@ -253,18 +253,18 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
             coverTarget: true,
             isBeakVisible: false,
             directionalHint: DirectionalHint.topAutoEdge,
-            onMenuOpened: (contextualMenu?: IContextualMenuProps) => {
+            onMenuOpened: (_contextualMenu?: IContextualMenuProps) => {
               this.setState({ isMenuShowing: true });
               node.onContextMenuOpen && node.onContextMenuOpen();
             },
-            onMenuDismissed: (contextualMenu?: IContextualMenuProps) => this.setState({ isMenuShowing: false }),
+            onMenuDismissed: (_contextualMenu?: IContextualMenuProps) => this.setState({ isMenuShowing: false }),
             contextualMenuItemAs: (props: IContextualMenuItemProps) => (
               <div
                 data-test={`treeComponentMenuItemContainer`}
                 className="treeComponentMenuItemContainer"
                 onContextMenu={(e) => e.target.dispatchEvent(TreeNodeComponent.createClickEvent())}
               >
-                {props.item.onRenderIcon()}
+                {props.item.onRenderIcon && props.item.onRenderIcon()}
                 <span
                   className={
                     "treeComponentMenuItemLabel" + (props.item.className ? ` ${props.item.className}Label` : "")
@@ -274,19 +274,21 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
                 </span>
               </div>
             ),
-            items: node.contextMenu.map((menuItem: TreeNodeMenuItem) => ({
-              key: menuItem.label,
-              text: menuItem.label,
-              disabled: menuItem.isDisabled,
-              className: menuItem.styleClass,
-              onClick: () => {
-                menuItem.onClick();
-                TelemetryProcessor.trace(Action.ClickResourceTreeNodeContextMenuItem, ActionModifiers.Mark, {
-                  label: menuItem.label,
-                });
-              },
-              onRenderIcon: (props: any) => <img src={menuItem.iconSrc} alt="" />,
-            })),
+            items: node.contextMenu
+              ? node.contextMenu.map((menuItem: TreeNodeMenuItem) => ({
+                  key: menuItem.label,
+                  text: menuItem.label,
+                  disabled: menuItem.isDisabled,
+                  className: menuItem.styleClass,
+                  onClick: () => {
+                    menuItem.onClick();
+                    TelemetryProcessor.trace(Action.ClickResourceTreeNodeContextMenuItem, ActionModifiers.Mark, {
+                      label: menuItem.label,
+                    });
+                  },
+                  onRenderIcon: (_props: any) => <img src={menuItem.iconSrc} alt="" />,
+                }))
+              : [],
           }}
           styles={buttonStyles}
         />
@@ -324,7 +326,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
     this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);
   };
 
-  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, node: TreeNode): void => {
+  private onNodeKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, _node: TreeNode): void => {
     if (event.charCode === Constants.KeyCodes.Space || event.charCode === Constants.KeyCodes.Enter) {
       event.stopPropagation();
       this.props.node.onClick && this.props.node.onClick(this.state.isExpanded);

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -550,6 +550,72 @@ 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"
@@ -604,72 +670,6 @@ 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/Shared/Constants.ts

@@ -0,0 +1,208 @@
+import { SubscriptionType } from "../Contracts/SubscriptionType";
+
+export const hoursInAMonth = 730;
+export class AutoscalePricing {
+  public static MonthlyPricing = {
+    default: {
+      singleMaster: {
+        Currency: "USD",
+        CurrencySign: "$",
+        Standard: {
+          StartingPrice: 24,
+          PricePerRU: 0.09,
+          PricePerGB: 0.25,
+        },
+      },
+      multiMaster: {
+        Currency: "USD",
+        CurrencySign: "$",
+        Standard: {
+          StartingPrice: 24,
+          PricePerRU: 0.12,
+          PricePerGB: 0.25,
+        },
+      },
+    },
+    mooncake: {
+      singleMaster: {
+        Currency: "RMB",
+        CurrencySign: "¥",
+        Standard: {
+          StartingPrice: 152,
+          PricePerRU: 0.57,
+          PricePerGB: 2.576,
+        },
+      },
+      multiMaster: {
+        Currency: "RMB",
+        CurrencySign: "¥",
+        Standard: {
+          StartingPrice: 152,
+          PricePerRU: 0.76,
+          PricePerGB: 2.576,
+        },
+      },
+    },
+  };
+
+  public static HourlyPricing = {
+    default: {
+      singleMaster: {
+        Currency: "USD",
+        CurrencySign: "$",
+        Standard: {
+          StartingPrice: 24 / hoursInAMonth,
+          PricePerRU: 0.00012,
+          PricePerGB: 0.25 / hoursInAMonth,
+        },
+      },
+      multiMaster: {
+        Currency: "USD",
+        CurrencySign: "$",
+        Standard: {
+          StartingPrice: 24 / hoursInAMonth,
+          PricePerRU: 0.00016,
+          PricePerGB: 0.25 / hoursInAMonth,
+        },
+      },
+    },
+    mooncake: {
+      singleMaster: {
+        Currency: "RMB",
+        CurrencySign: "¥",
+        Standard: {
+          StartingPrice: AutoscalePricing.MonthlyPricing.mooncake.singleMaster.Standard.StartingPrice / hoursInAMonth, // per hour
+          PricePerRU: 0.000765,
+          PricePerGB: AutoscalePricing.MonthlyPricing.mooncake.singleMaster.Standard.PricePerGB / hoursInAMonth,
+        },
+      },
+      multiMaster: {
+        Currency: "RMB",
+        CurrencySign: "¥",
+        Standard: {
+          StartingPrice: AutoscalePricing.MonthlyPricing.mooncake.multiMaster.Standard.StartingPrice / hoursInAMonth, // per hour
+          PricePerRU: 0.00102,
+          PricePerGB: AutoscalePricing.MonthlyPricing.mooncake.multiMaster.Standard.PricePerGB / hoursInAMonth,
+        },
+      },
+    },
+  };
+}
+
+export class OfferPricing {
+  public static MonthlyPricing = {
+    default: {
+      Currency: "USD",
+      CurrencySign: "$",
+      S1Price: 25,
+      S2Price: 50,
+      S3Price: 100,
+      Standard: {
+        StartingPrice: 24,
+        PricePerRU: 0.06,
+        PricePerGB: 0.25,
+      },
+    },
+    mooncake: {
+      Currency: "RMB",
+      CurrencySign: "¥",
+      S1Price: 110.3,
+      S2Price: 220.6,
+      S3Price: 441.2,
+      Standard: {
+        StartingPrice: 152,
+        PricePerRU: 0.3794,
+        PricePerGB: 2.576,
+      },
+    },
+  };
+  public static HourlyPricing = {
+    default: {
+      Currency: "USD",
+      CurrencySign: "$",
+      S1Price: 0.0336,
+      S2Price: 0.0672,
+      S3Price: 0.1344,
+      Standard: {
+        StartingPrice: 24 / hoursInAMonth, // per hour
+        PricePerRU: 0.00008,
+        PricePerGB: 0.25 / hoursInAMonth,
+      },
+    },
+    mooncake: {
+      Currency: "RMB",
+      CurrencySign: "¥",
+      S1Price: 0.15,
+      S2Price: 0.3,
+      S3Price: 0.6,
+      Standard: {
+        StartingPrice: OfferPricing.MonthlyPricing.mooncake.Standard.StartingPrice / hoursInAMonth, // per hour
+        PricePerRU: 0.00051,
+        PricePerGB: OfferPricing.MonthlyPricing.mooncake.Standard.PricePerGB / hoursInAMonth,
+      },
+    },
+  };
+}
+
+export class CollectionCreation {
+  // TODO generate these values based on Product\Services\Documents\ImageStore\GatewayApplication\Settings.xml
+  public static readonly MinRUPerPartitionBelow7Partitions: number = 400;
+  public static readonly MinRU7PartitionsTo25Partitions: number = 2500;
+  public static readonly MinRUPerPartitionAbove25Partitions: number = 100;
+  public static readonly MaxRUPerPartition: number = 10000;
+  public static readonly MinPartitionedCollectionRUs: number = 2500;
+
+  public static readonly NumberOfPartitionsInFixedCollection: number = 1;
+  public static readonly NumberOfPartitionsInUnlimitedCollection: number = 10;
+
+  public static storage10Gb: string = "10";
+  public static storage100Gb: string = "100";
+
+  public static readonly DefaultCollectionRUs1000: number = 1000;
+  public static readonly DefaultCollectionRUs10K: number = 10000;
+  public static readonly DefaultCollectionRUs400: number = 400;
+  public static readonly DefaultCollectionRUs2000: number = 2000;
+  public static readonly DefaultCollectionRUs2500: number = 2500;
+  public static readonly DefaultCollectionRUs5000: number = 5000;
+  public static readonly DefaultCollectionRUs15000: number = 15000;
+  public static readonly DefaultCollectionRUs20000: number = 20000;
+  public static readonly DefaultCollectionRUs25000: number = 25000;
+  public static readonly DefaultCollectionRUs100K: number = 100000;
+  public static readonly DefaultCollectionRUs1Million: number = 1000000;
+
+  public static readonly DefaultAddCollectionDefaultFlight: string = "0";
+  public static readonly DefaultSubscriptionType: SubscriptionType = SubscriptionType.Free;
+
+  public static readonly TablesAPIDefaultDatabase: string = "TablesDB";
+}
+
+export const CollectionCreationDefaults = {
+  storage: CollectionCreation.storage100Gb,
+  throughput: {
+    fixed: CollectionCreation.DefaultCollectionRUs400,
+    unlimited: CollectionCreation.DefaultCollectionRUs400,
+    unlimitedmax: CollectionCreation.DefaultCollectionRUs1Million,
+    unlimitedmin: CollectionCreation.DefaultCollectionRUs400,
+    shared: CollectionCreation.DefaultCollectionRUs400,
+  },
+} as const;
+
+export class SubscriptionUtilMappings {
+  public static FreeTierSubscriptionIds: string[] = [
+    "b8f2ff04-0a81-4cf9-95ef-5828d16981d2",
+    "39b1fdff-e5b2-4f83-adb4-33cb3aabf5ea",
+    "41f6d14d-ece1-46e4-942c-02c00d67f7d6",
+    "11dc62e3-77dc-4ef5-a46b-480ec6caa8fe",
+    "199d0919-60bd-448e-b64d-8461a0fe9747",
+    "a57b6849-d443-44cf-a3b7-7dd07ead9401",
+  ];
+}
+
+export class AutopilotDocumentation {
+  public static Url: string = "https://aka.ms/cosmos-autoscale-info";
+}
+
+export class FreeTierLimits {
+  public static RU: number = 1000;
+  public static Storage: number = 25;
+}

src/Shared/Constants/AutoscalePricing.ts

@@ -1,87 +0,0 @@
-import { hoursInAMonth } from "./";
-
-export const MonthlyPricing = {
-  default: {
-    singleMaster: {
-      Currency: "USD",
-      CurrencySign: "$",
-      Standard: {
-        StartingPrice: 24,
-        PricePerRU: 0.09,
-        PricePerGB: 0.25,
-      },
-    },
-    multiMaster: {
-      Currency: "USD",
-      CurrencySign: "$",
-      Standard: {
-        StartingPrice: 24,
-        PricePerRU: 0.12,
-        PricePerGB: 0.25,
-      },
-    },
-  },
-  mooncake: {
-    singleMaster: {
-      Currency: "RMB",
-      CurrencySign: "¥",
-      Standard: {
-        StartingPrice: 152,
-        PricePerRU: 0.57,
-        PricePerGB: 2.576,
-      },
-    },
-    multiMaster: {
-      Currency: "RMB",
-      CurrencySign: "¥",
-      Standard: {
-        StartingPrice: 152,
-        PricePerRU: 0.76,
-        PricePerGB: 2.576,
-      },
-    },
-  },
-};
-
-export const HourlyPricing = {
-  default: {
-    singleMaster: {
-      Currency: "USD",
-      CurrencySign: "$",
-      Standard: {
-        StartingPrice: 24 / hoursInAMonth,
-        PricePerRU: 0.00012,
-        PricePerGB: 0.25 / hoursInAMonth,
-      },
-    },
-    multiMaster: {
-      Currency: "USD",
-      CurrencySign: "$",
-      Standard: {
-        StartingPrice: 24 / hoursInAMonth,
-        PricePerRU: 0.00016,
-        PricePerGB: 0.25 / hoursInAMonth,
-      },
-    },
-  },
-  mooncake: {
-    singleMaster: {
-      Currency: "RMB",
-      CurrencySign: "¥",
-      Standard: {
-        StartingPrice: MonthlyPricing.mooncake.singleMaster.Standard.StartingPrice / hoursInAMonth, // per hour
-        PricePerRU: 0.000765,
-        PricePerGB: MonthlyPricing.mooncake.singleMaster.Standard.PricePerGB / hoursInAMonth,
-      },
-    },
-    multiMaster: {
-      Currency: "RMB",
-      CurrencySign: "¥",
-      Standard: {
-        StartingPrice: MonthlyPricing.mooncake.multiMaster.Standard.StartingPrice / hoursInAMonth, // per hour
-        PricePerRU: 0.00102,
-        PricePerGB: MonthlyPricing.mooncake.multiMaster.Standard.PricePerGB / hoursInAMonth,
-      },
-    },
-  },
-};

src/Shared/Constants/OfferPricing.ts

@@ -1,53 +0,0 @@
-import { hoursInAMonth } from "./";
-export const MonthlyPricing = {
-  default: {
-    Currency: "USD",
-    CurrencySign: "$",
-    S1Price: 25,
-    S2Price: 50,
-    S3Price: 100,
-    Standard: {
-      StartingPrice: 24,
-      PricePerRU: 0.06,
-      PricePerGB: 0.25,
-    },
-  },
-  mooncake: {
-    Currency: "RMB",
-    CurrencySign: "¥",
-    S1Price: 110.3,
-    S2Price: 220.6,
-    S3Price: 441.2,
-    Standard: {
-      StartingPrice: 152,
-      PricePerRU: 0.3794,
-      PricePerGB: 2.576,
-    },
-  },
-};
-export const HourlyPricing = {
-  default: {
-    Currency: "USD",
-    CurrencySign: "$",
-    S1Price: 0.0336,
-    S2Price: 0.0672,
-    S3Price: 0.1344,
-    Standard: {
-      StartingPrice: 24 / hoursInAMonth, // per hour
-      PricePerRU: 0.00008,
-      PricePerGB: 0.25 / hoursInAMonth,
-    },
-  },
-  mooncake: {
-    Currency: "RMB",
-    CurrencySign: "¥",
-    S1Price: 0.15,
-    S2Price: 0.3,
-    S3Price: 0.6,
-    Standard: {
-      StartingPrice: MonthlyPricing.mooncake.Standard.StartingPrice / hoursInAMonth, // per hour
-      PricePerRU: 0.00051,
-      PricePerGB: MonthlyPricing.mooncake.Standard.PricePerGB / hoursInAMonth,
-    },
-  },
-};

src/Shared/Constants/index.ts

@@ -1,69 +0,0 @@
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
-import * as AutoscalePricing from "./AutoscalePricing";
-import * as OfferPricing from "./OfferPricing";
-
-export const hoursInAMonth = 730;
-export { AutoscalePricing, OfferPricing };
-
-export const CollectionCreation = {
-  // TODO generate these values based on Product\Services\Documents\ImageStore\GatewayApplication\Settings.xml
-  MinRUPerPartitionBelow7Partitions: 400,
-  MinRU7PartitionsTo25Partitions: 2500,
-  MinRUPerPartitionAbove25Partitions: 100,
-  MaxRUPerPartition: 10000,
-  MinPartitionedCollectionRUs: 2500,
-
-  NumberOfPartitionsInFixedCollection: 1,
-  NumberOfPartitionsInUnlimitedCollection: 10,
-
-  storage10Gb: "10",
-  storage100Gb: "100",
-
-  DefaultCollectionRUs1000: 1000,
-  DefaultCollectionRUs10K: 10000,
-  DefaultCollectionRUs400: 400,
-  DefaultCollectionRUs2000: 2000,
-  DefaultCollectionRUs2500: 2500,
-  DefaultCollectionRUs5000: 5000,
-  DefaultCollectionRUs15000: 15000,
-  DefaultCollectionRUs20000: 20000,
-  DefaultCollectionRUs25000: 25000,
-  DefaultCollectionRUs100K: 100000,
-  DefaultCollectionRUs1Million: 1000000,
-
-  DefaultAddCollectionDefaultFlight: "0",
-  DefaultSubscriptionType: SubscriptionType.Free,
-
-  TablesAPIDefaultDatabase: "TablesDB",
-};
-
-export const CollectionCreationDefaults = {
-  storage: CollectionCreation.storage100Gb,
-  throughput: {
-    fixed: CollectionCreation.DefaultCollectionRUs400,
-    unlimited: CollectionCreation.DefaultCollectionRUs400,
-    unlimitedmax: CollectionCreation.DefaultCollectionRUs1Million,
-    unlimitedmin: CollectionCreation.DefaultCollectionRUs400,
-    shared: CollectionCreation.DefaultCollectionRUs400,
-  },
-};
-
-export const SubscriptionUtilMappings = {
-  FreeTierSubscriptionIds: [
-    "b8f2ff04-0a81-4cf9-95ef-5828d16981d2",
-    "39b1fdff-e5b2-4f83-adb4-33cb3aabf5ea",
-    "41f6d14d-ece1-46e4-942c-02c00d67f7d6",
-    "11dc62e3-77dc-4ef5-a46b-480ec6caa8fe",
-    "199d0919-60bd-448e-b64d-8461a0fe9747",
-    "a57b6849-d443-44cf-a3b7-7dd07ead9401",
-  ],
-};
-
-export const AutopilotDocumentation = {
-  Url: "https://aka.ms/cosmos-autoscale-info",
-};
-
-export const FreeTierLimits = {
-  RU: 1000,
-  Storage: 25,
-};

src/Shared/DefaultExperienceUtility.ts

@@ -2,7 +2,9 @@ import * as DataModels from "../Contracts/DataModels";
 import { userContext } from "../UserContext";
 
 export class DefaultExperienceUtility {
-  public static getApiKindFromDefaultExperience(defaultExperience: typeof userContext.apiType): DataModels.ApiKind {
+  public static getApiKindFromDefaultExperience(
+    defaultExperience: typeof userContext.apiType | null
+  ): DataModels.ApiKind {
     if (!defaultExperience) {
       return DataModels.ApiKind.SQL;
     }

tsconfig.strict.json

@@ -8,6 +8,7 @@
     "noUnusedParameters": true
   },
   "files": [
+    "./src/Explorer/Controls/TreeComponent/TreeComponent.tsx",
     "./src/AuthType.ts",
     "./src/Bindings/ReactBindingHandler.ts",
     "./src/Common/ArrayHashMap.ts",
@@ -55,6 +56,7 @@
     "./src/Explorer/Notebook/NotebookContentItem.ts",
     "./src/Explorer/Notebook/NotebookRenderer/AzureTheme.tsx",
     "./src/Explorer/Notebook/NotebookRenderer/Prompt.tsx",
+    "./src/Explorer/Notebook/NotebookRenderer/PromptContent.test.tsx",
     "./src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx",
     "./src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx",
     "./src/Explorer/Notebook/NotebookRenderer/decorators/CellCreator.tsx",
@@ -82,10 +84,13 @@
     "./src/Explorer/Tree/AccessibleVerticalList.ts",
     "./src/GitHub/GitHubConnector.ts",
     "./src/HostedExplorerChildFrame.ts",
+    "./src/Index.tsx",
     "./src/Platform/Hosted/Authorization.ts",
     "./src/Platform/Hosted/Components/MeControl.test.tsx",
     "./src/Platform/Hosted/Components/MeControl.tsx",
     "./src/Platform/Hosted/Components/SignInButton.tsx",
+    "./src/Platform/Hosted/Components/SwitchAccount.tsx",
+    "./src/Platform/Hosted/Components/SwitchSubscription.tsx",
     "./src/Platform/Hosted/HostedUtils.test.ts",
     "./src/Platform/Hosted/HostedUtils.ts",
     "./src/Platform/Hosted/extractFeatures.test.ts",
@@ -94,17 +99,6 @@
     "./src/SelfServe/Example/SelfServeExample.types.ts",
     "./src/SelfServe/SelfServeStyles.tsx",
     "./src/SelfServe/SqlX/SqlxTypes.ts",
-    "./src/Shared/Constants.ts",
-    "./src/Shared/DefaultExperienceUtility.ts",
-    "./src/Shared/ExplorerSettings.ts",
-    "./src/Shared/LocalStorageUtility.ts",
-    "./src/Shared/PriceEstimateCalculator.ts",
-    "./src/Shared/SessionStorageUtility.ts",
-    "./src/Shared/StorageUtility.test.ts",
-    "./src/Shared/StorageUtility.ts",
-    "./src/Shared/StringUtility.test.ts",
-    "./src/Shared/StringUtility.ts",
-    "./src/Shared/appInsights.ts",
     "./src/UserContext.ts",
     "./src/Utils/APITypeUtils.ts",
     "./src/Utils/AutoPilotUtils.ts",
@@ -129,17 +123,16 @@
     "./src/hooks/useFullScreenURLs.tsx",
     "./src/hooks/useGraphPhoto.tsx",
     "./src/hooks/useNotebookSnapshotStore.ts",
-    "./src/hooks/usePortalAccessToken.tsx",
     "./src/hooks/useNotificationConsole.ts",
     "./src/hooks/useObservable.ts",
+    "./src/hooks/usePortalAccessToken.tsx",
     "./src/hooks/useSidePanel.ts",
     "./src/i18n.ts",
     "./src/quickstart.ts",
     "./src/setupTests.ts",
     "./src/userContext.test.ts",
     "src/Common/EntityValue.tsx",
-    "./src/Platform/Hosted/Components/SwitchAccount.tsx",
-    "./src/Platform/Hosted/Components/SwitchSubscription.tsx"
+    "src/Common/TableEntity.tsx"
   ],
   "include": [
     "src/CellOutputViewer/transforms/**/*",
@@ -161,7 +154,7 @@
     "src/Localization/**/*",
     "src/Platform/Emulator/**/*",
     "src/SelfServe/Documentation/**/*",
-    "src/Shared/Telemetry/**/*",
+    "src/Shared/**/*",
     "src/Terminal/**/*",
     "src/Utils/arm/**/*"
   ]

webpack.config.js

@@ -113,6 +113,7 @@ module.exports = function (_env = {}, argv = {}) {
     new CleanWebpackPlugin(),
     new webpack.ProvidePlugin({
       process: "process/browser",
+      Buffer: ["buffer", "Buffer"],
     }),
     new CreateFileWebpack({
       path: "./dist",
@@ -229,6 +230,7 @@ module.exports = function (_env = {}, argv = {}) {
       alias: {
         process: "process/browser",
       },
+
       fallback: {
         crypto: false,
         fs: false,