Update link & sync UI

This commit is contained in:
trevor-signal 2024-12-19 15:46:50 -05:00 committed by GitHub
parent 1c933af6ce
commit 6f1d767c72
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 293 additions and 119 deletions

View file

@ -24,40 +24,50 @@ import { InstallScreenUpdateDialog } from './InstallScreenUpdateDialog';
// We can't always use destructuring assignment because of the complexity of this props
// type.
export type PropsType = Readonly<{
i18n: LocalizerType;
backupStep: InstallScreenBackupStep;
currentBytes?: number;
totalBytes?: number;
error?: InstallScreenBackupError;
onCancel: () => void;
onRetry: () => void;
onRestartLink: () => void;
export type PropsType = Readonly<
{
i18n: LocalizerType;
// Updater UI
updates: UpdatesStateType;
currentVersion: string;
OS: string;
startUpdate: () => void;
forceUpdate: () => void;
}>;
error?: InstallScreenBackupError;
onCancel: () => void;
onRetry: () => void;
onRestartLink: () => void;
export function InstallScreenBackupImportStep({
i18n,
backupStep,
currentBytes,
totalBytes,
error,
onCancel,
onRetry,
onRestartLink,
// Updater UI
updates: UpdatesStateType;
currentVersion: string;
OS: string;
startUpdate: () => void;
forceUpdate: () => void;
} & (
| {
backupStep: InstallScreenBackupStep.WaitForBackup;
}
| {
backupStep:
| InstallScreenBackupStep.Download
| InstallScreenBackupStep.Process;
currentBytes: number;
totalBytes: number;
}
)
>;
export function InstallScreenBackupImportStep(props: PropsType): JSX.Element {
const {
i18n,
backupStep,
error,
onCancel,
onRetry,
onRestartLink,
updates,
currentVersion,
OS,
startUpdate,
forceUpdate,
} = props;
updates,
currentVersion,
OS,
startUpdate,
forceUpdate,
}: PropsType): JSX.Element {
const [isConfirmingCancel, setIsConfirmingCancel] = useState(false);
const [isConfirmingSkip, setIsConfirmingSkip] = useState(false);
@ -92,52 +102,6 @@ export function InstallScreenBackupImportStep({
setIsConfirmingSkip(false);
}, [onRetry]);
let progress: JSX.Element;
if (currentBytes != null && totalBytes != null) {
const fractionComplete = roundFractionForProgressBar(
currentBytes / totalBytes
);
let hint: string;
if (backupStep === InstallScreenBackupStep.Download) {
hint = i18n('icu:BackupImportScreen__progressbar-hint', {
currentSize: formatFileSize(currentBytes),
totalSize: formatFileSize(totalBytes),
fractionComplete,
});
} else if (backupStep === InstallScreenBackupStep.Process) {
hint = i18n('icu:BackupImportScreen__progressbar-hint--processing');
} else {
throw missingCaseError(backupStep);
}
progress = (
<>
<ProgressBar
key={backupStep}
fractionComplete={fractionComplete}
isRTL={i18n.getLocaleDirection() === 'rtl'}
/>
<div className="InstallScreenBackupImportStep__progressbar-hint">
{hint}
</div>
</>
);
} else {
progress = (
<>
<ProgressBar
key={backupStep}
fractionComplete={0}
isRTL={i18n.getLocaleDirection() === 'rtl'}
/>
<div className="InstallScreenBackupImportStep__progressbar-hint">
{i18n('icu:BackupImportScreen__progressbar-hint--preparing')}
</div>
</>
);
}
const learnMoreLink = (parts: Array<string | JSX.Element>) => (
<a href={SYNCING_MESSAGES_SECURITY_URL} rel="noreferrer" target="_blank">
{parts}
@ -209,13 +173,12 @@ export function InstallScreenBackupImportStep({
return (
<div className="InstallScreenBackupImportStep">
<TitlebarDragArea />
<InstallScreenSignalLogo />
<div className="InstallScreenBackupImportStep__content">
<h3 className="InstallScreenBackupImportStep__title">
{i18n('icu:BackupImportScreen__title')}
</h3>
{progress}
<ProgressBarAndDescription {...props} />
<div className="InstallScreenBackupImportStep__description">
{i18n('icu:BackupImportScreen__description')}
</div>
@ -289,3 +252,76 @@ export function InstallScreenBackupImportStep({
</div>
);
}
type ProgressBarPropsType = Readonly<
{
i18n: LocalizerType;
} & (
| {
backupStep: InstallScreenBackupStep.WaitForBackup;
}
| {
backupStep:
| InstallScreenBackupStep.Download
| InstallScreenBackupStep.Process;
currentBytes: number;
totalBytes: number;
}
)
>;
function ProgressBarAndDescription(props: ProgressBarPropsType): JSX.Element {
const { backupStep, i18n } = props;
if (backupStep === InstallScreenBackupStep.WaitForBackup) {
return (
<>
<ProgressBar
fractionComplete={null}
isRTL={i18n.getLocaleDirection() === 'rtl'}
/>
<div className="InstallScreenBackupImportStep__progressbar-hint">
{i18n('icu:BackupImportScreen__progressbar-hint--preparing')}
</div>
</>
);
}
const { currentBytes, totalBytes } = props;
const fractionComplete = roundFractionForProgressBar(
currentBytes / totalBytes
);
if (backupStep === InstallScreenBackupStep.Download) {
return (
<>
<ProgressBar
fractionComplete={fractionComplete}
isRTL={i18n.getLocaleDirection() === 'rtl'}
/>
<div className="InstallScreenBackupImportStep__progressbar-hint">
{i18n('icu:BackupImportScreen__progressbar-hint', {
currentSize: formatFileSize(currentBytes),
totalSize: formatFileSize(totalBytes),
fractionComplete,
})}
</div>
</>
);
// eslint-disable-next-line no-else-return
} else if (backupStep === InstallScreenBackupStep.Process) {
return (
<>
<ProgressBar
fractionComplete={fractionComplete}
isRTL={i18n.getLocaleDirection() === 'rtl'}
/>
<div className="InstallScreenBackupImportStep__progressbar-hint">
{i18n('icu:BackupImportScreen__progressbar-hint--processing')}
</div>
</>
);
} else {
throw missingCaseError(backupStep);
}
}