Home Explore Help
Sign In
SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry
1
0
Fork 0
Files
Browse Source

fix(ui): Consistently use Layout.* on main views (#43081)

Evan Purkhiser 2 years ago
parent
5d66ca341a
commit
865cc194e2
10 changed files with 176 additions and 231 deletions
Split View Show Diff Stats
  1. 1 0
      static/app/components/layouts/thirds.tsx
  2. 7 7
      static/app/views/alerts/create.tsx
  3. 6 1
      static/app/views/alerts/edit.tsx
  4. 7 11
      static/app/views/alerts/list/header.tsx
  5. 18 55
      static/app/views/alerts/rules/metric/details/header.tsx
  6. 20 20
      static/app/views/dashboardsV2/manage/index.tsx
  7. 16 22
      static/app/views/eventsV2/landing.tsx
  8. 89 99
      static/app/views/eventsV2/results.tsx
  9. 7 12
      static/app/views/eventsV2/resultsHeader.tsx
  10. 5 4
      static/app/views/monitors/monitors.tsx

+ 1 - 0
static/app/components/layouts/thirds.tsx
View File 

@@ -51,6 +51,7 @@ export const HeaderActions = styled('div')`
 
   flex-direction: column;
 
   justify-content: normal;
 
   min-width: max-content;
 
+  margin-top: ${space(0.25)};
 
 
   @media (max-width: ${p => p.theme.breakpoints.medium}) {
 
     width: max-content;

+ 7 - 7
static/app/views/alerts/create.tsx
View File 

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 
 import * as Layout from 'sentry/components/layouts/thirds';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 
+import PageHeading from 'sentry/components/pageHeading';
 
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 
 import {t} from 'sentry/locale';
 
 import {Member, Organization, Project} from 'sentry/types';
 
@@ -118,9 +119,8 @@ class Create extends Component<Props, State> {
 
     return (
 
       <Fragment>
 
         <SentryDocumentTitle title={title} projectSlug={project.slug} />
 
-
 
         <Layout.Header>
 
-          <StyledHeaderContent>
 
+          <Layout.HeaderContent>
 
             <BuilderBreadCrumbs
 
               organization={organization}
 
               alertName={t('Set Conditions')}
 
@@ -131,12 +131,12 @@ class Create extends Component<Props, State> {
 
               location={location}
 
               canChangeProject
 
             />
 
-            <Layout.Title>
 
+            <StyledHeading>
 
               {wizardAlertType
 
                 ? `${t('Set Conditions for')} ${AlertWizardAlertNames[wizardAlertType]}`
 
                 : title}
 
-            </Layout.Title>
 
-          </StyledHeaderContent>
 
+            </StyledHeading>
 
+          </Layout.HeaderContent>
 
         </Layout.Header>
 
         <Body>
 
           <Teams provideUserTeams>
 
@@ -185,8 +185,8 @@ class Create extends Component<Props, State> {
 
   }
 
 }
 
 
-const StyledHeaderContent = styled(Layout.HeaderContent)`
 
-  overflow: visible;
 
+const StyledHeading = styled(PageHeading)`
 
+  line-height: 40px;
 
 `;
 
 
 const Body = styled(Layout.Body)`

+ 6 - 1
static/app/views/alerts/edit.tsx
View File 

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 
 import * as Layout from 'sentry/components/layouts/thirds';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 
+import PageHeading from 'sentry/components/pageHeading';
 
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 
 import {t} from 'sentry/locale';
 
 import {Member, Organization, Project} from 'sentry/types';
 
@@ -80,7 +81,7 @@ class ProjectAlertsEditor extends Component<Props, State> {
 
               routes={routes}
 
               location={location}
 
             />
 
-            <Layout.Title>{this.getTitle()}</Layout.Title>
 
+            <StyledHeading>{this.getTitle()}</StyledHeading>
 
           </Layout.HeaderContent>
 
         </Layout.Header>
 
         <EditConditionsBody>
 
@@ -123,4 +124,8 @@ const EditConditionsBody = styled(Layout.Body)`
 
   }
 
 `;
 
 
+const StyledHeading = styled(PageHeading)`
 
