office-ui-fabric-react#PrimaryButton TypeScript Examples

render() {
        return (
            this.props.feed.loaded && (
                <FocusZone
                    as="div"
                    id="refocus"
                    direction={FocusZoneDirection.vertical}
                    className={this.getClassName()}
                    shouldReceiveFocus={this.canFocusChild}
                    data-is-scrollable>
                    <List
                        className={AnimationClassNames.slideUpIn10}
                        items={this.props.items}
                        onRenderCell={this.onRenderItem}
                        ignoreScrollingState
                        usePageCache
                    />
                    {this.props.feed.loaded && !this.props.feed.allLoaded ? (
                        <div className="load-more-wrapper">
                            <PrimaryButton
                                id="load-more"
                                text={intl.get("loadMore")}
                                disabled={this.props.feed.loading}
                                onClick={() =>
                                    this.props.loadMore(this.props.feed)
                                }
                            />
                        </div>
                    ) : null}
                    {this.props.items.length === 0 && (
                        <div className="empty">{intl.get("article.empty")}</div>
                    )}
                </FocusZone>
            )
        )
    }

public render(): React.ReactElement<ISpfxReactConfettiProps> {
    return (
      <div className={styles.spfxReactConfetti}>
        {this.state.showConfetti == true ?
          <Confetti
            width={750}
            height={200}
          />
          : ''
        }
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.column}>
              <span className={styles.title}>Welcome to SharePoint!</span>
              <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
              <p className={styles.description}>{escape(this.props.description)}</p>
              <Stack horizontal tokens={stackTokens}>
                <a href="https://aka.ms/spfx" className={styles.button}>
                  <span className={styles.label}>Learn more</span>
                </a>
                <PrimaryButton text="Stop Confetti" onClick={() => this.setState({ showConfetti: false })} />
              </Stack>
            </div>
          </div>
        </div>
      </div>
    );
  }

public render(): React.ReactElement<ISpfxPnpPageprovisioningProps> {
    return (
      <div className={styles.spfxPnpPageprovisioning}>
        <TextField label="Page Name" onChanged={(val) => { this.setState({ name: val }) }} />
        <TextField label="Page Title" onChanged={(val) => { this.setState({ title: val }) }} />
        <br />
        <PrimaryButton text="Create Page" onClick={this._CreatePage} />
      </div>
    );
  }

public render(): React.ReactElement<{}> {
    return (
      <div className={styles.spfxFluentuiPivot}>
        <h3>New user details</h3>
        <TextField label="First Name" />
        <TextField label="Last Name" />
        <TextField label="House number" />
        <TextField label="City" />
        <TextField label="State" />
        <br />
        <PrimaryButton text="Save" />
      </div>
    );
  }

public render(): React.ReactElement<ISpfxFluentuiMessagebarProps> {
    return (
      <div className={styles.spfxFluentuiMessagebar}>
        {(this.state.InfoMessage) ? <div><InfoMessage /><br /></div> : ''}
        {(this.state.ErrorMessage) ? <div><ErrorMessage /><br /></div> : ''}
        {(this.state.AccessMessage) ? <div><AccessMessage /><br /></div> : ''}
        {(this.state.WarningMessage) ? <div><WarningMessage /><br /></div> : ''}
        {(this.state.SuccessQuestion) ? <div><SuccessQuestion /><br /></div> : ''}
        {(this.state.WarningQuestion) ? <div><WarningQuestion /><br /></div> : ''}
        {(this.state.WarningLongMessage) ? <div><WarningLongMessage /><br /></div> : ''}
        <br />
        <br />
        <Stack horizontal tokens={stackTokens}>
          <PrimaryButton text="Show Info Message" onClick={() => this._showMessageClicked('InfoMessage')} />
          <PrimaryButton text="Show Error Message" onClick={() => this._showMessageClicked('ErrorMessage')} />
          <PrimaryButton text="Show Access Message" onClick={() => this._showMessageClicked('AccessMessage')} />
        </Stack>
        <br />
        <br />
        <Stack horizontal tokens={stackTokens}>
          <PrimaryButton text="Show Warning Message" onClick={() => this._showMessageClicked('WarningMessage')} />
          <PrimaryButton text="Show Success with Question Message" onClick={() => this._showMessageClicked('SuccessQuestion')} />
          <PrimaryButton text="Show Warning with Question Message" onClick={() => this._showMessageClicked('WarningQuestion')} />
        </Stack>
        <br />
        <br />
        <Stack horizontal tokens={stackTokens}>
          <PrimaryButton text="Show Long Message" onClick={() => this._showMessageClicked('WarningLongMessage')} />
          <PrimaryButton text="Show info message and hide after 5 sec" onClick={this._showandhideMessageClicked} />
          <DefaultButton text="Hide All Message" onClick={this._hideMessageClicked} />
        </Stack>

      </div>
    );
  }

public render(): React.ReactElement<ISpfxFluentuiDropdownProps> {
    return (
      <div className={styles.spfxFluentuiDropdown}>
        <TextField
          className={styles.fixedwidth}
          label="Title" value={this.state.salestitle} onChanged={(titlevalue) => this.setState({ salestitle: titlevalue })} />
        {this.state.seletedprojects == null ? '' : <Dropdown
          placeholder="Select projects"
          label="Projects"
          onChange={this.projects_selection}
          multiSelect
          options={this.state.projectlookupvalues}
          className={styles.fixedwidth}
          defaultSelectedKeys={this.state.seletedprojects}
        />}

        <br />
        <PrimaryButton text="Save" onClick={this._savesales} />
      </div>
    );
  }

public render(): React.ReactElement<ISpfxReactDaterangepickerProps> {
    let state = [{ startDate: this.state.startDate, endDate: this.state.endDate, key: this.state.key }];
    return (
      <div className={styles.spfxReactDaterangepicker}>
        <DateRange
          editableDateInputs={true}
          onChange={item => this.setState({ endDate: item.selection["endDate"], startDate: item.selection["startDate"] })}
          moveRangeOnFirstSelection={false}
          ranges={state}
        />
        <br />
        <PrimaryButton text="Save" onClick={this._SaveIntoSP} />
      </div>
    );
  }

public render(): React.ReactElement<ISpfxReactDropzoneProps> {
    return (
      <div className={styles.spfxReactDropzone}>
        <FilePond files={this.state.files} allowMultiple={true} onupdatefiles={fileItems => {
          this.setState({
            files: fileItems.map(fileItem => fileItem.file)
          });
        }} />
        <br />
        <PrimaryButton text="Upload" onClick={this._uploadFiles} />
      </div>
    );
  }

public render(): React.ReactElement<IConfirmBoxProps> {
        return (
            <DialogContent
                title={this.props.title}
                subText={this.props.message}
                onDismiss={this._onCancel}
                showCloseButton={false}
            >
                <DialogFooter>
                    <PrimaryButton text={this.props.okLabel} title={this.props.okLabel} onClick={this._onConfirm} />
                    <DefaultButton
                        text={this.props.cancelLabel}
                        title={this.props.cancelLabel}
                        onClick={this._onCancel}
                    />
                </DialogFooter>
            </DialogContent>
        );
    }

render(): React.ReactNode {
        const { showColumn, isHideDialog } = this.props;
        const { userSelectColumnList } = this.state;
        const renderOptions: Array<CheckBoxItems> = [];
        showColumn.map(item => {
            if (userSelectColumnList.includes(item)) {
                // selected column name
                renderOptions.push({ label: item, checked: true, onChange: this.makeChangeHandler(item) });
            } else {
                renderOptions.push({ label: item, checked: false, onChange: this.makeChangeHandler(item) });
            }
        });
        return (
            <div>
                <Dialog
                    hidden={isHideDialog} // required field!
                    dialogContentProps={{
                        type: DialogType.largeHeader,
                        title: 'Change table column',
                        subText: 'You can chose which columns you want to see in the table.'
                    }}
                    modalProps={{
                        isBlocking: false,
                        styles: { main: { maxWidth: 450 } }
                    }}
                >
                    <div className="columns-height">
                        {renderOptions.map(item => {
                            return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />
                        })}
                    </div>
                    <DialogFooter>
                        <PrimaryButton text="Save" onClick={this.saveUserSelectColumn} />
                        <DefaultButton text="Cancel" onClick={this.cancelOption} />
                    </DialogFooter>
                </Dialog>
            </div>
        );
    }

