fix: Clean up the UI with empty states

frontend/src/component/application/application-list-component.js

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

frontend/src/component/feature/list-component.jsx

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

frontend/src/component/strategies/list-component.jsx

@@ -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,8 +23,7 @@ class StrategiesListComponent extends Component {
         const { strategies, removeStrategy, hasPermission } = this.props;
 
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
+            <Card shadow={0} className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
                 <HeaderTitle
                     title="Strategies"
                     actions={
@@ -60,8 +59,7 @@ class StrategiesListComponent extends Component {
                         <ListItem>No entries</ListItem>
                     )}
                 </List>
-                </Cell>
-            </Grid>
+            </Card>
         );
     }
 }