+  line-height: 40px;
 
+`;
 
+
 
 export default ProjectAlertsEditor;

+ 7 - 11
static/app/views/alerts/list/header.tsx
View File 

@@ -8,11 +8,11 @@ import CreateAlertButton from 'sentry/components/createAlertButton';
 
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 
 import ExternalLink from 'sentry/components/links/externalLink';
 
+import PageHeading from 'sentry/components/pageHeading';
 
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 
 import {IconSettings} from 'sentry/icons';
 
 import {t, tct} from 'sentry/locale';
 
 import ProjectsStore from 'sentry/stores/projectsStore';
 
-import space from 'sentry/styles/space';
 
 import useOrganization from 'sentry/utils/useOrganization';
 
 import usePageFilters from 'sentry/utils/usePageFilters';
 
 
@@ -44,7 +44,7 @@ const AlertHeader = ({router, activeTab}: Props) => {
 
   return (
 
     <Layout.Header>
 
       <Layout.HeaderContent>
 
-        <StyledLayoutTitle>
 
+        <StyledHeading>
 
           {t('Alerts')}
 
           <PageHeadingQuestionTooltip
 
             title={tct(
 
@@ -52,10 +52,10 @@ const AlertHeader = ({router, activeTab}: Props) => {
 
               {link: <ExternalLink href="https://docs.sentry.io/product/alerts/" />}
 
             )}
 
           />
 
-        </StyledLayoutTitle>
 
+        </StyledHeading>
 
       </Layout.HeaderContent>
 
       <Layout.HeaderActions>
 
-        <Actions gap={1}>
 
+        <ButtonBar gap={1}>
 
           <CreateAlertButton
 
             organization={organization}
 
             iconProps={{size: 'sm'}}
 
@@ -78,7 +78,7 @@ const AlertHeader = ({router, activeTab}: Props) => {
 
             icon={<IconSettings size="sm" />}
 
             aria-label={t('Settings')}
 
           />
 
-        </Actions>
 
+        </ButtonBar>
 
       </Layout.HeaderActions>
 
       <Layout.HeaderNavTabs underlined>
 
         {alertRulesLink}
 
@@ -94,10 +94,6 @@ const AlertHeader = ({router, activeTab}: Props) => {
 
 
 export default AlertHeader;
 
 
-const StyledLayoutTitle = styled(Layout.Title)`
 
-  margin-top: ${space(0.5)};
 
-`;
 
-
 
-const Actions = styled(ButtonBar)`
 
-  height: 32px;
 
+const StyledHeading = styled(PageHeading)`
 
+  line-height: 40px;
 
 `;

+ 18 - 55
static/app/views/alerts/rules/metric/details/header.tsx
View File 

@@ -3,11 +3,12 @@ import styled from '@emotion/styled';
 
 
 import Breadcrumbs from 'sentry/components/breadcrumbs';
 
 import Button from 'sentry/components/button';
 
+import ButtonBar from 'sentry/components/buttonBar';
 
 import IdBadge from 'sentry/components/idBadge';
 
+import * as Layout from 'sentry/components/layouts/thirds';
 
 import PageHeading from 'sentry/components/pageHeading';
 
 import {IconCopy, IconEdit} from 'sentry/icons';
 
 import {t} from 'sentry/locale';
 
-import {PageHeader} from 'sentry/styles/organization';
 
 import space from 'sentry/styles/space';
 
 import {Organization, Project} from 'sentry/types';
 
 import {MetricRule} from 'sentry/views/alerts/rules/metric/types';
 
