projectProguardRow.tsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import Access from 'sentry/components/acl/access';
  4. import {Role} from 'sentry/components/acl/role';
  5. import {Button} from 'sentry/components/button';
  6. import ButtonBar from 'sentry/components/buttonBar';
  7. import Confirm from 'sentry/components/confirm';
  8. import FileSize from 'sentry/components/fileSize';
  9. import Link from 'sentry/components/links/link';
  10. import TimeSince from 'sentry/components/timeSince';
  11. import {Tooltip} from 'sentry/components/tooltip';
  12. import {IconClock, IconDelete, IconDownload} from 'sentry/icons';
  13. import {t, tct} from 'sentry/locale';
  14. import {space} from 'sentry/styles/space';
  15. import type {DebugFile} from 'sentry/types/debugFiles';
  16. import type {ProguardMappingAssociation} from 'sentry/views/settings/projectProguard';
  17. import {ProguardAssociations} from 'sentry/views/settings/projectProguard/associations';
  18. type Props = {
  19. downloadRole: string;
  20. downloadUrl: string;
  21. mapping: DebugFile;
  22. onDelete: (id: string) => void;
  23. orgSlug: string;
  24. associations?: ProguardMappingAssociation;
  25. };
  26. function ProjectProguardRow({
  27. associations = {releases: []},
  28. mapping,
  29. onDelete,
  30. downloadUrl,
  31. downloadRole,
  32. orgSlug,
  33. }: Props) {
  34. const {id, debugId, uuid, size, dateCreated} = mapping;
  35. const handleDeleteClick = () => {
  36. onDelete(id);
  37. };
  38. return (
  39. <Fragment>
  40. <NameColumn>
  41. <Name>{debugId || uuid || `(${t('empty')})`}</Name>
  42. <ProguardAssociations associations={associations} />
  43. <TimeWrapper>
  44. <IconClock size="sm" />
  45. <TimeSince date={dateCreated} />
  46. </TimeWrapper>
  47. </NameColumn>
  48. <SizeColumn>
  49. <FileSize bytes={size} />
  50. </SizeColumn>
  51. <ActionsColumn>
  52. <ButtonBar gap={0.5}>
  53. <Role role={downloadRole}>
  54. {({hasRole}) => (
  55. <Tooltip
  56. title={tct(
  57. 'Mappings can only be downloaded by users with organization [downloadRole] role[orHigher]. This can be changed in [settingsLink:Debug Files Access] settings.',
  58. {
  59. downloadRole,
  60. orHigher: downloadRole !== 'owner' ? ` ${t('or higher')}` : '',
  61. settingsLink: <Link to={`/settings/${orgSlug}/#debugFilesRole`} />,
  62. }
  63. )}
  64. disabled={hasRole}
  65. isHoverable
  66. >
  67. <Button
  68. size="sm"
  69. icon={<IconDownload size="sm" />}
  70. disabled={!hasRole}
  71. href={downloadUrl}
  72. title={hasRole ? t('Download Mapping') : undefined}
  73. aria-label={t('Download Mapping')}
  74. />
  75. </Tooltip>
  76. )}
  77. </Role>
  78. <Access access={['project:releases']}>
  79. {({hasAccess}) => (
  80. <Tooltip
  81. disabled={hasAccess}
  82. title={t('You do not have permission to delete mappings.')}
  83. >
  84. <Confirm
  85. message={t('Are you sure you want to remove this mapping?')}
  86. onConfirm={handleDeleteClick}
  87. disabled={!hasAccess}
  88. >
  89. <Button
  90. size="sm"
  91. icon={<IconDelete size="sm" />}
  92. title={hasAccess ? t('Remove Mapping') : undefined}
  93. aria-label={t('Remove Mapping')}
  94. disabled={!hasAccess}
  95. />
  96. </Confirm>
  97. </Tooltip>
  98. )}
  99. </Access>
  100. </ButtonBar>
  101. </ActionsColumn>
  102. </Fragment>
  103. );
  104. }
  105. const NameColumn = styled('div')`
  106. display: flex;
  107. flex-direction: column;
  108. align-items: flex-start;
  109. justify-content: center;
  110. `;
  111. const SizeColumn = styled('div')`
  112. display: flex;
  113. justify-content: flex-end;
  114. text-align: right;
  115. align-items: center;
  116. `;
  117. const ActionsColumn = styled(SizeColumn)``;
  118. const Name = styled('div')`
  119. padding-right: ${space(4)};
  120. overflow-wrap: break-word;
  121. word-break: break-all;
  122. `;
  123. const TimeWrapper = styled('div')`
  124. display: grid;
  125. gap: ${space(0.5)};
  126. grid-template-columns: min-content 1fr;
  127. font-size: ${p => p.theme.fontSizeMedium};
  128. align-items: center;
  129. color: ${p => p.theme.subText};
  130. margin-top: ${space(1)};
  131. `;
  132. export default ProjectProguardRow;