WebUI: Align integration and plugin tiles (#49029)

* align integration and plugin tiles * update integrationtile test
gravitational · Nov 15, 2024 · deedeb7 · deedeb7
1 parent 9356889
commit deedeb7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git 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 () => {
     </MemoryRouter>
   );
 
-  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
@@ -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"
       >
-        <Box mt={3} mb={2}>
-          <ResourceIcon name="aws" width="80px" />
-        </Box>
-        <Text>
-          Amazon Web Services
-          <br />
-          OIDC
-        </Text>
+        <Flex flexBasis={100}>
+          <IntegrationIcon name="aws" />
+        </Flex>
+        <Flex flexBasis={50}>
+          <Text>AWS OIDC Identity Provider</Text>
+        </Flex>
         {!hasIntegrationAccess && (
           <ToolTipNoPermBadge
             children={
@@ -85,10 +83,12 @@ export function IntegrationTiles({
           }
           data-testid="tile-external-audit-storage"
         >
-          <Box mt={3} mb={2}>
-            <ResourceIcon name="aws" width="80px" />
-          </Box>
-          <Text>AWS External Audit Storage</Text>
+          <Flex flexBasis={100}>
+            <IntegrationIcon name="aws" />
+          </Flex>
+          <Flex flexBasis={50}>
+            <Text>AWS External Audit Storage</Text>
+          </Flex>
           {renderExternalAuditStorageBadge(
             hasExternalAuditStorage,
             externalAuditStorageEnabled

diff --git 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 = () => (
     </P>
   </Box>
 );
+
+/**
+ * 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;
+  `}
+`;