authTokenRow.tsx 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Button} from 'sentry/components/button';
  4. import Confirm from 'sentry/components/confirm';
  5. import Link from 'sentry/components/links/link';
  6. import LoadingIndicator from 'sentry/components/loadingIndicator';
  7. import Placeholder from 'sentry/components/placeholder';
  8. import TimeSince from 'sentry/components/timeSince';
  9. import {Tooltip} from 'sentry/components/tooltip';
  10. import {IconSubtract} from 'sentry/icons';
  11. import {t, tct} from 'sentry/locale';
  12. import {space} from 'sentry/styles/space';
  13. import type {Organization, OrgAuthToken, Project} from 'sentry/types';
  14. import getDynamicText from 'sentry/utils/getDynamicText';
  15. import {tokenPreview} from 'sentry/views/settings/organizationAuthTokens';
  16. function LastUsed({
  17. organization,
  18. dateLastUsed,
  19. projectLastUsed,
  20. }: {
  21. organization: Organization;
  22. dateLastUsed?: Date;
  23. projectLastUsed?: Project;
  24. }) {
  25. if (dateLastUsed && projectLastUsed) {
  26. return (
  27. <Fragment>
  28. {tct('[date] in project [project]', {
  29. date: (
  30. <TimeSince
  31. date={getDynamicText({
  32. value: dateLastUsed,
  33. fixed: new Date(1508208080000), // National Pasta Day
  34. })}
  35. />
  36. ),
  37. project: (
  38. <Link to={`/settings/${organization.slug}/${projectLastUsed.slug}/`}>
  39. {projectLastUsed.name}
  40. </Link>
  41. ),
  42. })}
  43. </Fragment>
  44. );
  45. }
  46. if (dateLastUsed) {
  47. return (
  48. <Fragment>
  49. <TimeSince
  50. date={getDynamicText({
  51. value: dateLastUsed,
  52. fixed: new Date(1508208080000), // National Pasta Day
  53. })}
  54. />
  55. </Fragment>
  56. );
  57. }
  58. if (projectLastUsed) {
  59. return (
  60. <Fragment>
  61. {tct('in project [project]', {
  62. project: (
  63. <Link to={`/settings/${organization.slug}/${projectLastUsed.slug}/`}>
  64. {projectLastUsed.name}
  65. </Link>
  66. ),
  67. })}
  68. </Fragment>
  69. );
  70. }
  71. return <NeverUsed>{t('never used')}</NeverUsed>;
  72. }
  73. export function OrganizationAuthTokensAuthTokenRow({
  74. organization,
  75. isRevoking,
  76. token,
  77. revokeToken,
  78. projectLastUsed,
  79. isProjectLoading,
  80. }: {
  81. isRevoking: boolean;
  82. organization: Organization;
  83. token: OrgAuthToken;
  84. isProjectLoading?: boolean;
  85. projectLastUsed?: Project;
  86. revokeToken?: (token: OrgAuthToken) => void;
  87. }) {
  88. return (
  89. <Fragment>
  90. <div>
  91. <Label>
  92. <Link to={`/settings/${organization.slug}/auth-tokens/${token.id}/`}>
  93. {token.name}
  94. </Link>
  95. </Label>
  96. {token.tokenLastCharacters && (
  97. <TokenPreview aria-label={t('Token preview')}>
  98. {tokenPreview(
  99. getDynamicText({
  100. value: token.tokenLastCharacters,
  101. fixed: 'ABCD',
  102. }),
  103. 'sntrys_'
  104. )}
  105. </TokenPreview>
  106. )}
  107. </div>
  108. <DateTime>
  109. {isProjectLoading ? (
  110. <Placeholder height="1.25em" />
  111. ) : (
  112. <Fragment>
  113. <TimeSince
  114. date={getDynamicText({
  115. value: token.dateCreated,
  116. fixed: new Date(1508208080000), // National Pasta Day
  117. })}
  118. />
  119. </Fragment>
  120. )}
  121. </DateTime>
  122. <DateTime>
  123. {isProjectLoading ? (
  124. <Placeholder height="1.25em" />
  125. ) : (
  126. <LastUsed
  127. dateLastUsed={token.dateLastUsed}
  128. projectLastUsed={projectLastUsed}
  129. organization={organization}
  130. />
  131. )}
  132. </DateTime>
  133. <Actions>
  134. <Tooltip
  135. title={t(
  136. 'You must be an organization owner, manager or admin to revoke a token.'
  137. )}
  138. disabled={!!revokeToken}
  139. >
  140. <Confirm
  141. disabled={!revokeToken || isRevoking}
  142. onConfirm={revokeToken ? () => revokeToken(token) : undefined}
  143. message={t(
  144. 'Are you sure you want to revoke this token? The token will not be usable anymore, and this cannot be undone.'
  145. )}
  146. >
  147. <Button
  148. size="sm"
  149. disabled={isRevoking || !revokeToken}
  150. aria-label={t('Revoke %s', token.name)}
  151. icon={
  152. isRevoking ? (
  153. <LoadingIndicator mini />
  154. ) : (
  155. <IconSubtract isCircled size="xs" />
  156. )
  157. }
  158. >
  159. {t('Revoke')}
  160. </Button>
  161. </Confirm>
  162. </Tooltip>
  163. </Actions>
  164. </Fragment>
  165. );
  166. }
  167. const Label = styled('div')``;
  168. const Actions = styled('div')`
  169. display: flex;
  170. justify-content: flex-end;
  171. `;
  172. const DateTime = styled('div')`
  173. display: flex;
  174. align-items: center;
  175. gap: ${space(0.5)};
  176. `;
  177. const NeverUsed = styled('div')`
  178. color: ${p => p.theme.gray300};
  179. `;
  180. const TokenPreview = styled('div')`
  181. color: ${p => p.theme.gray300};
  182. `;