import {Fragment} from 'react'; import styled from '@emotion/styled'; import {ModalRenderProps} from 'sentry/actionCreators/modal'; import Button from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import {t, tct} from 'sentry/locale'; import {Organization, Project} from 'sentry/types'; import {defined} from 'sentry/utils'; import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent'; import {SamplingProjectIncompatibleAlert} from '../samplingProjectIncompatibleAlert'; import {isValidSampleRate, SERVER_SIDE_SAMPLING_DOC_LINK} from '../utils'; import {useRecommendedSdkUpgrades} from '../utils/useRecommendedSdkUpgrades'; import {FooterActions, Stepper, StyledNumberField} from './uniformRateModal'; type SpecifyClientRateModalProps = ModalRenderProps & { onChange: (value: number | undefined) => void; onGoNext: () => void; onReadDocs: () => void; organization: Organization; projectId: Project['id']; value: number | undefined; }; export function SpecifyClientRateModal({ Header, Body, Footer, closeModal, onReadDocs, onGoNext, organization, projectId, value, onChange, }: SpecifyClientRateModalProps) { const {isProjectIncompatible} = useRecommendedSdkUpgrades({ orgSlug: organization.slug, projectId, }); function handleReadDocs() { trackAdvancedAnalyticsEvent('sampling.settings.modal.specify.client.rate_read_docs', { organization, project_id: projectId, }); onReadDocs(); } function handleGoNext() { trackAdvancedAnalyticsEvent('sampling.settings.modal.specify.client.rate_next', { organization, project_id: projectId, }); if (!defined(value)) { return; } onGoNext(); } const isValid = isValidSampleRate(value); return (

{t('Specify current client(SDK) sample rate')}

, } )} type="number" name="current-client-sampling" placeholder="0.1" step="0.1" value={value ?? null} onChange={newValue => { onChange(newValue === '' ? undefined : newValue); }} stacked flexibleControlStateSize inline={false} /> ); } const TextHighlight = styled('span')` color: ${p => p.theme.gray300}; `;