sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UPdate remainder of screens with basic permissions checking

This commit is contained in:
Dane Everitt 2020-03-29 22:20:27 -07:00
parent 171b21e7ee
commit 7f0a05c192
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
5 changed files with 94 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/scripts/components/server/databases/DatabaseRow.tsx
View File

@ -1,5 +1,4 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ServerDatabase } from '@/api/server/getServerDatabases';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase'; import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt'; 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 deleteServerDatabase from '@/api/server/deleteServerDatabase';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton'; import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
import Can from '@/components/elements/Can';
interface Props { interface Props {
databaseId: string | number; databaseId: string | number;
@ -24,10 +24,10 @@ interface Props {
} }
export default ({ databaseId, className, onDelete }: 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 database = ServerContext.useStoreState(state => state.databases.items.find(item => item.id === databaseId));
const appendDatabase = ServerContext.useStoreActions(actions => actions.databases.appendDatabase); 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 { addFlash, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const server = ServerContext.useStoreState(state => state.server.data!); const server = ServerContext.useStoreState(state => state.server.data!);
@ -38,7 +38,7 @@ export default ({ databaseId, className, onDelete }: Props) => {
const schema = object().shape({ const schema = object().shape({
confirm: string() confirm: string()
.required('The database name must be provided.') .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 }>) => { const submit = (values: { confirm: string }, { setSubmitting }: FormikHelpers<{ confirm: string }>) => {
@ -73,7 +73,10 @@ export default ({ databaseId, className, onDelete }: Props) => {
visible={visible} visible={visible}
dismissable={!isSubmitting} dismissable={!isSubmitting}
showSpinnerOverlay={isSubmitting} showSpinnerOverlay={isSubmitting}
onDismissed={() => { setVisible(false); resetForm(); }} onDismissed={() => {
setVisible(false);
resetForm();
}}
> >
<FlashMessageRender byKey={'delete-database-modal'} className={'mb-6'}/> <FlashMessageRender byKey={'delete-database-modal'} className={'mb-6'}/>
<h3 className={'mb-6'}>Confirm database deletion</h3> <h3 className={'mb-6'}>Confirm database deletion</h3>
@ -113,10 +116,12 @@ export default ({ databaseId, className, onDelete }: Props) => {
<Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}> <Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
<FlashMessageRender byKey={'database-connection-modal'} className={'mb-6'}/> <FlashMessageRender byKey={'database-connection-modal'} className={'mb-6'}/>
<h3 className={'mb-6'}>Database connection details</h3> <h3 className={'mb-6'}>Database connection details</h3>
<div> <Can action={'database.view_password'}>
<label className={'input-dark-label'}>Password</label> <div>
<input type={'text'} className={'input-dark'} readOnly={true} value={database.password}/> <label className={'input-dark-label'}>Password</label>
</div> <input type={'text'} className={'input-dark'} readOnly={true} value={database.password}/>
</div>
</Can>
<div className={'mt-6'}> <div className={'mt-6'}>
<label className={'input-dark-label'}>JBDC Connection String</label> <label className={'input-dark-label'}>JBDC Connection String</label>
<input <input
@ -127,7 +132,9 @@ export default ({ databaseId, className, onDelete }: Props) => {
/> />
</div> </div>
<div className={'mt-6 text-right'}> <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)}> <button className={'btn btn-sm btn-secondary'} onClick={() => setConnectionVisible(false)}>
Close Close
</button> </button>
@ -156,9 +163,11 @@ export default ({ databaseId, className, onDelete }: Props) => {
<button className={'btn btn-sm btn-secondary mr-2'} onClick={() => setConnectionVisible(true)}> <button className={'btn btn-sm btn-secondary mr-2'} onClick={() => setConnectionVisible(true)}>
<FontAwesomeIcon icon={faEye} fixedWidth={true}/> <FontAwesomeIcon icon={faEye} fixedWidth={true}/>
</button> </button>
<button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}> <Can action={'database.delete'}>
<FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/> <button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}>
</button> <FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/>
</button>
</Can>
</div> </div>
</div> </div>
</React.Fragment> </React.Fragment>

21
resources/scripts/components/server/databases/DatabasesContainer.tsx
View File

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

38
resources/scripts/components/server/schedules/ScheduleContainer.tsx
View File

@ -9,6 +9,7 @@ import { httpErrorToHuman } from '@/api/http';
import { Actions, useStoreActions } from 'easy-peasy'; import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state'; import { ApplicationStore } from '@/state';
import EditScheduleModal from '@/components/server/schedules/EditScheduleModal'; import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
import Can from '@/components/elements/Can';
export default ({ match, history }: RouteComponentProps) => { export default ({ match, history }: RouteComponentProps) => {
const { uuid } = ServerContext.useStoreState(state => state.server.data!); const { uuid } = ServerContext.useStoreState(state => state.server.data!);
@ -35,9 +36,8 @@ export default ({ match, history }: RouteComponentProps) => {
<> <>
{ {
schedules.length === 0 ? 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> </p>
: :
schedules.map(schedule => ( schedules.map(schedule => (
@ -54,21 +54,23 @@ export default ({ match, history }: RouteComponentProps) => {
</a> </a>
)) ))
} }
<div className={'mt-8 flex justify-end'}> <Can action={'schedule.create'}>
{visible && <EditScheduleModal <div className={'mt-8 flex justify-end'}>
appear={true} {visible && <EditScheduleModal
visible={true} appear={true}
onScheduleUpdated={schedule => setSchedules(s => [...(s || []), schedule])} visible={true}
onDismissed={() => setVisible(false)} onScheduleUpdated={schedule => setSchedules(s => [ ...(s || []), schedule ])}
/>} onDismissed={() => setVisible(false)}
<button />}
type={'button'} <button
className={'btn btn-lg btn-primary'} type={'button'}
onClick={() => setVisible(true)} className={'btn btn-sm btn-primary'}
> onClick={() => setVisible(true)}
Create schedule >
</button> Create schedule
</div> </button>
</div>
</Can>
</> </>
} }
</div> </div>

34
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View File

@ -13,6 +13,7 @@ import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow';
import EditScheduleModal from '@/components/server/schedules/EditScheduleModal'; import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
import NewTaskButton from '@/components/server/schedules/NewTaskButton'; import NewTaskButton from '@/components/server/schedules/NewTaskButton';
import DeleteScheduleButton from '@/components/server/schedules/DeleteScheduleButton'; import DeleteScheduleButton from '@/components/server/schedules/DeleteScheduleButton';
import Can from '@/components/elements/Can';
interface Params { interface Params {
id: string; id: string;
@ -93,24 +94,27 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
</> </>
: :
<p className={'text-sm text-neutral-400'}> <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> </p>
} }
<div className={'mt-8 flex justify-end'}> <div className={'mt-8 flex justify-end'}>
<DeleteScheduleButton <Can action={'schedule.delete'}>
scheduleId={schedule.id} <DeleteScheduleButton
onDeleted={() => history.push(`/server/${id}/schedules`)} scheduleId={schedule.id}
/> onDeleted={() => history.push(`/server/${id}/schedules`)}
<button className={'btn btn-primary btn-sm mr-4'} onClick={() => setShowEditModal(true)}> />
Edit </Can>
</button> <Can action={'schedule.update'}>
<NewTaskButton <button className={'btn btn-primary btn-sm mr-4'} onClick={() => setShowEditModal(true)}>
scheduleId={schedule.id} Edit
onTaskAdded={task => setSchedule(s => ({ </button>
...s!, tasks: [ ...s!.tasks, task ], <NewTaskButton
}))} scheduleId={schedule.id}
/> onTaskAdded={task => setSchedule(s => ({
...s!, tasks: [ ...s!.tasks, task ],
}))}
/>
</Can>
</div> </div>
</> </>
} }

37
resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
View File

@ -13,6 +13,7 @@ import { httpErrorToHuman } from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal'; import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt'; import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
import Can from '@/components/elements/Can';
interface Props { interface Props {
schedule: number; schedule: number;
@ -75,22 +76,26 @@ export default ({ schedule, task, onTaskUpdated, onTaskRemoved }: Props) => {
</p> </p>
</div> </div>
} }
<button <Can action={'schedule.update'}>
type={'button'} <button
aria-label={'Edit scheduled task'} type={'button'}
className={'block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4'} aria-label={'Edit scheduled task'}
onClick={() => setIsEditing(true)} 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> <FontAwesomeIcon icon={faPencilAlt}/>
<button </button>
type={'button'} </Can>
aria-label={'Delete scheduled task'} <Can action={'schedule.update'}>
className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'} <button
onClick={() => setVisible(true)} type={'button'}
> aria-label={'Delete scheduled task'}
<FontAwesomeIcon icon={faTrashAlt}/> className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
</button> onClick={() => setVisible(true)}
>
<FontAwesomeIcon icon={faTrashAlt}/>
</button>
</Can>
</div> </div>
); );
}; };