index.tsx 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import styled from '@emotion/styled';
  2. import ExternalLink from 'sentry/components/links/externalLink';
  3. import List from 'sentry/components/list';
  4. import {t, tct} from 'sentry/locale';
  5. import {space} from 'sentry/styles/space';
  6. import ModalManager from '../modalManager';
  7. import Item from './item';
  8. import Terminal from './terminal';
  9. class Add extends ModalManager {
  10. getTitle() {
  11. return t('Register Key');
  12. }
  13. getBtnSaveLabel() {
  14. return t('Register');
  15. }
  16. getData() {
  17. const {savedRelays} = this.props;
  18. const trustedRelays = [...savedRelays, this.state.values];
  19. return {trustedRelays};
  20. }
  21. getContent() {
  22. return (
  23. <StyledList symbol="colored-numeric">
  24. <Item
  25. title={
  26. <div>
  27. {tct('Initialize the configuration. [link: Learn how]', {
  28. link: (
  29. <ExternalLink href="https://docs.sentry.io/product/relay/getting-started/#initializing-configuration" />
  30. ),
  31. })}
  32. </div>
  33. }
  34. subtitle={t('Within your terminal:')}
  35. >
  36. <Terminal command="relay config init" />
  37. </Item>
  38. <Item
  39. title={
  40. <div>
  41. {tct(
  42. 'Go to the file [jsonFile: credentials.json] to find the public key and enter it below.',
  43. {
  44. jsonFile: (
  45. <ExternalLink href="https://docs.sentry.io/product/relay/getting-started/#registering-relay-with-sentry" />
  46. ),
  47. }
  48. )}
  49. </div>
  50. }
  51. >
  52. {super.getForm()}
  53. </Item>
  54. </StyledList>
  55. );
  56. }
  57. }
  58. export default Add;
  59. const StyledList = styled(List)`
  60. display: grid;
  61. gap: ${space(3)};
  62. `;