organizationApiKeysList.tsx 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. import {Fragment} from 'react';
  2. import type {PlainRoute, RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import AlertLink from 'sentry/components/alertLink';
  5. import {Button} from 'sentry/components/button';
  6. import ExternalLink from 'sentry/components/links/externalLink';
  7. import Link from 'sentry/components/links/link';
  8. import LinkWithConfirmation from 'sentry/components/links/linkWithConfirmation';
  9. import PanelTable from 'sentry/components/panels/panelTable';
  10. import TextCopyInput from 'sentry/components/textCopyInput';
  11. import {IconAdd, IconDelete} from 'sentry/icons';
  12. import {t, tct} from 'sentry/locale';
  13. import type {Organization} from 'sentry/types';
  14. import recreateRoute from 'sentry/utils/recreateRoute';
  15. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  16. import TextBlock from 'sentry/views/settings/components/text/textBlock';
  17. import type {DeprecatedApiKey} from './types';
  18. type Props = RouteComponentProps<{}, {}> & {
  19. /**
  20. * Busy differs from loading in that busy is a result of an action like removing
  21. */
  22. busy: boolean;
  23. keys: DeprecatedApiKey[];
  24. /**
  25. * Loading refers to fetching the API Keys
  26. */
  27. loading: boolean;
  28. onAddApiKey: () => {};
  29. onRemove: (id: DeprecatedApiKey['id']) => {};
  30. organization: Organization;
  31. routes: PlainRoute[];
  32. };
  33. function OrganizationApiKeysList({
  34. organization,
  35. params,
  36. routes,
  37. keys,
  38. busy,
  39. loading,
  40. onAddApiKey,
  41. onRemove,
  42. }: Props) {
  43. const hasKeys = keys && keys.length;
  44. const action = (
  45. <Button
  46. priority="primary"
  47. size="sm"
  48. icon={<IconAdd isCircled />}
  49. busy={busy}
  50. disabled={busy}
  51. onClick={onAddApiKey}
  52. >
  53. {t('New API Key')}
  54. </Button>
  55. );
  56. return (
  57. <div>
  58. <SettingsPageHeader title={t('API Keys')} action={action} />
  59. <TextBlock>
  60. {tct(
  61. `API keys grant access to the [api:developer web API].
  62. If you're looking to configure a Sentry client, you'll need a
  63. client key which is available in your project settings.`,
  64. {
  65. api: <ExternalLink href="https://docs.sentry.io/api/" />,
  66. }
  67. )}
  68. </TextBlock>
  69. <AlertLink to="/settings/account/api/auth-tokens/" priority="info">
  70. {tct(
  71. 'Until Sentry supports OAuth, you might want to switch to using [tokens:User Auth Tokens] instead.',
  72. {
  73. tokens: <u />,
  74. }
  75. )}
  76. </AlertLink>
  77. <PanelTable
  78. isLoading={loading}
  79. isEmpty={!hasKeys}
  80. emptyMessage={t('No API keys for this organization')}
  81. headers={[t('Name'), t('Key'), t('Actions')]}
  82. >
  83. {keys &&
  84. keys.map(({id, key, label}) => {
  85. const apiDetailsUrl = recreateRoute(`${id}/`, {
  86. params: {...params, orgId: organization.slug},
  87. routes,
  88. });
  89. return (
  90. <Fragment key={key}>
  91. <Cell>
  92. <Link to={apiDetailsUrl}>{label}</Link>
  93. </Cell>
  94. <TextCopyInput size="sm" monospace>
  95. {key}
  96. </TextCopyInput>
  97. <Cell>
  98. <LinkWithConfirmation
  99. aria-label={t('Remove API Key')}
  100. className="btn btn-default btn-sm"
  101. onConfirm={() => onRemove(id)}
  102. message={t('Are you sure you want to remove this API key?')}
  103. title={t('Remove API Key?')}
  104. >
  105. <IconDelete size="xs" css={{position: 'relative', top: '2px'}} />
  106. </LinkWithConfirmation>
  107. </Cell>
  108. </Fragment>
  109. );
  110. })}
  111. </PanelTable>
  112. </div>
  113. );
  114. }
  115. const Cell = styled('div')`
  116. display: flex;
  117. align-items: center;
  118. `;
  119. export default OrganizationApiKeysList;