Display a nicer error message when a file cannot be opened

Author: DaneEveritt

resources/scripts/components/screens/ServerError.tsx

@@ -1,17 +1,30 @@
 import React from 'react';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
 
 interface Props {
     title?: string;
     message: string;
+    onBack?: () => void;
 }
 
-export default ({ title, message }: Props) => (
+export default ({ title, message, onBack }: Props) => (
     <PageContentBlock>
         <div className={'flex justify-center'}>
-            <div className={'w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center'}>
+            <div className={'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'}>
+                {typeof onBack === 'function' &&
+                <div className={'absolute pin-l pin-t ml-4 mt-4'}>
+                    <button
+                        onClick={() => onBack()}
+                        className={'rounded-full btn btn-primary w-8 h-8 flex items-center justify-center'}
+                    >
+                        <FontAwesomeIcon icon={faArrowLeft}/>
+                    </button>
+                </div>
+                }
                 <img src={'/assets/svgs/server_error.svg'} className={'w-2/3 h-auto select-none'}/>
-                <h2 className={'mt-6 text-neutral-900 font-bold'}>{ title || 'Something went wrong!' }</h2>
+                <h2 className={'mt-6 text-neutral-900 font-bold'}>{title || 'Something went wrong!'}</h2>
                 <p className={'text-sm text-neutral-700 mt-2'}>
                     {message}
                 </p>

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

@@ -2,7 +2,7 @@ import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import getFileContents from '@/api/server/files/getFileContents';
 import useRouter from 'use-react-router';
-import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
+import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@@ -13,10 +13,12 @@ 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';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
 export default () => {
+    const [ error, setError ] = useState('');
     const { action } = useParams();
     const { history, location: { hash } } = useRouter();
     const [ loading, setLoading ] = useState(action === 'edit');
@@ -31,12 +33,12 @@ export default () => {
     if (action !== 'new') {
         useEffect(() => {
             setLoading(true);
-            clearFlashes('files:view');
+            setError('');
             getFileContents(uuid, hash.replace(/^#/, ''))
                 .then(setContent)
                 .catch(error => {
                     console.error(error);
-                    addError({ key: 'files:view', message: httpErrorToHuman(error) });
+                    setError(httpErrorToHuman(error));
                 })
                 .then(() => setLoading(false));
         }, [ uuid, hash ]);
@@ -49,9 +51,10 @@ export default () => {
 
         setLoading(true);
         clearFlashes('files:view');
-        fetchFileContent().then(content => {
-            return saveFileContents(uuid, name || hash.replace(/^#/, ''), content);
-        })
+        fetchFileContent()
+            .then(content => {
+                return saveFileContents(uuid, name || hash.replace(/^#/, ''), content);
+            })
             .then(() => {
                 if (name) {
                     history.push(`/server/${id}/files/edit#/${name}`);
@@ -67,6 +70,15 @@ export default () => {
             .then(() => setLoading(false));
     };
 
+    if (error) {
+        return (
+            <ServerError
+                message={error}
+                onBack={() => history.goBack()}
+            />
+        );
+    }
+
     return (
         <PageContentBlock>
             <FlashMessageRender byKey={'files:view'} className={'mb-4'}/>