Update permissions handling for file manager; ensure errors are shown

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, useStoreState } from 'easy-peasy';
+import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@@ -10,6 +10,8 @@ import saveFileContents from '@/api/server/files/saveFileContents';
 import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
 import { useParams } from 'react-router';
 import FileNameModal from '@/components/server/files/FileNameModal';
+import Can from '@/components/elements/Can';
+import FlashMessageRender from '@/components/FlashMessageRender';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
@@ -21,15 +23,20 @@ export default () => {
     const [ modalVisible, setModalVisible ] = useState(false);
 
     const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
-    const addError = useStoreState((state: Actions<ApplicationStore>) => state.flashes.addError);
+    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     let fetchFileContent: null | (() => Promise<string>) = null;
 
     if (action !== 'new') {
         useEffect(() => {
+            setLoading(true);
+            clearFlashes('files:view');
             getFileContents(uuid, hash.replace(/^#/, ''))
                 .then(setContent)
-                .catch(error => console.error(error))
+                .catch(error => {
+                    console.error(error);
+                    addError({ key: 'files:view', message: httpErrorToHuman(error) });
+                })
                 .then(() => setLoading(false));
         }, [ uuid, hash ]);
     }
@@ -40,10 +47,10 @@ export default () => {
         }
 
         setLoading(true);
-        fetchFileContent()
-            .then(content => {
-                return saveFileContents(uuid, name || hash.replace(/^#/, ''), content);
-            })
+        clearFlashes('files:view');
+        fetchFileContent().then(content => {
+            return saveFileContents(uuid, name || hash.replace(/^#/, ''), content);
+        })
             .then(() => {
                 if (name) {
                     history.push(`/server/${id}/files/edit#/${name}`);
@@ -54,13 +61,14 @@ export default () => {
             })
             .catch(error => {
                 console.error(error);
-                addError({ message: httpErrorToHuman(error), key: 'files' });
+                addError({ message: httpErrorToHuman(error), key: 'files:view' });
             })
             .then(() => setLoading(false));
     };
 
     return (
         <div className={'mt-10 mb-4'}>
+            <FlashMessageRender byKey={'files:view'} className={'mb-4'}/>
             <FileManagerBreadcrumbs withinFileEditor={true} isNewFile={action !== 'edit'}/>
             <FileNameModal
                 visible={modalVisible}
@@ -83,13 +91,17 @@ export default () => {
             </div>
             <div className={'flex justify-end mt-4'}>
                 {action === 'edit' ?
-                    <button className={'btn btn-primary btn-sm'} onClick={() => save()}>
-                        Save Content
-                    </button>
+                    <Can action={'file.update'}>
+                        <button className={'btn btn-primary btn-sm'} onClick={() => save()}>
+                            Save Content
+                        </button>
+                    </Can>
                     :
-                    <button className={'btn btn-primary btn-sm'} onClick={() => setModalVisible(true)}>
-                        Create File
-                    </button>
+                    <Can action={'file.create'}>
+                        <button className={'btn btn-primary btn-sm'} onClick={() => setModalVisible(true)}>
+                            Create File
+                        </button>
+                    </Can>
                 }
             </div>
         </div>