updates

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

@@ -22,7 +22,7 @@ type PropsType = RouteComponentProps & {
   handleError: () => void;
   projectName: string;
   infras: InfraType[];
-  displayCosts?: boolean;
+  highlightCosts?: boolean;
 };
 
 type StateType = {
@@ -74,6 +74,15 @@ const machineTypeOptions = [
   { value: "t3.2xlarge", label: "t3.2xlarge" },
 ];
 
+const costMapping: Record<string, number> = {
+  "t2.medium": 100,
+  "t2.xlarge": 200,
+  "t2.2xlarge": 300,
+  "t3.medium": 400,
+  "t3.xlarge": 500,
+  "t3.2xlarge": 600,
+};
+
 // TODO: Consolidate across forms w/ HOC
 class AWSFormSection extends Component<PropsType, StateType> {
   state = {
@@ -394,7 +403,12 @@ class AWSFormSection extends Component<PropsType, StateType> {
             setActiveValue={(x: string) => this.setState({ awsMachineType: x })}
             label="⚙️ AWS Machine Type"
           />
-          {this.props.displayCosts && <p>Cost Display</p>}
+          <Helper>
+            Estimated Cost:{" "}
+            <CostHighlight highlight={this.props.highlightCosts}>
+              {`\$${costMapping[this.state.awsMachineType]}/Month`}
+            </CostHighlight>
+          </Helper>
           <InputRow
             type="text"
             value={awsAccessId}
@@ -553,3 +567,7 @@ const CloseButtonImg = styled.img`
   width: 14px;
   margin: 0 auto;
 `;
+
+const CostHighlight = styled.span<{ highlight: boolean }>`
+  background-color: ${(props) => props.highlight && "yellow"};
+`;

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

@@ -19,6 +19,7 @@ type PropsType = {
   setSelectedProvisioner: (x: string | null) => void;
   handleError: () => void;
   projectName: string;
+  highlightCosts?: boolean;
   infras: InfraType[];
 };
 
@@ -277,6 +278,12 @@ export default class DOFormSection extends Component<PropsType, StateType> {
             </Highlight>
             .
           </Helper>
+          <Helper>
+            Estimated Cost:{" "}
+            <CostHighlight highlight={this.props.highlightCosts}>
+              $COST/Month
+            </CostHighlight>
+          </Helper>
           <CheckboxRow
             isRequired={true}
             checked={this.state.provisionConfirmed}
@@ -388,3 +395,7 @@ const CloseButtonImg = styled.img`
   width: 14px;
   margin: 0 auto;
 `;
+
+const CostHighlight = styled.span<{ highlight: boolean }>`
+  background-color: ${(props) => props.highlight && "yellow"};
+`;

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

@@ -22,6 +22,7 @@ type PropsType = RouteComponentProps & {
   setSelectedProvisioner: (x: string | null) => void;
   handleError: () => void;
   projectName: string;
+  highlightCosts?: boolean;
   infras: InfraType[];
 };
 
@@ -377,8 +378,8 @@ class GCPFormSection extends Component<PropsType, StateType> {
           />
           {this.renderClusterNameSection()}
           <Helper>
-            By default, Porter creates a cluster with three e2-medium instances
-            (2vCPUs and 4GB RAM each). Google Cloud will bill you for any
+            By default, Porter creates a cluster with three custom-2-4096
+            instances (2 CPU, 4 GB RAM each). Google Cloud will bill you for any
             provisioned resources. Learn more about GKE pricing
             <Highlight
               href="https://cloud.google.com/kubernetes-engine/pricing"
@@ -388,6 +389,12 @@ class GCPFormSection extends Component<PropsType, StateType> {
             </Highlight>
             .
           </Helper>
+          <Helper>
+            Estimated Cost:{" "}
+            <CostHighlight highlight={this.props.highlightCosts}>
+              $COST/Month
+            </CostHighlight>
+          </Helper>
           <CheckboxRow
             isRequired={true}
             checked={this.state.provisionConfirmed}
@@ -503,3 +510,7 @@ const CloseButtonImg = styled.img`
   width: 14px;
   margin: 0 auto;
 `;
+
+const CostHighlight = styled.span<{ highlight: boolean }>`
+  background-color: ${(props) => props.highlight && "yellow"};
+`;

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

@@ -13,6 +13,7 @@ import SaveButton from "components/SaveButton";
 import ExistingClusterSection from "./ExistingClusterSection";
 import { RouteComponentProps, withRouter } from "react-router";
 import { pushFiltered } from "shared/routing";
+import InfoTooltip from "../../../components/InfoTooltip";
 
 type PropsType = RouteComponentProps & {
   isInNewProject?: boolean;
@@ -23,7 +24,7 @@ type PropsType = RouteComponentProps & {
 
 type StateType = {
   selectedProvider: string | null;
-  displayCosts: boolean;
+  highlightCosts: boolean;
   infras: InfraType[];
 };
 
@@ -32,7 +33,7 @@ const providers = ["aws", "gcp", "do"];
 class NewProject extends Component<PropsType, StateType> {
   state = {
     selectedProvider: null as string | null,
-    displayCosts: true,
+    highlightCosts: true,
     infras: [] as InfraType[],
   };
 
@@ -97,7 +98,7 @@ class NewProject extends Component<PropsType, StateType> {
             handleError={this.handleError}
             projectName={projectName}
             infras={infras}
-            displayCosts={this.state.displayCosts}
+            highlightCosts={this.state.highlightCosts}
             setSelectedProvisioner={(x: string | null) => {
               this.setState({ selectedProvider: x });
             }}
@@ -111,6 +112,7 @@ class NewProject extends Component<PropsType, StateType> {
             handleError={this.handleError}
             projectName={projectName}
             infras={infras}
+            highlightCosts={this.state.highlightCosts}
             setSelectedProvisioner={(x: string | null) => {
               this.setState({ selectedProvider: x });
             }}
@@ -124,6 +126,7 @@ class NewProject extends Component<PropsType, StateType> {
             handleError={this.handleError}
             projectName={projectName}
             infras={infras}
+            highlightCosts={this.state.highlightCosts}
             setSelectedProvisioner={(x: string | null) => {
               this.setState({ selectedProvider: x });
             }}
@@ -219,23 +222,24 @@ class NewProject extends Component<PropsType, StateType> {
                   onClick={() => {
                     this.setState({
                       selectedProvider: provider,
-                      displayCosts: false,
+                      highlightCosts: false,
                     });
                   }}
                 >
                   <Icon src={providerInfo.icon} />
                   <BlockTitle>{providerInfo.label}</BlockTitle>
-                  <p
+                  <CostSection
                     onClick={(e) => {
                       e.stopPropagation();
                       this.setState({
                         selectedProvider: provider,
-                        displayCosts: true,
+                        highlightCosts: true,
                       });
                     }}
                   >
                     $cost/Month
-                  </p>
+                    <InfoTooltip text={"aa"} />
+                  </CostSection>
                   <BlockDescription>Hosted in your own cloud.</BlockDescription>
                 </Block>
               );
@@ -352,3 +356,8 @@ const Block = styled.div<{ disabled?: boolean }>`
     }
   }
 `;
+
+const CostSection = styled.p`
+  position: absolute;
+  left: 0;
+`;