diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx index 73c55b0b06eb9..566768325d086 100644 --- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx @@ -31,7 +31,7 @@ test('render', async () => { ); - expect(screen.getByText(/amazon web services/i)).toBeInTheDocument(); + expect(screen.getByText(/AWS OIDC Identity Provider/i)).toBeInTheDocument(); expect(screen.queryByText(/no permission/i)).not.toBeInTheDocument(); expect(screen.getAllByTestId('res-icon-aws')).toHaveLength(2); expect(screen.getAllByRole('link')).toHaveLength(2); diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx index d23e2914322c5..bc800611fc581 100644 --- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Text, Box, ResourceIcon } from 'design'; +import { Text, Flex } from 'design'; import cfg from 'teleport/config'; import { @@ -27,7 +27,7 @@ import { } from 'teleport/components/ToolTipNoPermBadge'; import { IntegrationKind } from 'teleport/services/integrations'; -import { IntegrationTile } from './common'; +import { IntegrationTile, IntegrationIcon } from './common'; export function IntegrationTiles({ hasIntegrationAccess = true, @@ -52,14 +52,12 @@ export function IntegrationTiles({ } data-testid="tile-aws-oidc" > - - - - - Amazon Web Services -
- OIDC -
+ + + + + AWS OIDC Identity Provider + {!hasIntegrationAccess && ( - - - - AWS External Audit Storage + + + + + AWS External Audit Storage + {renderExternalAuditStorageBadge( hasExternalAuditStorage, externalAuditStorageEnabled diff --git a/web/packages/teleport/src/Integrations/Enroll/common.tsx b/web/packages/teleport/src/Integrations/Enroll/common.tsx index d319aa07f83e2..ed61e93631fde 100644 --- a/web/packages/teleport/src/Integrations/Enroll/common.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/common.tsx @@ -17,7 +17,7 @@ */ import React from 'react'; -import { Box, Flex, H2 } from 'design'; +import { Box, Flex, H2, ResourceIcon } from 'design'; import styled from 'styled-components'; import { P } from 'design/Text/Text'; @@ -29,8 +29,10 @@ export const IntegrationTile = styled(Flex)<{ text-decoration: none; flex-direction: column; align-items: center; + justify-content: center; position: relative; border-radius: 4px; + padding: 15px 10px 6px 10px; height: 170px; width: 170px; background-color: ${({ theme }) => theme.colors.buttons.secondary.default}; @@ -60,3 +62,17 @@ export const NoCodeIntegrationDescription = () => (

); + +/** + * IntegrationIcon wraps ResourceIcon with css required for integration + * and plugin tiles. + */ +export const IntegrationIcon = styled(ResourceIcon)<{ size?: number }>` + display: inline-block; + height: 100%; + ${({ size }) => + size && + ` + max-height: ${size}px; + `} +`;