public render()

in app/templates/src/hub/hub.tsx [31:109]


  public render(): JSX.Element {
    return (
      <Page className="flex-grow">
        <Header
          title="Hello Hub!"
          commandBarItems={[
            {
              id: "panel-button",
              text: "Open Panel",
              iconProps: {
                iconName: "World"
              },
              onActivate: this.openPanel.bind(this)
            }
          ]}
        />
        <ZeroData
          imagePath="../../img/world.png"
          imageAltText="World image"
          primaryText="Hot Reload and Debug!"
          secondaryText={
            <span>
              Check out the{" "}
              <a
                rel="nofollow noopener"
                target="_blank"
                href="https://github.com/microsoft/azure-devops-extension-hot-reload-and-debug"
              >
                repo
              </a>{" "}
              to see how hot reload and debugging works.
            </span>
          }
          actionText="Open Dialog"
          actionType={ZeroDataActionType.ctaButton}
          onActionClick={this.openDialog.bind(this)}
        />
        {this.state.dialogShown && (
          <Dialog
            className="flex-wrap"
            titleProps={{ text: "Hello Dialog!" }}
            onDismiss={this.closeDialog.bind(this)}
            footerButtonProps={[
              {
                text: "Close",
                primary: true,
                onClick: this.closeDialog.bind(this)
              }
            ]}
          >
            <Image
              className="content"
              alt="World image"
              src="../../img/world.png"
            />
          </Dialog>
        )}
        {this.state.panelShown && (
          <Panel
            titleProps={{ text: "Hello Panel!" }}
            onDismiss={this.closePanel.bind(this)}
            footerButtonProps={[
              {
                text: "close",
                primary: true,
                onClick: this.closePanel.bind(this)
              }
            ]}
          >
            <Image
              className="content"
              alt="World image"
              src="../../img/world.png"
            />
          </Panel>
        )}
      </Page>
    );
  }