Skip to content

Commit

Permalink
Feature/restore backup inform about missing sources (#523)
Browse files Browse the repository at this point in the history 
* Validate backup before starting restore process

In case sources were missing, the user was never informed and thus, did not know which sources were required for all manga to work

* Reset file input after restoring

Otherwise, the same backup file can't be restored until the page gets refreshed/re-opened
  • Loading branch information
@schroda
schroda authored Dec 28, 2023
1 parent a1dca02 commit 120e97e
Show file tree
Hide file tree
Showing 2 changed files with 157 additions and 30 deletions.
49 changes: 39 additions & 10 deletions src/i18n/locale/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,7 @@
"popular": "Popular",
"reset": "Reset",
"reset_to_default": "Reset to Default",
"restore": "Restore",
"resume": "Resume",
"select": "Select",
"select_all": "Select all",
Expand Down Expand Up @@ -617,6 +618,44 @@
}
},
"backup": {
"action": {
"create": {
"label": {
"description": "Back up library as a Tachiyomi backup",
"title": "Create backup"
}
},
"restore": {
"button": "Restore",
"error": {
"label": {
"failure": "Could not restore backup",
"legacy_backup_unsupported": "legacy backups are not supported!"
}
},
"label": {
"description": "You can also drag and drop the backup file here to restore it",
"in_progress": "Restoring backup…",
"success": "Backup restored.",
"title": "Restore Backup"
}
},
"validate": {
"dialog": {
"content": {
"label": {
"missing_sources": "The following sources are not installed:"
}
},
"title": "Backup validation"
},
"error": {
"label": {
"failure": "Could not validate backup"
}
}
}
},
"automated": {
"cleanup": {
"label": {
Expand All @@ -635,16 +674,6 @@
}
}
},
"label": {
"backup_restore_failed": "Could not restore backup",
"create_backup": "Create backup",
"create_backup_info": "Back up library as a Tachiyomi backup",
"legacy_backup_unsupported": "legacy backups are not supported!",
"restore_backup": "Restore Backup",
"restore_backup_info": "You can also drag and drop the backup file here to restore it",
"restored_backup": "Backup restored.",
"restoring_backup": "Restoring backup…"
},
"title": "Backup"
},
"clear_cache": {
Expand Down
138 changes: 118 additions & 20 deletions src/screens/settings/Backup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,18 @@ import { ListItemButton } from '@mui/material';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListSubheader from '@mui/material/ListSubheader';
import { t as translate } from 'i18next';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import ListItem from '@mui/material/ListItem';
import { Link } from 'react-router-dom';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { makeToast } from '@/components/util/Toast';
import { ListItemLink } from '@/components/util/ListItemLink';
import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
import { BackupRestoreState } from '@/lib/graphql/generated/graphql.ts';
import { BackupRestoreState, ValidateBackupQuery } from '@/lib/graphql/generated/graphql.ts';
import { Progress } from '@/components/util/Progress.tsx';
import { TextSetting } from '@/components/settings/TextSetting.tsx';
import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
Expand Down Expand Up @@ -69,6 +76,10 @@ export function Backup() {
pollInterval: 1000,
});

const [currentBackupFile, setCurrentBackupFile] = useState<File | null>(null);
const [isInvalidBackupDialogOpen, setIsInvalidBackupDialogOpen] = useState(false);
const [missingSources, setMissingSources] = useState<ValidateBackupQuery['validateBackup']['missingSources']>([]);

const [, setTriggerReRender] = useState(0);

