diff --git a/web/packages/design/src/Icon/Icon.story.js b/web/packages/design/src/Icon/Icon.story.js index 650176c1fd687..ab0fe295e0b01 100644 --- a/web/packages/design/src/Icon/Icon.story.js +++ b/web/packages/design/src/Icon/Icon.story.js @@ -24,7 +24,7 @@ export default { title: 'Design/Icon', }; -export const ListOfIcons = () => ( +export const DeprecatedIcons = () => ( diff --git a/web/packages/design/src/SVGIcon/AWS.tsx b/web/packages/design/src/SVGIcon/AWS.tsx index 4a175a96bc682..f547ce0114168 100644 --- a/web/packages/design/src/SVGIcon/AWS.tsx +++ b/web/packages/design/src/SVGIcon/AWS.tsx @@ -16,33 +16,36 @@ limitations under the License. import React from 'react'; +import { SVGIcon } from './SVGIcon'; + import type { SVGIconProps } from './common'; -export function AWSIcon({ size = 24, fill = 'white' }: SVGIconProps) { +export function AWSIcon({ size = 24, fill }: SVGIconProps) { return ( - - + - + ); } diff --git a/web/packages/design/src/SVGIcon/SVGIcon.tsx b/web/packages/design/src/SVGIcon/SVGIcon.tsx index 10edc11669bc6..239adae64a015 100644 --- a/web/packages/design/src/SVGIcon/SVGIcon.tsx +++ b/web/packages/design/src/SVGIcon/SVGIcon.tsx @@ -29,6 +29,7 @@ export function SVGIcon({ return ( { + const icons = Object.keys(SvgIcons); + return ( + + {icons.map(icon => { + // eslint-disable-next-line import/namespace + return ; + })} + + ); +}; + +const IconBox = ({ Icon, text }) => ( + + + + + {text} + +); diff --git a/web/packages/design/src/SVGIcon/index.ts b/web/packages/design/src/SVGIcon/index.ts index 82d788b83b1ab..4b1f1ba397abc 100644 --- a/web/packages/design/src/SVGIcon/index.ts +++ b/web/packages/design/src/SVGIcon/index.ts @@ -21,15 +21,16 @@ export { ApplicationsIcon } from './Applications'; export { AuditLogIcon } from './AuditLog'; export { AuthConnectorsIcon } from './AuthConnectors'; export { AWSIcon } from './AWS'; -export { LockIcon } from './Lock'; export { ChevronRightIcon } from './ChevronRight'; +export { ChevronDownIcon } from './ChevronDown'; export { DatabasesIcon } from './Databases'; -export { DevicesIcon } from './Devices'; export { DesktopsIcon } from './Desktops'; +export { DevicesIcon } from './Devices'; export { DownloadsIcon } from './Downloads'; export { ExternalLinkIcon } from './ExternalLink'; export { IntegrationsIcon } from './Integrations'; export { KubernetesIcon } from './Kubernetes'; +export { LockIcon } from './Lock'; export { LogoutIcon } from './Logout'; export { ManageClustersIcon } from './ManageClusters'; export { RolesIcon } from './Roles'; diff --git a/web/packages/design/src/assets/images/icons/aws.svg b/web/packages/design/src/assets/images/icons/aws.svg deleted file mode 100644 index 293635d0851c6..0000000000000 --- a/web/packages/design/src/assets/images/icons/aws.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap index 41d03345925c3..ee60c86353484 100644 --- a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap +++ b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap @@ -8,7 +8,7 @@ exports[`render with URL loc state set to "server" 1`] = ` font-size: 18px; } -.c20 { +.c19 { display: inline-block; transition: color 0.3s; color: #FFFFFF; @@ -68,7 +68,7 @@ exports[`render with URL loc state set to "server" 1`] = ` margin: 0px; } -.c22 { +.c21 { overflow: hidden; text-overflow: ellipsis; font-weight: 600; @@ -76,7 +76,7 @@ exports[`render with URL loc state set to "server" 1`] = ` color: #FFFFFF; } -.c23 { +.c22 { overflow: hidden; text-overflow: ellipsis; font-size: 12px; @@ -84,7 +84,7 @@ exports[`render with URL loc state set to "server" 1`] = ` margin-top: 40px; } -.c21 { +.c20 { color: #009EFF; font-weight: normal; background: none; @@ -92,7 +92,7 @@ exports[`render with URL loc state set to "server" 1`] = ` text-transform: none; } -.c24 { +.c23 { color: #009EFF; font-weight: normal; background: none; @@ -108,13 +108,6 @@ exports[`render with URL loc state set to "server" 1`] = ` height: 24px; } -.c19 { - display: block; - outline: none; - width: 24.65px; - height: 14.36px; -} - .c13 { box-sizing: border-box; padding-left: 8px; @@ -416,12 +409,30 @@ exports[`render with URL loc state set to "server" 1`] = ` class="c14" width="24px" > - + + + + +
@@ -481,7 +492,7 @@ exports[`render with URL loc state set to "server" 1`] = `
Redshift Serverless @@ -521,7 +532,7 @@ exports[`render with URL loc state set to "server" 1`] = `
SQL Server (Preview) @@ -561,7 +572,7 @@ exports[`render with URL loc state set to "server" 1`] = `
Looking for something else? - + + + + +
@@ -1167,12 +1189,30 @@ exports[`render with all access 1`] = ` class="c10" width="24px" > - + + + + +
- + + + + +
- + + + + +
- + + + + +
- + + + + +
- + + + + +
- + + + + +
@@ -2885,12 +3044,30 @@ exports[`render with no access 1`] = ` class="c11" width="24px" > - + + + + +
- + + + + +
- + + + + +
- + + + + +
- + + + + +
- + + + + +
- + + + + +
@@ -4729,11 +5025,11 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -4745,12 +5041,30 @@ exports[`render with partial access 1`] = ` class="c10" width="24px" > - + + + + +
Lacking Permissions @@ -4787,12 +5101,30 @@ exports[`render with partial access 1`] = ` class="c10" width="24px" > - + + + + +
Lacking Permissions @@ -4829,12 +5161,30 @@ exports[`render with partial access 1`] = ` class="c10" width="24px" > - + + + + +
Lacking Permissions @@ -4871,12 +5221,30 @@ exports[`render with partial access 1`] = ` class="c10" width="24px" > - + + + + +
Lacking Permissions @@ -4939,11 +5307,11 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -4981,13 +5349,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5026,13 +5394,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5044,12 +5412,30 @@ exports[`render with partial access 1`] = ` class="c10" width="24px" > - + + + + +
Lacking Permissions @@ -5089,12 +5475,30 @@ exports[`render with partial access 1`] = ` class="c10" width="24px" > - + + + + +
Lacking Permissions @@ -5161,13 +5565,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5206,13 +5610,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5251,13 +5655,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5296,13 +5700,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5341,13 +5745,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5386,13 +5790,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5431,13 +5835,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5476,13 +5880,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5521,13 +5925,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5560,13 +5964,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5605,13 +6009,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5650,13 +6054,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5695,13 +6099,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5740,13 +6144,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5785,13 +6189,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5830,13 +6234,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5869,13 +6273,13 @@ exports[`render with partial access 1`] = `
Lacking Permissions @@ -5887,12 +6291,30 @@ exports[`render with partial access 1`] = ` class="c10" width="24px" > - + + + + +
Lacking Permissions @@ -5959,13 +6381,13 @@ exports[`render with partial access 1`] = `
Looking for something else? , Application: , Database: , - Aws: , + Aws: , Azure: , Cockroach: , Dynamo: , diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx index 8113c4c20143d..c15ddb341ff72 100644 --- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.test.tsx @@ -29,7 +29,7 @@ test('render', async () => { expect(screen.getByText(/amazon web services/i)).toBeInTheDocument(); expect(screen.queryByText(/no permission/i)).not.toBeInTheDocument(); - expect(screen.getByRole('img')).toBeInTheDocument(); + expect(screen.getByTestId('svg')).toBeInTheDocument(); expect(screen.getByRole('link')).toBeInTheDocument(); const tile = screen.getByTestId('tile'); diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx index c3baeb019c989..a9c094197fecc 100644 --- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx @@ -16,8 +16,8 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Text, Image } from 'design'; -import awsIcon from 'design/assets/images/icons/aws.svg'; +import { Text, Box } from 'design'; +import { AWSIcon } from 'design/SVGIcon'; import cfg from 'teleport/config'; import { ToolTipNoPermBadge } from 'teleport/components/ToolTipNoPermBadge'; @@ -42,7 +42,9 @@ export function IntegrationTiles({ : null } > - + + + Amazon Web Services
diff --git a/web/packages/teleport/src/Integrations/IntegrationList.tsx b/web/packages/teleport/src/Integrations/IntegrationList.tsx index 18ed2dfae80e3..bbf90865904f2 100644 --- a/web/packages/teleport/src/Integrations/IntegrationList.tsx +++ b/web/packages/teleport/src/Integrations/IntegrationList.tsx @@ -18,7 +18,7 @@ import React from 'react'; import styled from 'styled-components'; import { Box, Flex, Image } from 'design'; -import awsIcon from 'design/assets/images/icons/aws.svg'; +import { AWSIcon } from 'design/SVGIcon'; import slackIcon from 'design/assets/images/icons/slack.svg'; import Table, { Cell } from 'design/DataTable'; import { MenuButton, MenuItem } from 'shared/components/MenuAction'; @@ -176,7 +176,11 @@ const IconCell = ({ item }: { item: IntegrationLike }) => { switch (item.kind) { case IntegrationKind.AwsOidc: formattedText = item.name; - icon = ; + icon = ( + + + + ); break; } } @@ -197,5 +201,9 @@ const IconCell = ({ item }: { item: IntegrationLike }) => { const IconContainer = styled(Image)` width: 22px; - padding-right: 8px; + margin-right: 10px; +`; + +const SvgIconContainer = styled(Flex)` + margin-right: 10px; `;