alert: drop custom alert

static/app/views/insights/common/components/modulePageFilterBar.tsx

@@ -106,11 +106,15 @@ export function ModulePageFilterBar({
           otherwise two clicks are required because of some rerendering/event propogation issues into the children */}
         <div style={{width: '100px', position: 'absolute', height: '100%'}} />
       </Tooltip>
-      <PageFilterBar condensed>
-        {!disableProjectFilter && <ProjectPageFilter onChange={onProjectChange} />}
-        <EnvironmentPageFilter />
-        <DatePageFilter {...dateFilterProps} />
-      </PageFilterBar>
+      {/* Requires an extra div, else the pagefilterbar will grow to fill the height
+      of the readout ribbon which results in buttons being very large. */}
+      <div>
+        <PageFilterBar condensed>
+          {!disableProjectFilter && <ProjectPageFilter onChange={onProjectChange} />}
+          <EnvironmentPageFilter />
+          <DatePageFilter {...dateFilterProps} />
+        </PageFilterBar>
+      </div>
       {hasDataWithSelectedProjects && extraFilters}
     </Fragment>
   );

static/app/views/issueDetails/groupDetails.tsx

@@ -60,7 +60,7 @@ import {
   IssueDetailsTourContext,
   ORDERED_ISSUE_DETAILS_TOUR,
 } from 'sentry/views/issueDetails/issueDetailsTour';
-import SampleEventAlert from 'sentry/views/issueDetails/sampleEventAlert';
+import {SampleEventAlert} from 'sentry/views/issueDetails/sampleEventAlert';
 import {GroupDetailsLayout} from 'sentry/views/issueDetails/streamline/groupDetailsLayout';
 import {useIssueActivityDrawer} from 'sentry/views/issueDetails/streamline/hooks/useIssueActivityDrawer';
 import {useMergedIssuesDrawer} from 'sentry/views/issueDetails/streamline/hooks/useMergedIssuesDrawer';

static/app/views/issueDetails/sampleEventAlert.tsx

@@ -1,51 +1,45 @@
-import styled from '@emotion/styled';
-
+import {Alert} from 'sentry/components/core/alert';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
-import PageAlertBar from 'sentry/components/pageAlertBar';
 import {IconLightning} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import type {AvatarProject} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 
-function SampleEventAlert({
+export function SampleEventAlert({
   organization,
   project,
 }: {
   organization: Organization;
   project: AvatarProject;
 }) {
   return (
-    <PageAlertBar>
-      <IconLightning />
-      <TextWrapper>
-        {t(
-          'You are viewing a sample error. Configure Sentry to start viewing real errors.'
-        )}
-      </TextWrapper>
-      <LinkButton
-        size="xs"
-        priority="primary"
-        to={`/${organization.slug}/${project.slug}/getting-started/${
-          project.platform || ''
-        }`}
-        onClick={() =>
-          trackAnalytics('growth.sample_error_onboarding_link_clicked', {
-            project_id: project.id?.toString(),
-            organization,
-            platform: project.platform,
-          })
-        }
-      >
-        {t('Get Started')}
-      </LinkButton>
-    </PageAlertBar>
+    <Alert
+      system
+      type="info"
+      icon={<IconLightning />}
+      trailingItems={
+        <LinkButton
+          size="xs"
+          priority="primary"
+          to={`/${organization.slug}/${project.slug}/getting-started/${
+            project.platform || ''
+          }`}
+          onClick={() =>
+            trackAnalytics('growth.sample_error_onboarding_link_clicked', {
+              project_id: project.id?.toString(),
+              organization,
+              platform: project.platform,
+            })
+          }
+        >
+          {t('Get Started')}
+        </LinkButton>
+      }
+    >
+      {t(
+        'You are viewing a sample error. Configure Sentry to start viewing real errors.'
+      )}
+    </Alert>
   );
 }
-
-export default SampleEventAlert;
-
-const TextWrapper = styled('span')`
-  margin: 0 ${space(1)};
-`;

static/app/views/issueDetails/streamline/header/header.tsx

@@ -333,7 +333,7 @@ const WorkflowActions = styled('div')`
 
 const Workflow = styled('div')`
   display: flex;
+  align-items: center;
   gap: ${space(0.5)};
   color: ${p => p.theme.subText};
-  align-items: center;
 `;

static/app/views/performance/transactionDetails/finishSetupAlert.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
+import {Alert} from 'sentry/components/core/alert';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
-import PageAlertBar from 'sentry/components/pageAlertBar';
 import {IconLightning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -16,28 +16,32 @@ export default function FinishSetupAlert({
   projectId: string;
 }) {
   return (
-    <PageAlertBar>
-      <IconLightning />
+    <Alert
+      type="info"
+      icon={<IconLightning />}
+      trailingItems={
+        <LinkButton
+          size="xs"
+          priority="primary"
+          external
+          href="https://docs.sentry.io/performance-monitoring/getting-started/"
+          onClick={() =>
+            trackAnalytics('growth.sample_transaction_docs_link_clicked', {
+              project_id: projectId,
+              organization,
+            })
+          }
+        >
+          {t('Get Started')}
+        </LinkButton>
+      }
+    >
       <TextWrapper>
         {t(
           'You are viewing a sample transaction. Configure performance to start viewing real transactions.'
         )}
       </TextWrapper>
-      <LinkButton
-        size="xs"
-        priority="primary"
-        external
-        href="https://docs.sentry.io/performance-monitoring/getting-started/"
-        onClick={() =>
-          trackAnalytics('growth.sample_transaction_docs_link_clicked', {
-            project_id: projectId,
-            organization,
-          })
-        }
-      >
-        {t('Get Started')}
-      </LinkButton>
-    </PageAlertBar>
+    </Alert>
   );
 }