fix: dimension chip design updates (DHIS2-16272)

cypress/elements/layout.js

@@ -1,3 +1,5 @@
+import { EXTENDED_TIMEOUT } from '../support/utils.js'
+
 const yoyCategorySelectEl = 'yoy-layout-rows-select'
 const youCategorySelectOptionEl = 'yoy-layout-rows-select-option'
 const chipEl = 'layout-chip'
@@ -6,7 +8,7 @@ const chipMenuRemoveOptionEl = 'layout-chip-menu-dimension-menu-item-remove'
 const chipMenuActionOptionEl = 'layout-chip-menu-dimension-menu-item-action'
 const chipMenuSubMenuOptionEl =
     'layout-chip-menu-dimension-menu-item-DIMENSIONID-menu'
-const chipSelectedBackgroundColor = 'rgb(178, 223, 219)'
+const chipSelectedBackgroundColor = 'rgb(224, 242, 241)'
 
 const getAxisEl = (axisId) => `${axisId}-axis`
 const getDimensionChipEl = (dimensionId) => `${chipEl}-${dimensionId}`
@@ -54,13 +56,14 @@ export const expectDimensionToHaveItemAmount = (
         itemAmount
             ? cy
                   .getBySel(getDimensionChipEl(dimensionId))
-                  .contains(`${itemAmount} selected`)
-                  .should('have.length', 1)
-                  .and('be.visible')
+                  .parent()
+                  .findBySelLike('chip-suffix')
+                  .contains(itemAmount, EXTENDED_TIMEOUT)
             : cy
                   .getBySel(getDimensionChipEl(dimensionId))
-                  .contains(`selected`)
-                  .should('have.length', 0)
+                  .parent()
+                  .findBySelLike('chip-suffix')
+                  .should('not.exist')
     } else {
         throw new Error('dimensionId not provided')
     }
