viewCodeOwnerModal.tsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import {Fragment} from 'react';
  2. import {css} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  5. import {SectionHeading} from 'sentry/components/charts/styles';
  6. import {t} from 'sentry/locale';
  7. import {space} from 'sentry/styles/space';
  8. import type {CodeOwner} from 'sentry/types';
  9. import {getCodeOwnerIcon} from 'sentry/utils/integrationUtil';
  10. import theme from 'sentry/utils/theme';
  11. import RulesPanel from 'sentry/views/settings/project/projectOwnership/rulesPanel';
  12. interface ViewCodeOwnerModalProps extends ModalRenderProps {
  13. codeowner: CodeOwner;
  14. }
  15. function ViewCodeOwnerModal({Body, Header, codeowner}: ViewCodeOwnerModalProps) {
  16. return (
  17. <Fragment>
  18. <Header closeButton>
  19. <HeaderContainer>
  20. {getCodeOwnerIcon(codeowner.provider)}
  21. <h4>{codeowner.codeMapping?.repoName}</h4>
  22. </HeaderContainer>
  23. </Header>
  24. <Body>
  25. <BodyContainer>
  26. <div>
  27. <div>
  28. <SectionHeading>{t('Code Mapping:')}</SectionHeading>
  29. </div>
  30. {t('Stack Trace Root -')} <code>{codeowner.codeMapping?.stackRoot}</code>
  31. <br />
  32. {t('Source Code Root -')} <code>{codeowner.codeMapping?.sourceRoot}</code>
  33. </div>
  34. <RulesPanel
  35. data-test-id="issueowners-panel"
  36. type="codeowners"
  37. provider={codeowner.provider}
  38. raw={codeowner.ownershipSyntax || ''}
  39. dateUpdated={codeowner.dateUpdated}
  40. />
  41. </BodyContainer>
  42. </Body>
  43. </Fragment>
  44. );
  45. }
  46. const HeaderContainer = styled('div')`
  47. display: flex;
  48. align-items: center;
  49. gap: ${space(1)};
  50. `;
  51. const BodyContainer = styled('div')`
  52. display: flex;
  53. flex-direction: column;
  54. gap: ${space(2)};
  55. `;
  56. export const modalCss = css`
  57. @media (min-width: ${theme.breakpoints.small}) {
  58. width: 80%;
  59. }
  60. [role='document'] {
  61. overflow: initial;
  62. }
  63. `;
  64. export default ViewCodeOwnerModal;