Initial Move from Azure DevOps to GitHub

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { Dialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
+import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
+import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+import { Link } from "office-ui-fabric-react/lib/Link";
+
+export interface TextFieldProps extends ITextFieldProps {
+  label: string;
+  multiline: boolean;
+  autoAdjustHeight: boolean;
+  rows: number;
+  onChange: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;
+  defaultValue?: string;
+}
+
+export interface LinkProps {
+  linkText: string;
+  linkUrl: string;
+}
+
+export interface DialogProps {
+  title: string;
+  subText: string;
+  isModal: boolean;
+  visible: boolean;
+  textFieldProps?: TextFieldProps;
+  linkProps?: LinkProps;
+  primaryButtonText: string;
+  secondaryButtonText: string;
+  onPrimaryButtonClick: () => void;
+  onSecondaryButtonClick: () => void;
+  primaryButtonDisabled?: boolean;
+  type?: DialogType;
+}
+
+const DIALOG_MIN_WIDTH = "400px";
+const DIALOG_MAX_WIDTH = "600px";
+const DIALOG_TITLE_FONT_SIZE = "17px";
+const DIALOG_TITLE_FONT_WEIGHT = 400;
+const DIALOG_SUBTEXT_FONT_SIZE = "15px";
+
+export class DialogComponent extends React.Component<DialogProps, {}> {
+  constructor(props: DialogProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const dialogProps: IDialogProps = {
+      hidden: !this.props.visible,
+      dialogContentProps: {
+        type: this.props.type || DialogType.normal,
+        title: this.props.title,
+        subText: this.props.subText,
+        styles: {
+          title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
+          subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE }
+        }
+      },
+      modalProps: { isBlocking: this.props.isModal },
+      minWidth: DIALOG_MIN_WIDTH,
+      maxWidth: DIALOG_MAX_WIDTH
+    };
+    const textFieldProps: ITextFieldProps = this.props.textFieldProps;
+    const linkProps: LinkProps = this.props.linkProps;
+    const primaryButtonProps: IButtonProps = {
+      text: this.props.primaryButtonText,
+      disabled: this.props.primaryButtonDisabled || false,
+      onClick: this.props.onPrimaryButtonClick
+    };
+    const secondaryButtonProps: IButtonProps =
+      this.props.secondaryButtonText && this.props.onSecondaryButtonClick
+        ? {
+            text: this.props.secondaryButtonText,
+            onClick: this.props.onSecondaryButtonClick
+          }
+        : undefined;
+
+    return (
+      <Dialog {...dialogProps}>
+        {textFieldProps && <TextField {...textFieldProps} />}
+        {linkProps && (
+          <Link href={linkProps.linkUrl} target="_blank">
+            {linkProps.linkText}
+          </Link>
+        )}
+        <DialogFooter>
+          <PrimaryButton {...primaryButtonProps} />
+          {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
+        </DialogFooter>
+      </Dialog>
+    );
+  }
+}

src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx

@@ -0,0 +1,16 @@
+/**
+ * This adapter is responsible to render the Dialog React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as React from "react";
+import { DialogComponent, DialogProps } from "./DialogComponent";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+
+export class DialogComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<DialogProps>;
+
+  public renderComponent(): JSX.Element {
+    return <DialogComponent {...this.parameters()} />;
+  }
+}