Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Commit

Permalink
fix: add placeholders for empty lists (#616)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattmazzola
mattmazzola authored Jun 19, 2018
1 parent ec3c672 commit 920f6f9
Show file tree
Hide file tree
Showing 5 changed files with 347 additions and 240 deletions.
44 changes: 34 additions & 10 deletions src/routes/Apps/App/Actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,8 @@ class Actions extends React.Component<Props, ComponentState> {

render() {
// TODO: Look to move this up to the set state calls instead of forcing it to be on every render
const actions = this.getFilteredActions();
const { actions } = this.props
const computedActions = this.getFilteredActions()
return (
<div className="cl-page">
<span className={OF.FontClassNames.xxLarge}>
Expand Down Expand Up @@ -156,15 +157,38 @@ class Actions extends React.Component<Props, ComponentState> {
componentRef={component => this.newActionButton = component}
/>
</div>
<OF.SearchBox
className={OF.FontClassNames.mediumPlus}
onChange={searchString => this.onChangeSearchString(searchString)}
onSearch={searchString => this.onChangeSearchString(searchString)}
/>
<ActionDetailsList
actions={actions}
onSelectAction={this.onSelectAction}
/>
{actions.length === 0
? <div className="cl-page-placeholder">
<div className="cl-page-placeholder__content">
<div className={`cl-page-placeholder__description ${OF.FontClassNames.xxLarge}`}>Create an Action</div>
<OF.PrimaryButton
iconProps={{
iconName: "Add"
}}
disabled={this.props.editingPackageId !== this.props.app.devPackageId}
onClick={() => this.onClickOpenActionEditor()}
ariaDescription={this.props.intl.formatMessage({
id: FM.ACTIONS_CREATEBUTTONARIADESCRIPTION,
defaultMessage: 'Create a New Action'
})}
text={this.props.intl.formatMessage({
id: FM.ACTIONS_CREATEBUTTONTITLE,
defaultMessage: 'New Action'
})}
/>
</div>
</div>
: <React.Fragment>
<OF.SearchBox
className={OF.FontClassNames.mediumPlus}
onChange={searchString => this.onChangeSearchString(searchString)}
onSearch={searchString => this.onChangeSearchString(searchString)}
/>
<ActionDetailsList
actions={computedActions}
onSelectAction={this.onSelectAction}
/>
</React.Fragment>}

<ActionCreatorEditor
app={this.props.app}
Expand Down
80 changes: 52 additions & 28 deletions src/routes/Apps/App/Entities.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,8 @@ class Entities extends React.Component<Props, ComponentState> {
})
}
render() {
let entityItems = this.getFilteredAndSortedEntities()
const { entities } = this.props
const computedEntities = this.getFilteredAndSortedEntities()

return (
<div className="cl-page">
Expand All @@ -235,7 +236,7 @@ class Entities extends React.Component<Props, ComponentState> {
id={FM.ENTITIES_SUBTITLE}
defaultMessage="Entities hold values from the user or are set by code, and are stored in the bot's memory to track state"
/>
</span>
</span>
:
<span className="cl-errorpanel">Editing is only allowed in Master Tag</span>
}
Expand All @@ -254,33 +255,56 @@ class Entities extends React.Component<Props, ComponentState> {
})}
componentRef={component => this.newEntityButton = component}
/>
<EntityCreatorEditor
app={this.props.app}
editingPackageId={this.props.editingPackageId}
open={this.state.createEditModalOpen}
entity={this.state.entitySelected}
handleClose={this.handleCloseCreateModal}
handleDelete={this.handleDelete}
entityTypeFilter={null}
/>
</div>
<OF.SearchBox
className={OF.FontClassNames.mediumPlus}
onChange={(newValue) => this.onChange(newValue)}
onSearch={(newValue) => this.onChange(newValue)}
/>
<OF.DetailsList
className={OF.FontClassNames.mediumPlus}
items={entityItems}
columns={this.state.columns}
checkboxVisibility={OF.CheckboxVisibility.hidden}
onRenderItemColumn={(entity: EntityBase, i, column: IRenderableColumn) =>
column.render(entity, this)}
onRenderDetailsHeader={(detailsHeaderProps: OF.IDetailsHeaderProps,
defaultRender: OF.IRenderFunction<OF.IDetailsHeaderProps>) =>
onRenderDetailsHeader(detailsHeaderProps, defaultRender)}
onColumnHeaderClick={this.onClickColumnHeader}
onActiveItemChanged={entity => this.onSelectEntity(entity)}
{entities.length === 0
? <div className="cl-page-placeholder">
<div className="cl-page-placeholder__content">
<div className={`cl-page-placeholder__description ${OF.FontClassNames.xxLarge}`}>Create an Entity</div>
<OF.PrimaryButton
iconProps={{
iconName: "Add"
}}
disabled={this.props.editingPackageId !== this.props.app.devPackageId}
onClick={this.handleOpenCreateModal}
ariaDescription={this.props.intl.formatMessage({
id: FM.ENTITIES_CREATEBUTTONARIALDESCRIPTION,
defaultMessage: 'Create a New Entity'
})}
text={this.props.intl.formatMessage({
id: FM.ENTITIES_CREATEBUTTONTEXT,
defaultMessage: 'New Entity'
})}
/>
</div>
</div>
: <React.Fragment>
<OF.SearchBox
className={OF.FontClassNames.mediumPlus}
onChange={(newValue) => this.onChange(newValue)}
onSearch={(newValue) => this.onChange(newValue)}
/>
<OF.DetailsList
className={OF.FontClassNames.mediumPlus}
items={computedEntities}
columns={this.state.columns}
checkboxVisibility={OF.CheckboxVisibility.hidden}
onRenderItemColumn={(entity: EntityBase, i, column: IRenderableColumn) =>
column.render(entity, this)}
onRenderDetailsHeader={(detailsHeaderProps: OF.IDetailsHeaderProps,
defaultRender: OF.IRenderFunction<OF.IDetailsHeaderProps>) =>
onRenderDetailsHeader(detailsHeaderProps, defaultRender)}
onColumnHeaderClick={this.onClickColumnHeader}
onActiveItemChanged={entity => this.onSelectEntity(entity)}
/>
</React.Fragment>}
<EntityCreatorEditor
app={this.props.app}
editingPackageId={this.props.editingPackageId}
open={this.state.createEditModalOpen}
entity={this.state.entitySelected}
handleClose={this.handleCloseCreateModal}
handleDelete={this.handleDelete}
entityTypeFilter={null}
/>
</div>
);
Expand Down
12 changes: 12 additions & 0 deletions src/routes/Apps/App/Index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,15 @@
margin-top: 3px;
}

.cl-page-placeholder {
min-height: 20em;
display: grid;
justify-content: center;
align-content: center;
text-align: center;
}

.cl-page-placeholder__description {
margin-bottom: 1em;
}

Loading

0 comments on commit 920f6f9

Please sign in to comment.