feat(data-workspace): show notification for non-default form types (#65)

* feat(data-workspace): show notification for non-default form types * fix(data-workspace): use more idiomatic assertions in tests Co-authored-by: Médi-Rémi Hashim <4295266+mediremi@users.noreply.github.com> * chore: update fixtures and pot file * chore: use 2 containers for cypress on ci since we only have 2 features Co-authored-by: Médi-Rémi Hashim <4295266+mediremi@users.noreply.github.com>
dhis2 · Aug 25, 2021 · a50ba16 · a50ba16
1 parent f3154d0
commit a50ba16
Show file tree

Hide file tree

Showing 10 changed files with 381 additions and 438 deletions.
diff --git a/.github/workflows/dhis2-verify-app.yml b/.github/workflows/dhis2-verify-app.yml
@@ -80,7 +80,7 @@ jobs:
         strategy:
             fail-fast: false
             matrix:
-                containers: [1, 2, 3, 4]
+                containers: [1, 2]
 
         steps:
             - name: Checkout

diff --git a/cypress/fixtures/network/37/static_resources.json b/cypress/fixtures/network/37/static_resources.json
diff --git a/cypress/fixtures/network/37/summary.json b/cypress/fixtures/network/37/summary.json
@@ -1,7 +1,7 @@
 {
-    "count": 281,
-    "totalResponseSize": 104876,
-    "duplicates": 190,
+    "count": 263,
+    "totalResponseSize": 102747,
+    "duplicates": 177,
     "nonDeterministicResponses": 11,
     "apiVersion": 37,
     "fixtureFiles": [

diff --git a/cypress/fixtures/network/37/users_can_approve,_accept,_unapprove,_and_unaccept_data.json b/cypress/fixtures/network/37/users_can_approve,_accept,_unapprove,_and_unaccept_data.json
diff --git a/...res/network/37/users_can_view_data_set_reports_for_data_sets_connected_to_a_workflow.json b/...res/network/37/users_can_view_data_set_reports_for_data_sets_connected_to_a_workflow.json
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: 2021-08-25T07:18:46.070Z\n"
-"PO-Revision-Date: 2021-08-25T07:18:46.070Z\n"
+"POT-Creation-Date: 2021-08-25T13:54:16.194Z\n"
+"PO-Revision-Date: 2021-08-25T13:54:16.194Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -100,6 +100,23 @@ msgstr "Retry loading data set"
 msgid "This data set doesn't have any data for {{- period}} in {{- orgUnit}}."
 msgstr "This data set doesn't have any data for {{- period}} in {{- orgUnit}}."
 
+msgid "This data set may not display properly"
+msgstr "This data set may not display properly"
+
+msgid ""
+"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."
+msgstr ""
+"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."
+
+msgid ""
+"Displaying data from data sets using custom forms is currently not "
+"supported in this app. Please refer to the legacy app instead."
+msgstr ""
+"Displaying data from data sets using custom forms is currently not "
+"supported in this app. Please refer to the legacy app instead."
+
 msgid "1 data set"
 msgstr "1 data set"
 

diff --git a/src/app-context/app-provider.js b/src/app-context/app-provider.js
@@ -23,7 +23,7 @@ const query = {
                 'displayName',
                 'dataApprovalLevels',
                 'periodType',
-                'dataSets[id,displayName,periodType]',
+                'dataSets[id,displayName,periodType,formType]',
             ],
         },
     },

diff --git a/src/data-workspace/display/display.js b/src/data-workspace/display/display.js
@@ -25,6 +25,7 @@ const Display = ({ dataSetId }) => {
     const { orgUnit, workflow, period } = selection
     const { dataSets } = workflow
     const selectedDataSet = dataSets.find(({ id }) => id === dataSetId)
+    const usesNonDefaultFormType = selectedDataSet?.formType !== 'DEFAULT'
     const periodIds = selectedDataSet
         ? getFixedPeriodsForTypeAndDateRange(
               selectedDataSet.periodType,
@@ -125,6 +126,24 @@ const Display = ({ dataSetId }) => {
 
     return (
         <div className={styles.display}>
+            {usesNonDefaultFormType && (
+                <NoticeBox
+                    warning
+                    title={i18n.t('This data set may not display properly')}
+                    className={styles.nonDefaultFormWarning}
+                >
+                    <p>
+                        {i18n.t(
+                            '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.'
+                        )}
+                        <br />
+                        {/* TODO: Add link to legacy app once available */}
+                        {i18n.t(
+                            'Displaying data from data sets using custom forms is currently not supported in this app. Please refer to the legacy app instead.'
+                        )}
+                    </p>
+                </NoticeBox>
+            )}
             {tables.map(table => (
                 <Table
                     key={table.title}

diff --git a/src/data-workspace/display/display.module.css b/src/data-workspace/display/display.module.css
@@ -49,3 +49,6 @@
     cursor: pointer;
     text-decoration: underline;
 }
+.nonDefaultFormWarning {
+    margin-bottom: var(--spacers-dp12);
+}
diff --git a/src/data-workspace/display/display.test.js b/src/data-workspace/display/display.test.js
@@ -15,12 +15,21 @@ describe('<Display>', () => {
         displayName: 'Mortality < 5 years',
         id: 'pBOMPrpg1QX',
         periodType: 'Monthly',
+        formType: 'DEFAULT',
     }
 
     const dataSetTwo = {
         displayName: 'Mortality > 4 years',
         id: 'pBOMPrpg1QZ',
         periodType: 'Monthly',
+        formType: 'DEFAULT',
+    }
+
+    const dataSetThree = {
+        displayName: 'I have a custom formType',
+        id: 'custom',
+        periodType: 'Monthly',
+        formType: 'HTML',
     }
 
     it('asks the user to select a data set if none is selected', () => {
@@ -271,5 +280,70 @@ describe('<Display>', () => {
         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..*/
+            )
+        ).not.toBeInTheDocument()
+    })
+    it('renders a notification above the tables if the selected dataset does not use a default form type', 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(
+            <CustomDataProvider data={data}>
+                <SelectionContext.Provider
+                    value={{
+                        orgUnit: {
+                            id: 'ou-2',
+                            path: '/ou-2',
+                            displayName: 'Org unit 2',
+                        },
+                        period: {
+                            displayName: 'January 2021',
+                            startDate: '2021-01-01',
+                            endDate: '2021-01-31',
+                            year: 2021,
+                            iso: '202101',
+                            id: '202101',
+                        },
+                        workflow: {
+                            dataSets: [dataSetOne, dataSetTwo, dataSetThree],
+                            dataApprovalLevels: [],
+                            displayName: 'Workflow 1',
+                            periodType: 'Monthly',
+                            id: 'foo',
+                        },
+                    }}
+                >
+                    <Display dataSetId={dataSetThree.id} />
+                </SelectionContext.Provider>
+            </CustomDataProvider>
+        )
+
+        await waitForElementToBeRemoved(() => screen.getByRole('progressbar'))
+
+        expect(await screen.findAllByRole('table')).toHaveLength(3)
+        expect(
+            await screen.getByText(
+                /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..*/
+            )
+        ).toBeInTheDocument()
     })
 })