ref: cleanup page-frame feature flag

static/app/components/core/drawer/components.tsx

@@ -11,7 +11,6 @@ import {TooltipContext} from '@sentry/scraps/tooltip';
 import {IconClose} from 'sentry/icons/iconClose';
 import {t} from 'sentry/locale';
 import {PRIMARY_HEADER_HEIGHT} from 'sentry/views/navigation/constants';
-import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 import {
   DEFAULT_WIDTH_PERCENT,
@@ -137,15 +136,14 @@ export function DrawerHeader({
   hideCloseButtonText = false,
 }: DrawerHeaderProps) {
   const {onClose} = useDrawerContentContext();
-  const hasPageFrameFeature = useHasPageFrameFeature();
 
   return (
     <Header
       ref={ref}
       className={className}
       hideCloseButton={hideCloseButton}
       hideBar={hideBar}
-      height={hasPageFrameFeature ? `${PRIMARY_HEADER_HEIGHT}px` : undefined}
+      height={`${PRIMARY_HEADER_HEIGHT}px`}
     >
       {!hideCloseButton && (
         <Fragment>

static/app/components/core/markdown/markdown.spec.tsx

@@ -12,15 +12,15 @@ describe('Markdown', () => {
     });
 
     it('renders headings', () => {
-      render(<Markdown raw="# Heading 1" />);
-      expect(screen.getByRole('heading', {level: 1})).toHaveTextContent('Heading 1');
+      render(<Markdown raw="## Heading 2" />);
+      expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('Heading 2');
     });
 
     it('renders multiple heading levels', () => {
-      render(<Markdown raw={'# H1\n\n## H2\n\n### H3'} />);
-      expect(screen.getByRole('heading', {level: 1})).toHaveTextContent('H1');
+      render(<Markdown raw={'## H2\n\n### H3\n\n#### H4'} />);
       expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('H2');
       expect(screen.getByRole('heading', {level: 3})).toHaveTextContent('H3');
+      expect(screen.getByRole('heading', {level: 4})).toHaveTextContent('H4');
     });
 
     it('renders bold and italic', () => {

static/app/components/core/modal/index.tsx

@@ -17,7 +17,6 @@ import {useLegacyStore} from 'sentry/stores/useLegacyStore';
 import {getModalPortal} from 'sentry/utils/getModalPortal';
 import {useEffectAfterFirstRender} from 'sentry/utils/useEffectAfterFirstRender';
 import {useLocation} from 'sentry/utils/useLocation';
-import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 import {makeClosableHeader, makeCloseButton, ModalBody, ModalFooter} from './components';
 
@@ -118,7 +117,6 @@ type Props = {
 
 export function GlobalModal({onClose}: Props) {
   const {renderer, options, visible, triggerElement} = useModalStore();
-  const hasPageFrame = useHasPageFrameFeature();
   const location = useLocation();
   const theme = useTheme();
   const closeEvents = options.closeEvents ?? 'all';
@@ -258,22 +256,14 @@ export function GlobalModal({onClose}: Props) {
                 role="dialog"
                 aria-modal
                 css={options.modalCss}
-                initial={hasPageFrame ? {opacity: 0, scale: 0.98} : {opacity: 0, y: -10}}
-                animate={hasPageFrame ? {opacity: 1, scale: 1} : {opacity: 1, y: 0}}
-                exit={
-                  hasPageFrame
-                    ? {opacity: 0, scale: 0.99, transition: theme.motion.framer.exit.fast}
-                    : {opacity: 0, y: 15}
-                }
-                transition={
-                  hasPageFrame
-                    ? theme.motion.framer.enter.moderate
-                    : {
-                        type: 'spring',
-                        stiffness: 450,
-                        damping: 25,
-                      }
-                }
+                initial={{opacity: 0, scale: 0.98}}
+                animate={{opacity: 1, scale: 1}}
+                exit={{
+                  opacity: 0,
+                  scale: 0.99,
+                  transition: theme.motion.framer.exit.fast,
+                }}
+                transition={theme.motion.framer.enter.moderate}
               >
                 <Surface variant="overlay" elevation="high">
                   {p => (

static/app/components/events/eventDrawer.tsx

@@ -1,5 +1,4 @@
 import type {ComponentPropsWithoutRef} from 'react';
-import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {DrawerBody, DrawerHeader} from '@sentry/scraps/drawer';
@@ -12,7 +11,6 @@ import {
   NAVIGATION_MOBILE_TOPBAR_HEIGHT_WITH_PAGE_FRAME,
   PRIMARY_HEADER_HEIGHT,
 } from 'sentry/views/navigation/constants';
-import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 export const Header = styled('h3')`
   display: block;
@@ -54,33 +52,21 @@ export const ShortId = styled('div')`
   line-height: 1;
 `;
 
-const EventDrawerContainerRoot = styled('div')<{hasPageFrameFeature: boolean}>`
+export const EventDrawerContainer = styled('div')`
   height: 100%;
   display: grid;
   grid-template-rows: max-content max-content auto;
 
-  ${p =>
-    p.hasPageFrameFeature &&
-    css`
-      /* Responsive height that matches the TopBar (48px mobile, 53px desktop) */
-      --event-drawer-header-height: ${NAVIGATION_MOBILE_TOPBAR_HEIGHT_WITH_PAGE_FRAME}px;
-      --event-navigator-box-shadow: none;
-      --event-navigator-border-bottom: 1px solid ${p.theme.tokens.border.primary};
+  /* Responsive height that matches the TopBar (48px mobile, 53px desktop) */
+  --event-drawer-header-height: ${NAVIGATION_MOBILE_TOPBAR_HEIGHT_WITH_PAGE_FRAME}px;
+  --event-navigator-box-shadow: none;
+  --event-navigator-border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
 
-      @media (min-width: ${p.theme.breakpoints.md}) {
-        --event-drawer-header-height: ${PRIMARY_HEADER_HEIGHT}px;
-      }
-    `}
+  @media (min-width: ${p => p.theme.breakpoints.md}) {
+    --event-drawer-header-height: ${PRIMARY_HEADER_HEIGHT}px;
+  }
 `;
 
-export function EventDrawerContainer(props: ComponentPropsWithoutRef<'div'>) {
-  const hasPageFrameFeature = useHasPageFrameFeature();
-
-  return (
-    <EventDrawerContainerRoot {...props} hasPageFrameFeature={hasPageFrameFeature} />
-  );
-}
-
 export const EventDrawerHeader = styled(DrawerHeader)`
   position: unset;
   /* Height priority: container variable (responsive) → DrawerHeader height prop → default */

static/app/components/featureShowcase.spec.tsx

@@ -87,11 +87,11 @@ describe('FeatureShowcase', () => {
 
     await userEvent.click(screen.getByTestId('reveal'));
 
-    expect(screen.getByRole('heading')).toHaveTextContent('First');
+    expect(screen.getByRole('heading', {name: 'First'})).toHaveTextContent('First');
 
     await userEvent.click(screen.getByRole('button', {name: 'Next'}));
 
-    expect(screen.getByRole('heading')).toHaveTextContent('Second');
+    expect(screen.getByRole('heading', {name: 'Second'})).toHaveTextContent('Second');
     expect(onStepChange).toHaveBeenCalled();
   });
 
@@ -123,11 +123,11 @@ describe('FeatureShowcase', () => {
     await userEvent.click(screen.getByTestId('reveal'));
 
     await userEvent.click(screen.getByRole('button', {name: 'Next'}));
-    expect(screen.getByRole('heading')).toHaveTextContent('Second');
+    expect(screen.getByRole('heading', {name: 'Second'})).toHaveTextContent('Second');
     expect(screen.getByRole('button', {name: 'Back'})).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button', {name: 'Back'}));
-    expect(screen.getByRole('heading')).toHaveTextContent('First');
+    expect(screen.getByRole('heading', {name: 'First'})).toHaveTextContent('First');
     expect(screen.queryByRole('button', {name: 'Back'})).not.toBeInTheDocument();
   });
 
@@ -143,7 +143,7 @@ describe('FeatureShowcase', () => {
 
     await userEvent.click(screen.getByTestId('reveal'));
 
-    expect(screen.getByRole('heading')).toHaveTextContent('First');
+    expect(screen.getByRole('heading', {name: 'First'})).toHaveTextContent('First');
     expect(screen.getByTestId('step-image')).toBeInTheDocument();
     expect(screen.getByTestId('step-action')).toBeInTheDocument();
     expect(screen.getByText('1 / 2')).toBeInTheDocument();