Display a nicer error message when a file cannot be opened

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'}/>