public render(): React.ReactElement<ISpfxReactRichtextProps> {
    return (
      <div className={styles.spfxReactRichtext}>
        <TextField label="Name" value={this.state.title} onChanged={(newtext) => this.setState({ title: newtext })} />
        <br />
        <label>React rich text editor</label>
        <ReactQuill value={this.state.reactrichtext} theme="snow" modules={modules}
          formats={formats}
          onChange={(newvalue) => this.setState({ reactrichtext: newvalue })} />
        <TextField label="Place" value={this.state.place} onChanged={(newtext) => this.setState({ place: newtext })} />
        <br />
        <PrimaryButton text="Save" onClick={this._SaveIntoSP} />
      </div>
    );
  }

render(): React.ReactNode {
        if (this.state.editting) {
            return (
                <Stack horizontal className="inputBox">
                    <input
                        type="number"
                        className="concurrencyInput"
                        defaultValue={this.props.value.toString()}
                        ref={this.input}
                    />
                    <PrimaryButton
                        text="Save"
                        onClick={this.save}
                    />
                    <PrimaryButton
                        text="Cancel"
                        style={{ display: 'inline-block', marginLeft: 1 }}
                        onClick={this.cancel}
                    />
                </Stack>
            );
        } else {
            return (
                <Stack horizontal className="inputBox">
                    <input
                        type="number"
                        className="concurrencyInput"
                        disabled={true}
                        value={this.props.value}
                    />
                    <PrimaryButton
                        text="Edit"
                        onClick={this.edit}
                    />
                </Stack>
            );
        }
    }

public render(): React.ReactElement<ISpfxReactSelectProps> {
    return (
      <div className={styles.spfxReactSelect}>
        <label>Country</label>
        <Select
          className="basic-single"
          classNamePrefix="Select"
          isClearable={true}
          isSearchable={true}
          value={this.state.selectedvalue}
          options={this.state.options}
          onChange={(value) => this.setState({ selectedvalue: value })}
        />
        <br />
        <label>Countries</label>
        <Select
          className="basic-single"
          classNamePrefix="Select"
          isClearable={true}
          isSearchable={true}
          isMulti
          value={this.state.selectedvalues}
          options={this.state.options}
          onChange={(value) => this.setState({ selectedvalues: value })}
        />
        <br />
        <PrimaryButton text="Save" onClick={this._savevalues} />
      </div>
    );
  }

render(): React.ReactNode {
        const { isCalloutVisible } = this.state;
        const prompString = 'Are you sure to cancel this trial?';
        return (
            <div>
                <div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
                    <PrimaryButton className="detail-button-operation" onClick={this.openPromot} title="kill">{blocked}</PrimaryButton>
                </div>
                {isCalloutVisible ? (
                    <div>
                        <FocusTrapCallout
                            role="alertdialog"
                            className={styles.callout}
                            gapSpace={0}
                            target={this.menuButtonElement}
                            onDismiss={this.onDismiss}
                            setInitialFocus={true}
                        >
                            <div className={styles.header}>
                                <p className={styles.title}>Kill trial</p>
                            </div>
                            <div className={styles.inner}>
                                <div>
                                    <p className={styles.subtext}>{prompString}</p>
                                </div>
                            </div>
                            <FocusZone>
                                <Stack className={styles.buttons} gap={8} horizontal>
                                    <DefaultButton onClick={this.onDismiss}>No</DefaultButton>
                                    <PrimaryButton onClick={this.onKill}>Yes</PrimaryButton>
                                </Stack>
                            </FocusZone>
                        </FocusTrapCallout>
                    </div>
                ) : null}
            </div>
        );
    }

render() {
        return (
            this.props.feed.loaded && (
                <FocusZone
                    as="div"
                    id="refocus"
                    className="cards-feed-container"
                    shouldReceiveFocus={this.canFocusChild}
                    data-is-scrollable>
                    <List
                        className={AnimationClassNames.slideUpIn10}
                        items={this.flexFixItems()}
                        onRenderCell={this.onRenderItem}
                        getItemCountForPage={this.getItemCountForPage}
                        getPageHeight={this.getPageHeight}
                        ignoreScrollingState
                        usePageCache
                    />
                    {this.props.feed.loaded && !this.props.feed.allLoaded ? (
                        <div className="load-more-wrapper">
                            <PrimaryButton
                                id="load-more"
                                text={intl.get("loadMore")}
                                disabled={this.props.feed.loading}
                                onClick={() =>
                                    this.props.loadMore(this.props.feed)
                                }
                            />
                        </div>
                    ) : null}
                    {this.props.items.length === 0 && (
                        <div className="empty">{intl.get("article.empty")}</div>
                    )}
                </FocusZone>
            )
        )
    }

function CopyMeetingPageComponent(props: CopyMeetingPageProps) {
  return (
    <>
      <Header />
      <Stack
        className="container"
        verticalFill
        tokens={{
          childrenGap: 35
        }}
      >
        <Stack.Item align="center" className="meetingCardContainer">
          <svg
            className="meetingSuccess"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 48 48"
          >
            <path
              d="M24 0c2.2 0 4.3.3 6.4.9 2 .6 3.9 1.4 5.7 2.4 1.8 1 3.4 2.3 4.9 3.8 1.5 1.5 2.7 3.1 3.8 4.9 1 1.8 1.8 3.7 2.4 5.7.6 2 .9 4.2.9 6.4s-.3 4.3-.9 6.3c-.6 2-1.4 3.9-2.4 5.7-1 1.8-2.3 3.4-3.8 4.9-1.5 1.5-3.1 2.7-4.9 3.8-1.8 1-3.7 1.9-5.7 2.4-2 .6-4.1.9-6.4.9-2.2 0-4.3-.3-6.3-.9-2-.6-3.9-1.4-5.7-2.4-1.8-1-3.4-2.3-4.9-3.8-1.5-1.5-2.7-3.1-3.8-4.9-1-1.8-1.9-3.7-2.4-5.7C.3 28.3 0 26.2 0 24s.3-4.3.9-6.4c.6-2 1.4-3.9 2.4-5.7 1-1.8 2.3-3.4 3.8-4.9 1.5-1.5 3.1-2.7 4.9-3.8 1.8-1 3.7-1.9 5.7-2.4S21.8 0 24 0zm7.9 17.1c-.6 0-1.2.2-1.6.7l-8.5 8.5-3-3c-.4-.4-1-.7-1.6-.7-.3 0-.6.1-.8.2-.3.1-.5.3-.7.5s-.4.4-.5.7c-.2.3-.2.5-.2.8 0 .6.2 1.2.7 1.6l4.6 4.6c.4.4 1 .7 1.6.7.6 0 1.2-.2 1.6-.7l10.1-10.1c.4-.5.7-1 .7-1.6 0-.3-.1-.6-.2-.8-.1-.3-.3-.5-.5-.7s-.4-.4-.7-.5c-.4-.2-.7-.2-1-.2z"
              fill="#599c00"
            />
          </svg>

          <Text block variant="xLarge" className="meetingCardHeader">
            <FormattedMessage id="copyMeetingPage.header" />
          </Text>
          <div
            className="meetingCardBody"
            id="copy"
            dangerouslySetInnerHTML={{ __html: props.meeting?.preview ?? '' }}
          />
          <PrimaryButton
            className="teamsButton copyButton"
            onClick={() => props.onCopyToClipboard(props.meeting)}
            ariaLabel={translate('copyMeetingPage.copy.ariaLabel')}
          >
            <FormattedMessage id="copyMeetingPage.copy" />
          </PrimaryButton>
        </Stack.Item>
      </Stack>
    </>
  );
}

function CreateLandingPageComponent(props: CreateLandingPageProps) {
  // Check for a signed-in user and go to the signin page if there isn't one
  const checkForSignedInUser = props.checkForSignedInUser;
  React.useEffect(() => {
    checkForSignedInUser();
  });

  return (
    <>
      <Header />
      <Stack
        className="container"
        horizontalAlign="center"
        verticalAlign="center"
        verticalFill
        tokens={{
          childrenGap: 35
        }}
      >
        <img
          className="splashImage"
          src={calendar}
          alt={translate('createLandingPage.splash.altText')}
        />
        <Text variant="xLargePlus" styles={boldStyle}>
          <FormattedMessage id="createLandingPage.schedule.header" />
        </Text>
        <Text variant="medium">
          <FormattedMessage id="createLandingPage.subheader" />
        </Text>
        <PrimaryButton
          className="teamsButton"
          onClick={() => props.onNewMeeting()}
          ariaLabel={translate('createLandingPage.create.meeting.ariaLabel')}
        >
          <FormattedMessage id="createLandingPage.create.meeting" />
        </PrimaryButton>
      </Stack>
    </>
  );
}

