Merge branch 'master' into feat/tracked-entity-input

dhis2 · Dec 1, 2023 · 52b83a0 · 52b83a0
2 parents 69d20b8 + 0110907
commit 52b83a0
Show file tree

Hide file tree

Showing 12 changed files with 221 additions and 70 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -20,7 +20,7 @@ _text_
 
 -   [ ] Cypress tests
 -   [ ] Update docs
--   [ ] KFMT
+-   [ ] Manual testing
 -   [ ] _task_
 
 ---

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## [100.11.1](https://github.com/dhis2/line-listing-app/compare/v100.11.0...v100.11.1) (2023-11-30)
+
+
+### Bug Fixes
+
+* visualization deleted when saving it after copy (DHIS2-15722) ([#433](https://github.com/dhis2/line-listing-app/issues/433)) ([f505c50](https://github.com/dhis2/line-listing-app/commit/f505c500d77577d4f7c747dad6599735c8f8578d))
+
+# [100.11.0](https://github.com/dhis2/line-listing-app/compare/v100.10.6...v100.11.0) (2023-11-30)
+
+
+### Features
+
+* distinguish non-existent repetitions from empty values in line lists (DHIS2-15767) ([#427](https://github.com/dhis2/line-listing-app/issues/427)) ([675118d](https://github.com/dhis2/line-listing-app/commit/675118de9f14730f18cee1a0faa5313c7dba067d))
+
 ## [100.10.6](https://github.com/dhis2/line-listing-app/compare/v100.10.5...v100.10.6) (2023-11-27)
 
 

diff --git a/cypress/helpers/fileMenu.js b/cypress/helpers/fileMenu.js
@@ -10,6 +10,12 @@ export const ITEM_SHARING = 'file-menu-sharing'
 export const ITEM_GETLINK = 'file-menu-getlink'
 export const ITEM_DELETE = 'file-menu-delete'
 
+export const resaveVisualization = () => {
+    cy.getBySel('dhis2-analytics-hovermenubar').contains('File').click()
+
+    cy.getBySel(ITEM_SAVE).click()
+}
+
 export const saveVisualization = (name) => {
     cy.getBySel('dhis2-analytics-hovermenubar').contains('File').click()
 

diff --git a/cypress/integration/repeatedEvents.cy.js b/cypress/integration/repeatedEvents.cy.js
@@ -20,7 +20,9 @@ import {
     getTableHeaderCells,
     expectTableToBeVisible,
     getTableDataCells,
+    getTableRows,
 } from '../helpers/table.js'
+import { EXTENDED_TIMEOUT } from '../support/util.js'
 
 const getRepeatedEventsTab = () =>
     cy.getBySel('conditions-modal-content').contains('Repeated events')
@@ -230,4 +232,41 @@ describe('repeated events', () => {
 
         getRepeatedEventsTab().should('not.have.class', 'disabled')
     })
+    it('undefined values display properly for a repeated event', () => {
+        const TEST_CELL = {
+            row: 6,
+            column: 3,
+        }
+        goToAO('WrIV7ZoYECj')
+
+        cy.getBySel('titlebar', EXTENDED_TIMEOUT)
+            .should('be.visible')
+            .and('contain', 'E2E: Enrollment - Hemoglobin (repeated)')
+
+        getTableRows()
+            .eq(TEST_CELL.row)
+            .find('td')
+            .eq(TEST_CELL.column)
+            .invoke('text')
+            .invoke('trim')
+            .should('equal', '')
+
+        getTableRows()
+            .eq(TEST_CELL.row)
+            .find('td')
+            .eq(TEST_CELL.column)
+            .should(($td) => {
+                const className = $td[0].className
+
+                expect(className).to.match(/Visualization_undefinedCell*/)
+            })
+
+        getTableRows()
+            .eq(TEST_CELL.row)
+            .find('td')
+            .eq(TEST_CELL.column)
+            .trigger('mouseover')
+
+        cy.getBySelLike('tooltip-content').contains('No event')
+    })
 })
diff --git a/cypress/integration/save.cy.js b/cypress/integration/save.cy.js
@@ -1,16 +1,25 @@
-import { DIMENSION_ID_EVENT_DATE } from '../../src/modules/dimensionConstants.js'
-import { E2E_PROGRAM, TEST_FIX_PE_DEC_LAST_YEAR } from '../data/index.js'
+import {
+    DIMENSION_ID_ENROLLMENT_DATE,
+    DIMENSION_ID_EVENT_DATE,
+} from '../../src/modules/dimensionConstants.js'
+import {
+    E2E_PROGRAM,
+    TEST_FIX_PE_DEC_LAST_YEAR,
+    TEST_REL_PE_LAST_YEAR,
+} from '../data/index.js'
+import { goToAO } from '../helpers/common.js'
 import {
     openProgramDimensionsSidebar,
     selectEventWithProgram,
 } from '../helpers/dimensions.js'
 import {
     deleteVisualization,
+    resaveVisualization,
     saveVisualization,
     saveVisualizationAs,
 } from '../helpers/fileMenu.js'
 import { clickMenubarUpdateButton } from '../helpers/menubar.js'
-import { selectFixedPeriod } from '../helpers/period.js'
+import { selectFixedPeriod, selectRelativePeriod } from '../helpers/period.js'
 import { goToStartPage } from '../helpers/startScreen.js'
 import {
     expectAOTitleToContain,
@@ -90,4 +99,36 @@ describe('save', () => {
 
         deleteVisualization()
     })
+
+    it('"save" a copied AO created by others works after editing', () => {
+        const AO_NAME = 'E2E: Enrollment - Percentage'
+        const COPIED_AO_NAME = `${AO_NAME} - copied ${new Date().toLocaleString()}`
+
+        // opens an AO created by others
+        goToAO('MKwZRjXiyAJ')
+        expectAOTitleToContain(AO_NAME)
+
+        // saves AO using "Save As"
+        saveVisualizationAs(COPIED_AO_NAME)
+        expectAOTitleToContain(COPIED_AO_NAME)
+        expectTableToBeVisible()
+
+        // edits the AO
+        openProgramDimensionsSidebar()
+        selectRelativePeriod({
+            label: event[DIMENSION_ID_ENROLLMENT_DATE],
+            period: TEST_REL_PE_LAST_YEAR,
+        })
+        clickMenubarUpdateButton()
+
+        expectTableToBeVisible()
+
+        // saves AO using "Save"
+        resaveVisualization()
+        expectAOTitleToContain(COPIED_AO_NAME)
+        expectTableToBeVisible()
+
+        // deletes AO
+        deleteVisualization()
+    })
 })
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-11-27T12:33:11.369Z\n"
-"PO-Revision-Date: 2023-11-27T12:33:11.369Z\n"
+"POT-Creation-Date: 2023-11-29T10:50:15.561Z\n"
+"PO-Revision-Date: 2023-11-29T10:50:15.561Z\n"
 
 msgid "Add to {{axisName}}"
 msgstr "Add to {{axisName}}"
@@ -426,6 +426,9 @@ msgstr ""
 msgid "Sort by {{column}}"
 msgstr "Sort by {{column}}"
 
+msgid "No event"
+msgstr "No event"
+
 msgid "Rows per page"
 msgstr "Rows per page"
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "line-listing-app",
-    "version": "100.10.6",
+    "version": "100.11.1",
     "description": "DHIS2 Line Listing",
     "license": "BSD-3-Clause",
     "private": true,

diff --git a/src/components/App.js b/src/components/App.js
@@ -74,7 +74,7 @@ const visualizationQuery = {
                 'filters[dimension,dimensionType,filter,program[id],programStage[id],optionSet[id],valueType,legendSet[id],repetition,items[dimensionItem~rename(id)]]',
                 `program[id,programType,${nameProp}~rename(name),displayEnrollmentDateLabel,displayIncidentDateLabel,displayIncidentDate,programStages[id,displayName~rename(name),repeatable]]`,
                 'programStage[id,displayName~rename(name),displayExecutionDateLabel,displayDueDateLabel,hideDueDate,repeatable]',
-                'access,user[displayName,userCredentials[username]]',
+                'access',
                 'href',
                 ...getDimensionMetadataFields(),
                 'dataElementDimensions[legendSet[id,name],dataElement[id,name]]',
@@ -102,6 +102,7 @@ const visualizationQuery = {
                 '!periods',
                 '!organisationUnitLevels',
                 '!organisationUnits',
+                '!user',
             ],
         }),
     },

