Various UI fixes

Now gets only tenants in the `onboarded` state
Added "deleted" to the terminal states for onboarding list
Moved from reactstrap to react-bootstrap in a few comps
Fixed onboarding tenant name
Fixed button CSS

Author: tobuck-aws

client/web/src/onboarding/OnboardingDetailComponent.js

@@ -49,7 +49,7 @@ const showError = (error, clearError) => {
 
 export const OnboardingDetailComponent = (props) => {
   const { onboarding, error, clearError, refresh, showTenant } = props
-  const terminus = ['deployed', 'updated', 'failed']
+  const terminus = ['deployed', 'deleted', 'updated', 'failed']
 
   const [isRefreshing, setIsRefreshing] = useState(null)
   const [timeoutId, setTimeoutId] = useState(null)

client/web/src/onboarding/OnboardingListComponent.js

@@ -15,17 +15,7 @@
  */
 import { PropTypes } from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import {
-  Row,
-  Col,
-  Card,
-  CardHeader,
-  CardBody,
-  Button,
-  Table,
-  Spinner,
-  Alert,
-} from 'reactstrap'
+import { Row, Col, Card, Button, Table, Spinner, Alert } from 'react-bootstrap'
 import CIcon from '@coreui/icons-react'
 import { cilReload, cilListRich } from '@coreui/icons'
 import OnboardingListItemComponent from './OnboardingListItemComponent'
@@ -60,7 +50,10 @@ export const OnboardingListComponent = (props) => {
   const terminus = ['deployed', 'updated', 'failed']
 
   const checkRefresh = (refreshFn) => {
-    if (!isRefreshing && onboardingRequests.some((ob) => !terminus.includes(ob?.status))) {
+    if (
+      !isRefreshing &&
+      onboardingRequests.some((ob) => !terminus.includes(ob?.status))
+    ) {
       setIsRefreshing(true)
       const id = setTimeout(() => {
         refreshFn()
@@ -85,23 +78,27 @@ export const OnboardingListComponent = (props) => {
         <Col>{!!error && showError(error, dismissError)}</Col>
       </Row>
       <Row className="mb-3">
-        <Col sm={{ size: 12 }} md={{ size: 8 }} lg={{ size: 9 }}>
+        <Col sm={12} md={8} lg={9}>
           <Alert color="light">
-            Onboarding tenants requires an application image to be uploaded. For more detail, click{' '}
-            <ECRInstructions awsAccount={awsAccount} awsRegion={awsRegion} ecrRepo={ecrRepository}>
+            Onboarding tenants requires an application image to be uploaded. For
+            more detail, click
+            <ECRInstructions
+              awsAccount={awsAccount}
+              awsRegion={awsRegion}
+              ecrRepo={ecrRepository}
+            >
               <span>here.</span>
             </ECRInstructions>
           </Alert>
         </Col>
-        <Col sm={{ size: 12 }} md={{ size: 4 }} lg={{ size: 3 }}>
+        <Col sm={12} md={4} lg={3}>
           <div className="float-right">
-            <Button color="secondary" className="mr-2" onClick={doRefresh}>
+            <Button variant="secondary" className="mr-2" onClick={doRefresh}>
               <span>
-                {' '}
                 <CIcon icon={cilReload} />
               </span>
             </Button>
-            <Button color="primary" onClick={showOnboardRequestForm}>
+            <Button variant="info" onClick={showOnboardRequestForm}>
               Provision Tenant
             </Button>
           </div>
@@ -110,10 +107,10 @@ export const OnboardingListComponent = (props) => {
       <Row>
         <Col lg={12}>
           <Card>
-            <CardHeader>
+            <Card.Header>
               <CIcon icon={cilListRich} /> Onboarding Requests
-            </CardHeader>
-            <CardBody>
+            </Card.Header>
+            <Card.Body>
               <Table>
                 <thead>
                   <tr>
@@ -147,15 +144,13 @@ export const OnboardingListComponent = (props) => {
                   {loading === 'pending' && (
                     <tr>
                       <td colSpan="5">
-                        <Spinner animation="border" role="status">
-                          Loading...
-                        </Spinner>
+                        <Spinner animation="border" role="status"></Spinner>
                       </td>
                     </tr>
                   )}
                 </tbody>
               </Table>
-            </CardBody>
+            </Card.Body>
           </Card>
         </Col>
       </Row>

client/web/src/onboarding/OnboardingListItemComponent.js

@@ -33,13 +33,17 @@ export default function OnboardingListItemComponent(props) {
   return (
     <tr>
       <th scope="row">
-        <Button className="pl-0" color="link" onClick={() => clickOnboardingRequest(onboarding.id)}>
+        <Button
+          className="pl-0"
+          color="link"
+          onClick={() => clickOnboardingRequest(onboarding.id)}
+        >
           {onboarding.id}
         </Button>
       </th>
       <td>
         <OnboardingTenantLink
-          tenantName={onboarding.tenantName}
+          tenantName={onboarding.request?.name}
           tenantId={onboarding.tenantId}
           clickTenantDetails={clickTenantDetails}
         />

client/web/src/settings/ApplicationComponent.js

@@ -20,7 +20,7 @@ import { useDispatch } from 'react-redux'
 import { Formik, Form } from 'formik'
 import { PropTypes } from 'prop-types'
 import * as Yup from 'yup'
-import { Button, Row, Col, Card, CardBody, Alert } from 'reactstrap'
+import { Button, Row, Col, Card, Alert } from 'react-bootstrap'
 import LoadingOverlay from '@ronchalant/react-loading-overlay'
 
 import AppSettingsSubform from './AppSettingsSubform'
@@ -472,15 +472,15 @@ export function ApplicationComponent(props) {
                   <Row>
                     <Col xs={12}>
                       <Card>
-                        <CardBody>
+                        <Card.Body>
                           <Button
                             type="Submit"
-                            color="primary"
+                            variant="info"
                             disabled={isSubmitting()}
                           >
                             {isSubmitting() ? 'Saving...' : 'Submit'}
                           </Button>
-                        </CardBody>
+                        </Card.Body>
                       </Card>
                     </Col>
                   </Row>

client/web/src/settings/ServicesComponent.js

@@ -60,7 +60,7 @@ const ServicesComponent = (props) => {
           <Row>
             <Col className="d-flex align-items-center">Services</Col>
             <Col className="d-flex justify-content-end">
-              <Button type="button" onClick={toggleModal}>
+              <Button variant="info" type="button" onClick={toggleModal}>
                 New Service
               </Button>
             </Col>

client/web/src/tenant/api/index.js

@@ -79,7 +79,7 @@ const tenantAPI = {
     const { signal } = ops
 
     try {
-      const response = await apiServer.get('/', { signal })
+      const response = await apiServer.get('?status=onboarded', { signal })
       return response.data
     } catch (err) {
       if (axios.isCancel(err)) {
@@ -136,7 +136,11 @@ const tenantAPI = {
     const { signal } = ops
 
     try {
-      const response = await apiServer.patch(`/${tenantId}/enable`, { id: tenantId }, { signal })
+      const response = await apiServer.patch(
+        `/${tenantId}/enable`,
+        { id: tenantId },
+        { signal }
+      )
       return response.data
     } catch (err) {
       if (axios.isCancel(err)) {
@@ -151,7 +155,11 @@ const tenantAPI = {
     const { signal } = ops
 
     try {
-      const response = await apiServer.patch(`/${tenantId}/disable`, { id: tenantId }, { signal })
+      const response = await apiServer.patch(
+        `/${tenantId}/disable`,
+        { id: tenantId },
+        { signal }
+      )
       return response.data
     } catch (err) {
       if (axios.isCancel(err)) {
@@ -171,7 +179,7 @@ const tenantAPI = {
         {
           data: { id: tenantId },
         },
-        { signal },
+        { signal }
       )
       return response.data
     } catch (err) {