feat(xo-web/schedules): ability to enable schedule when editing (#5111)

Fixes #5026

This change affects ordinary jobs only, not backup jobs

CHANGELOG.unreleased.md

@@ -9,6 +9,8 @@
 
 - Log the `Invalid XML-RPC message` error as an unexpected response (PR [#5138](https://github.com/vatesfr/xen-orchestra/pull/5138))
 - [VM/disks] By default, sort disks by their device position instead of their name [#5163](https://github.com/vatesfr/xen-orchestra/issues/5163) (PR [#5165](https://github.com/vatesfr/xen-orchestra/pull/5165))
+- [Schedule/edit] Ability to enable/disable an ordinary job's schedule [#5026](https://github.com/vatesfr/xen-orchestra/issues/5026) (PR [#5111](https://github.com/vatesfr/xen-orchestra/pull/5111))
+- [New schedule] Enable 'Enable immediately after creation' by default (PR [#5111](https://github.com/vatesfr/xen-orchestra/pull/5111))
 
 ### Bug fixes
 

packages/xo-web/src/xo-app/jobs/schedules/index.js

@@ -1,13 +1,14 @@
 import _, { messages } from 'intl'
 import ActionButton from 'action-button'
 import Button from 'button'
+import Component from 'base-component'
 import find from 'lodash/find'
 import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
 import moment from 'moment-timezone'
 import SortedTable from 'sorted-table'
 import Upgrade from 'xoa-upgrade'
-import React, { Component } from 'react'
+import React from 'react'
 import Scheduler, { SchedulePreview } from 'scheduling'
 import { error } from 'notification'
 import { injectIntl } from 'react-intl'
@@ -79,6 +80,7 @@ export default class Schedules extends Component {
       action: undefined,
       actions: undefined,
       cronPattern: DEFAULT_CRON_PATTERN,
+      enabled: true,
       job: undefined,
       jobs: undefined,
       timezone: DEFAULT_TIMEZONE,
@@ -130,19 +132,20 @@ export default class Schedules extends Component {
   }
 
   _handleSubmit = () => {
-    const { name, job, enabled } = this.refs
-    const { cronPattern, schedule, timezone } = this.state
+    const { name, job } = this.refs
+    const { cronPattern, enabled, schedule, timezone } = this.state
     let save
     if (schedule) {
       schedule.jobId = job.value.id
       schedule.cron = cronPattern
+      schedule.enabled = enabled
       schedule.name = name.value
       schedule.timezone = timezone
       save = editSchedule(schedule)
     } else {
       save = createSchedule(job.value.id, {
         cron: cronPattern,
-        enabled: enabled.value,
+        enabled,
         name: name.value,
         timezone,
       })
@@ -168,6 +171,7 @@ export default class Schedules extends Component {
     job.value = jobs[schedule.jobId]
     this.setState({
       cronPattern: schedule.cron,
+      enabled: schedule.enabled,
       schedule,
       timezone: schedule.timezone,
     })
@@ -177,13 +181,13 @@ export default class Schedules extends Component {
     this.setState(
       {
         cronPattern: DEFAULT_CRON_PATTERN,
+        enabled: true,
         schedule: undefined,
         timezone: DEFAULT_TIMEZONE,
       },
       () => {
-        const { name, job, enabled } = this.refs
+        const { name, job } = this.refs
         name.value = ''
-        enabled.value = false
         job.value = undefined
       }
     )
@@ -209,7 +213,14 @@ export default class Schedules extends Component {
   ]
 
   render() {
-    const { cronPattern, jobs, schedule, schedules, timezone } = this.state
+    const {
+      cronPattern,
+      enabled,
+      jobs,
+      schedule,
+      schedules,
+      timezone,
+    } = this.state
     const userData = { jobs }
     return (
       <div>
@@ -237,12 +248,10 @@ export default class Schedules extends Component {
               )}
             />
           </div>
-          {!schedule && (
-            <div className='form-group'>
-              <label>{_('scheduleEnableAfterCreation')}</label>{' '}
-              <Toggle ref='enabled' />
-            </div>
-          )}
+          <div className='form-group'>
+            <Toggle onChange={this.toggleState('enabled')} value={enabled} />{' '}
+            <label>{_('scheduleEnableAfterCreation')}</label>
+          </div>
         </form>
         <fieldset>
           <Scheduler