refactor: add queue-specific actions

src/components/JobTable/DeleteQueueAction.js

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { MenuItem } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import { DeleteQueueModal } from '../Modal'
+
+const DeleteQueueAction = ({ name, onSuccess }) => {
+    const [showModal, setShowModal] = useState(false)
+
+    return (
+        <React.Fragment>
+            <MenuItem
+                dense
+                destructive
+                onClick={() => {
+                    setShowModal(true)
+                }}
+                label={i18n.t('Delete')}
+            />
+            {showModal && (
+                <DeleteQueueModal
+                    name={name}
+                    hideModal={
+                        /* istanbul ignore next */
+                        () => setShowModal(false)
+                    }
+                    onSuccess={onSuccess}
+                />
+            )}
+        </React.Fragment>
+    )
+}
+
+const { string, func } = PropTypes
+
+DeleteQueueAction.propTypes = {
+    name: string.isRequired,
+    onSuccess: func.isRequired,
+}
+
+export default DeleteQueueAction

src/components/JobTable/EditQueueAction.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { MenuItem } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import history from '../../services/history'
+
+const EditQueueAction = ({ name }) => (
+    <MenuItem
+        dense
+        onClick={() => history.push(`/queue/${name}`)}
+        label={i18n.t('Edit')}
+    />
+)
+
+const { string } = PropTypes
+
+EditQueueAction.propTypes = {
+    name: string.isRequired,
+}
+
+export default EditQueueAction

src/components/JobTable/Actions.js → src/components/JobTable/JobActions.js

@@ -7,7 +7,7 @@ import ViewJobAction from './ViewJobAction'
 import RunJobAction from './RunJobAction'
 import DeleteJobAction from './DeleteJobAction'
 
-const Actions = ({ id, configurable, enabled, refetch }) => (
+const JobActions = ({ id, configurable, enabled, refetch }) => (
     <DropdownButton
         small
         component={
@@ -28,17 +28,17 @@ const Actions = ({ id, configurable, enabled, refetch }) => (
     </DropdownButton>
 )
 
-Actions.defaultProps = {
+JobActions.defaultProps = {
     configurable: false,
 }
 
 const { string, bool, func } = PropTypes
 
-Actions.propTypes = {
+JobActions.propTypes = {
     id: string.isRequired,
     refetch: func.isRequired,
     configurable: bool,
     enabled: bool,
 }
 
-export default Actions
+export default JobActions

src/components/JobTable/Actions.test.js → src/components/JobTable/JobActions.test.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import Actions from './Actions'
+import JobActions from './JobActions'
 
-describe('<Actions>', () => {
+describe('<JobActions>', () => {
     it('renders without errors for configurable jobs', () => {
-        shallow(<Actions id="1" configurable refetch={() => {}} />)
+        shallow(<JobActions id="1" configurable refetch={() => {}} />)
     })
 
     it('renders without errors for non configurable jobs', () => {
-        shallow(<Actions id="1" refetch={() => {}} />)
+        shallow(<JobActions id="1" refetch={() => {}} />)
     })
 })

src/components/JobTable/JobTable.js

@@ -31,9 +31,22 @@ const JobTable = ({ jobs, refetch }) => (
                     <TableCell>{i18n.t('No jobs to display')}</TableCell>
                 </TableRow>
             ) : (
-                jobs.map((job) => (
-                    <JobTableRow key={job.id} job={job} refetch={refetch} />
-                ))
+                jobs.map((job) => {
+                    /**
+                     * This will fail if job.sequence.length does not exist. That should not happen,
+                     * so failing with an error when it does is appropriate.
+                     */
+                    const isJob = job.sequence.length === 1
+
+                    return (
+                        <JobTableRow
+                            key={job.id}
+                            job={job}
+                            refetch={refetch}
+                            isJob={isJob}
+                        />
+                    )
+                })
             )}
         </TableBody>
     </Table>

src/components/JobTable/JobTableRow.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import { TableRow, TableCell } from '@dhis2/ui'
 import { jobTypesMap } from '../../services/server-translations'
 import { ToggleJobSwitch } from '../Switches'
-import Actions from './Actions'
+import JobActions from './JobActions'
+import QueueActions from './QueueActions'
 import Status from './Status'
 import NextRun from './NextRun'
 import Schedule from './Schedule'
@@ -21,6 +22,7 @@ const JobTableRow = ({
         configurable,
     },
     refetch,
+    isJob,
 }) => (
     <TableRow>
         <TableCell role="rowheader">{name}</TableCell>
@@ -43,19 +45,24 @@ const JobTableRow = ({
             />
         </TableCell>
         <TableCell>
-            <Actions
-                id={id}
-                enabled={enabled}
-                configurable={configurable}
-                refetch={refetch}
-            />
+            {isJob ? (
+                <JobActions
+                    id={id}
+                    enabled={enabled}
+                    configurable={configurable}
+                    refetch={refetch}
+                />
+            ) : (
+                <QueueActions name={name} refetch={refetch} />
+            )}
         </TableCell>
     </TableRow>
 )
 
 const { shape, string, bool, number, func } = PropTypes
 
 JobTableRow.propTypes = {
+    isJob: bool.isRequired,
     job: shape({
         name: string.isRequired,
         enabled: bool.isRequired,

src/components/JobTable/QueueActions.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { FlyoutMenu, DropdownButton } from '@dhis2/ui'
+import i18n from '@dhis2/d2-i18n'
+import EditQueueAction from './EditQueueAction'
+import DeleteQueueAction from './DeleteQueueAction'
+
+const QueueActions = ({ name, refetch }) => (
+    <DropdownButton
+        small
+        component={
+            <FlyoutMenu>
+                <EditQueueAction name={name} />
+                <DeleteQueueAction name={name} onSuccess={refetch} />
+            </FlyoutMenu>
+        }
+    >
+        {i18n.t('Actions')}
+    </DropdownButton>
+)
+
+const { string, func } = PropTypes
+
+QueueActions.propTypes = {
+    name: string.isRequired,
+    refetch: func.isRequired,
+}
+
+export default QueueActions