Initial Move from Azure DevOps to GitHub

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

@@ -0,0 +1,159 @@
+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

@@ -0,0 +1,177 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,71 @@
+// 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"
+/>
+`;