projectKeyCredentials.tsx 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. import {Fragment, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import FieldGroup from 'sentry/components/forms/fieldGroup';
  4. import ExternalLink from 'sentry/components/links/externalLink';
  5. import Link from 'sentry/components/links/link';
  6. import TextCopyInput from 'sentry/components/textCopyInput';
  7. import {t, tct} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import type {ProjectKey} from 'sentry/types';
  10. import getDynamicText from 'sentry/utils/getDynamicText';
  11. type Props = {
  12. data: ProjectKey;
  13. projectId: string;
  14. showDsn?: boolean;
  15. showDsnPublic?: boolean;
  16. showMinidump?: boolean;
  17. showProjectId?: boolean;
  18. showPublicKey?: boolean;
  19. showSecretKey?: boolean;
  20. showSecurityEndpoint?: boolean;
  21. showUnreal?: boolean;
  22. };
  23. function ProjectKeyCredentials({
  24. data,
  25. projectId,
  26. showDsn = true,
  27. showDsnPublic = true,
  28. showMinidump = true,
  29. showProjectId = false,
  30. showPublicKey = false,
  31. showSecretKey = false,
  32. showSecurityEndpoint = true,
  33. showUnreal = true,
  34. }: Props) {
  35. const [showDeprecatedDsn, setShowDeprecatedDsn] = useState(false);
  36. return (
  37. <Fragment>
  38. {showDsnPublic && (
  39. <FieldGroup
  40. label={t('DSN')}
  41. inline={false}
  42. flexibleControlStateSize
  43. help={tct('The DSN tells the SDK where to send the events to. [link]', {
  44. link: showDsn ? (
  45. <Link to="" onClick={() => setShowDeprecatedDsn(curr => !curr)}>
  46. {showDeprecatedDsn ? t('Hide deprecated DSN') : t('Show deprecated DSN')}
  47. </Link>
  48. ) : null,
  49. })}
  50. >
  51. <TextCopyInput aria-label={t('DSN URL')}>
  52. {getDynamicText({
  53. value: data.dsn.public,
  54. fixed: '__DSN__',
  55. })}
  56. </TextCopyInput>
  57. {showDeprecatedDsn && (
  58. <StyledField
  59. label={null}
  60. help={t(
  61. 'Deprecated DSN includes a secret which is no longer required by newer SDK versions. If you are unsure which to use, follow installation instructions for your language.'
  62. )}
  63. inline={false}
  64. flexibleControlStateSize
  65. >
  66. <TextCopyInput>
  67. {getDynamicText({
  68. value: data.dsn.secret,
  69. fixed: '__DSN_DEPRECATED__',
  70. })}
  71. </TextCopyInput>
  72. </StyledField>
  73. )}
  74. </FieldGroup>
  75. )}
  76. {/* this edge case should imho not happen, but just to be sure */}
  77. {!showDsnPublic && showDsn && (
  78. <FieldGroup
  79. label={t('DSN (Deprecated)')}
  80. help={t(
  81. 'Deprecated DSN includes a secret which is no longer required by newer SDK versions. If you are unsure which to use, follow installation instructions for your language.'
  82. )}
  83. inline={false}
  84. flexibleControlStateSize
  85. >
  86. <TextCopyInput>
  87. {getDynamicText({
  88. value: data.dsn.secret,
  89. fixed: '__DSN_DEPRECATED__',
  90. })}
  91. </TextCopyInput>
  92. </FieldGroup>
  93. )}
  94. {showSecurityEndpoint && (
  95. <FieldGroup
  96. label={t('Security Header Endpoint')}
  97. help={tct('Use your security header endpoint for features like [link].', {
  98. link: (
  99. <ExternalLink href="https://docs.sentry.io/product/security-policy-reporting/">
  100. {t('CSP and Expect-CT reports')}
  101. </ExternalLink>
  102. ),
  103. })}
  104. inline={false}
  105. flexibleControlStateSize
  106. >
  107. <TextCopyInput aria-label={t('Security Header Endpoint URL')}>
  108. {getDynamicText({
  109. value: data.dsn.security,
  110. fixed: '__SECURITY_HEADER_ENDPOINT__',
  111. })}
  112. </TextCopyInput>
  113. </FieldGroup>
  114. )}
  115. {showMinidump && (
  116. <FieldGroup
  117. label={t('Minidump Endpoint')}
  118. help={tct(
  119. 'Use this endpoint to upload [link], for example with Electron, Crashpad or Breakpad.',
  120. {
  121. link: (
  122. <ExternalLink href="https://docs.sentry.io/platforms/native/guides/minidumps/">
  123. minidump crash reports
  124. </ExternalLink>
  125. ),
  126. }
  127. )}
  128. inline={false}
  129. flexibleControlStateSize
  130. >
  131. <TextCopyInput aria-label={t('Minidump Endpoint URL')}>
  132. {getDynamicText({
  133. value: data.dsn.minidump,
  134. fixed: '__MINIDUMP_ENDPOINT__',
  135. })}
  136. </TextCopyInput>
  137. </FieldGroup>
  138. )}
  139. {showUnreal && (
  140. <FieldGroup
  141. label={t('Unreal Engine Endpoint')}
  142. help={t('Use this endpoint to configure your UE Crash Reporter.')}
  143. inline={false}
  144. flexibleControlStateSize
  145. >
  146. <TextCopyInput aria-label={t('Unreal Engine Endpoint URL')}>
  147. {getDynamicText({
  148. value: data.dsn.unreal || '',
  149. fixed: '__UNREAL_ENDPOINT__',
  150. })}
  151. </TextCopyInput>
  152. </FieldGroup>
  153. )}
  154. {showPublicKey && (
  155. <FieldGroup label={t('Public Key')} inline flexibleControlStateSize>
  156. <TextCopyInput>
  157. {getDynamicText({
  158. value: data.public,
  159. fixed: '__PUBLICKEY__',
  160. })}
  161. </TextCopyInput>
  162. </FieldGroup>
  163. )}
  164. {showSecretKey && (
  165. <FieldGroup label={t('Secret Key')} inline flexibleControlStateSize>
  166. <TextCopyInput>
  167. {getDynamicText({
  168. value: data.secret,
  169. fixed: '__SECRETKEY__',
  170. })}
  171. </TextCopyInput>
  172. </FieldGroup>
  173. )}
  174. {showProjectId && (
  175. <FieldGroup label={t('Project ID')} inline flexibleControlStateSize>
  176. <TextCopyInput>
  177. {getDynamicText({
  178. value: projectId,
  179. fixed: '__PROJECTID__',
  180. })}
  181. </TextCopyInput>
  182. </FieldGroup>
  183. )}
  184. {data.useCase && (
  185. <FieldGroup
  186. label={t('Use Case')}
  187. help={t('Whether the DSN is for the user or for internal data submissions.')}
  188. inline
  189. flexibleControlStateSize
  190. >
  191. <StyledField label={null} inline={false} flexibleControlStateSize>
  192. {data.useCase}
  193. </StyledField>
  194. </FieldGroup>
  195. )}
  196. </Fragment>
  197. );
  198. }
  199. const StyledField = styled(FieldGroup)`
  200. padding: ${space(0.5)} 0 0 0;
  201. `;
  202. export default ProjectKeyCredentials;