UPdate remainder of screens with basic permissions checking

resources/scripts/components/server/databases/DatabaseRow.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { ServerDatabase } from '@/api/server/getServerDatabases';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
@@ -16,6 +15,7 @@ import { ServerContext } from '@/state/server';
 import deleteServerDatabase from '@/api/server/deleteServerDatabase';
 import { httpErrorToHuman } from '@/api/http';
 import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
+import Can from '@/components/elements/Can';
 
 interface Props {
     databaseId: string | number;
@@ -73,7 +73,10 @@ export default ({ databaseId, className, onDelete }: Props) => {
                             visible={visible}
                             dismissable={!isSubmitting}
                             showSpinnerOverlay={isSubmitting}
-                            onDismissed={() => { setVisible(false); resetForm(); }}
+                            onDismissed={() => {
+                                setVisible(false);
+                                resetForm();
+                            }}
                         >
                             <FlashMessageRender byKey={'delete-database-modal'} className={'mb-6'}/>
                             <h3 className={'mb-6'}>Confirm database deletion</h3>
@@ -113,10 +116,12 @@ export default ({ databaseId, className, onDelete }: Props) => {
             <Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
                 <FlashMessageRender byKey={'database-connection-modal'} className={'mb-6'}/>
                 <h3 className={'mb-6'}>Database connection details</h3>
+                <Can action={'database.view_password'}>
                     <div>
                         <label className={'input-dark-label'}>Password</label>
                         <input type={'text'} className={'input-dark'} readOnly={true} value={database.password}/>
                     </div>
+                </Can>
                 <div className={'mt-6'}>
                     <label className={'input-dark-label'}>JBDC Connection String</label>
                     <input
@@ -127,7 +132,9 @@ export default ({ databaseId, className, onDelete }: Props) => {
                     />
                 </div>
                 <div className={'mt-6 text-right'}>
+                    <Can action={'database.update'}>
                         <RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase}/>
+                    </Can>
                     <button className={'btn btn-sm btn-secondary'} onClick={() => setConnectionVisible(false)}>
                         Close
                     </button>
@@ -156,9 +163,11 @@ export default ({ databaseId, className, onDelete }: Props) => {
                     <button className={'btn btn-sm btn-secondary mr-2'} onClick={() => setConnectionVisible(true)}>
                         <FontAwesomeIcon icon={faEye} fixedWidth={true}/>
                     </button>
+                    <Can action={'database.delete'}>
                         <button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}>
                             <FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/>
                         </button>
+                    </Can>
                 </div>
             </div>
         </React.Fragment>

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import getServerDatabases, { ServerDatabase } from '@/api/server/getServerDatabases';
+import getServerDatabases from '@/api/server/getServerDatabases';
 import { ServerContext } from '@/state/server';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
@@ -9,6 +9,7 @@ import DatabaseRow from '@/components/server/databases/DatabaseRow';
 import Spinner from '@/components/elements/Spinner';
 import { CSSTransition } from 'react-transition-group';
 import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseButton';
+import Can from '@/components/elements/Can';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
@@ -41,7 +42,7 @@ export default () => {
                 <Spinner size={'large'} centered={true}/>
                 :
                 <CSSTransition classNames={'fade'} timeout={250}>
-                    <React.Fragment>
+                    <>
                         {databases.length > 0 ?
                             databases.map((database, index) => (
                                 <DatabaseRow
@@ -54,18 +55,20 @@ export default () => {
                             :
                             <p className={'text-center text-sm text-neutral-400'}>
                                 {server.featureLimits.databases > 0 ?
-                                    `It looks like you have no databases. Click the button below to create one now.`
+                                    `It looks like you have no databases.`
                                     :
                                     `Databases cannot be created for this server.`
                                 }
                             </p>
                         }
+                        <Can action={'database.create'}>
                             {server.featureLimits.databases > 0 &&
                             <div className={'mt-6 flex justify-end'}>
                                 <CreateDatabaseButton onCreated={appendDatabase}/>
                             </div>
                             }
-                    </React.Fragment>
+                        </Can>
+                    </>
                 </CSSTransition>
             }
         </div>

resources/scripts/components/server/schedules/ScheduleContainer.tsx

@@ -9,6 +9,7 @@ import { httpErrorToHuman } from '@/api/http';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
+import Can from '@/components/elements/Can';
 
 export default ({ match, history }: RouteComponentProps) => {
     const { uuid } = ServerContext.useStoreState(state => state.server.data!);
@@ -35,9 +36,8 @@ export default ({ match, history }: RouteComponentProps) => {
                 <>
                     {
                         schedules.length === 0 ?
-                            <p className={'text-sm text-neutral-400'}>
+                            <p className={'text-sm text-center text-neutral-400'}>
-                                There are no schedules configured for this server. Click the button below to get
+                                There are no schedules configured for this server.
-                                started.
                             </p>
                             :
                             schedules.map(schedule => (
@@ -54,6 +54,7 @@ export default ({ match, history }: RouteComponentProps) => {
                                 </a>
                             ))
                     }
+                    <Can action={'schedule.create'}>
                         <div className={'mt-8 flex justify-end'}>
                             {visible && <EditScheduleModal
                                 appear={true}
@@ -63,12 +64,13 @@ export default ({ match, history }: RouteComponentProps) => {
                             />}
                             <button
                                 type={'button'}
-                            className={'btn btn-lg btn-primary'}
+                                className={'btn btn-sm btn-primary'}
                                 onClick={() => setVisible(true)}
                             >
                                 Create schedule
                             </button>
                         </div>
+                    </Can>
                 </>
             }
         </div>

resources/scripts/components/server/schedules/ScheduleEditContainer.tsx

@@ -13,6 +13,7 @@ import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow';
 import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
 import NewTaskButton from '@/components/server/schedules/NewTaskButton';
 import DeleteScheduleButton from '@/components/server/schedules/DeleteScheduleButton';
+import Can from '@/components/elements/Can';
 
 interface Params {
     id: string;
@@ -93,15 +94,17 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
                         </>
                         :
                         <p className={'text-sm text-neutral-400'}>
-                            There are no tasks configured for this schedule. Consider adding a new one using the
+                            There are no tasks configured for this schedule.
-                            button below.
                         </p>
                     }
                     <div className={'mt-8 flex justify-end'}>
+                        <Can action={'schedule.delete'}>
                             <DeleteScheduleButton
                                 scheduleId={schedule.id}
                                 onDeleted={() => history.push(`/server/${id}/schedules`)}
                             />
+                        </Can>
+                        <Can action={'schedule.update'}>
                             <button className={'btn btn-primary btn-sm mr-4'} onClick={() => setShowEditModal(true)}>
                                 Edit
                             </button>
@@ -111,6 +114,7 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
                                     ...s!, tasks: [ ...s!.tasks, task ],
                                 }))}
                             />
+                        </Can>
                     </div>
                 </>
             }

resources/scripts/components/server/schedules/ScheduleTaskRow.tsx

@@ -13,6 +13,7 @@ import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
 import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
+import Can from '@/components/elements/Can';
 
 interface Props {
     schedule: number;
@@ -75,6 +76,7 @@ export default ({ schedule, task, onTaskUpdated, onTaskRemoved }: Props) => {
                 </p>
             </div>
             }
+            <Can action={'schedule.update'}>
                 <button
                     type={'button'}
                     aria-label={'Edit scheduled task'}
@@ -83,6 +85,8 @@ export default ({ schedule, task, onTaskUpdated, onTaskRemoved }: Props) => {
                 >
                     <FontAwesomeIcon icon={faPencilAlt}/>
                 </button>
+            </Can>
+            <Can action={'schedule.update'}>
                 <button
                     type={'button'}
                     aria-label={'Delete scheduled task'}
@@ -91,6 +95,7 @@ export default ({ schedule, task, onTaskUpdated, onTaskRemoved }: Props) => {
                 >
                     <FontAwesomeIcon icon={faTrashAlt}/>
                 </button>
+            </Can>
         </div>
     );
 };