Add view for editing the details of a schedule

resources/scripts/.eslintrc.yml

@@ -29,6 +29,7 @@ rules:
   "react-hooks/exhaustive-deps": 0
   "@typescript-eslint/explicit-function-return-type": 0
   "@typescript-eslint/explicit-member-accessibility": 0
+  "@typescript-eslint/ban-ts-ignore": 0
   "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0

resources/scripts/components/elements/Checkbox.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Field, FieldProps } from 'formik';
+
+interface Props {
+    name: string;
+    value: string;
+}
+
+type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
+
+type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
+
+const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
+    <Field name={name}>
+        {({ field, form }: FieldProps) => {
+            if (!Array.isArray(field.value)) {
+                console.error('Attempting to mount a checkbox using a field value that is not an array.');
+
+                return null;
+            }
+
+            return (
+                <input
+                    {...field}
+                    {...props}
+                    type={'checkbox'}
+                    checked={(field.value || []).includes(value)}
+                    onClick={() => form.setFieldTouched(field.name, true)}
+                    onChange={e => {
+                        const set = new Set(field.value);
+                        set.has(value) ? set.delete(value) : set.add(value);
+
+                        field.onChange(e);
+                        form.setFieldValue(field.name, Array.from(set));
+                    }}
+                />
+            );
+        }}
+    </Field>
+);
+
+export default Checkbox;

resources/scripts/components/elements/FormikFieldWrapper.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Field, FieldProps } from 'formik';
+import classNames from 'classnames';
+import InputError from '@/components/elements/InputError';
+
+interface Props {
+    name: string;
+    children: React.ReactNode;
+    className?: string;
+    label?: string;
+    description?: string;
+    validate?: (value: any) => undefined | string | Promise<any>;
+}
+
+const FormikFieldWrapper = ({ name, label, className, description, validate, children }: Props) => (
+    <Field name={name} validate={validate}>
+        {
+            ({ field, form: { errors, touched } }: FieldProps) => (
+                <div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
+                    {label && <label htmlFor={name}>{label}</label>}
+                    {children}
+                    <InputError errors={errors} touched={touched} name={field.name}>
+                        {description ? <p className={'input-help'}>{description}</p> : null}
+                    </InputError>
+                </div>
+            )
+        }
+    </Field>
+);
+
+export default FormikFieldWrapper;

resources/scripts/components/elements/InputError.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import capitalize from 'lodash-es/capitalize';
+import { FormikErrors, FormikTouched } from 'formik';
+
+interface Props {
+    errors: FormikErrors<any>;
+    touched: FormikTouched<any>;
+    name: string;
+    children?: React.ReactNode;
+}
+
+const InputError = ({ errors, touched, name, children }: Props) => (
+    touched[name] && errors[name] ?
+        <p className={'input-help error'}>
+            {typeof errors[name] === 'string' ?
+                capitalize(errors[name] as string)
+                :
+                capitalize((errors[name] as unknown as string[])[0])
+            }
+        </p>
+        :
+        <React.Fragment>
+            {children}
+        </React.Fragment>
+);
+
+export default InputError;

resources/scripts/components/elements/Switch.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import v4 from 'uuid/v4';
+import classNames from 'classnames';
+import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import { Field, FieldProps } from 'formik';
+
+const ToggleContainer = styled.div`
+    ${tw`relative select-none w-12 leading-normal`};
+
+    & > input[type="checkbox"] {
+        ${tw`hidden`};
+
+        &:checked + label {
+            ${tw`bg-primary-500 border-primary-700 shadow-none`};
+        }
+
+        &:checked + label:before {
+            right: 0.125rem;
+        }
+    }
+
+    & > label {
+        ${tw`mb-0 block overflow-hidden cursor-pointer bg-neutral-400 border border-neutral-700 rounded-full h-6 shadow-inner`};
+        transition: all 75ms linear;
+
+        &::before {
+            ${tw`absolute block bg-white border h-5 w-5 rounded-full`};
+            top: 0.125rem;
+            right: calc(50% + 0.125rem);
+            //width: 1.25rem;
+            //height: 1.25rem;
+            content: "";
+            transition: all 75ms ease-in;
+        }
+    }
+`;
+
+interface Props {
+    name: string;
+    description?: string;
+    label: string;
+    enabled?: boolean;
+}
+
+const Switch = ({ name, label, description }: Props) => {
+    const uuid = useMemo(() => v4(), []);
+
+    return (
+        <FormikFieldWrapper name={name}>
+            <div className={'flex items-center'}>
+                <ToggleContainer className={'mr-4 flex-none'}>
+                    <Field name={name}>
+                        {({ field, form }: FieldProps) => (
+                            <input
+                                id={uuid}
+                                name={name}
+                                type={'checkbox'}
+                                onChange={() => {
+                                    form.setFieldTouched(name);
+                                    form.setFieldValue(field.name, !field.value);
+                                }}
+                                defaultChecked={field.value}
+                            />
+                        )}
+                    </Field>
+                    <label htmlFor={uuid}/>
+                </ToggleContainer>
+                <div className={'w-full'}>
+                    <label
+                        className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
+                        htmlFor={uuid}
+                    >{label}</label>
+                    {description &&
+                    <p className={'input-help'}>
+                        {description}
+                    </p>
+                    }
+                </div>
+            </div>
+        </FormikFieldWrapper>
+    );
+};
+
+export default Switch;

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