@@ -41,24 +42,14 @@ function DetailsHeader({hasMetricRuleDetailsError, rule, organization, project}:
 
   };
 
 
   return (
 
-    <Header>
 
-      <BreadCrumbBar>
 
-        <AlertBreadcrumbs
 
+    <Layout.Header>
 
+      <Layout.HeaderContent>
 
+        <Breadcrumbs
 
           crumbs={[
 
             {label: t('Alerts'), to: `/organizations/${organization.slug}/alerts/rules/`},
 
             {label: ruleTitle},
 
           ]}
 
         />
 
-        <Controls>
 
-          <Button size="sm" icon={<IconCopy />} to={duplicateLink}>
 
-            {t('Duplicate')}
 
-          </Button>
 
-          <Button size="sm" icon={<IconEdit />} to={settingsLink}>
 
-            {t('Edit Rule')}
 
-          </Button>
 
-        </Controls>
 
-      </BreadCrumbBar>
 
-      <Details>
 
         <RuleTitle data-test-id="incident-rule-title" loading={!isRuleReady}>
 
           {project && (
 
             <IdBadge
 
@@ -70,56 +61,28 @@ function DetailsHeader({hasMetricRuleDetailsError, rule, organization, project}:
 
           )}
 
           {ruleTitle}
 
         </RuleTitle>
 
-      </Details>
 
-    </Header>
 
+      </Layout.HeaderContent>
 
+      <Layout.HeaderActions>
 
+        <ButtonBar gap={1}>
 
+          <Button size="sm" icon={<IconCopy />} to={duplicateLink}>
 
+            {t('Duplicate')}
 
+          </Button>
 
+          <Button size="sm" icon={<IconEdit />} to={settingsLink}>
 
+            {t('Edit Rule')}
 
+          </Button>
 
+        </ButtonBar>
 
+      </Layout.HeaderActions>
 
+    </Layout.Header>
 
   );
 
 }
 
 
 export default DetailsHeader;
 
 
-const Header = styled('div')`
 
-  background-color: ${p => p.theme.backgroundSecondary};
 
-  border-bottom: 1px solid ${p => p.theme.border};
 
-`;
 
-
 
-const BreadCrumbBar = styled('div')`
 
-  display: flex;
 
-  margin-bottom: 0;
 
-  padding: ${space(2)} ${space(4)} ${space(1)};
 
-`;
 
-
 
-const AlertBreadcrumbs = styled(Breadcrumbs)`
 
-  flex-grow: 1;
 
-  font-size: ${p => p.theme.fontSizeExtraLarge};
 
-  padding: 0;
 
-`;
 
-
 
-const Controls = styled('div')`
 
-  display: grid;
 
-  grid-auto-flow: column;
 
-  gap: ${space(1)};
 
-`;
 
-
 
-const Details = styled(PageHeader)`
 
-  margin-bottom: 0;
 
-  padding: ${space(1.5)} ${space(4)} ${space(2)};
 
-
 
-  grid-template-columns: max-content auto;
 
-  display: grid;
 
-  gap: ${space(3)};
 
-  grid-auto-flow: column;
 
-
 
-  @media (max-width: ${p => p.theme.breakpoints.medium}) {
 
-    grid-template-columns: auto;
 
-    grid-auto-flow: row;
 
-  }
 
-`;
 
