chore: add selected values to existing queueables

src/components/FormFields/SequenceOrderField/SequenceOrderEditField.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { ReactFinalForm, CircularLoader, NoticeBox } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import { jobTypesMap } from '../../../services/server-translations'
+import { useQueueables } from '../../../hooks/queueables'
+import SequenceTransfer from './SequenceTransfer'
+
+const { Field } = ReactFinalForm
+
+// The key under which this field will be sent to the backend
+const FIELD_NAME = 'sequence'
+const hasEnoughJobs = (value) =>
+    value?.length > 1 ? undefined : i18n.t('Please select at least two jobs')
+
+const SequenceOrderEditField = ({ selectedValues }) => {
+    const { loading, error, data } = useQueueables()
+
+    if (loading) {
+        return <CircularLoader />
+    }
+
+    if (error) {
+        return (
+            <NoticeBox
+                error
+                title={i18n.t(
+                    'Something went wrong whilst fetching the queueable jobs'
+                )}
+            />
+        )
+    }
+
+    // The selected values aren't part of the queueables, so we need to add them
+    const options = data.concat(selectedValues).map(({ name, id, type }) => ({
+        label: name,
+        value: id,
+        type: jobTypesMap[type],
+    }))
+
+    return (
+        <Field
+            name={FIELD_NAME}
+            component={SequenceTransfer}
+            options={options}
+            validate={hasEnoughJobs}
+        />
+    )
+}
+
+export default SequenceOrderEditField

src/components/FormFields/SequenceOrderField/SequenceOrderField.js

@@ -9,9 +9,8 @@ const { Field } = ReactFinalForm
 
 // The key under which this field will be sent to the backend
 const FIELD_NAME = 'sequence'
-const initialValue = []
 const hasEnoughJobs = (value) =>
-    value.length > 1 ? undefined : i18n.t('Please select at least two jobs')
+    value?.length > 1 ? undefined : i18n.t('Please select at least two jobs')
 
 const SequenceOrderField = () => {
     const { loading, error, data } = useQueueables()
@@ -42,7 +41,6 @@ const SequenceOrderField = () => {
             name={FIELD_NAME}
             component={SequenceTransfer}
             options={options}
-            initialValue={initialValue}
             validate={hasEnoughJobs}
         />
     )

src/components/FormFields/SequenceOrderField/index.js

@@ -1 +1,2 @@
-export { default } from './SequenceOrderField'
+export { default as SequenceOrderField} from './SequenceOrderField'
+export { default as SequenceOrderEditField} from './SequenceOrderEditField'

src/components/FormFields/index.js

@@ -9,6 +9,9 @@ export { default as JobTypeField } from './JobTypeField'
 export { default as NameField } from './NameField'
 export { default as ParameterFields } from './ParameterFields'
 export { default as ScheduleField } from './ScheduleField'
-export { default as SequenceOrderField } from './SequenceOrderField'
+export {
+    SequenceOrderField,
+    SequenceOrderEditField,
+} from './SequenceOrderField'
 
 export { fieldNames }

src/components/Forms/SequenceEditForm.js

@@ -4,7 +4,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, CircularLoader, Box, ReactFinalForm } from '@dhis2/ui'
 import { DiscardFormButton } from '../Buttons'
 import { FormErrorBox } from '../FormErrorBox'
-import { NameField, CronField, SequenceOrderField } from '../FormFields'
+import { NameField, CronField, SequenceOrderEditField } from '../FormFields'
 import styles from './SequenceEditForm.module.css'
 
 const { useForm } = ReactFinalForm
@@ -16,6 +16,7 @@ const SequenceEditForm = ({
     submitError,
     hasSubmitErrors,
     setIsPristine,
+    selectedValues
 }) => {
     const { subscribe } = useForm()
 
@@ -44,7 +45,7 @@ const SequenceEditForm = ({
                 <CronField />
             </Box>
             <Box marginTop="16px">
-                <SequenceOrderField />
+                <SequenceOrderEditField selectedValues={selectedValues} />
             </Box>
             {hasSubmitErrors && (
                 <Box marginTop="32px" maxWidth="600px">

src/components/Forms/SequenceEditFormContainer.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { ReactFinalForm } from '@dhis2/ui'
-import { useParams } from 'react-router-dom'
 import history from '../../services/history'
 import { useSubmitJobQueue } from '../../hooks/job-queues'
 import SequenceEditForm from './SequenceEditForm'
@@ -21,7 +20,6 @@ const initialFields = [
 ]
 
 const SequenceEditFormContainer = ({ sequence, setIsPristine }) => {
-    const { id } = useParams()
     const redirect = () => {
         history.push('/')
     }
@@ -33,6 +31,8 @@ const SequenceEditFormContainer = ({ sequence, setIsPristine }) => {
         return filtered
     }, {})
 
+    initialValues.sequence = initialValues.sequence.map(({ id }) => id)
+
     /**
      * destroyOnUnregister is enabled so that dynamic fields will be unregistered
      * when they're removed from the form, for instance when the jobType changes.
@@ -41,10 +41,10 @@ const SequenceEditFormContainer = ({ sequence, setIsPristine }) => {
         <Form
             component={SequenceEditForm}
             destroyOnUnregister
-            id={id}
             initialValues={initialValues}
             onSubmit={submitJobQueue}
             setIsPristine={setIsPristine}
+            selectedValues={sequence.sequence}
         />
     )
 }

src/components/Routes/Routes.js

@@ -16,7 +16,7 @@ const Routes = () => (
         <Route path="/view/:id" component={JobView} />
         <Route path="/add" component={JobAdd} />
         <Route path="/add-sequence" component={SequenceAdd} />
-        <Route path="/edit-sequence" component={SequenceEdit} />
+        <Route path="/edit-sequence/:id" component={SequenceEdit} />
     </Router>
 )
 

src/pages/SequenceEdit/SequenceEdit.js

@@ -1,12 +1,31 @@
 import React, { useState } from 'react'
-import { Card, IconInfo16 } from '@dhis2/ui'
+import { Card, IconInfo16 , NoticeBox } from '@dhis2/ui'
+import { useParams } from 'react-router-dom'
 import i18n from '@dhis2/d2-i18n'
+import { Spinner } from '../../components/Spinner'
 import { DiscardFormButton } from '../../components/Buttons'
 import { SequenceEditFormContainer } from '../../components/Forms'
+import { useJobScheduleById } from '../../hooks/job-schedules'
 import styles from './SequenceEdit.module.css'
 
 const SequenceEdit = () => {
     const [isPristine, setIsPristine] = useState(true)
+    const { id } = useParams()
+    const { data, fetching, error } = useJobScheduleById(id)
+
+    if (fetching) {
+        return <Spinner />
+    }
+
+    if (error) {
+        return (
+            <NoticeBox error title={i18n.t('Could not load requested schedule')}>
+                {i18n.t(
+                    'Something went wrong whilst loading the requested schedule. Make sure it has not been deleted and try refreshing the page.'
+                )}
+            </NoticeBox>
+        )
+    }
 
     return (
         <React.Fragment>
@@ -36,7 +55,7 @@ const SequenceEdit = () => {
                         )}
                     </span>
                 </header>
-                <SequenceEditFormContainer setIsPristine={setIsPristine} />
+                <SequenceEditFormContainer sequence={data} setIsPristine={setIsPristine} />
             </Card>
         </React.Fragment>
     )