function ErrorPageComponent(props: ErrorPageProps) {
  return (
    <>
      <Header />
      <Stack
        className="container"
        horizontalAlign="center"
        verticalAlign="center"
        verticalFill
        tokens={{
          childrenGap: 35
        }}
      >
        <img
          className="splashImage"
          src={errorImage}
          alt={translate('errorPage.splash.altText')}
          />
        <Text variant="xLargePlus" styles={boldStyle}>
          <FormattedMessage id="errorPage.heading" />
        </Text>
        <Text variant="medium" className="uTextCenter">
          <FormattedMessage id="errorPage.subheading" />
        </Text>
        <Stack horizontal tokens={{ childrenGap: 10 }}>
          <DefaultButton
            className="teamsButtonInverted"
            onClick={() => props.goBack()}
            ariaLabel={translate('errorPage.back.ariaLabel')}
          >
            <FormattedMessage id="errorPage.back" />
          </DefaultButton>
          <PrimaryButton
            className="teamsButton"
            onClick={() => props.retryCreateMeeting(props.meeting)}
            ariaLabel={translate('errorPage.try.again')}
          >
            <FormattedMessage id="errorPage.try.again" />
          </PrimaryButton>
        </Stack>
      </Stack>
    </>
  );
}

function simplehooks(props: ISpfxReactHooksProps) {
  const [fruits, setfruits] = useState([])
  const [firstName, setFistName] = useState("No first Name")
  const [lastName, setLastName] = useState("No last Name")

  useEffect(() => {
    sp.setup({
      spfxContext: props.context
    });
    _getListItemsFromSP()
  }, []);

  const _getListItemsFromSP = async () => {
    const allItems: any[] = await sp.web.lists.getByTitle("Fruits").items.getAll();
    let titlevalues: string[] = [];
    allItems.forEach(function (v, i) {
      titlevalues.push(v.Title);
    })
    setfruits(titlevalues);
  }

  const _onbtnclick = () => {
    console.log('Changing value')
    setFistName('Ravichandran')
  }

  const _lastNameChanged = (changedvalue: any) => {
    setLastName(changedvalue)
  }


  return (<div>
    <b>Props value</b><br />
    {props.description}
    <br />
    <hr />
    <br />
    <b>State values</b><br />
    Name : {firstName + ' ' + lastName}
    <br />
    <br />
    <TextField label="Last Name" onChanged={_lastNameChanged} value={lastName} />
    <br />
    <br />
    <PrimaryButton text="Change First Name" onClick={() => _onbtnclick()} />
    <br />
    <hr />
    <br />
    <b>Loop async values from SharePoint List</b><br />
    {fruits.map(function (fruit, i) {
      return <h3 key={i}>{fruit}</h3>
    })}
  </div>);
}

function SigninPageComponent(props: Partial<SigninPageProps>) {
  const onSignIn = props.onSignIn ?? (() => {});

  return (
    <>
      <div className="microsoftLogo">
        <svg xmlns="http://www.w3.org/2000/svg" width="108" height="24">
          <path
            d="M44.836 4.6v13.8h-2.4V7.583H42.4L38.119 18.4h-1.588L32.142 7.583h-.029V18.4H29.9V4.6h3.436L37.3 14.83h.058L41.545 4.6zm2 1.049a1.268 1.268 0 01.419-.967 1.413 1.413 0 011-.39 1.392 1.392 0 011.02.4 1.3 1.3 0 01.4.958 1.248 1.248 0 01-.414.953 1.428 1.428 0 01-1.01.385A1.4 1.4 0 0147.25 6.6a1.261 1.261 0 01-.409-.948M49.41 18.4h-2.329V8.507h2.329zm7.064-1.694a3.213 3.213 0 001.145-.241 4.811 4.811 0 001.155-.635V18a4.665 4.665 0 01-1.266.481 6.886 6.886 0 01-1.554.164 4.707 4.707 0 01-4.918-4.908 5.641 5.641 0 011.4-3.932 5.055 5.055 0 013.955-1.545 5.414 5.414 0 011.324.168 4.431 4.431 0 011.063.39v2.233a4.763 4.763 0 00-1.1-.611 3.184 3.184 0 00-1.15-.217 2.919 2.919 0 00-2.223.9 3.37 3.37 0 00-.847 2.416 3.216 3.216 0 00.813 2.338 2.936 2.936 0 002.209.837m8.92-8.371a2.952 2.952 0 01.5.039 2.1 2.1 0 01.375.1v2.358a2.04 2.04 0 00-.534-.255 2.646 2.646 0 00-.852-.12 1.808 1.808 0 00-1.448.722 3.467 3.467 0 00-.592 2.223v4.99h-2.324V8.507h2.329v1.559h.038a2.729 2.729 0 01.963-1.266 2.611 2.611 0 011.545-.457m1 5.254a5.358 5.358 0 011.392-3.887 5.1 5.1 0 013.85-1.434 4.742 4.742 0 013.623 1.381 5.212 5.212 0 011.3 3.729 5.257 5.257 0 01-1.386 3.83 5.019 5.019 0 01-3.772 1.424 4.935 4.935 0 01-3.652-1.352 4.987 4.987 0 01-1.349-3.688m2.425-.077a3.535 3.535 0 00.7 2.368 2.505 2.505 0 002.011.818 2.345 2.345 0 001.934-.818 3.783 3.783 0 00.664-2.425 3.651 3.651 0 00-.688-2.411 2.389 2.389 0 00-1.929-.813 2.44 2.44 0 00-1.988.852 3.707 3.707 0 00-.707 2.43m11.2-2.416a1 1 0 00.318.785 5.426 5.426 0 001.4.717 4.767 4.767 0 011.959 1.256 2.6 2.6 0 01.563 1.689 2.715 2.715 0 01-1.068 2.239 4.558 4.558 0 01-2.9.847 6.978 6.978 0 01-1.362-.149 6.047 6.047 0 01-1.265-.38v-2.29a5.733 5.733 0 001.367.7 4 4 0 001.328.26 2.365 2.365 0 001.164-.221.79.79 0 00.375-.741 1.029 1.029 0 00-.39-.813 5.768 5.768 0 00-1.477-.765 4.564 4.564 0 01-1.829-1.213 2.655 2.655 0 01-.539-1.713 2.706 2.706 0 011.063-2.2 4.243 4.243 0 012.765-.86 6.663 6.663 0 011.164.115 5.161 5.161 0 011.078.3v2.214a4.974 4.974 0 00-1.078-.529 3.6 3.6 0 00-1.222-.221 1.781 1.781 0 00-1.034.26.824.824 0 00-.371.712m5.241 2.493a5.358 5.358 0 011.386-3.89 5.1 5.1 0 013.849-1.434 4.743 4.743 0 013.624 1.381 5.212 5.212 0 011.3 3.729 5.259 5.259 0 01-1.386 3.83 5.02 5.02 0 01-3.773 1.424 4.934 4.934 0 01-3.652-1.352 4.987 4.987 0 01-1.348-3.688m2.425-.077a3.537 3.537 0 00.7 2.368 2.506 2.506 0 002.011.818 2.345 2.345 0 001.934-.818 3.783 3.783 0 00.664-2.425 3.651 3.651 0 00-.688-2.411 2.39 2.39 0 00-1.93-.813 2.439 2.439 0 00-1.987.852 3.707 3.707 0 00-.707 2.43m15.464-3.109H99.7V18.4h-2.359v-7.988h-1.655V8.507h1.655V7.13a3.423 3.423 0 011.015-2.555 3.561 3.561 0 012.6-1 5.807 5.807 0 01.751.043 2.993 2.993 0 01.577.13v2.016a2.422 2.422 0 00-.4-.164 2.107 2.107 0 00-.664-.1 1.407 1.407 0 00-1.126.457 2.017 2.017 0 00-.394 1.356v1.194h3.469V6.283l2.339-.712v2.936h2.358v1.906h-2.358v4.629a1.951 1.951 0 00.332 1.29 1.326 1.326 0 001.044.375 1.557 1.557 0 00.486-.1 2.294 2.294 0 00.5-.231V18.3a2.737 2.737 0 01-.736.231 5.029 5.029 0 01-1.015.106 2.887 2.887 0 01-2.209-.784 3.341 3.341 0 01-.736-2.363z"
            fill="#737373"
          />
          <path fill="#f25022" d="M0 0h10.931v10.931H0z" />
          <path fill="#7fba00" d="M12.069 0H23v10.931H12.069z" />
          <path fill="#00a4ef" d="M0 12.069h10.931V23H0z" />
          <path fill="#ffb900" d="M12.069 12.069H23V23H12.069z" />
        </svg>
      </div>

      <Stack
        className="container"
        horizontalAlign="center"
        verticalAlign="center"
        verticalFill
        tokens={{
          childrenGap: 35
        }}
      >
        <img
          className="splashImage"
          src={signInImage}
          alt={translate('signin.logo')}
        />
        <Text variant="xLargePlus" styles={boldStyle} className="signinHeader">
          <FormattedMessage id="signin.header" />
        </Text>

        <Text variant="medium" className="uTextCenter signinSubHeader">
          <FormattedMessage id="signin.subheader.lead" />
        </Text>
        <Text variant="medium" className="uTextCenter signinSubHeader">
          <FormattedMessage id="signin.subheader.signin" />
        </Text>

        <PrimaryButton
          className="teamsButton"
          onClick={() => onSignIn()}
          ariaLabel={translate('signin.button.ariaLabel')}
        >
          <FormattedMessage id="signin.button" />
        </PrimaryButton>
      </Stack>
    </>
  );
}

