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;
@@ -24,10 +24,10 @@ interface Props {
 }
 
 export default ({ databaseId, className, onDelete }: Props) => {
-    const [visible, setVisible] = useState(false);
+    const [ visible, setVisible ] = useState(false);
     const database = ServerContext.useStoreState(state => state.databases.items.find(item => item.id === databaseId));
     const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase);
-    const [connectionVisible, setConnectionVisible] = useState(false);
+    const [ connectionVisible, setConnectionVisible ] = useState(false);
     const { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const server = ServerContext.useStoreState(state => state.server.data!);
 
@@ -38,7 +38,7 @@ export default ({ databaseId, className, onDelete }: Props) => {
     const schema = object().shape({
         confirm: string()
             .required('The database name must be provided.')
-            .oneOf([database.name.split('_', 2)[1], database.name], 'The database name must be provided.'),
+            .oneOf([ database.name.split('_', 2)[1], database.name ], 'The database name must be provided.'),
     });
 
     const submit = (values: { confirm: string }, { setSubmitting }: FormikHelpers<{ confirm: string }>) => {
@@ -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>
-                <div>
-                    <label className={'input-dark-label'}>Password</label>
-                    <input type={'text'} className={'input-dark'} readOnly={true} value={database.password}/>
-                </div>
+                <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'}>
-                    <RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase}/>
+                    <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>
-                    <button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}>
-                        <FontAwesomeIcon icon={faTrashAlt} 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>
                         }
-                        {server.featureLimits.databases > 0 &&
-                        <div className={'mt-6 flex justify-end'}>
-                            <CreateDatabaseButton onCreated={appendDatabase}/>
-                        </div>
-                        }
-                    </React.Fragment>
+                        <Can action={'database.create'}>
+                            {server.featureLimits.databases > 0 &&
+                            <div className={'mt-6 flex justify-end'}>
+                                <CreateDatabaseButton onCreated={appendDatabase}/>
+                            </div>
+                            }
+                        </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'}>
-                                There are no schedules configured for this server. Click the button below to get
-                                started.
+                            <p className={'text-sm text-center text-neutral-400'}>
+                                There are no schedules configured for this server.
                             </p>
                             :
                             schedules.map(schedule => (
@@ -54,21 +54,23 @@ export default ({ match, history }: RouteComponentProps) => {
                                 </a>
                             ))
                     }
-                    <div className={'mt-8 flex justify-end'}>
-                        {visible && <EditScheduleModal
-                            appear={true}
-                            visible={true}
-                            onScheduleUpdated={schedule => setSchedules(s => [...(s || []), schedule])}
-                            onDismissed={() => setVisible(false)}
-                        />}
-                        <button
-                            type={'button'}
-                            className={'btn btn-lg btn-primary'}
-                            onClick={() => setVisible(true)}
-                        >
-                            Create schedule
-                        </button>
-                    </div>
+                    <Can action={'schedule.create'}>
+                        <div className={'mt-8 flex justify-end'}>
+                            {visible && <EditScheduleModal
+                                appear={true}
+                                visible={true}
+                                onScheduleUpdated={schedule => setSchedules(s => [ ...(s || []), schedule ])}
+                                onDismissed={() => setVisible(false)}
+                            />}
+                            <button
+                                type={'button'}
+                                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,24 +94,27 @@ 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
-                            button below.
+                            There are no tasks configured for this schedule.
                         </p>
                     }
                     <div className={'mt-8 flex justify-end'}>
-                        <DeleteScheduleButton
-                            scheduleId={schedule.id}
-                            onDeleted={() => history.push(`/server/${id}/schedules`)}
-                        />
-                        <button className={'btn btn-primary btn-sm mr-4'} onClick={() => setShowEditModal(true)}>
-                            Edit
-                        </button>
-                        <NewTaskButton
-                            scheduleId={schedule.id}
-                            onTaskAdded={task => setSchedule(s => ({
-                                ...s!, tasks: [ ...s!.tasks, task ],
-                            }))}
-                        />
+                        <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>
+                            <NewTaskButton
+                                scheduleId={schedule.id}
+                                onTaskAdded={task => setSchedule(s => ({
+                                    ...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,22 +76,26 @@ export default ({ schedule, task, onTaskUpdated, onTaskRemoved }: Props) => {
                 </p>
             </div>
             }
-            <button
-                type={'button'}
-                aria-label={'Edit scheduled task'}
-                className={'block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4'}
-                onClick={() => setIsEditing(true)}
-            >
-                <FontAwesomeIcon icon={faPencilAlt}/>
-            </button>
-            <button
-                type={'button'}
-                aria-label={'Delete scheduled task'}
-                className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
-                onClick={() => setVisible(true)}
-            >
-                <FontAwesomeIcon icon={faTrashAlt}/>
-            </button>
+            <Can action={'schedule.update'}>
+                <button
+                    type={'button'}
+                    aria-label={'Edit scheduled task'}
+                    className={'block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4'}
+                    onClick={() => setIsEditing(true)}
+                >
+                    <FontAwesomeIcon icon={faPencilAlt}/>
+                </button>
+            </Can>
+            <Can action={'schedule.update'}>
+                <button
+                    type={'button'}
+                    aria-label={'Delete scheduled task'}
+                    className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
+                    onClick={() => setVisible(true)}
+                >
+                    <FontAwesomeIcon icon={faTrashAlt}/>
+                </button>
+            </Can>
         </div>
     );
 };