import {Fragment, useState} from 'react'; import styled from '@emotion/styled'; import FieldGroup from 'sentry/components/forms/fieldGroup'; import ExternalLink from 'sentry/components/links/externalLink'; import Link from 'sentry/components/links/link'; import TextCopyInput from 'sentry/components/textCopyInput'; import {t, tct} from 'sentry/locale'; import {space} from 'sentry/styles/space'; import type {ProjectKey} from 'sentry/types'; import getDynamicText from 'sentry/utils/getDynamicText'; type Props = { data: ProjectKey; projectId: string; showDsn?: boolean; showDsnPublic?: boolean; showMinidump?: boolean; showProjectId?: boolean; showPublicKey?: boolean; showSecretKey?: boolean; showSecurityEndpoint?: boolean; showUnreal?: boolean; }; function ProjectKeyCredentials({ data, projectId, showDsn = true, showDsnPublic = true, showMinidump = true, showProjectId = false, showPublicKey = false, showSecretKey = false, showSecurityEndpoint = true, showUnreal = true, }: Props) { const [showDeprecatedDsn, setShowDeprecatedDsn] = useState(false); return ( {showDsnPublic && ( setShowDeprecatedDsn(curr => !curr)}> {showDeprecatedDsn ? t('Hide deprecated DSN') : t('Show deprecated DSN')} ) : null, })} > {getDynamicText({ value: data.dsn.public, fixed: '__DSN__', })} {showDeprecatedDsn && ( {getDynamicText({ value: data.dsn.secret, fixed: '__DSN_DEPRECATED__', })} )} )} {/* this edge case should imho not happen, but just to be sure */} {!showDsnPublic && showDsn && ( {getDynamicText({ value: data.dsn.secret, fixed: '__DSN_DEPRECATED__', })} )} {showSecurityEndpoint && ( {t('CSP and Expect-CT reports')} ), })} inline={false} flexibleControlStateSize > {getDynamicText({ value: data.dsn.security, fixed: '__SECURITY_HEADER_ENDPOINT__', })} )} {showMinidump && ( minidump crash reports ), } )} inline={false} flexibleControlStateSize > {getDynamicText({ value: data.dsn.minidump, fixed: '__MINIDUMP_ENDPOINT__', })} )} {showUnreal && ( {getDynamicText({ value: data.dsn.unreal || '', fixed: '__UNREAL_ENDPOINT__', })} )} {showPublicKey && ( {getDynamicText({ value: data.public, fixed: '__PUBLICKEY__', })} )} {showSecretKey && ( {getDynamicText({ value: data.secret, fixed: '__SECRETKEY__', })} )} {showProjectId && ( {getDynamicText({ value: projectId, fixed: '__PROJECTID__', })} )} {data.useCase && ( {data.useCase} )} ); } const StyledField = styled(FieldGroup)` padding: ${space(0.5)} 0 0 0; `; export default ProjectKeyCredentials;