Merge branch 'master' into remove-jquery-typeahead

.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/Definitions/jquery-typescript.d.ts

@@ -1,34 +0,0 @@
-/* Type definitions for code-runner's jquery-typeahead v2.8.0
- * https://github.com/running-coder/jquery-typeahead
- *
- * There is no DefinitelyTyped support for this library, yet, so we only define here what we use.
- * https://github.com/running-coder/jquery-typeahead/issues/156
- * TODO: Replace this minimum definition by the official one when it comes out.
- */
-/// <reference path="jquery.d.ts" />
-
-interface JQueryTypeaheadParam {
-  input: string;
-  order?: string;
-  source: any;
-  callback?: any;
-  minLength?: number;
-  searchOnFocus?: boolean;
-  template?: string | { (query: string, item: any): string };
-  dynamic?: boolean;
-  mustSelectItem?: boolean;
-}
-
-/**
- * For use with: $.typeahead()
- */
-interface JQueryStatic {
-  typeahead(arg: JQueryTypeaheadParam): void;
-}
-
-/**
- * For use with $('').typehead()
- */
-// interface JQuery {
-//     typeahead(arg: JQueryTypeaheadParam): void;
-// }

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx

@@ -1,6 +1,5 @@
 import { shallow } from "enzyme";
 import React from "react";
-import "../../../../externals/jquery.typeahead.min.js";
 import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent";
 
 describe("inputTypeahead", () => {
@@ -12,12 +11,6 @@ describe("inputTypeahead", () => {
       ],
       placeholder: "placeholder",
       useTextarea: false,
-      onNewValue: () => {
-        ("");
-      },
-      submitFct: () => {
-        ("");
-      },
     };
 
     const wrapper = shallow(<InputTypeaheadComponent {...props} />);
@@ -32,12 +25,6 @@ describe("inputTypeahead", () => {
       ],
       placeholder: "placeholder",
       useTextarea: true,
-      onNewValue: () => {
-        ("");
-      },
-      submitFct: () => {
-        ("");
-      },
     };
 
     const wrapper = shallow(<InputTypeaheadComponent {...props} />);

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -33,7 +33,7 @@ export interface InputTypeaheadComponentProps {
   /**
    * The current string value of <input>
    */
-  onNewValue: (newValue?: string) => void;
+  onNewValue?: (newValue: string) => void;
   // inputValue?:ko.Observable<string>;
 
   /**
@@ -55,7 +55,7 @@ export interface InputTypeaheadComponentProps {
   /**
    * This function gets called when pressing ENTER on the input box
    */
-  submitFct?: (inputValue?: string, selection?: Item) => void;
+  submitFct?: (inputValue: string, selection: Item) => void;
 
   /**
    * Typehead comes with a Search button that we normally remove.
@@ -76,7 +76,7 @@ export interface InputTypeaheadComponentProps {
 
 interface InputTypeaheadComponentState {
   isSuggestionVisible: boolean;
-  selectedChoice?: Item;
+  selectedChoice: Item;
   filteredChoices: Item[];
 }
 
@@ -96,21 +96,21 @@ export class InputTypeaheadComponent extends React.Component<
     };
   }
 
-  private onRenderCell = (item?: Item): JSX.Element => {
+  private onRenderCell = (item: Item): JSX.Element => {
     return (
       <div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
-        <p className="choice-caption">{item?.caption}</p>
-        <span>{item?.value}</span>
+        <p className="choice-caption">{item.caption}</p>
+        <span>{item.value}</span>
       </div>
     );
   };
 
-  private onChoiceClick = (item?: Item): void => {
-    this.props.onNewValue(item?.caption);
+  private onChoiceClick = (item: Item): void => {
+    this.props.onNewValue(item.caption);
     this.setState({ isSuggestionVisible: false, selectedChoice: item });
   };
 
-  private handleChange = (value?: string): void => {
+  private handleChange = (value: string): void => {
     if (!value) {
       this.setState({ isSuggestionVisible: true });
     }
@@ -130,7 +130,7 @@ export class InputTypeaheadComponent extends React.Component<
     }
   };
 
-  private filterChoiceByValue = (choices: Item[], searchKeyword?: string): Item[] => {
+  private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
     return choices.filter((choice) =>
       // @ts-ignore
       Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
@@ -138,7 +138,7 @@ export class InputTypeaheadComponent extends React.Component<
   };
 
   public render(): JSX.Element {
-    const { defaultValue, useTextarea, placeholder, onNewValue, submitFct } = this.props;
+    const { defaultValue, useTextarea, placeholder, onNewValue } = this.props;
     const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
     const theme = getTheme();
 
@@ -185,7 +185,7 @@ export class InputTypeaheadComponent extends React.Component<
               styles={iconButtonStyles}
               iconProps={searchIcon}
               ariaLabel="Search Button"
-              onClick={() => submitFct && submitFct(defaultValue, selectedChoice)}
+              onClick={() => this.props.submitFct(defaultValue, selectedChoice)}
             />
           )}
         </Stack>

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -4,7 +4,6 @@ import { mount, ReactWrapper } from "enzyme";
 import * as Q from "q";
 import React from "react";
 import * as sinon from "sinon";
-import "../../../../externals/jquery.typeahead.min";
 import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 import * as DataModels from "../../../Contracts/DataModels";

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

@@ -9,7 +9,6 @@ import "../externals/jquery-ui.structure.min.css";
 import "../externals/jquery-ui.theme.min.css";
 import "../externals/jquery.dataTables.min.css";
 import "../externals/jquery.typeahead.min.css";
-import "../externals/jquery.typeahead.min.js";
 // Image Dependencies
 import "../images/CosmosDB_rgb_ui_lighttheme.ico";
 import "../images/favicon.ico";

src/Platform/Hosted/extractFeatures.ts

@@ -75,6 +75,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     autoscaleDefault: "true" === get("autoscaledefault"),
     partitionKeyDefault: "true" === get("partitionkeytest"),
     partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
-    notebooksTemporarilyDown: "true" === get("notebookstemporarilydown", "true"),
+    notebooksTemporarilyDown: "true" === get("notebooksTemporarilyDown", "true"),
   };
 }

tsconfig.strict.json

@@ -8,8 +8,6 @@
     "noUnusedParameters": true
   },
   "files": [
-    "./src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx",
-    "./src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx",
     "./src/AuthType.ts",
     "./src/Bindings/ReactBindingHandler.ts",
     "./src/Common/ArrayHashMap.ts",
@@ -167,4 +165,4 @@
     "src/Terminal/**/*",
     "src/Utils/arm/**/*"
   ]
-}
+}

webpack.config.js

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