Web: add a tooltip summary for aws oidc configure step (#46934)

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

@@ -47,6 +47,7 @@ import {
 import cfg from 'teleport/config';
 
 import { FinishDialog } from './FinishDialog';
+import { ConfigureAwsOidcSummary } from './ConfigureAwsOidcSummary';
 
 export function AwsOidc() {
   const [integrationName, setIntegrationName] = useState('');
@@ -219,7 +220,13 @@ export function AwsOidc() {
             {scriptUrl && (
               <>
                 <Container mb={5}>
-                  <Text bold>Step 2</Text>
+                  <Flex gap={1} alignItems="center">
+                    <Text bold>Step 2</Text>
+                    <ConfigureAwsOidcSummary
+                      roleName={roleName}
+                      integrationName={integrationName}
+                    />
+                  </Flex>
                   <Text mb={2}>
                     Open{' '}
                     <Link

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

@@ -0,0 +1,87 @@
+/**
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import styled from 'styled-components';
+import { Flex, Box, H3, Text } from 'design';
+import TextEditor from 'shared/components/TextEditor';
+import { ToolTipInfo } from 'shared/components/ToolTip';
+
+import useStickyClusterId from 'teleport/useStickyClusterId';
+
+export function ConfigureAwsOidcSummary({
+  roleName,
+  integrationName,
+}: {
+  roleName: string;
+  integrationName: string;
+}) {
+  const { clusterId } = useStickyClusterId();
+
+  const json = `{
+    "name": ${roleName},
+    "description": "Used by Teleport to provide access to AWS resources.",
+    "trust_policy": {
+        "Version": "2012-10-17",
+        "Statement": [
+            {
+                "Effect": "Allow",
+                "Action": "sts:AssumeRoleWithWebIdentity",
+                "Principal": {
+                    "Federated": "<YOUR_ACCOUNT_ID>":oidc-provider/${roleName}",
+                },
+                "Condition": {
+                    "StringEquals": {
+                        "${clusterId}:aud": "discover.teleport",
+                    }
+                }
+            }
+        ]
+    },
+    "tags": {
+        "teleport.dev/cluster": "${clusterId}",
+        "teleport.dev/integration": "${integrationName}",
+        "teleport.dev/origin": "integration_awsoidc"
+    }
+}`;
+
+  return (
+    <ToolTipInfo sticky={true} maxWidth={800}>
+      <H3 mb={2}>Running the command in AWS CloudShell does the following:</H3>
+      <Text>1. Configures an AWS IAM OIDC Identity Provider (IdP)</Text>
+      <Text>
+        2. Configures an IAM role named "{roleName}" to trust the IdP:
+      </Text>
+      <Box mb={2}>
+        <EditorWrapper>
+          <TextEditor
+            readOnly={true}
+            data={[{ content: json, type: 'json' }]}
+            bg="levels.deep"
+          />
+        </EditorWrapper>
+      </Box>
+    </ToolTipInfo>
+  );
+}
+
+const EditorWrapper = styled(Flex)`
+  height: 300px;
+  margin-top: ${p => p.theme.space[3]}px;
+  width: 700px;
+`;