diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx index 4b4b1d3b0..1fd07774d 100644 --- a/resources/scripts/components/server/databases/DatabaseRow.tsx +++ b/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) => 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(); + }} >

Confirm database deletion

@@ -113,10 +116,12 @@ export default ({ databaseId, className, onDelete }: Props) => { setConnectionVisible(false)}>

Database connection details

-
- - -
+ +
+ + +
+
{ />
- + + + @@ -156,9 +163,11 @@ export default ({ databaseId, className, onDelete }: Props) => { - + + +
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx index 30136423f..a5335f5c0 100644 --- a/resources/scripts/components/server/databases/DatabasesContainer.tsx +++ b/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 () => { : - + <> {databases.length > 0 ? databases.map((database, index) => ( { :

{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.` }

} - {server.featureLimits.databases > 0 && -
- -
- } -
+ + {server.featureLimits.databases > 0 && +
+ +
+ } +
+
} diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx index 63f174a4c..2e771b1b9 100644 --- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx +++ b/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 ? -

- There are no schedules configured for this server. Click the button below to get - started. +

+ There are no schedules configured for this server.

: schedules.map(schedule => ( @@ -54,21 +54,23 @@ export default ({ match, history }: RouteComponentProps) => { )) } -
- {visible && setSchedules(s => [...(s || []), schedule])} - onDismissed={() => setVisible(false)} - />} - -
+ +
+ {visible && setSchedules(s => [ ...(s || []), schedule ])} + onDismissed={() => setVisible(false)} + />} + +
+
} diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx index 77cfb9ee3..e601e8250 100644 --- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx +++ b/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 :

- 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.

}
- history.push(`/server/${id}/schedules`)} - /> - - setSchedule(s => ({ - ...s!, tasks: [ ...s!.tasks, task ], - }))} - /> + + history.push(`/server/${id}/schedules`)} + /> + + + + setSchedule(s => ({ + ...s!, tasks: [ ...s!.tasks, task ], + }))} + /> +
} diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx index 12e675ebc..93bd4d326 100644 --- a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx +++ b/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) => {

} - - + + + + + + ); };