ref(ui): Move `sentry-dreamy-components` into app (#19705)

This moves the svgs from `sentry-dreamy-components` into the app. The main motivations behind this are to be able to control its animations (i.e. for CI snapshot runs).

Additionally, we codesplit these SVGs so that they are not built into the main app bundle.

package.json

@@ -116,7 +116,6 @@
     "regenerator-runtime": "^0.13.3",
     "rrweb-player": "^0.4.6",
     "scroll-to-element": "^2.0.0",
-    "sentry-dreamy-components": "^2.0.1",
     "sprintf-js": "1.0.3",
     "style-loader": "^0.23.1",
     "svg-sprite-loader": "^3.9.0",

src/sentry/static/sentry/app/views/releases/list/illustrations/styles.tsx

@@ -0,0 +1,30 @@
+import {css, keyframes} from '@emotion/core';
+
+const topLeftIn = keyframes`
+    0% {
+        transform:translate(-5%,-5%)
+    }
+    to {
+        transform:translate(0%,0%)
+    }
+`;
+
+const bottomRightIn = keyframes`
+  0% {
+    transform: translate(5%, 5%);
+  }
+  to {
+    transform: translate(0%, 0%);
+  }
+`;
+
+const animateTopLeftIn = css`
+  animation: 0.5s ${topLeftIn} cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform-origin: center center;
+`;
+
+const animateBottomRightIn = css`
+  animation: 0.5s ${bottomRightIn} cubic-bezier(0.68, -0.55, 0.265, 1.55);
+`;
+
+export {animateBottomRightIn, animateTopLeftIn};

src/sentry/static/sentry/app/views/releases/list/releaseLanding.tsx

@@ -1,35 +1,37 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-import minified from 'sentry-dreamy-components/dist/minified.svg';
-import emails from 'sentry-dreamy-components/dist/emails.svg';
-import issues from 'sentry-dreamy-components/dist/issues.svg';
-import suggestedAssignees from 'sentry-dreamy-components/dist/suggested-assignees.svg';
-import contributors from 'sentry-dreamy-components/dist/contributors.svg';
 
 import {t} from 'app/locale';
 import {Project, Organization} from 'app/types';
 import {analytics} from 'app/utils/analytics';
+import Placeholder from 'app/components/placeholder';
 import withOrganization from 'app/utils/withOrganization';
 import withProject from 'app/utils/withProject';
 
 import ReleaseLandingCard from './releaseLandingCard';
 
-type IllustrationProps = {
-  data: string;
-  className?: string;
-};
+function Illustration({children}: {children: React.ReactNode}) {
+  return <React.Suspense fallback={<Placeholder />}>{children}</React.Suspense>;
+}
 
-// Currently, we need a fallback because <object> doesn't work in msedge,
-// and <img> doesn't work in safari. Hopefully we can choose one soon.
-const Illustration = styled(({data, className}: IllustrationProps) => (
-  <object data={data} className={className}>
-    <img src={data} className={className} />
-  </object>
-))`
-  width: 100%;
-  height: 100%;
-`;
+const IllustrationContributors = React.lazy(() =>
+  import(
+    /* webpackChunkName: "IllustrationContributors" */ './illustrations/contributors'
+  )
+);
+const IllustrationSuggestedAssignees = React.lazy(() =>
+  import(
+    /* webpackChunkName: "IllustrationSuggestedAssignees" */ './illustrations/suggestedAssignees'
+  )
+);
+const IllustrationIssues = React.lazy(() =>
+  import(/* webpackChunkName: "IllustrationIssues" */ './illustrations/issues')
+);
+const IllustrationMinified = React.lazy(() =>
+  import(/* webpackChunkName: "IllustrationMinified" */ './illustrations/minified')
+);
+const IllustrationEmails = React.lazy(() =>
+  import(/* webpackChunkName: "IllustrationEmails" */ './illustrations/emails')
+);
 
 const cards = [
   {
@@ -38,33 +40,53 @@ const cards = [
     message: t(
       'Releases provide additional context, with rich commits, so you know which errors were addressed and which were introduced in a release'
     ),
-    svg: <Illustration data={contributors} />,
+    svg: (
+      <Illustration>
+        <IllustrationContributors />
+      </Illustration>
+    ),
   },
   {
     title: t('Suspect Commits'),
     message: t(
       'Sentry suggests which commit caused an issue and who is likely responsible so you can triage'
     ),
-    svg: <Illustration data={suggestedAssignees} />,
+    svg: (
+      <Illustration>
+        <IllustrationSuggestedAssignees />
+      </Illustration>
+    ),
   },
   {
     title: t('Release Stats'),
     message: t(
       'See the commits in each release, and which issues were introduced or fixed in the release'
     ),
-    svg: <Illustration data={issues} />,
+    svg: (
+      <Illustration>
+        <IllustrationIssues />
+      </Illustration>
+    ),
   },
   {
     title: t('Easy Resolution'),
     message: t(
       'Automatically resolve issues by including the issue number in your commit message'
     ),
-    svg: <Illustration data={minified} />,
+    svg: (
+      <Illustration>
+        <IllustrationMinified />
+      </Illustration>
+    ),
   },
   {
     title: t('Deploy Emails'),
     message: t('Receive email notifications when your code gets deployed'),
-    svg: <Illustration data={emails} />,
+    svg: (
+      <Illustration>
+        <IllustrationEmails />
+      </Illustration>
+    ),
   },
 ];
 
@@ -80,12 +102,9 @@ type State = {
 const ReleaseLanding = withOrganization(
   withProject(
     class ReleaseLanding extends React.Component<ReleaseLandingProps, State> {
-      constructor(props) {
-        super(props);
-        this.state = {
-          stepId: 0,
-        };
-      }
+      state = {
+        stepId: 0,
+      };
 
       componentDidMount() {
         const {organization, project} = this.props;

src/sentry/static/sentry/app/views/releases/list/releaseLandingCard.jsx

@@ -30,7 +30,7 @@ class ReleaseLandingCard extends React.Component {
     const {card, cardsLength, step} = this.props;
     const finalStep = step === cardsLength - 1;
     return (
-      <OnboardingPanel image={<div>{card.svg}</div>}>
+      <OnboardingPanel image={card.svg}>
         <h3>{card.title}</h3>
         {card.disclaimer && <Disclaimer>{card.disclaimer}</Disclaimer>}
         <p>{card.message}</p>

src/sentry/static/sentry/app/views/userFeedback/userFeedbackEmpty.tsx

@@ -3,8 +3,6 @@ import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import * as Sentry from '@sentry/react';
 
-import userFeedback from 'sentry-dreamy-components/dist/user-feedback.svg';
-
 import {Organization, Project} from 'app/types';
 import {t} from 'app/locale';
 import {trackAnalyticsEvent, trackAdhocEvent} from 'app/utils/analytics';
@@ -15,6 +13,8 @@ import space from 'app/styles/space';
 import withOrganization from 'app/utils/withOrganization';
 import withProjects from 'app/utils/withProjects';
 
+import UserFeedbackIllustration from './userFeedbackIllustration';
+
 type Props = {
   organization: Organization;
   projects: Project[];
@@ -22,11 +22,6 @@ type Props = {
   projectIds?: string[];
 };
 
-type IllustrationProps = {
-  data: string;
-  className?: string;
-};
-
 class UserFeedbackEmpty extends React.Component<Props> {
   static propTypes = {
     organization: SentryTypes.Organization.isRequired,
@@ -98,7 +93,7 @@ class UserFeedbackEmpty extends React.Component<Props> {
       <UserFeedbackLanding>
         <IllustrationContainer>
           <CardComponentContainer>
-            <Illustration data={userFeedback} />
+            <StyledUserFeedbackIllustration />
           </CardComponentContainer>
         </IllustrationContainer>
 
@@ -168,13 +163,11 @@ const IllustrationContainer = styled(StyledBox)`
 `;
 
 const CardComponentContainer = styled('div')`
+  display: flex;
+  align-items: center;
   width: 550px;
   height: 340px;
 
-  img {
-    vertical-align: baseline;
-  }
-
   @media (max-width: 1150px) {
     font-size: ${p => p.theme.fontSizeMedium};
     width: 450px;
@@ -187,11 +180,7 @@ const CardComponentContainer = styled('div')`
   }
 `;
 
-const Illustration = styled(({data, className}: IllustrationProps) => (
-  <object data={data} className={className}>
-    <img src={data} className={className} />
-  </object>
-))`
+const StyledUserFeedbackIllustration = styled(UserFeedbackIllustration)`
   width: 100%;
   height: 100%;
 `;