Code cleanup and formatting

resources/scripts/components/App.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
-import { BrowserRouter, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
 import DashboardRouter from '@/routers/DashboardRouter';
@@ -57,9 +57,8 @@ const App = () => {
         <ThemeProvider theme={theme}>
             <StoreProvider store={store}>
                 <Provider store={store}>
-                    <Router basename={'/'}>
                     <div className={'mx-auto w-auto'}>
-                            <BrowserRouter basename={'/'}>
+                        <BrowserRouter basename={'/'} key={'root-router'}>
                             <Switch>
                                 <Route path="/server/:id" component={ServerRouter}/>
                                 <Route path="/auth" component={AuthenticationRouter}/>
@@ -67,7 +66,6 @@ const App = () => {
                             </Switch>
                         </BrowserRouter>
                     </div>
-                    </Router>
                 </Provider>
             </StoreProvider>
         </ThemeProvider>

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

@@ -15,6 +15,7 @@ import useServer from '@/plugins/useServer';
 import deleteBackup from '@/api/server/backups/deleteBackup';
 import { ServerContext } from '@/state/server';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import Can from '@/components/elements/Can';
 
 interface Props {
     backup: ServerBackup;
@@ -90,18 +91,22 @@ export default ({ backup }: Props) => {
                 )}
             >
                 <div className={'text-sm'}>
+                    <Can action={'backup.download'}>
                         <DropdownButtonRow onClick={() => doDownload()}>
                             <FontAwesomeIcon fixedWidth={true} icon={faCloudDownloadAlt} className={'text-xs'}/>
                             <span className={'ml-2'}>Download</span>
                         </DropdownButtonRow>
+                    </Can>
                     <DropdownButtonRow onClick={() => setVisible(true)}>
                         <FontAwesomeIcon fixedWidth={true} icon={faLock} className={'text-xs'}/>
                         <span className={'ml-2'}>Checksum</span>
                     </DropdownButtonRow>
+                    <Can action={'backup.delete'}>
                         <DropdownButtonRow danger={true} onClick={() => setDeleteVisible(true)}>
                             <FontAwesomeIcon fixedWidth={true} icon={faTrashAlt} className={'text-xs'}/>
                             <span className={'ml-2'}>Delete</span>
                         </DropdownButtonRow>
+                    </Can>
                 </div>
             </DropdownMenu>
         </>

resources/scripts/routers/ServerRouter.tsx

@@ -30,7 +30,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
     useEffect(() => () => clearServerState(), [ clearServerState ]);
 
     return (
-        <React.Fragment>
+        <React.Fragment key={'server-router'}>
             <NavigationBar/>
             <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
                 <div id={'sub-navigation'}>
@@ -51,7 +51,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <Can action={'backup.*'}>
                             <NavLink to={`${match.url}/backups`}>Backups</NavLink>
                         </Can>
-                        <Can action={['settings.*', 'file.sftp']} matchAny={true}>
+                        <Can action={[ 'settings.*', 'file.sftp' ]} matchAny={true}>
                             <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                         </Can>
                     </div>
@@ -64,8 +64,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <Spinner size={'large'}/>
                     </div>
                     :
-                    <React.Fragment>
-                        <Switch location={location}>
+                    <Switch location={location} key={'server-switch'}>
                         <Route path={`${match.path}`} component={ServerConsole} exact/>
                         <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
                         <Route
@@ -84,7 +83,6 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                         <Route path={`${match.path}/backups`} component={BackupContainer} exact/>
                         <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
                     </Switch>
-                    </React.Fragment>
                 }
             </TransitionRouter>
         </React.Fragment>