empty components

frontend/locales/en-us.json

@@ -9,6 +9,7 @@
   "create-new": "Create a new",
   "add-services": "Add services",
   "no-services": "You don’t have any services. You can either add them by editing a manifest file or by connecting your repo on GitHub or BitBucket.",
+  "no-projects": "You don’t have any projects.",
   "edit-project-manifest": "Edit project manifest",
   "or-bring-in-from": "or bring in from",
   "your-settings": "Your settings",

frontend/src/components/empty/projects.js

@@ -0,0 +1,19 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+  <Row>
+    <Column xs={12}>
+      <p name='empty'>
+        <FormattedMessage id='no-projects' />
+      </p>
+    </Column>
+  </Row>
+);

frontend/src/components/empty/services.js

@@ -0,0 +1,43 @@
+const React = require('react');
+const ReactIntl = require('react-intl');
+
+const Button = require('@ui/components/button');
+const Column = require('@ui/components/column');
+const Row = require('@ui/components/row');
+
+const {
+  FormattedMessage
+} = ReactIntl;
+
+module.exports = () => (
+  <div>
+    <Row name='empty-services'>
+      <Column md={6} xs={12}>
+        <h3>
+          <FormattedMessage id='add-services' />
+        </h3>
+        <p>
+          <FormattedMessage id='no-services' />
+        </p>
+      </Column>
+    </Row>
+    <Row>
+      <Button>
+        <FormattedMessage id='edit-project-manifest' />
+      </Button>
+    </Row>
+    <Row>
+      <p>
+        <FormattedMessage id='or-bring-in-from' />
+      </p>
+    </Row>
+    <Row>
+      <Column>
+        <Button secondary>GitHub</Button>
+      </Column>
+      <Column>
+        <Button secondary>BitBucket</Button>
+      </Column>
+    </Row>
+  </div>
+);

frontend/src/containers/projects/index.js

@@ -5,6 +5,7 @@ const ReactRouter = require('react-router');
 
 const Button = require('@ui/components/button');
 const Column = require('@ui/components/column');
+const EmptyProjects = require('@components/empty/projects');
 const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
 const selectors = require('@state/selectors');
@@ -31,13 +32,7 @@ const Projects = ({
   projects = []
 }) => {
   const empty = projects.length ? null : (
-    <Row>
-      <Column xs={12}>
-        <p name='empty'>
-          <FormattedMessage id='no-personal-projects' />
-        </p>
-      </Column>
-    </Row>
+    <EmptyProjects />
   );
 
   const _projects = projects.map((project) => (

frontend/src/containers/services/index.js

@@ -1,10 +1,8 @@
 const React = require('react');
-const ReactIntl = require('react-intl');
 const ReactRedux = require('react-redux');
 const ReactRouter = require('react-router');
 
-const Button = require('@ui/components/button');
-const Column = require('@ui/components/column');
+const EmptyServices = require('@components/empty/services');
 const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
 const selectors = require('@state/selectors');
@@ -13,10 +11,6 @@ const {
   connect
 } = ReactRedux;
 
-const {
-  FormattedMessage
-} = ReactIntl;
-
 const {
   orgByIdSelector,
   projectByIdSelector,
@@ -27,39 +21,6 @@ const {
   Link
 } = ReactRouter;
 
-const EmptyServices = () => (
-  <div>
-    <Row name='empty-services'>
-      <Column md={6} xs={12}>
-        <h3>
-          <FormattedMessage id='add-services' />
-        </h3>
-        <p>
-          <FormattedMessage id='no-services' />
-        </p>
-      </Column>
-    </Row>
-    <Row>
-      <Button>
-        <FormattedMessage id='edit-project-manifest' />
-      </Button>
-    </Row>
-    <Row>
-      <p>
-        <FormattedMessage id='or-bring-in-from' />
-      </p>
-    </Row>
-    <Row>
-      <Column>
-        <Button secondary>GitHub</Button>
-      </Column>
-      <Column>
-        <Button secondary>BitBucket</Button>
-      </Column>
-    </Row>
-  </div>
-);
-
 const Services = ({
   org = {},
   project = {},