-
 
 const RuleTitle = styled(PageHeading, {
 
   shouldForwardProp: p => typeof p === 'string' && isPropValid(p) && p !== 'loading',
 
 })<{loading: boolean}>`
 
   ${p => p.loading && 'opacity: 0'};
 
-  line-height: 1.5;
 
+  line-height: 40px;
 
   display: grid;
 
   grid-template-columns: max-content 1fr;
 
   grid-column-gap: ${space(1)};

+ 20 - 20
static/app/views/dashboardsV2/manage/index.tsx
View File 

@@ -10,10 +10,11 @@ import Alert from 'sentry/components/alert';
 
 import Button from 'sentry/components/button';
 
 import ButtonBar from 'sentry/components/buttonBar';
 
 import CompactSelect from 'sentry/components/compactSelect';
 
-import {Title} from 'sentry/components/layouts/thirds';
 
+import * as Layout from 'sentry/components/layouts/thirds';
 
 import ExternalLink from 'sentry/components/links/externalLink';
 
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 
+import PageHeading from 'sentry/components/pageHeading';
 
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 
 import SearchBar from 'sentry/components/searchBar';
 
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 
@@ -276,9 +277,9 @@ class ManageDashboards extends AsyncView<Props, State> {
 
         <SentryDocumentTitle title={t('Dashboards')} orgSlug={organization.slug}>
 
           <StyledPageContent>
 
             <NoProjectMessage organization={organization}>
 
-              <PageContent>
 
-                <StyledPageHeader>
 
-                  <StyledTitle>
 
+              <Layout.Header>
 
+                <Layout.HeaderContent>
 
+                  <StyledHeading>
 
                     {t('Dashboards')}
 
                     <PageHeadingQuestionTooltip
 
                       title={tct(
 
@@ -290,7 +291,9 @@ class ManageDashboards extends AsyncView<Props, State> {
 
                         }
 
                       )}
 
                     />
 
-                  </StyledTitle>
 
+                  </StyledHeading>
 
+                </Layout.HeaderContent>
 
+                <Layout.HeaderActions>
 
                   <ButtonBar gap={1.5}>
 
                     <TemplateSwitch>
 
                       {t('Show Templates')}
 
@@ -313,11 +316,15 @@ class ManageDashboards extends AsyncView<Props, State> {
 
                       {t('Create Dashboard')}
 
                     </Button>
 
                   </ButtonBar>
 
-                </StyledPageHeader>
 
-                {showTemplates && this.renderTemplates()}
 
-                {this.renderActions()}
 
-                {this.renderDashboards()}
 
-              </PageContent>
 
+                </Layout.HeaderActions>
 
+              </Layout.Header>
 
+              <Layout.Body>
 
+                <Layout.Main fullWidth>
 
+                  {showTemplates && this.renderTemplates()}
 
+                  {this.renderActions()}
 
+                  {this.renderDashboards()}
 
+                </Layout.Main>
 
+              </Layout.Body>
 
             </NoProjectMessage>
 
           </StyledPageContent>
 
         </SentryDocumentTitle>
 
@@ -326,19 +333,12 @@ class ManageDashboards extends AsyncView<Props, State> {
 
   }
 
 }
 
 
-const StyledTitle = styled(Title)`
 
-  width: auto;
 
-`;
 
-
 
 const StyledPageContent = styled(PageContent)`
 
   padding: 0;
 
 `;
 
 
-const StyledPageHeader = styled('div')`
 
-  display: flex;
 
-  align-items: flex-end;
 
-  justify-content: space-between;
 
-  margin-bottom: ${space(2)};
 
