Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00
Code Issues Projects Releases Wiki Activity

fix: Clean up the UI with empty states

Browse Source
This commit is contained in:
ivaosthu 2019-05-04 06:19:21 +02:00
parent 4393aeedd3
commit 7866a7e844
3 changed files with 72 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/component/application/application-list-component.js
View File

@ -1,8 +1,23 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { ProgressBar, Card } from 'react-mdl'; import { ProgressBar, Card, CardTitle, CardText, Icon, Grid, Cell } from 'react-mdl';
import { AppsLinkList, styles as commonStyles } from '../common'; import { AppsLinkList, styles as commonStyles } from '../common';
const Empty = () => (
<React.Fragment>
<CardText style={{ textAlign: 'center' }}>
<Icon name="warning" style={{ fontSize: '5em' }} /> <br />
<br />
Oh snap, it does not seem like you have connected any applications. To connect your application to Unleash
you will require a Client SDK.
<br />
<br />
You can read more about the available Client SDKs in the{' '}
<a href="https://unleash.github.io/docs/client_sdk">documentation.</a>
</CardText>
</React.Fragment>
);
class ClientStrategies extends Component { class ClientStrategies extends Component {
static propTypes = { static propTypes = {
applications: PropTypes.array, applications: PropTypes.array,
@ -20,8 +35,8 @@ class ClientStrategies extends Component {
return <ProgressBar indeterminate />; return <ProgressBar indeterminate />;
} }
return ( return (
<Card className={commonStyles.fullwidth}> <Card shadow={0} className={commonStyles.fullwidth}>
<AppsLinkList apps={applications} /> {applications.length > 0 ? <AppsLinkList apps={applications} /> : <Empty />}
</Card> </Card>
); );
} }

28
frontend/src/component/feature/list-component.jsx
View File

@ -110,18 +110,22 @@ export default class FeatureListComponent extends React.Component {
</CardActions> </CardActions>
<hr /> <hr />
<List> <List>
{features.map((feature, i) => ( {features.length > 0 ? (
<Feature features.map((feature, i) => (
key={i} <Feature
settings={settings} key={i}
metricsLastHour={featureMetrics.lastHour[feature.name]} settings={settings}
metricsLastMinute={featureMetrics.lastMinute[feature.name]} metricsLastHour={featureMetrics.lastHour[feature.name]}
feature={feature} metricsLastMinute={featureMetrics.lastMinute[feature.name]}
toggleFeature={toggleFeature} feature={feature}
revive={revive} toggleFeature={toggleFeature}
hasPermission={hasPermission} revive={revive}
/> hasPermission={hasPermission}
))} />
))
) : (
<p style={{ textAlign: 'center', marginTop: '50px', color: 'gray' }}>Empty list of feature toggles</p>
)}
</List> </List>
</Card> </Card>
</div> </div>

78
frontend/src/component/strategies/list-component.jsx
View File

@ -2,8 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl'; import { List, ListItem, ListItemContent, IconButton, Grid, Cell, Card } from 'react-mdl';
import { HeaderTitle } from '../common'; import { HeaderTitle, styles as commonStyles } from '../common';
import { CREATE_STRATEGY, DELETE_STRATEGY } from '../../permissions'; import { CREATE_STRATEGY, DELETE_STRATEGY } from '../../permissions';
class StrategiesListComponent extends Component { class StrategiesListComponent extends Component {
@ -23,45 +23,43 @@ class StrategiesListComponent extends Component {
const { strategies, removeStrategy, hasPermission } = this.props; const { strategies, removeStrategy, hasPermission } = this.props;
return ( return (
<Grid className="mdl-color--white"> <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
<Cell col={12}> <HeaderTitle
<HeaderTitle title="Strategies"
title="Strategies" actions={
actions={ hasPermission(CREATE_STRATEGY) ? (
hasPermission(CREATE_STRATEGY) ? ( <IconButton
<IconButton raised
raised name="add"
name="add" onClick={() => this.props.history.push('/strategies/create')}
onClick={() => this.props.history.push('/strategies/create')} title="Add new strategy"
title="Add new strategy" />
/>
) : (
''
)
}
/>
<List>
{strategies.length > 0 ? (
strategies.map((strategy, i) => (
<ListItem key={i} twoLine>
<ListItemContent icon="extension" subtitle={strategy.description}>
<Link to={`/strategies/view/${strategy.name}`}>
<strong>{strategy.name}</strong>
</Link>
</ListItemContent>
{strategy.editable === false || !hasPermission(DELETE_STRATEGY) ? (
''
) : (
<IconButton name="delete" onClick={() => removeStrategy(strategy)} />
)}
</ListItem>
))
) : ( ) : (
<ListItem>No entries</ListItem> ''
)} )
</List> }
</Cell> />
</Grid> <List>
{strategies.length > 0 ? (
strategies.map((strategy, i) => (
<ListItem key={i} twoLine>
<ListItemContent icon="extension" subtitle={strategy.description}>
<Link to={`/strategies/view/${strategy.name}`}>
<strong>{strategy.name}</strong>
</Link>
</ListItemContent>
{strategy.editable === false || !hasPermission(DELETE_STRATEGY) ? (
''
) : (
<IconButton name="delete" onClick={() => removeStrategy(strategy)} />
)}
</ListItem>
))
) : (
<ListItem>No entries</ListItem>
)}
</List>
</Card>
); );
} }
} }