render(): React.ReactNode {
        const { option, paraNodata, dimName, isLoadConfirm, selectedItem, swapyAxis } = this.state;
        return (
            <div className="parameter">
                <Stack horizontal className="para-filter" horizontalAlign="end">
                    <span className="para-filter-text">Top</span>
                    <Dropdown
                        selectedKey={selectedItem ? selectedItem.key : undefined}
                        onChange={this.percentNum}
                        placeholder="100%"
                        defaultSelectedKeys={[0.2]}
                        options={[
                            { key: '0.2', text: '20%' },
                            { key: '0.5', text: '50%' },
                            { key: '0.8', text: '80%' },
                            { key: '1', text: '100%' },
                        ]}
                        styles={{ dropdown: { width: 300 } }}
                        className="para-filter-percent"
                    />
                    <Dropdown
                        placeholder="Select options"
                        selectedKeys={swapyAxis}
                        onChange={this.getSwapArr}
                        multiSelect
                        options={
                            dimName.map((key, item) => {
                                return {
                                    key: key, text: dimName[item]
                                };
                            })
                        }
                        styles={{ dropdown: { width: 300 } }}
                    />
                    <PrimaryButton
                        text="Confirm"
                        onClick={this.swapReInit}
                        disabled={isLoadConfirm}
                    />
                </Stack>
                <div className="searcHyper">
                    <ReactEcharts
                        option={option}
                        style={this.chartMulineStyle}
                        // lazyUpdate={true}
                        notMerge={true} // update now
                    />
                    <div className="noneData">{paraNodata}</div>
                </div>
            </div>
        );
    }

render(): React.ReactNode {
        const { interSource, isLoadconfirmBtn, isFilter } = this.state;
        const IntermediateEvents = { 'dataZoom': this.intermediateDataZoom };

        return (
            <div>
                {/* style in para.scss */}
                <Stack horizontal horizontalAlign="end" tokens={stackTokens} className="meline intermediate">
                    {
                        isFilter
                            ?
                            <div>
                                <span className="filter-x"># Intermediate result</span>
                                <input
                                    // placeholder="point"
                                    ref={(input): any => this.pointInput = input}
                                    className="strange"
                                />
                                <span>Metric range</span>
                                <input
                                    // placeholder="range"
                                    ref={(input): any => this.minValInput = input}
                                />
                                <span className="hyphen">-</span>
                                <input
                                    // placeholder="range"
                                    ref={(input): any => this.maxValInput = input}
                                />
                                <PrimaryButton
                                    text="Confirm"
                                    onClick={this.filterLines}
                                    disabled={isLoadconfirmBtn}
                                />
                            </div>
                            :
                            null
                    }
                    {/* filter message */}
                    <Stack horizontal className="filter-toggle">
                        <span>Filter</span>
                        <Toggle onChange={this.switchTurn} />
                    </Stack>

                </Stack>
                <div className="intermediate-graph">
                    <ReactEcharts
                        option={interSource}
                        style={{ width: '100%', height: 400, margin: '0 auto' }}
                        notMerge={true} // update now
                        onEvents={IntermediateEvents}
                    />
                    <div className="xAxis"># Intermediate result</div>
                </div>
            </div>
        );
    }

