style: add slight inset to distinguish expanded rows

dhis2 · Nov 8, 2023 · d5d84f3 · d5d84f3
1 parent b03a49f
commit d5d84f3
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 18 deletions.
diff --git a/i18n/en.pot b/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: 2023-10-24T13:23:55.108Z\n"
-"PO-Revision-Date: 2023-10-24T13:23:55.109Z\n"
+"POT-Creation-Date: 2023-11-08T08:39:40.580Z\n"
+"PO-Revision-Date: 2023-11-08T08:39:40.580Z\n"
 
 msgid "Something went wrong"
 msgstr "Something went wrong"
@@ -262,21 +262,25 @@ msgstr "New Job"
 msgid "Configuration"
 msgstr "Configuration"
 
-msgid "About job configuration"
-msgstr "About job configuration"
+msgid "About the scheduler"
+msgstr "About the scheduler"
 
-msgid "Job: {{ name }}"
-msgstr "Job: {{ name }}"
-
-msgid "Could not load jobs"
-msgstr "Could not load jobs"
+msgid "Could not load jobs and queues"
+msgstr "Could not load jobs and queues"
 
-msgid "Something went wrong whilst loading the jobs. Try refreshing the page."
-msgstr "Something went wrong whilst loading the jobs. Try refreshing the page."
+msgid ""
+"Something went wrong whilst loading the jobs and queues. Try refreshing the "
+"page."
+msgstr ""
+"Something went wrong whilst loading the jobs and queues. Try refreshing the "
+"page."
 
 msgid "Scheduled jobs"
 msgstr "Scheduled jobs"
 
+msgid "Filter by name"
+msgstr "Filter by name"
+
 msgid "Include system jobs in list"
 msgstr "Include system jobs in list"
 
@@ -286,6 +290,9 @@ msgstr "New job"
 msgid "New queue"
 msgstr "New queue"
 
+msgid "Job: {{ name }}"
+msgstr "Job: {{ name }}"
+
 msgid "System job: {{ name }}"
 msgstr "System job: {{ name }}"
 

diff --git a/src/components/JobTable/QueuedJobTableRow.js → src/components/JobTable/ExpandableRow.js b/src/components/JobTable/QueuedJobTableRow.js → src/components/JobTable/ExpandableRow.js
@@ -1,11 +1,19 @@
 import React from 'react'
 import { TableRow, TableCell } from '@dhis2/ui'
 import PropTypes from 'prop-types'
+import cx from 'classnames'
 import { jobTypesMap } from '../../services/server-translations'
+import styles from './ExpandableRow.module.css'
 
-const QueuedJobTableRow = ({ job }) => {
+const ExpandableRow = ({ job, isFirst, isLast }) => {
     return (
-        <TableRow>
+        <TableRow
+            className={cx(styles.row, {
+                [styles.first]: isFirst,
+                [styles.last]: isLast,
+            })}
+            suppressZebraStriping
+        >
             <TableCell />
             <TableCell>{job.name}</TableCell>
             <TableCell colSpan="6">{jobTypesMap[job.type]}</TableCell>
@@ -15,11 +23,13 @@ const QueuedJobTableRow = ({ job }) => {
 
 const { shape, string } = PropTypes
 
-QueuedJobTableRow.propTypes = {
+ExpandableRow.propTypes = {
+    isFirst: string.isRequired,
+    isLast: string.isRequired,
     job: shape({
         name: string.isRequired,
         type: string.isRequired,
     }).isRequired,
 }
 
-export default QueuedJobTableRow
+export default ExpandableRow
diff --git a/src/components/JobTable/ExpandableRow.module.css b/src/components/JobTable/ExpandableRow.module.css
@@ -0,0 +1,11 @@
+.row {
+    background: var(--colors-grey300);
+}
+
+.first {
+    box-shadow: inset 0 5px 4px -4px var(--colors-grey600);
+}
+
+.last {
+    box-shadow: inset 0 -5px 4px -4px var(--colors-grey600);
+}
diff --git a/src/components/JobTable/QueueTableRow.js b/src/components/JobTable/QueueTableRow.js
@@ -12,7 +12,7 @@ import QueueActions from './QueueActions'
 import Status from './Status'
 import NextRun from './NextRun'
 import Schedule from './Schedule'
-import QueuedJobTableRow from './QueuedJobTableRow'
+import ExpandableRow from './ExpandableRow'
 
 const QueueTableRow = ({
     queue: {
@@ -70,8 +70,13 @@ const QueueTableRow = ({
                 </TableCell>
             </TableRow>
             {showJobs
-                ? sequence.map((job) => (
-                      <QueuedJobTableRow key={job.id} job={job} />
+                ? sequence.map((job, index) => (
+                      <ExpandableRow
+                          key={job.id}
+                          job={job}
+                          isFirst={index === 0}
+                          isLast={index === sequence.length - 1}
+                      />
                   ))
                 : null}
         </>