fix: sorting of layers by drag and drop was not working [DHIS2-16024] (…

…#3021)

Fixes https://dhis2.atlassian.net/browse/DHIS2-16024

cypress/elements/layer.js

@@ -28,6 +28,15 @@ export class Layer {
         return this
     }
 
+    selectOuLevel(level) {
+        cy.getByDataTest('org-unit-level-select').click()
+
+        cy.contains(level).click()
+        cy.get('body').click() // Close the modal menu
+
+        return this
+    }
+
     typeStartDate(dateString) {
         cy.get('label')
             .contains('Start date')

cypress/integration/layers/multilayers.cy.js

@@ -0,0 +1,59 @@
+import { getMaps } from '../../elements/map_canvas.js'
+import { OrgUnitLayer } from '../../elements/orgunit_layer.js'
+import { ThematicLayer } from '../../elements/thematic_layer.js'
+
+const INDICATOR_NAME = 'ANC 1 Coverage'
+
+describe('Multiple Layers', () => {
+    beforeEach(() => {
+        cy.visit('/')
+    })
+
+    const TLayer = new ThematicLayer()
+    const OULayer = new OrgUnitLayer()
+
+    it('adds a thematic layer and an orgunit layer', () => {
+        TLayer.openDialog('Thematic')
+            .selectIndicatorGroup('ANC')
+            .selectIndicator(INDICATOR_NAME)
+            .selectTab('Period')
+            .selectPeriodType('Yearly')
+            .selectTab('Org Units')
+            .selectOu('Sierra Leone')
+            .selectOuLevel('District')
+            .addToMap()
+
+        TLayer.validateDialogClosed(true)
+
+        TLayer.validateCardTitle(INDICATOR_NAME)
+
+        getMaps().should('have.length', 1)
+
+        OULayer.openDialog('Org units')
+            .selectOu('Sierra Leone')
+            .selectOuLevel('District')
+            .addToMap()
+
+        OULayer.validateDialogClosed(true)
+
+        OULayer.validateCardTitle('Organisation units')
+        OULayer.validateCardItems(['District'])
+
+        cy.getByDataTest('sortable-layers-list')
+            .children()
+            .should('have.length', 2)
+
+        // confirm the order of the cards
+        cy.getByDataTest('sortable-layers-list')
+            .children()
+            .first()
+            .should('contain', 'Organisation units')
+
+        cy.getByDataTest('sortable-layers-list')
+            .children()
+            .last()
+            .should('contain', INDICATOR_NAME)
+
+        // TODO - add a test for drag/drop reordering of the layers
+    })
+})

cypress/plugins/excludeByVersionTags.js

@@ -34,7 +34,7 @@ const getExcludedTags = (v) => {
 
     if (currentInstanceVersion < MIN_DHIS2_VERSION) {
         throw new Error(
-            'Instance version is lower than the minimum supported version'
+            `Instance version ${v} is lower than the minimum supported version ${MIN_DHIS2_VERSION}`
         )
     }
 

src/components/layers/LayerCard.js

@@ -21,6 +21,7 @@ const LayerCard = ({
         className={cx(styles.card, {
             [styles.expanded]: isExpanded,
         })}
+        data-test={`card-${title.replace(/ /g, '')}`}
     >
         <Card dataTest={isOverlay ? 'layercard' : 'basemapcard'}>
             <div className={styles.cardHeader}>

src/components/layers/LayersPanel.js

@@ -12,7 +12,7 @@ const SortableLayer = SortableElement(OverlayCard)
 
 // Draggable layers - last layer on top
 const SortableLayersList = SortableContainer(({ layers }) => (
-    <div>
+    <div data-test="sortable-layers-list">
         {layers.map((layer, index) => (
             <SortableLayer key={layer.id} index={index} layer={layer} />
         ))}
@@ -25,7 +25,8 @@ const LayersPanel = () => {
 
     const dispatch = useDispatch()
 
-    const onSort = () => dispatch(sortLayers())
+    const onSort = ({ oldIndex, newIndex }) =>
+        dispatch(sortLayers({ oldIndex, newIndex }))
 
     return (
         <div