import {Component, createRef, Fragment} from 'react'; import moment from 'moment'; import {sprintf} from 'sprintf-js'; import {ModalRenderProps} from 'sentry/actionCreators/modal'; import Alert from 'sentry/components/alert'; import Button from 'sentry/components/button'; import ButtonBar from 'sentry/components/buttonBar'; import {t} from 'sentry/locale'; import {ResolutionStatusDetails} from 'sentry/types'; const defaultProps = { label: t('Ignore this issue until \u2026'), }; type Props = ModalRenderProps & { onSelected: (details: ResolutionStatusDetails) => void; } & typeof defaultProps; type State = { dateWarning: boolean; }; export default class CustomIgnoreDurationModal extends Component { static defaultProps = defaultProps; state: State = { dateWarning: false, }; snoozeDateInputRef = createRef(); snoozeTimeInputRef = createRef(); selectedIgnoreMinutes = () => { const dateStr = this.snoozeDateInputRef.current?.value; // YYYY-MM-DD const timeStr = this.snoozeTimeInputRef.current?.value; // HH:MM if (dateStr && timeStr) { const selectedDate = moment.utc(dateStr + ' ' + timeStr); if (selectedDate.isValid()) { const now = moment.utc(); return selectedDate.diff(now, 'minutes'); } } return 0; }; snoozeClicked = () => { const minutes = this.selectedIgnoreMinutes(); this.setState({ dateWarning: minutes <= 0, }); if (minutes > 0) { this.props.onSelected({ignoreDuration: minutes}); } this.props.closeModal(); }; render() { // Give the user a sane starting point to select a date // (prettier than the empty date/time inputs): const defaultDate = new Date(); defaultDate.setDate(defaultDate.getDate() + 14); defaultDate.setSeconds(0); defaultDate.setMilliseconds(0); const defaultDateVal = sprintf( '%d-%02d-%02d', defaultDate.getUTCFullYear(), defaultDate.getUTCMonth() + 1, defaultDate.getUTCDate() ); const defaultTimeVal = sprintf('%02d:00', defaultDate.getUTCHours()); const {Header, Body, Footer, label} = this.props; return (
{label}
{t('Date')}
{t('Time (UTC)')}
{this.state.dateWarning && ( {t('Please enter a valid date in the future')} )}
); } }