+const StyledHeading = styled(PageHeading)`
 
+  line-height: 40px;
 
 `;
 
 
 const StyledActions = styled('div')`
 
@@ -365,7 +365,7 @@ const TemplateSwitch = styled('label')`
 
 const TemplateContainer = styled('div')`
 
   display: grid;
 
   gap: ${space(2)};
 
-  margin-bottom: ${space(2)};
 
+  margin-bottom: ${space(0.5)};
 
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {
 
     grid-template-columns: repeat(2, minmax(200px, 1fr));

+ 16 - 22
static/app/views/eventsV2/landing.tsx
View File 

@@ -11,6 +11,7 @@ import AsyncComponent from 'sentry/components/asyncComponent';
 
 import Breadcrumbs from 'sentry/components/breadcrumbs';
 
 import Button from 'sentry/components/button';
 
 import CompactSelect from 'sentry/components/compactSelect';
 
+import * as Layout from 'sentry/components/layouts/thirds';
 
 import {Title} from 'sentry/components/layouts/thirds';
 
 import NoProjectMessage from 'sentry/components/noProjectMessage';
 
 import SearchBar from 'sentry/components/searchBar';
 
@@ -297,8 +298,8 @@ class DiscoverLanding extends AsyncComponent<Props, State> {
 
         <SentryDocumentTitle title={t('Discover')} orgSlug={organization.slug}>
 
           <StyledPageContent>
 
             <NoProjectMessage organization={organization}>
 
-              <PageContent>
 
-                <StyledPageHeader>
 
+              <Layout.Header>
 
+                <Layout.HeaderContent>
 
                   {organization.features.includes(
 
                     'discover-query-builder-as-landing-page'
 
                   ) ? (
 
@@ -310,7 +311,9 @@ class DiscoverLanding extends AsyncComponent<Props, State> {
 
                       </GuideAnchor>
 
                     </Title>
 
                   )}
 
-                  <StyledButton
 
+                </Layout.HeaderContent>
 
+                <Layout.HeaderActions>
 
+                  <Button
 
                     data-test-id="build-new-query"
 
                     to={to}
 
                     size="sm"
 
@@ -322,12 +325,16 @@ class DiscoverLanding extends AsyncComponent<Props, State> {
 
                     }}
 
                   >
 
                     {t('Build a new query')}
 
-                  </StyledButton>
 
-                </StyledPageHeader>
 
-                {this.renderBanner()}
 
-                {this.renderActions()}
 
-                {this.renderComponent()}
 
-              </PageContent>
 
+                  </Button>
 
+                </Layout.HeaderActions>
 
+              </Layout.Header>
 
+              <Layout.Body>
 
+                <Layout.Main fullWidth>
 
+                  {this.renderBanner()}
 
+                  {this.renderActions()}
 
+                  {this.renderComponent()}
 
+                </Layout.Main>
 
+              </Layout.Body>
 
             </NoProjectMessage>
 
           </StyledPageContent>
 
         </SentryDocumentTitle>
 
@@ -348,15 +355,6 @@ const SwitchLabel = styled('div')`
 
   padding-right: 8px;
 
 `;
 
 
-const StyledPageHeader = styled('div')`
 
-  display: flex;
 
-  align-items: flex-end;
 
-  font-size: ${p => p.theme.headerFontSize};
 
-  color: ${p => p.theme.textColor};
 
-  justify-content: space-between;
 
-  margin-bottom: ${space(2)};
 
-`;
 
-
 
 const StyledSearchBar = styled(SearchBar)`
 
   flex-grow: 1;
 
 `;
 
@@ -373,9 +371,5 @@ const StyledActions = styled('div')`
 
   }
 
 `;
 
 
-const StyledButton = styled(Button)`
 
-  white-space: nowrap;
 
