signal-desktop/ts/components/CrashReportDialog.tsx

73 lines
1.7 KiB
TypeScript

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import type { LocalizerType } from '../types/Util';
import { Button, ButtonVariant } from './Button';
import { Modal } from './Modal';
import { Spinner } from './Spinner';
type PropsActionsType = {
uploadCrashReports: () => void;
eraseCrashReports: () => void;
};
type PropsType = {
i18n: LocalizerType;
isPending: boolean;
} & PropsActionsType;
export function CrashReportDialog(props: Readonly<PropsType>): JSX.Element {
const { i18n, isPending, uploadCrashReports, eraseCrashReports } = props;
const onEraseClick = (event: React.MouseEvent) => {
event.preventDefault();
eraseCrashReports();
};
const onSubmitClick = (event: React.MouseEvent) => {
event.preventDefault();
uploadCrashReports();
};
const footer = (
<>
<Button
disabled={isPending}
onClick={onEraseClick}
variant={ButtonVariant.Secondary}
>
{i18n('CrashReportDialog__erase')}
</Button>
<Button
disabled={isPending}
onClick={onSubmitClick}
ref={button => button?.focus()}
variant={ButtonVariant.Primary}
>
{isPending ? (
<Spinner size="22px" svgSize="small" />
) : (
i18n('CrashReportDialog__submit')
)}
</Button>
</>
);
return (
<Modal
modalName="CrashReportDialog"
moduleClassName="module-Modal--important"
i18n={i18n}
title={i18n('CrashReportDialog__title')}
hasXButton
onClose={eraseCrashReports}
modalFooter={footer}
>
<section>{i18n('CrashReportDialog__body')}</section>
</Modal>
);
}