From a8c4ca642c919be518735278251f5b40053828cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 1 Mar 2017 15:48:33 +0000
Subject: [PATCH] add checkbox to service item

fixes #283
---
 frontend/src/components/service/item.js | 33 +++++++++++++++++++------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/service/item.js b/frontend/src/components/service/item.js
index 51577ade..859f1a6f 100644
--- a/frontend/src/components/service/item.js
+++ b/frontend/src/components/service/item.js
@@ -1,9 +1,10 @@
-import React from 'react';
-import forceArray from 'force-array';
-
+import styled from 'styled-components';
 import { Link } from '@ui/components/anchor';
 import MetricsOutlet from '@components/metrics-outlet';
+import { Checkbox, FormGroup } from '@ui/components/form';
 import PropTypes from '@root/prop-types';
+import forceArray from 'force-array';
+import React from 'react';
 
 import {
   ListItem,
@@ -17,6 +18,17 @@ import {
   ListItemHeader
 } from '@ui/components/list';
 
+const StyledFormGroup = styled(FormGroup)`
+  width: auto;
+`;
+
+const TitleInnerContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
+
 const ServiceItem = ({
   org = '',
   project = '',
@@ -36,12 +48,19 @@ const ServiceItem = ({
   const to = `/${org}/projects/${project}/services/${service.id}`;
 
   const title = isChild ? (
-    <ListItemTitle>{service.name}</ListItemTitle>
+    <ListItemTitle>
+      {service.name}
+    </ListItemTitle>
   ) : (
     <ListItemTitle>
-      <Link secondary to={to}>
-        {service.name}
-      </Link>
+      <TitleInnerContainer>
+        <StyledFormGroup>
+          <Checkbox />
+        </StyledFormGroup>
+        <Link secondary to={to}>
+          {service.name}
+        </Link>
+      </TitleInnerContainer>
     </ListItemTitle>
   );