Update UI to support setting "Continue on Error" for tasks

Author: DaneEveritt

resources/scripts/api/server/schedules/createOrUpdateScheduleTask.ts

@@ -5,15 +5,16 @@ interface Data {
     action: string;
     payload: string;
     timeOffset: string | number;
+    continueOnFailure: boolean;
 }
 
-export default (uuid: string, schedule: number, task: number | undefined, { timeOffset, ...data }: Data): Promise<Task> => {
-    return new Promise((resolve, reject) => {
-        http.post(`/api/client/servers/${uuid}/schedules/${schedule}/tasks${task ? `/${task}` : ''}`, {
-            ...data,
-            time_offset: timeOffset,
-        })
-            .then(({ data }) => resolve(rawDataToServerTask(data.attributes)))
-            .catch(reject);
+export default async (uuid: string, schedule: number, task: number | undefined, data: Data): Promise<Task> => {
+    const { data: response } = await http.post(`/api/client/servers/${uuid}/schedules/${schedule}/tasks${task ? `/${task}` : ''}`, {
+        action: data.action,
+        payload: data.payload,
+        continue_on_failure: data.continueOnFailure,
+        time_offset: data.timeOffset,
     });
+
+    return rawDataToServerTask(response.attributes);
 };

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

@@ -104,15 +104,15 @@ const EditScheduleModal = ({ schedule }: Props) => {
                     </p>
                     <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
                         <FormikSwitch
-                            name={'only_when_online'}
-                            description={'If disabled this schedule will always run, regardless of the server\'s current power state.'}
+                            name={'onlyWhenOnline'}
+                            description={'Only execute this schedule when the server is in a running state.'}
                             label={'Only When Server Is Online'}
                         />
                     </div>
                     <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
                         <FormikSwitch
                             name={'enabled'}
-                            description={'If disabled this schedule and it\'s associated tasks will not run.'}
+                            description={'This schedule will be executed automatically if enabled.'}
                             label={'Schedule Enabled'}
                         />
                     </div>

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

@@ -13,12 +13,7 @@ export default ({ schedule }: Props) => {
 
     return (
         <>
-            {visible &&
-            <TaskDetailsModal
-                schedule={schedule}
-                onDismissed={() => setVisible(false)}
-            />
-            }
+            <TaskDetailsModal schedule={schedule} visible={visible} onModalDismissed={() => setVisible(false)}/>
             <Button onClick={() => setVisible(true)} css={tw`flex-1`}>
                 New Task
             </Button>

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

@@ -67,7 +67,7 @@ export default () => {
                     }
                     <Can action={'schedule.create'}>
                         <div css={tw`mt-8 flex justify-end`}>
-                            {visible && <EditScheduleModal appear visible onDismissed={() => setVisible(false)}/>}
+                            <EditScheduleModal visible={visible} onModalDismissed={() => setVisible(false)}/>
                             <Button type={'button'} onClick={() => setVisible(true)}>
                                 Create schedule
                             </Button>

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

@@ -153,7 +153,7 @@ export default () => {
                             }
                         </div>
                     </div>
-                    <EditScheduleModal visible={showEditModal} schedule={schedule} onDismissed={toggleEditModal}/>
+                    <EditScheduleModal visible={showEditModal} schedule={schedule} onModalDismissed={toggleEditModal}/>
                     <div css={tw`mt-6 flex sm:justify-end`}>
                         <Can action={'schedule.delete'}>
                             <DeleteScheduleButton

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

@@ -1,7 +1,15 @@
 import React, { useState } from 'react';
 import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faClock, faCode, faFileArchive, faPencilAlt, faToggleOn, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import {
+    faArrowCircleDown,
+    faClock,
+    faCode,
+    faFileArchive,
+    faPencilAlt,
+    faToggleOn,
+    faTrashAlt,
+} from '@fortawesome/free-solid-svg-icons';
 import deleteScheduleTask from '@/api/server/schedules/deleteScheduleTask';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@@ -59,11 +67,12 @@ export default ({ schedule, task }: Props) => {
     return (
         <div css={tw`sm:flex items-center p-3 sm:p-6 border-b border-neutral-800`}>
             <SpinnerOverlay visible={isLoading} fixed size={'large'}/>
-            {isEditing && <TaskDetailsModal
+            <TaskDetailsModal
                 schedule={schedule}
                 task={task}
-                onDismissed={() => setIsEditing(false)}
-            />}
+                visible={isEditing}
+                onModalDismissed={() => setIsEditing(false)}
+            />
             <ConfirmationModal
                 title={'Confirm task deletion'}
                 buttonText={'Delete Task'}
@@ -89,6 +98,14 @@ export default ({ schedule, task }: Props) => {
                 }
             </div>
             <div css={tw`mt-3 sm:mt-0 flex items-center w-full sm:w-auto`}>
+                {task.continueOnFailure &&
+                <div css={tw`mr-6`}>
+                    <div css={tw`flex items-center px-2 py-1 bg-yellow-500 text-yellow-800 text-sm rounded-full`}>
+                        <Icon icon={faArrowCircleDown} css={tw`w-3 h-3 mr-2`}/>
+                        Continues on Failure
+                    </div>
+                </div>
+                }
                 {task.sequenceId > 1 && task.timeOffset > 0 &&
                 <div css={tw`mr-6`}>
                     <div css={tw`flex items-center px-2 py-1 bg-neutral-500 text-sm rounded-full`}>