Update use of server error blocks

resources/scripts/components/App.tsx

@@ -9,7 +9,7 @@ import ServerRouter from '@/routers/ServerRouter';
 import AuthenticationRouter from '@/routers/AuthenticationRouter';
 import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
-import NotFound from '@/components/screens/NotFound';
+import { NotFound } from '@/components/elements/ScreenBlock';
 import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
 import { history } from '@/components/history';

resources/scripts/components/elements/ScreenBlock.tsx

@@ -5,6 +5,8 @@ import { faArrowLeft, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import styled, { keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import NotFoundSvg from '@/assets/images/not_found.svg';
+import ServerErrorSvg from '@/assets/images/server_error.svg';
 
 interface BaseProps {
     title: string;
@@ -16,15 +18,15 @@ interface BaseProps {
 
 interface PropsWithRetry extends BaseProps {
     onRetry?: () => void;
-    onBack?: never | undefined;
+    onBack?: never;
 }
 
 interface PropsWithBack extends BaseProps {
     onBack?: () => void;
-    onRetry?: never | undefined;
+    onRetry?: never;
 }
 
-type Props = PropsWithBack | PropsWithRetry;
+export type ScreenBlockProps = PropsWithBack | PropsWithRetry;
 
 const spin = keyframes`
     to { transform: rotate(360deg) }
@@ -38,7 +40,7 @@ const ActionButton = styled(Button)`
     }
 `;
 
-export default ({ title, image, message, onBack, onRetry }: Props) => (
+const ScreenBlock = ({ title, image, message, onBack, onRetry }: ScreenBlockProps) => (
     <PageContentBlock>
         <div css={tw`flex justify-center`}>
             <div css={tw`w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center relative`}>
@@ -61,3 +63,23 @@ export default ({ title, image, message, onBack, onRetry }: Props) => (
         </div>
     </PageContentBlock>
 );
+
+type ServerErrorProps = (Omit<PropsWithBack, 'image' | 'title'> | Omit<PropsWithRetry, 'image' | 'title'>) & {
+    title?: string;
+}
+
+const ServerError = ({ title, ...props }: ServerErrorProps) => (
+    <ScreenBlock title={title || 'Something went wrong'} image={ServerErrorSvg} {...props}/>
+);
+
+const NotFound = ({ title, message, onBack }: Partial<Pick<ScreenBlockProps, 'title' | 'message' | 'onBack'>>) => (
+    <ScreenBlock
+        title={title || '404'}
+        image={NotFoundSvg}
+        message={message || 'The requested resource was not found.'}
+        onBack={onBack}
+    />
+);
+
+export { ServerError, NotFound };
+export default ScreenBlock;

resources/scripts/components/screens/NotFound.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import ScreenBlock from '@/components/screens/ScreenBlock';
-
-interface Props {
-    title?: string;
-    message?: string;
-    onBack?: () => void;
-}
-
-export default ({ title, message, onBack }: Props) => (
-    <ScreenBlock
-        title={title || '404'}
-        image={'/assets/svgs/not_found.svg'}
-        message={message || 'The requested resource was not found.'}
-        onBack={onBack}
-    />
-);

resources/scripts/components/screens/ServerError.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import ScreenBlock from '@/components/screens/ScreenBlock';
-
-interface Props {
-    title?: string;
-    message: string;
-    onRetry?: () => void;
-    onBack?: () => void;
-}
-
-export default ({ title, message, onBack, onRetry }: Props) => (
-    // @ts-ignore
-    <ScreenBlock
-        title={title || 'Something went wrong'}
-        image={'/assets/svgs/server_error.svg'}
-        message={message}
-        onBack={onBack}
-        onRetry={onRetry}
-    />
-);

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -14,6 +14,7 @@ import getServerBackups from '@/api/swr/getServerBackups';
 import { ServerBackup } from '@/api/server/types';
 import { ServerContext } from '@/state/server';
 import Input from '@/components/elements/Input';
+import { restoreServerBackup } from '@/api/server/backups';
 
 interface Props {
     backup: ServerBackup;
@@ -21,10 +22,9 @@ interface Props {
 
 export default ({ backup }: Props) => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
+    const [ modal, setModal ] = useState('');
     const [ loading, setLoading ] = useState(false);
-    const [ visible, setVisible ] = useState(false);
-    const [ deleteVisible, setDeleteVisible ] = useState(false);
-    const [ restoreVisible, setRestoreVisible ] = useState(false);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { mutate } = getServerBackups();
 
@@ -47,36 +47,47 @@ export default ({ backup }: Props) => {
         setLoading(true);
         clearFlashes('backups');
         deleteBackup(uuid, backup.uuid)
-            .then(() => {
-                mutate(data => ({
-                    ...data,
-                    items: data.items.filter(b => b.uuid !== backup.uuid),
-                }), false);
-            })
+            .then(() => mutate(data => ({
+                ...data,
+                items: data.items.filter(b => b.uuid !== backup.uuid),
+            }), false))
             .catch(error => {
                 console.error(error);
                 clearAndAddHttpError({ key: 'backups', error });
                 setLoading(false);
-                setDeleteVisible(false);
+                setModal('');
             });
     };
 
+    const doRestorationAction = () => {
+        setLoading(true);
+        clearFlashes('backups');
+        restoreServerBackup(uuid, backup.uuid)
+            .then(() => setServerFromState(s => ({
+                ...s,
+                status: 'restoring_backup',
+            })))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'backups', error });
+            })
+            .then(() => setLoading(false));
+    };
+
     return (
         <>
-            {visible &&
             <ChecksumModal
                 appear
-                visible={visible}
-                onDismissed={() => setVisible(false)}
+                visible={modal === 'checksum'}
+                onDismissed={() => setModal('')}
                 checksum={backup.checksum}
             />
-            }
             <ConfirmationModal
-                visible={restoreVisible}
+                visible={modal === 'restore'}
                 title={'Restore this backup?'}
                 buttonText={'Restore backup'}
-                onConfirmed={() => null}
-                onModalDismissed={() => setRestoreVisible(false)}
+                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
@@ -87,7 +98,10 @@ export default ({ backup }: Props) => {
                     Are you sure you want to continue?
                 </p>
                 <p css={tw`mt-4 -mb-2 bg-neutral-900 p-3 rounded`}>
-                    <label htmlFor={'restore_truncate'} css={tw`text-base text-neutral-200 flex items-center cursor-pointer`}>
+                    <label
+                        htmlFor={'restore_truncate'}
+                        css={tw`text-base text-neutral-200 flex items-center cursor-pointer`}
+                    >
                         <Input
                             type={'checkbox'}
                             css={tw`text-red-500! w-5! h-5! mr-2`}
@@ -99,11 +113,11 @@ export default ({ backup }: Props) => {
                 </p>
             </ConfirmationModal>
             <ConfirmationModal
-                visible={deleteVisible}
+                visible={modal === 'delete'}
                 title={'Delete this backup?'}
                 buttonText={'Yes, delete backup'}
                 onConfirmed={() => doDeletion()}
-                onModalDismissed={() => setDeleteVisible(false)}
+                onModalDismissed={() => setModal('')}
             >
                 Are you sure you wish to delete this backup? This is a permanent operation and the backup cannot
                 be recovered once deleted.
@@ -122,23 +136,23 @@ export default ({ backup }: Props) => {
                 >
                     <div css={tw`text-sm`}>
                         <Can action={'backup.download'}>
-                            <DropdownButtonRow onClick={() => doDownload()}>
+                            <DropdownButtonRow onClick={doDownload}>
                                 <FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`}/>
                                 <span css={tw`ml-2`}>Download</span>
                             </DropdownButtonRow>
                         </Can>
                         <Can action={'backup.restore'}>
-                            <DropdownButtonRow onClick={() => setRestoreVisible(true)}>
+                            <DropdownButtonRow onClick={() => setModal('restore')}>
                                 <FontAwesomeIcon fixedWidth icon={faBoxOpen} css={tw`text-xs`}/>
                                 <span css={tw`ml-2`}>Restore</span>
                             </DropdownButtonRow>
                         </Can>
-                        <DropdownButtonRow onClick={() => setVisible(true)}>
+                        <DropdownButtonRow onClick={() => setModal('checksum')}>
                             <FontAwesomeIcon fixedWidth icon={faLock} css={tw`text-xs`}/>
                             <span css={tw`ml-2`}>Checksum</span>
                         </DropdownButtonRow>
                         <Can action={'backup.delete'}>
-                            <DropdownButtonRow danger onClick={() => setDeleteVisible(true)}>
+                            <DropdownButtonRow danger onClick={() => setModal('delete')}>
                                 <FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`}/>
                                 <span css={tw`ml-2`}>Delete</span>
                             </DropdownButtonRow>
@@ -147,7 +161,7 @@ export default ({ backup }: Props) => {
                 </DropdownMenu>
                 :
                 <button
-                    onClick={() => setDeleteVisible(true)}
+                    onClick={() => setModal('delete')}
                     css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
                 >
                     <FontAwesomeIcon icon={faTrashAlt}/>

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -9,7 +9,7 @@ import FileNameModal from '@/components/server/files/FileNameModal';
 import Can from '@/components/elements/Can';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import PageContentBlock from '@/components/elements/PageContentBlock';
-import ServerError from '@/components/screens/ServerError';
+import { ServerError } from '@/components/elements/ScreenBlock';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import Select from '@/components/elements/Select';

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -8,7 +8,7 @@ import { FileObject } from '@/api/server/files/loadDirectory';
 import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
 import { NavLink, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
-import ServerError from '@/components/screens/ServerError';
+import { ServerError } from '@/components/elements/ScreenBlock';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import { ServerContext } from '@/state/server';

resources/scripts/components/server/startup/StartupContainer.tsx

@@ -5,7 +5,7 @@ import VariableBox from '@/components/server/startup/VariableBox';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import getServerStartup from '@/api/swr/getServerStartup';
 import Spinner from '@/components/elements/Spinner';
-import ServerError from '@/components/screens/ServerError';
+import { ServerError } from '@/components/elements/ScreenBlock';
 import { httpErrorToHuman } from '@/api/http';
 import { ServerContext } from '@/state/server';
 import { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect';