Merge branch 'multi-container' of github.com:awslabs/aws-saas-boost into multi-container

brtrvn · brtrvn · commit a67c1f1da653 · 2022-03-11T13:42:42.000-08:00
diff --git a/client/web/.prettierrc b/client/web/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 80
+}
diff --git a/client/web/src/onboarding/OnboardingCreateContainer.js b/client/web/src/onboarding/OnboardingCreateContainer.js
@@ -18,10 +18,20 @@ import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 
 import OnboardingFormComponent from './OnboardingFormComponent'
-import { createOnboarding, selectLoading, selectError, selectErrorName } from './ducks'
+import {
+  createOnboarding,
+  selectLoading,
+  selectError,
+  selectErrorName,
+} from './ducks'
 import { useDispatch, useSelector } from 'react-redux'
 import { selectConfig, fetchConfig } from '../settings/ducks'
-import { fetchPlans, selectAllPlans, selectPlanLoading, selectPlanError } from '../billing/ducks'
+import {
+  fetchPlans,
+  selectAllPlans,
+  selectPlanLoading,
+  selectPlanError,
+} from '../billing/ducks'
 import { saveToPresignedBucket } from '../settings/ducks'
 export default function OnboardingCreateContainer(props) {
   const dispatch = useDispatch()
@@ -47,23 +57,31 @@ export default function OnboardingCreateContainer(props) {
     const fetchConfigResponse = dispatch(fetchConfig())
   }, [dispatch])
 
-  const submitOnboardingRequestForm = async (values, { resetForm, setSubmitting }) => {
-    const { overrideDefaults, hasDomain, computeSize, minCount, maxCount, ...rest } = values
-    let onboardingResponse
-    const valsToSend = overrideDefaults
-      ? {
-          ...rest,
-          computeSize,
-          minCount,
-          maxCount,
-        }
-      : { ...rest }
+  const nullBlankProps = (obj) => {
+    const ret = { ...obj }
+    Object.keys(ret).forEach((key) => {
+      const val = ret[key]
+      if (val !== null && !val) {
+        ret[key] = null
+      }
+    })
+    return ret
+  }
 
+  const submitOnboardingRequestForm = async (
+    values,
+    { resetForm, setSubmitting }
+  ) => {
+    const { hasDomain, hasBilling, ...rest } = values
+    const valsToSend = nullBlankProps(rest)
+    let onboardingResponse
     try {
       onboardingResponse = await dispatch(createOnboarding(valsToSend))
       const presignedS3url = onboardingResponse.payload.zipFileUrl
       if (presignedS3url && !!file && file.name) {
-        await dispatch(saveToPresignedBucket({ dbFile: file, url: presignedS3url }))
+        await dispatch(
+          saveToPresignedBucket({ dbFile: file, url: presignedS3url })
+        )
       }
       history.push(`/onboarding/${onboardingResponse.payload.id}`)
     } catch (err) {
diff --git a/client/web/src/onboarding/OnboardingFormComponent.js b/client/web/src/onboarding/OnboardingFormComponent.js
@@ -17,7 +17,16 @@ import { PropTypes } from 'prop-types'
 import React from 'react'
 import { Formik, Form } from 'formik'
 import * as Yup from 'yup'
-import { Row, Col, Card, Button, CardHeader, CardBody, CardFooter, Alert } from 'reactstrap'
+import {
+  Row,
+  Col,
+  Card,
+  Button,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Alert,
+} from 'reactstrap'
 import {
   SaasBoostInput,
   SaasBoostSelect,
@@ -52,20 +61,17 @@ OnboardingFormComponent.propTypes = {
 
 export default function OnboardingFormComponent(props) {
   const { error, errorName, submit, cancel, config, billingPlans } = props
-  const { domainName, minCount, maxCount, computeSize, billing } = config
+  const { domainName, tier, billing } = config
   const hasBilling = !!billing
   const hasDomain = !!domainName
 
   const initialValues = {
     name: '',
+    tier: tier || 'default ',
     subdomain: '',
-    planId: '',
-    overrideDefaults: false,
+    billingPlan: '',
     hasBilling: hasBilling,
     hasDomain: hasDomain,
-    computeSize: computeSize ?? '',
-    minCount: minCount ?? 1,
-    maxCount: maxCount ?? 1,
   }
 
   const getBillingUi = (plans, hasBilling) => {
@@ -80,7 +86,12 @@ export default function OnboardingFormComponent(props) {
       hasBilling && (
         <Row>
           <Col>
-            <SaasBoostSelect type="select" name="planId" id="planId" label="Billing Plan">
+            <SaasBoostSelect
+              type="select"
+              name="billingPlan"
+              id="billingPlan"
+              label="Billing Plan"
+            >
               <option value="">Select One...</option>
               {options}
             </SaasBoostSelect>
@@ -94,11 +105,19 @@ export default function OnboardingFormComponent(props) {
     return hasDomain ? (
       <Row>
         <Col sm={8}>
-          <SaasBoostInput name="subdomain" label="Subdomain" type="text" maxLength={25} />
+          <SaasBoostInput
+            name="subdomain"
+            label="Subdomain"
+            type="text"
+            maxLength={25}
+          />
         </Col>
         <Col sm={4}>
           <div></div>
-          <p className="text-muted" style={{ marginLeft: '-20px', marginTop: '42px' }}>
+          <p
+            className="text-muted"
+            style={{ marginLeft: '-20px', marginTop: '42px' }}
+          >
             .{domainName}
           </p>
         </Col>
@@ -108,41 +127,22 @@ export default function OnboardingFormComponent(props) {
 
   let validationSchema
   validationSchema = Yup.object({
-    name: Yup.string().max(100, 'Must be 100 characters or less.').required('Required'),
+    name: Yup.string()
+      .max(100, 'Must be 100 characters or less.')
+      .required('Required'),
+    tier: Yup.string().optional(),
     subdomain: Yup.string()
       .when('hasDomain', {
         is: true,
         then: Yup.string()
-          .required('Required because a domain name was specified during application setup')
+          .required(
+            'Required because a domain name was specified during application setup'
+          )
           .matches('^[a-zA-Z0-9][a-zA-Z0-9.-]+[a-zA-Z0-9]$'),
         otherwise: Yup.string(),
       })
       .max(25, 'Must be 25 characters or less.'),
-    computeSize: Yup.string().when('overrideDefaults', {
-      is: true,
-      then: Yup.string().required('Instance size is a required field.'),
-      otherwise: Yup.string(),
-    }),
-    minCount: Yup.number().when('overrideDefaults', {
-      is: true,
-      then: Yup.number()
-        .required('Minimum count is a required field.')
-        .integer('Minimum count must be an integer value')
-        .min(1, 'Minimum count must be at least ${min}'),
-      otherwise: Yup.number(),
-    }),
-    maxCount: Yup.number().when('overrideDefaults', {
-      is: true,
-      then: Yup.number()
-        .required('Maximum count is a required field.')
-        .integer('Maximum count must be an integer value')
-        .max(10, 'Maximum count can be no larger than ${max}')
-        .test('match', 'Maximum count cannot be smaller than minimum count', function (maxCount) {
-          return maxCount >= this.parent.minCount
-        }),
-      otherwise: Yup.number(),
-    }),
-    planId: Yup.string().when('hasBilling', {
+    billingPlan: Yup.string().when('hasBilling', {
       is: true,
       then: Yup.string().required('Billing plan is a required field'),
       otherwise: Yup.string(),
@@ -167,47 +167,24 @@ export default function OnboardingFormComponent(props) {
                 <Card>
                   <CardHeader>Onboarding Request</CardHeader>
                   <CardBody>
-                    <SaasBoostInput name="name" label="Tenant Name" type="text" maxLength={100} />
-                    {getDomainUi(domainName, hasDomain)}
-                    <SaasBoostCheckbox
-                      name="overrideDefaults"
-                      id="overrideDefaults"
-                      label="Override Application Defaults"
-                      value={formik.values?.overrideDefaults}
-                    ></SaasBoostCheckbox>
+                    <SaasBoostInput
+                      name="name"
+                      label="Tenant Name"
+                      type="text"
+                      maxLength={100}
+                    />
                     <SaasBoostSelect
-                      disabled={!formik.values.overrideDefaults}
                       type="select"
-                      name="computeSize"
-                      id="computeSize"
-                      label="Compute Size"
+                      name="tier"
+                      label="Select Tier"
                     >
-                      <option value="">Select One...</option>
-                      <option value="S">Small</option>
-                      <option value="M">Medium</option>
-                      <option value="L">Large</option>
-                      <option value="XL">X-Large</option>
+                      <option value="default">Default</option>
+                      <option value="S">Silver</option>
+                      <option value="G">Gold</option>
+                      <option value="P">Platinum</option>
+                      <option value="UB">Onobtainium</option>
                     </SaasBoostSelect>
-                    <Row>
-                      <Col>
-                        <SaasBoostInput
-                          disabled={!formik.values.overrideDefaults}
-                          key="minCount"
-                          label="Minimum Instance Count"
-                          name="minCount"
-                          type="number"
-                        />
-                      </Col>
-                      <Col>
-                        <SaasBoostInput
-                          disabled={!formik.values.overrideDefaults}
-                          key="maxCount"
-                          label="Maximum Instance Count"
-                          name="maxCount"
-                          type="number"
-                        />
-                      </Col>
-                    </Row>
+                    {getDomainUi(domainName, hasDomain)}
                     {getBillingUi(billingPlans, hasBilling)}
                     <SaasBoostFileUpload
                       fileMask=".zip"
diff --git a/client/web/src/onboarding/OnboardingTenantLink.js b/client/web/src/onboarding/OnboardingTenantLink.js
@@ -16,23 +16,28 @@
 import { PropTypes } from 'prop-types'
 import React from 'react'
 import { NavLink } from 'reactstrap'
-import { isEmpty } from 'lodash'
 
 OnboardingTenantLink.propTypes = {
   tenantName: PropTypes.string,
   tenantId: PropTypes.string,
   clickTenantDetails: PropTypes.func,
 }
 
-export function OnboardingTenantLink({ tenantName, tenantId, clickTenantDetails }) {
-  if (isEmpty(tenantName)) {
-    tenantName = tenantId.substring(0, 7)
-  }
+//TODO Revisit this when the onboarding service is done. Seems the return shape/vals changed
+export function OnboardingTenantLink({
+  tenantName,
+  tenantId,
+  clickTenantDetails,
+}) {
   return !!tenantId ? (
-    <NavLink href="#" className="pl-0 pt-0" onClick={() => clickTenantDetails(tenantId)}>
-      {tenantName}
+    <NavLink
+      href="#"
+      className="pl-0 pt-0"
+      onClick={() => clickTenantDetails(tenantId)}
+    >
+      {tenantName || 'Unknown'}
     </NavLink>
   ) : (
-    <span>{tenantName}</span>
+    <span>{tenantName || 'Unknown'}</span>
   )
 }