@@ -1,15 +1,98 @@
 import React from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import Field from '@/components/elements/Field';
+import { connect } from 'react-redux';
+import { Form, FormikProps, withFormik } from 'formik';
+import { Actions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import Switch from '@/components/elements/Switch';
+import { boolean, object, string } from 'yup';
 
-type Props = {
-    schedule?: Schedule;
-} & RequiredModalProps;
+type OwnProps = { schedule: Schedule } & RequiredModalProps;
 
-export default ({ schedule, ...props }: Props) => {
+interface ReduxProps {
+    addError: ApplicationStore['flashes']['addError'];
+}
+
+type ComponentProps = OwnProps & ReduxProps;
+
+interface Values {
+    name: string;
+    dayOfWeek: string;
+    dayOfMonth: string;
+    hour: string;
+    minute: string;
+    enabled: boolean;
+}
+
+const EditScheduleModal = ({ values, schedule, ...props }: ComponentProps & FormikProps<Values>) => {
     return (
         <Modal {...props}>
-            <p>Testing</p>
+            <Form>
+                <Field
+                    name={'name'}
+                    label={'Schedule name'}
+                    description={'A human readable identifer for this schedule.'}
+                />
+                <div className={'flex mt-6'}>
+                    <div className={'flex-1 mr-4'}>
+                        <Field name={'dayOfWeek'} label={'Day of week'}/>
+                    </div>
+                    <div className={'flex-1 mr-4'}>
+                        <Field name={'dayOfMonth'} label={'Day of month'}/>
+                    </div>
+                    <div className={'flex-1 mr-4'}>
+                        <Field name={'hour'} label={'Hour'}/>
+                    </div>
+                    <div className={'flex-1'}>
+                        <Field name={'minute'} label={'Minute'}/>
+                    </div>
+                </div>
+                <p className={'input-help'}>
+                    The schedule system supports the use of Cronjob syntax when defining when tasks should begin
+                    running. Use the fields above to specify when these tasks should begin running.
+                </p>
+                <div className={'mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded'}>
+                    <Switch
+                        name={'enabled'}
+                        description={'If disabled, this schedule and it\'s associated tasks will not run.'}
+                        label={'Enabled'}
+                    />
+                </div>
+                <div className={'mt-6 text-right'}>
+                    <button className={'btn btn-lg btn-primary'} type={'button'}>
+                        Save
+                    </button>
+                </div>
+            </Form>
         </Modal>
     );
 };
+
+export default connect(
+    null,
+    // @ts-ignore
+    (dispatch: Actions<ApplicationStore>) => ({
+        addError: dispatch.flashes.addError,
+    }),
+)(
+    withFormik<ComponentProps, Values>({
+        handleSubmit: (values, { props }) => {
+        },
+
+        mapPropsToValues: ({ schedule }) => ({
+            name: schedule.name,
+            dayOfWeek: schedule.cron.dayOfWeek,
+            dayOfMonth: schedule.cron.dayOfMonth,
+            hour: schedule.cron.hour,
+            minute: schedule.cron.minute,
+            enabled: schedule.isActive,
+        }),
+
+        validationSchema: object().shape({
+            name: string().required(),
+            enabled: boolean().required(),
+        }),
+    })(EditScheduleModal),
+);

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

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import getServerSchedules, { Schedule } from '@/api/server/schedules/getServerSchedules';
 import { ServerContext } from '@/state/server';
 import Spinner from '@/components/elements/Spinner';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router-dom';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import ScheduleRow from '@/components/server/schedules/ScheduleRow';
 import { httpErrorToHuman } from '@/api/http';
@@ -14,8 +14,9 @@ interface Params {
     schedule?: string;
 }
 
-export default ({ history, match, location: { hash } }: RouteComponentProps<Params>) => {
+export default ({ history, match }: RouteComponentProps<Params>) => {
     const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
+    const [ active, setActive ] = useState(0);
     const [ schedules, setSchedules ] = useState<Schedule[] | null>(null);
     const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -29,7 +30,9 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
             });
     }, [ setSchedules ]);
 
-    const matched = (schedules || []).find(schedule => schedule.id === Number(hash.match(/\d+$/) || 0));
+    const matched = useMemo(() => {
+        return schedules?.find(schedule => schedule.id === active);
+    }, [ active ]);
 
     return (
         <div className={'my-10 mb-6'}>
@@ -38,13 +41,13 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
                 <Spinner size={'large'} centered={true}/>
                 :
                 schedules.map(schedule => (
-                    <Link
+                    <div
                         key={schedule.id}
-                        to={`/server/${id}/schedules/#/schedule/${schedule.id}`}
-                        className={'grey-row-box'}
+                        onClick={() => setActive(schedule.id)}
+                        className={'grey-row-box cursor-pointer'}
                     >
                         <ScheduleRow schedule={schedule}/>
-                    </Link>
+                    </div>
                 ))
             }
             {matched &&
@@ -52,7 +55,7 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
                 schedule={matched}
                 visible={true}
                 appear={true}
-                onDismissed={() => history.push(match.url)}
+                onDismissed={() => setActive(0)}
             />
             }
         </div>

