Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-31 00:16:47 +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 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';
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 {
static propTypes = {
applications: PropTypes.array,
@ -20,8 +35,8 @@ class ClientStrategies extends Component {
return <ProgressBar indeterminate />;
}
return (
<Card className={commonStyles.fullwidth}>
<AppsLinkList apps={applications} />
<Card shadow={0} className={commonStyles.fullwidth}>
{applications.length > 0 ? <AppsLinkList apps={applications} /> : <Empty />}
</Card>
);
}

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

@ -110,18 +110,22 @@ export default class FeatureListComponent extends React.Component {
</CardActions>
<hr />
<List>
{features.map((feature, i) => (
<Feature
key={i}
settings={settings}
metricsLastHour={featureMetrics.lastHour[feature.name]}
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
feature={feature}
toggleFeature={toggleFeature}
revive={revive}
hasPermission={hasPermission}
/>
))}
{features.length > 0 ? (
features.map((feature, i) => (
<Feature
key={i}
settings={settings}
metricsLastHour={featureMetrics.lastHour[feature.name]}
metricsLastMinute={featureMetrics.lastMinute[feature.name]}
feature={feature}
toggleFeature={toggleFeature}
revive={revive}
hasPermission={hasPermission}
/>
))
) : (
<p style={{ textAlign: 'center', marginTop: '50px', color: 'gray' }}>Empty list of feature toggles</p>
)}
</List>
</Card>
</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 { Link } from 'react-router-dom';
import { List, ListItem, ListItemContent, IconButton, Grid, Cell } from 'react-mdl';
import { HeaderTitle } from '../common';
import { List, ListItem, ListItemContent, IconButton, Grid, Cell, Card } from 'react-mdl';
import { HeaderTitle, styles as commonStyles } from '../common';
import { CREATE_STRATEGY, DELETE_STRATEGY } from '../../permissions';
class StrategiesListComponent extends Component {
@ -23,45 +23,43 @@ class StrategiesListComponent extends Component {
const { strategies, removeStrategy, hasPermission } = this.props;
return (
<Grid className="mdl-color--white">
<Cell col={12}>
<HeaderTitle
title="Strategies"
actions={
hasPermission(CREATE_STRATEGY) ? (
<IconButton
raised
name="add"
onClick={() => this.props.history.push('/strategies/create')}
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>
))
<Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
<HeaderTitle
title="Strategies"
actions={
hasPermission(CREATE_STRATEGY) ? (
<IconButton
raised
name="add"
onClick={() => this.props.history.push('/strategies/create')}
title="Add new strategy"
/>
) : (
<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>
);
}
}