-`;
 
-
 
 export default withOrganization(DiscoverLanding);
 
 export {DiscoverLanding};

+ 89 - 99
static/app/views/eventsV2/results.tsx
View File 

@@ -32,7 +32,6 @@ import ProjectPageFilter from 'sentry/components/projectPageFilter';
 
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 
 import {MAX_QUERY_LENGTH} from 'sentry/constants';
 
 import {t, tct} from 'sentry/locale';
 
-import {PageContent} from 'sentry/styles/organization';
 
 import space from 'sentry/styles/space';
 
 import {Organization, PageFilters, SavedQuery} from 'sentry/types';
 
 import {defined, generateQueryWithTag} from 'sentry/utils';
 
@@ -585,119 +584,110 @@ export class Results extends Component<Props, State> {
 
 
     return (
 
       <SentryDocumentTitle title={title} orgSlug={organization.slug}>
 
-        <StyledPageContent>
 
-          <NoProjectMessage organization={organization}>
 
-            <ResultsHeader
 
-              setSavedQuery={setSavedQuery}
 
-              errorCode={errorCode}
 
-              organization={organization}
 
-              location={location}
 
-              eventView={eventView}
 
-              yAxis={yAxisArray}
 
-              router={router}
 
-              isHomepage={isHomepage}
 
-            />
 
-            <Layout.Body>
 
-              <CustomMeasurementsProvider
 
-                organization={organization}
 
-                selection={selection}
 
-              >
 
-                <Top fullWidth>
 
-                  {this.renderMetricsFallbackBanner()}
 
-                  {this.renderError(error)}
 
-                  {this.renderTips()}
 
-                  <StyledPageFilterBar condensed>
 
-                    <ProjectPageFilter />
 
-                    <EnvironmentPageFilter />
 
-                    <DatePageFilter alignDropdown="left" />
 
-                  </StyledPageFilterBar>
 
-                  <CustomMeasurementsContext.Consumer>
 
-                    {contextValue => (
 
-                      <StyledSearchBar
 
-                        searchSource="eventsv2"
 
-                        organization={organization}
 
-                        projectIds={eventView.project}
 
-                        query={query}
 
-                        fields={fields}
 
-                        onSearch={this.handleSearch}
 
-                        maxQueryLength={MAX_QUERY_LENGTH}
 
-                        customMeasurements={contextValue?.customMeasurements ?? undefined}
 
-                      />
 
-                    )}
 
-                  </CustomMeasurementsContext.Consumer>
 
-                  <MetricsCardinalityProvider
 
-                    organization={organization}
 
-                    location={location}
 
-                  >
 
-                    <ResultsChart
 
-                      api={api}
 
-                      router={router}
 
+        <NoProjectMessage organization={organization}>
 
+          <ResultsHeader
 
+            setSavedQuery={setSavedQuery}
 
+            errorCode={errorCode}
 
+            organization={organization}
 
+            location={location}
 
+            eventView={eventView}
 
+            yAxis={yAxisArray}
 
+            router={router}
 
+            isHomepage={isHomepage}
 
+          />
 
+          <Layout.Body>
 
+            <CustomMeasurementsProvider organization={organization} selection={selection}>
 
+              <Top fullWidth>
 
+                {this.renderMetricsFallbackBanner()}
 
+                {this.renderError(error)}
 
+                {this.renderTips()}
 
+                <StyledPageFilterBar condensed>
 
+                  <ProjectPageFilter />
 
+                  <EnvironmentPageFilter />
 
+                  <DatePageFilter alignDropdown="left" />
 
+                </StyledPageFilterBar>
 
+                <CustomMeasurementsContext.Consumer>
 
+                  {contextValue => (
 
+                    <StyledSearchBar
 
+                      searchSource="eventsv2"
 
                       organization={organization}
 
-                      eventView={eventView}
 
-                      location={location}
 
-                      onAxisChange={this.handleYAxisChange}
 
-                      onDisplayChange={this.handleDisplayChange}
 
-                      onTopEventsChange={this.handleTopEventsChange}
 
-                      onIntervalChange={this.handleIntervalChange}
 
-                      total={totalValues}
 
-                      confirmedQuery={confirmedQuery}
 
-                      yAxis={yAxisArray}
 
+                      projectIds={eventView.project}
 
+                      query={query}
 
+                      fields={fields}
 
+                      onSearch={this.handleSearch}
 
+                      maxQueryLength={MAX_QUERY_LENGTH}
 
+                      customMeasurements={contextValue?.customMeasurements ?? undefined}
 
                     />
 
-                  </MetricsCardinalityProvider>
 
-                </Top>
 
-                <Layout.Main fullWidth={!showTags}>
 
-                  <Table
 
+                  )}
 
+                </CustomMeasurementsContext.Consumer>
 
+                <MetricsCardinalityProvider
 
+                  organization={organization}
 
+                  location={location}
 
+                >
 
+                  <ResultsChart
 
+                    api={api}
 
+                    router={router}
 
                     organization={organization}
 
                     eventView={eventView}
 
                     location={location}
 
-                    title={title}
 
-                    setError={this.setError}
 
-                    onChangeShowTags={this.handleChangeShowTags}
 
-                    showTags={showTags}
 
+                    onAxisChange={this.handleYAxisChange}
 
+                    onDisplayChange={this.handleDisplayChange}
 
+                    onTopEventsChange={this.handleTopEventsChange}
 
+                    onIntervalChange={this.handleIntervalChange}
 
+                    total={totalValues}
 
                     confirmedQuery={confirmedQuery}
 
-                    onCursor={this.handleCursor}
 
-                    isHomepage={isHomepage}
 
-                    setTips={(tips: string[]) => this.setState({tips})}
 
+                    yAxis={yAxisArray}
 
                   />
 
-                </Layout.Main>
 
-                {showTags ? this.renderTagsTable() : null}
 
-                <Confirm
 
-                  priority="primary"
 
-                  header={<strong>{t('May lead to thumb twiddling')}</strong>}
 
-                  confirmText={t('Do it')}
 
-                  cancelText={t('Nevermind')}
 
-                  onConfirm={this.handleConfirmed}
 
-                  onCancel={this.handleCancelled}
 
-                  message={
 
-                    <p>
 
-                      {tct(
 
-                        `You've created a query that will search for events made
 
