misc_pterodactyl-panel/resources/scripts/components/server/backups/BackupContextMenu.tsx

113 lines
4.5 KiB
TypeScript
Raw Normal View History

import React, { useState } from 'react';
import { ServerBackup } from '@/api/server/backups/getServerBackups';
2020-07-05 01:46:09 +00:00
import { faCloudDownloadAlt, faEllipsisH, faLock, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import DropdownMenu, { DropdownButtonRow } from '@/components/elements/DropdownMenu';
import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
import { httpErrorToHuman } from '@/api/http';
import useFlash from '@/plugins/useFlash';
import ChecksumModal from '@/components/server/backups/ChecksumModal';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import useServer from '@/plugins/useServer';
import deleteBackup from '@/api/server/backups/deleteBackup';
import { ServerContext } from '@/state/server';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
2020-04-10 17:11:15 +00:00
import Can from '@/components/elements/Can';
2020-07-04 23:26:07 +00:00
import tw from 'twin.macro';
interface Props {
backup: ServerBackup;
}
export default ({ backup }: Props) => {
const { uuid } = useServer();
const [ loading, setLoading ] = useState(false);
const [ visible, setVisible ] = useState(false);
const [ deleteVisible, setDeleteVisible ] = useState(false);
const { addError, clearFlashes } = useFlash();
const removeBackup = ServerContext.useStoreActions(actions => actions.backups.removeBackup);
const doDownload = () => {
setLoading(true);
clearFlashes('backups');
getBackupDownloadUrl(uuid, backup.uuid)
.then(url => {
// @ts-ignore
window.location = url;
})
.catch(error => {
console.error(error);
addError({ key: 'backups', message: httpErrorToHuman(error) });
})
.then(() => setLoading(false));
};
const doDeletion = () => {
setLoading(true);
clearFlashes('backups');
deleteBackup(uuid, backup.uuid)
.then(() => removeBackup(backup.uuid))
.catch(error => {
console.error(error);
addError({ key: 'backups', message: httpErrorToHuman(error) });
setLoading(false);
setDeleteVisible(false);
});
};
return (
<>
{visible &&
<ChecksumModal
2020-07-04 23:26:07 +00:00
appear
visible={visible}
onDismissed={() => setVisible(false)}
checksum={backup.sha256Hash}
/>
}
{deleteVisible &&
<ConfirmationModal
title={'Delete this backup?'}
buttonText={'Yes, delete backup'}
onConfirmed={() => doDeletion()}
visible={deleteVisible}
onDismissed={() => setDeleteVisible(false)}
>
Are you sure you wish to delete this backup? This is a permanent operation and the backup cannot
be recovered once deleted.
</ConfirmationModal>
}
2020-07-05 01:30:50 +00:00
<SpinnerOverlay visible={loading} fixed/>
<DropdownMenu
renderToggle={onClick => (
<button
onClick={onClick}
2020-07-04 23:26:07 +00:00
css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
>
<FontAwesomeIcon icon={faEllipsisH}/>
</button>
)}
>
2020-07-04 23:26:07 +00:00
<div css={tw`text-sm`}>
2020-04-10 17:11:15 +00:00
<Can action={'backup.download'}>
<DropdownButtonRow onClick={() => doDownload()}>
2020-07-04 23:26:07 +00:00
<FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`}/>
<span css={tw`ml-2`}>Download</span>
2020-04-10 17:11:15 +00:00
</DropdownButtonRow>
</Can>
<DropdownButtonRow onClick={() => setVisible(true)}>
2020-07-04 23:26:07 +00:00
<FontAwesomeIcon fixedWidth icon={faLock} css={tw`text-xs`}/>
<span css={tw`ml-2`}>Checksum</span>
</DropdownButtonRow>
2020-04-10 17:11:15 +00:00
<Can action={'backup.delete'}>
2020-07-04 23:26:07 +00:00
<DropdownButtonRow danger onClick={() => setDeleteVisible(true)}>
<FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`}/>
<span css={tw`ml-2`}>Delete</span>
2020-04-10 17:11:15 +00:00
</DropdownButtonRow>
</Can>
</div>
</DropdownMenu>
</>
);
};