fix skip dockerfile from repo root

dashboard/src/components/repo-selector/ContentsList.tsx

@@ -216,7 +216,7 @@ export default class ContentsList extends Component<PropsType, StateType> {
             })}
           </DockerfileList>
           <ConfirmButton
-            onClick={() => this.props.setFolderPath(this.state.currentDir)}
+            onClick={() => this.props.setFolderPath(this.state.currentDir || "./")}
           >
             No, I don't want to use a Dockerfile
           </ConfirmButton>

dashboard/src/components/repo-selector/RepoList.tsx

@@ -152,7 +152,7 @@ export default class ActionConfEditor extends Component<PropsType, StateType> {
   renderExpanded = () => {
     if (this.props.readOnly) {
       return (
-        <ExpandedWrapperAlt>asdffdas{this.renderRepoList()}</ExpandedWrapperAlt>
+        <ExpandedWrapperAlt>{this.renderRepoList()}</ExpandedWrapperAlt>
       );
     } else {
       return (

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

@@ -5,6 +5,7 @@ type PropsType = {
   label: string;
   checked: boolean;
   toggle: () => void;
+  required?: boolean;
 };
 
 type StateType = {};
@@ -18,12 +19,22 @@ export default class CheckboxRow extends Component<PropsType, StateType> {
             <i className="material-icons">done</i>
           </Checkbox>
           {this.props.label}
+          { 
+            this.props.required && (
+              <Required>*</Required>
+            )
+          }
         </CheckboxWrapper>
       </StyledCheckboxRow>
     );
   }
 }
 
+const Required = styled.section`
+  margin-left: 8px;
+  color: #fc4976;
+`;
+
 const CheckboxWrapper = styled.div`
   display: flex;
   align-items: center;

dashboard/src/main/home/provisioner/AWSFormSection.tsx

@@ -9,6 +9,7 @@ import { InfraType } from "shared/types";
 
 import SelectRow from "components/values-form/SelectRow";
 import InputRow from "components/values-form/InputRow";
+import CheckboxRow from "components/values-form/CheckboxRow";
 import Helper from "components/values-form/Helper";
 import Heading from "components/values-form/Heading";
 import SaveButton from "components/SaveButton";
@@ -28,6 +29,7 @@ type StateType = {
   awsSecretKey: string;
   selectedInfras: { value: string; label: string }[];
   buttonStatus: string;
+  provisionConfirmed: boolean;
 };
 
 const provisionOptions = [
@@ -66,6 +68,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
     awsSecretKey: "",
     selectedInfras: [...provisionOptions],
     buttonStatus: "",
+    provisionConfirmed: false,
   };
 
   componentDidMount = () => {
@@ -88,6 +91,10 @@ class AWSFormSection extends Component<PropsType, StateType> {
   };
 
   checkFormDisabled = () => {
+    if (!this.state.provisionConfirmed) {
+      return true;
+    }
+
     let { awsRegion, awsAccessId, awsSecretKey, selectedInfras } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
@@ -237,6 +244,18 @@ class AWSFormSection extends Component<PropsType, StateType> {
     }
   };
 
+  getButtonStatus = () => {
+    if (this.props.projectName) {
+      if (!isAlphanumeric(this.props.projectName)) {
+        return "Project name contains illegal characters";
+      }
+    }
+    if (!this.state.awsAccessId || !this.state.awsSecretKey || !this.state.provisionConfirmed || this.props.projectName === "") {
+      return "Required fields missing";
+    }
+    return this.state.buttonStatus;
+  }
+
   render() {
     let { setSelectedProvisioner } = this.props;
     let { awsRegion, awsAccessId, awsSecretKey, selectedInfras } = this.state;
@@ -293,6 +312,16 @@ class AWSFormSection extends Component<PropsType, StateType> {
               this.setState({ selectedInfras: x });
             }}
           />
+          <Helper>
+            Important: AWS will bill you for any provisioned resources. Learn more about EKS pricing
+            <Highlight href="https://aws.amazon.com/eks/pricing/" target="_blank">here</Highlight>
+          </Helper>
+          <CheckboxRow
+            required={true}
+            checked={this.state.provisionConfirmed}
+            toggle={() => this.setState({ provisionConfirmed: !this.state.provisionConfirmed })}
+            label="I understand and wish to proceed"
+          />
         </FormSection>
         {this.props.children ? this.props.children : <Padding />}
         <SaveButton
@@ -300,7 +329,7 @@ class AWSFormSection extends Component<PropsType, StateType> {
           disabled={this.checkFormDisabled() || this.state.buttonStatus === "loading"}
           onClick={this.onCreateAWS}
           makeFlush={true}
-          status={this.state.buttonStatus}
+          status={this.getButtonStatus()}
           helper="Note: Provisioning can take up to 15 minutes"
         />
       </StyledAWSFormSection>
@@ -312,6 +341,14 @@ AWSFormSection.contextType = Context;
 
 export default withRouter(AWSFormSection);
 
+const Highlight = styled.a`
+  color: #8590ff;
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: 5px;
+  margin-right: 10px;
+`;
+
 const Padding = styled.div`
   height: 15px;
 `;

dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -7,6 +7,7 @@ import api from "shared/api";
 import { Context } from "shared/Context";
 import { InfraType } from "shared/types";
 
+import CheckboxRow from "components/values-form/CheckboxRow";
 import SelectRow from "components/values-form/SelectRow";
 import Helper from "components/values-form/Helper";
 import Heading from "components/values-form/Heading";
@@ -24,6 +25,7 @@ type StateType = {
   selectedInfras: { value: string; label: string }[];
   subscriptionTier: string;
   doRegion: string;
+  provisionConfirmed: boolean;
 };
 
 const provisionOptions = [
@@ -56,6 +58,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     selectedInfras: [...provisionOptions],
     subscriptionTier: "starter",
     doRegion: "nyc1",
+    provisionConfirmed: false,
   };
 
   componentDidMount = () => {
@@ -143,6 +146,17 @@ export default class DOFormSection extends Component<PropsType, StateType> {
     }
   };
 
+  getButtonStatus = () => {
+    if (this.props.projectName) {
+      if (!isAlphanumeric(this.props.projectName)) {
+        return "Project name contains illegal characters";
+      }
+    }
+    if (!this.state.provisionConfirmed || this.props.projectName === "") {
+      return "Required fields missing";
+    }
+  }
+
   render() {
     let { setSelectedProvisioner } = this.props;
     let { selectedInfras, subscriptionTier, doRegion } = this.state;
@@ -183,6 +197,16 @@ export default class DOFormSection extends Component<PropsType, StateType> {
               this.setState({ selectedInfras: x });
             }}
           />
+          <Helper>
+            Important: AWS will bill you for any provisioned resources. Learn more about EKS pricing
+            <Highlight href="https://aws.amazon.com/eks/pricing/" target="_blank">here</Highlight>
+          </Helper>
+          <CheckboxRow
+            required={true}
+            checked={this.state.provisionConfirmed}
+            toggle={() => this.setState({ provisionConfirmed: !this.state.provisionConfirmed })}
+            label="I understand and wish to proceed"
+          />
         </FormSection>
         {this.props.children ? this.props.children : <Padding />}
         <SaveButton
@@ -190,6 +214,7 @@ export default class DOFormSection extends Component<PropsType, StateType> {
           disabled={this.checkFormDisabled()}
           onClick={this.onCreateDO}
           makeFlush={true}
+          status={this.getButtonStatus()}
           helper="Note: Provisioning can take up to 15 minutes"
         />
       </StyledAWSFormSection>
@@ -199,6 +224,14 @@ export default class DOFormSection extends Component<PropsType, StateType> {
 
 DOFormSection.contextType = Context;
 
+const Highlight = styled.a`
+  color: #8590ff;
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: 5px;
+  margin-right: 10px;
+`;
+
 const Padding = styled.div`
   height: 15px;
 `;

dashboard/src/main/home/provisioner/GCPFormSection.tsx

@@ -8,6 +8,7 @@ import { Context } from "shared/Context";
 import { InfraType } from "shared/types";
 
 import SelectRow from "components/values-form/SelectRow";
+import CheckboxRow from "components/values-form/CheckboxRow";
 import InputRow from "components/values-form/InputRow";
 import Helper from "components/values-form/Helper";
 import Heading from "components/values-form/Heading";
@@ -28,6 +29,7 @@ type StateType = {
   gcpKeyData: string;
   selectedInfras: { value: string; label: string }[];
   buttonStatus: string;
+  provisionConfirmed: boolean;
 };
 
 const provisionOptions = [
@@ -69,6 +71,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
     gcpKeyData: "",
     selectedInfras: [...provisionOptions],
     buttonStatus: "",
+    provisionConfirmed: false,
   };
 
   componentDidMount = () => {
@@ -91,6 +94,10 @@ class GCPFormSection extends Component<PropsType, StateType> {
   };
 
   checkFormDisabled = () => {
+    if (!this.state.provisionConfirmed) {
+      return true;
+    }
+
     let { gcpRegion, gcpProjectId, gcpKeyData, selectedInfras } = this.state;
     let { projectName } = this.props;
     if (projectName || projectName === "") {
@@ -226,6 +233,18 @@ class GCPFormSection extends Component<PropsType, StateType> {
     }
   };
 
+  getButtonStatus = () => {
+    if (this.props.projectName) {
+      if (!isAlphanumeric(this.props.projectName)) {
+        return "Project name contains illegal characters";
+      }
+    }
+    if (!this.state.gcpProjectId || !this.state.gcpKeyData || !this.state.provisionConfirmed || this.props.projectName === "") {
+      return "Required fields missing";
+    }
+    return this.state.buttonStatus;
+  }
+
   render() {
     let { setSelectedProvisioner } = this.props;
     let { gcpRegion, gcpProjectId, gcpKeyData, selectedInfras } = this.state;
@@ -282,6 +301,16 @@ class GCPFormSection extends Component<PropsType, StateType> {
               this.setState({ selectedInfras: x });
             }}
           />
+          <Helper>
+            Important: AWS will bill you for any provisioned resources. Learn more about EKS pricing
+            <Highlight href="https://aws.amazon.com/eks/pricing/" target="_blank">here</Highlight>
+          </Helper>
+          <CheckboxRow
+            required={true}
+            checked={this.state.provisionConfirmed}
+            toggle={() => this.setState({ provisionConfirmed: !this.state.provisionConfirmed })}
+            label="I understand and wish to proceed"
+          />
         </FormSection>
         {this.props.children ? this.props.children : <Padding />}
         <SaveButton
@@ -289,7 +318,7 @@ class GCPFormSection extends Component<PropsType, StateType> {
           disabled={this.checkFormDisabled() || this.state.buttonStatus === "loading"}
           onClick={this.onCreateGCP}
           makeFlush={true}
-          status={this.state.buttonStatus}
+          status={this.getButtonStatus()}
           helper="Note: Provisioning can take up to 15 minutes"
         />
       </StyledGCPFormSection>
@@ -301,6 +330,14 @@ GCPFormSection.contextType = Context;
 
 export default withRouter(GCPFormSection);
 
+const Highlight = styled.a`
+  color: #8590ff;
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: 5px;
+  margin-right: 10px;
+`;
+
 const Padding = styled.div`
   height: 15px;
 `;