Use a dropdown menu when selecting a power action

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

@@ -1,14 +1,13 @@
 import React, { useEffect } from 'react';
 import Modal from '@/components/elements/Modal';
 import { Task } from '@/api/server/schedules/getServerSchedules';
-import { Form, Formik, Field as FormikField, FormikHelpers } from 'formik';
+import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
 import { ServerContext } from '@/state/server';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import createOrUpdateScheduleTask from '@/api/server/schedules/createOrUpdateScheduleTask';
 import { httpErrorToHuman } from '@/api/http';
 import Field from '@/components/elements/Field';
-import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { number, object, string } from 'yup';
 
@@ -26,6 +25,61 @@ interface Values {
     timeOffset: string;
 }
 
+const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
+    const { values: { action }, setFieldValue, setFieldTouched } = useFormikContext<Values>();
+
+    useEffect(() => {
+        setFieldValue('payload', '');
+        setFieldTouched('payload', false);
+    }, [action]);
+
+    return (
+        <Form className={'m-0'}>
+            <h3 className={'mb-6'}>Edit Task</h3>
+            <div className={'flex'}>
+                <div className={'mr-2'}>
+                    <label className={'input-dark-label'}>Action</label>
+                    <FormikField as={'select'} name={'action'} className={'input-dark'}>
+                        <option value={'command'}>Send command</option>
+                        <option value={'power'}>Send power action</option>
+                    </FormikField>
+                </div>
+                <div className={'flex-1'}>
+                    {action === 'command' ?
+                        <Field
+                            name={'payload'}
+                            label={'Payload'}
+                            description={'The command to send to the server when this task executes.'}
+                        />
+                        :
+                        <div>
+                            <label className={'input-dark-label'}>Payload</label>
+                            <FormikField as={'select'} name={'payload'} className={'input-dark'}>
+                                <option value={'start'}>Start the server</option>
+                                <option value={'restart'}>Restart the server</option>
+                                <option value={'stop'}>Stop the server</option>
+                                <option value={'kill'}>Terminate the server</option>
+                            </FormikField>
+                        </div>
+                    }
+                </div>
+            </div>
+            <div className={'mt-6'}>
+                <Field
+                    name={'timeOffset'}
+                    label={'Time offset (in seconds)'}
+                    description={'The amount of time to wait after the previous task executes before running this one. If this is the first task on a schedule this will not be applied.'}
+                />
+            </div>
+            <div className={'flex justify-end mt-6'}>
+                <button type={'submit'} className={'btn btn-primary btn-sm'}>
+                    {isEditingTask ? 'Save Changes' : 'Create Task'}
+                </button>
+            </div>
+        </Form>
+    );
+};
+
 export default ({ task, scheduleId, onDismissed }: Props) => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -54,7 +108,7 @@ export default ({ task, scheduleId, onDismissed }: Props) => {
                 timeOffset: task?.timeOffset.toString() || '0',
             }}
             validationSchema={object().shape({
-                action: string().required().oneOf(['command', 'power']),
+                action: string().required().oneOf([ 'command', 'power' ]),
                 payload: string().required('A task payload must be provided.'),
                 timeOffset: number().typeError('The time offset must be a valid number between 0 and 900.')
                     .required('A time offset value must be provided.')
@@ -62,7 +116,7 @@ export default ({ task, scheduleId, onDismissed }: Props) => {
                     .max(900, 'The time offset must be less than 900 seconds.'),
             })}
         >
-            {({ values, isSubmitting }) => (
+            {({ isSubmitting }) => (
                 <Modal
                     visible={true}
                     appear={true}
@@ -70,41 +124,7 @@ export default ({ task, scheduleId, onDismissed }: Props) => {
                     showSpinnerOverlay={isSubmitting}
                 >
                     <FlashMessageRender byKey={'schedule:task'} className={'mb-4'}/>
-                    <Form className={'m-0'}>
+                    <TaskDetailsForm isEditingTask={typeof task !== 'undefined'}/>
-                        <h3 className={'mb-6'}>Edit Task</h3>
-                        <div className={'flex'}>
-                            <div className={'mr-2'}>
-                                <label className={'input-dark-label'}>Action</label>
-                                <FormikField as={'select'} name={'action'} className={'input-dark'}>
-                                    <option value={'command'}>Send command</option>
-                                    <option value={'power'}>Send power action</option>
-                                </FormikField>
-                            </div>
-                            <div className={'flex-1'}>
-                                <Field
-                                    name={'payload'}
-                                    label={'Payload'}
-                                    description={
-                                        values.action === 'command'
-                                            ? 'The command to send to the server when this task executes.'
-                                            : 'The power action to send when this task executes. Options are "start", "stop", "restart", or "kill".'
-                                    }
-                                />
-                            </div>
-                        </div>
-                        <div className={'mt-6'}>
-                            <Field
-                                name={'timeOffset'}
-                                label={'Time offset (in seconds)'}
-                                description={'The amount of time to wait after the previous task executes before running this one. If this is the first task on a schedule this will not be applied.'}
-                            />
-                        </div>
-                        <div className={'flex justify-end mt-6'}>
-                            <button type={'submit'} className={'btn btn-primary btn-sm'}>
-                                {task ? 'Save Changes' : 'Create Task'}
-                            </button>
-                        </div>
-                    </Form>
                 </Modal>
             )}
         </Formik>