+                </MetricsCardinalityProvider>
 
+              </Top>
 
+              <Layout.Main fullWidth={!showTags}>
 
+                <Table
 
+                  organization={organization}
 
+                  eventView={eventView}
 
+                  location={location}
 
+                  title={title}
 
+                  setError={this.setError}
 
+                  onChangeShowTags={this.handleChangeShowTags}
 
+                  showTags={showTags}
 
+                  confirmedQuery={confirmedQuery}
 
+                  onCursor={this.handleCursor}
 
+                  isHomepage={isHomepage}
 
+                  setTips={(tips: string[]) => this.setState({tips})}
 
+                />
 
+              </Layout.Main>
 
+              {showTags ? this.renderTagsTable() : null}
 
+              <Confirm
 
+                priority="primary"
 
+                header={<strong>{t('May lead to thumb twiddling')}</strong>}
 
+                confirmText={t('Do it')}
 
+                cancelText={t('Nevermind')}
 
+                onConfirm={this.handleConfirmed}
 
+                onCancel={this.handleCancelled}
 
+                message={
 
+                  <p>
 
+                    {tct(
 
+                      `You've created a query that will search for events made
 
                       [dayLimit:over more than 30 days] for [projectLimit:more than 10 projects].
 
                       A lot has happened during that time, so this might take awhile.
 
                       Are you sure you want to do this?`,
 
-                        {
 
-                          dayLimit: <strong />,
 
-                          projectLimit: <strong />,
 
-                        }
 
-                      )}
 
-                    </p>
 
-                  }
 
-                >
 
-                  {this.setOpenFunction}
 
-                </Confirm>
 
-              </CustomMeasurementsProvider>
 
-            </Layout.Body>
 
-          </NoProjectMessage>
 
-        </StyledPageContent>
 
+                      {
 
+                        dayLimit: <strong />,
 
+                        projectLimit: <strong />,
 
+                      }
 
+                    )}
 
+                  </p>
 
+                }
 
+              >
 
+                {this.setOpenFunction}
 
+              </Confirm>
 
+            </CustomMeasurementsProvider>
 
+          </Layout.Body>
 
+        </NoProjectMessage>
 
       </SentryDocumentTitle>
 
     );
 
   }
 
 }
 
 
-const StyledPageContent = styled(PageContent)`
 
-  padding: 0;
 
-`;
 
-
 
 const StyledPageFilterBar = styled(PageFilterBar)`
 
   margin-bottom: ${space(1)};
 
 `;

+ 7 - 12
static/app/views/eventsV2/resultsHeader.tsx
View File 