resources/scripts/routers/ServerRouter.tsx

@@ -6,7 +6,6 @@ import TransitionRouter from '@/TransitionRouter';
 import Spinner from '@/components/elements/Spinner';
 import WebsocketHandler from '@/components/server/WebsocketHandler';
 import { ServerContext } from '@/state/server';
-import { Provider } from 'react-redux';
 import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
 import FileManagerContainer from '@/components/server/files/FileManagerContainer';
 import { CSSTransition } from 'react-transition-group';
@@ -41,36 +40,34 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                     </div>
                 </div>
             </CSSTransition>
-            <Provider store={ServerContext.useStore()}>
-                <WebsocketHandler/>
-                <TransitionRouter>
-                    {!server ?
-                        <div className={'flex justify-center m-20'}>
-                            <Spinner size={'large'}/>
-                        </div>
-                        :
-                        <React.Fragment>
-                            <Switch location={location}>
-                                <Route path={`${match.path}`} component={ServerConsole} exact/>
-                                <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
-                                <Route
-                                    path={`${match.path}/files/:action(edit|new)`}
-                                    render={props => (
-                                        <SuspenseSpinner>
-                                            <FileEditContainer {...props as any}/>
-                                        </SuspenseSpinner>
-                                    )}
-                                    exact
-                                />
-                                <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
-                                {/* <Route path={`${match.path}/users`} component={UsersContainer} exact/> */}
-                                <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
-                                <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
-                            </Switch>
-                        </React.Fragment>
-                    }
-                </TransitionRouter>
-            </Provider>
+            <WebsocketHandler/>
+            <TransitionRouter>
+                {!server ?
+                    <div className={'flex justify-center m-20'}>
+                        <Spinner size={'large'}/>
+                    </div>
+                    :
+                    <React.Fragment>
+                        <Switch location={location}>
+                            <Route path={`${match.path}`} component={ServerConsole} exact/>
+                            <Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
+                            <Route
+                                path={`${match.path}/files/:action(edit|new)`}
+                                render={props => (
+                                    <SuspenseSpinner>
+                                        <FileEditContainer {...props as any}/>
+                                    </SuspenseSpinner>
+                                )}
+                                exact
+                            />
+                            <Route path={`${match.path}/databases`} component={DatabasesContainer} exact/>
+                            {/* <Route path={`${match.path}/users`} component={UsersContainer} exact/> */}
+                            <Route path={`${match.path}/schedules`} component={ScheduleContainer} exact/>
+                            <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
+                        </Switch>
+                    </React.Fragment>
+                }
+            </TransitionRouter>
         </React.Fragment>
     );
 };

resources/scripts/state/hooks.ts

@@ -0,0 +1,9 @@
+import { createTypedHooks } from 'easy-peasy';
+import { ApplicationStore } from '@/state/index';
+
+const hooks = createTypedHooks<ApplicationStore>();
+
+export const useStore = hooks.useStore;
+export const useStoreState = hooks.useStoreState;
+export const useStoreActions = hooks.useStoreActions;
+export const useStoreDispatch = hooks.useStoreDispatch;

resources/styles/components/forms.css

@@ -47,14 +47,6 @@ input[type=number] {
     &:disabled {
         @apply .bg-neutral-100 .border-neutral-200;
     }
-
-    & + .input-help {
-        @apply .text-xs .text-neutral-400 .pt-2;
-
-        &.error {
-            @apply .text-red-600;
-        }
-    }
 }
 
 .input-dark:not(select) {
@@ -70,7 +62,7 @@ input[type=number] {
     }
 
     & + .input-help {
-        @apply .text-xs .text-neutral-400 .mt-2
+        @apply .text-xs .text-neutral-400;
     }
 
     &.error {
@@ -86,6 +78,14 @@ input[type=number] {
     }
 }
 
+.input-help {
+    @apply .text-xs .text-neutral-400 .pt-2;
+
+    &.error {
+        @apply .text-red-400;
+    }
+}
+
 label {
     @apply .block .text-xs .uppercase .text-neutral-700 .mb-2;
 }

tailwind.js

@@ -459,6 +459,7 @@ module.exports = {
         '2': '0.5rem',
         '3': '0.75rem',
         '4': '1rem',
+        '5': '1.25rem',
         '6': '1.5rem',
         '8': '2rem',
         '10': '2.5rem',
@@ -506,6 +507,7 @@ module.exports = {
         '2': '0.5rem',
         '3': '0.75rem',
         '4': '1rem',
+        '5': '1.25rem',
         '6': '1.5rem',
         '8': '2rem',
         '10': '2.5rem',
@@ -539,6 +541,7 @@ module.exports = {
         '2': '0.5rem',
         '3': '0.75rem',
         '4': '1rem',
+        '5': '1.25rem',
         '6': '1.5rem',
         '8': '2rem',
         '10': '2.5rem',