Allow editing CRON expression of existing non-system scheduled job

src/components/WidgetButtons/index.tsx

@@ -39,7 +39,6 @@ export type IconName =
     | 'link'
     | 'recycle'
     | 'rekey';
-
 export interface WidgetButtonProps {
     icon: IconName;
     id?: string;
@@ -117,6 +116,7 @@ const classNames = {
     minus: 'fa fa-minus',
     gavel: 'fa fa-gavel',
     lock: 'fa fa-lock',
+    stopwatch: 'fa fa-stopwatch',
     refresh: 'fa fa-refresh',
     reload: 'fa fa-rotate-right',
     handshake: 'fa fa-circle-exclamation',

src/components/_pages/scheduler/detail/index.tsx

@@ -1,40 +1,43 @@
 import CustomTable, { TableDataRow, TableHeader } from 'components/CustomTable';
 import Dialog from 'components/Dialog';
-
 import Widget from 'components/Widget';
 import { WidgetButtonProps } from 'components/WidgetButtons';
-
 import { selectors as enumSelectors, getEnumLabel } from 'ducks/enums';
 import { actions, selectors } from 'ducks/scheduler';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-
 import { Badge, Container } from 'reactstrap';
-
 import SwitchField from 'components/Input/SwitchField';
 import { PlatformEnum, SchedulerJobExecutionStatus } from 'types/openapi';
 import { LockWidgetNameEnum } from 'types/user-interface';
 import { getStrongFromCronExpression } from 'utils/dateUtil';
-
+import Cron from 'react-cron-generator';
+import { validateQuartzCronExpression, validateRequired } from 'utils/validators';
+import TextField from 'components/Input/TextField';
+import { Form } from 'react-final-form';
 import SchedulerJobHistory from './SchedulerJobHistory';
 
 export default function SchedulerJobDetail() {
     const dispatch = useDispatch();
-
     const { id } = useParams();
-
     const schedulerJob = useSelector(selectors.schedulerJob);
-
     const isFetching = useSelector(selectors.isFetchingDetail);
     const isDeleting = useSelector(selectors.isDeleting);
     const isEnabling = useSelector(selectors.isEnabling);
-
+    const isUpdatingCron = useSelector(selectors.isUpdatingCron);
+    const [originalCronExpression, setOriginalCronExpression] = useState<string>('');
     const schedulerJobExecutionStatusEnum = useSelector(enumSelectors.platformEnum(PlatformEnum.SchedulerJobExecutionStatus));
 
     const [confirmDelete, setConfirmDelete] = useState<boolean>(false);
+    const [editCronOpen, setEditCronOpen] = useState(false);
+    const [newCronExpression, setNewCronExpression] = useState('');
+    const [cronModalOpen, setCronModalOpen] = useState(false);
 
-    const isBusy = useMemo(() => isFetching || isDeleting || isEnabling, [isFetching, isDeleting, isEnabling]);
+    const isBusy = useMemo(
+        () => isFetching || isDeleting || isEnabling || isUpdatingCron,
+        [isFetching, isDeleting, isEnabling, isUpdatingCron],
+    );
 
     const getFreshSchedulerJobDetails = useCallback(() => {
         if (!id) return;
@@ -47,11 +50,29 @@ export default function SchedulerJobDetail() {
 
     const onDeleteConfirmed = useCallback(() => {
         if (!schedulerJob) return;
-
         dispatch(actions.deleteSchedulerJob({ uuid: schedulerJob.uuid, redirect: true }));
         setConfirmDelete(false);
     }, [schedulerJob, dispatch]);
 
+    const handleCronSave = useCallback(() => {
+        if (schedulerJob && newCronExpression) {
+            dispatch(actions.updateSchedulerJobCron({ uuid: schedulerJob.uuid, cronExpression: newCronExpression }));
+            setEditCronOpen(false);
+        }
+    }, [schedulerJob, dispatch, newCronExpression]);
+
+    const handleCronSelectChange = (value: string) => {
+        setNewCronExpression(value);
+    };
+
+    const openEditCronModal = useCallback(() => {
+        if (schedulerJob) {
+            setNewCronExpression(schedulerJob.cronExpression);
+            setOriginalCronExpression(schedulerJob.cronExpression);
+        }
+        setEditCronOpen(true);
+    }, [schedulerJob]);
+
     const buttons: WidgetButtonProps[] = useMemo(
         () => [
             {
@@ -78,8 +99,14 @@ export default function SchedulerJobDetail() {
                     dispatch(actions.disableSchedulerJob({ uuid: schedulerJob!.uuid }));
                 },
             },
+            {
+                icon: 'pencil',
+                disabled: !schedulerJob,
+                tooltip: 'Edit CRON Expression',
+                onClick: openEditCronModal,
+            },
         ],
-        [dispatch, schedulerJob],
+        [dispatch, schedulerJob, openEditCronModal],
     );
 
     const detailHeaders: TableHeader[] = useMemo(
@@ -167,10 +194,8 @@ export default function SchedulerJobDetail() {
                 widgetLockName={LockWidgetNameEnum.SchedulerJobDetail}
             >
                 <br />
-
                 <CustomTable headers={detailHeaders} data={detailData} />
             </Widget>
-
             {id && <SchedulerJobHistory uuid={id} />}
 
             <Dialog
@@ -183,6 +208,76 @@ export default function SchedulerJobDetail() {
                     { color: 'secondary', onClick: () => setConfirmDelete(false), body: 'Cancel' },
                 ]}
             />
+            <Dialog
+                size="lg"
+                isOpen={editCronOpen}
+                caption="Edit CRON Expression"
+                body={
+                    <Form
+                        onSubmit={handleCronSave}
+                        initialValues={{ cronExpression: newCronExpression }}
+                        render={({ handleSubmit, values }) => (
+                            <form onSubmit={handleSubmit}>
+                                <TextField
+                                    id="cronExpression"
+                                    label="Cron Expression"
+                                    validators={[validateRequired(), validateQuartzCronExpression(values.cronExpression)]}
+                                    description={getStrongFromCronExpression(values.cronExpression)}
+                                    inputGroupIcon={{
+                                        icon: 'fa fa-stopwatch',
+                                        onClick: () => setCronModalOpen(true),
+                                    }}
+                                />
+                                <div className="d-flex justify-content-between mt-3">
+                                    <button type="submit" className="btn btn-primary">
+                                        Save
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="btn btn-secondary"
+                                        onClick={() => {
+                                            setNewCronExpression(originalCronExpression);
+                                            setEditCronOpen(false);
+                                        }}
+                                    >
+                                        Cancel
+                                    </button>
+                                </div>
+                            </form>
+                        )}
+                    />
+                }
+                toggle={() => setEditCronOpen(false)}
+            />
+
+            <Dialog
+                size="lg"
+                isOpen={cronModalOpen}
+                caption="Select CRON Expression"
+                body={
+                    <div className="d-flex justify-content-center">
+                        <Cron value={newCronExpression} onChange={handleCronSelectChange} showResultText showResultCron />
+                    </div>
+                }
+                toggle={() => setCronModalOpen(false)}
+                buttons={[
+                    {
+                        color: 'primary',
+                        onClick: () => {
+                            setCronModalOpen(false);
+                        },
+                        body: 'Ok',
+                    },
+                    {
+                        color: 'secondary',
+                        onClick: () => {
+                            setNewCronExpression(originalCronExpression);
+                            setCronModalOpen(false);
+                        },
+                        body: 'Cancel',
+                    },
+                ]}
+            />
         </Container>
     );
 }

src/ducks/scheduler-epics.ts

@@ -228,6 +228,40 @@ const bulkDisableSchedulerJobs: AppEpic = (action$, state$, deps) => {
     );
 };
 
+const updateSchedulerJobCron: AppEpic = (action$, state$, deps) => {
+    return action$.pipe(
+        filter(slice.actions.updateSchedulerJobCron.match),
+        switchMap((action) =>
+            deps.apiClients.scheduler
+                .updateScheduledJob({
+                    uuid: action.payload.uuid,
+                    updateScheduledJob: { cronExpression: action.payload.cronExpression },
+                })
+                .pipe(
+                    mergeMap((response) =>
+                        of(
+                            slice.actions.updateSchedulerJobCronSuccess({
+                                uuid: action.payload.uuid,
+                                updateScheduledJob: response,
+                            }),
+                        ),
+                    ),
+                    catchError((err) =>
+                        of(
+                            slice.actions.updateSchedulerJobCronFailure({
+                                error: extractError(err, 'Failed to update cron expression'),
+                            }),
+                            appRedirectActions.fetchError({
+                                error: err,
+                                message: 'Failed to update cron expression',
+                            }),
+                        ),
+                    ),
+                ),
+        ),
+    );
+};
+
 const epics = [
     listSchedulerJobs,
     listSchedulerJobHistory,
@@ -237,6 +271,7 @@ const epics = [
     disableSchedulerJob,
     bulkEnableSchedulerJobs,
     bulkDisableSchedulerJobs,
+    updateSchedulerJobCron,
 ];
 
 export default epics;

src/ducks/scheduler.ts

@@ -11,6 +11,7 @@ export type State = {
     isFetchingDetail: boolean;
     isDeleting: boolean;
     isEnabling: boolean;
+    isUpdatingCron: boolean;
 };
 
 export const initialState: State = {
@@ -20,6 +21,7 @@ export const initialState: State = {
     isFetchingDetail: false,
     isDeleting: false,
     isEnabling: false,
+    isUpdatingCron: false,
 };
 
 export const slice = createSlice({
@@ -160,6 +162,24 @@ export const slice = createSlice({
         disableSchedulerJobFailure: (state, action: PayloadAction<{ error: string | undefined }>) => {
             state.isEnabling = false;
         },
+        updateSchedulerJobCron: (state, action: PayloadAction<{ uuid: string; cronExpression: string }>) => {
+            state.isUpdatingCron = true;
+        },
+
+        updateSchedulerJobCronSuccess: (
+            state,
+            action: PayloadAction<{ uuid: string; updateScheduledJob: Partial<SchedulerJobDetailModel> }>,
+        ) => {
+            state.isUpdatingCron = false;
+            state.schedulerJob =
+                state.schedulerJob?.uuid === action.payload.uuid
+                    ? { ...state.schedulerJob, cronExpression: action.payload.updateScheduledJob.cronExpression || '' }
+                    : state.schedulerJob;
+        },
+
+        updateSchedulerJobCronFailure: (state, action: PayloadAction<{ error: string | undefined }>) => {
+            state.isUpdatingCron = false;
+        },
     },
 });
 
@@ -172,6 +192,7 @@ const schedulerJobHistory = createSelector(state, (state) => state.schedulerJobH
 const isFetchingDetail = createSelector(state, (state) => state.isFetchingDetail);
 const isDeleting = createSelector(state, (state) => state.isDeleting);
 const isEnabling = createSelector(state, (state) => state.isEnabling);
+const isUpdatingCron = createSelector(state, (state) => state.isUpdatingCron);
 
 export const selectors = {
     state,
@@ -183,6 +204,7 @@ export const selectors = {
     isFetchingDetail,
     isDeleting,
     isEnabling,
+    isUpdatingCron,
 };
 
 export const actions = slice.actions;