feat: add run queue menu item

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-02-15T11:19:20.108Z\n"
-"PO-Revision-Date: 2024-02-15T11:19:20.108Z\n"
+"POT-Creation-Date: 2024-02-21T09:54:31.937Z\n"
+"PO-Revision-Date: 2024-02-21T09:54:31.937Z\n"
 
 msgid "Something went wrong"
 msgstr "Something went wrong"
@@ -252,9 +252,15 @@ msgstr "Yes, discard changes"
 msgid "Error running job"
 msgstr "Error running job"
 
+msgid "Error running queue"
+msgstr "Error running queue"
+
 msgid "Are you sure you want to run this job?"
 msgstr "Are you sure you want to run this job?"
 
+msgid "Are you sure you want to run this queue?"
+msgstr "Are you sure you want to run this queue?"
+
 msgid "Run"
 msgstr "Run"
 

src/components/JobTable/QueueActions.js

@@ -3,14 +3,16 @@ import PropTypes from 'prop-types'
 import { FlyoutMenu, DropdownButton } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 import EditQueueAction from './EditQueueAction'
+import RunQueueAction from './RunQueueAction'
 import DeleteQueueAction from './DeleteQueueAction'
 
-const QueueActions = ({ name, refetch }) => (
+const QueueActions = ({ name, refetch, id, enabled }) => (
     <DropdownButton
         small
         component={
             <FlyoutMenu>
                 <EditQueueAction name={name} />
+                <RunQueueAction enabled={enabled} id={id} onComplete={refetch} />
                 <DeleteQueueAction name={name} onSuccess={refetch} />
             </FlyoutMenu>
         }
@@ -19,9 +21,11 @@ const QueueActions = ({ name, refetch }) => (
     </DropdownButton>
 )
 
-const { string, func } = PropTypes
+const { string, func, bool } = PropTypes
 
 QueueActions.propTypes = {
+    enabled: bool.isRequired,
+    id: string.isRequired,
     name: string.isRequired,
     refetch: func.isRequired,
 }

src/components/JobTable/QueueTableRow.js

@@ -69,7 +69,12 @@ const QueueTableRow = ({
                     />
                 </TableCell>
                 <TableCell>
-                    <QueueActions name={name} refetch={refetch} />
+                    <QueueActions
+                        name={name}
+                        refetch={refetch}
+                        id={id}
+                        enabled={enabled}
+                    />
                 </TableCell>
             </TableRow>
             {showJobs

src/components/JobTable/RunQueueAction.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { MenuItem } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import { RunJobModal } from '../Modal'
+
+const RunQueueAction = ({ id, enabled, onComplete }) => {
+    const [showModal, setShowModal] = useState(false)
+
+    return (
+        <React.Fragment>
+            <MenuItem
+                dense
+                onClick={() => {
+                    setShowModal(true)
+                }}
+                disabled={!enabled}
+                label={i18n.t('Run manually')}
+            />
+            {showModal && (
+                <RunJobModal
+                    id={id}
+                    hideModal={
+                        /* istanbul ignore next */
+                        () => setShowModal(false)
+                    }
+                    onComplete={onComplete}
+                    isQueue
+                />
+            )}
+        </React.Fragment>
+    )
+}
+
+const { string, bool, func } = PropTypes
+
+RunQueueAction.propTypes = {
+    id: string.isRequired,
+    onComplete: func.isRequired,
+    enabled: bool,
+}
+
+export default RunQueueAction

src/components/JobTable/RunQueueAction.test.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import RunQueueAction from './RunQueueAction'
+
+describe('<RunQueueAction>', () => {
+    it('shows the modal when MenuItem is clicked and the job is enabled', () => {
+        const wrapper = mount(
+            <RunQueueAction id="id" enabled onComplete={() => {}} />
+        )
+
+        expect(wrapper.find('RunJobModal')).toHaveLength(0)
+        wrapper.find('a').simulate('click')
+        expect(wrapper.find('RunJobModal')).toHaveLength(1)
+    })
+
+    it('does not show the modal when MenuItem is clicked and the job is disabled', () => {
+        const wrapper = mount(<RunQueueAction id="id" onComplete={() => {}} />)
+
+        expect(wrapper.find('RunJobModal')).toHaveLength(0)
+        wrapper.find('a').simulate('click')
+        expect(wrapper.find('RunJobModal')).toHaveLength(0)
+    })
+})

src/components/Modal/RunJobModal.js

@@ -11,7 +11,23 @@ import {
 } from '@dhis2/ui'
 import i18n from '@dhis2/d2-i18n'
 
-const RunJobModal = ({ id, hideModal, onComplete }) => {
+const messages = {
+    error: {
+        job: i18n.t('Error running job'),
+        queue: i18n.t('Error running queue'),
+    },
+    confirm: {
+        job: i18n.t('Are you sure you want to run this job?'),
+        queue: i18n.t('Are you sure you want to run this queue?'),
+    },
+}
+
+/**
+ * This modal can be used to trigger a job or a queue. To start
+ * a queue, pass the id of the first job of that queue.
+ */
+
+const RunJobModal = ({ id, hideModal, onComplete, isQueue }) => {
     const [mutation] = useState({
         resource: `jobConfigurations/${id}/execute`,
         type: 'create',
@@ -22,16 +38,18 @@ const RunJobModal = ({ id, hideModal, onComplete }) => {
             onComplete()
         },
     })
+    const errorTitle = isQueue ? messages.error.queue : messages.error.job
+    const confirmation = isQueue ? messages.confirm.queue : messages.confirm.job
 
     return (
         <Modal open small onClose={hideModal}>
             <ModalContent>
                 {error && (
-                    <NoticeBox error title={i18n.t('Error running job')}>
+                    <NoticeBox error title={errorTitle}>
                         {error.message}
                     </NoticeBox>
                 )}
-                <p>{i18n.t('Are you sure you want to run this job?')}</p>
+                <p>{confirmation}</p>
             </ModalContent>
             <ModalActions>
                 <ButtonStrip end>
@@ -57,12 +75,13 @@ const RunJobModal = ({ id, hideModal, onComplete }) => {
     )
 }
 
-const { func, string } = PropTypes
+const { func, string, bool } = PropTypes
 
 RunJobModal.propTypes = {
     hideModal: func.isRequired,
     id: string.isRequired,
     onComplete: func.isRequired,
+    isQueue: bool,
 }
 
 export default RunJobModal