feat: use Toolbar and ToolbarSidebar from analytics (#2358)

* feat: use Toolbar and ToolbarSidebar from analytics * feat: use UpdateButton and HoverMenubar from analytics * feat: update download menu to use hovermenu components from analytics * feat: use hover menu components from analytics for options menu * feat: use interpretations button from analytics * chore: update pot file * chore: upgrade @dhis2/analytics to latest * chore: fix typo in component name * fix: adjust e2e element slectors * chore: fix missing and redundant imports * chore: fix odd linter error which only fires on ci * fix: adjust data test name * chore: fix lines e2e test * fix: adjust closeFileMenuWithClick command * chore: fix failing legens e2e test * chore: fix legend e2e test even better * chore: fix scatter e2e * chore: fix icon e2e * chore: fix start e2e * chore: clean up unused imports * fix: remove divider from plain data source submenu * chore: upgrade @dhis2/analytics to get toolbar UI improvements * fix: tweak viz type selector styles to match toolbar * chore: remove yarn start command which was only used for development * chore: upgrade analytics to get decreased padding * fix: ensure `MenuSectionHeader` is `dense` when in `HoverMenuBar` --------- Co-authored-by: Jan Henrik Øverland <[email protected]>
dhis2 · Aug 9, 2023 · 99d5e5e · 99d5e5e
1 parent 20efd02
commit 99d5e5e
Show file tree

Hide file tree

Showing 30 changed files with 479 additions and 608 deletions.
diff --git a/cypress/elements/fileMenu/index.js b/cypress/elements/fileMenu/index.js
@@ -1,9 +1,7 @@
-import { clickMenuBarFileButton } from '../menuBar.js'
+import { clickMenuBarFileButton, menubarEl } from '../menuBar.js'
 
 const deleteModalEl = 'file-menu-delete-modal'
 const fileMenuContainerEl = 'file-menu-container'
-const fileMenuToggleEl = 'file-menu-toggle'
-const fileMenuToggleLayerEl = 'file-menu-toggle-layer'
 
 export const FILE_MENU_BUTTON_NEW = 'New'
 export const FILE_MENU_BUTTON_OPEN = 'Open…'
@@ -16,12 +14,11 @@ export const FILE_MENU_BUTTON_SHARE = 'Share…'
 export const FILE_MENU_BUTTON_GETLINK = 'Get link…'
 export const FILE_MENU_BUTTON_DELETE = 'Delete'
 
-export const closeFileMenuWithClick = () =>
-    cy.getBySel(fileMenuToggleLayerEl).click('topLeft')
+export const closeFileMenuWithClick = () => cy.get('body').click()
 
 export const closeFileMenuWithEsc = () =>
-    cy.getBySel(fileMenuToggleEl).type('{esc}', { force: true })
-// use force as the element that's being typed into is hidden
+    // use force as the element that's being typed into is hidden
+    cy.getBySel(menubarEl).contains('File').type('{esc}', { force: true })
 
 export const clickFileMenuButton = (buttonName) =>
     cy.getBySel(fileMenuContainerEl).contains(buttonName).click()

diff --git a/cypress/elements/menuBar.js b/cypress/elements/menuBar.js
@@ -1,4 +1,4 @@
-const menubarEl = 'app-menubar'
+export const menubarEl = 'dhis2-analytics-hovermenubar'
 const updateButton = 'app-menubar-update-button'
 const optionsButton = 'app-menubar-options-button'
 
@@ -7,5 +7,11 @@ export const clickMenuBarUpdateButton = () => cy.getBySel(updateButton).click()
 export const clickMenuBarFileButton = () =>
     cy.getBySel(menubarEl).contains('File').click()
 
-export const clickMenuBarOptionsButton = () =>
-    cy.getBySel(optionsButton).click()
+export function clickMenuBarOptionsButton() {
+    return cy.getBySel(optionsButton).click()
+}
+
+export const openOptionsModal = (section = 'Data') => {
+    clickMenuBarOptionsButton()
+    return cy.getBySel('options-menu-list').contains(section).click()
+}
diff --git a/cypress/integration/options/axes.cy.js b/cypress/integration/options/axes.cy.js
@@ -8,7 +8,7 @@ import {
     clickDimensionModalUpdateButton,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
-import { clickMenuBarOptionsButton } from '../../elements/menuBar.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     clickOptionsModalUpdateButton,
     clickOptionsTab,
@@ -57,8 +57,7 @@ describe('Options - Vertical axis', () => {
     })
     describe('title', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it("sets axis title to 'Custom'", () => {
             setAxisTitleTextModeTo('Custom')
@@ -76,8 +75,7 @@ describe('Options - Vertical axis', () => {
     })
     describe('range', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it('sets min value', () => {
             setAxisRangeMinValue(TEST_AXIS, TEST_MIN_VALUE)
@@ -111,8 +109,7 @@ describe('Options - Vertical axis', () => {
     })
     describe('options modal keeps changes when reopening', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`title is "${TEST_TITLE}"`, () => {
             expectAxisTitleToBeValue(TEST_AXIS, TEST_TITLE)
@@ -141,8 +138,7 @@ describe('Options - Horizontal axis', () => {
     })
     describe('title', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`switches to '${TEST_TAB}' tab`, () => {
             switchAxesTabTo(TEST_TAB)
@@ -163,8 +159,7 @@ describe('Options - Horizontal axis', () => {
     })
     describe('options modal keeps changes when reopening', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`switches to '${TEST_TAB}' tab`, () => {
             switchAxesTabTo(TEST_TAB)
@@ -185,8 +180,7 @@ describe('Options - Auto-generated axis title', () => {
     })
     describe('Single item - single axis', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it("sets axis title to 'Auto generated'", () => {
             setAxisTitleTextModeTo('Auto generated')
@@ -238,8 +232,7 @@ describe('Options - Auto-generated axis title', () => {
             expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
         })
         it('opens Options -> Series', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_SERIES)
+            openOptionsModal(OPTIONS_TAB_SERIES)
         })
         it('enables multi axis', () => {
             setItemToAxis(1, 2)

diff --git a/cypress/integration/options/fontStyles.cy.js b/cypress/integration/options/fontStyles.cy.js
@@ -9,11 +9,10 @@ import {
     clickDimensionModalUpdateButton,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
-import { clickMenuBarOptionsButton } from '../../elements/menuBar.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     changeFontSizeOption,
     clickOptionsModalUpdateButton,
-    clickOptionsTab,
     changeTextAlignOption,
     clickBoldButton,
     clickItalicButton,
@@ -129,8 +128,7 @@ describe('Options - Font styles', () => {
             expectWindowConfigTitleToBeValue(CONFIG_DEFAULT_TITLE)
         })
         it('opens Options -> Style', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
         })
         setFontStyleOptions({
             fontSize: TEST_FONT_SIZE_OPTION.input,
@@ -174,8 +172,7 @@ describe('Options - Font styles', () => {
             expectWindowConfigSubtitleToBeValue(CONFIG_DEFAULT_SUBTITLE)
         })
         it('opens Options -> Style', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
         })
         it('sets a custom subtitle', () => {
             setCustomSubtitle(TEST_SUBTITLE_TEXT)
@@ -220,8 +217,7 @@ describe('Options - Font styles', () => {
         const prefix = TARGET_LINE_PREFIX
 
         it('opens Options -> Data', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_DATA)
+            openOptionsModal(OPTIONS_TAB_DATA)
         })
         it('sets target line', () => {
             cy.log(`Test value: ${TEST_VALUE}`)
@@ -280,8 +276,7 @@ describe('Options - Font styles', () => {
         const prefix = BASE_LINE_PREFIX
 
         it('opens Options -> Data', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_DATA)
+            openOptionsModal(OPTIONS_TAB_DATA)
         })
         it('sets base line', () => {
             cy.log(`Test value: ${TEST_VALUE}`)
@@ -338,8 +333,7 @@ describe('Options - Font styles', () => {
         const prefix = SERIES_KEY_PREFIX
 
         it('opens Options -> Style', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
         })
         setFontStyleOptions({
             fontSize: TEST_FONT_SIZE_OPTION.input,
@@ -375,8 +369,7 @@ describe('Options - Font styles', () => {
         const prefix = VERTICAL_AXIS_LABELS_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         setFontStyleOptions({
             fontSize: TEST_FONT_SIZE_OPTION.input,
@@ -410,8 +403,7 @@ describe('Options - Font styles', () => {
         const prefix = HORIZONTAL_AXIS_LABELS_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
             switchAxesTabTo('Horizontal (x) axis')
         })
         setFontStyleOptions({
@@ -451,8 +443,7 @@ describe('Options - Font styles', () => {
         const prefix = HORIZONTAL_AXIS_TITLE_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`sets horizontal axis title to "${TEST_TITLE}"`, () => {
             switchAxesTabTo('Horizontal (x) axis')
@@ -500,8 +491,7 @@ describe('Options - Font styles', () => {
         const prefix = VERTICAL_AXIS_TITLE_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`sets vertical axis title to "${TEST_TITLE}"`, () => {
             setAxisTitleTextModeTo('Custom')

diff --git a/cypress/integration/options/icon.cy.js b/cypress/integration/options/icon.cy.js
@@ -27,7 +27,7 @@ import {
     unselectAllItemsByButton,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
-import { clickMenuBarOptionsButton } from '../../elements/menuBar.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     OPTIONS_TAB_LEGEND,
     OPTIONS_TAB_STYLE,
@@ -97,8 +97,7 @@ describe('Icon', () => {
     TEST_TYPES.forEach((type) => {
         it(`icon shows when option is enabled for ${type}`, () => {
             // enable the icon
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
             clickCheckbox('option-show-data-item-icon')
             clickOptionsModalHideButton()
 
@@ -129,8 +128,7 @@ describe('Icon', () => {
     // TODO: Skipped because of the same reason as the commented out tests above
     it.skip('icon gets correct color when a legend is in use', () => {
         // enable the icon
-        clickMenuBarOptionsButton()
-        clickOptionsTab(OPTIONS_TAB_STYLE)
+        openOptionsModal(OPTIONS_TAB_STYLE)
         clickCheckbox('option-show-data-item-icon')
 
         // enable the legend
@@ -176,8 +174,7 @@ describe('Icon', () => {
         expectSingleValueToHaveIconColor('#ffffff')
 
         // switch to apply legend color to text
-        clickMenuBarOptionsButton()
-        clickOptionsTab(OPTIONS_TAB_LEGEND)
+        openOptionsModal(OPTIONS_TAB_LEGEND)
         changeDisplayStyleToText()
         clickOptionsModalUpdateButton()