Migrated Hosted Explorer to React (#360)

Co-authored-by: Victor Meng <vimeng@microsoft.com>
Co-authored-by: Steve Faulkner <stfaul@microsoft.com>

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx

@@ -1,159 +0,0 @@
-import React from "react";
-import { shallow, mount } from "enzyme";
-import { AccountSwitchComponent, AccountSwitchComponentProps } from "./AccountSwitchComponent";
-import { AuthType } from "../../../AuthType";
-import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
-import { AccountKind } from "../../../Common/Constants";
-
-const createBlankProps = (): AccountSwitchComponentProps => {
-  return {
-    authType: null,
-    displayText: "",
-    accounts: [],
-    selectedAccountName: null,
-    isLoadingAccounts: false,
-    onAccountChange: jest.fn(),
-    subscriptions: [],
-    selectedSubscriptionId: null,
-    isLoadingSubscriptions: false,
-    onSubscriptionChange: jest.fn()
-  };
-};
-
-const createBlankAccount = (): DatabaseAccount => {
-  return {
-    id: "",
-    kind: AccountKind.Default,
-    name: "",
-    properties: null,
-    location: "",
-    tags: null,
-    type: ""
-  };
-};
-
-const createBlankSubscription = (): Subscription => {
-  return {
-    subscriptionId: "",
-    displayName: "",
-    authorizationSource: "",
-    state: "",
-    subscriptionPolicies: null,
-    tenantId: "",
-    uniqueDisplayName: ""
-  };
-};
-
-const createFullProps = (): AccountSwitchComponentProps => {
-  const props = createBlankProps();
-  props.authType = AuthType.AAD;
-  const account1 = createBlankAccount();
-  account1.name = "account1";
-  const account2 = createBlankAccount();
-  account2.name = "account2";
-  const account3 = createBlankAccount();
-  account3.name = "superlongaccountnamestringtest";
-  props.accounts = [account1, account2, account3];
-  props.selectedAccountName = "account2";
-
-  const sub1 = createBlankSubscription();
-  sub1.displayName = "sub1";
-  sub1.subscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
-  const sub2 = createBlankSubscription();
-  sub2.displayName = "subsubsubsubsubsubsub2";
-  sub2.subscriptionId = "b20b3e93-0185-4326-8a9c-d44bac276b6b";
-  props.subscriptions = [sub1, sub2];
-  props.selectedSubscriptionId = "a6062a74-5d53-4b20-9545-000b95f22297";
-
-  return props;
-};
-
-describe("test render", () => {
-  it("renders no auth type -> handle error in code", () => {
-    const props = createBlankProps();
-
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  // Encrypted Token
-  it("renders auth security token, with selected account name", () => {
-    const props = createBlankProps();
-    props.authType = AuthType.EncryptedToken;
-    props.selectedAccountName = "testaccount";
-
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  // AAD
-  it("renders auth aad, with all information", () => {
-    const props = createFullProps();
-    const wrapper = shallow(<AccountSwitchComponent {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("renders auth aad all dropdown menus", () => {
-    const props = createFullProps();
-    const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
-    wrapper.find("button.accountSwitchButton").simulate("click");
-    expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(true);
-
-    expect(wrapper.exists("div.accountSwitchSubscriptionDropdown")).toBe(true);
-    wrapper.find("DropdownBase.accountSwitchSubscriptionDropdown").simulate("click");
-    // Click will dismiss the first contextual menu in enzyme. Need to dig deeper to achieve below test
-
-    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(true);
-    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(2);
-    // wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchSubscriptionDropdownMenu")).toBe(false);
-
-    // expect(wrapper.exists("div.accountSwitchAccountDropdown")).toBe(true);
-    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(true);
-    // expect(wrapper.find("button.ms-Dropdown-item").length).toBe(3);
-    // wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchAccountDropdownMenu")).toBe(false);
-
-    // wrapper.find("button.accountSwitchButton").simulate("click");
-    // expect(wrapper.exists("div.accountSwitchContextualMenu")).toBe(false);
-
-    wrapper.unmount();
-  });
-});
-
-// describe("test function", () => {
-//   it("switch subscription function", () => {
-//     const props = createFullProps();
-//     const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-//     wrapper.find("button.accountSwitchButton").simulate("click");
-//     wrapper.find("div.accountSwitchSubscriptionDropdown").simulate("click");
-//     wrapper
-//       .find("button.ms-Dropdown-item")
-//       .at(1)
-//       .simulate("click");
-//     expect(props.onSubscriptionChange).toBeCalled();
-//     expect(props.onSubscriptionChange).toHaveBeenCalled();
-
-//     wrapper.unmount();
-//   });
-
-//   it("switch account", () => {
-//     const props = createFullProps();
-//     const wrapper = mount(<AccountSwitchComponent {...props} />);
-
-//     wrapper.find("button.accountSwitchButton").simulate("click");
-//     wrapper.find("div.accountSwitchAccountDropdown").simulate("click");
-//     wrapper
-//       .find("button.ms-Dropdown-item")
-//       .at(0)
-//       .simulate("click");
-//     expect(props.onAccountChange).toBeCalled();
-//     expect(props.onAccountChange).toHaveBeenCalled();
-
-//     wrapper.unmount();
-//   });
-// });

src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx

@@ -1,177 +0,0 @@
-import { AuthType } from "../../../AuthType";
-import { StyleConstants } from "../../../Common/Constants";
-import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
-
-import * as React from "react";
-import { DefaultButton, IButtonStyles, IButtonProps } from "office-ui-fabric-react/lib/Button";
-import { IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
-import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
-
-export interface AccountSwitchComponentProps {
-  authType: AuthType;
-  selectedAccountName: string;
-  accounts: DatabaseAccount[];
-  isLoadingAccounts: boolean;
-  onAccountChange: (newAccount: DatabaseAccount) => void;
-  selectedSubscriptionId: string;
-  subscriptions: Subscription[];
-  isLoadingSubscriptions: boolean;
-  onSubscriptionChange: (newSubscription: Subscription) => void;
-  displayText?: string;
-}
-
-export class AccountSwitchComponent extends React.Component<AccountSwitchComponentProps> {
-  public render(): JSX.Element {
-    return this.props.authType === AuthType.AAD ? this._renderSwitchDropDown() : this._renderAccountName();
-  }
-
-  private _renderSwitchDropDown(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-
-    const menuProps: IContextualMenuProps = {
-      directionalHintFixed: true,
-      className: "accountSwitchContextualMenu",
-      items: [
-        {
-          key: "switchSubscription",
-          onRender: this._renderSubscriptionDropdown.bind(this)
-        },
-        {
-          key: "switchAccount",
-          onRender: this._renderAccountDropDown.bind(this)
-        }
-      ]
-    };
-
-    const buttonStyles: IButtonStyles = {
-      root: {
-        fontSize: StyleConstants.DefaultFontSize,
-        height: 40,
-        padding: 0,
-        paddingLeft: 10,
-        marginRight: 5,
-        backgroundColor: StyleConstants.BaseDark,
-        color: StyleConstants.BaseLight
-      },
-      rootHovered: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootFocused: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootPressed: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      rootExpanded: {
-        backgroundColor: StyleConstants.BaseHigh,
-        color: StyleConstants.BaseLight
-      },
-      textContainer: {
-        flexGrow: "initial"
-      }
-    };
-
-    const buttonProps: IButtonProps = {
-      text: displayText || selectedAccountName,
-      menuProps: menuProps,
-      styles: buttonStyles,
-      className: "accountSwitchButton",
-      id: "accountSwitchButton"
-    };
-
-    return <DefaultButton {...buttonProps} />;
-  }
-
-  private _renderSubscriptionDropdown(): JSX.Element {
-    const { subscriptions, selectedSubscriptionId, isLoadingSubscriptions } = this.props;
-    const options: IDropdownOption[] = subscriptions.map(sub => {
-      return {
-        key: sub.subscriptionId,
-        text: sub.displayName,
-        data: sub
-      };
-    });
-
-    const placeHolderText = isLoadingSubscriptions
-      ? "Loading subscriptions"
-      : !options || !options.length
-      ? "No subscriptions found in current directory"
-      : "Select subscription from list";
-
-    const dropdownProps: IDropdownProps = {
-      label: "Subscription",
-      className: "accountSwitchSubscriptionDropdown",
-      options: options,
-      onChange: this._onSubscriptionDropdownChange,
-      defaultSelectedKey: selectedSubscriptionId,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchSubscriptionDropdownMenu"
-      }
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onSubscriptionDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onSubscriptionChange(option.data);
-  };
-
-  private _renderAccountDropDown(): JSX.Element {
-    const { accounts, selectedAccountName, isLoadingAccounts } = this.props;
-    const options: IDropdownOption[] = accounts.map(account => {
-      return {
-        key: account.name,
-        text: account.name,
-        data: account
-      };
-    });
-    // Fabric UI will also try to select the first non-disabled option from dropdown.
-    // Add a option to prevent pop the message when user click on dropdown on first time.
-    options.unshift({
-      key: "select from list",
-      text: "Select Cosmos DB account from list",
-      data: undefined
-    });
-
-    const placeHolderText = isLoadingAccounts
-      ? "Loading Cosmos DB accounts"
-      : !options || !options.length
-      ? "No Cosmos DB accounts found"
-      : "Select Cosmos DB account from list";
-
-    const dropdownProps: IDropdownProps = {
-      label: "Cosmos DB Account Name",
-      className: "accountSwitchAccountDropdown",
-      options: options,
-      onChange: this._onAccountDropdownChange,
-      defaultSelectedKey: selectedAccountName,
-      placeholder: placeHolderText,
-      styles: {
-        callout: "accountSwitchAccountDropdownMenu"
-      }
-    };
-
-    return <Dropdown {...dropdownProps} />;
-  }
-
-  private _onAccountDropdownChange = (e: React.FormEvent<HTMLDivElement>, option: IDropdownOption): void => {
-    if (!option) {
-      return;
-    }
-
-    this.props.onAccountChange(option.data);
-  };
-
-  private _renderAccountName(): JSX.Element {
-    const { displayText, selectedAccountName } = this.props;
-    return <span className="accountNameHeader">{displayText || selectedAccountName}</span>;
-  }
-}

src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { AccountSwitchComponent, AccountSwitchComponentProps } from "./AccountSwitchComponent";
-
-export class AccountSwitchComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<AccountSwitchComponentProps>;
-
-  public renderComponent(): JSX.Element {
-    return <AccountSwitchComponent {...this.parameters()} />;
-  }
-}

src/Explorer/Controls/AccountSwitch/__snapshots__/AccountSwitchComponent.test.tsx.snap

@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test render renders auth aad, with all information 1`] = `
-<CustomizedDefaultButton
-  className="accountSwitchButton"
-  id="accountSwitchButton"
-  menuProps={
-    Object {
-      "className": "accountSwitchContextualMenu",
-      "directionalHintFixed": true,
-      "items": Array [
-        Object {
-          "key": "switchSubscription",
-          "onRender": [Function],
-        },
-        Object {
-          "key": "switchAccount",
-          "onRender": [Function],
-        },
-      ],
-    }
-  }
-  styles={
-    Object {
-      "root": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-        "fontSize": undefined,
-        "height": 40,
-        "marginRight": 5,
-        "padding": 0,
-        "paddingLeft": 10,
-      },
-      "rootExpanded": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootFocused": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootHovered": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "rootPressed": Object {
-        "backgroundColor": undefined,
-        "color": undefined,
-      },
-      "textContainer": Object {
-        "flexGrow": "initial",
-      },
-    }
-  }
-  text="account2"
-/>
-`;
-
-exports[`test render renders auth security token, with selected account name 1`] = `
-<span
-  className="accountNameHeader"
->
-  testaccount
-</span>
-`;
-
-exports[`test render renders no auth type -> handle error in code 1`] = `
-<span
-  className="accountNameHeader"
-/>
-`;

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -38,7 +38,7 @@ export interface CommandButtonComponentProps {
   /**
    * Label for the button
    */
-  commandButtonLabel: string;
+  commandButtonLabel?: string;
 
   /**
    * True if this button opens a tab or pane, false otherwise.

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

@@ -5,7 +5,6 @@ import {
   getSanitizedInputValue,
   hasDatabaseSharedThroughput,
   isDirty,
-  isDirtyTypes,
   MongoIndexTypes,
   MongoNotificationType,
   parseConflictResolutionMode,
@@ -71,17 +70,18 @@ describe("SettingsUtils", () => {
       excludedPaths: []
     } as DataModels.IndexingPolicy;
 
-    const cases = [
-      ["baseline", "current"],
-      [0, 1],
-      [true, false],
-      [undefined, indexingPolicy],
-      [indexingPolicy, { ...indexingPolicy, automatic: false }]
-    ];
+    it("works on all types", () => {
+      expect(isDirty("baseline", "baseline")).toEqual(false);
+      expect(isDirty(0, 0)).toEqual(false);
+      expect(isDirty(true, true)).toEqual(false);
+      expect(isDirty(undefined, undefined)).toEqual(false);
+      expect(isDirty(indexingPolicy, indexingPolicy)).toEqual(false);
 
-    test.each(cases)("", (baseline: isDirtyTypes, current: isDirtyTypes) => {
-      expect(isDirty(baseline, baseline)).toEqual(false);
-      expect(isDirty(baseline, current)).toEqual(true);
+      expect(isDirty("baseline", "current")).toEqual(true);
+      expect(isDirty(0, 1)).toEqual(true);
+      expect(isDirty(true, false)).toEqual(true);
+      expect(isDirty(undefined, indexingPolicy)).toEqual(true);
+      expect(isDirty(indexingPolicy, { ...indexingPolicy, automatic: false })).toEqual(true);
     });
   });
 

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

@@ -1026,7 +1026,6 @@ exports[`SettingsComponent renders 1`] = `
                 "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
@@ -1072,8 +1071,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "renewToken": [Function],
-                "renewTokenError": [Function],
                 "resourceTokenCollection": [Function],
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
@@ -1166,7 +1163,6 @@ exports[`SettingsComponent renders 1`] = `
                 "shouldShowContextSwitchPrompt": [Function],
                 "shouldShowDataAccessExpiryDialog": [Function],
                 "shouldShowShareDialogContents": [Function],
-                "signInAad": [Function],
                 "sparkClusterConnectionInfo": [Function],
                 "splashScreenAdapter": SplashScreenComponentAdapter {
                   "clearMostRecent": [Function],
@@ -1233,7 +1229,6 @@ exports[`SettingsComponent renders 1`] = `
                 "toggleLeftPaneExpandedKeyPress": [Function],
                 "toggleRead": [Function],
                 "toggleReadWrite": [Function],
-                "tokenForRenewal": [Function],
                 "uploadFilePane": UploadFilePane {
                   "container": [Circular],
                   "extensions": [Function],
@@ -2301,7 +2296,6 @@ exports[`SettingsComponent renders 1`] = `
               "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
-              "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
@@ -2347,8 +2341,6 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "renewToken": [Function],
-              "renewTokenError": [Function],
               "resourceTokenCollection": [Function],
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
@@ -2441,7 +2433,6 @@ exports[`SettingsComponent renders 1`] = `
               "shouldShowContextSwitchPrompt": [Function],
               "shouldShowDataAccessExpiryDialog": [Function],
               "shouldShowShareDialogContents": [Function],
-              "signInAad": [Function],
               "sparkClusterConnectionInfo": [Function],
               "splashScreenAdapter": SplashScreenComponentAdapter {
                 "clearMostRecent": [Function],
@@ -2508,7 +2499,6 @@ exports[`SettingsComponent renders 1`] = `
               "toggleLeftPaneExpandedKeyPress": [Function],
               "toggleRead": [Function],
               "toggleReadWrite": [Function],
-              "tokenForRenewal": [Function],
               "uploadFilePane": UploadFilePane {
                 "container": [Circular],
                 "extensions": [Function],
@@ -3589,7 +3579,6 @@ exports[`SettingsComponent renders 1`] = `
                 "notificationConsoleData": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "onSwitchToConnectionString": [Function],
                 "onToggleKeyDown": [Function],
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
@@ -3635,8 +3624,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                "renewToken": [Function],
-                "renewTokenError": [Function],
                 "resourceTokenCollection": [Function],
                 "resourceTokenCollectionId": [Function],
                 "resourceTokenDatabaseId": [Function],
@@ -3729,7 +3716,6 @@ exports[`SettingsComponent renders 1`] = `
                 "shouldShowContextSwitchPrompt": [Function],
                 "shouldShowDataAccessExpiryDialog": [Function],
                 "shouldShowShareDialogContents": [Function],
-                "signInAad": [Function],
                 "sparkClusterConnectionInfo": [Function],
                 "splashScreenAdapter": SplashScreenComponentAdapter {
                   "clearMostRecent": [Function],
@@ -3796,7 +3782,6 @@ exports[`SettingsComponent renders 1`] = `
                 "toggleLeftPaneExpandedKeyPress": [Function],
                 "toggleRead": [Function],
                 "toggleReadWrite": [Function],
-                "tokenForRenewal": [Function],
                 "uploadFilePane": UploadFilePane {
                   "container": [Circular],
                   "extensions": [Function],
@@ -4864,7 +4849,6 @@ exports[`SettingsComponent renders 1`] = `
               "notificationConsoleData": [Function],
               "onRefreshDatabasesKeyPress": [Function],
               "onRefreshResourcesClick": [Function],
-              "onSwitchToConnectionString": [Function],
               "onToggleKeyDown": [Function],
               "provideFeedbackEmail": [Function],
               "queriesClient": QueriesClient {
@@ -4910,8 +4894,6 @@ exports[`SettingsComponent renders 1`] = `
                 "title": [Function],
                 "visible": [Function],
               },
-              "renewToken": [Function],
-              "renewTokenError": [Function],
               "resourceTokenCollection": [Function],
               "resourceTokenCollectionId": [Function],
               "resourceTokenDatabaseId": [Function],
@@ -5004,7 +4986,6 @@ exports[`SettingsComponent renders 1`] = `
               "shouldShowContextSwitchPrompt": [Function],
               "shouldShowDataAccessExpiryDialog": [Function],
               "shouldShowShareDialogContents": [Function],
-              "signInAad": [Function],
               "sparkClusterConnectionInfo": [Function],
               "splashScreenAdapter": SplashScreenComponentAdapter {
                 "clearMostRecent": [Function],
@@ -5071,7 +5052,6 @@ exports[`SettingsComponent renders 1`] = `
               "toggleLeftPaneExpandedKeyPress": [Function],
               "toggleRead": [Function],
               "toggleReadWrite": [Function],
-              "tokenForRenewal": [Function],
               "uploadFilePane": UploadFilePane {
                 "container": [Circular],
                 "extensions": [Function],

src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { shallow } from "enzyme";
-import { SmartUiComponent, Descriptor, InputType } from "./SmartUiComponent";
+import React from "react";
+import { Descriptor, SmartUiComponent } from "./SmartUiComponent";
 
 describe("SmartUiComponent", () => {
   const exampleData: Descriptor = {
@@ -77,9 +77,7 @@ describe("SmartUiComponent", () => {
     }
   };
 
-  const exampleCallbacks = (newValues: Map<string, InputType>): void => {
-    console.log("New values:", newValues);
-  };
+  const exampleCallbacks = (): void => undefined;
 
   it("should render", () => {
     const wrapper = shallow(<SmartUiComponent descriptor={exampleData} onChange={exampleCallbacks} />);