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

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

@ -110,7 +110,8 @@ export default class FeatureListComponent extends React.Component {
</CardActions> </CardActions>
<hr /> <hr />
<List> <List>
{features.map((feature, i) => ( {features.length > 0 ? (
features.map((feature, i) => (
<Feature <Feature
key={i} key={i}
settings={settings} settings={settings}
@ -121,7 +122,10 @@ export default class FeatureListComponent extends React.Component {
revive={revive} revive={revive}
hasPermission={hasPermission} hasPermission={hasPermission}
/> />
))} ))
) : (
<p style={{ textAlign: 'center', marginTop: '50px', color: 'gray' }}>Empty list of feature toggles</p>
)}
</List> </List>
</Card> </Card>
</div> </div>

10
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,8 +23,7 @@ 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={
@ -60,8 +59,7 @@ class StrategiesListComponent extends Component {
<ListItem>No entries</ListItem> <ListItem>No entries</ListItem>
)} )}
</List> </List>
</Cell> </Card>
</Grid>
); );
} }
} }