Modal cleanup, begin transitioning towards the new dialog
This commit is contained in:
DaneEveritt
parent
3834aca3fe
commit
7dd74ecc9d
10 changed files with 121 additions and 96 deletions
|
|
@ -13,7 +13,6 @@ import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
|
|||
import useFlash from '@/plugins/useFlash';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import deleteBackup from '@/api/server/backups/deleteBackup';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import Can from '@/components/elements/Can';
|
||||
import tw from 'twin.macro';
|
||||
import getServerBackups from '@/api/swr/getServerBackups';
|
||||
|
|
@ -22,6 +21,7 @@ import { ServerContext } from '@/state/server';
|
|||
import Input from '@/components/elements/Input';
|
||||
import { restoreServerBackup } from '@/api/server/backups';
|
||||
import http, { httpErrorToHuman } from '@/api/http';
|
||||
import { Dialog } from '@/components/elements/dialog';
|
||||
|
||||
interface Props {
|
||||
backup: ServerBackup;
|
||||
|
|
@ -103,35 +103,29 @@ export default ({ backup }: Props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<ConfirmationModal
|
||||
visible={modal === 'unlock'}
|
||||
title={'Unlock this backup?'}
|
||||
<Dialog.Confirm
|
||||
open={modal === 'unlock'}
|
||||
onClose={() => setModal('')}
|
||||
title={`Unlock "${backup.name}"`}
|
||||
onConfirmed={onLockToggle}
|
||||
onModalDismissed={() => setModal('')}
|
||||
buttonText={'Yes, unlock'}
|
||||
>
|
||||
Are you sure you want to unlock this backup? It will no longer be protected from automated or
|
||||
accidental deletions.
|
||||
</ConfirmationModal>
|
||||
<ConfirmationModal
|
||||
visible={modal === 'restore'}
|
||||
title={'Restore this backup?'}
|
||||
buttonText={'Restore backup'}
|
||||
This backup will no longer be protected from automated or accidental deletions.
|
||||
</Dialog.Confirm>
|
||||
<Dialog.Confirm
|
||||
open={modal === 'restore'}
|
||||
onClose={() => setModal('')}
|
||||
confirm={'Restore'}
|
||||
title={`Restore "${backup.name}"`}
|
||||
onConfirmed={() => doRestorationAction()}
|
||||
onModalDismissed={() => setModal('')}
|
||||
>
|
||||
<p css={tw`text-neutral-300`}>
|
||||
This server will be stopped in order to restore the backup. Once the backup has started you will
|
||||
not be able to control the server power state, access the file manager, or create additional backups
|
||||
until it has completed.
|
||||
<p>
|
||||
Your server will be stopped. You will not be able to control the power state, access the file
|
||||
manager, or create additional backups until completed.
|
||||
</p>
|
||||
<p css={tw`text-neutral-300 mt-4`}>
|
||||
Are you sure you want to continue?
|
||||
</p>
|
||||
<p css={tw`mt-4 -mb-2 bg-neutral-900 p-3 rounded`}>
|
||||
<p css={tw`mt-4 -mb-2 bg-gray-700 p-3 rounded`}>
|
||||
<label
|
||||
htmlFor={'restore_truncate'}
|
||||
css={tw`text-base text-neutral-200 flex items-center cursor-pointer`}
|
||||
css={tw`text-base flex items-center cursor-pointer`}
|
||||
>
|
||||
<Input
|
||||
type={'checkbox'}
|
||||
|
|
@ -141,27 +135,26 @@ export default ({ backup }: Props) => {
|
|||
checked={truncate}
|
||||
onChange={() => setTruncate(s => !s)}
|
||||
/>
|
||||
Remove all files and folders before restoring this backup.
|
||||
Delete all files before restoring backup.
|
||||
</label>
|
||||
</p>
|
||||
</ConfirmationModal>
|
||||
<ConfirmationModal
|
||||
visible={modal === 'delete'}
|
||||
title={'Delete this backup?'}
|
||||
buttonText={'Yes, delete backup'}
|
||||
onConfirmed={() => doDeletion()}
|
||||
onModalDismissed={() => setModal('')}
|
||||
</Dialog.Confirm>
|
||||
<Dialog.Confirm
|
||||
title={`Delete "${backup.name}"`}
|
||||
confirm={'Continue'}
|
||||
open={modal === 'delete'}
|
||||
onClose={() => setModal('')}
|
||||
onConfirmed={doDeletion}
|
||||
>
|
||||
Are you sure you wish to delete this backup? This is a permanent operation and the backup cannot
|
||||
be recovered once deleted.
|
||||
</ConfirmationModal>
|
||||
This is a permanent operation. The backup cannot be recovered once deleted.
|
||||
</Dialog.Confirm>
|
||||
<SpinnerOverlay visible={loading} fixed/>
|
||||
{backup.isSuccessful ?
|
||||
<DropdownMenu
|
||||
renderToggle={onClick => (
|
||||
<button
|
||||
onClick={onClick}
|
||||
css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
|
||||
css={tw`text-gray-200 transition-colors duration-150 hover:text-gray-100 p-2`}
|
||||
>
|
||||
<FontAwesomeIcon icon={faEllipsisH}/>
|
||||
</button>
|
||||
|
|
@ -203,7 +196,7 @@ export default ({ backup }: Props) => {
|
|||
:
|
||||
<button
|
||||
onClick={() => setModal('delete')}
|
||||
css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
|
||||
css={tw`text-gray-200 transition-colors duration-150 hover:text-gray-100 p-2`}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrashAlt}/>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import TitledGreyBox from '@/components/elements/TitledGreyBox';
|
||||
import ConfirmationModal from '@/components/elements/ConfirmationModal';
|
||||
import reinstallServer from '@/api/server/reinstallServer';
|
||||
import { Actions, useStoreActions } from 'easy-peasy';
|
||||
import { ApplicationStore } from '@/state';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import tw from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
import { Dialog } from '@/components/elements/dialog';
|
||||
|
||||
export default () => {
|
||||
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
||||
const [ isSubmitting, setIsSubmitting ] = useState(false);
|
||||
const [ modalVisible, setModalVisible ] = useState(false);
|
||||
const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
|
||||
|
||||
const reinstall = () => {
|
||||
clearFlashes('settings');
|
||||
setIsSubmitting(true);
|
||||
reinstallServer(uuid)
|
||||
.then(() => {
|
||||
addFlash({
|
||||
|
|
@ -31,10 +29,7 @@ export default () => {
|
|||
|
||||
addFlash({ key: 'settings', type: 'error', message: httpErrorToHuman(error) });
|
||||
})
|
||||
.then(() => {
|
||||
setIsSubmitting(false);
|
||||
setModalVisible(false);
|
||||
});
|
||||
.then(() => setModalVisible(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -43,17 +38,16 @@ export default () => {
|
|||
|
||||
return (
|
||||
<TitledGreyBox title={'Reinstall Server'} css={tw`relative`}>
|
||||
<ConfirmationModal
|
||||
<Dialog.Confirm
|
||||
open={modalVisible}
|
||||
title={'Confirm server reinstallation'}
|
||||
buttonText={'Yes, reinstall server'}
|
||||
confirm={'Yes, reinstall server'}
|
||||
onClose={() => setModalVisible(false)}
|
||||
onConfirmed={reinstall}
|
||||
showSpinnerOverlay={isSubmitting}
|
||||
visible={modalVisible}
|
||||
onModalDismissed={() => setModalVisible(false)}
|
||||
>
|
||||
Your server will be stopped and some files may be deleted or modified during this process, are you sure
|
||||
you wish to continue?
|
||||
</ConfirmationModal>
|
||||
</Dialog.Confirm>
|
||||
<p css={tw`text-sm`}>
|
||||
Reinstalling your server will stop it, and then re-run the installation script that initially
|
||||
set it up.
|
||||
|
|
|
|||
Reference in a new issue