page.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. import {ReactNode} from 'react';
  2. import styled from '@emotion/styled';
  3. import {FeatureFeedback} from 'sentry/components/featureFeedback';
  4. import * as Layout from 'sentry/components/layouts/thirds';
  5. import DetailsPageBreadcrumbs from 'sentry/components/replays/header/detailsPageBreadcrumbs';
  6. import {CrumbWalker} from 'sentry/components/replays/walker/urlWalker';
  7. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  8. import space from 'sentry/styles/space';
  9. import type {Crumb} from 'sentry/types/breadcrumbs';
  10. import type {EventTransaction} from 'sentry/types/event';
  11. import EventMetaData, {
  12. HeaderPlaceholder,
  13. } from 'sentry/views/replays/detail/eventMetaData';
  14. import ChooseLayout from 'sentry/views/replays/detail/layout/chooseLayout';
  15. type Props = {
  16. children: ReactNode;
  17. orgId: string;
  18. crumbs?: Crumb[];
  19. durationMS?: number;
  20. event?: EventTransaction;
  21. };
  22. function Page({children, crumbs, durationMS, event, orgId}: Props) {
  23. const title = event ? `${event.id} - Replays - ${orgId}` : `Replays - ${orgId}`;
  24. const header = (
  25. <Header>
  26. <HeaderContent>
  27. <DetailsPageBreadcrumbs orgId={orgId} event={event} />
  28. </HeaderContent>
  29. <ButtonActionsWrapper>
  30. <FeatureFeedback featureName="replay" buttonProps={{size: 'xs'}} />
  31. <ChooseLayout />
  32. </ButtonActionsWrapper>
  33. {event && crumbs ? (
  34. <CrumbWalker event={event} crumbs={crumbs} />
  35. ) : (
  36. <HeaderPlaceholder />
  37. )}
  38. <MetaDataColumn>
  39. <EventMetaData crumbs={crumbs} durationMS={durationMS} event={event} />
  40. </MetaDataColumn>
  41. </Header>
  42. );
  43. return (
  44. <SentryDocumentTitle title={title}>
  45. <FullViewport>
  46. {header}
  47. {children}
  48. </FullViewport>
  49. </SentryDocumentTitle>
  50. );
  51. }
  52. const Header = styled(Layout.Header)`
  53. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  54. padding: ${space(2)} ${space(2)} ${space(1.5)} ${space(2)};
  55. }
  56. `;
  57. const HeaderContent = styled(Layout.HeaderContent)`
  58. margin-bottom: 0;
  59. `;
  60. // TODO(replay); This could make a lot of sense to put inside HeaderActions by default
  61. const ButtonActionsWrapper = styled(Layout.HeaderActions)`
  62. display: grid;
  63. grid-template-columns: repeat(2, max-content);
  64. justify-content: flex-end;
  65. gap: ${space(1)};
  66. `;
  67. const MetaDataColumn = styled(Layout.HeaderActions)`
  68. padding-left: ${space(3)};
  69. align-self: end;
  70. `;
  71. const FullViewport = styled('div')`
  72. height: 100vh;
  73. width: 100%;
  74. display: grid;
  75. grid-template-rows: auto 1fr;
  76. overflow: hidden;
  77. /*
  78. * The footer component is a sibling of this div.
  79. * Remove it so the replay can take up the
  80. * entire screen.
  81. */
  82. ~ footer {
  83. display: none;
  84. }
  85. /*
  86. TODO: Set \`body { overflow: hidden; }\` so that the body doesn't wiggle
  87. when you try to scroll something that is non-scrollable.
  88. */
  89. `;
  90. export default Page;