allow traditional new project create on skip provider

dashboard/src/components/values-form/InputRow.tsx

@@ -29,24 +29,12 @@ export default class InputRow extends Component<PropsType, StateType> {
       this.props.setValue(e.target.value);
     }
   }
-
-  renderRequiredWarning = () => {
-    if (this.props.isRequired && this.props.value === '') {
-      return (
-        <Warning>
-          <i className="material-icons">error_outline</i>
-        </Warning>
-      );
-    }
-  }
   
   render() {
     let { label, value, type, unit, placeholder, width } = this.props;
     return (
       <StyledInputRow>
-        <Label>
-          {label} <Required>{this.props.isRequired ? ' *' : null}</Required>
-        </Label>
+        <Label>{label} <Required>{this.props.isRequired ? ' *' : null}</Required></Label>
         <InputWrapper>
           <Input
             readOnly={this.state.readOnly} onFocus={() => this.setState({ readOnly: false })}
@@ -64,8 +52,8 @@ export default class InputRow extends Component<PropsType, StateType> {
   }
 }
 
-const Required = styled.span`
-  margin-left: 5px;
+const Required = styled.div`
+  margin-left: 8px;
   color: #fc4976;
 `;
 
@@ -73,16 +61,9 @@ const Unit = styled.div`
   margin-right: 8px;
 `;
 
-const Warning = styled.div`
-  margin-bottom: -3px;
-  > i {
-    font-size: 18px;
-    color: #fcba03;
-  }
-`;
-
 const InputWrapper = styled.div`
   display: flex;
+  margin-bottom: -1px;
   align-items: center;
 `;
 

dashboard/src/main/home/Home.tsx

@@ -35,8 +35,8 @@ export default class Home extends Component<PropsType, StateType> {
   state = {
     forceSidebar: true,
     showWelcome: false,
-    currentView: 'cluster-dashboard',
-    prevProjectId: null as number | null
+    currentView: 'dashboard',
+    prevProjectId: null as number | null,
   }
 
   componentDidUpdate(prevProps: PropsType) {
@@ -98,7 +98,9 @@ export default class Home extends Component<PropsType, StateType> {
     } else if (currentView === 'integrations') {
       return <Integrations />;
     } else if (currentView === 'new-project') {
-      return <NewProject />;
+      return (
+        <NewProject setCurrentView={(x: string) => this.setState({ currentView: x })} />
+      );
     }
 
     return (

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

@@ -4,6 +4,7 @@ import gradient from '../../../assets/gradient.jpg';
 import awsWhite from '../../../assets/aws-white.png';
 import close from '../../../assets/close.png';
 
+import { Context } from '../../../shared/Context';
 import { integrationList } from '../../../shared/common';
 import InputRow from '../../../components/values-form/InputRow';
 import Helper from '../../../components/values-form/Helper';
@@ -15,6 +16,7 @@ import SaveButton from '../../../components/SaveButton';
 const providers = ['aws', 'gcp', 'do',];
 
 type PropsType = {
+  setCurrentView: (x: string) => void,
 };
 
 type StateType = {
@@ -22,6 +24,7 @@ type StateType = {
   selectedProvider: string | null,
   awsAccessId: string | null,
   awsSecretKey: string | null,
+  status: string | null,
 };
 
 export default class NewProject extends Component<PropsType, StateType> {
@@ -30,6 +33,7 @@ export default class NewProject extends Component<PropsType, StateType> {
     selectedProvider: null as string | null,
     awsAccessId: '' as string | null,
     awsSecretKey: '' as string | null,
+    status: null as string | null,
   }
 
   isAlphanumeric = (x: string) => {
@@ -171,6 +175,29 @@ export default class NewProject extends Component<PropsType, StateType> {
     }
     return false;
   }
+
+  createProject = () => {
+    this.setState({ status: 'loading' });
+    api.createProject('<token>', {
+      name: this.state.projectName
+    }, {}, (err: any, res: any) => {
+      if (err) {
+        console.log(err);
+      } else {
+        let { user } = this.context;
+        api.getProjects('<token>', {}, { id: user.userId }, (err: any, res: any) => {
+          if (err) {
+            console.log(err)
+          } else if (res.data) {
+            if (res.data.length > 0) {
+              this.context.setCurrentProject(res.data[0]);
+              this.props.setCurrentView('dashboard');
+            } 
+          }
+        });
+      }
+    });
+  }
   
   render() {
     return (
@@ -205,15 +232,18 @@ export default class NewProject extends Component<PropsType, StateType> {
         <SaveButton
           text='Create Project'
           disabled={!this.validateForm()}
-          onClick={() => console.log('unimplemented.')}
+          onClick={this.createProject}
           makeFlush={true}
           helper='Note: Provisioning can take up to 15 minutes'
+          status={this.state.status}
         />
       </StyledNewProject>
     );
   }
 }
 
+NewProject.contextType = Context;
+
 const Flex = styled.div`
   display: flex;
   height: 170px;
@@ -328,13 +358,13 @@ const ProjectIcon = styled.div`
   position: relative;
   margin-right: 15px;
   font-weight: 400;
-  margin-top: 30px;
+  margin-top: 17px;
 `;
 
 const InputWrapper = styled.div`
   display: flex;
   align-items: center;
-  margin-top: -25px;
+  margin-top: -15px;
 `;
 
 const Warning = styled.span`

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -29,13 +29,10 @@ export default class ProjectSection extends Component<PropsType, StateType> {
         console.log(err)
       } else if (res.data) {
         this.setState({ projects: res.data });
-        if (res.data.length > 0) {
+        if (res.data.length > 0 && !this.props.currentProject) {
           this.context.setCurrentProject(res.data[0]);
-        } else {
-          this.context.setCurrentModal('CreateProjectModal', {
-            keepOpen: true,
-            updateProjects: this.updateProjects
-          });
+        } else if (res.data.length === 0) {
+          this.props.setCurrentView('new-project');
         }
       }
     });
@@ -57,7 +54,10 @@ export default class ProjectSection extends Component<PropsType, StateType> {
         <Option
           key={i}
           selected={project.name === this.props.currentProject.name}
-          onClick={() => this.context.setCurrentProject(project)}
+          onClick={() => {
+            this.context.setCurrentProject(project);
+            this.props.setCurrentView('dashboard');
+          }}
         >
           <ProjectIcon>
             <ProjectImage src={gradient} />
@@ -90,13 +90,18 @@ export default class ProjectSection extends Component<PropsType, StateType> {
     }
   }
 
+  handleExpand = () => {
+    this.updateProjects();
+    this.setState({ expanded: !this.state.expanded });
+  }
+
   render() {
     let { currentProject } = this.props;
     if (currentProject) {
       return (
         <StyledProjectSection>
           <MainSelector
-            onClick={() => this.setState({ expanded: !this.state.expanded })}
+            onClick={this.handleExpand}
             expanded={this.state.expanded}
           >
             <ProjectIcon>