[v12] WebDiscover: Enroll RDS Databases and Hookup RDS flow

lib/usagereporter/teleport/types_discover.go

@@ -181,8 +181,8 @@ func (u *UIDiscoverIntegrationAWSOIDCConnectEvent) Anonymize(a utils.Anonymizer)
 type UIDiscoverDatabaseRDSEnrollEvent prehogv1a.UIDiscoverDatabaseRDSEnrollEvent
 
 func (u *UIDiscoverDatabaseRDSEnrollEvent) CheckAndSetDefaults() error {
-	if u.SelectedResourcesCount <= 0 {
-		return trace.BadParameter("selected resources count must be 1 or more")
+	if u.SelectedResourcesCount < 0 {
+		return trace.BadParameter("selected resources count must be 0 or more")
 	}
 	return trace.Wrap(validateDiscoverBaseEventFields(u.Metadata, u.Resource, u.Status))
 }

web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx

@@ -56,7 +56,7 @@ export const PathInput = forwardRef<
 
 const StyledFieldInput = styled(FieldInput)`
   input {
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid ${props => props.theme.colors.text.muted};
     background: transparent;
     color: white;
     box-shadow: none;

web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx

@@ -110,7 +110,7 @@ const Li = styled.li`
 
 const ProgressBackground = styled.div`
   border-radius: 50px;
-  background: rgba(255, 255, 255, 0.05);
+  background: ${props => props.theme.colors.spotBackground[0]};
   width: 100%;
 `;
 

web/packages/shared/components/Select/types.ts

@@ -25,14 +25,14 @@ export type Props = {
   hideSelectedOptions?: boolean;
   controlShouldRenderValue?: boolean;
   maxMenuHeight?: number;
-  onChange(e: Option<any> | Option<any>[]): void;
+  onChange(e: Option<any, any> | Option<any, any>[]): void;
   onKeyDown?(e: KeyboardEvent): void;
-  value: null | Option<any> | Option<any>[];
+  value: null | Option<any, any> | Option<any, any>[];
   isMulti?: boolean;
   autoFocus?: boolean;
   label?: string;
   placeholder?: string;
-  options: Option<any>[];
+  options: Option<any, any>[];
   width?: string | number;
   menuPlacement?: string;
   minMenuHeight?: number;
@@ -53,11 +53,11 @@ export type AsyncProps = Omit<Props, 'options'> & {
 };
 
 // Option defines the data type for select dropdown list.
-export type Option<T = string> = {
+export type Option<T = string, S = string> = {
   // value is the actual value used inlieu of label.
   value: T;
   // label is the value user sees in the select options dropdown.
-  label: string;
+  label: S;
 };
 
 export type ActionMeta = {

web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx

@@ -18,14 +18,13 @@ import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Box,
-  ButtonLink,
+  ButtonText,
   Text,
   ButtonPrimary,
   Indicator,
   Alert,
   Flex,
 } from 'design';
-import theme from 'design/theme';
 import FieldSelect from 'shared/components/FieldSelect';
 import useAttempt from 'shared/hooks/useAttemptNext';
 import { Option } from 'shared/components/Select';
@@ -38,22 +37,37 @@ import {
   IntegrationKind,
   integrationService,
 } from 'teleport/services/integrations';
-import { integrationRWE } from 'teleport/Discover/yamlTemplates';
+import { integrationRWEAndDbCU } from 'teleport/Discover/yamlTemplates';
 import useTeleport from 'teleport/useTeleport';
 
 import { ActionButtons, HeaderSubtitle, HeaderWithBackBtn } from '../../Shared';
 
-import { DbMeta, useDiscover } from '../../useDiscover';
+import {
+  DbMeta,
+  DiscoverUrlLocationState,
+  useDiscover,
+} from '../../useDiscover';
 
 export function ConnectAwsAccount() {
   const { storeUser } = useTeleport();
-  const { prevStep, nextStep, agentMeta, updateAgentMeta, eventState } =
-    useDiscover();
-
-  // TODO(lisa): also need to check for verb `use` which is pending
-  // work.
-  const access = storeUser.getIntegrationsAccess();
-  const hasAccess = access.create && access.list;
+  const {
+    prevStep,
+    nextStep,
+    agentMeta,
+    updateAgentMeta,
+    eventState,
+    resourceSpec,
+    currentStep,
+  } = useDiscover();
+
+  const integrationAccess = storeUser.getIntegrationsAccess();
+  const databaseAccess = storeUser.getDatabaseAccess();
+  const hasAccess =
+    integrationAccess.create &&
+    integrationAccess.list &&
+    // Required access after integrating:
+    integrationAccess.use && // required to list AWS RDS db's
+    databaseAccess.create; // required to enroll AWS RDS db
   const { attempt, run } = useAttempt(hasAccess ? 'processing' : '');
 
   const [awsIntegrations, setAwsIntegrations] = useState<Option[]>([]);
@@ -96,7 +110,7 @@ export function ConnectAwsAccount() {
           <Flex minHeight="215px" mt={3}>
             <TextEditor
               readOnly={true}
-              data={[{ content: integrationRWE, type: 'yaml' }]}
+              data={[{ content: integrationRWEAndDbCU, type: 'yaml' }]}
             />
           </Flex>
         </Box>
@@ -134,17 +148,27 @@ export function ConnectAwsAccount() {
 
     updateAgentMeta({
       ...(agentMeta as DbMeta),
-      awsIntegrationName: selectedAwsIntegration.value,
+      integrationName: selectedAwsIntegration.value,
     });
 
-    // TODO(lisa): Need to add a new event to emit for this screen.
     nextStep();
   }
 
   const hasAwsIntegrations = awsIntegrations.length > 0;
+
+  // When a user clicks to create a new AWS integration, we
+  // define location state to preserve all the states required
+  // to resume from this step when the user comes back to discover route
+  // after successfully finishing enrolling integration.
   const locationState = {
     pathname: cfg.getIntegrationEnrollRoute(IntegrationKind.AwsOidc),
-    state: { discoverEventId: eventState?.id },
+    state: {
+      discover: {
+        eventState,
+        resourceSpec,
+        currentStep,
+      },
+    } as DiscoverUrlLocationState,
   };
   return (
     <Box maxWidth="700px">
@@ -171,14 +195,9 @@ export function ConnectAwsAccount() {
                       options={awsIntegrations}
                     />
                   </Box>
-                  <ButtonLink
-                    as={Link}
-                    to={locationState}
-                    pl={0}
-                    css={{ color: theme.colors.link }}
-                  >
+                  <ButtonText as={Link} to={locationState} pl={0}>
                     Or click here to set up a different AWS account
-                  </ButtonLink>
+                  </ButtonText>
                 </>
               ) : (
                 <ButtonPrimary

web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.story.tsx

@@ -39,12 +39,6 @@ export const InitSelfHostedMySql = () => (
   </MemoryRouter>
 );
 
-export const InitAws = () => (
-  <MemoryRouter>
-    <CreateDatabaseView {...props} dbLocation={DatabaseLocation.Aws} />
-  </MemoryRouter>
-);
-
 export const NoPerm = () => (
   <MemoryRouter>
     <CreateDatabaseView {...props} canCreateDatabase={false} />
@@ -80,4 +74,6 @@ const props: State = {
   dbLocation: DatabaseLocation.SelfHosted,
   isDbCreateErr: false,
   prevStep: () => null,
+  nextStep: () => null,
+  createdDb: {} as any,
 };