diff --git a/web/packages/design/src/Icon/IconCircle.tsx b/web/packages/design/src/Icon/IconCircle.tsx index 147300a35511d..55e94a58355f2 100644 --- a/web/packages/design/src/Icon/IconCircle.tsx +++ b/web/packages/design/src/Icon/IconCircle.tsx @@ -55,7 +55,7 @@ export const IconCircle = ({ Icon, bg, size, fill }: IconCircleProps) => { width={size} height={size} > - + ); }; diff --git a/web/packages/design/src/Icon/Icons.story.tsx b/web/packages/design/src/Icon/Icons.story.tsx index 42002a906c9ba..1abe023ff0313 100644 --- a/web/packages/design/src/Icon/Icons.story.tsx +++ b/web/packages/design/src/Icon/Icons.story.tsx @@ -51,6 +51,7 @@ export const Icons = () => ( + diff --git a/web/packages/design/src/Icon/Icons/ArrowSquareOut.tsx b/web/packages/design/src/Icon/Icons/ArrowSquareOut.tsx new file mode 100644 index 0000000000000..473f8f12a2dda --- /dev/null +++ b/web/packages/design/src/Icon/Icons/ArrowSquareOut.tsx @@ -0,0 +1,68 @@ +/** + * Teleport + * Copyright (C) 2023 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 . + */ + +/* MIT License + +Copyright (c) 2020 Phosphor Icons + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +*/ + +import React from 'react'; + +import { Icon, IconProps } from '../Icon'; + +/* + +THIS FILE IS GENERATED. DO NOT EDIT. + +*/ + +export function ArrowSquareOut({ size = 24, color, ...otherProps }: IconProps) { + return ( + + + + ); +} diff --git a/web/packages/design/src/Icon/assets/ArrowSquareOut.svg b/web/packages/design/src/Icon/assets/ArrowSquareOut.svg new file mode 100644 index 0000000000000..7058035985727 --- /dev/null +++ b/web/packages/design/src/Icon/assets/ArrowSquareOut.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/packages/design/src/Icon/index.ts b/web/packages/design/src/Icon/index.ts index 73318bc91288f..694c16b4e857b 100644 --- a/web/packages/design/src/Icon/index.ts +++ b/web/packages/design/src/Icon/index.ts @@ -39,6 +39,7 @@ export { ArrowFatLinesUp } from './Icons/ArrowFatLinesUp'; export { ArrowForward } from './Icons/ArrowForward'; export { ArrowLeft } from './Icons/ArrowLeft'; export { ArrowRight } from './Icons/ArrowRight'; +export { ArrowSquareOut } from './Icons/ArrowSquareOut'; export { ArrowUp } from './Icons/ArrowUp'; export { ArrowsIn } from './Icons/ArrowsIn'; export { ArrowsOut } from './Icons/ArrowsOut'; diff --git a/web/packages/design/src/ResourceIcon/assets/ansible-dark.svg b/web/packages/design/src/ResourceIcon/assets/ansible-dark.svg new file mode 100644 index 0000000000000..65ca51cd2c281 --- /dev/null +++ b/web/packages/design/src/ResourceIcon/assets/ansible-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/packages/design/src/ResourceIcon/assets/ansible-light.svg b/web/packages/design/src/ResourceIcon/assets/ansible-light.svg new file mode 100644 index 0000000000000..fe6ae0ba3b955 --- /dev/null +++ b/web/packages/design/src/ResourceIcon/assets/ansible-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/packages/design/src/ResourceIcon/assets/auth0-dark.svg b/web/packages/design/src/ResourceIcon/assets/auth0-dark.svg new file mode 100644 index 0000000000000..37e34ce2c576c --- /dev/null +++ b/web/packages/design/src/ResourceIcon/assets/auth0-dark.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/packages/design/src/ResourceIcon/assets/auth0-light.svg b/web/packages/design/src/ResourceIcon/assets/auth0-light.svg new file mode 100644 index 0000000000000..e8b28497c7ca7 --- /dev/null +++ b/web/packages/design/src/ResourceIcon/assets/auth0-light.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/packages/design/src/ResourceIcon/assets/onelogin-dark.svg b/web/packages/design/src/ResourceIcon/assets/onelogin-dark.svg new file mode 100644 index 0000000000000..445908c0508f1 --- /dev/null +++ b/web/packages/design/src/ResourceIcon/assets/onelogin-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/packages/design/src/ResourceIcon/assets/onelogin-light.svg b/web/packages/design/src/ResourceIcon/assets/onelogin-light.svg new file mode 100644 index 0000000000000..bd026190ab91f --- /dev/null +++ b/web/packages/design/src/ResourceIcon/assets/onelogin-light.svg @@ -0,0 +1,4 @@ + + + + diff --git a/web/packages/design/src/ResourceIcon/icons.ts b/web/packages/design/src/ResourceIcon/icons.ts index e9803ad24e662..8595076221a6c 100644 --- a/web/packages/design/src/ResourceIcon/icons.ts +++ b/web/packages/design/src/ResourceIcon/icons.ts @@ -27,6 +27,8 @@ import algoliaDark from './assets/algolia-dark.svg'; import algoliaLight from './assets/algolia-light.svg'; import altisalesDark from './assets/altisales-dark.svg'; import altisalesLight from './assets/altisales-light.svg'; +import ansibleDark from './assets/ansible-dark.svg'; +import ansibleLight from './assets/ansible-light.svg'; import anthem from './assets/anthem.svg'; import apolloIoDark from './assets/apollo.io-dark.svg'; import apolloIoLight from './assets/apollo.io-light.svg'; @@ -40,6 +42,8 @@ import atlassianbitbucket from './assets/atlassianbitbucket.svg'; import atlassianjiraservicemanagement from './assets/atlassianjiraservicemanagement.svg'; import atlassianstatuspage from './assets/atlassianstatuspage.svg'; import atlassian from './assets/atlassian.svg'; +import auth0Dark from './assets/auth0-dark.svg'; +import auth0Light from './assets/auth0-light.svg'; import avalara from './assets/avalara.svg'; import awsDark from './assets/aws-dark.svg'; import awsLight from './assets/aws-light.svg'; @@ -206,6 +210,8 @@ import oasisopen from './assets/oasisopen.svg'; import oktaDark from './assets/okta-dark.svg'; import oktaLight from './assets/okta-light.svg'; import onehundredonedomain from './assets/onehundredonedomain.svg'; +import oneloginDark from './assets/onelogin-dark.svg'; +import oneloginLight from './assets/onelogin-light.svg'; import onepasswordDark from './assets/onepassword-dark.svg'; import onepasswordLight from './assets/onepassword-light.svg'; import opencomp from './assets/opencomp.svg'; @@ -307,6 +313,8 @@ export { algoliaLight, altisalesDark, altisalesLight, + ansibleDark, + ansibleLight, anthem, apolloIoDark, apolloIoLight, @@ -320,6 +328,8 @@ export { atlassianjiraservicemanagement, atlassianstatuspage, atlassian, + auth0Dark, + auth0Light, avalara, awsDark, awsLight, @@ -486,6 +496,8 @@ export { oktaDark, oktaLight, onehundredonedomain, + oneloginDark, + oneloginLight, onepasswordDark, onepasswordLight, opencomp, diff --git a/web/packages/design/src/ResourceIcon/index.tsx b/web/packages/design/src/ResourceIcon/index.tsx index 198a8663726bb..209b1c7f641d2 100644 --- a/web/packages/design/src/ResourceIcon/index.tsx +++ b/web/packages/design/src/ResourceIcon/index.tsx @@ -45,7 +45,7 @@ export const ResourceIcon = ({ name, ...props }: ResourceIconProps) => { if (!icon) { return null; } - return ; + return ; }; export { type ResourceIconName, resourceIconSpecs, iconNames }; diff --git a/web/packages/design/src/ResourceIcon/resourceIconSpecs.ts b/web/packages/design/src/ResourceIcon/resourceIconSpecs.ts index 1b4ea1f4df45e..80007e3a1e4c8 100644 --- a/web/packages/design/src/ResourceIcon/resourceIconSpecs.ts +++ b/web/packages/design/src/ResourceIcon/resourceIconSpecs.ts @@ -45,6 +45,7 @@ export const resourceIconSpecs = { airtable: forAllThemes(i.airtable), algolia: { dark: i.algoliaDark, light: i.algoliaLight }, altisales: { dark: i.altisalesDark, light: i.altisalesLight }, + ansible: { dark: i.ansibleDark, light: i.ansibleLight }, anthem: forAllThemes(i.anthem), 'apollo.io': { dark: i.apolloIoDark, light: i.apolloIoLight }, apple: { dark: i.appleDark, light: i.appleLight }, @@ -55,6 +56,7 @@ export const resourceIconSpecs = { atlassianbitbucket: forAllThemes(i.atlassianbitbucket), atlassianjiraservice: forAllThemes(i.atlassianjiraservicemanagement), atlassianstatus: forAllThemes(i.atlassianstatuspage), + auth0: { dark: i.auth0Dark, light: i.auth0Light }, avalara: forAllThemes(i.avalara), aws: { dark: i.awsDark, light: i.awsLight }, azure: forAllThemes(i.azure), @@ -193,6 +195,7 @@ export const resourceIconSpecs = { oasisopen: forAllThemes(i.oasisopen), okta: { dark: i.oktaDark, light: i.oktaLight }, '101domain': forAllThemes(i.onehundredonedomain), + onelogin: { dark: i.oneloginDark, light: i.oneloginLight }, '1password': { dark: i.onepasswordDark, light: i.onepasswordLight }, opencomp: forAllThemes(i.opencomp), openid: forAllThemes(i.openid), diff --git a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx index aee1d51313940..f73faed2a987b 100644 --- a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx +++ b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx @@ -17,9 +17,8 @@ */ import React from 'react'; -import { Box, ButtonPrimary, Flex, Text } from 'design'; +import { Box, ButtonPrimary, Flex, ResourceIcon, Text } from 'design'; import { MenuIcon, MenuItem } from 'shared/components/MenuAction'; -import { GitHubIcon } from 'design/SVGIcon'; import { State as ResourceState } from 'teleport/components/useResources'; @@ -69,7 +68,7 @@ function ConnectorListItem({ name, id, onEdit, onDelete }) { style={{ textAlign: 'center' }} > - + {name} diff --git a/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx b/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx index 3f64691b706b6..19087664eb2b2 100644 --- a/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx +++ b/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx @@ -17,8 +17,7 @@ */ import React from 'react'; -import { Card, Flex, Text } from 'design'; -import { GitHubIcon } from 'design/SVGIcon'; +import { Card, Flex, ResourceIcon, Text } from 'design'; import { AuthProviderType } from 'shared/services'; import { ConnectorBox } from 'teleport/AuthConnectors/styles/ConnectorBox.styles'; @@ -62,7 +61,7 @@ function renderGithubConnector(onCreate) { - + @@ -83,13 +82,7 @@ function renderLockedItem(kind: AuthProviderType) { return ( - + diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-amazon.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-amazon.svg deleted file mode 100644 index 00687540b0892..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-amazon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-gitlab.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-gitlab.svg deleted file mode 100644 index ea65ef013cb28..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-gitlab.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-google.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-google.svg deleted file mode 100644 index 52a640e50e66d..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-google.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-windows.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-windows.svg deleted file mode 100644 index 3c4725da9bf71..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/oidc-windows.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-auth0.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-auth0.svg deleted file mode 100644 index 3970b3f5ceb23..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-auth0.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-azuread.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-azuread.svg deleted file mode 100644 index 5ea6c2162729f..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-azuread.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-okta.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-okta.svg deleted file mode 100644 index b13e312b8fa92..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-okta.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-one.svg b/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-one.svg deleted file mode 100644 index a2b206e445403..0000000000000 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/assets/saml-one.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/web/packages/teleport/src/AuthConnectors/ssoIcons/getSsoIcon.tsx b/web/packages/teleport/src/AuthConnectors/ssoIcons/getSsoIcon.tsx index 529981ce986a2..01101bff5ee94 100644 --- a/web/packages/teleport/src/AuthConnectors/ssoIcons/getSsoIcon.tsx +++ b/web/packages/teleport/src/AuthConnectors/ssoIcons/getSsoIcon.tsx @@ -19,17 +19,7 @@ import React from 'react'; import styled from 'styled-components'; import { AuthProviderType } from 'shared/services'; -import { GitHubIcon } from 'design/SVGIcon'; -import { Box, Flex, Image } from 'design'; - -import iconAuth0 from './assets/saml-auth0.svg'; -import iconAzureAD from './assets/saml-azuread.svg'; -import iconOkta from './assets/saml-okta.svg'; -import iconOneLogin from './assets/saml-one.svg'; -import iconAmazon from './assets/oidc-amazon.svg'; -import iconGitlab from './assets/oidc-gitlab.svg'; -import iconGoogle from './assets/oidc-google.svg'; -import iconWindows from './assets/oidc-windows.svg'; +import { Box, Flex, ResourceIcon } from 'design'; export default function getSsoIcon(kind: AuthProviderType) { const desc = formatConnectorTypeDesc(kind); @@ -37,14 +27,9 @@ export default function getSsoIcon(kind: AuthProviderType) { switch (kind) { case 'github': return { - SsoIcon: props => ( - - + SsoIcon: () => ( + + ), desc, @@ -55,16 +40,16 @@ export default function getSsoIcon(kind: AuthProviderType) { SsoIcon: () => ( - + - + - + - + ), @@ -77,16 +62,16 @@ export default function getSsoIcon(kind: AuthProviderType) { SsoIcon: () => ( - + - + - + - + ), @@ -105,7 +90,7 @@ function formatConnectorTypeDesc(kind) { } const MultiIconContainer = styled(Flex)` - width: 67px; + width: 83px; flex-wrap: wrap; gap: 3px; padding: 7px; @@ -114,10 +99,15 @@ const MultiIconContainer = styled(Flex)` `; const SmIcon = styled(Box)` - width: ${p => p.theme.space[4]}px; - height: ${p => p.theme.space[4]}px; - line-height: ${p => p.theme.space[4]}px; - background: white; - color: black; + width: ${p => p.theme.space[5]}px; + height: ${p => p.theme.space[5]}px; + line-height: ${p => p.theme.space[5]}px; + background: ${p => p.theme.colors.levels.popout}; border-radius: 50%; + display: flex; + justify-content: center; `; + +const StyledResourceIcon = styled(ResourceIcon).attrs({ + width: '20px', +})``; diff --git a/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx b/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx index ec5dbef408437..8b5d1c12a6c38 100644 --- a/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx +++ b/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx @@ -20,20 +20,9 @@ import React from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import { - AnsibleIcon, - AWSIcon, - AzureIcon, - CircleCIIcon, - GCPIcon, - GitHubIcon, - GitLabIcon, - JenkinsIcon, - KubernetesIcon, - ServersIcon, - SpaceliftIcon, -} from 'design/SVGIcon'; -import { Box, Flex, Link as ExternalLink, Text } from 'design'; +import { Box, Flex, Link as ExternalLink, Text, ResourceIcon } from 'design'; + +import { Server } from 'design/Icon'; import cfg from 'teleport/config'; @@ -58,81 +47,83 @@ type BotIntegration = { kind: IntegrationEnrollKind; }; +const StyledResourceIcon = styled(ResourceIcon).attrs({ width: '80px' })``; + const integrations: BotIntegration[] = [ { title: 'GitHub Actions + SSH', link: cfg.getBotsNewRoute(BotFlowType.GitHubActions), - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDGitHubActions, guided: true, }, { title: 'CircleCI', link: 'https://goteleport.com/docs/machine-id/deployment/circleci/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDCircleCI, guided: false, }, { title: 'GitLab CI/CD', link: 'https://goteleport.com/docs/machine-id/deployment/gitlab/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDGitLab, guided: false, }, { title: 'Jenkins', link: 'https://goteleport.com/docs/machine-id/deployment/jenkins/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDJenkins, guided: false, }, { title: 'Ansible', link: 'https://goteleport.com/docs/machine-id/access-guides/ansible/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDAnsible, guided: false, }, { title: 'Spacelift', link: 'https://goteleport.com/docs/machine-id/deployment/spacelift/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDSpacelift, guided: false, }, { title: 'AWS', link: 'https://goteleport.com/docs/machine-id/deployment/aws/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDAWS, guided: false, }, { title: 'GCP', link: 'https://goteleport.com/docs/machine-id/deployment/gcp/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDGCP, guided: false, }, { title: 'Azure', link: 'https://goteleport.com/docs/machine-id/deployment/azure/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDAzure, guided: false, }, { title: 'Kubernetes', link: 'https://goteleport.com/docs/machine-id/deployment/kubernetes/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineIDKubernetes, guided: false, }, { title: 'Generic', link: 'https://goteleport.com/docs/machine-id/getting-started/', - icon: , + icon: , kind: IntegrationEnrollKind.MachineID, guided: false, }, diff --git a/web/packages/teleport/src/Bots/Add/GitHubActions/GitHubActions.tsx b/web/packages/teleport/src/Bots/Add/GitHubActions/GitHubActions.tsx index a0804abc4042c..21f43f51a8fd6 100644 --- a/web/packages/teleport/src/Bots/Add/GitHubActions/GitHubActions.tsx +++ b/web/packages/teleport/src/Bots/Add/GitHubActions/GitHubActions.tsx @@ -15,14 +15,7 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ - -import { GitHubIcon } from 'design/SVGIcon'; - -import { BotFlowType } from 'teleport/Bots/types'; - -import cfg from 'teleport/config'; - -import { IntegrationEnrollKind } from 'teleport/services/userEvent'; +import { ResourceIcon } from 'design/ResourceIcon'; import { GuidedFlow, View } from '../Shared/GuidedFlow'; @@ -33,14 +26,6 @@ import { AddBotToWorkflow } from './AddBotToWorkflow'; import { Finish } from './Finish'; import { GitHubFlowProvider } from './useGitHubFlow'; -export const GitHubActionsFlow = { - title: 'GitHub Actions', - link: cfg.getBotsNewRoute(BotFlowType.GitHubActions), - icon: , - kind: IntegrationEnrollKind.MachineIDGitHubActions, - guided: true, -}; - const views: View[] = [ { name: 'Configure Bot Access', @@ -65,9 +50,9 @@ export function GitHubActions() { } + icon={} views={views} - name={GitHubActionsFlow.title} + name="GitHub Actions" /> ); diff --git a/web/packages/teleport/src/Bots/Add/GitHubActions/index.ts b/web/packages/teleport/src/Bots/Add/GitHubActions/index.ts index d7643d85640ce..af98f36257a65 100644 --- a/web/packages/teleport/src/Bots/Add/GitHubActions/index.ts +++ b/web/packages/teleport/src/Bots/Add/GitHubActions/index.ts @@ -16,5 +16,5 @@ * along with this program. If not, see . */ -export { GitHubActions as default, GitHubActionsFlow } from './GitHubActions'; +export { GitHubActions as default } from './GitHubActions'; export { ConnectGitHub as ConfigureBot } from './ConnectGitHub'; diff --git a/web/packages/teleport/src/Bots/List/EmptyState/EmptyState.tsx b/web/packages/teleport/src/Bots/List/EmptyState/EmptyState.tsx index 0d45db1cd757b..597a3f3faabae 100644 --- a/web/packages/teleport/src/Bots/List/EmptyState/EmptyState.tsx +++ b/web/packages/teleport/src/Bots/List/EmptyState/EmptyState.tsx @@ -19,7 +19,6 @@ import React, { useState, useEffect } from 'react'; import styled, { useTheme } from 'styled-components'; import { Link } from 'react-router-dom'; -import { GitHubIcon, SpaceliftIcon, AnsibleIcon } from 'design/SVGIcon'; import { ResourceIcon } from 'design/ResourceIcon'; import { Description, @@ -190,15 +189,15 @@ const integrationsTop = [ const integrationsBottom = [ { title: 'GitHub', - icon: , + icon: , }, { title: 'Ansible', - icon: , + icon: , }, { title: 'Spacelift', - icon: , + icon: , }, ]; diff --git a/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx b/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx index f775103775c82..db45bdd3c3cd4 100644 --- a/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx +++ b/web/packages/teleport/src/DeviceTrust/DeviceTrustLocked.tsx @@ -23,9 +23,7 @@ import { Box, Text, Flex, Link } from 'design'; import { IconCircle } from 'design/Icon/IconCircle'; -import { Windows, Linux, Apple } from 'design/Icon'; - -import { LockIcon } from 'design/SVGIcon'; +import { Windows, Linux, Apple, Lock } from 'design/Icon'; import Table, { Cell } from 'design/DataTable'; @@ -66,7 +64,7 @@ export function DeviceTrustLocked() { - + Device Trust enables trusted and authenticated device access. When 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 0469ca350eb2d..16e3d3d587789 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 @@ -296,6 +296,7 @@ exports[`render with URL loc state set to "server" 1`] = ` > { expect(screen.getByText(/amazon web services/i)).toBeInTheDocument(); expect(screen.queryByText(/no permission/i)).not.toBeInTheDocument(); - expect(screen.getAllByTestId('svg')).toHaveLength(2); + expect(screen.getAllByTestId('res-icon-aws')).toHaveLength(2); expect(screen.getAllByRole('link')).toHaveLength(2); const tile = screen.getByTestId('tile-aws-oidc'); diff --git a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx index 1cb76ff971749..6ada1cdf83dc7 100644 --- a/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/IntegrationTiles.tsx @@ -18,8 +18,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Text, Box } from 'design'; -import { AWSIcon } from 'design/SVGIcon'; +import { Text, Box, ResourceIcon } from 'design'; import cfg from 'teleport/config'; import { @@ -55,7 +54,7 @@ export function IntegrationTiles({ data-testid="tile-aws-oidc" > - + Amazon Web Services @@ -88,7 +87,7 @@ export function IntegrationTiles({ data-testid="tile-external-audit-storage" > - + AWS External Audit Storage {renderExternalAuditStorageBadge( diff --git a/web/packages/teleport/src/Integrations/IntegrationList.tsx b/web/packages/teleport/src/Integrations/IntegrationList.tsx index 5c6a5fa67ec86..26a0e376af26f 100644 --- a/web/packages/teleport/src/Integrations/IntegrationList.tsx +++ b/web/packages/teleport/src/Integrations/IntegrationList.tsx @@ -22,7 +22,6 @@ import { useHistory } from 'react-router'; import { Link as InternalRouteLink } from 'react-router-dom'; import { Box, Flex } from 'design'; -import { AWSIcon, AzureIcon } from 'design/SVGIcon'; import Table, { Cell } from 'design/DataTable'; import { MenuButton, MenuItem } from 'shared/components/MenuAction'; import { ToolTipInfo } from 'shared/components/ToolTip'; @@ -347,19 +346,11 @@ const IconCell = ({ item }: { item: IntegrationLike }) => { case IntegrationKind.AwsOidc: case IntegrationKind.ExternalAuditStorage: formattedText = item.name; - icon = ( - - - - ); + icon = ; break; case IntegrationKind.AzureOidc: formattedText = 'Azure OIDC'; - icon = ( - - - - ); + icon = ; break; } } @@ -382,7 +373,3 @@ const IconContainer = styled(ResourceIcon)` width: 22px; margin-right: 10px; `; - -const SvgIconContainer = styled(Flex)` - margin-right: 10px; -`; diff --git a/web/packages/teleport/src/Integrations/fixtures.ts b/web/packages/teleport/src/Integrations/fixtures.ts index 2d019d039ee8b..83a33648a6532 100644 --- a/web/packages/teleport/src/Integrations/fixtures.ts +++ b/web/packages/teleport/src/Integrations/fixtures.ts @@ -148,6 +148,30 @@ export const plugins: Plugin[] = [ statusCode: IntegrationStatusCode.Running, spec: {}, }, + { + resourceType: 'plugin', + name: 'pagerduty', + details: '', + kind: 'pagerduty', + statusCode: IntegrationStatusCode.Running, + spec: {}, + }, + { + resourceType: 'plugin', + name: 'email', + details: '', + kind: 'email', + statusCode: IntegrationStatusCode.Running, + spec: {}, + }, + { + resourceType: 'plugin', + name: 'msteams', + details: '', + kind: 'msteams', + statusCode: IntegrationStatusCode.Running, + spec: {}, + }, ]; export const integrations: Integration[] = [ @@ -158,6 +182,13 @@ export const integrations: Integration[] = [ statusCode: IntegrationStatusCode.Running, spec: { roleArn: '', issuerS3Prefix: '', issuerS3Bucket: '' }, }, + { + resourceType: 'integration', + name: 'azure', + kind: IntegrationKind.AzureOidc, + statusCode: IntegrationStatusCode.Running, + spec: { roleArn: '' }, + }, ]; export const externalAuditStorage: ExternalAuditStorage = { diff --git a/web/packages/teleport/src/Navigation/NavigationDropdown.tsx b/web/packages/teleport/src/Navigation/NavigationDropdown.tsx index f32bbf2a92836..ff71f33503d15 100644 --- a/web/packages/teleport/src/Navigation/NavigationDropdown.tsx +++ b/web/packages/teleport/src/Navigation/NavigationDropdown.tsx @@ -19,12 +19,12 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import styled from 'styled-components'; -import { ChevronRightIcon } from 'design/SVGIcon'; - import { NavLink } from 'react-router-dom'; import { matchPath, useHistory } from 'react-router'; +import { ChevronRight } from 'design/Icon'; + import { commonNavigationItemStyles, LinkContent, @@ -293,7 +293,7 @@ export function NavigationDropdown(props: NavigationDropdownProps) { {props.feature.navigationItem.title} - + diff --git a/web/packages/teleport/src/Navigation/NavigationItem.tsx b/web/packages/teleport/src/Navigation/NavigationItem.tsx index d145dd78e1d60..139e404960cb7 100644 --- a/web/packages/teleport/src/Navigation/NavigationItem.tsx +++ b/web/packages/teleport/src/Navigation/NavigationItem.tsx @@ -21,7 +21,7 @@ import styled, { css, keyframes } from 'styled-components'; import { NavLink, useLocation } from 'react-router-dom'; -import { ExternalLinkIcon } from 'design/SVGIcon'; +import { ArrowSquareOut } from 'design/Icon'; import { getIcon } from 'teleport/Navigation/utils'; import { NavigationDropdown } from 'teleport/Navigation/NavigationDropdown'; @@ -249,7 +249,7 @@ export function NavigationItem(props: NavigationItemProps) { {navigationItem.title} - + diff --git a/web/packages/teleport/src/Navigation/logoPoweredBy.svg b/web/packages/teleport/src/Navigation/logoPoweredBy.svg deleted file mode 100644 index 6e8d6ed2ee101..0000000000000 --- a/web/packages/teleport/src/Navigation/logoPoweredBy.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx b/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx index 7e1e83e1ee6de..61f8569b09c42 100644 --- a/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx +++ b/web/packages/teleport/src/UnifiedResources/UnifiedResources.tsx @@ -332,5 +332,4 @@ export const emptyStateInfo: EmptyStateInfo = { title: 'No Resources Found', resource: 'resources', }, - resourceType: 'unified_resource', }; diff --git a/web/packages/teleport/src/components/Empty/Empty.test.tsx b/web/packages/teleport/src/components/Empty/Empty.test.tsx index a727e1dddf9cf..3e21afe2c03d1 100644 --- a/web/packages/teleport/src/components/Empty/Empty.test.tsx +++ b/web/packages/teleport/src/components/Empty/Empty.test.tsx @@ -20,8 +20,6 @@ import React from 'react'; import { render, screen } from 'design/utils/testing'; import { MemoryRouter } from 'react-router'; -import { SearchResource } from 'teleport/Discover/SelectResource'; - import Empty, { Props } from './Empty'; test('empty state for enterprise or oss, with create perms', async () => { @@ -56,7 +54,6 @@ const props: Props = { byline: 'Teleport Server Access consolidates SSH access across all environments.', docsURL: 'https://goteleport.com/docs/server-access/getting-started/', - resourceType: SearchResource.SERVER, readOnly: { title: 'No Servers Found', resource: 'servers', diff --git a/web/packages/teleport/src/components/Empty/Empty.tsx b/web/packages/teleport/src/components/Empty/Empty.tsx index 3f685d4b7f8e1..2503ddf296b29 100644 --- a/web/packages/teleport/src/components/Empty/Empty.tsx +++ b/web/packages/teleport/src/components/Empty/Empty.tsx @@ -19,41 +19,21 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Text, Box, Flex, ButtonPrimary, ButtonBorder } from 'design'; -import Image from 'design/Image'; - -import application from 'design/assets/resources/appplication.png'; -import database from 'design/assets/resources/database.png'; -import desktop from 'design/assets/resources/desktop.png'; -import stack from 'design/assets/resources/stack.png'; +import { + Text, + Box, + Flex, + ButtonPrimary, + ButtonBorder, + ResourceIcon, +} from 'design'; import cfg from 'teleport/config'; -type ResourceType = - | 'application' - | 'database' - | 'desktop' - | 'kubernetes' - | 'server' - | 'unified_resource'; - -function getAccentImage(resourceType: ResourceType): string { - const accentImages = { - application: application, - database: database, - desktop: desktop, - kubernetes: stack, - server: stack, - // TODO (avatus) update once we have a dedicated image for unified resources - unified_resource: stack, - }; - return accentImages[resourceType]; -} - export default function Empty(props: Props) { const { canCreate, clusterId, emptyStateInfo } = props; - const { byline, docsURL, resourceType, readOnly, title } = emptyStateInfo; + const { byline, docsURL, readOnly, title } = emptyStateInfo; // always show the welcome for enterprise users who have access to create an app if (!canCreate) { @@ -92,13 +72,7 @@ export default function Empty(props: Props) { > - + {title} @@ -111,7 +85,7 @@ export default function Empty(props: Props) { to={{ pathname: `${cfg.routes.root}/discover`, state: { - entity: resourceType, + entity: 'unified_resource', }, }} style={{ textDecoration: 'none' }} @@ -143,7 +117,6 @@ export default function Empty(props: Props) { export type EmptyStateInfo = { byline: string; docsURL?: string; - resourceType?: ResourceType; readOnly: { title: string; resource: string; diff --git a/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx b/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx index 22509b999aa9a..2568ff71302ed 100644 --- a/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx +++ b/web/packages/teleterm/src/ui/DocumentCluster/UnifiedResources.tsx @@ -33,11 +33,9 @@ import { DbType, } from 'shared/services/databases'; -import { Flex, ButtonPrimary, Text, Link } from 'design'; +import { Flex, ButtonPrimary, Text, Link, ResourceIcon } from 'design'; import * as icons from 'design/Icon'; -import Image from 'design/Image'; -import stack from 'design/assets/resources/stack.png'; import { Attempt } from 'shared/hooks/useAsync'; @@ -570,7 +568,7 @@ function NoResources(props: { ); $content = ( <> - + Add your first resource to Teleport diff --git a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx index f0a267f5d580f..6166b68c34113 100644 --- a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx +++ b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx @@ -17,14 +17,11 @@ */ import React from 'react'; -import { Box, ButtonPrimary, Flex, Text } from 'design'; +import { Box, ButtonPrimary, Flex, ResourceIcon, Text } from 'design'; import styled from 'styled-components'; -import Image from 'design/Image'; - import { useAppContext } from 'teleterm/ui/appContextProvider'; -import clusterPng from './clusters.png'; import { RecentClusters } from './RecentClusters'; export function ClusterConnectPanel() { @@ -43,7 +40,7 @@ export function ClusterConnectPanel() { flexDirection="column" alignItems="center" > - + Connect a Cluster diff --git a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/clusters.png b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/clusters.png deleted file mode 100644 index 751ea8f016b63..0000000000000 Binary files a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/clusters.png and /dev/null differ diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx index 72bf8864ed404..7dfe3acdfbc03 100644 --- a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx +++ b/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx @@ -17,10 +17,7 @@ */ import React from 'react'; -import { ButtonPrimary, Flex, Text } from 'design'; -import Image from 'design/Image'; - -import clusterPng from './clusters.png'; +import { ButtonPrimary, Flex, ResourceIcon, Text } from 'design'; interface EmptyIdentityListProps { onConnect(): void; @@ -35,7 +32,7 @@ export function EmptyIdentityList(props: EmptyIdentityListProps) { width="200px" p={3} > - + No cluster connected diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/clusters.png b/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/clusters.png deleted file mode 100644 index 751ea8f016b63..0000000000000 Binary files a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/clusters.png and /dev/null differ