upgrade(ui): dreamy components (#14486)

* upgrade dreamy components to 2.0.0

* support msedge and all browsers

* convert to typescript

* use space() and more ts friendly helpers

* refactor illustration component to be smaller

* re add comment

package.json

@@ -105,7 +105,7 @@
     "reflux": "0.4.1",
     "regenerator-runtime": "^0.13.3",
     "scroll-to-element": "^2.0.0",
-    "sentry-dreamy-components": "^1.0.2",
+    "sentry-dreamy-components": "^2.0.0",
     "sprintf-js": "1.0.3",
     "style-loader": "^0.23.1",
     "svg-sprite-loader": "^3.9.0",

src/sentry/static/sentry/app/types/fileLoader.d.ts

@@ -2,3 +2,8 @@
 // TS compatibility for https://github.com/webpack-contrib/file-loader
 
 declare module '*.png';
+
+declare module '*.svg' {
+  const content: any;
+  export default content;
+}

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

@@ -1,131 +0,0 @@
-import React from 'react';
-import {t} from 'app/locale';
-import styled from 'react-emotion';
-
-import {
-  BashCard,
-  Issues,
-  SuggestedAssignees,
-  Emails,
-  Contributors,
-} from 'sentry-dreamy-components';
-
-import {analytics} from 'app/utils/analytics';
-import SentryTypes from 'app/sentryTypes';
-import withApi from 'app/utils/withApi';
-
-import ReleaseLandingCard from './releaseLandingCard';
-
-const StyledSuggestedAssignees = styled(SuggestedAssignees)`
-  width: 70px;
-  height: 70px;
-  margin-left: 250px;
-
-  @media (max-width: 1150px) {
-    margin-left: 100px;
-  }
-`;
-
-const cards = [
-  {
-    title: t("You Haven't Set Up Releases!"),
-    message: t(
-      'Releases provide additional context, with rich commits, so you know which errors were addressed and which were introduced in a release'
-    ),
-    component: Contributors,
-  },
-  {
-    title: t('Suspect Commits'),
-    message: t(
-      'Sentry suggests which commit caused an issue and who is likely responsible so you can triage'
-    ),
-    component: StyledSuggestedAssignees,
-  },
-  {
-    title: t('Release Stats'),
-    message: t(
-      'See the commits in each release, and which issues were introduced or fixed in the release'
-    ),
-    component: Issues,
-  },
-  {
-    title: t('Easy Resolution'),
-    message: t(
-      'Automatically resolve issues by including the issue number in your commit message'
-    ),
-    component: BashCard,
-  },
-  {
-    title: t('Deploy Emails'),
-    message: t('Receive email notifications when your code gets deployed'),
-    component: Emails,
-  },
-];
-
-const ReleaseLanding = withApi(
-  class ReleaseLanding extends React.Component {
-    static contextTypes = {
-      organization: SentryTypes.Organization,
-      project: SentryTypes.Project,
-    };
-
-    constructor(props) {
-      super(props);
-      this.state = {
-        stepId: 0,
-      };
-    }
-
-    componentDidMount() {
-      const {organization, project} = this.context;
-      analytics('releases.landing_card_viewed', {
-        org_id: parseInt(organization.id, 10),
-        project_id: project && parseInt(project.id, 10),
-      });
-    }
-
-    handleClick = () => {
-      const {stepId} = this.state;
-      const {organization, project} = this.context;
-
-      const title = cards[stepId].title;
-      if (stepId >= cards.length - 1) {
-        return;
-      }
-      this.setState(state => ({
-        stepId: state.stepId + 1,
-      }));
-
-      analytics('releases.landing_card_clicked', {
-        org_id: parseInt(organization.id, 10),
-        project_id: project && parseInt(project.id, 10),
-        step_id: stepId,
-        step_title: title,
-      });
-    };
-
-    getCard = stepId => {
-      return cards[stepId];
-    };
-
-    render() {
-      const {stepId} = this.state;
-      const card = this.getCard(stepId);
-
-      return (
-        <div className="container">
-          <div className="row">
-            <ReleaseLandingCard
-              onClick={this.handleClick}
-              card={card}
-              step={stepId}
-              cardsLength={cards.length}
-            />
-          </div>
-        </div>
-      );
-    }
-  }
-);
-
-export default ReleaseLanding;

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

@@ -0,0 +1,143 @@
+import React from 'react';
+import {t} from 'app/locale';
+import styled from 'react-emotion';
+
+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 {Project, Organization} from 'app/types';
+
+import {analytics} from 'app/utils/analytics';
+import withOrganization from 'app/utils/withOrganization';
+import withProject from 'app/utils/withProject';
+
+import ReleaseLandingCard from './releaseLandingCard';
+
+type IllustrationProps = {
+  data: string;
+  className?: string;
+};
+
+// 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 cards = [
+  {
+    title: t("You Haven't Set Up Releases!"),
+    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} />,
+  },
+  {
+    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} />,
+  },
+  {
+    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} />,
+  },
+  {
+    title: t('Easy Resolution'),
+    message: t(
+      'Automatically resolve issues by including the issue number in your commit message'
+    ),
+    svg: <Illustration data={minified} />,
+  },
+  {
+    title: t('Deploy Emails'),
+    message: t('Receive email notifications when your code gets deployed'),
+    svg: <Illustration data={emails} />,
+  },
+];
+
+type ReleaseLandingProps = {
+  organization: Organization;
+  project: Project;
+};
+
+type State = {
+  stepId: number;
+};
+
+const ReleaseLanding = withOrganization(
+  withProject(
+    class ReleaseLanding extends React.Component<ReleaseLandingProps, State> {
+      constructor(props) {
+        super(props);
+        this.state = {
+          stepId: 0,
+        };
+      }
+
+      componentDidMount() {
+        const {organization, project} = this.props;
+
+        analytics('releases.landing_card_viewed', {
+          org_id: parseInt(organization.id, 10),
+          project_id: project && parseInt(project.id, 10),
+        });
+      }
+
+      handleClick = () => {
+        const {stepId} = this.state;
+        const {organization, project} = this.props;
+
+        const title = cards[stepId].title;
+        if (stepId >= cards.length - 1) {
+          return;
+        }
+        this.setState(state => ({
+          stepId: state.stepId + 1,
+        }));
+
+        analytics('releases.landing_card_clicked', {
+          org_id: parseInt(organization.id, 10),
+          project_id: project && parseInt(project.id, 10),
+          step_id: stepId,
+          step_title: title,
+        });
+      };
+
+      getCard = stepId => {
+        return cards[stepId];
+      };
+
+      render() {
+        const {stepId} = this.state;
+        const card = this.getCard(stepId);
+
+        return (
+          <div className="container">
+            <div className="row">
+              <ReleaseLandingCard
+                onClick={this.handleClick}
+                card={card}
+                step={stepId}
+                cardsLength={cards.length}
+              />
+            </div>
+          </div>
+        );
+      }
+    }
+  )
+);
+
+export default ReleaseLanding;

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

