decoupled project create and provision

dashboard/src/main/home/Home.tsx

@@ -39,9 +39,9 @@ export default class Home extends Component<PropsType, StateType> {
   state = {
     forceSidebar: true,
     showWelcome: false,
-    currentView: 'dashboard',
+    currentView: 'provisioner',
     prevProjectId: null as number | null,
-    viewData: null as any
+    viewData: [] as any
   }
 
   // Possibly consolidate into context (w/ ProjectSection + NewProject)

dashboard/src/main/home/new-project/NewProject.tsx

@@ -31,7 +31,7 @@ type StateType = {
 
 export default class NewProject extends Component<PropsType, StateType> {
   state = {
-    projectExists: false,
+    projectExists: true,
     projectName: '',
     selectedProvider: null as string | null,
     awsRegion: '' as string | null,

dashboard/src/main/home/new-project/Provisioner.tsx

@@ -6,6 +6,7 @@ import { Context } from '../../../shared/Context';
 import ansiparse from '../../../shared/ansiparser'
 import { integrationList } from '../../../shared/common';
 import loading from '../../../assets/loading.gif';
+import warning from '../../../assets/warning.png';
 
 import Helper from '../../../components/values-form/Helper';
 import { eventNames } from 'process';
@@ -17,6 +18,7 @@ type PropsType = {
 };
 
 type StateType = {
+  error: boolean,
   logs: string[],
   websockets: any[],
   maxStep : Record<string, number>,
@@ -25,6 +27,7 @@ type StateType = {
 
 export default class Provisioner extends Component<PropsType, StateType> {
   state = {
+    error: true,
     logs: [] as string[],
     websockets : [] as any[],
     maxStep: {} as Record<string, any>,
@@ -150,6 +153,38 @@ export default class Provisioner extends Component<PropsType, StateType> {
       return <div key={i}>{log}</div>
     });
   }
+
+  renderHeadingSection = () => {
+    if (this.state.error) {
+      return (
+        <>
+          <TitleSection>
+            <Title><img src={warning} /> Provisioning Error</Title>
+          </TitleSection>
+
+          <Helper>
+            Porter encountered an error while provisioning.
+            <Link onClick={() => this.props.setCurrentView('dashboard')}>
+              Exit to dashboard
+            </Link> 
+            to try again with new credentials.
+          </Helper>
+        </>
+      );
+    }
+
+    return (
+      <>
+        <TitleSection>
+          <Title><img src={loading} /> Setting Up Porter</Title>
+        </TitleSection>
+
+        <Helper>
+          Porter is currently being provisioned to your AWS account:
+        </Helper>
+      </>
+    )
+  }
   
   render() {
     let maxStep = 0;
@@ -171,13 +206,7 @@ export default class Provisioner extends Component<PropsType, StateType> {
 
     return (
       <StyledProvisioner>
-        <TitleSection>
-          <Title><img src={loading} /> Setting Up Porter</Title>
-        </TitleSection>
-
-        <Helper>
-          Porter is currently being provisioned to your AWS account:
-        </Helper>
+        {this.renderHeadingSection()}
 
         <LoadingBar>
           <Loaded progress={((currentStep / (maxStep == 0 ? 1 : maxStep)) * 100).toString() + '%'} />
@@ -199,6 +228,18 @@ export default class Provisioner extends Component<PropsType, StateType> {
 
 Provisioner.contextType = Context;
 
+const Link = styled.a`
+  cursor: pointer;
+  margin-left: 5px;
+  margin-right: 5px;
+`;
+
+const Warning = styled.span`
+  color: ${(props: { highlight: boolean, makeFlush?: boolean }) => props.highlight ? '#f5cb42' : ''};
+  margin-left: ${(props: { highlight: boolean, makeFlush?: boolean }) => props.makeFlush ? '' : '5px'};
+  margin-right: 5px;
+`;
+
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;