render(): React.ReactNode {
        const { isHidenInfo, typeInfo, info } = this.state;
        const trialId = this.props.trialId;
        const trial = TRIALS.getTrial(trialId);
        const trialLink: string = `${MANAGER_IP}/trial-jobs/${trialId}`;
        const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
        const multiProgress = trial.info.hyperParameters === undefined ? 0 : trial.info.hyperParameters.length;
        return (
            <Stack className="openRow">
                <Stack className="openRowContent">
                    <Pivot>
                        <PivotItem headerText="Parameters" key="1" itemIcon="TestParameter">
                            {
                                EXPERIMENT.multiPhase
                                    ?
                                    <Stack className="link">
                                        {
                                            `
                                        Trails for multiphase experiment will return a set of parameters,
                                        we are listing the latest parameter in webportal.
                                        For the entire parameter set, please refer to the following "
                                        `
                                        }
                                        <a href={trialLink} rel="noopener noreferrer" target="_blank">{trialLink}</a>{`".`}
                                        <div>Current Phase: {multiProgress}.</div>
                                    </Stack>
                                    :
                                    null
                            }
                            {
                                trial.info.hyperParameters !== undefined
                                    ?
                                    <Stack id="description">
                                        <Stack className="bgHyper">
                                            <JSONTree
                                                hideRoot={true}
                                                shouldExpandNode={(): boolean => true}  // default expandNode
                                                getItemString={(): null => null}  // remove the {} items
                                                data={trial.description.parameters}
                                            />
                                        </Stack>
                                        <Stack horizontal className="copy">
                                            <PrimaryButton
                                                onClick={this.copyParams.bind(this, trial)}
                                                text="Copy as json"
                                                styles={{ root: { width: 128, marginRight: 10 } }}
                                            />
                                            {/* copy success | failed message info */}
                                            {!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
                                        </Stack>
                                    </Stack>
                                    :
                                    <Stack className="logpath">
                                        <span className="logName">Error: </span>
                                        <span className="error">{`This trial's parameters are not available.'`}</span>
                                    </Stack>
                            }
                        </PivotItem>
                        <PivotItem headerText="Log" key="2" itemIcon="M365InvoicingLogo">
                            {
                                // FIXME: this should not be handled in web UI side
                                EXPERIMENT.trainingServicePlatform !== 'local'
                                    ?
                                    <PaiTrialLog
                                        logStr={logPathRow}
                                        id={trialId}
                                        logCollection={EXPERIMENT.logCollectionEnabled}
                                    />
                                    :
                                    <TrialLog logStr={logPathRow} id={trialId} />
                            }
                        </PivotItem>
                    </Pivot>
                </Stack >
            </Stack>
        );
    }

Options: React.FC = () => {
  const [settings, setSettings] = useState(new Settings());
  const [metaData, setMetaData] = useState(new MetaData());
  const [inited, setInited] = useState(false);
  const [version, setVersion] = useState('0.0.0');
  const [checkingUpdate, setCheckingUpdate] = useState(false);
  const [token, setToken] = useState('');
  const [checkingToken, setCheckingToken] = useState(false);
  const [showDialogToken, setShowDialogToken] = useState(false);
  const [showDialogTokenError, setShowDialogTokenError] = useState(false);
  const [showDialogNotification, setShowDialogNotification] = useState(false);
  const [notificationId, setNotificationId] = useState(0);
  const [notification, setNotification] = useState('');
  const [updateStatus, setUpdateStatus] = useState(UpdateStatus.undefine);
  const [updateUrl, setUpdateUrl] = useState(
    'https://github.com/hypertrons/hypertrons-crx/releases'
  );
  const tokenCurrent = metaData.token;

  const graphOptions: IChoiceGroupOption[] = [
    {
      key: 'antv',
      text: 'Antv',
    },
    {
      key: 'echarts',
      text: 'Echarts',
    },
  ];

  const locale = settings.locale;
  const localeOptions: IChoiceGroupOption[] = [
    {
      key: 'en',
      text: 'English',
    },
    {
      key: 'zh_CN',
      text: '简体中文 (Simplified Chinese)',
    },
  ];

  useEffect(() => {
    const initMetaData = async () => {
      const tempMetaData = await loadMetaData();
      setMetaData(tempMetaData);
      if (tempMetaData.token !== '') {
        setToken(tempMetaData.token);
      }
      const notificationInformation = await getNotificationInformation();
      if (
        notificationInformation.is_published &&
        tempMetaData.idLastNotication < notificationInformation.id
      ) {
        if (locale === 'zh_CN') {
          setNotification(notificationInformation.content.zh);
        } else {
          setNotification(notificationInformation.content.en);
        }
        setNotificationId(notificationInformation.id);
        setShowDialogNotification(true);
      }
    };
    if (!inited) {
      initMetaData();
    }
  }, [inited, locale, metaData]);

  useEffect(() => {
    const initSettings = async () => {
      const temp = await loadSettings();
      setSettings(temp);
      setInited(true);
    };
    if (!inited) {
      initSettings();
    }
  }, [inited, settings]);

  const getVersion = async () => {
    let version = (await chrome.management.getSelf()).version;
    setVersion(version);
  };

  useEffect(() => {
    getVersion();
  }, [version]);

  const saveSettings = async (settings: Settings) => {
    setSettings(settings);
    await chromeSet('settings', settings.toJson());
  };

  const checkUpdateManually = async () => {
    setUpdateStatus(UpdateStatus.undefine);
    setCheckingUpdate(true);
    const [currentVersion, latestVersion, updateUrl] = await checkUpdate();
    if (compareVersion(currentVersion, latestVersion) === -1) {
      setUpdateUrl(updateUrl);
      setUpdateStatus(UpdateStatus.yes);
    } else {
      setUpdateStatus(UpdateStatus.no);
    }
    setCheckingUpdate(false);
  };

  if (!inited) {
    return <div />;
  }

  return (
    <Stack>
      {showDialogNotification && (
        <Dialog
          hidden={!showDialogNotification}
          onDismiss={() => {
            setShowDialogNotification(false);
          }}
          dialogContentProps={{
            type: DialogType.normal,
            title: getMessageByLocale(
              'global_notificationTitle',
              settings.locale
            ),
          }}
          modalProps={{
            isBlocking: true,
          }}
        >
          <Text variant="mediumPlus">{notification}</Text>
          <DialogFooter>
            <DefaultButton
              onClick={() => {
                setShowDialogNotification(false);
              }}
            >
              {getMessageByLocale('global_btn_ok', settings.locale)}
            </DefaultButton>
            <PrimaryButton
              onClick={async () => {
                metaData.idLastNotication = notificationId;
                setMetaData(metaData);
                await chromeSet('meta_data', metaData.toJson());
                setShowDialogNotification(false);
              }}
            >
              {getMessageByLocale('global_btn_disable', settings.locale)}
            </PrimaryButton>
          </DialogFooter>
        </Dialog>
      )}
      {showDialogToken && (
        <Dialog
          hidden={!showDialogToken}
          onDismiss={() => {
            setShowDialogToken(false);
          }}
          dialogContentProps={{
            type: DialogType.normal,
            title: getMessageByLocale(
              'options_token_dialog_title',
              settings.locale
            ),
          }}
          modalProps={{
            isBlocking: true,
          }}
        >
          <p style={{ fontSize: 14, color: '#6a737d', margin: 5 }}>
            {getMessageByLocale(
              'options_token_dialog_description',
              settings.locale
            )}
          </p>
          <Stack horizontal style={{ fontSize: 16, margin: 5 }}>
            <Link
              href="https://github.com/settings/tokens/new"
              target="_blank"
              underline
            >
              {getMessageByLocale(
                'options_token_dialog_message',
                settings.locale
              )}
            </Link>
          </Stack>
          {checkingToken && (
            <Spinner
              label={getMessageByLocale(
                'options_token_dialog_checking',
                settings.locale
              )}
            />
          )}
          {showDialogTokenError && (
            <MessageBar messageBarType={MessageBarType.error}>
              {getMessageByLocale(
                'options_token_dialog_error',
                settings.locale
              )}
            </MessageBar>
          )}
          <Stack
            horizontal
            horizontalAlign="space-around"
            verticalAlign="end"
            style={{ margin: '10px' }}
            tokens={{
              childrenGap: 15,
            }}
          >
            <TextField
              style={{ width: '200px' }}
              defaultValue={token}
              onChange={(e, value) => {
                if (value) {
                  setShowDialogTokenError(false);
                  setToken(value);
                }
              }}
            />
            <PrimaryButton
              disabled={checkingToken}
              onClick={async () => {
                setCheckingToken(true);
                const result = await checkIsTokenAvailabe(token);
                setCheckingToken(false);
                if ('id' in result) {
                  metaData.token = token;
                  metaData.avatar = result['avatar_url'];
                  metaData.name = result['name'];
                  metaData.id = result['id'];
                  setMetaData(metaData);
                  await chromeSet('meta_data', metaData.toJson());
                  setShowDialogToken(false);
                } else {
                  setShowDialogTokenError(true);
                }
              }}
            >
              {getMessageByLocale('global_btn_ok', settings.locale)}
            </PrimaryButton>
          </Stack>
          {tokenCurrent !== '' && (
            <DefaultButton
              onClick={async () => {
                metaData.token = '';
                metaData.avatar = '';
                metaData.name = '';
                metaData.id = '';
                setMetaData(metaData);
                await chromeSet('meta_data', metaData.toJson());
                setShowDialogToken(false);
              }}
              style={{
                width: 120,
              }}
            >
              {getMessageByLocale('options_token_btn_rmToken', settings.locale)}
            </DefaultButton>
          )}
        </Dialog>
      )}
      <Stack horizontalAlign="center" style={{ paddingBottom: '10px' }}>
        <h1>PERCEPTOR</h1>
        <sub>{`version ${version}`}</sub>
      </Stack>
      <Stack
        horizontalAlign="center"
        tokens={{
          childrenGap: 30,
        }}
      >
        <Stack.Item className="Box">
          <TooltipHost
            content={getMessageByLocale(
              'options_enable_toolTip',
              settings.locale
            )}
          >
            <Stack.Item className="Box-header">
              <h2 className="Box-title">
                {getMessageByLocale('options_enable_title', settings.locale)}
              </h2>
            </Stack.Item>
          </TooltipHost>
          <Stack
            style={{ margin: '10px 25px' }}
            tokens={{
              childrenGap: 10,
            }}
          >
            <p>
              {getMessageByLocale('options_enable_toolTip', settings.locale)}.
            </p>
            <Toggle
              label={getMessageByLocale(
                'options_enable_toggle_autoCheck',
                settings.locale
              )}
              defaultChecked={settings.isEnabled}
              onText={getMessageByLocale(
                'global_toggle_onText',
                settings.locale
              )}
              offText={getMessageByLocale(
                'global_toggle_offText',
                settings.locale
              )}
              onChange={async (e, checked) => {
                settings.isEnabled = checked;
                await saveSettings(settings);
              }}
            />
          </Stack>
        </Stack.Item>
        <Stack.Item className="Box">
          <TooltipHost
            content={getMessageByLocale(
              'options_locale_toolTip',
              settings.locale
            )}
          >
            <Stack.Item className="Box-header">
              <h2 className="Box-title">
                {getMessageByLocale('options_locale_title', settings.locale)}
              </h2>
            </Stack.Item>
          </TooltipHost>
          <Stack style={{ margin: '10px 25px' }}>
            <p>
              {getMessageByLocale('options_locale_toolTip', settings.locale)} :
            </p>
            <ChoiceGroup
              defaultSelectedKey={settings.locale}
              options={localeOptions}
              onChange={async (e, option: any) => {
                settings.locale = option.key;
                await saveSettings(settings);
              }}
            />
          </Stack>
        </Stack.Item>
        <Stack.Item className="Box">
          <TooltipHost
            content={getMessageByLocale(
              'options_components_toolTip',
              settings.locale
            )}
          >
            <Stack.Item className="Box-header">
              <h2 className="Box-title">
                {getMessageByLocale(
                  'options_components_title',
                  settings.locale
                )}
              </h2>
            </Stack.Item>
          </TooltipHost>
          <Stack
            style={{ margin: '10px 25px' }}
            tokens={{
              childrenGap: 10,
            }}
          >
            <p>
              {getMessageByLocale(
                'options_components_toolTip',
                settings.locale
              )}{' '}
              :
            </p>
            <Checkbox
              label={getMessageByLocale(
                'component_developerCollabrationNetwork_title',
                settings.locale
              )}
              defaultChecked={settings.developerNetwork}
              onChange={async (e, checked) => {
                settings.developerNetwork = checked;
                await saveSettings(settings);
              }}
            />
            <Checkbox
              label={getMessageByLocale(
                'component_projectCorrelationNetwork_title',
                settings.locale
              )}
              defaultChecked={settings.projectNetwork}
              onChange={async (e, checked) => {
                settings.projectNetwork = checked;
                await saveSettings(settings);
              }}
            />
          </Stack>
        </Stack.Item>
        <Stack.Item className="Box">
          <TooltipHost
            content={getMessageByLocale(
              'options_graphType_toolTip',
              settings.locale
            )}
          >
            <Stack.Item className="Box-header">
              <h2 className="Box-title">
                {getMessageByLocale('options_graphType_title', settings.locale)}
              </h2>
            </Stack.Item>
          </TooltipHost>
          <Stack style={{ margin: '10px 25px' }}>
            <p>
              {getMessageByLocale('options_graphType_toolTip', settings.locale)}{' '}
              :
            </p>
            <ChoiceGroup
              defaultSelectedKey={settings.graphType}
              options={graphOptions}
              onChange={async (e, option: any) => {
                settings.graphType = option.key as GraphType;
                await saveSettings(settings);
              }}
            />
          </Stack>
        </Stack.Item>
        <Stack.Item className="Box">
          <TooltipHost
            content={getMessageByLocale(
              'options_update_toolTip',
              settings.locale
            )}
          >
            <Stack.Item className="Box-header">
              <h2 className="Box-title">
                {getMessageByLocale('options_update_title', settings.locale)}
              </h2>
            </Stack.Item>
          </TooltipHost>
          <Stack
            style={{ margin: '10px 25px' }}
            tokens={{
              childrenGap: 10,
            }}
          >
            <p>
              {getMessageByLocale('options_update_toolTip', settings.locale)}.
            </p>
            <Toggle
              label={getMessageByLocale(
                'options_update_toggle_autoCheck',
                settings.locale
              )}
              defaultChecked={settings.checkForUpdates}
              onText={getMessageByLocale(
                'global_toggle_onText',
                settings.locale
              )}
              offText={getMessageByLocale(
                'global_toggle_offText',
                settings.locale
              )}
              onChange={async (e, checked) => {
                settings.checkForUpdates = checked;
                await saveSettings(settings);
              }}
            />
            {checkingUpdate && (
              <Stack horizontalAlign="start">
                <Spinner
                  label={getMessageByLocale(
                    'options_update_checking',
                    settings.locale
                  )}
                />
              </Stack>
            )}
            {updateStatus === UpdateStatus.yes && (
              <MessageBar
                messageBarType={MessageBarType.success}
                isMultiline={false}
              >
                {getMessageByLocale(
                  'options_update_btn_updateStatusYes',
                  settings.locale
                )}
                <Link href={updateUrl} target="_blank" underline>
                  {getMessageByLocale(
                    'options_update_btn_getUpdate',
                    settings.locale
                  )}
                </Link>
              </MessageBar>
            )}
            {updateStatus === UpdateStatus.no && (
              <MessageBar
                messageBarType={MessageBarType.info}
                isMultiline={false}
              >
                {getMessageByLocale(
                  'options_update_btn_updateStatusNo',
                  settings.locale
                )}
              </MessageBar>
            )}
            <DefaultButton
              style={{
                width: 120,
              }}
              disabled={checkingUpdate}
              onClick={async () => {
                await checkUpdateManually();
              }}
            >
              {getMessageByLocale(
                'options_update_btn_checkUpdate',
                settings.locale
              )}
            </DefaultButton>
          </Stack>
        </Stack.Item>
        <Stack.Item className="Box">
          <TooltipHost
            content={getMessageByLocale(
              'options_token_toolTip',
              settings.locale
            )}
          >
            <Stack.Item className="Box-header">
              <h2 className="Box-title">
                {getMessageByLocale('options_token_title', settings.locale)}
              </h2>
            </Stack.Item>
          </TooltipHost>
          <Stack
            style={{ margin: '10px 25px' }}
            tokens={{
              childrenGap: 10,
            }}
          >
            <p>
              {getMessageByLocale('options_token_toolTip', settings.locale)} :
            </p>
            {tokenCurrent !== '' && (
              <Stack
                horizontal
                verticalAlign="center"
                style={{
                  margin: '5px',
                  padding: '3px',
                  width: '300px',
                  boxShadow: '4px 4px 10px rgba(0, 0, 0, 0.2)',
                }}
                tokens={{
                  childrenGap: 5,
                }}
              >
                <Image
                  width={75}
                  height={75}
                  src={metaData.avatar}
                  imageFit={ImageFit.centerCover}
                />
                <Text
                  variant="large"
                  style={{
                    marginLeft: 25,
                    maxWidth: 200,
                    wordWrap: 'break-word',
                  }}
                >
                  {metaData.name}
                </Text>
              </Stack>
            )}
            <DefaultButton
              onClick={() => {
                setShowDialogToken(true);
              }}
              style={{
                width: 120,
              }}
            >
              {getMessageByLocale(
                'options_token_btn_setToken',
                settings.locale
              )}
            </DefaultButton>
          </Stack>
        </Stack.Item>
        <Stack.Item className="Box">
          <TooltipHost
            content={getMessageByLocale(
              'options_about_toolTip',
              settings.locale
            )}
          >
            <Stack.Item className="Box-header">
              <h2 className="Box-title">
                {getMessageByLocale('options_about_title', settings.locale)}
              </h2>
            </Stack.Item>
          </TooltipHost>
          <Stack style={{ margin: '10px 25px' }}>
            <p>
              {getMessageByLocale('options_about_description', settings.locale)}
            </p>
            <p>
              {getMessageByLocale(
                'options_about_description_website',
                settings.locale
              )}
            </p>
            <Link href={HYPERTRONS_CRX_WEBSITE} target="_blank" underline>
              {HYPERTRONS_CRX_WEBSITE}
            </Link>
          </Stack>
        </Stack.Item>
      </Stack>
    </Stack>
  );
}

NewSiteScriptPanel = (props: INewSiteScriptPanelProps) => {

    const [appContext, action] = useAppContext<IApplicationState, ActionType>();
    // Get services instances
    const siteScriptSchemaService = appContext.serviceScope.consume(SiteScriptSchemaServiceKey);
    const siteDesignsService = appContext.serviceScope.consume(SiteDesignsServiceKey);
    const [needsArguments, setNeedsArguments] = useState<boolean>(false);
    const [creationArgs, setCreationArgs] = useState<ICreateArgs>({ from: "BLANK" });
    const [fromWebArgs, setFromWebArgs] = useState<IGetSiteScriptFromWebOptions>(getDefaultFromWebArgs());
    const [selectedSample, setSelectedSample] = useState<ISiteScriptSample>(null);

    useEffect(() => {
        setCreationArgs({ from: "BLANK" });
        setNeedsArguments(false);
        setFromWebArgs(getDefaultFromWebArgs());
    }, [props.isOpen]);

    const onCancel = () => {
        if (props.onCancel) {
            props.onCancel();
        }
    };

    const onScriptAdded = async () => {
        try {
            let newSiteScriptContent: ISiteScriptContent = null;
            let fromExistingResult: IGetSiteScriptFromExistingResourceResult = null;
            switch (creationArgs.from) {
                case "BLANK":
                    newSiteScriptContent = siteScriptSchemaService.getNewSiteScript();
                    break;
                case "WEB":
                    fromExistingResult = await siteDesignsService.getSiteScriptFromWeb(creationArgs.webUrl, fromWebArgs);
                    newSiteScriptContent = fromExistingResult.JSON;
                    break;
                case "LIST":
                    fromExistingResult = await siteDesignsService.getSiteScriptFromList(creationArgs.listUrl);
                    newSiteScriptContent = fromExistingResult.JSON;
                    break;
                case "SAMPLE":
                    if (selectedSample) {
                        try {
                            const jsonWithIgnoredComments = selectedSample.jsonContent.replace(/\/\*(.*)\*\//g,'');
                            newSiteScriptContent = JSON.parse(jsonWithIgnoredComments);
                        } catch (error) {
                            action("SET_USER_MESSAGE", {
                                userMessage: {
                                    message: "The JSON of this site script sample is unfortunately invalid... Please reach out to the maintainer to report this issue",
                                    messageType: MessageBarType.error
                                }
                            });
                        }

                    } else {
                        console.error("The sample JSON is not defined.");
                    }
                    break;
            }

            const siteScript: ISiteScript = {
                Id: null,
                Title: null,
                Description: null,
                Version: 1,
                Content: newSiteScriptContent
            };
            action("EDIT_SITE_SCRIPT", { siteScript } as IEditSiteScriptActionArgs);
        } catch (error) {
            console.error(error);
        }
    };

    const onChoiceClick = (createArgs: ICreateArgs) => {
        setCreationArgs(createArgs);
        switch (createArgs.from) {
            case "BLANK":
                onScriptAdded();
                break;
            case "LIST":
                setNeedsArguments(true);
                break;
            case "WEB":
                setNeedsArguments(true);
                break;
            case "SAMPLE":
                setNeedsArguments(true);
                break;
        }
    };

    const renderFromWebArgumentsForm = () => {
        return <Stack tokens={{ childrenGap: 8 }}>
            <SitePicker label="Site" onSiteSelected={webUrl => {
                setCreationArgs({ ...creationArgs, webUrl });
            }} serviceScope={appContext.serviceScope} />
            <ListPicker serviceScope={appContext.serviceScope}
                webUrl={creationArgs.webUrl}
                label="Include lists"
                multiselect
                onListsSelected={(includeLists) => setFromWebArgs({ ...fromWebArgs, includeLists: !includeLists ? [] : includeLists.map(l => l.webRelativeUrl) })}
            />
            <div className={styles.toggleRow}>
                <div className={styles.column8}>Include Branding</div>
                <div className={styles.column4}>
                    <Toggle checked={fromWebArgs && fromWebArgs.includeBranding} onChange={(_, includeBranding) => setFromWebArgs({ ...fromWebArgs, includeBranding })} />
                </div>
            </div>
            <div className={styles.toggleRow}>
                <div className={styles.column8}>Include Regional settings</div>
                <div className={styles.column4}>
                    <Toggle checked={fromWebArgs && fromWebArgs.includeRegionalSettings} onChange={(_, includeRegionalSettings) => setFromWebArgs({ ...fromWebArgs, includeRegionalSettings })} />
                </div>
            </div>
            <div className={styles.toggleRow}>
                <div className={styles.column8}>Include Site external sharing capability</div>
                <div className={styles.column4}>
                    <Toggle checked={fromWebArgs && fromWebArgs.includeSiteExternalSharingCapability} onChange={(_, includeSiteExternalSharingCapability) => setFromWebArgs({ ...fromWebArgs, includeSiteExternalSharingCapability })} />
                </div>
            </div>
            <div className={styles.toggleRow}>
                <div className={styles.column8}>Include theme</div>
                <div className={styles.column4}>
                    <Toggle checked={fromWebArgs && fromWebArgs.includeTheme} onChange={(_, includeTheme) => setFromWebArgs({ ...fromWebArgs, includeTheme })} />
                </div>
            </div>
            <div className={styles.toggleRow}>
                <div className={styles.column8}>Include links to exported items</div>
                <div className={styles.column4}>
                    <Toggle checked={fromWebArgs && fromWebArgs.includeLinksToExportedItems} onChange={(_, includeLinksToExportedItems) => setFromWebArgs({ ...fromWebArgs, includeLinksToExportedItems })} />
                </div>
            </div>
        </Stack>;
    };

    const renderFromListArgumentsForm = () => {
        return <Stack tokens={{ childrenGap: 8 }}>
            <SitePicker label="Site" onSiteSelected={webUrl => {
                setCreationArgs({ ...creationArgs, webUrl });
            }} serviceScope={appContext.serviceScope} />
            <ListPicker serviceScope={appContext.serviceScope}
                webUrl={creationArgs.webUrl}
                label="List"
                onListSelected={(list) => setCreationArgs({ ...creationArgs, listUrl: list && list.url })}
            />
        </Stack>;
    };

    const renderSamplePicker = () => {
        return <SiteScriptSamplePicker
            selectedSample={selectedSample}
            onSelectedSample={setSelectedSample} />;
    };

    const renderArgumentsForm = () => {
        if (!needsArguments) {
            return null;
        }

        switch (creationArgs.from) {
            case "LIST":
                return renderFromListArgumentsForm();
            case "WEB":
                return renderFromWebArgumentsForm();
            case "SAMPLE":
                return renderSamplePicker();
            default:
                return null;
        }
    };

    const validateArguments = () => {
        if (!creationArgs) {
            return false;
        }

        switch (creationArgs.from) {
            case "SAMPLE":
                return !!(selectedSample && selectedSample.jsonContent);
            default:
                return true;
        }
    };

    const getPanelHeaderText = () => {
        if (!needsArguments) {
            return "Add a new Site Script";
        }

        switch (creationArgs.from) {
            case "LIST":
                return "Add a new Site Script from existing list";
            case "WEB":
                return "Add a new Site Script from existing site";
            case "SAMPLE":
                return "Add a new Site Script from samples";
            default:
                return "";
        }
    };

    const panelType = creationArgs.from == "SAMPLE" ? PanelType.extraLarge : PanelType.smallFixedFar;
    return <Panel type={panelType}
        headerText={getPanelHeaderText()}
        isOpen={props.isOpen}
        onDismiss={onCancel}
        onRenderFooterContent={() => needsArguments && <div className={styles.panelFooter}>
            <Stack horizontalAlign="end" horizontal tokens={{ childrenGap: 25 }}>
                <PrimaryButton text="Add Site Script" onClick={onScriptAdded} disabled={!validateArguments()} />
                <DefaultButton text="Cancel" onClick={onCancel} />
            </Stack>
        </div>}>
        <div className={styles.NewSiteScriptPanel}>
            {!needsArguments && <Stack tokens={{ childrenGap: 20 }}>
                <CompoundButton
                    iconProps={{ iconName: "PageAdd" }}
                    text="Blank"
                    secondaryText="Create a new blank Site Script"
                    onClick={() => onChoiceClick({ from: "BLANK" })}
                />
                <CompoundButton
                    iconProps={{ iconName: "SharepointLogoInverse" }}
                    text="From Site"
                    secondaryText="Create a new Site Script from an existing site"
                    onClick={() => onChoiceClick({ from: "WEB" })}
                />
                <CompoundButton
                    iconProps={{ iconName: "PageList" }}
                    text="From List"
                    secondaryText="Create a new Site Script from an existing list"
                    onClick={() => onChoiceClick({ from: "LIST" })}
                />
                <CompoundButton
                    iconProps={{ iconName: "ProductCatalog" }}
                    text="From Sample"
                    secondaryText="Create a new Site Script from a sample"
                    onClick={() => onChoiceClick({ from: "SAMPLE" })}
                />
            </Stack>}
            {renderArgumentsForm()}
        </div>
    </Panel>;
}

function MeetingPageComponent(props: MeetingPageProps) {
  const [validationEnabled, setValidationEnabled] = useState(false);

  function onSubjectChanged(
    evt: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
    newValue: string | undefined
  ) {
    // The meeting objects are small, cloning is cheap enough
    // Normally would use immutable records or similar to avoid overhead.
    const nextMeeting = _.cloneDeep(props.meeting);
    nextMeeting.subject = newValue ?? '';
    props.setMeeting(nextMeeting);
  }

  function onStartDateSelected(date?: Moment) {
    const nextMeeting = _.cloneDeep(props.meeting);
    nextMeeting.startDateTime = date ?? nextMeeting.startDateTime;

    // If start >= end, adjust to be the same delta as before from the start time
    if (nextMeeting.startDateTime.isSameOrAfter(nextMeeting.endDateTime)) {
      const existingDelta = moment(props.meeting.endDateTime).diff(
        moment(props.meeting.startDateTime)
      );
      const newEndDateTime = moment(nextMeeting.startDateTime).add(
        existingDelta
      );
      if (nextMeeting.startDateTime.isSameOrAfter(newEndDateTime)) {
        newEndDateTime.add(existingDelta);
      }
      nextMeeting.endDateTime = newEndDateTime;
    }

    props.setMeeting(nextMeeting);
  }

  function onEndDateSelected(date?: Moment) {
    const nextMeeting = _.cloneDeep(props.meeting);
    const newEndDateTime = date ?? nextMeeting.endDateTime;

    // Allow the change only if it maintains start < end
    if (!nextMeeting.startDateTime.isAfter(newEndDateTime)) {
      nextMeeting.endDateTime = newEndDateTime;
    }

    props.setMeeting(nextMeeting);
  }

  function onCreate() {
    if (!!props.validationFailures.invalidTitle) {
      setValidationEnabled(true);
      return;
    }

    props.createMeeting(props.meeting);
  }

  if (props.creationInProgress) {
    return (
      <div className="spinnerContainer">
        <Spinner size={SpinnerSize.large} />
      </div>
    );
  }

  return (
    <div className="newMeetingContainer">
      <Stack
        className="container"
        verticalFill
        tokens={{
          childrenGap: 35
        }}
      >
        <Stack horizontal tokens={{ childrenGap: 15 }}>
          <StackItem grow>
            <FontIcon iconName="Calendar" className={meetingIconClass} />
            <Text variant="xLarge" styles={boldStyle}>
              <FormattedMessage id="meetingPage.header" />
            </Text>
          </StackItem>
          <StackItem align="end" className="newMeetingButtons">
            <Stack horizontal tokens={{ childrenGap: 10 }}>
              <PrimaryButton
                className="teamsButton"
                disabled={props.creationInProgress}
                onClick={() => onCreate()}
                ariaLabel={translate('meetingPage.create.ariaLabel')}
              >
                <FormattedMessage id="meetingPage.create" />
              </PrimaryButton>
              <DefaultButton
                className="teamsButtonInverted"
                disabled={props.creationInProgress}
                onClick={() => props.cancel()}
                ariaLabel={translate('meetingPage.cancel.ariaLabel')}
              >
                <FormattedMessage id="meetingPage.cancel" />
              </DefaultButton>
            </Stack>
          </StackItem>
        </Stack>
        <Stack horizontal>
          <StackItem className="newMeetingInputIcon">
            <FontIcon iconName="Edit" className={inputIconClass} />
          </StackItem>
          <StackItem grow>
            <TextField
              className="newMeetingInput"
              placeholder={translate('meetingPage.title.input')}
              value={props.meeting?.subject}
              underlined
              onChange={onSubjectChanged}
              errorMessage={
                validationEnabled
                  ? props.validationFailures.invalidTitle
                  : undefined
              }
            />
          </StackItem>
        </Stack>

        <div className="newMeetingDatePickerContainer">
          <FontIcon iconName="Clock" className={inputIconClass} />
          <div className="newMeetingPicker">
            <DateTimePicker
              dateTime={props.meeting.startDateTime}
              minDate={moment()}
              onTimeUpdated={onStartDateSelected}
              includeDuration={false}
              iconName="ReplyAlt"
            />
            <DateTimePicker
              dateTime={props.meeting.endDateTime}
              minDate={props.meeting.startDateTime}
              onTimeUpdated={onEndDateSelected}
              includeDuration={true}
            />
          </div>
        </div>

        {/* MOBILE BUTTON GROUP */}
      </Stack>
      <StackItem className="newMeetingButtonsMobile">
        <Stack horizontal tokens={{ childrenGap: 10 }}>
          <PrimaryButton
            className="teamsButton teamsButtonFullWidth"
            disabled={props.creationInProgress}
            onClick={() => onCreate()}
            ariaLabel={translate('meetingPage.create.ariaLabel')}
          >
            <FormattedMessage id="meetingPage.create" />
          </PrimaryButton>
          <DefaultButton
            className="teamsButtonInverted teamsButtonFullWidth"
            disabled={props.creationInProgress}
            onClick={() => props.cancel()}
            ariaLabel={translate('meetingPage.cancel.ariaLabel')}
          >
            <FormattedMessage id="meetingPage.cancel" />
          </DefaultButton>
        </Stack>
      </StackItem>
    </div>
  );
}

// get IColumn[]
    // when user click [Add Column] need to use the function
    private initTableColumnList = (columnList: string[]): IColumn[] => {
        // const { columnList } = this.props;
        // [supportCustomizedTrial: true]
        const supportCustomizedTrial = (EXPERIMENT.multiPhase === true) ? false : true;
        const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
        const showColumn: IColumn[] = [];
        for (const item of columnList) {
            const paraColumn = item.match(/ \(search space\)$/);
            let result;
            if (paraColumn !== null) {
                result = paraColumn.input;
            }
            switch (item) {
                case 'Trial No.':
                    showColumn.push(this.SequenceIdColumnConfig);
                    break;
                case 'ID':
                    showColumn.push(this.IdColumnConfig);
                    break;
                case 'Start Time':
                    showColumn.push(this.StartTimeColumnConfig);
                    break;
                case 'End Time':
                    showColumn.push(this.EndTimeColumnConfig);
                    break;
                case 'Duration':
                    showColumn.push(this.DurationColumnConfig);
                    break;
                case 'Status':
                    showColumn.push(this.StatusColumnConfig);
                    break;
                case 'Intermediate result':
                    showColumn.push(this.IntermediateCountColumnConfig);
                    break;
                case 'Default':
                    showColumn.push(this.AccuracyColumnConfig);
                    break;
                case 'Operation':
                    showColumn.push({
                        name: 'Operation',
                        key: 'operation',
                        fieldName: 'operation',
                        minWidth: 160,
                        maxWidth: 200,
                        isResizable: true,
                        className: 'detail-table',
                        onRender: (record: any) => {
                            const trialStatus = record.status;
                            const flag: boolean = (trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN') ? false : true;
                            return (
                                <Stack className="detail-button" horizontal>
                                    {/* see intermediate result graph */}
                                    <PrimaryButton
                                        className="detail-button-operation"
                                        title="Intermediate"
                                        onClick={this.showIntermediateModal.bind(this, record.id)}
                                    >
                                        {LineChart}
                                    </PrimaryButton>
                                    {/* kill job */}
                                    {
                                        flag
                                            ?
                                            <PrimaryButton className="detail-button-operation" disabled={true} title="kill">
                                                {blocked}
                                            </PrimaryButton>
                                            :
                                            <KillJob trial={record} />
                                    }
                                    {/* Add a new trial-customized trial */}
                                    {
                                        supportCustomizedTrial
                                            ?
                                            <PrimaryButton
                                                className="detail-button-operation"
                                                title="Customized trial"
                                                onClick={this.setCustomizedTrial.bind(this, record.id)}
                                                disabled={disabledAddCustomizedTrial}
                                            >
                                                {copy}
                                            </PrimaryButton>
                                            :
                                            null
                                    }
                                </Stack>
                            );
                        },
                    });
                    break;
                case (result):
                    // remove SEARCH_SPACE title
                    // const realItem = item.replace(' (search space)', '');
                    showColumn.push({
                        name: item.replace(' (search space)', ''),
                        key: item,
                        fieldName: item,
                        minWidth: 150,
                        onRender: (record: TableRecord) => {
                            const eachTrial = TRIALS.getTrial(record.id);
                            return (
                                <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>
                            );
                        },
                    });
                    break;
                default:
                    showColumn.push({
                        name: item,
                        key: item,
                        fieldName: item,
                        minWidth: 100,
                        onRender: (record: TableRecord) => {
                            const accDictionary = record.accDictionary;
                            let other = '';
                            if (accDictionary !== undefined) {
                                other = accDictionary[item].toString();
                            }
                            return (
                                <div>{other}</div>
                            );
                        }
                    });
            }
        }
        return showColumn;
    }

render(): React.ReactNode {
        const { closeDrawer, activeTab } = this.props;
        const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;

        return (
            <Stack>
                <Panel
                    isOpen={true}
                    hasCloseButton={false}
                    isFooterAtBottom={true}
                >
                    <div className="log-tab-body">
                        <Pivot
                            selectedKey={activeTab}
                            style={{ minHeight: 190, paddingTop: '16px' }}
                        >
                            {/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
                            <PivotItem headerText="Dispatcher Log" key="dispatcher">
                                <MonacoHTML
                                    content={dispatcherLogStr || 'Loading...'}
                                    loading={isLoading}
                                    // paddingTop[16] + tab[44] + button[32]
                                    height={logDrawerHeight - 92}
                                />
                                <Stack horizontal className="buttons">
                                    <StackItem grow={12} className="download">
                                        <PrimaryButton text="Download" onClick={this.downloadDispatcher} />
                                    </StackItem>
                                    <StackItem grow={12} className="close">
                                        <DefaultButton text="Close" onClick={closeDrawer} />
                                    </StackItem>
                                </Stack>
                            </PivotItem>
                            <PivotItem headerText="NNIManager Log" key="nnimanager">
                                {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
                                <MonacoHTML
                                    content={nniManagerLogStr || 'Loading...'}
                                    loading={isLoading}
                                    height={logDrawerHeight - 92}
                                />
                                <Stack horizontal className="buttons">
                                    <StackItem grow={12} className="download">
                                        <PrimaryButton text="Download" onClick={this.downloadNNImanager} />
                                    </StackItem>
                                    <StackItem grow={12} className="close">
                                        <DefaultButton text="Close" onClick={closeDrawer} />
                                    </StackItem>
                                </Stack>
                            </PivotItem>
                        </Pivot>
                    </div>
                </Panel>
            </Stack>
        );
    }

render(): React.ReactNode {
        const { isVisble, closeExpDrawer } = this.props;
        const { experiment, expDrawerHeight } = this.state;
        return (
            <Stack className="logDrawer">
                <Panel
                    isOpen={isVisble}
                    hasCloseButton={false}
                    styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
                >
                    <Pivot style={{ minHeight: 190 }} className="log-tab-body">
                        <PivotItem headerText="Experiment Parameters">
                            <div className="just-for-log">
                                <MonacoEditor
                                    width="100%"
                                    // 92 + marginTop[16]
                                    height={expDrawerHeight - 108}
                                    language="json"
                                    value={experiment}
                                    options={DRAWEROPTION}
                                />
                            </div>
                            <Stack horizontal className="buttons">
                                <StackItem grow={50} className="download">
                                    <PrimaryButton
                                        text="Download"
                                        onClick={this.downExperimentParameters}
                                    />
                                </StackItem>
                                <StackItem grow={50} className="close">
                                    <DefaultButton
                                        text="Close"
                                        onClick={closeExpDrawer}
                                    />
                                </StackItem>
                            </Stack>
                        </PivotItem>
                    </Pivot>
                </Panel>
            </Stack>
        );
    }