Merge branch 'dev' into fix/DHIS2-15000-oug-shortname

cypress/elements/pivotTable.js

@@ -1,6 +1,9 @@
 const valueCellEl = 'visualization-value-cell'
 const headerCellEl = 'visualization-column-header'
 
+export const expectTableToBeVisible = () =>
+    cy.get('.pivot-table-container').should('have.length', 1).and('be.visible')
+
 export const clickTableValueCell = (index) =>
     cy.getBySel(valueCellEl).eq(index).click()
 

cypress/integration/options/totals.cy.js

@@ -0,0 +1,82 @@
+import {
+    AXIS_ID_COLUMNS,
+    AXIS_ID_ROWS,
+    DIMENSION_ID_DATA,
+    DIMENSION_ID_PERIOD,
+    VIS_TYPE_PIVOT_TABLE,
+    visTypeDisplayNames,
+} from '@dhis2/analytics'
+import { checkCheckbox } from '../../elements/common.js'
+import {
+    clickDimensionModalHideButton,
+    clickDimensionModalUpdateButton,
+    expectDimensionModalToBeVisible,
+    selectAllItemsByButton,
+    selectDataElements,
+    selectFixedPeriods,
+    unselectAllItemsByButton,
+} from '../../elements/dimensionModal/index.js'
+import {
+    clickContextMenuAdd,
+    openContextMenu as openDimPanelContextMenu,
+    openDimension,
+} from '../../elements/dimensionsPanel.js'
+import { clickContextMenuMove, openContextMenu } from '../../elements/layout.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
+import {
+    OPTIONS_TAB_DATA,
+    clickOptionsModalHideButton,
+} from '../../elements/optionsModal/index.js'
+import {
+    colTotalsOptionEl,
+    expectColumnsTotalsToBeChecked,
+} from '../../elements/optionsModal/totals.js'
+import { expectTableToBeVisible } from '../../elements/pivotTable.js'
+import { goToStartPage } from '../../elements/startScreen.js'
+import { changeVisType } from '../../elements/visualizationTypeSelector.js'
+import { TEST_CUSTOM_DIMENSIONS } from '../../utils/data.js'
+
+const AREA_DIMENSION = TEST_CUSTOM_DIMENSIONS.find((dim) => dim.name === 'Area')
+
+describe('Options - Column totals', () => {
+    describe('Regression test for DHIS2-17297', () => {
+        it('does not crash', () => {
+            goToStartPage()
+            changeVisType(visTypeDisplayNames[VIS_TYPE_PIVOT_TABLE])
+
+            openOptionsModal(OPTIONS_TAB_DATA)
+            checkCheckbox(colTotalsOptionEl)
+
+            expectColumnsTotalsToBeChecked()
+
+            clickOptionsModalHideButton()
+
+            openContextMenu(DIMENSION_ID_DATA)
+            clickContextMenuMove(DIMENSION_ID_DATA, AXIS_ID_ROWS)
+            openContextMenu(DIMENSION_ID_PERIOD)
+            clickContextMenuMove(DIMENSION_ID_PERIOD, AXIS_ID_COLUMNS)
+
+            openDimension(DIMENSION_ID_DATA)
+            selectDataElements(['ART enrollment stage 1'])
+            clickDimensionModalHideButton()
+
+            const year = new Date().getFullYear().toString()
+            openDimension(DIMENSION_ID_PERIOD)
+            unselectAllItemsByButton()
+            selectFixedPeriods(
+                [`May ${year}`, `June ${year}`, `July ${year}`],
+                'Monthly'
+            )
+            clickDimensionModalHideButton()
+
+            openDimPanelContextMenu(AREA_DIMENSION.id)
+            clickContextMenuAdd(AREA_DIMENSION.id, AXIS_ID_ROWS)
+            expectDimensionModalToBeVisible(AREA_DIMENSION.id)
+            selectAllItemsByButton()
+
+            clickDimensionModalUpdateButton()
+
+            expectTableToBeVisible()
+        })
+    })
+})

src/components/VisualizationPlugin/VisualizationPlugin.js

@@ -43,7 +43,7 @@ export const VisualizationPlugin = ({
     onDrill,
 }) => {
     const engine = useDataEngine()
-    const [visualization, setVisualization] = useState(undefined)
+    const [visualization, setVisualization] = useState(null)
     const [ouLevels, setOuLevels] = useState(undefined)
     const [fetchResult, setFetchResult] = useState(null)
     const [contextualMenuRef, setContextualMenuRef] = useState(undefined)
@@ -173,6 +173,7 @@ export const VisualizationPlugin = ({
 
     useEffect(() => {
         setFetchResult(null)
+        setVisualization(null)
 
         // filter out disabled options
         const disabledOptions = getDisabledOptions({
@@ -186,8 +187,6 @@ export const VisualizationPlugin = ({
             (option) => delete filteredVisualization[option]
         )
 
-        setVisualization(filteredVisualization)
-
         const doFetchAll = async () => {
             const { responses, extraOptions } = await doFetchData(
                 filteredVisualization,
@@ -254,6 +253,7 @@ export const VisualizationPlugin = ({
                 extraOptions,
             })
             setShowLegendKey(filteredVisualization.legend?.showKey)
+
             onLoadingComplete()
         }
 
@@ -264,7 +264,15 @@ export const VisualizationPlugin = ({
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [originalVisualization, filters, forDashboard])
 
-    if (!fetchResult || !ouLevels) {
+    useEffect(() => {
+        if (fetchResult?.visualization && ouLevels) {
+            setVisualization(
+                convertOuLevelsToUids(ouLevels, fetchResult.visualization)
+            )
+        }
+    }, [fetchResult?.visualization, ouLevels])
+
+    if (!fetchResult || !visualization || !ouLevels) {
         return null
     }
 
@@ -406,10 +414,7 @@ export const VisualizationPlugin = ({
         ) {
             return (
                 <PivotPlugin
-                    visualization={convertOuLevelsToUids(
-                        ouLevels,
-                        fetchResult.visualization
-                    )}
+                    visualization={visualization}
                     responses={fetchResult.responses}
                     legendSets={legendSets}
                     onToggleContextualMenu={
@@ -422,10 +427,7 @@ export const VisualizationPlugin = ({
         } else if (fetchResult.visualization.type === VIS_TYPE_OUTLIER_TABLE) {
             return (
                 <OutlierTablePlugin
-                    visualization={convertOuLevelsToUids(
-                        ouLevels,
-                        fetchResult.visualization
-                    )}
+                    visualization={visualization}
                     responses={fetchResult.responses}
                     filters={filters}
                     id={id}
@@ -436,10 +438,7 @@ export const VisualizationPlugin = ({
         } else {
             return (
                 <ChartPlugin
-                    visualization={convertOuLevelsToUids(
-                        ouLevels,
-                        fetchResult.visualization
-                    )}
+                    visualization={visualization}
                     responses={fetchResult.responses}
                     extraOptions={fetchResult.extraOptions}
                     legendSets={legendSets}