ref(ui): Add an import alias from our static images dir (#22902)

We were previously referencing these paths by traversing to `app` parent, instead add a `sentry-images` alias to use.

config/tsconfig.build.json

@@ -35,6 +35,7 @@
     "paths": {
       "app/*": ["src/sentry/static/sentry/app/*"],
       "sentry-test/*": ["tests/js/sentry-test/*"],
+      "sentry-images/*": ["src/sentry/static/sentry/images/*"],
       "@emotion/styled": ["src/sentry/static/sentry/app/styled.tsx"],
       "@original-emotion/*": ["node_modules/@emotion/*"],
       // Use the stub file for typechecking. Webpack resolver will use the real files

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import {Link} from 'react-router';
 import styled from '@emotion/styled';
+import robotBackground from 'sentry-images/spot/sentry-robot.png';
 
-import robotBackground from 'app/../images/spot/sentry-robot.png';
 import {Client} from 'app/api';
 import Button from 'app/components/button';
 import {t, tct} from 'app/locale';

src/sentry/static/sentry/app/components/events/eventCauseEmpty.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import moment from 'moment';
+import codesworth from 'sentry-images/spot/codesworth.png';
 
-import codesworth from 'app/../images/spot/codesworth.png';
 import {promptsUpdate} from 'app/actionCreators/prompts';
 import {Client} from 'app/api';
 import Button from 'app/components/button';

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
+/* TODO: replace with I/O when finished */
+import img from 'sentry-images/spot/hair-on-fire.svg';
 
 import Button from 'app/components/button';
 import ButtonBar from 'app/components/buttonBar';
@@ -11,9 +13,6 @@ import ConfigStore from 'app/stores/configStore';
 import space from 'app/styles/space';
 import {LightWeightOrganization, Organization, Project} from 'app/types';
 
-/* TODO: replace with I/O when finished */
-import img from '../../images/spot/hair-on-fire.svg';
-
 type Props = {
   organization: LightWeightOrganization | Organization;
   projects?: Project[];

src/sentry/static/sentry/app/plugins/components/pluginIcon.tsx

@@ -1,54 +1,53 @@
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
-
-import amixr from 'app/../images/logos/logo-amixr.svg';
-import asana from 'app/../images/logos/logo-asana.svg';
-import asayer from 'app/../images/logos/logo-asayer.svg';
-import aws from 'app/../images/logos/logo-aws.svg';
-import vsts from 'app/../images/logos/logo-azure.svg';
-import bitbucket from 'app/../images/logos/logo-bitbucket.svg';
-import bitbucketserver from 'app/../images/logos/logo-bitbucket-server.svg';
-import campfire from 'app/../images/logos/logo-campfire.svg';
-import clickup from 'app/../images/logos/logo-clickup.svg';
-import clubhouse from 'app/../images/logos/logo-clubhouse.svg';
-import datadog from 'app/../images/logos/logo-datadog.svg';
-import placeholder from 'app/../images/logos/logo-default.svg';
-import flowdock from 'app/../images/logos/logo-flowdock.svg';
-import fullstory from 'app/../images/logos/logo-fullstory.svg';
-import github from 'app/../images/logos/logo-github.svg';
-import githubActions from 'app/../images/logos/logo-github-actions.svg';
-import githubEnterprise from 'app/../images/logos/logo-github-enterprise.svg';
-import gitlab from 'app/../images/logos/logo-gitlab.svg';
-import heroku from 'app/../images/logos/logo-heroku.svg';
-import jira from 'app/../images/logos/logo-jira.svg';
-import jiraserver from 'app/../images/logos/logo-jira-server.svg';
-import lighthouse from 'app/../images/logos/logo-lighthouse.svg';
-import linear from 'app/../images/logos/logo-linear.svg';
-import msteams from 'app/../images/logos/logo-msteams.svg';
-import netlify from 'app/../images/logos/logo-netlify.svg';
-import opsgenie from 'app/../images/logos/logo-opsgenie.svg';
-import pagerduty from 'app/../images/logos/logo-pagerduty.svg';
-import phabricator from 'app/../images/logos/logo-phabricator.svg';
-import pivotal from 'app/../images/logos/logo-pivotaltracker.svg';
-import pushover from 'app/../images/logos/logo-pushover.svg';
-import quill from 'app/../images/logos/logo-quill.svg';
-import redmine from 'app/../images/logos/logo-redmine.svg';
-import rocketchat from 'app/../images/logos/logo-rocketchat.svg';
-import rookout from 'app/../images/logos/logo-rookout.svg';
-import segment from 'app/../images/logos/logo-segment.svg';
-import sentry from 'app/../images/logos/logo-sentry.svg';
-import slack from 'app/../images/logos/logo-slack.svg';
-import split from 'app/../images/logos/logo-split.svg';
-import taiga from 'app/../images/logos/logo-taiga.svg';
-import teamwork from 'app/../images/logos/logo-teamwork.svg';
-import trello from 'app/../images/logos/logo-trello.svg';
-import twilio from 'app/../images/logos/logo-twilio.svg';
-import vercel from 'app/../images/logos/logo-vercel.svg';
-import victorops from 'app/../images/logos/logo-victorops.svg';
-import visualstudio from 'app/../images/logos/logo-visualstudio.svg';
-import youtrack from 'app/../images/logos/logo-youtrack.svg';
-import zepel from 'app/../images/logos/logo-zepel.svg';
-import zulip from 'app/../images/logos/logo-zulip.svg';
+import amixr from 'sentry-images/logos/logo-amixr.svg';
+import asana from 'sentry-images/logos/logo-asana.svg';
+import asayer from 'sentry-images/logos/logo-asayer.svg';
+import aws from 'sentry-images/logos/logo-aws.svg';
+import vsts from 'sentry-images/logos/logo-azure.svg';
+import bitbucket from 'sentry-images/logos/logo-bitbucket.svg';
+import bitbucketserver from 'sentry-images/logos/logo-bitbucket-server.svg';
+import campfire from 'sentry-images/logos/logo-campfire.svg';
+import clickup from 'sentry-images/logos/logo-clickup.svg';
+import clubhouse from 'sentry-images/logos/logo-clubhouse.svg';
+import datadog from 'sentry-images/logos/logo-datadog.svg';
+import placeholder from 'sentry-images/logos/logo-default.svg';
+import flowdock from 'sentry-images/logos/logo-flowdock.svg';
+import fullstory from 'sentry-images/logos/logo-fullstory.svg';
+import github from 'sentry-images/logos/logo-github.svg';
+import githubActions from 'sentry-images/logos/logo-github-actions.svg';
+import githubEnterprise from 'sentry-images/logos/logo-github-enterprise.svg';
+import gitlab from 'sentry-images/logos/logo-gitlab.svg';
+import heroku from 'sentry-images/logos/logo-heroku.svg';
+import jira from 'sentry-images/logos/logo-jira.svg';
+import jiraserver from 'sentry-images/logos/logo-jira-server.svg';
+import lighthouse from 'sentry-images/logos/logo-lighthouse.svg';
+import linear from 'sentry-images/logos/logo-linear.svg';
+import msteams from 'sentry-images/logos/logo-msteams.svg';
+import netlify from 'sentry-images/logos/logo-netlify.svg';
+import opsgenie from 'sentry-images/logos/logo-opsgenie.svg';
+import pagerduty from 'sentry-images/logos/logo-pagerduty.svg';
+import phabricator from 'sentry-images/logos/logo-phabricator.svg';
+import pivotal from 'sentry-images/logos/logo-pivotaltracker.svg';
+import pushover from 'sentry-images/logos/logo-pushover.svg';
+import quill from 'sentry-images/logos/logo-quill.svg';
+import redmine from 'sentry-images/logos/logo-redmine.svg';
+import rocketchat from 'sentry-images/logos/logo-rocketchat.svg';
+import rookout from 'sentry-images/logos/logo-rookout.svg';
+import segment from 'sentry-images/logos/logo-segment.svg';
+import sentry from 'sentry-images/logos/logo-sentry.svg';
+import slack from 'sentry-images/logos/logo-slack.svg';
+import split from 'sentry-images/logos/logo-split.svg';
+import taiga from 'sentry-images/logos/logo-taiga.svg';
+import teamwork from 'sentry-images/logos/logo-teamwork.svg';
+import trello from 'sentry-images/logos/logo-trello.svg';
+import twilio from 'sentry-images/logos/logo-twilio.svg';
+import vercel from 'sentry-images/logos/logo-vercel.svg';
+import victorops from 'sentry-images/logos/logo-victorops.svg';
+import visualstudio from 'sentry-images/logos/logo-visualstudio.svg';
+import youtrack from 'sentry-images/logos/logo-youtrack.svg';
+import zepel from 'sentry-images/logos/logo-zepel.svg';
+import zulip from 'sentry-images/logos/logo-zulip.svg';
 
 // Map of plugin id -> logo filename
 export const DEFAULT_ICON = placeholder;

src/sentry/static/sentry/app/views/admin/installWizard/index.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import DocumentTitle from 'react-document-title';
 import {css} from '@emotion/core';
 import styled from '@emotion/styled';
+import sentryPattern from 'sentry-images/pattern/sentry-pattern.png';
 
-import sentryPattern from 'app/../images/pattern/sentry-pattern.png';
 import Alert from 'app/components/alert';
 import {ApiForm} from 'app/components/forms';
 import {IconWarning} from 'app/icons';

src/sentry/static/sentry/app/views/alerts/list/onboarding.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import emptyStateImg from 'sentry-images/spot/alerts-empty-state.svg';
 
-import emptyStateImg from 'app/../images/spot/alerts-empty-state.svg';
 import ButtonBar from 'app/components/buttonBar';
 import OnboardingPanel from 'app/components/onboardingPanel';
 import {t} from 'app/locale';

src/sentry/static/sentry/app/views/eventsV2/banner.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import tourAlert from 'sentry-images/spot/discover-tour-alert.svg';
+import tourExplore from 'sentry-images/spot/discover-tour-explore.svg';
+import tourFilter from 'sentry-images/spot/discover-tour-filter.svg';
+import tourGroup from 'sentry-images/spot/discover-tour-group.svg';
 
 import Banner from 'app/components/banner';
 import Button from 'app/components/button';
@@ -13,11 +17,6 @@ import space from 'app/styles/space';
 import {Organization} from 'app/types';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
 
-import tourAlert from '../../../images/spot/discover-tour-alert.svg';
-import tourExplore from '../../../images/spot/discover-tour-explore.svg';
-import tourFilter from '../../../images/spot/discover-tour-filter.svg';
-import tourGroup from '../../../images/spot/discover-tour-group.svg';
-
 import BackgroundSpace from './backgroundSpace';
 
 const docsUrl = 'https://docs.sentry.io/product/discover-queries/';

src/sentry/static/sentry/app/views/issueList/noGroupsHandler/congratsRobots.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import video from 'sentry-images/spot/congrats-robots.mp4';
 
-import video from 'app/../images/spot/congrats-robots.mp4';
 import AutoplayVideo from 'app/components/autoplayVideo';
 import space from 'app/styles/space';
 

src/sentry/static/sentry/app/views/issueList/noGroupsHandler/noUnresolvedIssues.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import congratsRobotsPlaceholder from 'sentry-images/spot/congrats-robots-placeholder.jpg';
 
-import congratsRobotsPlaceholder from 'app/../images/spot/congrats-robots-placeholder.jpg';
 import {t} from 'app/locale';
 import space from 'app/styles/space';