@@ -69,9 +72,9 @@ export const expectDimensionToHaveItemAmount = (
 export const expectDimensionToHaveAllItemsSelected = (dimensionId) =>
     cy
         .getBySel(getDimensionChipEl(dimensionId))
-        .contains(`: All`)
-        .should('have.length', 1)
-        .and('be.visible')
+        .parent()
+        .findBySelLike('chip-suffix')
+        .contains('all', EXTENDED_TIMEOUT)
 
 export const expectDimensionOnAxisToHaveLockIcon = (dimensionId, axisId) =>
     cy

cypress/integration/dimensions/data.cy.js

@@ -301,10 +301,10 @@ describe('Data dimension', () => {
             if (testDataType.endpoint.hasMultiplePages) {
                 // more items are fetched when scrolling down
                 cy.intercept('GET', testDataType.endpoint.requestUrl).as(
-                    'request'
+                    'requestSecondPage'
                 )
                 scrollSourceToBottom()
-                cy.wait('@request').then(({ request, response }) => {
+                cy.wait('@requestSecondPage').then(({ request, response }) => {
                     expect(request.url).to.contain('page=2')
                     expect(response.statusCode).to.eq(200)
                     expect(
@@ -384,13 +384,15 @@ describe('Data dimension', () => {
                     `default sub group: ${testDataType.defaultSubGroup.name}`
                 )
                 cy.intercept('GET', testDataType.endpoint.requestUrl).as(
-                    'request'
+                    'requestDefaultSubGroup'
                 )
                 switchSubGroupTo(testDataType.defaultSubGroup.name)
-                cy.wait('@request').then(({ request, response }) => {
-                    expect(request.url).to.contain('page=1')
-                    expect(response.statusCode).to.eq(200)
-                })
+                cy.wait('@requestDefaultSubGroup').then(
+                    ({ request, response }) => {
+                        expect(request.url).to.contain('page=1')
+                        expect(response.statusCode).to.eq(200)
+                    }
+                )
                 expectSourceToNotBeLoading()
                 expectSubGroupSelectToBe(testDataType.defaultSubGroup.name)
                 expectSelectableDataItemsAmountToBe(

cypress/integration/visTypes/scatter.cy.js

@@ -68,23 +68,26 @@ const TEST_INDICATOR_NAMES = TEST_INDICATORS.slice(1, 4).map(
 )
 const TEST_VIS_NAME = `TEST SCATTER ${new Date().toLocaleString()}`
 
-describe('using a Scatter chart', () => {
-    it('navigates to a new Scatter chart', () => {
+describe('Scatter chart', () => {
+    it('works correctly (create, save, load, swap etc)', () => {
+        cy.log('navigates to a new Scatter chart')
         goToStartPage()
         changeVisType(visTypeDisplayNames[VIS_TYPE_SCATTER])
-    })
-    it("shows an error message when vertical and horizontal isn't selected", () => {
+
+        cy.log(
+            "shows an error message when vertical and horizontal isn't selected"
+        )
         clickMenuBarUpdateButton()
         expectErrorToContainTitle('Vertical is empty')
-    })
-    it('adds a vertical item and shows an error message', () => {
+
+        cy.log('adds a vertical item and shows an error message')
         openDimension(DIMENSION_ID_DATA)
         selectIndicators([TEST_INDICATOR_NAMES[0]])
         clickDimensionModalUpdateButton()
         expectErrorToContainTitle('Horizontal is empty')
         expectVerticalToContainDimensionLabel(TEST_INDICATOR_NAMES[0])
-    })
-    it('adds a horizontal item and displays a chart', () => {
+
+        cy.log('adds a horizontal item and displays a chart')
         openDimension(DIMENSION_ID_DATA)
         switchDataTab('Horizontal')
         selectIndicators([TEST_INDICATOR_NAMES[1]])
@@ -94,40 +97,41 @@ describe('using a Scatter chart', () => {
         //expectStoreCurrentColumnsToHaveLength(1) // FIXME: Store is always in default state
         expectVerticalToContainDimensionLabel(TEST_INDICATOR_NAMES[0])
         expectHorizontalToContainDimensionLabel(TEST_INDICATOR_NAMES[1])
-    })
-    it('selects org unit level Facility', () => {
+
+        cy.log('selects org unit level Facility')
         const TEST_ORG_UNIT_LEVEL = 'Facility'
         openDimension(DIMENSION_ID_ORGUNIT)
         expectOrgUnitDimensionModalToBeVisible()
         deselectUserOrgUnit('User organisation unit')
         expectOrgUnitDimensionToNotBeLoading()
-        // FIXME this selection causes a analytics request that takes too long on test instances
+        // FIXME: this selection causes a analytics request that takes too long on test instances
         //selectOrgUnitTreeItem('Sierra Leone')
         selectOrgUnitTreeItem('Bo')
         selectOrgUnitTreeItem('Bombali')
         toggleOrgUnitLevel(TEST_ORG_UNIT_LEVEL)
         expectOrgUnitDimensionModalToBeVisible()
         clickDimensionModalUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_SCATTER)
-    })
-    it('Data is locked to Vertical', () => {
+
+        cy.log('Data is locked to Vertical')
         expectDimensionOnAxisToHaveLockIcon(DIMENSION_ID_DATA, 'Vertical')
-    })
-    it('Data is locked to Horizontal', () => {
+
+        cy.log('Data is locked to Horizontal')
         expectDimensionOnAxisToHaveLockIcon(DIMENSION_ID_DATA, 'Horizontal')
-    })
-    it('Org units is locked to Points', () => {
+
+        cy.log('Org units is locked to Points')
         expectDimensionOnAxisToHaveLockIcon(DIMENSION_ID_ORGUNIT, AXIS_ID_ROWS)
-    })
-    it('swaps vertical with horizontal', () => {
+
+        cy.log('swaps vertical with horizontal')
         openContextMenu('VERTICAL')
         clickContextMenuSwap('VERTICAL', 'HORIZONTAL')
         clickMenuBarUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_SCATTER)
+        expectAppToNotBeLoading()
         expectVerticalToContainDimensionLabel(TEST_INDICATOR_NAMES[1])
         expectHorizontalToContainDimensionLabel(TEST_INDICATOR_NAMES[0])
-    })
-    it('adds a second item to horizontal and displays warning messages', () => {
+
+        cy.log('adds a second item to horizontal and displays warning messages')
         openDimensionOnAxis(DIMENSION_ID_DATA, 'Horizontal')
         selectIndicators([TEST_INDICATOR_NAMES[2]])
         expectDataDimensionModalWarningToContain(
@@ -139,23 +143,27 @@ describe('using a Scatter chart', () => {
             ).id
         )
         clickDimensionModalUpdateButton()
+        expectVisualizationToBeVisible(VIS_TYPE_SCATTER)
+        expectAppToNotBeLoading()
         expectDimensionOnAxisToHaveWarningIcon(DIMENSION_ID_DATA, 'Horizontal')
-    })
-    it('saves and only displays 1 horizontal item', () => {
+
+        cy.log('saves and only displays 1 horizontal item')
         saveNewAO(TEST_VIS_NAME)
         expectVisualizationToBeVisible(VIS_TYPE_SCATTER)
+        expectAppToNotBeLoading()
         expectVerticalToContainDimensionLabel(TEST_INDICATOR_NAMES[1])
         expectHorizontalToContainDimensionLabel(TEST_INDICATOR_NAMES[0])
-    })
-    it('swaps vertical with horizontal', () => {
+
+        cy.log('swaps vertical with horizontal')
         openContextMenu('HORIZONTAL')
         clickContextMenuSwap('HORIZONTAL', 'VERTICAL')
         clickMenuBarUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_SCATTER)
+        expectAppToNotBeLoading()
         expectVerticalToContainDimensionLabel(TEST_INDICATOR_NAMES[0])
         expectHorizontalToContainDimensionLabel(TEST_INDICATOR_NAMES[1])
-    })
-    it('Options -> Axes -> sets min/max range', () => {
+
+        cy.log('Options -> Axes -> sets min/max range')
         const TEST_AXES = [
             { axis: 'RANGE_0', label: 'Vertical (y) axis', min: 50, max: 150 },
             {
@@ -177,24 +185,24 @@ describe('using a Scatter chart', () => {
         expectWindowConfigYAxisToHaveRangeMaxValue(TEST_AXES[0].max)
         expectWindowConfigXAxisToHaveRangeMinValue(TEST_AXES[1].min)
         expectWindowConfigXAxisToHaveRangeMaxValue(TEST_AXES[1].max)
-    })
-    it('Options -> Outliers -> enables outliers', () => {
+
+        cy.log('Options -> Outliers -> enables outliers')
         openOptionsModal(OPTIONS_TAB_OUTLIERS)
         checkOutliersCheckbox()
         // TODO: Set more outlier options
         clickOptionsModalUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_SCATTER)
         // TODO: Intercept the data returned to simplify / standardise it, then check that the $config has the correct data
-    })
-    it('saves and displays items in the correct places', () => {
+
+        cy.log('saves and displays items in the correct places')
         saveExistingAO()
         expectAppToNotBeLoading()
         expectVisualizationToBeVisible(VIS_TYPE_SCATTER)
         expectVerticalToContainDimensionLabel(TEST_INDICATOR_NAMES[0])
         expectHorizontalToContainDimensionLabel(TEST_INDICATOR_NAMES[1])
-    })
-    // TODO: Open outlier options again and check that everything was saved correctly
-    it('deletes saved scatter AO', () => {
+
+        // TODO: Open outlier options again and check that everything was saved correctly
+        cy.log('deletes saved scatter AO')
         deleteAO()
         expectStartScreenToBeVisible()
         expectRouteToBeEmpty()

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-13T12:11:28.959Z\n"
-"PO-Revision-Date: 2023-11-13T12:11:28.959Z\n"
+"POT-Creation-Date: 2023-12-12T09:39:19.198Z\n"
+"PO-Revision-Date: 2023-12-12T09:39:19.199Z\n"
 
 msgid "All items"
 msgstr "All items"
@@ -153,14 +153,8 @@ msgstr "Download"
 msgid "Hide"
 msgstr "Hide"
 
-msgid "All"
-msgstr "All"
-
-msgid "{{total}} of {{axisMaxNumberOfItems}} selected"
-msgstr "{{total}} of {{axisMaxNumberOfItems}} selected"
-
-msgid "{{total}} selected"
-msgstr "{{total}} selected"
+msgid "all"
+msgstr "all"
 
 msgid "{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}"
 msgstr "{{dimensionName}} is locked to {{axisName}} for {{visTypeName}}"
@@ -459,6 +453,9 @@ msgstr "After last"
 msgid "Before first and after last"
 msgstr "Before first and after last"
 
+msgid "All"
+msgstr "All"
+
 msgid "Hide empty rows"
 msgstr "Hide empty rows"
 

src/components/DimensionsPanel/styles/DndDimensionList.module.css

@@ -19,6 +19,9 @@
 .list {
     margin: 0;
     padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 }
 
 .header {

src/components/IconButton/styles/IconButton.module.css

@@ -9,10 +9,10 @@
     cursor: pointer;
     padding: 0;
     vertical-align: middle;
-    border-radius: 2px;
-    width: 22px;
-    height: 22px;
-    margin: '0px 0px 0px 2px';
+    border-radius: 0;
+    width: 20px;
+    height: 20px;
+    margin: 0px 0px 0px 2px;
     color: var(--colors-grey700);
 }
 
@@ -21,6 +21,6 @@
 }
 
 .iconButton:hover {
-    background-color: rgba(0, 0, 0, 0.12);
+    background-color: rgba(0, 0, 0, 0.09);
     color: var(--colors-grey900);
 }