feat(discover-banner): setting up basic component (#15444)

* feat(discover2banner): setting up component

* setting up banner content

* added responsiveness to banner

* button fix and conditional

* added a dismissable icon

* handle onclick dimissal

* moving onclick out

* added set state

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import InlineSvg from 'app/components/inlineSvg';
+
+import styled from 'react-emotion';
+import theme from 'app/utils/theme';
+import space from 'app/styles/space';
+import {t} from 'app/locale';
+
+import spaceBg from '../../images/background-space.svg';
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  isDismissable?: boolean;
+  onCloseClick?: () => void;
+};
+
+class Banner extends React.Component<Props> {
+  static defaultProps: Partial<Props> = {
+    isDismissable: true,
+  };
+
+  render() {
+    const {title, subtitle, isDismissable, onCloseClick, children} = this.props;
+
+    return (
+      <StyledBanner>
+        {isDismissable ? (
+          <BannerIcon src="icon-close" aria-label={t('Close')} onClick={onCloseClick} />
+        ) : null}
+        <BannerContent>
+          <BannerTitle>{title}</BannerTitle>
+          <BannerSubtitle>{subtitle}</BannerSubtitle>
+          <BannerActions>{children}</BannerActions>
+        </BannerContent>
+      </StyledBanner>
+    );
+  }
+}
+
+const StyledBanner = styled('div')`
+  background-image: url(${spaceBg});
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+  min-height: 320px;
+  padding-top: 24%;
+  box-shadow: ${p => p.theme.dropShadowLight};
+  margin-bottom: ${space(2)};
+
+  @media (min-width: ${theme.breakpoints[1]}) {
+    min-height: 220px;
+  }
+
+  @media (min-width: ${theme.breakpoints[3]}) {
+    padding-top: 0;
+    height: 300px;
+  }
+`;
+
+const BannerContent = styled('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: ${space(4)};
+`;
+
+const BannerTitle = styled('h1')`
+  margin: ${space(1.5)};
+  color: ${p => p.theme.white};
+
+  @media (min-width: ${theme.breakpoints[1]}) {
+    font-size: 48px;
+  }
+`;
+
+const BannerSubtitle = styled('h4')`
+  margin-bottom: ${space(3)};
+  font-size: ${theme.fontSizeMedium};
+  color: ${p => p.theme.white};
+
+  @media (min-width: ${theme.breakpoints[1]}) {
+    font-size: ${theme.fontSizeLarge};
+    flex-direction: row;
+    min-width: 650px;
+  }
+`;
+
+const BannerActions = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+
+  @media (min-width: ${theme.breakpoints[1]}) {
+    width: auto;
+    flex-direction: row;
+    min-width: 650px;
+  }
+`;
+
+const BannerIcon = styled(InlineSvg)`
+  position: absolute;
+  display: block;
+  top: ${space(2)};
+  right: ${space(2)};
+  color: ${p => p.theme.white};
+  cursor: pointer;
+  z-index: 1;
+`;
+
+export default Banner;

src/sentry/static/sentry/app/utils/theme.tsx

@@ -221,7 +221,7 @@ const button = {
 };
 
 const theme = {
-  breakpoints: ['768px', '992px', '1200px'],
+  breakpoints: ['768px', '992px', '1200px', '1440px', '2560px'],
 
   ...colors,
 

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

@@ -6,6 +6,7 @@ import * as ReactRouter from 'react-router';
 import {Params} from 'react-router/lib/Router';
 import {Location} from 'history';
 
+import localStorage from 'app/utils/localStorage';
 import {Organization} from 'app/types';
 import {t} from 'app/locale';
 import {trackAnalyticsEvent} from 'app/utils/analytics';
@@ -13,10 +14,13 @@ import SentryTypes from 'app/sentryTypes';
 import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
 import {PageContent, PageHeader} from 'app/styles/organization';
 import PageHeading from 'app/components/pageHeading';
+import Banner from 'app/components/banner';
+import Button from 'app/components/button';
 import BetaTag from 'app/components/betaTag';
 import Feature from 'app/components/acl/feature';
 import Link from 'app/components/links/link';
 import NoProjectMessage from 'app/components/noProjectMessage';
+import theme from 'app/utils/theme';
 import space from 'app/styles/space';
 import withOrganization from 'app/utils/withOrganization';
 
@@ -41,6 +45,10 @@ class EventsV2 extends React.Component<Props> {
     router: PropTypes.object.isRequired,
   };
 
+  state = {
+    isBannerHidden: localStorage.getItem('discover-banner-dismissed'),
+  };
+
   renderQueryList() {
     const {location, organization} = this.props;
     let views = ALL_VIEWS;
@@ -92,6 +100,35 @@ class EventsV2 extends React.Component<Props> {
     return [t('Discover')];
   };
 
+  handleClick = () => {
+    localStorage.setItem('discover-banner-dismissed', true);
+    this.setState({isBannerHidden: true});
+  };
+
+  renderBanner() {
+    const bannerDismissed = localStorage.getItem('discover-banner-dismissed');
+
+    if (bannerDismissed) {
+      return null;
+    } else {
+      return (
+        <Banner
+          title={t('Discover')}
+          subtitle={t('Here are a few sample queries to kick things off')}
+          onCloseClick={this.handleClick}
+        >
+          <BannerButton icon="icon-circle-add">
+            {t('Users who error in < 1 min')}
+          </BannerButton>
+          <BannerButton icon="icon-circle-add">{t('Browsers by most bugs')}</BannerButton>
+          <BannerButton icon="icon-circle-add">
+            {t('Slowest HTTP endpoints')}
+          </BannerButton>
+        </Banner>
+      );
+    }
+  }
+
   render() {
     const {organization, location, router} = this.props;
     const eventSlug = getFirstQueryString(location.query, 'eventSlug');
@@ -122,6 +159,7 @@ class EventsV2 extends React.Component<Props> {
                     />
                   )}
                 </PageHeader>
+                {!hasQuery && this.renderBanner()}
                 {!hasQuery && this.renderQueryList()}
                 {hasQuery && (
                   <Events
@@ -149,6 +187,14 @@ class EventsV2 extends React.Component<Props> {
   }
 }
 
+const BannerButton = styled(Button)`
+  margin: ${space(1)} 0;
+
+  @media (min-width: ${theme.breakpoints[1]}) {
+    margin: 0 ${space(1)};
+  }
+`;
+
 const LinkList = styled('ul')`
   list-style: none;
   padding: 0;

src/sentry/static/sentry/images/background-space.svg

@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1160 280" style="enable-background:new 0 0 1160 280;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.84;fill:url(#SVGID_1_);enable-background:new    ;}
+	.st1{opacity:0.37;fill:url(#SVGID_2_);enable-background:new    ;}
+	.st2{opacity:0.5;fill:url(#SVGID_3_);enable-background:new    ;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="604.8466" y1="1648.1091" x2="112.8466" y2="1131.1093" gradientTransform="matrix(1 0 0 -1 0 1762)">
+		<stop  offset="0" style="stop-color:#09080B"/>
+		<stop  offset="1" style="stop-color:#4A3E56"/>
+	</linearGradient>
+	<path class="st0" d="M1160,0H0v280h1160V0z"/>
+	
+		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="0" y1="1622" x2="1160" y2="1622" gradientTransform="matrix(1 0 0 -1 0 1762)">
+		<stop  offset="0" style="stop-color:#6C5FC7"/>
+		<stop  offset="0.1605" style="stop-color:#785EC0"/>
+		<stop  offset="0.4471" style="stop-color:#965CAC"/>
+		<stop  offset="0.8237" style="stop-color:#C7588C"/>
+		<stop  offset="1" style="stop-color:#E1567C"/>
+	</linearGradient>
+	<path class="st1" d="M1160,266.5c-68.9,2.5-138.9-2.4-192.9-15c-46.3-10.8-95.4-25.9-124.3-63.6C830.7,172,823,153.1,810,138.1
+		c-28.4-33-76-41.3-119.5-41.1c-67.2,0.4-133.6,16.2-200.8,17.3c-26.6,0.4-54.4-1.8-77.3-15.2C376.4,78,361,35.2,337.8,0H0v280h1160
+		V266.5z"/>
+	
+		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="0" y1="1622" x2="1160" y2="1622" gradientTransform="matrix(1 0 0 -1 0 1762)">
+		<stop  offset="0" style="stop-color:#6C5FC7"/>
+		<stop  offset="0.4908" style="stop-color:#A75AA1"/>
+		<stop  offset="1" style="stop-color:#E1567C"/>
+	</linearGradient>
+	<path class="st2" d="M1160,260.7c-130.6,15.7-240.9,15.3-315.9-2.1c-40.1-9.3-82.6-22.4-107.5-55.1c-10.4-13.7-17.1-30-28.4-43
+		c-24.6-28.5-65.7-35.8-103.4-35.5c-58.2,0.3-115.6,14-173.7,15c-23,0.4-47-1.5-66.9-13.2c-42.6-25-51.8-84.9-90.7-115.3
+		c-5.9-4.6-12.2-8.3-18.9-11.5H0v280h1160V260.7z"/>
+	<path class="st3" d="M220.7,78.9c-0.6,0-1.2-0.4-1.4-1l-1.8-4.9l-4.9-1.8c-0.6-0.2-1-0.8-1-1.4c0-0.6,0.4-1.2,1-1.4l4.9-1.8
+		l1.8-4.9c0.2-0.6,0.8-1,1.4-1h0c0.6,0,1.2,0.4,1.4,1l1.8,4.9l4.9,1.8c0.6,0.2,1,0.8,1,1.4c0,0.6-0.4,1.2-1,1.4l-4.9,1.8l-1.8,4.9
+		C221.9,78.5,221.4,78.9,220.7,78.9L220.7,78.9z M214.6,69.8l3.8,1.4c0.4,0.2,0.7,0.5,0.9,0.9l1.4,3.8l1.4-3.8
+		c0.2-0.4,0.5-0.7,0.9-0.9l3.8-1.4l-3.8-1.4c-0.4-0.2-0.7-0.5-0.9-0.9l-1.4-3.8l-1.4,3.8c-0.2,0.4-0.5,0.7-0.9,0.9L214.6,69.8z
+		 M221.2,62.4L221.2,62.4C221.2,62.4,221.2,62.4,221.2,62.4z"/>
+	<path class="st3" d="M134.2,232.9c-0.6,0-1.2-0.4-1.4-1l-1.1-3l-3-1.1c-0.6-0.2-1-0.8-1-1.4c0-0.6,0.4-1.2,1-1.4l3-1.1l1.1-3
+		c0.2-0.6,0.8-1,1.4-1h0c0.6,0,1.2,0.4,1.4,1l1.1,3l3,1.1c0.6,0.2,1,0.8,1,1.4c0,0.6-0.4,1.2-1,1.4l-3,1.1l-1.1,3
+		C135.4,232.5,134.9,232.9,134.2,232.9L134.2,232.9z M130.6,226.3l2,0.7c0.4,0.1,0.7,0.5,0.9,0.9l0.7,2l0.7-2
+		c0.2-0.4,0.5-0.7,0.9-0.9l2-0.7l-2-0.7c-0.4-0.1-0.7-0.5-0.9-0.9l-0.7-2l-0.7,2c-0.1,0.4-0.5,0.7-0.9,0.9L130.6,226.3z
+		 M131.9,228.9C131.9,228.9,131.9,228.9,131.9,228.9L131.9,228.9z M136.5,228.9L136.5,228.9C136.5,228.9,136.5,228.9,136.5,228.9z
+		 M131.6,228.6C131.6,228.6,131.6,228.6,131.6,228.6L131.6,228.6z M136.8,228.6L136.8,228.6C136.8,228.6,136.8,228.6,136.8,228.6z
+		 M131.6,224C131.6,224,131.6,224,131.6,224L131.6,224z M136.8,224L136.8,224C136.8,224,136.8,224,136.8,224z M131.9,223.7
+		C131.9,223.7,131.9,223.7,131.9,223.7L131.9,223.7z M136.5,223.7L136.5,223.7C136.5,223.7,136.5,223.7,136.5,223.7z M134.7,221.4
+		L134.7,221.4C134.7,221.4,134.7,221.4,134.7,221.4L134.7,221.4z"/>
+	<path class="st3" d="M837.7,109.9c-0.6,0-1.2-0.4-1.4-1l-1.5-4.1l-4.1-1.5c-0.6-0.2-1-0.8-1-1.4c0-0.6,0.4-1.2,1-1.4l4.1-1.5
+		l1.5-4.1c0.2-0.6,0.8-1,1.4-1s1.2,0.4,1.4,1l1.5,4.1l4.1,1.5c0.6,0.2,1,0.8,1,1.4c0,0.6-0.4,1.2-1,1.4l-4.1,1.5l-1.5,4.1
+		C838.9,109.5,838.4,109.9,837.7,109.9z M832.6,101.8l3.1,1.1c0.4,0.2,0.7,0.5,0.9,0.9l1.1,3.1l1.1-3.1c0.2-0.4,0.5-0.7,0.9-0.9
+		l3.1-1.1l-3.1-1.1c-0.4-0.2-0.7-0.5-0.9-0.9l-1.1-3.1l-1.1,3.1c-0.2,0.4-0.5,0.7-0.9,0.9L832.6,101.8z M838.2,95.4L838.2,95.4
+		C838.2,95.4,838.2,95.4,838.2,95.4z"/>
+	<path class="st3" d="M1016.7,76.9c-0.6,0-1.2-0.4-1.4-1l-1.5-4.1l-4.1-1.5c-0.6-0.2-1-0.8-1-1.4c0-0.6,0.4-1.2,1-1.4l4.1-1.5
+		l1.5-4.1c0.2-0.6,0.8-1,1.4-1c0.6,0,1.2,0.4,1.4,1l1.5,4.1l4.1,1.5c0.6,0.2,1,0.8,1,1.4c0,0.6-0.4,1.2-1,1.4l-4.1,1.5l-1.5,4.1
+		C1017.9,76.5,1017.4,76.9,1016.7,76.9z M1011.6,68.8l3.1,1.1c0.4,0.2,0.7,0.5,0.9,0.9l1.1,3.1l1.1-3.1c0.2-0.4,0.5-0.7,0.9-0.9
+		l3.1-1.1l-3.1-1.1c-0.4-0.2-0.7-0.5-0.9-0.9l-1.1-3.1l-1.1,3.1c-0.2,0.4-0.5,0.7-0.9,0.9L1011.6,68.8z M1023.1,69.3
+		C1023.1,69.3,1023.1,69.3,1023.1,69.3L1023.1,69.3z M1023.1,68.3C1023.1,68.3,1023.1,68.3,1023.1,68.3L1023.1,68.3z"/>
+	<circle class="st3" cx="140.2" cy="109.3" r="2.5"/>
+	<circle class="st3" cx="1075.2" cy="172.3" r="2.5"/>
+	<circle class="st3" cx="973.2" cy="127.3" r="2.5"/>
+	<circle class="st3" cx="800.2" cy="37.3" r="2.5"/>
+	<circle class="st3" cx="24.2" cy="242.3" r="2.5"/>
+	<circle class="st3" cx="407.2" cy="63.3" r="2.5"/>
+	<circle class="st3" cx="328.2" cy="37.3" r="2.5"/>
+	<path class="st3" d="M199.2,56.6h-4c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h4c0.3,0,0.5,0.2,0.5,0.5S199.5,56.6,199.2,56.6z"/>
+	<path class="st3" d="M197.1,58.8c-0.3,0-0.5-0.2-0.5-0.5v-4c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v4
+		C197.6,58.6,197.4,58.8,197.1,58.8z"/>
+	<path class="st3" d="M210.2,182.8h-6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h6c0.3,0,0.5,0.2,0.5,0.5S210.5,182.8,210.2,182.8z"/>
+	<path class="st3" d="M207.2,185.8c-0.3,0-0.5-0.2-0.5-0.5v-6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v6
+		C207.7,185.6,207.5,185.8,207.2,185.8z"/>
+	<path class="st3" d="M537.2,56.8h-6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h6c0.3,0,0.5,0.2,0.5,0.5S537.5,56.8,537.2,56.8z"/>
+	<path class="st3" d="M534.2,59.8c-0.3,0-0.5-0.2-0.5-0.5v-6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v6
+		C534.7,59.6,534.5,59.8,534.2,59.8z"/>
+	<path class="st3" d="M973.2,189.8h-6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h6c0.3,0,0.5,0.2,0.5,0.5S973.5,189.8,973.2,189.8z"/>
+	<path class="st3" d="M970.2,192.8c-0.3,0-0.5-0.2-0.5-0.5v-6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v6
+		C970.7,192.6,970.5,192.8,970.2,192.8z"/>
+</g>
+</svg>