ref(onboarding): Improve react docs format - (#45466)

static/app/components/onboarding/documentationWrapper.tsx

@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+
+import {Alert, alertStyles} from 'sentry/components/alert';
+import {space} from 'sentry/styles/space';
+
+type AlertType = React.ComponentProps<typeof Alert>['type'];
+
+const getAlertSelector = (type: AlertType) =>
+  type === 'muted' ? null : `.alert[level="${type}"], .alert-${type}`;
+
+export const DocumentationWrapper = styled('div')`
+  /* Size of the new footer + 16px */
+  padding-bottom: calc(72px + ${space(2)});
+
+  h2 {
+    font-size: 1.375rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  blockquote,
+  hr,
+  pre,
+  div[data-language] {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+
+  blockquote {
+    padding: ${space(1.5)} ${space(2)};
+    ${p => alertStyles({theme: p.theme, type: 'info'})}
+  }
+
+  blockquote > * {
+    margin: 0;
+  }
+
+  .gatsby-highlight:last-child {
+    margin-bottom: 0;
+  }
+
+  hr {
+    border-color: ${p => p.theme.border};
+  }
+
+  code {
+    color: ${p => p.theme.pink400};
+  }
+
+  .alert {
+    border-radius: ${p => p.theme.borderRadius};
+  }
+
+  /**
+   * XXX(epurkhiser): This comes from the doc styles and avoids bottom margin issues in alerts
+  */
+  .content-flush-bottom *:last-child {
+    margin-bottom: 0;
+  }
+
+  ${p =>
+    Object.keys(p.theme.alert).map(
+      type => `
+        ${getAlertSelector(type as AlertType)} {
+          ${alertStyles({theme: p.theme, type: type as AlertType})};
+          display: block;
+        }
+      `
+    )}
+`;

static/app/views/onboarding/setupDocs.tsx

@@ -1,14 +1,14 @@
 import {Fragment, useCallback, useEffect, useState} from 'react';
 import {browserHistory} from 'react-router';
-import {css, Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';
 import * as qs from 'query-string';
 
 import {loadDocs} from 'sentry/actionCreators/projects';
-import {Alert, alertStyles} from 'sentry/components/alert';
+import {Alert} from 'sentry/components/alert';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingError from 'sentry/components/loadingError';
+import {DocumentationWrapper} from 'sentry/components/onboarding/documentationWrapper';
 import {PlatformKey} from 'sentry/data/platformCategories';
 import platforms from 'sentry/data/platforms';
 import {t, tct} from 'sentry/locale';
@@ -81,7 +81,7 @@ function ProjectDocs(props: {
 
   const docs = props.platformDocs !== null && (
     <DocsWrapper key={props.platformDocs.html}>
-      <Content dangerouslySetInnerHTML={{__html: props.platformDocs.html}} />
+      <DocumentationWrapper dangerouslySetInnerHTML={{__html: props.platformDocs.html}} />
       {missingExampleWarning()}
     </DocsWrapper>
   );
@@ -349,19 +349,6 @@ function SetupDocs({
 
 export default withProjects(SetupDocs);
 
-type AlertType = React.ComponentProps<typeof Alert>['type'];
-
-const getAlertSelector = (type: AlertType) =>
-  type === 'muted' ? null : `.alert[level="${type}"], .alert-${type}`;
-
-const mapAlertStyles = (p: {theme: Theme}, type: AlertType) =>
-  css`
-    ${getAlertSelector(type)} {
-      ${alertStyles({theme: p.theme, type})};
-      display: block;
-    }
-  `;
-
 const AnimatedContentWrapper = styled(motion.div)`
   overflow: hidden;
 `;
@@ -377,44 +364,6 @@ AnimatedContentWrapper.defaultProps = {
   },
 };
 
-const Content = styled(motion.div)`
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    margin-bottom: 18px;
-  }
-
-  div[data-language] {
-    margin-bottom: ${space(2)};
-  }
-
-  code {
-    color: ${p => p.theme.pink400};
-  }
-
-  h2 {
-    font-size: 1.4em;
-  }
-
-  .alert h5 {
-    font-size: 1em;
-    margin-bottom: 0.625rem;
-  }
-
-  /**
-   * XXX(epurkhiser): This comes from the doc styles and avoids bottom margin issues in alerts
-   */
-  .content-flush-bottom *:last-child {
-    margin-bottom: 0;
-  }
-
-  ${p => Object.keys(p.theme.alert).map(type => mapAlertStyles(p, type as AlertType))}
-`;
-
 const DocsWrapper = styled(motion.div)``;
 
 DocsWrapper.defaultProps = {

static/app/views/organizationDetails/body.tsx

@@ -9,6 +9,7 @@ import {t, tct} from 'sentry/locale';
 import AlertStore from 'sentry/stores/alertStore';
 import {Organization} from 'sentry/types';
 import useApi from 'sentry/utils/useApi';
+import {useRouteContext} from 'sentry/utils/useRouteContext';
 import withOrganization from 'sentry/utils/withOrganization';
 
 type Props = {
@@ -100,6 +101,7 @@ function DeletionPending({organization}: Props) {
 
 function OrganizationDetailsBody({children, organization}: Props) {
   const status = organization?.status?.id;
+  const routeContext = useRouteContext();
 
   if (status === 'pending_deletion') {
     return <DeletionPending organization={organization} />;
@@ -109,10 +111,33 @@ function OrganizationDetailsBody({children, organization}: Props) {
     return <DeletionInProgress organization={organization} />;
   }
 
+  const heartbeatFooter = !!organization?.features.includes(
+    'onboarding-heartbeat-footer'
+  );
+
+  const gettingStartedRoutes = [
+    `/getting-started/${routeContext.params.projectId}/${routeContext.params.platform}/`,
+    `/${organization.slug}/${routeContext.params.projectId}/getting-started/${routeContext.params.platform}/`,
+  ];
+
+  const onboardingRoutes = [
+    `/onboarding/welcome/`,
+    `/onboarding/setup-docs/`,
+    `/onboarding/select-platform/`,
+    `/onboarding/${organization.slug}/welcome/`,
+    `/onboarding/${organization.slug}/setup-docs/`,
+    `/onboarding/${organization.slug}/select-platform/`,
+  ];
+
+  const showFooter = !heartbeatFooter
+    ? true
+    : !gettingStartedRoutes.includes(routeContext.location.pathname) &&
+      !onboardingRoutes.includes(routeContext.location.pathname);
+
   return (
     <Fragment>
       <ErrorBoundary>{children}</ErrorBoundary>
-      <Footer />
+      {showFooter && <Footer />}
     </Fragment>
   );
 }

static/app/views/projectInstall/platform.tsx

@@ -10,6 +10,7 @@ import ButtonBar from 'sentry/components/buttonBar';
 import NotFound from 'sentry/components/errors/notFound';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {DocumentationWrapper} from 'sentry/components/onboarding/documentationWrapper';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {
   performance as performancePlatforms,
@@ -198,33 +199,6 @@ export function ProjectInstallPlatform({location, params, route, router}: Props)
   );
 }
 
-const DocumentationWrapper = styled('div')`
-  line-height: 1.5;
-
-  .gatsby-highlight {
-    margin-bottom: ${space(3)};
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .alert {
-    margin-bottom: ${space(3)};
-    border-radius: ${p => p.theme.borderRadius};
-  }
-
-  blockquote {
-    padding: ${space(1)};
-    margin-left: 0;
-    background: ${p => p.theme.alert.info.backgroundLight};
-    border-left: 2px solid ${p => p.theme.alert.info.border};
-  }
-  blockquote > *:last-child {
-    margin-bottom: 0;
-  }
-`;
-
 const StyledButtonBar = styled(ButtonBar)`
   margin-top: ${space(3)};
   width: max-content;

tests/acceptance/test_api.py

@@ -4,7 +4,10 @@ from sentry.testutils import AcceptanceTestCase
 class ApiTokensTest(AcceptanceTestCase):
     def setUp(self):
         super().setUp()
-        self.user = self.create_user(email="foo@example.com", name="User Name")
+        self.org = self.create_organization(name="Rowdy Tiger Rowdy Tiger Rowdy Tiger", owner=None)
+        self.project = self.create_project(
+            organization=self.org, teams=[self.team], name="Bengal Bengal Bengal Bengal"
+        )
         self.login_as(self.user)
         self.path = "/api/"
 
@@ -25,7 +28,10 @@ class ApiTokensTest(AcceptanceTestCase):
 class ApiApplicationTest(AcceptanceTestCase):
     def setUp(self):
         super().setUp()
-        self.user = self.create_user(email="foo@example.com", name="User Name")
+        self.org = self.create_organization(name="Rowdy Tiger Rowdy Tiger Rowdy Tiger", owner=None)
+        self.project = self.create_project(
+            organization=self.org, teams=[self.team], name="Bengal Bengal Bengal Bengal"
+        )
         self.login_as(self.user)
         self.path = "/api/applications/"