{tables.map((table) => (
diff --git a/src/data-workspace/display/display.test.js b/src/data-workspace/display/display.test.js
index 916b917c..1c8e60d4 100644
--- a/src/data-workspace/display/display.test.js
+++ b/src/data-workspace/display/display.test.js
@@ -23,12 +23,6 @@ describe('
', () => {
periodType: 'Monthly',
}
- const dataSetThree = {
- displayName: 'Another',
- id: 'custom',
- periodType: 'Monthly',
- }
-
it('asks the user to select a data set if none is selected', () => {
render(
@@ -223,64 +217,163 @@ describe('', () => {
).toBeInTheDocument()
})
- it('renders one table per data set in the report', async () => {
- const data = {
- dataSetReport: [
- {
- title: 'Data set 1',
- headers: [{ name: 'Header 1' }, { name: 'Header 2' }],
- rows: [],
- },
- {
- title: 'Data set 2',
- headers: [{ name: 'Header 1' }, { name: 'Header 2' }],
- rows: [],
- },
- {
- title: 'Data set 3',
- headers: [{ name: 'Header 1' }, { name: 'Header 2' }],
- rows: [],
- },
- ],
- }
- render(
-
-
-
-
-
- )
+ describe('display for custom datasets', () => {
+ it('renders a table for a custom dataset with safely sanitised HTML and CSS', async () => {
+ const data = {
+ dataSetReport: [
+ {
+ title: 'Custom Data set',
+ headers: [
+ {
+ name: '2024/25',
+ column: '2024/25',
+ type: 'java.lang.String',
+ hidden: false,
+ meta: false,
+ },
+ {
+ name: 'NATIONAL DEPARTMENT OF HEALTH',
+ column: 'NATIONAL DEPARTMENT OF HEALTH',
+ type: 'java.lang.String',
+ hidden: false,
+ meta: false,
+ },
+ ],
+ rows: [
+ [
+ 'Programme 6: Performance Indicator',
+ ],
+ ],
+ },
+ ],
+ }
+ render(
+
+
+
+
+
+ )
- await waitForElementToBeRemoved(() => screen.getByRole('progressbar'))
+ await waitForElementToBeRemoved(() =>
+ screen.getByRole('progressbar')
+ )
- expect(await screen.findAllByRole('table')).toHaveLength(3)
- expect(
- await screen.queryByText(
- /This data set does not use a default form. The data is displayed as a simple grid below, but this might not be a suitable representation..*/
+ expect(screen.getByText('2024/25')).toHaveStyle({
+ color: 'rgb(0, 176, 80)',
+ })
+ expect(screen.getByText('2024/25').parentElement.tagName).toBe('B')
+
+ expect(
+ screen.getByText('NATIONAL DEPARTMENT OF HEALTH')
+ ).toHaveStyle({
+ color: 'black',
+ })
+
+ expect(
+ screen.getByText('Programme 6: Performance Indicator')
+ ).toHaveStyle({
+ color: 'black',
+ })
+ })
+
+ it('renders HTML and CSS encoded for non-custom dataset', async () => {
+ const data = {
+ dataSetReport: [
+ {
+ title: 'Custom Data set',
+ headers: [
+ {
+ name: 'NATIONAL DEPARTMENT OF HEALTH',
+ column: 'NATIONAL DEPARTMENT OF HEALTH',
+ type: 'java.lang.String',
+ hidden: false,
+ meta: false,
+ },
+ ],
+ rows: [
+ [
+ 'Programme 6: Performance Indicator',
+ ],
+ ],
+ },
+ ],
+ }
+ render(
+
+
+
+
+
+ )
+
+ await waitForElementToBeRemoved(() =>
+ screen.getByRole('progressbar')
)
- ).not.toBeInTheDocument()
+
+ expect(screen.getByRole('table')).toContainHTML(
+ '<span style="color:black">Programme 6: Performance Indicator</span>'
+ )
+ })
})
})
diff --git a/src/data-workspace/display/table-custom-data-set.js b/src/data-workspace/display/table-custom-data-set.js
new file mode 100644
index 00000000..212de439
--- /dev/null
+++ b/src/data-workspace/display/table-custom-data-set.js
@@ -0,0 +1,104 @@
+import {
+ DataTable,
+ TableHead,
+ DataTableRow,
+ DataTableColumnHeader,
+ TableBody,
+ DataTableCell,
+} from '@dhis2/ui'
+import DOMPurify from 'dompurify'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './table.module.css'
+
+// Needs to have the same width as the table, so can't use the one from
+// @dhis2/ui
+const DataTableToolbar = ({ children, columns }) => (
+
+ |
+ {children}
+ |
+
+)
+
+DataTableToolbar.propTypes = {
+ children: PropTypes.any.isRequired,
+ columns: PropTypes.number.isRequired,
+}
+
+const TableCustomDataSet = ({ title, columns, rows }) => (
+ <>
+
+
+
+ {title}
+
+
+
+
+
+
+ {columns.slice(1).map((column) => {
+ return (
+
+
+
+ )
+ })}
+
+
+
+ {rows.map((row, index) => {
+ const [firstCell, ...cells] = row
+
+ return (
+
+
+
+
+
+ {cells.map((value, index) => (
+
+
+
+ ))}
+
+ )
+ })}
+
+
+
+)
+
+TableCustomDataSet.propTypes = {
+ columns: PropTypes.array.isRequired,
+ rows: PropTypes.array.isRequired,
+ title: PropTypes.string.isRequired,
+}
+
+export { TableCustomDataSet }
diff --git a/yarn.lock b/yarn.lock
index d8f745c3..9bb40653 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7819,6 +7819,11 @@ domhandler@^4.0.0, domhandler@^4.2.0:
dependencies:
domelementtype "^2.2.0"
+dompurify@^3.1.6:
+ version "3.1.6"
+ resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
+ integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
+
domutils@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"