diff --git a/src/components/Toolbar/MenuBar.js b/src/components/Toolbar/MenuBar.js
@@ -3,6 +3,7 @@ import {
     getDisplayNameByVisType,
     useCachedDataQuery,
     FileMenu,
+    preparePayloadForSaveAs,
     HoverMenuBar,
 } from '@dhis2/analytics'
 import { useAlert, useDataMutation } from '@dhis2/app-runtime'
@@ -165,9 +166,9 @@ export const MenuBar = ({ onFileMenuAction }) => {
         }
 
         if (copy) {
-            delete visualization.id
-
-            postVisualization({ visualization })
+            postVisualization({
+                visualization: preparePayloadForSaveAs(visualization),
+            })
         } else {
             putVisualization({ visualization })
         }

diff --git a/src/components/Visualization/Visualization.js b/src/components/Visualization/Visualization.js
@@ -59,6 +59,7 @@ import {
 } from '../../modules/visualization.js'
 import styles from './styles/Visualization.module.css'
 import {
+    cellIsUndefined,
     getAdaptedVisualization,
     useAnalyticsData,
 } from './useAnalyticsData.js'
@@ -366,6 +367,50 @@ export const Visualization = ({
         </div>
     )
 
+    const renderCellContent = ({ columnIndex, value, isUndefined, props }) => (
+        <DataTableCell
+            {...props}
+            key={columnIndex}
+            className={cx(
+                styles.cell,
+                fontSizeClass,
+                sizeClass,
+                {
+                    [styles.emptyCell]: !value,
+                    [styles.nowrap]: cellValueShouldNotWrap(
+                        data.headers[columnIndex]
+                    ),
+                    [styles.undefinedCell]: isUndefined,
+                },
+                'bordered'
+            )}
+            backgroundColor={
+                visualization.legend?.style === LEGEND_DISPLAY_STYLE_FILL
+                    ? getColorByValueFromLegendSet(
+                          data.headers[columnIndex].legendSet,
+                          value
+                      )
+                    : undefined
+            }
+            dataTest={'table-cell'}
+        >
+            <div
+                style={
+                    visualization.legend?.style === LEGEND_DISPLAY_STYLE_TEXT
+                        ? {
+                              color: getColorByValueFromLegendSet(
+                                  data.headers[columnIndex].legendSet,
+                                  value
+                              ),
+                          }
+                        : {}
+                }
+            >
+                {formatCellValue(value, data.headers[columnIndex])}
+            </div>
+        </DataTableCell>
+    )
+
     return (
         <div className={styles.pluginContainer} ref={containerCallbackRef}>
             <div
@@ -459,62 +504,36 @@ export const Visualization = ({
                         </DataTableHead>
                         {/* https://jira.dhis2.org/browse/LIBS-278 */}
                         <DataTableBody dataTest={'table-body'}>
-                            {data.rows.map((row, index) => (
+                            {data.rows.map((row, rowIndex) => (
                                 <DataTableRow
-                                    key={index}
+                                    key={rowIndex}
                                     dataTest={'table-row'}
                                 >
-                                    {row.map((value, index) => (
-                                        <DataTableCell
-                                            key={index}
-                                            className={cx(
-                                                styles.cell,
-                                                fontSizeClass,
-                                                sizeClass,
-                                                {
-                                                    [styles.emptyCell]: !value,
-                                                    [styles.nowrap]:
-                                                        cellValueShouldNotWrap(
-                                                            data.headers[index]
-                                                        ),
-                                                },
-                                                'bordered'
-                                            )}
-                                            backgroundColor={
-                                                visualization.legend?.style ===
-                                                LEGEND_DISPLAY_STYLE_FILL
-                                                    ? getColorByValueFromLegendSet(
-                                                          data.headers[index]
-                                                              .legendSet,
-                                                          value
-                                                      )
-                                                    : undefined
-                                            }
-                                            dataTest={'table-cell'}
-                                        >
-                                            <div
-                                                style={
-                                                    visualization.legend
-                                                        ?.style ===
-                                                    LEGEND_DISPLAY_STYLE_TEXT
-                                                        ? {
-                                                              color: getColorByValueFromLegendSet(
-                                                                  data.headers[
-                                                                      index
-                                                                  ].legendSet,
-                                                                  value
-                                                              ),
-                                                          }
-                                                        : {}
-                                                }
+                                    {row.map((value, columnIndex) =>
+                                        cellIsUndefined(
+                                            data.rowContext,
+                                            rowIndex,
+                                            columnIndex
+                                        ) ? (
+                                            <Tooltip
+                                                content={i18n.t('No event')}
                                             >
-                                                {formatCellValue(
-                                                    value,
-                                                    data.headers[index]
-                                                )}
-                                            </div>
-                                        </DataTableCell>
-                                    ))}
+                                                {(props) =>
+                                                    renderCellContent({
+                                                        columnIndex,
+                                                        value,
+                                                        isUndefined: true,
+                                                        props,
+                                                    })
+                                                }
+                                            </Tooltip>
+                                        ) : (
+                                            renderCellContent({
+                                                columnIndex,
+                                                value,
+                                            })
+                                        )
+                                    )}
                                 </DataTableRow>
                             ))}
                         </DataTableBody>

diff --git a/src/components/Visualization/styles/Visualization.module.css b/src/components/Visualization/styles/Visualization.module.css
@@ -132,6 +132,17 @@
     white-space: nowrap;
 }
 
+.dataTable .undefinedCell {
+    background-image: repeating-linear-gradient(
+        45deg,
+        var(--colors-grey300) 0,
+        var(--colors-grey300) 0.8px,
+        transparent 0,
+        transparent 50%
+    );
+    background-size: 8px 8px;
+}
+
 /* Sizes for the table footer */
 .dataTable .stickyNavigation.sizeComfortable {
     padding: 14px 12px;