[v16] Use standard icons (#47627)

* Use standard icons (#47555)

* lint

* Fix a test

* Update snapshots

web/packages/design/src/Icon/IconCircle.tsx

@@ -55,7 +55,7 @@ export const IconCircle = ({ Icon, bg, size, fill }: IconCircleProps) => {
       width={size}
       height={size}
     >
-      <Icon size={size / 2} bg={background} fill={color} />
+      <Icon size={size / 2} fill={color} />
     </Box>
   );
 };

web/packages/design/src/Icon/Icons.story.tsx

@@ -51,6 +51,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.ArrowForward} text="ArrowForward" />
     <IconBox IconCmpt={Icon.ArrowLeft} text="ArrowLeft" />
     <IconBox IconCmpt={Icon.ArrowRight} text="ArrowRight" />
+    <IconBox IconCmpt={Icon.ArrowSquareOut} text="ArrowSquareOut" />
     <IconBox IconCmpt={Icon.ArrowUp} text="ArrowUp" />
     <IconBox IconCmpt={Icon.ArrowsIn} text="ArrowsIn" />
     <IconBox IconCmpt={Icon.ArrowsOut} text="ArrowsOut" />

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 <http://www.gnu.org/licenses/>.
+ */
+
+/* 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 (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-arrowsquareout"
+      {...otherProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5 3.74988C13.5001 3.33567 13.8359 2.99994 14.2501 3L20.2125 3.00093C20.4167 2.99077 20.6243 3.06369 20.7803 3.21967C20.9363 3.37565 21.0092 3.58324 20.9991 3.78747L21 9.74988C21.0001 10.1641 20.6643 10.4999 20.2501 10.5C19.8359 10.5001 19.5001 10.1643 19.5 9.75012L19.4993 5.56132L13.2803 11.7803C12.9874 12.0732 12.5126 12.0732 12.2197 11.7803C11.9268 11.4874 11.9268 11.0126 12.2197 10.7197L18.4387 4.50065L14.2499 4.5C13.8357 4.49994 13.4999 4.1641 13.5 3.74988ZM4.5 6C4.10217 6 3.72064 6.15804 3.43934 6.43934C3.15804 6.72064 3 7.10217 3 7.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72065 20.842 4.10218 21 4.5 21H16.5C16.8978 21 17.2794 20.842 17.5607 20.5607C17.842 20.2794 18 19.8978 18 19.5V12.75C18 12.3358 17.6642 12 17.25 12C16.8358 12 16.5 12.3358 16.5 12.75V19.5H4.5L4.5 7.5H11.25C11.6642 7.5 12 7.16421 12 6.75C12 6.33579 11.6642 6 11.25 6H4.5Z"
+      />
+    </Icon>
+  );
+}

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';

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,

web/packages/design/src/ResourceIcon/index.tsx

@@ -45,7 +45,7 @@ export const ResourceIcon = ({ name, ...props }: ResourceIconProps) => {
   if (!icon) {
     return null;
   }
-  return <Image src={icon} {...props} />;
+  return <Image src={icon} data-testid={`res-icon-${name}`} {...props} />;
 };
 
 export { type ResourceIconName, resourceIconSpecs, iconNames };

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),

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' }}
       >
         <Box mb={3} mt={3}>
-          <GitHubIcon style={{ textAlign: 'center' }} size={50} />
+          <ResourceIcon name="github" width="50px" />
         </Box>
         <Text style={{ width: '100%' }} typography="body2" bold caps>
           {name}

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) {
     <ConnectorBox as="button" onClick={onCreate}>
       <Flex width="100%">
         <Flex height="72px" alignItems="center">
-          <GitHubIcon style={{ textAlign: 'center' }} size={48} />
+          <ResourceIcon name="github" width="48px" />
         </Flex>
       </Flex>
 
@@ -83,13 +82,7 @@ function renderLockedItem(kind: AuthProviderType) {
   return (
     <ConnectorBox as="button" disabled={true}>
       <Flex width="100%">
-        <SsoIcon
-          fontSize="50px"
-          style={{
-            left: 0,
-            fontSize: '72px',
-          }}
-        />
+        <SsoIcon />
       </Flex>
 
       <Text typography="body2" mt={4} fontSize={4} color="text.primary" bold>