sharedGroupHeader.tsx 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import styled from '@emotion/styled';
  2. import EventMessage from 'sentry/components/events/eventMessage';
  3. import FeatureBadge from 'sentry/components/featureBadge';
  4. import ProjectBadge from 'sentry/components/idBadge/projectBadge';
  5. import ShortId from 'sentry/components/shortId';
  6. import {t} from 'sentry/locale';
  7. import {space} from 'sentry/styles/space';
  8. import type {Group} from 'sentry/types';
  9. import {IssueCategory} from 'sentry/types';
  10. type Props = {
  11. group: Group;
  12. };
  13. function SharedGroupHeader({group}: Props) {
  14. return (
  15. <Wrapper>
  16. <Details>
  17. <TitleWrap>
  18. <Title>{group.title}</Title>
  19. <ShortIdWrapper>
  20. <ShortId
  21. shortId={group.shortId}
  22. avatar={<ProjectBadge project={group.project} avatarSize={20} hideName />}
  23. />
  24. {group.issueCategory === IssueCategory.PERFORMANCE && (
  25. <FeatureBadge
  26. type="beta"
  27. title={t(
  28. 'Not all features have been implemented for shared Performance Issues and these issues may be missing context.'
  29. )}
  30. />
  31. )}
  32. </ShortIdWrapper>
  33. </TitleWrap>
  34. <EventMessage
  35. showUnhandled={group.isUnhandled}
  36. message={group.culprit}
  37. level={group.level}
  38. type={group.type}
  39. />
  40. </Details>
  41. </Wrapper>
  42. );
  43. }
  44. export default SharedGroupHeader;
  45. const Wrapper = styled('div')`
  46. padding: ${space(3)} ${space(4)} ${space(3)} ${space(4)};
  47. border-bottom: 1px solid ${p => p.theme.border};
  48. position: relative;
  49. `;
  50. const Details = styled('div')`
  51. max-width: 960px;
  52. margin: 0 auto;
  53. `;
  54. const ShortIdWrapper = styled('div')`
  55. display: flex;
  56. `;
  57. const TitleWrap = styled('div')`
  58. display: grid;
  59. grid-template-columns: 1fr max-content;
  60. align-items: center;
  61. margin-bottom: ${space(1)};
  62. `;
  63. const Title = styled('h3')`
  64. color: ${p => p.theme.headingColor};
  65. font-size: ${p => p.theme.fontSizeExtraLarge};
  66. line-height: ${p => p.theme.text.lineHeightHeading};
  67. margin-right: ${space(2)};
  68. margin-bottom: 0;
  69. ${p => p.theme.overflowEllipsis};
  70. @media (min-width: ${props => props.theme.breakpoints.small}) {
  71. font-size: ${p => p.theme.headerFontSize};
  72. }
  73. `;