From 61729c3467717fadef4a4e0089af188c4ee90fcc Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Fri, 9 Dec 2016 22:11:05 +0100
Subject: [PATCH] load app list from common

---
 .../application/application-edit-component.js | 28 +++++++++++++------
 .../application/application-list-component.js | 17 ++---------
 frontend/src/component/common/index.js        | 18 ++++++++++++
 .../component/feature/view-edit-container.jsx | 17 +++--------
 4 files changed, 45 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/component/common/index.js

diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js
index 2c2c73ebcf..27a560a1fa 100644
--- a/frontend/src/component/application/application-edit-component.js
+++ b/frontend/src/component/application/application-edit-component.js
@@ -43,13 +43,16 @@ class ClientStrategies extends PureComponent {
             instances,
             strategies,
             seenToggles,
-            data = {},
+            url,
+            description,
+            icon = 'apps',
+            color,
         } = application;
 
         return (
             <div>
-                <h5><Icon name={data.icon || 'apps'} /> {appName}</h5>
-                {data.description && <p>{data.description} </p>}
+                <h5><Icon name={icon} /> {appName}</h5>
+                {description && <p>{description} </p>}
                 <Grid>
                     <Cell col={3}>
                         <h6> Toggles</h6>
@@ -86,7 +89,11 @@ class ClientStrategies extends PureComponent {
                         <List>
                         {instances.map(({ instanceId, clientIp, lastSeen }, i) => (
                             <ListItem key={i} twoLine>
-                                <ListItemContent icon="timeline" subtitle={<span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>}>
+                                <ListItemContent
+                                    icon="timeline"
+                                    subtitle={
+                                        <span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>
+                                    }>
                                     {instanceId}
                                 </ListItemContent>
                             </ListItem>
@@ -98,12 +105,17 @@ class ClientStrategies extends PureComponent {
                         <h5>Edit app meta data</h5>
                     </Cell>
                     <Cell col={6}>
-                        <StatefulTextfield value={data.url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br />
-                        <StatefulTextfield value={data.description} label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} />
+                        <StatefulTextfield
+                            value={url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br />
+                        <StatefulTextfield
+                            value={description}
+                            label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} />
                     </Cell>
                     <Cell col={6}>
-                        <StatefulTextfield value={data.icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} />
-                        <StatefulTextfield value={data.color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
+                        <StatefulTextfield
+                            value={icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} />
+                        <StatefulTextfield
+                            value={color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
                     </Cell>
                 </Grid>
             </div>
diff --git a/frontend/src/component/application/application-list-component.js b/frontend/src/component/application/application-list-component.js
index f96e3fc63b..dc35830bff 100644
--- a/frontend/src/component/application/application-list-component.js
+++ b/frontend/src/component/application/application-list-component.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import { List, ListItem, ListItemContent } from 'react-mdl';
-import { Link } from 'react-router';
+import { AppsLinkList } from '../common';
 
 class ClientStrategies extends Component {
 
@@ -14,23 +13,13 @@ class ClientStrategies extends Component {
         } = this.props;
 
         if (!applications) {
-            return <div>loading...</div>;
+            return <div>Loading...</div>;
         }
         return (
             <div>
                 <h5>Applications</h5>
                 <hr />
-                <List>
-                {applications.map(({ appName, data = {} }) => (
-                    <ListItem key={appName} twoLine>
-                        <ListItemContent avatar={data.icon || 'apps'} subtitle={data.description}>
-                            <Link to={`/applications/${appName}`}>
-                                {appName}
-                            </Link>
-                        </ListItemContent>
-                    </ListItem>
-                ))}
-                </List>
+                <AppsLinkList apps={applications} />
             </div>
         );
     }
diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js
new file mode 100644
index 0000000000..969c00f2b5
--- /dev/null
+++ b/frontend/src/component/common/index.js
@@ -0,0 +1,18 @@
+const React = require('react');
+const { List, ListItem, ListItemContent } = require('react-mdl');
+const { Link } = require('react-router');
+
+export const AppsLinkList = ({ apps }) => (
+    <List style={{ textAlign: 'left' }}>
+    {apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
+        <ListItem twoLine key={appName}>
+            <ListItemContent avatar={icon} subtitle={description}>
+                <Link key={appName} to={`/applications/${appName}`}>
+                    {appName}
+                </Link>
+            </ListItemContent>
+        </ListItem>
+    ))}
+    </List>
+);
+
diff --git a/frontend/src/component/feature/view-edit-container.jsx b/frontend/src/component/feature/view-edit-container.jsx
index 84f6469a98..66a9eeb5b8 100644
--- a/frontend/src/component/feature/view-edit-container.jsx
+++ b/frontend/src/component/feature/view-edit-container.jsx
@@ -12,6 +12,8 @@ import { fetchFeatureMetrics, fetchSeenApps } from '../../store/feature-metrics-
 import { fetchHistoryForToggle } from '../../store/history-actions';
 import { getIcon } from '../history/history-item-diff';
 
+import { AppsLinkList } from '../common';
+
 class EditFeatureToggleWrapper extends React.Component {
 
     static propTypes () {
@@ -30,7 +32,6 @@ class EditFeatureToggleWrapper extends React.Component {
         this.props.fetchHistoryForToggle(this.props.featureToggleName);
         this.props.fetchFeatureMetrics();
         this.timer = setInterval(() => {
-            this.props.fetchSeenApps();
             this.props.fetchFeatureMetrics();
         }, 5000);
     }
@@ -63,7 +64,7 @@ class EditFeatureToggleWrapper extends React.Component {
             if (features.length === 0 ) {
                 return <span>Loading</span>;
             }
-            return <span>Could not find {this.props.featureToggleName}</span>;
+            return <span>Could not find the toggle "{this.props.featureToggleName}"</span>;
         }
 
         return (
@@ -105,17 +106,7 @@ class EditFeatureToggleWrapper extends React.Component {
                                 <div><small><strong>Not used in a app in the last hour.</strong> This might be due to your client implementation is not reporting usage.</small></div>
                             </div>
                         }
-                        <List style={{ textAlign: 'left' }}>
-                        {seenApps.length > 0 && seenApps.map(({ appName, data = {} }) => (
-                            <ListItem twoLine>
-                                <ListItemContent avatar={data.icon || 'apps'} subtitle={data.description || '-'}>
-                                    <Link key={appName} to={`/applications/${appName}`}>
-                                        {appName}
-                                    </Link>
-                                </ListItemContent>
-                            </ListItem>
-                        ))}
-                        </List>
+                        <AppsLinkList apps={seenApps} />
                     </Cell>
                     <Cell col={3}>
                             <div><strong>History</strong></div>