extract service item to it's own component

frontend/src/components/service-item/index.js

@@ -1,12 +1,13 @@
 const React = require('react');
-// const ReactRouter = require('react-router');
+const ReactRouter = require('react-router');
 
+const Anchor = require('@ui/components/anchor');
 const List = require('@ui/components/list');
 const PropTypes = require('@root/prop-types');
 
-// const {
-//   Link
-// } = ReactRouter;
+const {
+  Link
+} = ReactRouter;
 
 const {
   ListItem,
@@ -21,15 +22,16 @@ const {
   ListItemHeader
 } = List;
 
-const Service = ({
+const ServiceItem = ({
   org = '',
   project = '',
   service = {}
 }) => {
-  // const to = `/${org}/projects/${project}/services/${service.id}`;
+  const to = `/${org}/projects/${project}/services/${service.id}`;
 
   const childs = service.services.map((service) => (
     <ListItem
+      collapsed={service.collapsed}
       flat
       key={service.uuid}
       stacked={service.instances > 1}
@@ -62,10 +64,21 @@ const Service = ({
   );
 
   return (
-    <ListItem headed>
+    <ListItem
+      collapsed={service.collapsed}
+      headed
+    >
       <ListItemHeader>
         <ListItemMeta>
-          <ListItemTitle>{service.name}</ListItemTitle>
+          <ListItemTitle>
+            <Link to={to}>
+              {Anchor.fn(
+                <Anchor secondary>
+                  {service.name}
+                </Anchor>
+              )}
+            </Link>
+          </ListItemTitle>
           <ListItemSubTitle>{service.instances} instance</ListItemSubTitle>
         </ListItemMeta>
         <ListItemOptions>…</ListItemOptions>
@@ -75,10 +88,10 @@ const Service = ({
   );
 };
 
-Service.propTypes = {
+ServiceItem.propTypes = {
   org: React.PropTypes.string,
   project: React.PropTypes.string,
   service: PropTypes.service
 };
 
-module.exports = Service;
+module.exports = ServiceItem;

frontend/src/containers/services/index.js

@@ -3,7 +3,7 @@ const ReactRedux = require('react-redux');
 
 const EmptyServices = require('@components/empty/services');
 const PropTypes = require('@root/prop-types');
-const Service = require('./service');
+const ServiceItem = require('@components/service-item');
 const selectors = require('@state/selectors');
 
 const {
@@ -26,7 +26,7 @@ const Services = ({
   );
 
   const serviceList = services.map((service) => (
-    <Service
+    <ServiceItem
       key={service.uuid}
       org={org.id}
       project={project.id}

ui/src/components/list/view.js

@@ -16,26 +16,28 @@ const paddingTop = (props) => props.headed && !props.fromHeader
   ? remcalc(47)
   : remcalc(0);
 
-const display = (props) => props.headed && !props.fromHeader && props.collapsed
-  ? 'none'
-  : 'flex';
-
 const StyledView = styled(Row)`
   flex: 1;
   margin: 0;
   height: 100%;
   padding-top: ${paddingTop};
-  display: ${display};
 `;
 
-const View = (props) => (
-  <StyledView name='list-item-view' {...props}>
-    {props.children}
-  </StyledView>
-);
+const View = (props) => {
+  const hide = props.headed && !props.fromHeader && props.collapsed;
+
+  return hide ? null : (
+    <StyledView name='list-item-view' {...props}>
+      {props.children}
+    </StyledView>
+  );
+};
 
 View.propTypes = {
-  children: React.PropTypes.node
+  children: React.PropTypes.node,
+  collapsed: React.PropTypes.bool,
+  fromHeader: React.PropTypes.bool,
+  headed: React.PropTypes.bool
 };
 
 module.exports = transferProps([