feat: display type and definitions for data items in data selector (D…

…HIS2-14774) (#3274) * chore: update analytics to latest build for testing * chore: use analytics build for testing * chore: use latest test build of analytics * chore: use latest test build of analytics * chore: update app-runtime to 3.11.3 This is needed for POST requests to the program indicator expression description endpoint to work correctly. * chore: use latest analytics build for testing * fix: use fluid on Modal to maximise space use * chore: use latest analytics build for testing * test: update snapshot after changing Modal prop * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: update ui dep and remove resolution * chore: use latest analytics build for testing * chore: use latest analytics build for testing * fix: pass currentUser to DataDimension Needed for accessing user authorities. * chore: use latest analytics build for testing * Revert "fix: pass currentUser to DataDimension" This reverts commit e1a1927. * test: update snapshots * docs: add section about the data item info panel Updated screenshots. * chore: run prettier * test(Cypress): add command for closing poppers * test(Cypress): add tests for data info popper * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: use latest analytics build for testing * chore: bump ui to v10 * chore: update analytics dependency
dhis2 · Jan 9, 2025 · f44897a · f44897a
1 parent 03083b0
commit f44897a
Show file tree

Hide file tree

Showing 11 changed files with 571 additions and 564 deletions.
diff --git a/cypress/elements/dimensionModal/dataDimension.js b/cypress/elements/dimensionModal/dataDimension.js
@@ -7,6 +7,8 @@ import {
 } from './index.js'
 
 const optionContentEl = 'data-dimension-transfer-option-content'
+const optionInfoButtonEl = 'data-dimension-transfer-option-info-button'
+const optionInfoTableEl = 'data-dimension-info-table'
 const selectableItemsEl = 'data-dimension-transfer-sourceoptions'
 const selectedItemsEl = 'data-dimension-transfer-pickedoptions'
 const dataTypesSelectButtonEl =
@@ -46,6 +48,19 @@ export const expectNoDataItemsToBeSelected = () =>
 export const expectDataDimensionModalWarningToContain = (text) =>
     cy.getBySel(rightHeaderEl).should('contain', text)
 
+export const expectDataItemToShowDataType = (id, type) =>
+    cy
+        .get(`[data-value="${id}"]`)
+        .findBySel(optionContentEl)
+        .find('.type')
+        .should('contain', type)
+
+export const expectDataItemToShowInfoTable = (id) => {
+    cy.get(`[data-value="${id}"]`).findBySel(optionInfoButtonEl).click()
+    cy.getBySel(optionInfoTableEl).contains('Name')
+    cy.getBySel(optionInfoTableEl).closePopper()
+}
+
 export const expectDataItemToBeInactive = (id) =>
     cy
         .get(`[data-value="${id}"]`)

diff --git a/cypress/elements/dimensionModal/index.js b/cypress/elements/dimensionModal/index.js
@@ -112,6 +112,8 @@ export {
     switchDataTab,
     expectDataDimensionModalWarningToContain,
     expectDataItemToBeInactive,
+    expectDataItemToShowDataType,
+    expectDataItemToShowInfoTable,
     expectDataDimensionModalToBeVisible,
     expectDataTypeToBe,
     expectDataTypeSelectHelpToContain,

diff --git a/cypress/integration/dimensions/data.cy.js b/cypress/integration/dimensions/data.cy.js
@@ -35,6 +35,8 @@ import {
     unselectAllItemsByButton,
     selectAllItemsByButton,
     expectDataItemsToBeInSource,
+    expectDataItemToShowDataType,
+    expectDataItemToShowInfoTable,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
 import { goToStartPage } from '../../elements/startScreen.js'
@@ -209,7 +211,7 @@ describe('Data dimension', () => {
         {
             name: 'Indicators',
             testGroup: { name: 'Facility infrastructure', itemAmount: 3 },
-            testItem: { name: TEST_INDICATORS[2].name },
+            testItem: { ...TEST_INDICATORS[2], type: 'Indicator' },
             defaultGroup: { name: 'All groups' },
             endpoint: {
                 hasMultiplePages: true,
@@ -229,7 +231,10 @@ describe('Data dimension', () => {
                     responseBody: 'dataElementOperands',
                 },
             },
-            testItem: { name: TEST_DATA_ELEMENTS[2].name },
+            testItem: {
+                ...TEST_DATA_ELEMENTS[2],
+                type: 'Data element',
+            },
             defaultGroup: { name: 'All groups' },
             defaultSubGroup: { name: 'Totals only' },
             endpoint: {
@@ -242,7 +247,7 @@ describe('Data dimension', () => {
             name: 'Data sets',
             testGroup: { name: 'Child Health', itemAmount: 5 },
             testSubGroup: { name: 'Actual reports', itemAmount: 1 },
-            testItem: { name: TEST_DATA_SETS[2].name },
+            testItem: { ...TEST_DATA_SETS[2], type: 'Data set' },
             defaultGroup: { name: 'All data sets' },
             defaultSubGroup: { name: 'All metrics' },
             endpoint: {
@@ -254,7 +259,11 @@ describe('Data dimension', () => {
         {
             name: 'Event data items',
             testGroup: { name: 'Information Campaign', itemAmount: 6 },
-            testItem: { name: 'E2E TE program 1 First name' },
+            testItem: {
+                id: 'V4xUtHrsVaK.w75KJ2mc4zz',
+                name: 'E2E TE program 1 First name',
+                type: 'Event data item',
+            },
             defaultGroup: { name: 'All programs' },
             endpoint: {
                 hasMultiplePages: true,
@@ -265,7 +274,11 @@ describe('Data dimension', () => {
         {
             name: 'Program indicators',
             testGroup: { name: 'Malaria focus investigation', itemAmount: 6 },
-            testItem: { name: 'BMI male' },
+            testItem: {
+                id: 'Thkx2BnO5Kq',
+                name: 'BMI male',
+                type: 'Program indicator',
+            },
             defaultGroup: { name: 'All programs' },
             endpoint: {
                 hasMultiplePages: true,
@@ -314,6 +327,15 @@ describe('Data dimension', () => {
                 expectSourceToNotBeLoading()
                 expectSelectableDataItemsAmountToBeLeast(PAGE_SIZE + 1)
             }
+
+            // data type is shown
+            expectDataItemToShowDataType(
+                testDataType.testItem.id,
+                testDataType.testItem.type
+            )
+
+            expectDataItemToShowInfoTable(testDataType.testItem.id)
+
             // an item can be selected
             expectDataItemsToBeInSource([testDataType.testItem.name])
             selectItemByDoubleClick(testDataType.testItem.name)

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -43,3 +43,15 @@ Cypress.Commands.add(
             )
         )
 )
+
+Cypress.Commands.add(
+    'closePopper',
+    {
+        prevSubject: true,
+    },
+    (subject) =>
+        cy
+            .wrap(subject)
+            .closest('[data-test=dhis2-uicore-layer]')
+            .click('topLeft')
+)
diff --git a/docs/data-visualizer.md b/docs/data-visualizer.md
@@ -81,10 +81,16 @@ To select items for a dimension, open the dimension modal window by clicking on
 
 #### Select data items
 
-When selecting data items, there are different ways to filter the displayed items. By using the search field at the top, a global search by item name is performed across the currently selected **Data Type**. By selecting a **Data Type** from the dropdown, items can be filtered by type and subtype, where the subtype available depends on the selected data type. The name search and the type/subtype filtering can be combined as well for a more detailed filter. The type of each displayed item is indicated by a corresponding icon on the item. By hovering over an item, the name of the type can be viewed as well.
+When selecting data items, there are different ways to filter the displayed items. By using the search field at the top, a global search by item name is performed across the currently selected **Data Type**. By selecting a **Data Type** from the dropdown, items can be filtered by type and subtype, where the subtype available depends on the selected data type. The name search and the type/subtype filtering can be combined as well for a more detailed filter. The type of each displayed item is indicated on the right and a corresponding icon is shown on the left of the item.
 
 ![](resources/images/data-visualizer-cc-data-modal.png)
 
+#### Display information about a data item
+
+On the right of each data item there is an information icon that can be clicked and a table with relevant information is shown. The information displayed depends on the item's data type.
+
+![](resources/images/data-visualizer-cc-data-modal-info.png)
+
 #### Using custom calculations { #data-visualizer-custom-calculations }
 
 A new personal indicator, also known as a custom calculation, can be created by clicking the **+ Calculation** button at the bottom-left of the Data modal. This will open the Calculation modal.
@@ -149,13 +155,13 @@ The resulting visualization is composed of separate charts, one for each item in
 
 The display of a visualization can be changed by enabling/disabling and configuring several options. Each visualization type can have a different set of available options. The options are organised in tabs in the **Options dialog** and in sections within each tab.
 
-1.  Click **Options** to open the **Options dialog**.
+1. Click **Options** to open the **Options dialog**.
 
-2.  Navigate the tabs in the dialog to see the available options.
+2. Navigate the tabs in the dialog to see the available options.
 
-3.  Configure the desired options as required.
+3. Configure the desired options as required.
 
-4.  Click **Update** to apply the changes to the visualization.
+4. Click **Update** to apply the changes to the visualization.
 
 ### List of available options
 
@@ -276,11 +282,11 @@ Saving your visualizations makes it easy to find them later. You can also choose
 
 ### Open a visualization
 
-1.  Click **File** \> **Open**.
+1. Click **File** \> **Open**.
 
-2.  Enter the name of a visualization in the search field, or click the **<** and **>** arrows to navigate between different pages. The result can also be filtered by type and owner by using the corresponding menus in the top right corner.
+2. Enter the name of a visualization in the search field, or click the **<** and **>** arrows to navigate between different pages. The result can also be filtered by type and owner by using the corresponding menus in the top right corner.
 
-3.  Click the name of the one you want to open.
+3. Click the name of the one you want to open.
 
 ![](resources/images/data-visualizer-open-dialog.png)
 
@@ -296,19 +302,19 @@ Saving your visualizations makes it easy to find them later. You can also choose
 
 ### Rename a visualization
 
-1.  Click **File** \> **Rename**.
+1. Click **File** \> **Rename**.
 
-2.  Enter the new name and/or description.
+2. Enter the new name and/or description.
 
-3.  Click **Rename**.
+3. Click **Rename**.
 
 ![](resources/images/data-visualizer-rename-dialog.png)
 
 ### Delete a visualization
 
-1.  Click **File** \> **Delete**.
+1. Click **File** \> **Delete**.
 
-2.  Click **Delete**.
+2. Click **Delete**.
 
 ![](resources/images/data-visualizer-delete-dialog.png)
 

diff --git a/docs/resources/images/data-visualizer-cc-data-modal-info.png b/docs/resources/images/data-visualizer-cc-data-modal-info.png
diff --git a/docs/resources/images/data-visualizer-cc-data-modal.png b/docs/resources/images/data-visualizer-cc-data-modal.png
diff --git a/package.json b/package.json
@@ -41,12 +41,12 @@
         "typescript": "^4.8.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.9.3",
-        "@dhis2/app-runtime": "^3.10.4",
+        "@dhis2/analytics": "^26.10.0",
+        "@dhis2/app-runtime": "^3.11.3",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^9.4.4",
+        "@dhis2/ui": "^10.1.10",
         "@krakenjs/post-robot": "^11.0.0",
         "d2": "^31.9.1",
         "decode-uri-component": "^0.2.2",
@@ -68,6 +68,6 @@
         "whatwg-fetch": "^3.6.2"
     },
     "resolutions": {
-        "@dhis2/ui": "^9.4.4"
+        "@dhis2/ui": "^10.1.10"
     }
 }
diff --git a/src/components/DimensionsPanel/Dialogs/DialogManager.js b/src/components/DimensionsPanel/Dialogs/DialogManager.js
@@ -483,7 +483,7 @@ export class DialogManager extends Component {
                         onClose={this.closeDialog}
                         dataTest={`dialog-manager-${dimension.id}`}
                         position="top"
-                        large
+                        fluid
                     >
                         <ModalTitle dataTest={'dialog-manager-modal-title'}>
                             {dimension.name}

diff --git a/src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap b/src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap
@@ -4,7 +4,7 @@ exports[`The DialogManager component renders OUDimension content with display:no
 <Fragment>
   <Modal
     dataTest="dialog-manager-undefined"
-    large={true}
+    fluid={true}
     onClose={[Function]}
     position="top"
   >
@@ -34,9 +34,7 @@ exports[`The DialogManager component renders OUDimension content with display:no
     <ModalActions
       dataTest="dialog-manager-modal-actions"
     >
-      <ButtonStrip
-        dataTest="dhis2-uicore-buttonstrip"
-      >
+      <ButtonStrip>
         <HideButton
           dataTest="dialog-manager-modal-action-cancel"
           onClick={[Function]}
@@ -56,7 +54,7 @@ exports[`The DialogManager component renders OUDimension content with display:no
 <Fragment>
   <Modal
     dataTest="dialog-manager-undefined"
-    large={true}
+    fluid={true}
     onClose={[Function]}
     position="top"
   >
@@ -92,9 +90,7 @@ exports[`The DialogManager component renders OUDimension content with display:no
     <ModalActions
       dataTest="dialog-manager-modal-actions"
     >
-      <ButtonStrip
-        dataTest="dhis2-uicore-buttonstrip"
-      >
+      <ButtonStrip>
         <HideButton
           dataTest="dialog-manager-modal-action-cancel"
           onClick={[Function]}
@@ -114,7 +110,7 @@ exports[`The DialogManager component renders the DataDimension content in dialog
 <Fragment>
   <Modal
     dataTest="dialog-manager-undefined"
-    large={true}
+    fluid={true}
     onClose={[Function]}
     position="top"
   >
@@ -136,9 +132,7 @@ exports[`The DialogManager component renders the DataDimension content in dialog
     <ModalActions
       dataTest="dialog-manager-modal-actions"
     >
-      <ButtonStrip
-        dataTest="dhis2-uicore-buttonstrip"
-      >
+      <ButtonStrip>
         <HideButton
           dataTest="dialog-manager-modal-action-cancel"
           onClick={[Function]}
@@ -156,7 +150,7 @@ exports[`The DialogManager component renders the OrgUnitDimension content in dia
 <Fragment>
   <Modal
     dataTest="dialog-manager-undefined"
-    large={true}
+    fluid={true}
     onClose={[Function]}
     position="top"
   >
@@ -186,9 +180,7 @@ exports[`The DialogManager component renders the OrgUnitDimension content in dia
     <ModalActions
       dataTest="dialog-manager-modal-actions"
     >
-      <ButtonStrip
-        dataTest="dhis2-uicore-buttonstrip"
-      >
+      <ButtonStrip>
         <HideButton
           dataTest="dialog-manager-modal-action-cancel"
           onClick={[Function]}
@@ -206,7 +198,7 @@ exports[`The DialogManager component renders the PeriodDimension content in dial
 <Fragment>
   <Modal
     dataTest="dialog-manager-undefined"
-    large={true}
+    fluid={true}
     onClose={[Function]}
     position="top"
   >
@@ -227,9 +219,7 @@ exports[`The DialogManager component renders the PeriodDimension content in dial
     <ModalActions
       dataTest="dialog-manager-modal-actions"
     >
-      <ButtonStrip
-        dataTest="dhis2-uicore-buttonstrip"
-      >
+      <ButtonStrip>
         <HideButton
           dataTest="dialog-manager-modal-action-cancel"
           onClick={[Function]}