@@ -9,9 +9,9 @@ import {fetchSavedQuery} from 'sentry/actionCreators/discoverSavedQueries';
 
 import {Client} from 'sentry/api';
 
 import Feature from 'sentry/components/acl/feature';
 
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 
-import {Title} from 'sentry/components/layouts/thirds';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 
 import ExternalLink from 'sentry/components/links/externalLink';
 
+import PageHeading from 'sentry/components/pageHeading';
 
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 
 import TimeSince from 'sentry/components/timeSince';
 
 import {t, tct} from 'sentry/locale';
 
@@ -145,9 +145,9 @@ class ResultsHeader extends Component<Props, State> {
 
 
     return (
 
       <Layout.Header>
 
-        <StyledHeaderContent>
 
+        <Layout.HeaderContent>
 
           {isHomepage ? (
 
-            <StyledTitle>
 
+            <StyledHeading>
 
               <GuideAnchor target="discover_landing_header">
 
                 {t('Discover')}
 
                 <PageHeadingQuestionTooltip
 
@@ -161,7 +161,7 @@ class ResultsHeader extends Component<Props, State> {
 
                   )}
 
                 />
 
               </GuideAnchor>
 
-            </StyledTitle>
 
+            </StyledHeading>
 
           ) : (
 
             <Fragment>
 
               <DiscoverBreadcrumb
 
@@ -179,7 +179,7 @@ class ResultsHeader extends Component<Props, State> {
 
             </Fragment>
 
           )}
 
           {this.renderAuthor()}
 
-        </StyledHeaderContent>
 
+        </Layout.HeaderContent>
 
         <Layout.HeaderActions>
 
           <SavedQueryButtonGroup
 
             setSavedQuery={setSavedQuery}
 
@@ -222,17 +222,12 @@ const Subtitle = styled('h4')`
 
   margin: ${space(0.5)} 0 0 0;
 
 `;
 
 
-const StyledHeaderContent = styled(Layout.HeaderContent)`
 
-  overflow: unset;
 
+const StyledHeading = styled(PageHeading)`
 
+  line-height: 40px;
 
 `;
 
 
 const BannerWrapper = styled('div')`
 
   grid-column: 1 / -1;
 
 `;
 
 
-const StyledTitle = styled(Title)`
 
-  overflow: unset;
 
-  margin-top: 0;
 
-`;
 
-
 
 export default withApi(ResultsHeader);

+ 5 - 4
static/app/views/monitors/monitors.tsx
View File 

@@ -13,6 +13,7 @@ import * as Layout from 'sentry/components/layouts/thirds';
 
 import Link from 'sentry/components/links/link';
 
 import OnboardingPanel from 'sentry/components/onboardingPanel';
 
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 
+import PageHeading from 'sentry/components/pageHeading';
 
 import Pagination from 'sentry/components/pagination';
 
 import {PanelTable} from 'sentry/components/panels';
 
 import ProjectPageFilter from 'sentry/components/projectPageFilter';
 
@@ -107,9 +108,9 @@ class Monitors extends AsyncView<Props, State> {
 
       <StyledPageContent>
 
         <Layout.Header>
 
           <Layout.HeaderContent>
 
-            <HeaderTitle>
 
+            <StyledHeading>
 
               {t('Cron Monitors')} <FeatureBadge type="beta" />
 
-            </HeaderTitle>
 
+            </StyledHeading>
 
           </Layout.HeaderContent>
 
           <Layout.HeaderActions>
 
             <ButtonBar gap={1}>
 
@@ -187,8 +188,8 @@ const StyledPageContent = styled(PageContent)`
 
   padding: 0;
 
 `;
 
 
-const HeaderTitle = styled(Layout.Title)`
 
-  margin-top: 0;
 
+const StyledHeading = styled(PageHeading)`
 
+  line-height: 40px;
 
 `;
 
 
 const StyledLink = styled(Link)`

Some files were not shown because too many files changed in this diff