WebDiscover: add clarifying diagram on deploying ecs step for RDS (#4…

…6915)

* WebDiscover: add clarifying diagram on deploying ecs step for RDS

* Run svgs through ImageOptim

* Address CRs

---------

Co-authored-by: Rafał Cieślak <[email protected]>

web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/AutoDeploy.tsx

@@ -17,7 +17,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import {
   Box,
   ButtonSecondary,
@@ -62,6 +62,9 @@ import {
   Header,
   AlternateInstructionButton,
 } from '../../../Shared';
+import awsEcsLight from '../../aws-ecs-light.svg';
+import awsEcsDark from '../../aws-ecs-dark.svg';
+import awsEcsBblp from '../../aws-ecs-bblp.svg';
 
 import { DeployServiceProp } from '../DeployService';
 
@@ -343,6 +346,11 @@ const Heading = ({
   region: string;
   wantAutoDiscover: boolean;
 }) => {
+  const theme = useTheme();
+  let img = theme.type === 'light' ? awsEcsLight : awsEcsDark;
+  if (theme.isCustomTheme && theme.name === 'bblp') {
+    img = awsEcsBblp;
+  }
   return (
     <>
       <Header>Automatically Deploy a Database Service</Header>
@@ -352,19 +360,23 @@ const Heading = ({
         ECS Fargate container (2vCPU, 4GB memory) in your Amazon account with
         the ability to access databases in this region (<Mark>{region}</Mark>).
         You will only need to do this once per geographical region.
+      </HeaderSubtitle>
+      <Box mb={5} mt={-3}>
+        <Box minWidth="500px" maxWidth="998px">
+          <img src={img} width="100%" />
+        </Box>
         {!wantAutoDiscover && (
           <>
             <br />
-            <br />
-            Want to deploy a database service manually from one of your existing
-            servers?{' '}
+            Do you want to deploy a database service manually from one of your
+            existing servers?{' '}
             <AlternateInstructionButton
               onClick={toggleDeployMethod}
               disabled={togglerDisabled}
             />
           </>
         )}
-      </HeaderSubtitle>
+      </Box>
     </>
   );
 };

web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/SelectSecurityGroups.tsx

@@ -125,10 +125,10 @@ export const SelectSecurityGroups = ({
   return (
     <>
       <Flex alignItems="center" gap={1} mb={2}>
-        <Subtitle3>Select Security Groups</Subtitle3>
+        <Subtitle3>Select ECS Security Groups</Subtitle3>
         <ToolTipInfo>
           <Text>
-            Select security group(s) based on the following requirements:
+            Select ECS security group(s) based on the following requirements:
             <ul>
               <li>
                 The selected security group(s) must allow all outbound traffic
@@ -145,7 +145,7 @@ export const SelectSecurityGroups = ({
       </Flex>
 
       <P mb={2}>
-        Select security groups to assign to the Fargate service that will be
+        Select ECS security groups to assign to the Fargate service that will be
         running the Teleport Database Service. If you don't select any security
         groups, the default one for the VPC will be used.
       </P>

web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/SelectSubnetIds.tsx

@@ -120,7 +120,7 @@ export function SelectSubnetIds({
   return (
     <>
       <Flex alignItems="center" gap={1} mb={2}>
-        <Subtitle3>Select Subnets</Subtitle3>
+        <Subtitle3>Select ECS Subnets</Subtitle3>
         <ToolTipInfo>
           <Text>
             A subnet has an outbound internet route if it has a route to an
@@ -130,9 +130,9 @@ export function SelectSubnetIds({
       </Flex>
 
       <Text mb={2}>
-        Select subnets to assign to the Fargate service that will be running the
-        Teleport Database Service. All of the subnets you select must have an
-        outbound internet route and a local route to the database subnets.
+        Select ECS subnets to assign to the Fargate service that will be running
+        the Teleport Database Service. All of the subnets you select must have
+        an outbound internet route and a local route to the database subnets.
       </Text>
       {attempt.status === 'failed' && (
         <>