Merge pull request #2 from mareklibra/projectEmptyState

Add Empty state to the Projects page

plugins/orion/src/components/EmptyProjectsState.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Card, makeStyles, Typography } from '@material-ui/core';
+import { Link } from '@backstage/core-components';
+import { InfoOutlined } from '@material-ui/icons';
+import { useCommonStyles } from '../styles';
+
+export const useStyles = makeStyles({
+  paddingtop: {'padding-top': '2rem'},
+});
+
+export const EmptyProjectsState = () => {
+  const commonStyles = useCommonStyles();
+  const styles = useStyles();
+
+  return (
+    <Card className={`${commonStyles.center} ${styles.paddingtop}`}>
+      <InfoOutlined fontSize="large" className={commonStyles.centericon} />
+      <Typography variant="h6">
+        You don’t have any projects on here yet!
+      </Typography>
+      <Typography paragraph>
+        To start using Orion, you’ll first need to initiate a project
+        assessment.
+      </Typography>
+      <Typography paragraph>
+        <Link to="/orion/newproject">GET STARTED</Link>
+      </Typography>
+    </Card>
+  );
+};

plugins/orion/src/components/ProjectAssessmentPage/ProjectAssessmentPage.tsx

@@ -3,13 +3,19 @@ import {
   Content,
   ContentHeader,
   Header,
+  Link,
   Page,
   Select,
+  SupportButton,
 } from '@backstage/core-components';
 import { Add } from '@material-ui/icons';
 import { Grid } from '@material-ui/core';
+import { EmptyProjectsState } from '../EmptyProjectsState';
+import { useCommonStyles } from '../../styles';
 
 export const ProjectAssessmentPage = () => {
+  const commonStyles = useCommonStyles();
+
   const projectFilterItems = [
     /* TODO: https://issues.redhat.com/browse/FLPATH-52 */ {
       label: 'foo',
@@ -23,11 +29,13 @@ export const ProjectAssessmentPage = () => {
 
   return (
     <Page themeId="tool">
-      <Header title="Orion" />
       <Content>
-        <ContentHeader title="Projects overview" />
+        <Header title="Orion" />
+        <ContentHeader title="Projects overview">
+          <SupportButton title="Need help?">Lorem Ipsum</SupportButton>
+        </ContentHeader>
 
-        <Grid container spacing={3}>
+        <Grid container direction="row">
           <Grid item xs={3}>
             <Select
               onChange={onFilterProjects}
@@ -38,10 +46,14 @@ export const ProjectAssessmentPage = () => {
           </Grid>
 
           <Grid item xs={3}>
-            <span>
-              <Add className="inline-icon" />
+            <Link to="/orion/newproject">
+              <Add className={commonStyles.inlineicon} />
               &nbsp;Add new project
-            </span>
+            </Link>
+          </Grid>
+
+          <Grid item xs={12}>
+            <EmptyProjectsState />
           </Grid>
         </Grid>
       </Content>

plugins/orion/src/styles.tsx

@@ -0,0 +1,16 @@
+import { makeStyles } from '@material-ui/core';
+
+export const useCommonStyles = makeStyles({
+  center: {
+    'text-align': 'center',
+  },
+  inlineicon: {
+    'vertical-align': 'bottom',
+  },
+  centericon: {
+    'margin-left': '50%',
+  },
+  floatright: {
+    float: 'right',
+  },
+});