in 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>
);
}