feat: toolbar UI update (DHIS2-15167) (#368)

* chore: allow styled-jsx in project * chore: move filemenu component to app * chore: stump out toolbar ui components * chore: implement toolbar styles * fix: adjust height to 32 px * fix: ensure flexbox children consume full height * feat: add InterpretationsAndDetailsToggler * feat: add app logo * feat: add update button * feat: add HoverMenuBar * chore: temporarily add analytics files needed by file menu * feat: port file-menu to new hoverable menubar * feat: migrate view-menu * feat: add disabled state to view menu * feat: migrate download menu wip * feat: add menu and menu items WIP * fix: let dropdown render children directly in popper * fix: trigger toggleSubMenu when on items without children so it closes * refactor: intergrate menu and context into a single file * feat: let download menu be clickable or hoverable * feat: implement download menu that can be hovered or clicked * feat: hoverable options menu * chore: cleanup files from old toolbar * chore: remove stray log statement * refactor: organise components for move to analytics * refactor: stop using namespaced components, switch to variable names * chore: remove analytics components and prepare the app for their release * fix: wrap action call in useCallback * fix: adjust import name * chore: upgrade @dhis2/analytics * chore: remove lint rule needed while building analytics components * chore: update .pot file * chore: adjust e2e selectors to updated components * chore: fix table e2e test * chore: appease the linter * chore: align remaining e2e failures * fix: remove unused import * fix: push app name 1px down to improve visual alignment * chore: upgrade @dhis2/analytics to get latest toolbar UI fixes * chore: fix file menu e2e test by closing the menu via a document click * chore: upgrade analytics to have decreased padding * fix: upgrade @dhis2/ui to get consistent menu section header styles * fix: ensure `MenuSectionHeader` is `dense` when in the `HoverMenuBar` --------- Co-authored-by: Jan Henrik Øverland <janhenrik.overland@gmail.com>
dhis2 · Aug 9, 2023 · 6c54186 · 6c54186
1 parent ae83ae8
commit 6c54186
Show file tree

Hide file tree

Showing 39 changed files with 955 additions and 1,716 deletions.
diff --git a/cypress/helpers/fileMenu.js b/cypress/helpers/fileMenu.js
@@ -11,7 +11,7 @@ export const ITEM_GETLINK = 'file-menu-getlink'
 export const ITEM_DELETE = 'file-menu-delete'
 
 export const saveVisualization = (name) => {
-    cy.getBySel('menubar').contains('File').click()
+    cy.getBySel('dhis2-analytics-hovermenubar').contains('File').click()
 
     cy.getBySel(ITEM_SAVE).click()
 
@@ -23,7 +23,7 @@ export const saveVisualization = (name) => {
 }
 
 export const saveVisualizationAs = (name) => {
-    cy.getBySel('menubar').contains('File').click()
+    cy.getBySel('dhis2-analytics-hovermenubar').contains('File').click()
 
     cy.getBySel(ITEM_SAVEAS).click()
 
@@ -36,7 +36,7 @@ export const saveVisualizationAs = (name) => {
 }
 
 export const deleteVisualization = () => {
-    cy.getBySel('menubar').contains('File').click()
+    cy.getBySel('dhis2-analytics-hovermenubar').contains('File').click()
 
     cy.getBySel(ITEM_DELETE).click()
 

diff --git a/cypress/helpers/interpretations.js b/cypress/helpers/interpretations.js
@@ -2,8 +2,8 @@ import { EXTENDED_TIMEOUT } from '../support/util.js'
 
 export const expectInterpretationsButtonToBeEnabled = () =>
     cy
-        .getBySel('menubar', EXTENDED_TIMEOUT)
-        .contains('Interpretations')
+        .getBySel('dhis2-analytics-toolbar', EXTENDED_TIMEOUT)
+        .contains('Interpretations and details')
         .should('be.enabled')
 
 export const expectInterpretationFormToBeVisible = () =>

diff --git a/cypress/helpers/menubar.js b/cypress/helpers/menubar.js
@@ -1,13 +1,35 @@
 import { EXTENDED_TIMEOUT } from '../support/util.js'
 
 export const clickMenubarUpdateButton = () =>
-    cy.getBySel('menubar', EXTENDED_TIMEOUT).contains('Update').click()
+    cy
+        .getBySel('dhis2-analytics-toolbar', EXTENDED_TIMEOUT)
+        .contains('Update')
+        .click()
 
 export const clickMenubarViewButton = () =>
-    cy.getBySel('menubar', EXTENDED_TIMEOUT).contains('View').click()
+    cy
+        .getBySel('dhis2-analytics-hovermenubar', EXTENDED_TIMEOUT)
+        .contains('View')
+        .click()
 
 export const clickMenubarOptionsButton = () =>
-    cy.getBySel('menubar', EXTENDED_TIMEOUT).contains('Options').click()
+    cy
+        .getBySel('dhis2-analytics-hovermenubar', EXTENDED_TIMEOUT)
+        .contains('Options')
+        .click()
+
+export const openStyleOptionsModal = () => {
+    clickMenubarOptionsButton()
+    return cy.getBySel('options-menu-list').contains('Style').click()
+}
+
+export const openLegendOptionsModal = () => {
+    clickMenubarOptionsButton()
+    return cy.getBySel('options-menu-list').contains('Legend').click()
+}
 
 export const clickMenubarInterpretationsButton = () =>
-    cy.getBySel('menubar', EXTENDED_TIMEOUT).contains('Interpretations').click()
+    cy
+        .getBySel('dhis2-analytics-toolbar', EXTENDED_TIMEOUT)
+        .contains('Interpretations')
+        .click()
diff --git a/cypress/integration/download.cy.js b/cypress/integration/download.cy.js
@@ -9,13 +9,13 @@ import { EXTENDED_TIMEOUT } from '../support/util.js'
 
 const downloadIsEnabled = () =>
     cy
-        .getBySel('menubar', EXTENDED_TIMEOUT)
+        .getBySel('dhis2-analytics-hovermenubar', EXTENDED_TIMEOUT)
         .contains('Download')
         .should('not.have.attr', 'disabled')
 
 const downloadIsDisabled = () =>
     cy
-        .getBySel('menubar', EXTENDED_TIMEOUT)
+        .getBySel('dhis2-analytics-hovermenubar', EXTENDED_TIMEOUT)
         .contains('Download')
         .should('have.attr', 'disabled')
 

diff --git a/cypress/integration/fileMenu.cy.js b/cypress/integration/fileMenu.cy.js
@@ -38,27 +38,29 @@ const defaultItemsMap = {
 const assertFileMenuItems = (enabledItemsMap = {}) => {
     const itemsMap = Object.assign({}, defaultItemsMap, enabledItemsMap)
 
-    cy.getBySel('menubar', EXTENDED_TIMEOUT).contains('File').click()
+    cy.getBySel('dhis2-analytics-hovermenubar', EXTENDED_TIMEOUT)
+        .contains('File')
+        .click()
 
     Object.entries(itemsMap).forEach(([itemName, enabled]) => {
         enabled
             ? cy.getBySel(itemName).should('not.have.class', 'disabled')
             : cy.getBySel(itemName).should('have.class', 'disabled')
     })
 
-    cy.getBySel('file-menu-toggle-layer').click()
+    cy.get('body').click()
     cy.getBySel('file-menu-container').should('not.exist')
 }
 
 const assertDownloadIsEnabled = () =>
     cy
-        .getBySel('menubar', EXTENDED_TIMEOUT)
+        .getBySel('dhis2-analytics-hovermenubar', EXTENDED_TIMEOUT)
         .contains('Download')
         .should('not.have.attr', 'disabled')
 
 const assertDownloadIsDisabled = () =>
     cy
-        .getBySel('menubar', EXTENDED_TIMEOUT)
+        .getBySel('dhis2-analytics-hovermenubar', EXTENDED_TIMEOUT)
         .contains('Download')
         .should('have.attr', 'disabled')
 

diff --git a/cypress/integration/interpretations.cy.js b/cypress/integration/interpretations.cy.js
@@ -93,7 +93,7 @@ describe('interpretations', { testIsolation: false }, () => {
         // Hiding (the interpretations panel is open at the start of the test)
         clickMenubarViewButton()
 
-        cy.getBySel('dhis2-uicore-menuitem')
+        cy.getBySel('dhis2-uicore-hovermenulistitem')
             .contains('Hide interpretations and details')
             .should('be.visible')
             .click()
@@ -103,7 +103,7 @@ describe('interpretations', { testIsolation: false }, () => {
         // Showing
         clickMenubarViewButton()
 
-        cy.getBySel('dhis2-uicore-menuitem')
+        cy.getBySel('dhis2-uicore-hovermenulistitem')
             .contains('Show interpretations and details')
             .should('be.visible')
             .click()

diff --git a/cypress/integration/layout.cy.js b/cypress/integration/layout.cy.js
@@ -69,7 +69,7 @@ describe('layout', () => {
         // Hiding
         clickMenubarViewButton()
 
-        cy.getBySel('dhis2-uicore-menuitem')
+        cy.getBySel('dhis2-uicore-hovermenulistitem')
             .contains('Hide layout')
             .should('be.visible')
             .click()
@@ -79,7 +79,7 @@ describe('layout', () => {
         // Showing
         clickMenubarViewButton()
 
-        cy.getBySel('dhis2-uicore-menuitem')
+        cy.getBySel('dhis2-uicore-hovermenulistitem')
             .contains('Show layout')
             .should('be.visible')
             .click()

diff --git a/cypress/integration/legendSet.cy.js b/cypress/integration/legendSet.cy.js
@@ -8,12 +8,11 @@ import {
 import { openDimension, selectEventWithProgram } from '../helpers/dimensions.js'
 import { deleteVisualization, saveVisualization } from '../helpers/fileMenu.js'
 import {
-    clickMenubarOptionsButton,
     clickMenubarUpdateButton,
+    openLegendOptionsModal,
 } from '../helpers/menubar.js'
 import {
     clickOptionsModalUpdateButton,
-    clickOptionsTab,
     expectLegendDisplayStrategyToBeByDataItem,
     expectLegendDisplayStrategyToBeFixed,
     expectLegendDisplayStyleToBeFill,
@@ -115,9 +114,7 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => {
         assertCellsHaveDefaultColors('tr td')
     })
     it('background color legend is applied (per data item)', () => {
-        clickMenubarOptionsButton()
-
-        clickOptionsTab('Legend')
+        openLegendOptionsModal()
 
         cy.getBySel('options-modal-content')
             .contains('Use a legend for table cell colors')
@@ -147,9 +144,7 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => {
         assertCellsHaveDefaultColors('tr td:nth-child(1)')
     })
     it('text color legend is applied (per data item)', () => {
-        clickMenubarOptionsButton()
-
-        clickOptionsTab('Legend')
+        openLegendOptionsModal()
 
         cy.getBySel('options-modal-content').should('contain', 'Legend style')
 
@@ -184,9 +179,7 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => {
         expectLegendKeyToBeHidden()
     })
     it('legend key displays correctly when enabled', () => {
-        clickMenubarOptionsButton()
-
-        clickOptionsTab('Legend')
+        openLegendOptionsModal()
 
         expectLegendDisplayStrategyToBeByDataItem()
 
@@ -203,9 +196,7 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => {
         expectLegendKeyToMatchLegendSets([TEST_LEGEND_AGE.name])
     })
     it('text color legend is applied (single legend)', () => {
-        clickMenubarOptionsButton()
-
-        clickOptionsTab('Legend')
+        openLegendOptionsModal()
 
         cy.getBySel('options-modal-content').should('contain', 'Legend style')
 
@@ -251,9 +242,7 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => {
         assertCellsHaveDefaultColors('tr td:nth-child(1)')
     })
     it('background color legend is applied (single legend)', () => {
-        clickMenubarOptionsButton()
-
-        clickOptionsTab('Legend')
+        openLegendOptionsModal()
 
         cy.getBySel('options-modal-content').should('contain', 'Legend style')
 
@@ -303,9 +292,7 @@ describe(['>=39'], 'Options - Legend', { testIsolation: false }, () => {
         // unaffected cells (date column) have default background and text color
         assertCellsHaveDefaultColors('tr td:nth-child(1)')
 
-        clickMenubarOptionsButton()
-
-        clickOptionsTab('Legend')
+        openLegendOptionsModal()
 
         expectLegendDisplayStrategyToBeFixed()
 

diff --git a/cypress/integration/mainSidebar.cy.js b/cypress/integration/mainSidebar.cy.js
@@ -10,7 +10,7 @@ describe('main sidebar', () => {
         // Hiding
         clickMenubarViewButton()
 
-        cy.getBySel('dhis2-uicore-menuitem')
+        cy.getBySel('dhis2-uicore-hovermenulistitem')
             .contains('Hide dimensions sidebar')
             .should('be.visible')
             .click()
@@ -20,7 +20,7 @@ describe('main sidebar', () => {
         // Showing
         clickMenubarViewButton()
 
-        cy.getBySel('dhis2-uicore-menuitem')
+        cy.getBySel('dhis2-uicore-hovermenulistitem')
             .contains('Show dimensions sidebar')
             .should('be.visible')
             .click()

diff --git a/cypress/integration/options.cy.js b/cypress/integration/options.cy.js
@@ -16,7 +16,7 @@ import {
 } from '../helpers/dimensions.js'
 import { saveVisualization } from '../helpers/fileMenu.js'
 import {
-    clickMenubarOptionsButton,
+    openStyleOptionsModal,
     clickMenubarUpdateButton,
 } from '../helpers/menubar.js'
 import {
@@ -44,7 +44,7 @@ describe('options', () => {
             .should('equal', '7px 6px 5px')
 
         // set to comfortable density
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('display-density-select-content')
             .findBySel('dhis2-uicore-select-input')
             .click()
@@ -57,7 +57,7 @@ describe('options', () => {
             .should('equal', '10px 8px 8px')
 
         // set to compact density
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('display-density-select-content')
             .findBySel('dhis2-uicore-select-input')
             .click()
@@ -82,7 +82,7 @@ describe('options', () => {
             .should('equal', REGULAR_FONT_SIZE)
 
         // set to small font size
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('font-size-select-content')
             .findBySel('dhis2-uicore-select-input')
             .click()
@@ -96,7 +96,7 @@ describe('options', () => {
             .should('be.lt', REGULAR_FONT_SIZE)
 
         // set to large font size
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('font-size-select-content')
             .findBySel('dhis2-uicore-select-input')
             .click()
@@ -136,7 +136,7 @@ describe('options', () => {
         getTableRows().eq(0).find('td').eq(2).should('contain', '333 333 444')
 
         // set dgs to comma
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('dgs-select-content')
             .findBySel('dhis2-uicore-select-input')
             .click()
@@ -147,7 +147,7 @@ describe('options', () => {
         getTableRows().eq(0).find('td').eq(2).should('contain', '333,333,444')
 
         // set dgs to none
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('dgs-select-content')
             .findBySel('dhis2-uicore-select-input')
             .click()
@@ -158,7 +158,7 @@ describe('options', () => {
         getTableRows().eq(0).find('td').eq(2).should('contain', '333333444')
 
         // set dgs to space
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('dgs-select-content')
             .findBySel('dhis2-uicore-select-input')
             .click()
@@ -197,7 +197,7 @@ describe(['>=40'], 'ou hierarchy', () => {
             .containsExact(NAME_WITHOUT_HIERARCHY)
 
         // enable show hierarchy - hierarchy is shown
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('options-modal-content')
             .contains('Display organisation unit hierarchy')
             .click()
@@ -214,7 +214,7 @@ describe(['>=40'], 'ou hierarchy', () => {
         getTableRows().eq(0).find('td').eq(0).containsExact(NAME_WITH_HIERARCHY)
 
         // disable show hierarchy - no hierarchy is shown
-        clickMenubarOptionsButton()
+        openStyleOptionsModal()
         cy.getBySel('options-modal-content')
             .contains('Display organisation unit hierarchy')
             .click()

diff --git a/cypress/integration/table.cy.js b/cypress/integration/table.cy.js
@@ -39,8 +39,8 @@ import {
     selectEventWithProgramDimensions,
 } from '../helpers/dimensions.js'
 import {
-    clickMenubarOptionsButton,
     clickMenubarUpdateButton,
+    openStyleOptionsModal,
 } from '../helpers/menubar.js'
 import { clickOptionsModalUpdateButton } from '../helpers/options.js'
 import {
@@ -215,7 +215,7 @@ const assertDimensions = () => {
 
 const assertSorting = () => {
     // remove any DGS to allow numeric value comparison
-    clickMenubarOptionsButton()
+    openStyleOptionsModal()
 
     cy.getBySel('dgs-select-content')
         .findBySel('dhis2-uicore-select-input')

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-06-07T12:54:13.099Z\n"
-"PO-Revision-Date: 2023-06-07T12:54:13.099Z\n"
+"POT-Creation-Date: 2023-06-27T14:37:02.617Z\n"
+"PO-Revision-Date: 2023-06-27T14:37:02.617Z\n"
 
 msgid "Add to {{axisName}}"
 msgstr "Add to {{axisName}}"
@@ -314,8 +314,8 @@ msgstr "Unsaved visualization"
 msgid "Edited"
 msgstr "Edited"
 
-msgid "Interpretations"
-msgstr "Interpretations"
+msgid "Line list"
+msgstr "Line list"
 
 msgid "\"{{- deletedObject}}\" successfully deleted."
 msgstr "\"{{- deletedObject}}\" successfully deleted."