ref(ui): remove platformicon icon font. use platformicons 3.0.0 (#20695)

package.json

@@ -95,7 +95,7 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "papaparse": "^5.2.0",
     "parseurl": "^1.3.2",
-    "platformicons": "2.1.1",
+    "platformicons": "3.0.0",
     "po-catalog-loader": "2.0.0",
     "prismjs": "^1.21.0",
     "prop-types": "^15.6.0",

src/sentry/static/sentry/app/components/platformIcon.tsx

@@ -1,56 +1,64 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-import PlatformIconTile from './platformIconTile';
 
 const PLATFORM_TO_ICON = {
   apple: 'apple',
   cocoa: 'apple',
+  'cocoa-objc': 'apple',
+  'cocoa-swift': 'swift',
   cordova: 'cordova',
   csharp: 'csharp',
+  'csharp-aspnetcore': 'dotnet',
   elixir: 'elixir',
   electron: 'electron',
   go: 'go',
   java: 'java',
-  'java-android': 'java',
+  'java-android': 'android',
   'java-appengine': 'app-engine',
   'java-log4j': 'java',
   'java-log4j2': 'java',
-  'java-logback': 'java',
+  'java-logback': 'logback',
   'java-logging': 'java',
   javascript: 'javascript',
   'javascript-angular': 'angularjs',
-  'javascript-backbone': 'javascript',
+  'javascript-angularjs': 'angularjs',
+  'javascript-backbone': 'backbone',
+  'javascript-browser': 'javascript',
   'javascript-ember': 'ember',
   'javascript-react': 'react',
   'javascript-vue': 'vue',
+  native: 'nativec',
   node: 'nodejs',
   'node-connect': 'nodejs',
-  'node-express': 'nodejs',
-  'node-koa': 'nodejs',
+  'node-express': 'express',
+  'node-koa': 'koa',
   'objective-c': 'apple',
   perl: 'perl',
   php: 'php',
   'php-laravel': 'laravel',
   'php-monolog': 'php',
-  'php-symfony2': 'php',
+  'php-symfony2': 'symfony',
+  'php-symfony': 'symfony',
   python: 'python',
   'python-flask': 'flask',
+  'python-aiohttp': 'aiohttp',
+  'python-pythonawslambda': 'aws',
+  'python-pythonazurefunctions': 'azure',
+  'python-pythongcpfunctions': 'gcp',
   'python-sanic': 'python',
   'python-bottle': 'bottle',
   'python-celery': 'python',
   'python-django': 'django',
+  'python-falcon': 'falcon',
   'python-pylons': 'python',
-  'python-pyramid': 'python',
-  'python-rq': 'python',
-  'python-tornado': 'python',
-  'python-pythonawslambda': 'python',
+  'python-pyramid': 'pyramid',
+  'python-rq': 'redis',
+  'python-tornado': 'tornado',
+  'python-tryton': 'tryton',
+  'react-native': 'react',
   ruby: 'ruby',
   'ruby-rack': 'ruby',
   'ruby-rails': 'rails',
-  'react-native': 'react-native',
   rust: 'rust',
-  swift: 'swift',
   flutter: 'flutter',
   dart: 'dart',
   // TODO: AWS used to be python-awslambda but the displayed generic icon
@@ -61,7 +69,7 @@ export function getIcon(platform: string): string {
   const icon = PLATFORM_TO_ICON[platform];
 
   if (!icon) {
-    return 'generic';
+    return 'default';
   }
 
   return icon;
@@ -78,43 +86,13 @@ const PlatformIcon = ({platform, size, ...props}: Props) => {
   const width = props.width || size || '1em';
   const height = props.height || size || '1em';
 
-  if (platform === 'react-native') {
-    // TODO(Priscila): find a better way to do it, maybe by removing the react svg path fill attributes
-    return (
-      <StyledPlatformIconTile
-        platform={platform as any} // TODO(ts): this will be removed once new platformicons land
-        width={width}
-        height={height}
-        {...props}
-      />
-    );
-  }
-
   const icon = getIcon(platform);
 
-  return (
-    <img
-      src={require(`platformicons/svg/${icon}.svg`)}
-      width={width}
-      height={height}
-      {...props}
-    />
-  );
+  const iconPath = require(`platformicons/${
+    size === 'lg' ? 'svg_80x80' : 'svg'
+  }/${icon}.svg`);
+
+  return <img src={iconPath} width={width} height={height} {...props} />;
 };
 
 export default PlatformIcon;
-
-// TODO(color): theme doesn't have the color #625471
-const StyledPlatformIconTile = styled(PlatformIconTile, {
-  shouldForwardProp: prop => prop !== 'width' && prop !== 'height',
-})<{width: string; height: string}>`
-  width: ${p => p.width};
-  height: ${p => p.height};
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  :before {
-    position: absolute;
-  }
-`;

src/sentry/static/sentry/app/components/platformIconTile.tsx

@@ -1,111 +0,0 @@
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import {css} from '@emotion/core';
-
-const PLATFORM_ICONS = {
-  'app-engine': '\\e60b',
-  'c-sharp': '\\e60f',
-  'java-appengine': '\\e60b',
-  'javascript-angular': '\\e900',
-  'javascript-angularjs': '\\e900',
-  'javascript-ember': '\\e800',
-  'javascript-react': '\\e801',
-  'objective-c': '\\e60e',
-  'php-laravel': '\\e60d',
-  'python-bottle': '\\e60c',
-  'python-django': '\\e605',
-  'python-flask': '\\e610',
-  'ruby-rails': '\\e603',
-  angular: '\\e900',
-  angularjs: '\\e900',
-  apple: '\\e60e',
-  bottle: '\\e60c',
-  csharp: '\\e60f',
-  django: '\\e605',
-  dotnet: '\\e902',
-  elixir: '\\e903',
-  ember: '\\e800',
-  flask: '\\e610',
-  generic: '\\e60a',
-  go: '\\e606',
-  ios: '\\e607',
-  java: '\\e608',
-  javascript: '\\e600',
-  js: '\\e600',
-  laravel: '\\e60d',
-  node: '\\e609',
-  objc: '\\e60e',
-  perl: '\\e901',
-  php: '\\e601',
-  python: '\\e602',
-  rails: '\\e603',
-  react: '\\e801',
-  ruby: '\\e604',
-  swift: '\\e60e',
-} as const;
-
-// platformName: [background, forground]
-const PLATFORM_COLORS = {
-  python: ['#3060b8'],
-  javascript: ['#ecd744', '#111'],
-  ruby: ['#e03e2f', '#fff'],
-  rails: ['#e03e2f', '#fff'],
-  java: ['#ec5e44'],
-  php: ['#6c5fc7'],
-  node: ['#90c541'],
-  csharp: ['#638cd7'],
-  go: ['#fff', '#493e54'],
-  elixir: ['#4e3fb4'],
-  'app-engine': ['#ec5e44'],
-  'python-django': ['#57be8c'],
-  'javascript-react': ['#2d2d2d', '#00d8ff'],
-  'javascript-ember': ['#ed573e', '#fff'],
-  'javascript-angular': ['#e03e2f', '#fff'],
-} as const;
-
-const selectPlatfrom = (
-  object: typeof PLATFORM_ICONS | typeof PLATFORM_COLORS,
-  platform: string
-) => object[platform] || object[platform.split('-')[0]];
-
-const getColorStyles = ({monoTone, platform}: Props) => {
-  const [bg, fg] = selectPlatfrom(PLATFORM_COLORS, platform) || [];
-
-  return (
-    !monoTone &&
-    css`
-      background-color: ${bg || '#625471'};
-      color: ${fg || '#fff'};
-    `
-  );
-};
-
-type Props = {
-  platform: keyof typeof PLATFORM_ICONS;
-  className?: string;
-  monoTone?: boolean;
-};
-
-const PlatformIconTile = styled('div', {
-  shouldForwardProp: prop => prop !== 'platform' && prop !== 'monoTone',
-})<Props>`
-  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font-family: 'platformicons';
-  font-weight: normal;
-  speak: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  ${getColorStyles};
-
-  &:before {
-    content: '${p => selectPlatfrom(PLATFORM_ICONS, p.platform) || '\\e60a'}';
-  }
-`;
-
-PlatformIconTile.propTypes = {
-  platform: PropTypes.any,
-  className: PropTypes.string,
-  monoTone: PropTypes.bool,
-};
-
-export default PlatformIconTile;

src/sentry/static/sentry/app/components/platformPicker.jsx

@@ -12,7 +12,7 @@ import EmptyMessage from 'app/views/settings/components/emptyMessage';
 import ExternalLink from 'app/components/links/externalLink';
 import ListLink from 'app/components/links/listLink';
 import NavTabs from 'app/components/navTabs';
-import PlatformIconTile from 'app/components/platformIconTile';
+import PlatformIcon from 'app/components/platformIcon';
 import categoryList from 'app/data/platformCategories';
 import platforms from 'app/data/platforms';
 import space from 'app/styles/space';
@@ -191,7 +191,7 @@ const PlatformList = styled('div')`
   margin-bottom: ${space(2)};
 `;
 
-const StyledPlatformIconTile = styled(PlatformIconTile)`
+const StyledPlatformIcon = styled(PlatformIcon)`
   width: 56px;
   height: 56px;
   font-size: 42px;
@@ -216,7 +216,8 @@ const ClearButton = styled(p => (
 
 const PlatformCard = styled(({platform, selected, onClear, ...props}) => (
   <div {...props}>
-    <StyledPlatformIconTile platform={platform.id} />
+    <StyledPlatformIcon platform={platform.id} size="lg" />
+
     <h3>{platform.name}</h3>
     {selected && <ClearButton onClick={onClear} />}
   </div>

src/sentry/static/sentry/app/views/projectInstall/createProject.tsx

@@ -11,7 +11,7 @@ import {t} from 'app/locale';
 import Alert from 'app/components/alert';
 import Button from 'app/components/button';
 import PageHeading from 'app/components/pageHeading';
-import PlatformIconTile from 'app/components/platformIconTile';
+import PlatformIcon from 'app/components/platformIcon';
 import PlatformPicker from 'app/components/platformPicker';
 import ProjectActions from 'app/actions/projectActions';
 import SelectControl from 'app/components/forms/selectControl';
@@ -42,7 +42,7 @@ type Props = {
   teams: Team[];
 };
 
-type PlatformName = React.ComponentProps<typeof PlatformIconTile>['platform'];
+type PlatformName = React.ComponentProps<typeof PlatformIcon>['platform'];
 type IssueAlertFragment = Parameters<
   React.ComponentProps<typeof IssueAlertOptions>['onChange']
 >[0];
@@ -92,7 +92,7 @@ class CreateProject extends React.Component<Props, State> {
         <div>
           <FormLabel>{t('Project name')}</FormLabel>
           <ProjectNameInput theme={theme}>
-            <ProjectPlatformIcon monoTone platform={platform} />
+            <StyledPlatformIcon platform={platform} />
             <input
               type="text"
               name="name"
@@ -333,17 +333,18 @@ const FormLabel = styled('div')`
   margin-bottom: ${space(1)};
 `;
 
-const ProjectPlatformIcon = styled(PlatformIconTile)`
-  font-size: 25px;
+const StyledPlatformIcon = styled(PlatformIcon)`
+  width: 20px;
+  height: 20px;
+  margin-right: ${space(1)};
+  border-radius: 3px;
 `;
 
 const ProjectNameInput = styled('div')`
   ${inputStyles};
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-gap: ${space(1)};
-  align-items: center;
   padding: 5px 10px;
+  display: flex;
+  align-items: center;
 
   input {
     border: 0;

src/sentry/static/sentry/less/jest-ci.less

@@ -1,6 +1,5 @@
 /* This is only used for CI, specifically for jest snapshots */
 @import url('./sentry.less');
-@import '~platformicons/platformicons/platformicons.css';
 
 /* Disable animations */
 

src/sentry/static/sentry/less/sentry.less

@@ -7,7 +7,6 @@
 @import url('./includes/animate.less');
 @import url('./includes/tooltips.less');
 @import url('./includes/react-select.less');
-@import '~platformicons/platformicons/platformicons.css';
 
 // App Components
 @import url('./shared-components.less');

yarn.lock

@@ -12005,10 +12005,10 @@ pkg-up@2.0.0, pkg-up@^2.0.0:
   dependencies:
     find-up "^2.1.0"
 
-platformicons@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-2.1.1.tgz#ab8c04c465ec3fbbcd0d5485d0c543e014a7f8a4"
-  integrity sha512-zfAgpUzIdbrXgHdhyO5ld2gvgS+HA5E/KrVavPRnYRNBeCDnX6DBprHXs6ipeyo/0+OKKoGeMejjXnoFApGdtA==
+platformicons@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/platformicons/-/platformicons-3.0.0.tgz#49696f922c3e081751195d9561f3f913361a61af"
+  integrity sha512-/upfuKrPteZ8twPeiMnZSgLfI7W5RGEmLpOAazH2fmzntIQAStLM+QFrjD0tZycK8Ma9c4xCZeWZg7YqeJV+Bg==
 
 pluralize@^7.0.0:
   version "7.0.0"