[v13] WebDiscover: Put back IamPolicy screen and some tweaks

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/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx

@@ -160,7 +160,7 @@ export function CreateDatabaseView({
                     <Text mb={2}>
                       Labels make this new database discoverable by the database
                       service. <br />
-                      Not defining labels is equivalent to asteriks (any
+                      Not defining labels is equivalent to asterisks (any
                       database service can discover this database).
                     </Text>
                     <LabelsCreater

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

@@ -312,7 +312,7 @@ function createBashCommand(tokenId: string) {
 //  - If agent labels was defined like this [`fruit: apple`, `fruit: banana`]
 //    it's translated as `fruit: [apple OR banana]`.
 //
-// Asteriks can be used for keys, values, or both key and value eg:
+// asterisks can be used for keys, values, or both key and value eg:
 //  - `fruit: *` match by key `fruit` with any value
 //  - `*: apple` match by value `apple` with any key
 //  - `*: *` match by any key and any value

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

@@ -64,7 +64,7 @@ export function IamPolicyView({
           </ButtonBlueText>
         </>
       ) : (
-        <Flex height="428px">
+        <Flex height="460px">
           {attempt.status === 'processing' && (
             <Flex width="404px" justifyContent="center" alignItems="center">
               <Indicator />
@@ -73,24 +73,9 @@ export function IamPolicyView({
           {attempt.status === 'success' && (
             <Box>
               <Text bold>
-                Run this AWS CLI command to create a IAM policy. <br />
-                Then attach this policy to appropriate AWS resources (eg.{' '}
-                <Link
-                  href="https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-create-and-attach-iam-policy.html"
-                  target="_blank"
-                >
-                  IAM users
-                </Link>
-                ,{' '}
-                <Link
-                  href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/iam-roles-for-amazon-ec2.html#attach-iam-role"
-                  target="_blank"
-                >
-                  ec2 instance
-                </Link>
-                ).
+                Run this AWS CLI command to create an IAM policy:
               </Text>
-              <Box mt={2} mb={1}>
+              <Box mt={2} mb={2}>
                 <TextSelectCopyMulti
                   lines={[
                     {
@@ -107,6 +92,25 @@ export function IamPolicyView({
                   ]}
                 />
               </Box>
+              <Text bold>
+                Then attach this policy to your AWS EC2 instance role.
+              </Text>
+              <Text>
+                See{' '}
+                <Link
+                  href="https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies_manage-attach-detach.html#add-policies-console"
+                  target="_blank"
+                >
+                  Attach policy to an IAM role
+                </Link>{' '}
+                and{' '}
+                <Link
+                  href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/iam-roles-for-amazon-ec2.html#attach-iam-role"
+                  target="_blank"
+                >
+                  Attach an IAM role to an instance
+                </Link>
+              </Text>
             </Box>
           )}
         </Flex>

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

@@ -376,7 +376,7 @@ function DbEngineInstructions({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;

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

@@ -168,7 +168,7 @@ export function TestConnectionView({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;

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

@@ -32,6 +32,7 @@ import { TestConnection } from 'teleport/Discover/Database/TestConnection';
 import { DiscoverEvent } from 'teleport/services/userEvent';
 import { ConnectAwsAccount } from 'teleport/Discover/Database/ConnectAwsAccount';
 import { EnrollRdsDatabase } from 'teleport/Discover/Database/EnrollRdsDatabase';
+import { IamPolicy } from 'teleport/Discover/Database/IamPolicy';
 
 export const DatabaseResource: ResourceViewConfig<ResourceSpec> = {
   kind: ResourceKind.Database,
@@ -70,6 +71,11 @@ export const DatabaseResource: ResourceViewConfig<ResourceSpec> = {
               component: DownloadScript,
               eventName: DiscoverEvent.DeployService,
             },
+            {
+              title: 'Configure IAM Policy',
+              component: IamPolicy,
+              eventName: DiscoverEvent.DatabaseConfigureIAMPolicy,
+            },
           ];
 
           break;

web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx

@@ -453,7 +453,7 @@ const InstallHelmChart = ({
 
 const StyledBox = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
   border: 2px solid #2f3659;

web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx

@@ -205,7 +205,7 @@ export function TestConnection({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;

web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx

@@ -113,7 +113,7 @@ export function TestConnection({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;

web/packages/teleport/src/Discover/Shared/CommandBox.tsx

@@ -21,10 +21,9 @@ import { Box, Text } from 'design';
 
 const Container = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
-  border: 2px solid #2f3659;
 `;
 
 interface CommandBoxProps {

web/packages/teleport/src/Discover/Shared/HintBox.tsx

@@ -25,25 +25,25 @@ import { TextIcon } from 'teleport/Discover/Shared/Text';
 
 const HintBoxContainer = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
   border: 2px solid ${props => props.theme.colors.warning}; ;
 `;
 
 export const WaitingInfo = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
-  border: 2px solid #2f3659;
+  border: 2px solid ${props => props.theme.colors.text.muted};
   display: flex;
   align-items: center;
 `;
 
 export const SuccessInfo = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
   border: 2px solid ${props => props.theme.colors.success};

web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx

@@ -146,7 +146,7 @@ export function SetupAccessWrapper({
 
 const StyledBox = styled(Box)`
   max-width: 700px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;

web/packages/teleport/src/Discover/Shared/Step.tsx

@@ -47,7 +47,7 @@ export function Step(props: StepProps) {
 }
 
 export const StepContainer = styled.div`
-  background: rgba(255, 255, 255, 0.05);
+  background: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 12px;

web/packages/teleport/src/Integrations/Enroll/AwsOidc/AwsOidc.tsx

@@ -105,7 +105,9 @@ enum InstructionStep {
 
 export function AwsOidc() {
   const ctx = useTeleport();
-  let clusterPublicUri = ctx.storeUser.state.cluster.publicURL;
+  let clusterPublicUri = getClusterPublicUri(
+    ctx.storeUser.state.cluster.publicURL
+  );
 
   const [stage, setStage] = useState(Stage.Initial);
   const [showRestartAnimation, setShowRestartAnimation] = useState(false);
@@ -359,3 +361,15 @@ function getStageConfig(stage: Stage) {
     };
   }
 }
+
+function getClusterPublicUri(uri: string) {
+  const uriParts = uri.split(':');
+  const port = uriParts.length > 1 ? uriParts[1] : '';
+
+  // Strip 443 ports from uri.
+  if (port === '443') {
+    return uriParts[0];
+  }
+
+  return uri;
+}

web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/IAMCreateNewPolicy.tsx

@@ -108,10 +108,13 @@ export function IAMCreateNewPolicy(props: CommonIAMProps) {
     "Version": "2012-10-17",
     "Statement": [
         {
-            "Effect": "Allow",
-            "Action": "rds:DescribeDBInstances",
-            "Resource": "*"
-        }
+          "Effect": "Allow",
+          "Action": [
+              "rds:DescribeDBInstances",
+              "rds:DescribeDBClusters"
+          ],
+          "Resource": "*"
+      }
     ]
 }`;
     }

web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx

@@ -60,7 +60,7 @@ export function SecondStageInstructions(props: CommonInstructionsProps) {
           bash={false}
           lines={[
             {
-              text: `https://${getClusterPublicUri(props.clusterPublicUri)}`,
+              text: `https://${props.clusterPublicUri}`,
             },
           ]}
         />
@@ -111,15 +111,3 @@ export function SecondStageInstructions(props: CommonInstructionsProps) {
     </InstructionsContainer>
   );
 }
-
-function getClusterPublicUri(uri: string) {
-  const uriParts = uri.split(':');
-  const port = uriParts.length > 1 ? uriParts[1] : '';
-
-  // Strip 443 ports from uri.
-  if (port === '443') {
-    return uriParts[0];
-  }
-
-  return uri;
-}

web/packages/teleport/src/Navigation/NavigationSwitcher.tsx

@@ -51,7 +51,7 @@ const ActiveValue = styled.div<OpenProps>`
   cursor: pointer;
 
   &:focus {
-    background: rgba(255, 255, 255, 0.05);
+    background: ${props => props.theme.colors.spotBackground[0]};
   }
 `;
 

web/packages/teleport/src/components/ToolTipNoPermBadge/ToolTipNoPermBadge.story.tsx

@@ -47,5 +47,5 @@ const SomeBox = styled.div`
   display: flex;
   position: relative;
   align-items: center;
-  background: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
 `;