Add backup flag selection on backup creation

src/features/backup/Backup.constants.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { BackupFlag, BackupFlagGroup } from '@/features/backup/Backup.types.ts';
+import { TranslationKey } from '@/base/Base.types.ts';
+
+export const BACKUP_FLAGS_TO_TRANSLATION: Record<BackupFlag, TranslationKey> = {
+    includeCategories: 'settings.backup.flag.categories',
+    includeChapters: 'settings.backup.flag.chapters',
+    includeClientData: 'settings.backup.flag.client_data',
+    includeHistory: 'settings.backup.flag.history',
+    includeServerSettings: 'settings.backup.flag.server_settings',
+    includeTracking: 'settings.backup.flag.tracking',
+};
+
+export const BACKUP_FLAG_GROUP_TO_TRANSLATION: Record<BackupFlagGroup, TranslationKey> = {
+    [BackupFlagGroup.LIBRARY]: 'settings.backup.flag.group.library',
+    [BackupFlagGroup.SETTINGS]: 'settings.backup.flag.group.settings',
+};
+
+export const BACKUP_FLAGS = Object.keys(BACKUP_FLAGS_TO_TRANSLATION) as readonly BackupFlag[];
+
+export const BACKUP_FLAGS_BY_GROUP: Record<BackupFlagGroup, BackupFlag[]> = {
+    [BackupFlagGroup.LIBRARY]: ['includeChapters', 'includeTracking', 'includeHistory', 'includeCategories'],
+    [BackupFlagGroup.SETTINGS]: ['includeClientData', 'includeServerSettings'],
+};

src/features/backup/Backup.types.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { CreateBackupInput } from '@/lib/graphql/generated/graphql.ts';
+
+export enum BackupFlagGroup {
+    LIBRARY = 'library',
+    SETTINGS = 'settings',
+}
+
+export type BackupFlag = keyof Omit<CreateBackupInput, 'clientMutationId'>;
+
+export type BackupFlagInclusionState = Record<BackupFlag, boolean>;

src/features/backup/component/BackupFlagInclusionDialog.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormGroup from '@mui/material/FormGroup';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
+import { DialogProps } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import {
+    BACKUP_FLAG_GROUP_TO_TRANSLATION,
+    BACKUP_FLAGS,
+    BACKUP_FLAGS_BY_GROUP,
+    BACKUP_FLAGS_TO_TRANSLATION,
+} from '@/features/backup/Backup.constants.ts';
+import { BackupFlagGroup, BackupFlagInclusionState } from '@/features/backup/Backup.types.ts';
+
+export const BackupFlagInclusionDialog = ({ onCancel, onConfirm }: DialogProps<BackupFlagInclusionState>) => {
+    const { t } = useTranslation();
+
+    const [includeStateByFlag, setIncludeStateByFlag] = useState(
+        Object.fromEntries(BACKUP_FLAGS.map((flag) => [flag, true])) as BackupFlagInclusionState,
+    );
+
+    return (
+        <Dialog open onAbort={onCancel} maxWidth="xs" fullWidth>
+            <DialogTitle>{t('settings.backup.action.create.label.title')}</DialogTitle>
+            <DialogContent>
+                <FormGroup sx={{ gap: 2 }}>
+                    {Object.entries(BACKUP_FLAGS_BY_GROUP).map(([group, flags]) => (
+                        <Stack>
+                            <Typography>{t(BACKUP_FLAG_GROUP_TO_TRANSLATION[group as BackupFlagGroup])}</Typography>
+                            {flags.map((flag) => (
+                                <CheckboxInput
+                                    key={flag}
+                                    label={t(BACKUP_FLAGS_TO_TRANSLATION[flag])}
+                                    checked={includeStateByFlag[flag]}
+                                    onChange={(_, checked) => {
+                                        setIncludeStateByFlag({
+                                            ...includeStateByFlag,
+                                            [flag]: checked,
+                                        });
+                                    }}
+                                />
+                            ))}
+                        </Stack>
+                    ))}
+                </FormGroup>
+            </DialogContent>
+            <DialogActions>
+                <Button autoFocus onClick={onCancel} color="primary">
+                    {t('global.button.cancel')}
+                </Button>
+                <Button onClick={() => onConfirm(includeStateByFlag)} color="primary">
+                    {t('global.button.ok')}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

src/features/backup/screens/Backup.tsx

@@ -39,6 +39,8 @@ import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 import { BrowseTab } from '@/features/browse/Browse.types.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { BackupFlagInclusionDialog } from '@/features/backup/component/BackupFlagInclusionDialog.tsx';
 
 type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;
 
@@ -130,33 +132,32 @@ export function Backup() {
     };
 
     const createBackup = async () => {
+        const backupFlagInclusionState = await GlobalDialogManager.show(BackupFlagInclusionDialog);
+
         makeToast(t('settings.backup.action.create.label.in_progress'), 'info');
 
-        const backupFileResponse = await requestManager.createBackupFile({
-            includeCategories: true,
-            includeChapters: true,
-            includeHistory: true,
-            includeClientData: true,
-            includeTracking: true,
-            includeServerSettings: true,
-        }).response;
+        try {
+            const backupFileResponse = await requestManager.createBackupFile(backupFlagInclusionState).response;
 
-        const backupFileUrl = backupFileResponse.data?.createBackup.url;
-        if (!backupFileUrl) {
-            makeToast(
-                t('settings.backup.action.create.error.failure'),
-                'error',
-                getErrorMessage(backupFileResponse.errors),
-            );
-            return;
+            const backupFileUrl = backupFileResponse.data?.createBackup.url;
+            if (!backupFileUrl) {
+                makeToast(
+                    t('settings.backup.action.create.error.failure'),
+                    'error',
+                    getErrorMessage(backupFileResponse.errors),
+                );
+                return;
+            }
+
+            const link = document.createElement('a');
+            link.href = backupFileUrl;
+            link.download = '';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        } catch (e) {
+            makeToast(t('settings.backup.action.create.error.failure'), 'error', getErrorMessage(e));
         }
-
-        const link = document.createElement('a');
-        link.href = backupFileUrl;
-        link.download = '';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
     };
 
     const validateBackup = async (file: File) => {