const restoreProgress = (() => {
Expand Down Expand Up @@ -98,33 +109,78 @@ export function Backup() {
const isRestoreFinished = isSuccess || isFailure;
if (isRestoreFinished) {
if (isSuccess) {
makeToast(t('settings.backup.label.restored_backup'), 'success');
makeToast(t('settings.backup.action.restore.label.success'), 'success');
}

if (isFailure) {
makeToast(t('settings.backup.label.backup_restore_failed'), 'error');
makeToast(t('settings.backup.action.restore.error.label.failure'), 'error');
}

backupRestoreId = undefined;
setTriggerReRender(Date.now());
}
}, [data?.restoreStatus?.state]);

const submitBackup = async (file: File) => {
if (file.name.toLowerCase().match(/proto\.gz$|tachibk$/g)) {
makeToast(t('settings.backup.label.restoring_backup'), 'info');

try {
const response = await requestManager.restoreBackupFile(file).response;
backupRestoreId = response.data?.restoreBackup.id;
setTriggerReRender(Date.now());
} catch (e) {
makeToast(t('settings.backup.label.backup_restore_failed'), 'error');
const resetBackupState = () => {
setCurrentBackupFile(null);

const input = document.getElementById('backup-file') as HTMLInputElement;
if (input) {
input.value = '';
}
};

const validateBackup = async (file: File) => {
try {
const {
data: { validateBackup: validateBackupData },
} = await requestManager.validateBackupFile(file, { fetchPolicy: 'network-only' }).response;

if (validateBackupData.missingSources.length) {
setMissingSources([...validateBackupData.missingSources]);
setIsInvalidBackupDialogOpen(true);
return false;
}
} else if (file.name.toLowerCase().endsWith('json')) {
makeToast(t('settings.backup.label.legacy_backup_unsupported'), 'error');
} else {

return true;
} catch (e) {
makeToast(t('settings.backup.action.validate.error.label.failure'), 'error');
resetBackupState();
}

return false;
};

const restoreBackup = async (file: File) => {
try {
makeToast(t('settings.backup.action.restore.label.in_progress'), 'info');

const response = await requestManager.restoreBackupFile(file).response;
backupRestoreId = response.data?.restoreBackup.id;
setTriggerReRender(Date.now());
} catch (e) {
makeToast(t('settings.backup.action.restore.error.label.failure'), 'error');
} finally {
resetBackupState();
}
};

const submitBackup = async (file: File) => {
if (file.name.toLowerCase().endsWith('json')) {
makeToast(t('settings.backup.action.restore.error.label.legacy_backup_unsupported'), 'error');
return;
}

const isValidFilename = file.name.toLowerCase().match(/proto\.gz$|tachibk$/g);
if (!isValidFilename) {
makeToast(t('global.error.label.invalid_file_type'), 'error');
return;
}

setCurrentBackupFile(file);
const isBackupValid = await validateBackup(file);
if (isBackupValid) {
await restoreBackup(file);
}
};

Expand All @@ -139,6 +195,11 @@ export function Backup() {
e.preventDefault();
};

const closeInvalidBackupDialog = () => {
setIsInvalidBackupDialogOpen(false);
resetBackupState();
};

useEffect(() => {
document.addEventListener('drop', dropHandler);
document.addEventListener('dragover', dragOverHandler);
Expand All @@ -163,17 +224,17 @@ export function Backup() {
<List sx={{ padding: 0 }}>
<ListItemLink to={requestManager.getExportBackupUrl()}>
<ListItemText
primary={t('settings.backup.label.create_backup')}
secondary={t('settings.backup.label.create_backup_info')}
primary={t('settings.backup.action.create.label.title')}
secondary={t('settings.backup.action.create.label.description')}
/>
</ListItemLink>
<ListItemButton
onClick={() => document.getElementById('backup-file')?.click()}
disabled={!!backupRestoreId}
>
<ListItemText
primary={t('settings.backup.label.restore_backup')}
secondary={t('settings.backup.label.restore_backup_info')}
primary={t('settings.backup.action.restore.label.title')}
secondary={t('settings.backup.action.restore.label.description')}
/>
{backupRestoreId ? (
<ListItemIcon>
Expand Down Expand Up @@ -236,6 +297,43 @@ export function Backup() {
</List>
</List>
<input type="file" id="backup-file" style={{ display: 'none' }} />
<Dialog open={isInvalidBackupDialogOpen}>
<DialogTitle>{t('settings.backup.action.validate.dialog.title')}</DialogTitle>
<DialogContent dividers>
<List
sx={{ listStyleType: 'initial', listStylePosition: 'inside' }}
subheader={t('settings.backup.action.validate.dialog.content.label.missing_sources')}
>
{missingSources.map(({ id, name }) => (
<ListItem sx={{ display: 'list-item' }} key={id}>
{`${name} (${id})`}
</ListItem>
))}
</List>
</DialogContent>
<DialogActions>
<Button onClick={closeInvalidBackupDialog}>{t('global.button.cancel')}</Button>
<Button
onClick={closeInvalidBackupDialog}
component={Link}
to="/extensions"
autoFocus={!!missingSources.length}
variant={missingSources.length ? 'contained' : 'text'}
>
{t('extension.action.label.install')}
</Button>
<Button
onClick={() => {
closeInvalidBackupDialog();
restoreBackup(currentBackupFile!);
}}
autoFocus={!missingSources.length}
variant={!missingSources.length ? 'contained' : 'text'}
>
{t('global.button.restore')}
</Button>
</DialogActions>
</Dialog>
</>
);
}

0 comments on commit 120e97e

Please sign in to comment.