@@ -27,14 +27,11 @@ class ReleaseLandingCard extends React.Component {
 
   render() {
     const {card, cardsLength, step} = this.props;
-    const CardComponent = card.component;
     const finalStep = step === cardsLength - 1;
     return (
       <Container>
         <IllustrationContainer>
-          <CardComponentContainer>
-            <CardComponent />
-          </CardComponentContainer>
+          <CardComponentContainer>{card.svg}</CardComponentContainer>
         </IllustrationContainer>
 
         <StyledBox>
@@ -60,13 +57,14 @@ const Container = styled('div')`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 450px;
+  flex-wrap: wrap;
+  min-height: 450px;
   padding: ${space(1)};
 `;
 
 const StyledBox = styled('div')`
   flex: 1;
-  padding: 40px;
+  padding: ${space(3)};
 `;
 
 const IllustrationContainer = styled(StyledBox)`
@@ -76,7 +74,8 @@ const IllustrationContainer = styled(StyledBox)`
 `;
 
 const CardComponentContainer = styled('div')`
-  width: 450px;
+  width: 550px;
+  height: 340px;
 
   img {
     vertical-align: baseline;
@@ -84,12 +83,13 @@ const CardComponentContainer = styled('div')`
 
   @media (max-width: 1150px) {
     font-size: 14px;
-    width: 350px;
+    width: 450px;
   }
 
   @media (max-width: 1000px) {
     font-size: 12px;
-    width: 280px;
+    width: 320px;
+    max-height: 180px;
   }
 `;
 

yarn.lock

@@ -12873,10 +12873,10 @@ send@0.16.2:
     range-parser "~1.2.0"
     statuses "~1.4.0"
 
-sentry-dreamy-components@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/sentry-dreamy-components/-/sentry-dreamy-components-1.0.2.tgz#18f5c1997e4a2c42faf079304a2d920466db87f3"
-  integrity sha512-z/L3AFA8YBF4BmxrMd4HVxQ1LFChJor7SfESSVqpwtWloQJPIFiBJQbolq0VxEDNS850WwIE4C8lfzyJRFk04w==
+sentry-dreamy-components@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sentry-dreamy-components/-/sentry-dreamy-components-2.0.0.tgz#674679f0e2dcf594abc3f5888f46911907a86a08"
+  integrity sha512-tndDgfnkMoGyaWnabrAi+PQnFatddMYruhoS0HYGbqJOrFd0qG4FAGnUfojmQooYVh63a7aifxLn+MfF9r6RqA==
 
 serialize-javascript@^1.4.0:
   version "1.5.0"