From 0a99e5957a6cab866d9be59bc0bc79638a330605 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 30 May 2023 11:23:05 +0200 Subject: [PATCH 01/26] feat: use Toolbar and ToolbarSidebar from analytics --- src/components/App.css | 16 ---------- src/components/App.js | 20 +++++------- .../VisualizationTypeSelector.js | 32 ++++++++++--------- .../VisualizationTypeSelector.module.css | 1 + 4 files changed, 26 insertions(+), 43 deletions(-) diff --git a/src/components/App.css b/src/components/App.css index 8aea36a21f..9508d24b08 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -37,22 +37,6 @@ body { height: 48px; } -/* Toolbar */ - -.section-toolbar { - height: 39px; -} - -.toolbar-type { - width: 260px; - border-right: 1px solid var(--colors-grey400); - border-bottom: 1px solid var(--colors-grey400); -} - -.toolbar-menubar { - background-color: var(--colors-grey400); -} - /* Main */ .section-main { overflow: hidden; diff --git a/src/components/App.js b/src/components/App.js index 7e67b30a06..f268ab0f4c 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,4 +1,4 @@ -import { apiFetchOrganisationUnitLevels } from '@dhis2/analytics' +import { apiFetchOrganisationUnitLevels, Toolbar } from '@dhis2/analytics' import { useSetting } from '@dhis2/app-service-datastore' import i18n from '@dhis2/d2-i18n' import { @@ -233,17 +233,13 @@ export class UnconnectedApp extends Component { return ( <>
-
-
- -
-
- -
-
+ + + +
diff --git a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js index 757e629e51..7952893703 100644 --- a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js +++ b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js @@ -1,4 +1,4 @@ -import { visTypeDisplayNames } from '@dhis2/analytics' +import { visTypeDisplayNames, ToolbarSidebar } from '@dhis2/analytics' import { useSetting } from '@dhis2/app-service-datastore' import i18n from '@dhis2/d2-i18n' import { Divider, Popper, Layer } from '@dhis2/ui' @@ -97,20 +97,22 @@ const UnconnectedVisualizationTypeSelector = ( return ( <> -
- - - {visTypeDisplayNames[visualizationType]} - - - - -
+ +
+ + + {visTypeDisplayNames[visualizationType]} + + + + +
+ {listIsOpen && ( diff --git a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css index f87c1ce885..a56b0a1f85 100644 --- a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css +++ b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css @@ -10,6 +10,7 @@ justify-content: flex-start; background-color: var(--colors-white); cursor: pointer; + flex-grow: 1 } .button > span { From 1f4b2445d8eab4db1bb5eb57f5765872e4856a0f Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 30 May 2023 11:37:42 +0200 Subject: [PATCH 02/26] feat: use UpdateButton and HoverMenubar from analytics --- package.json | 1 + src/components/MenuBar/MenuBar.js | 46 +++++++++---------- .../MenuBar/styles/MenuBar.module.css | 13 ------ 3 files changed, 23 insertions(+), 37 deletions(-) delete mode 100644 src/components/MenuBar/styles/MenuBar.module.css diff --git a/package.json b/package.json index ac96967070..f9f6f2d7a6 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "build": "d2-app-scripts build", "start": "d2-app-scripts start", "start:nobrowser": "BROWSER=none yarn start", + "start:localanalytics": "cd ../analytics && yarn build && cd ../data-visualizer-app && rm -rf node_modules/@dhis2/analytics/build && cp -R ../analytics/build/ node_modules/@dhis2/analytics/build && yarn start", "test": "d2-app-scripts test", "coverage": "yarn test --coverage", "deploy": "d2-app-scripts deploy", diff --git a/src/components/MenuBar/MenuBar.js b/src/components/MenuBar/MenuBar.js index 7e1c93b6b6..4034f29454 100644 --- a/src/components/MenuBar/MenuBar.js +++ b/src/components/MenuBar/MenuBar.js @@ -1,7 +1,9 @@ import { FileMenu, + HoverMenubar, VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, + UpdateButton, } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' import PropTypes from 'prop-types' @@ -13,11 +15,9 @@ import history from '../../modules/history.js' import { visTypes } from '../../modules/visualization.js' import { sGetCurrent } from '../../reducers/current.js' import { ToolbarDownloadDropdown } from '../DownloadMenu/ToolbarDownloadDropdown.js' -import UpdateButton from '../UpdateButton/UpdateButton.js' import UpdateVisualizationContainer from '../UpdateButton/UpdateVisualizationContainer.js' import VisualizationOptionsManager from '../VisualizationOptions/VisualizationOptionsManager.js' import { InterpretationsButton } from './InterpretationsButton.js' -import styles from './styles/MenuBar.module.css' const onOpen = (id) => { const path = `/${id}` @@ -51,38 +51,36 @@ const filterVisTypes = [ ] const UnconnectedMenuBar = ({ dataTest, ...props }, context) => ( -
+ <> ( )} /> - - - - + + + -
+ + -
+ ) UnconnectedMenuBar.propTypes = { diff --git a/src/components/MenuBar/styles/MenuBar.module.css b/src/components/MenuBar/styles/MenuBar.module.css deleted file mode 100644 index 1ff0da6243..0000000000 --- a/src/components/MenuBar/styles/MenuBar.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.menuBar { - background: var(--colors-white); - display: flex; - align-items: center; - padding: 0 var(--spacers-dp8); - height: 38px; -} -.updateButton { - margin-right: var(--spacers-dp8); -} -.grow { - flex: 1 1 0%; -} From cf026e3cab711140b8a0bc058a572654020e8a00 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 30 May 2023 12:14:11 +0200 Subject: [PATCH 03/26] feat: update download menu to use hovermenu components from analytics --- .../DownloadMenu/AdvancedSubMenu.js | 101 ++++++++++-------- src/components/DownloadMenu/DownloadMenu.js | 88 +++++++++------ src/components/DownloadMenu/GraphicsMenu.js | 47 ++++---- .../DownloadMenu/ModalDownloadDropdown.js | 36 ++++--- .../DownloadMenu/PlainDataSourceSubMenu.js | 77 +++++++------ src/components/DownloadMenu/TableMenu.js | 83 +++++++------- .../DownloadMenu/ToolbarDownloadDropdown.js | 45 +++----- .../{useDownloadMenu.js => useDownload.js} | 12 +-- 8 files changed, 262 insertions(+), 227 deletions(-) rename src/components/DownloadMenu/{useDownloadMenu.js => useDownload.js} (95%) diff --git a/src/components/DownloadMenu/AdvancedSubMenu.js b/src/components/DownloadMenu/AdvancedSubMenu.js index bf447da4f0..5ee8566b62 100644 --- a/src/components/DownloadMenu/AdvancedSubMenu.js +++ b/src/components/DownloadMenu/AdvancedSubMenu.js @@ -1,3 +1,4 @@ +import { HoverMenuListItem } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' import { MenuItem, MenuSectionHeader } from '@dhis2/ui' import PropTypes from 'prop-types' @@ -10,53 +11,63 @@ import { FILE_FORMAT_SQL, } from './constants.js' -export const AdvancedSubMenu = ({ onDownload, label, ...menuItemProps }) => ( - - - - onDownload({ - type: DOWNLOAD_TYPE_PLAIN, - format: FILE_FORMAT_JSON, - path: 'dataValueSet', - }) - } - /> - - onDownload({ - type: DOWNLOAD_TYPE_PLAIN, - format: FILE_FORMAT_XML, - path: 'dataValueSet', - }) - } - /> - - - onDownload({ - type: DOWNLOAD_TYPE_PLAIN, - format: FILE_FORMAT_JRXML, - }) - } - /> - - onDownload({ - type: DOWNLOAD_TYPE_PLAIN, - format: FILE_FORMAT_SQL, - path: 'debug/sql', - }) - } - /> - -) +export const AdvancedSubMenu = ({ + hoverable, + onDownload, + label, + ...menuItemProps +}) => { + const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem + + return ( + + + + onDownload({ + type: DOWNLOAD_TYPE_PLAIN, + format: FILE_FORMAT_JSON, + path: 'dataValueSet', + }) + } + /> + + onDownload({ + type: DOWNLOAD_TYPE_PLAIN, + format: FILE_FORMAT_XML, + path: 'dataValueSet', + }) + } + /> + + + onDownload({ + type: DOWNLOAD_TYPE_PLAIN, + format: FILE_FORMAT_JRXML, + }) + } + /> + + onDownload({ + type: DOWNLOAD_TYPE_PLAIN, + format: FILE_FORMAT_SQL, + path: 'debug/sql', + }) + } + /> + + ) +} AdvancedSubMenu.propTypes = { label: PropTypes.string.isRequired, onDownload: PropTypes.func.isRequired, + hoverable: PropTypes.bool, } diff --git a/src/components/DownloadMenu/DownloadMenu.js b/src/components/DownloadMenu/DownloadMenu.js index b1c01fc11f..3fb7f201f3 100644 --- a/src/components/DownloadMenu/DownloadMenu.js +++ b/src/components/DownloadMenu/DownloadMenu.js @@ -1,4 +1,4 @@ -import { VIS_TYPE_PIVOT_TABLE } from '@dhis2/analytics' +import { VIS_TYPE_PIVOT_TABLE, HoverMenuList } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' import { FlyoutMenu, MenuSectionHeader } from '@dhis2/ui' import PropTypes from 'prop-types' @@ -14,45 +14,63 @@ import { GraphicsMenu } from './GraphicsMenu.js' import { PlainDataSourceSubMenu } from './PlainDataSourceSubMenu.js' import { TableMenu } from './TableMenu.js' -const DownloadMenu = ({ visType, onDownloadData, onDownloadImage }) => ( - - {visType === VIS_TYPE_PIVOT_TABLE ? ( - - ) : ( - - )} - - - - - - - -) +const DownloadMenu = ({ + visType, + onDownloadData, + onDownloadImage, + hoverable, +}) => { + const MenuComponent = hoverable ? HoverMenuList : FlyoutMenu + + return ( + + {visType === VIS_TYPE_PIVOT_TABLE ? ( + + ) : ( + + )} + + + + + + + + ) +} DownloadMenu.propTypes = { visType: PropTypes.string.isRequired, onDownloadData: PropTypes.func.isRequired, onDownloadImage: PropTypes.func.isRequired, + hoverable: PropTypes.bool, } export { DownloadMenu } diff --git a/src/components/DownloadMenu/GraphicsMenu.js b/src/components/DownloadMenu/GraphicsMenu.js index 3fe856aa82..ee6e6f12fc 100644 --- a/src/components/DownloadMenu/GraphicsMenu.js +++ b/src/components/DownloadMenu/GraphicsMenu.js @@ -1,3 +1,4 @@ +import { HoverMenuListItem } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' import { MenuItem, @@ -10,27 +11,33 @@ import PropTypes from 'prop-types' import React from 'react' import { FILE_FORMAT_PDF, FILE_FORMAT_PNG } from './constants.js' -export const GraphicsMenu = ({ onDownload }) => - React.Children.toArray([ - , - } - label={i18n.t('Image (.png)')} - onClick={() => onDownload({ format: FILE_FORMAT_PNG })} - />, - } - label={i18n.t('PDF (.pdf)')} - onClick={() => onDownload({ format: FILE_FORMAT_PDF })} - />, - ]) +export const GraphicsMenu = ({ hoverable, onDownload }) => { + const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem + + return ( + <> + + } + label={i18n.t('Image (.png)')} + onClick={() => onDownload({ format: FILE_FORMAT_PNG })} + /> + } + label={i18n.t('PDF (.pdf)')} + onClick={() => onDownload({ format: FILE_FORMAT_PDF })} + /> + + ) +} GraphicsMenu.propTypes = { onDownload: PropTypes.func.isRequired, + hoverable: PropTypes.bool, } diff --git a/src/components/DownloadMenu/ModalDownloadDropdown.js b/src/components/DownloadMenu/ModalDownloadDropdown.js index 421962a1c0..47ba771802 100644 --- a/src/components/DownloadMenu/ModalDownloadDropdown.js +++ b/src/components/DownloadMenu/ModalDownloadDropdown.js @@ -1,28 +1,40 @@ import i18n from '@dhis2/d2-i18n' import { DropdownButton } from '@dhis2/ui' import PropTypes from 'prop-types' -import React from 'react' +import React, { useCallback, useState } from 'react' import { DownloadMenu } from './DownloadMenu.js' import styles from './ModalDownloadDropdown.module.css' -import { useDownloadMenu } from './useDownloadMenu.js' +import { useDownload } from './useDownload.js' const ModalDownloadDropdown = ({ relativePeriodDate }) => { - const { - isOpen, - toggleOpen, - disabled, - doDownloadData, - doDownloadImage, - visType, - } = useDownloadMenu(relativePeriodDate) + const { disabled, doDownloadData, doDownloadImage, visType } = + useDownload(relativePeriodDate) + const [isOpen, setIsOpen] = useState(false) + const toggleOpen = useCallback(() => { + setIsOpen((currentIsOpen) => !currentIsOpen) + }, []) + const onDownloadData = useCallback( + (payload) => { + doDownloadData(payload) + setIsOpen(false) + }, + [doDownloadData] + ) + const onDownloadImage = useCallback( + (payload) => { + doDownloadImage(payload) + setIsOpen(false) + }, + [doDownloadImage] + ) return (
} diff --git a/src/components/DownloadMenu/PlainDataSourceSubMenu.js b/src/components/DownloadMenu/PlainDataSourceSubMenu.js index aaa8f06ac5..709770d7e0 100644 --- a/src/components/DownloadMenu/PlainDataSourceSubMenu.js +++ b/src/components/DownloadMenu/PlainDataSourceSubMenu.js @@ -1,3 +1,4 @@ +import { HoverMenuListItem } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' import { MenuItem, MenuSectionHeader } from '@dhis2/ui' import PropTypes from 'prop-types' @@ -12,46 +13,52 @@ import { export const PlainDataSourceSubMenu = ({ onDownload, format, + hoverable, label, ...menuItemProps -}) => ( - - - - onDownload({ - type: DOWNLOAD_TYPE_PLAIN, - format, - idScheme: ID_SCHEME_UID, - }) - } - /> - - onDownload({ - type: DOWNLOAD_TYPE_PLAIN, - format, - idScheme: ID_SCHEME_CODE, - }) - } - /> - - onDownload({ - type: DOWNLOAD_TYPE_PLAIN, - format, - idScheme: ID_SCHEME_NAME, - }) - } - /> - -) +}) => { + const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem + + return ( + + + + onDownload({ + type: DOWNLOAD_TYPE_PLAIN, + format, + idScheme: ID_SCHEME_UID, + }) + } + /> + + onDownload({ + type: DOWNLOAD_TYPE_PLAIN, + format, + idScheme: ID_SCHEME_CODE, + }) + } + /> + + onDownload({ + type: DOWNLOAD_TYPE_PLAIN, + format, + idScheme: ID_SCHEME_NAME, + }) + } + /> + + ) +} PlainDataSourceSubMenu.propTypes = { format: PropTypes.string.isRequired, label: PropTypes.string.isRequired, onDownload: PropTypes.func.isRequired, + hoverable: PropTypes.bool, } diff --git a/src/components/DownloadMenu/TableMenu.js b/src/components/DownloadMenu/TableMenu.js index 1d73292836..98a2b7c8be 100644 --- a/src/components/DownloadMenu/TableMenu.js +++ b/src/components/DownloadMenu/TableMenu.js @@ -1,3 +1,4 @@ +import { HoverMenuListItem } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' import { MenuItem, MenuSectionHeader } from '@dhis2/ui' import PropTypes from 'prop-types' @@ -9,45 +10,51 @@ import { FILE_FORMAT_HTML_CSS, } from './constants.js' -export const TableMenu = ({ onDownload }) => - React.Children.toArray([ - , - - onDownload({ - type: DOWNLOAD_TYPE_TABLE, - format: FILE_FORMAT_XLS, - }) - } - />, - - onDownload({ - type: DOWNLOAD_TYPE_TABLE, - format: FILE_FORMAT_CSV, - }) - } - />, - - onDownload({ - type: DOWNLOAD_TYPE_TABLE, - format: FILE_FORMAT_HTML_CSS, - }) - } - />, - ]) +export const TableMenu = ({ hoverable, onDownload }) => { + const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem + + return ( + <> + + + onDownload({ + type: DOWNLOAD_TYPE_TABLE, + format: FILE_FORMAT_XLS, + }) + } + /> + + onDownload({ + type: DOWNLOAD_TYPE_TABLE, + format: FILE_FORMAT_CSV, + }) + } + /> + + onDownload({ + type: DOWNLOAD_TYPE_TABLE, + format: FILE_FORMAT_HTML_CSS, + }) + } + /> + + ) +} TableMenu.propTypes = { onDownload: PropTypes.func.isRequired, + hoverable: PropTypes.bool, } diff --git a/src/components/DownloadMenu/ToolbarDownloadDropdown.js b/src/components/DownloadMenu/ToolbarDownloadDropdown.js index bdff72784e..5dcbae0948 100644 --- a/src/components/DownloadMenu/ToolbarDownloadDropdown.js +++ b/src/components/DownloadMenu/ToolbarDownloadDropdown.js @@ -1,42 +1,21 @@ +import { HoverMenuDropdown } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' -import { Layer, Popper } from '@dhis2/ui' -import React, { useRef } from 'react' -import MenuButton from '../MenuButton/MenuButton.js' +import React from 'react' import { DownloadMenu } from './DownloadMenu.js' -import { useDownloadMenu } from './useDownloadMenu.js' +import { useDownload } from './useDownload.js' const ToolbarDownloadDropdown = () => { - const buttonRef = useRef() - const { - isOpen, - toggleOpen, - disabled, - doDownloadData, - doDownloadImage, - visType, - } = useDownloadMenu() + const { disabled, doDownloadData, doDownloadImage, visType } = useDownload() return ( - <> - - {i18n.t('Download')} - - {isOpen && ( - - - - - - )} - + + + ) } diff --git a/src/components/DownloadMenu/useDownloadMenu.js b/src/components/DownloadMenu/useDownload.js similarity index 95% rename from src/components/DownloadMenu/useDownloadMenu.js rename to src/components/DownloadMenu/useDownload.js index 3b6fb60afa..07a32c8357 100644 --- a/src/components/DownloadMenu/useDownloadMenu.js +++ b/src/components/DownloadMenu/useDownload.js @@ -1,6 +1,6 @@ import { Analytics } from '@dhis2/analytics' import { useConfig, useDataEngine, useDataMutation } from '@dhis2/app-runtime' -import { useState, useCallback } from 'react' +import { useCallback } from 'react' import { useSelector } from 'react-redux' import { sGetChart } from '../../reducers/chart.js' import { sGetCurrent } from '../../reducers/current.js' @@ -53,7 +53,7 @@ const addCommonParameters = (req, visualization, options) => { return req } -const useDownloadMenu = (relativePeriodDate) => { +const useDownload = (relativePeriodDate) => { const visualization = useSelector(sGetCurrent) const visType = useSelector(sGetUiType) const chart = useSelector(sGetChart) @@ -62,7 +62,6 @@ const useDownloadMenu = (relativePeriodDate) => { const { baseUrl } = useConfig() const dataEngine = useDataEngine() const analyticsEngine = Analytics.getAnalytics(dataEngine) - const [isOpen, setIsOpen] = useState(false) const openDownloadedFileInBlankTab = useCallback((blob) => { const url = URL.createObjectURL(blob) @@ -94,8 +93,6 @@ const useDownloadMenu = (relativePeriodDate) => { format === FILE_FORMAT_PNG ? getPng({ formData }) : getPdf({ formData }) - - setIsOpen(false) }, [chart, getPdf, getPng, visualization] ) @@ -177,7 +174,6 @@ const useDownloadMenu = (relativePeriodDate) => { ) window.open(url, target) - setIsOpen(false) }, [ analyticsEngine, @@ -190,8 +186,6 @@ const useDownloadMenu = (relativePeriodDate) => { ) return { - isOpen, - toggleOpen: () => setIsOpen(!isOpen), disabled: !visualization, doDownloadData, doDownloadImage, @@ -199,4 +193,4 @@ const useDownloadMenu = (relativePeriodDate) => { } } -export { useDownloadMenu } +export { useDownload } From 51135b862bbdb6811e95e9b2c6443093adaeef12 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 30 May 2023 12:27:47 +0200 Subject: [PATCH 04/26] feat: use hover menu components from analytics for options menu --- .../VisualizationOptionsManager.js | 44 ++++++++++--------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/VisualizationOptions/VisualizationOptionsManager.js b/src/components/VisualizationOptions/VisualizationOptionsManager.js index c3ee80f567..bf99e15ae2 100644 --- a/src/components/VisualizationOptions/VisualizationOptionsManager.js +++ b/src/components/VisualizationOptions/VisualizationOptionsManager.js @@ -4,6 +4,9 @@ import { hasCustomAxes, hasRelativeItems, isDualAxisType, + HoverMenuDropdown, + HoverMenuList, + HoverMenuListItem, VisualizationOptions, } from '@dhis2/analytics' import i18n from '@dhis2/d2-i18n' @@ -17,7 +20,6 @@ import { sGetDimensionItemsByAxis, sGetUiLayout, } from '../../reducers/ui.js' -import MenuButton from '../MenuButton/MenuButton.js' import UpdateVisualizationContainer from '../UpdateButton/UpdateVisualizationContainer.js' const VisualizationOptionsManager = ({ @@ -27,19 +29,10 @@ const VisualizationOptionsManager = ({ columns, series, }) => { - const [dialogIsOpen, setDialogIsOpen] = useState(false) - - const onClick = (handler) => () => { + const [selectedOptionConfigKey, setSelectedOptionConfigKey] = useState(null) + const onOptionsUpdate = (handler) => { handler() - onClose() - } - - const onClose = () => { - toggleVisualizationOptionsDialog() - } - - const toggleVisualizationOptionsDialog = () => { - setDialogIsOpen(!dialogIsOpen) + setSelectedOptionConfigKey(null) } const filteredSeries = series.filter((seriesItem) => @@ -65,19 +58,30 @@ const VisualizationOptionsManager = ({ return ( <> - - {i18n.t('Options')} - - {dialogIsOpen && ( + + {optionsConfig.map(({ label, key }) => ( + { + setSelectedOptionConfigKey(key) + }} + /> + ))} + + + {selectedOptionConfigKey && ( ( onOptionsUpdate(handler)} + onClose={() => setSelectedOptionConfigKey(null)} + initiallyActiveTabKey={selectedOptionConfigKey} /> )} /> From 05f8ae182e5493eeee74c10afcf6a7eac66c2f31 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 30 May 2023 16:00:17 +0200 Subject: [PATCH 05/26] feat: use interpretations button from analytics --- .../MenuBar/InterpretationsButton.js | 55 ++++++------------- .../styles/InterpretationsButton.module.css | 4 -- src/components/MenuButton/MenuButton.js | 34 ------------ .../MenuButton/styles/MenuButton.module.css | 47 ---------------- 4 files changed, 17 insertions(+), 123 deletions(-) delete mode 100644 src/components/MenuBar/styles/InterpretationsButton.module.css delete mode 100644 src/components/MenuButton/MenuButton.js delete mode 100644 src/components/MenuButton/styles/MenuButton.module.css diff --git a/src/components/MenuBar/InterpretationsButton.js b/src/components/MenuBar/InterpretationsButton.js index e39e1fbe55..41fd8b3203 100644 --- a/src/components/MenuBar/InterpretationsButton.js +++ b/src/components/MenuBar/InterpretationsButton.js @@ -1,45 +1,24 @@ -import i18n from '@dhis2/d2-i18n' -import { IconChevronRight24, IconChevronLeft24 } from '@dhis2/ui' -import PropTypes from 'prop-types' +import { InterpretationsAndDetailsToggler } from '@dhis2/analytics' import React from 'react' -import { connect } from 'react-redux' +import { useDispatch, useSelector } from 'react-redux' import { acToggleUiRightSidebarOpen } from '../../actions/ui.js' import { sGetCurrent } from '../../reducers/current.js' import { sGetUiRightSidebarOpen } from '../../reducers/ui.js' -import MenuButton from '../MenuButton/MenuButton.js' -import styles from './styles/InterpretationsButton.module.css' -export const UnconnectedInterpretationsButton = (props) => ( - - {props.rightSidebarOpen ? ( -
- -
- ) : ( -
- -
- )} - {i18n.t('Interpretations')} - -) +export const InterpretationsButton = () => { + const isShowing = useSelector(sGetUiRightSidebarOpen) + const current = useSelector(sGetCurrent) + const isDisabled = !current?.id + const dispatch = useDispatch() + const onClick = () => { + dispatch(acToggleUiRightSidebarOpen()) + } -UnconnectedInterpretationsButton.propTypes = { - id: PropTypes.string, - rightSidebarOpen: PropTypes.bool, - onClick: PropTypes.func, + return ( + + ) } - -const mapStateToProps = (state) => ({ - rightSidebarOpen: sGetUiRightSidebarOpen(state), - id: (sGetCurrent(state) || {}).id, -}) - -const mapDispatchToProps = (dispatch) => ({ - onClick: () => dispatch(acToggleUiRightSidebarOpen()), -}) - -export const InterpretationsButton = connect( - mapStateToProps, - mapDispatchToProps -)(UnconnectedInterpretationsButton) diff --git a/src/components/MenuBar/styles/InterpretationsButton.module.css b/src/components/MenuBar/styles/InterpretationsButton.module.css deleted file mode 100644 index 35a769f317..0000000000 --- a/src/components/MenuBar/styles/InterpretationsButton.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.iconWrapper { - display: flex; - margin-right: var(--spacers-dp4); -} diff --git a/src/components/MenuButton/MenuButton.js b/src/components/MenuButton/MenuButton.js deleted file mode 100644 index a8f7291cab..0000000000 --- a/src/components/MenuButton/MenuButton.js +++ /dev/null @@ -1,34 +0,0 @@ -import PropTypes from 'prop-types' -import React, { forwardRef } from 'react' -import styles from './styles/MenuButton.module.css' - -const MenuButton = forwardRef( - ({ children, dataTest, disabled, name, onBlur, onClick, onFocus }, ref) => ( - - ) -) - -MenuButton.displayName = 'MenuButton' - -MenuButton.propTypes = { - children: PropTypes.node, - dataTest: PropTypes.string, - disabled: PropTypes.bool, - name: PropTypes.string, - onBlur: PropTypes.func, - onClick: PropTypes.func, - onFocus: PropTypes.func, -} - -export default MenuButton diff --git a/src/components/MenuButton/styles/MenuButton.module.css b/src/components/MenuButton/styles/MenuButton.module.css deleted file mode 100644 index 1ec3474a61..0000000000 --- a/src/components/MenuButton/styles/MenuButton.module.css +++ /dev/null @@ -1,47 +0,0 @@ -.menuButton { - display: inline-flex; - position: relative; - align-items: center; - justify-content: center; - font-size: 14px; - font-weight: 400; - text-transform: none; - padding: 6px var(--spacers-dp12); - border-radius: 3px; - color: var(--colors-grey900); - box-sizing: border-box; - line-height: 1.75; - background: none; - border: none; - transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - cursor: pointer; -} - -.menuButton:hover:enabled { - background-color: var(--colors-grey200); -} - -.menuButton:disabled { - color: var(--colors-grey400); - cursor: not-allowed; -} - -.menuButton:active { - background-color: var(--colors-grey300); -} - -.menuButton:focus { - outline: 2px solid var(--colors-blue600); -} - -.menuButton:focus:not(:focus-visible) { - outline: none; -} - -.menuButton svg { - color: var(--colors-grey600); -} - -.menuButton:disabled svg { - color: var(--colors-grey400); -} From 53951fd0f6895d694692dcb694fb6c0de797fe30 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 30 May 2023 16:00:38 +0200 Subject: [PATCH 06/26] chore: update pot file --- i18n/en.pot | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index e739fac14c..148b9e9dcb 100644 --- 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-03-07T12:07:38.393Z\n" -"PO-Revision-Date: 2023-03-07T12:07:38.393Z\n" +"POT-Creation-Date: 2023-05-30T12:32:59.044Z\n" +"PO-Revision-Date: 2023-05-30T12:32:59.044Z\n" msgid "All items" msgstr "All items" @@ -210,9 +210,6 @@ msgstr "Select a period" msgid "Select years" msgstr "Select years" -msgid "Interpretations" -msgstr "Interpretations" - msgid "" "This visualization can't be deleted because it is used on one or more " "dashboards" From 3fc88632ef0a9dd54ad5d32cad2fcd2fa8139815 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 20 Jun 2023 14:33:42 +0200 Subject: [PATCH 07/26] chore: upgrade @dhis2/analytics to latest --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f9f6f2d7a6..82dccda3f8 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "start-server-and-test": "^2.0.0" }, "dependencies": { - "@dhis2/analytics": "^25.1.11", + "@dhis2/analytics": "^26.0.0", "@dhis2/app-runtime": "^3.7.0", "@dhis2/app-runtime-adapter-d2": "^1.1.0", "@dhis2/app-service-datastore": "^1.0.0-beta.3", diff --git a/yarn.lock b/yarn.lock index efc7c905ba..b7c18e24bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2028,10 +2028,10 @@ classnames "^2.3.1" prop-types "^15.7.2" -"@dhis2/analytics@^25.1.11": - version "25.1.11" - resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-25.1.11.tgz#04c1990798f1c33bebd16849dff4a81523d9e1ce" - integrity sha512-+aLYTbcVsxt5ZVLROJgvljFoLWK31jsS6xWzhwzWTQi+7WGVt5ONRUS45rZBYJas4FQj+SqPhCF6nXCssx7huA== +"@dhis2/analytics@^26.0.0": + version "26.0.0" + resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.0.0.tgz#eaf553370b7e83f604708dbc226e4765b6716ce8" + integrity sha512-jWJIiFfDRfPw9Yf3bRfXusFXLMWlsCOhWoU4ojlUpnve95FPEbbJrt0T5OlHPcKQyY+aMori03hy25982lUS2w== dependencies: "@dhis2/d2-ui-rich-text" "^7.4.0" "@dhis2/multi-calendar-dates" "1.0.0" From cd0614efbb4d1106295629bf57e40df410536de8 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 20 Jun 2023 15:23:42 +0200 Subject: [PATCH 08/26] chore: fix typo in component name --- src/components/MenuBar/MenuBar.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/MenuBar/MenuBar.js b/src/components/MenuBar/MenuBar.js index 4034f29454..75a23f20b5 100644 --- a/src/components/MenuBar/MenuBar.js +++ b/src/components/MenuBar/MenuBar.js @@ -1,6 +1,6 @@ import { FileMenu, - HoverMenubar, + HoverMenuBar, VIS_TYPE_GROUP_ALL, VIS_TYPE_GROUP_CHARTS, UpdateButton, @@ -60,7 +60,7 @@ const UnconnectedMenuBar = ({ dataTest, ...props }, context) => ( /> )} /> - + ( - + ) From 2191f3cbdeaa783b7190e8d29aade4e9a0a31e2d Mon Sep 17 00:00:00 2001 From: Hendrik de Graaf Date: Thu, 22 Jun 2023 11:55:23 +0200 Subject: [PATCH 09/26] fix: adjust e2e element slectors --- cypress/elements/menuBar.js | 7 +- cypress/integration/options/axes.cy.js | 21 ++-- cypress/integration/options/fontStyles.cy.js | 27 ++--- cypress/integration/options/icon.cy.js | 3 +- cypress/integration/options/legend.cy.js | 120 +++++++------------ 5 files changed, 63 insertions(+), 115 deletions(-) diff --git a/cypress/elements/menuBar.js b/cypress/elements/menuBar.js index 22bf72f3e0..dea1005f8a 100644 --- a/cypress/elements/menuBar.js +++ b/cypress/elements/menuBar.js @@ -1,4 +1,4 @@ -const menubarEl = 'app-menubar' +const menubarEl = 'dhis2-analytics-hovermenubar' const updateButton = 'app-menubar-update-button' const optionsButton = 'app-menubar-options-button' @@ -9,3 +9,8 @@ export const clickMenuBarFileButton = () => export const clickMenuBarOptionsButton = () => 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 index d5cc6b99aa..ed98db84b4 100644 --- a/cypress/integration/options/axes.cy.js +++ b/cypress/integration/options/axes.cy.js @@ -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) @@ -108,8 +106,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) @@ -136,8 +133,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) @@ -158,8 +154,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) @@ -180,8 +175,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') @@ -233,8 +227,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 index e3054d0392..c8fd9586bd 100644 --- a/cypress/integration/options/fontStyles.cy.js +++ b/cypress/integration/options/fontStyles.cy.js @@ -129,8 +129,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 +173,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 +218,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 to ${TEST_VALUE}: "${TEST_LABEL}"`, () => { clickTargetLineCheckbox() @@ -279,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 to ${TEST_VALUE}: "${TEST_LABEL}"`, () => { clickBaseLineCheckbox() @@ -336,8 +332,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, @@ -373,8 +368,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, @@ -408,8 +402,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({ @@ -449,8 +442,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') @@ -498,8 +490,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 index a89b631c84..4eb35bdeb8 100644 --- a/cypress/integration/options/icon.cy.js +++ b/cypress/integration/options/icon.cy.js @@ -96,8 +96,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() diff --git a/cypress/integration/options/legend.cy.js b/cypress/integration/options/legend.cy.js index 022ea9e717..1da20be787 100644 --- a/cypress/integration/options/legend.cy.js +++ b/cypress/integration/options/legend.cy.js @@ -102,8 +102,7 @@ describe('Options - Legend', () => { expectVisualizationToBeVisible(VIS_TYPE_COLUMN) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -119,8 +118,7 @@ describe('Options - Legend', () => { ) }) it(`changes legend display strategy to fixed (${TEST_LEGEND_SET})`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() changeDisplayStrategyToFixed() expectLegendDisplayStrategyToBeFixed() @@ -140,8 +138,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it('verifies that options are persisted', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeFixed() expectFixedLegendSetToBe(TEST_LEGEND_SET) }) @@ -180,8 +177,7 @@ describe('Options - Legend', () => { expectSingleValueToNotHaveBackgroundColor() }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -197,8 +193,7 @@ describe('Options - Legend', () => { expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR) }) it('changes legend display style to text color', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() expectLegendDisplayStyleToBeFill() changeDisplayStyleToText() @@ -214,8 +209,7 @@ describe('Options - Legend', () => { expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR) }) it(`changes legend display strategy to fixed (${TEST_LEGEND_SET_WITH_CONTRAST})`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStyleToBeText() expectLegendDisplayStrategyToBeByDataItem() changeDisplayStrategyToFixed() @@ -232,8 +226,7 @@ describe('Options - Legend', () => { expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR) }) it('changes legend display style to background color', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeFixed() expectLegendDisplayStyleToBeText() changeDisplayStyleToFill() @@ -249,8 +242,7 @@ describe('Options - Legend', () => { expectSVSubtitleToHaveColor(EXPECTED_CONTRAST_TEXT_COLOR) }) it(`changes title and subtitle colors`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_STYLE) + openOptionsModal(OPTIONS_TAB_STYLE) changeColor('option-chart-title', EXPECTED_CUSTOM_TITLE_COLOR) changeColor('option-chart-subtitle', EXPECTED_CUSTOM_SUBTITLE_COLOR) clickOptionsModalUpdateButton() @@ -263,8 +255,7 @@ describe('Options - Legend', () => { expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR) }) it('changes legend display style to text color', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeFixed() expectLegendDisplayStyleToBeFill() changeDisplayStyleToText() @@ -280,8 +271,7 @@ describe('Options - Legend', () => { expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR) }) it(`changes legend display strategy to by data item`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStyleToBeText() expectLegendDisplayStrategyToBeFixed() changeDisplayStrategyToByDataItem() @@ -297,8 +287,7 @@ describe('Options - Legend', () => { expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR) }) it('changes legend display style to background color', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) changeDisplayStrategyToByDataItem() expectLegendDisplayStyleToBeText() changeDisplayStyleToFill() @@ -317,8 +306,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it('enables legend key option', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegendKeyOption() expectLegendKeyOptionToBeEnabled() clickOptionsModalUpdateButton() @@ -342,8 +330,7 @@ describe('Options - Legend', () => { expectVisualizationToBeVisible(VIS_TYPE_GAUGE) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -355,8 +342,7 @@ describe('Options - Legend', () => { expectWindowConfigYAxisToHaveColor(EXPECTED_BY_DATA_COLOR) }) it(`changes legend display strategy to fixed (${TEST_LEGEND_SET})`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() expectLegendDisplayStyleToBeFill() changeDisplayStrategyToFixed() @@ -369,8 +355,7 @@ describe('Options - Legend', () => { expectWindowConfigYAxisToHaveColor(EXPECTED_FIXED_COLOR) }) it('changes legend display style to text color', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeFixed() expectFixedLegendSetToBe(TEST_LEGEND_SET) expectLegendDisplayStyleToBeFill() @@ -389,8 +374,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it('verifies that options are persisted', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeFixed() expectFixedLegendSetToBe(TEST_LEGEND_SET) }) @@ -415,8 +399,7 @@ describe('Options - Legend', () => { expectVisualizationToBeVisible(VIS_TYPE_STACKED_COLUMN) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -432,8 +415,7 @@ describe('Options - Legend', () => { ) }) it(`changes legend display strategy to fixed (${TEST_LEGEND_SET})`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() changeDisplayStrategyToFixed() expectLegendDisplayStrategyToBeFixed() @@ -453,8 +435,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it('verifies that options are persisted', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeFixed() expectFixedLegendSetToBe(TEST_LEGEND_SET) }) @@ -490,8 +471,7 @@ describe('Options - Legend', () => { }) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -508,8 +488,7 @@ describe('Options - Legend', () => { }) }) it('changes legend display style to text color', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() expectLegendDisplayStyleToBeFill() changeDisplayStyleToText() @@ -529,8 +508,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it('verifies that options are persisted', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() }) it('enables legend key option', () => { @@ -558,8 +536,7 @@ describe('Options - Legend', () => { expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -592,8 +569,7 @@ describe('Options - Legend', () => { ) }) it('verifies that options are persisted', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStyleToBeText() expectLegendDisplayStrategyToBeFixed() }) @@ -613,8 +589,7 @@ describe('Options - Legend', () => { expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -643,8 +618,7 @@ describe('Options - Legend', () => { expectSingleValueToHaveBackgroundColor(EXPECTED_FIXED_COLOR) }) it('verifies that options are persisted', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStyleToBeFill() expectLegendDisplayStrategyToBeFixed() }) @@ -658,8 +632,7 @@ describe('Options - Legend', () => { expectVisualizationToBeVisible() }) it('enables legend (Column)', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() clickOptionsModalUpdateButton() @@ -669,8 +642,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it('enables legend key option (Column)', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegendKeyOption() expectLegendKeyOptionToBeEnabled() clickOptionsModalUpdateButton() @@ -690,8 +662,7 @@ describe('Options - Legend', () => { expectLegedKeyItemAmountToBe(TEST_ITEMS.length) }) it('disables legend key option (Pivot table)', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegendKeyOption() expectLegendKeyOptionToBeDisabled() clickOptionsModalUpdateButton() @@ -709,8 +680,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it('enables legend key option (Gauge)', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegendKeyOption() expectLegendKeyOptionToBeEnabled() clickOptionsModalUpdateButton() @@ -730,8 +700,7 @@ describe('Options - Legend', () => { expectLegedKeyItemAmountToBe(1) }) it('disables legend key option (Single value)', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegendKeyOption() expectLegendKeyOptionToBeDisabled() clickOptionsModalUpdateButton() @@ -750,8 +719,7 @@ describe('Options - Legend', () => { expectVisualizationToBeVisible(VIS_TYPE_COLUMN) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -825,8 +793,7 @@ describe('Options - Legend', () => { expectSeriesKeyToHaveSeriesKeyItems(2) }) it('enables legend', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -834,8 +801,7 @@ describe('Options - Legend', () => { expectChartTitleToBeVisible() }) it(`changes legend display strategy to fixed (${TEST_ITEMS[1].legendSet})`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() changeDisplayStrategyToFixed() expectLegendDisplayStrategyToBeFixed() @@ -852,8 +818,7 @@ describe('Options - Legend', () => { selectIndicators([TEST_ITEM.name]) clickDimensionModalUpdateButton() expectVisualizationToBeVisible(VIS_TYPE_COLUMN) - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -895,8 +860,7 @@ describe('Options - Legend', () => { expectLegendKeyToBeHidden() }) it(`changes legend display strategy to fixed (${TEST_ITEMS[1].legendSet})`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) expectLegendDisplayStrategyToBeByDataItem() changeDisplayStrategyToFixed() expectLegendDisplayStrategyToBeFixed() @@ -924,8 +888,7 @@ describe('Options - Legend', () => { selectIndicators(TEST_ITEMS.map((item) => item.name)) clickDimensionModalUpdateButton() expectVisualizationToBeVisible(VIS_TYPE_COLUMN) - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) toggleLegend() expectLegendToBeEnabled() expectLegendDisplayStrategyToBeByDataItem() @@ -943,8 +906,7 @@ describe('Options - Legend', () => { ) }) it(`changes all items to type ${VIS_TYPE_LINE}`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_SERIES) + openOptionsModal(OPTIONS_TAB_SERIES) TEST_ITEMS.forEach((item, index) => setItemToType(index, VIS_TYPE_LINE) ) @@ -964,8 +926,7 @@ describe('Options - Legend', () => { expectSeriesKeyToHaveSeriesKeyItems(2) }) it(`changes first item (${TEST_ITEMS[0].name}) to type ${VIS_TYPE_COLUMN}`, () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_SERIES) + openOptionsModal(OPTIONS_TAB_SERIES) setItemToType(0, VIS_TYPE_COLUMN) clickOptionsModalUpdateButton() expectVisualizationToBeVisible() @@ -995,8 +956,7 @@ describe('Options - Legend', () => { selectIndicators([TEST_ITEM.name]) clickDimensionModalUpdateButton() expectVisualizationToBeVisible(VIS_TYPE_COLUMN) - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_SERIES) + openOptionsModal(OPTIONS_TAB_SERIES) setItemToType(2, VIS_TYPE_LINE) clickOptionsModalUpdateButton() expectVisualizationToBeVisible() From 72a97e9195d46890d436a8de6a731cf8437b60eb Mon Sep 17 00:00:00 2001 From: Hendrik de Graaf Date: Thu, 22 Jun 2023 12:20:34 +0200 Subject: [PATCH 10/26] chore: fix missing and redundant imports --- cypress/integration/options/axes.cy.js | 2 +- cypress/integration/options/fontStyles.cy.js | 3 +-- cypress/integration/options/icon.cy.js | 5 ++++- cypress/integration/options/legend.cy.js | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/cypress/integration/options/axes.cy.js b/cypress/integration/options/axes.cy.js index ed98db84b4..13e0b89a3e 100644 --- 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, diff --git a/cypress/integration/options/fontStyles.cy.js b/cypress/integration/options/fontStyles.cy.js index c8fd9586bd..ae7ca0a68f 100644 --- 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, diff --git a/cypress/integration/options/icon.cy.js b/cypress/integration/options/icon.cy.js index 4eb35bdeb8..e394e78de1 100644 --- a/cypress/integration/options/icon.cy.js +++ b/cypress/integration/options/icon.cy.js @@ -28,7 +28,10 @@ import { unselectAllItemsByButton, } from '../../elements/dimensionModal/index.js' import { openDimension } from '../../elements/dimensionsPanel.js' -import { clickMenuBarOptionsButton } from '../../elements/menuBar.js' +import { + clickMenuBarOptionsButton, + openOptionsModal, +} from '../../elements/menuBar.js' import { OPTIONS_TAB_LEGEND, OPTIONS_TAB_STYLE, diff --git a/cypress/integration/options/legend.cy.js b/cypress/integration/options/legend.cy.js index 1da20be787..03d5be7928 100644 --- a/cypress/integration/options/legend.cy.js +++ b/cypress/integration/options/legend.cy.js @@ -33,13 +33,13 @@ import { import { clickMenuBarOptionsButton, clickMenuBarUpdateButton, + openOptionsModal, } from '../../elements/menuBar.js' import { changeDisplayStrategyToFixed, changeDisplayStyleToText, changeFixedLegendSet, clickOptionsModalUpdateButton, - clickOptionsTab, toggleLegend, expectFixedLegendSetToBe, expectLegendDisplayStrategyToBeByDataItem, From a2c29edc02691271f8a601e0bed7d2bb65060523 Mon Sep 17 00:00:00 2001 From: Hendrik de Graaf Date: Thu, 22 Jun 2023 12:26:09 +0200 Subject: [PATCH 11/26] chore: fix odd linter error which only fires on ci --- cypress/elements/menuBar.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/cypress/elements/menuBar.js b/cypress/elements/menuBar.js index dea1005f8a..d0aa8cd2f7 100644 --- a/cypress/elements/menuBar.js +++ b/cypress/elements/menuBar.js @@ -7,10 +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() + clickMenuBarOptionsButton() return cy.getBySel('options-menu-list').contains(section).click() } From 1d5d8cd2e878866fc28405c16111c2b82619ed26 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 13:47:23 +0200 Subject: [PATCH 12/26] fix: adjust data test name --- .../VisualizationOptions/VisualizationOptionsManager.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VisualizationOptions/VisualizationOptionsManager.js b/src/components/VisualizationOptions/VisualizationOptionsManager.js index bf99e15ae2..3bc6608ef0 100644 --- a/src/components/VisualizationOptions/VisualizationOptionsManager.js +++ b/src/components/VisualizationOptions/VisualizationOptionsManager.js @@ -62,7 +62,7 @@ const VisualizationOptionsManager = ({ label={i18n.t('Options')} dataTest={'app-menubar-options-button'} > - + {optionsConfig.map(({ label, key }) => ( Date: Thu, 22 Jun 2023 15:28:06 +0200 Subject: [PATCH 13/26] chore: fix lines e2e test --- cypress/integration/options/lines.cy.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/cypress/integration/options/lines.cy.js b/cypress/integration/options/lines.cy.js index 839925efe5..ea8fef0357 100644 --- a/cypress/integration/options/lines.cy.js +++ b/cypress/integration/options/lines.cy.js @@ -8,10 +8,9 @@ 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, clickTrendLineCheckbox, OPTIONS_TAB_DATA, selectTrendLineType, @@ -51,8 +50,7 @@ describe('Options - Lines', () => { trendLineTypes.forEach((trendLineType, index) => { describe(trendLineType.name, () => { it('opens Options -> Data', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_DATA) + openOptionsModal(OPTIONS_TAB_DATA) }) if (index === 0) { it('enables trendline', () => { @@ -79,7 +77,7 @@ describe('Options - Lines', () => { }) }) }) - /* TODO: + /* TODO: - Test base line and target line like trend line (above) - Pie, PT, SV shouldn't have the lines section in options - Gauge should only display base and target line (no trend line) From a0aeadbb3b8cc9945b2785bd1ee4f7b36f5e7449 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 15:43:08 +0200 Subject: [PATCH 14/26] fix: adjust closeFileMenuWithClick command --- cypress/elements/fileMenu/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/cypress/elements/fileMenu/index.js b/cypress/elements/fileMenu/index.js index db31dfaa09..515ba4fffb 100644 --- a/cypress/elements/fileMenu/index.js +++ b/cypress/elements/fileMenu/index.js @@ -3,7 +3,6 @@ import { clickMenuBarFileButton } 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,8 +15,7 @@ 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 }) From 3fab2808c01ee2837fbc69f43d7f01c08761d28b Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 16:06:59 +0200 Subject: [PATCH 15/26] chore: fix failing legens e2e test --- cypress/integration/options/legend.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/options/legend.cy.js b/cypress/integration/options/legend.cy.js index 03d5be7928..ceeadcc43e 100644 --- a/cypress/integration/options/legend.cy.js +++ b/cypress/integration/options/legend.cy.js @@ -745,7 +745,7 @@ describe('Options - Legend', () => { ) }) it('legend options are not available', () => { - clickMenuBarOptionsButton() + openOptionsModal() expectOptionsTabToBeHidden(OPTIONS_TAB_LEGEND) clickOptionsModalHideButton() }) From ad2b972c4a071408057c31ec9b8619cc91552403 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 16:08:48 +0200 Subject: [PATCH 16/26] chore: fix legend e2e test even better --- cypress/integration/options/legend.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/integration/options/legend.cy.js b/cypress/integration/options/legend.cy.js index ceeadcc43e..1fe5952de5 100644 --- a/cypress/integration/options/legend.cy.js +++ b/cypress/integration/options/legend.cy.js @@ -771,7 +771,7 @@ describe('Options - Legend', () => { ) }) it('legend options are not available', () => { - clickMenuBarOptionsButton() + openOptionsModal() expectOptionsTabToBeHidden(OPTIONS_TAB_LEGEND) }) it('legend key is hidden', () => { From c956c6c34c69c1854209387a332609b145496c58 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 16:14:55 +0200 Subject: [PATCH 17/26] chore: fix scatter e2e --- cypress/integration/visTypes/scatter.cy.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/cypress/integration/visTypes/scatter.cy.js b/cypress/integration/visTypes/scatter.cy.js index 88dea58ccd..6fba12f094 100644 --- a/cypress/integration/visTypes/scatter.cy.js +++ b/cypress/integration/visTypes/scatter.cy.js @@ -36,12 +36,11 @@ import { openDimensionOnAxis, } from '../../elements/layout.js' import { - clickMenuBarOptionsButton, clickMenuBarUpdateButton, + openOptionsModal, } from '../../elements/menuBar.js' import { clickOptionsModalUpdateButton, - clickOptionsTab, clickOutliersCheckbox, OPTIONS_TAB_AXES, OPTIONS_TAB_OUTLIERS, @@ -166,8 +165,7 @@ describe('using a Scatter chart', () => { max: 200, }, ] - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_AXES) + openOptionsModal(OPTIONS_TAB_AXES) TEST_AXES.forEach((test) => { switchAxesTabTo(test.label) setAxisRangeMinValue(test.axis, test.min) @@ -181,8 +179,7 @@ describe('using a Scatter chart', () => { expectWindowConfigXAxisToHaveRangeMaxValue(TEST_AXES[1].max) }) it('Options -> Outliers -> enables outliers', () => { - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_OUTLIERS) + openOptionsModal(OPTIONS_TAB_OUTLIERS) clickOutliersCheckbox() // TODO: Set more outlier options clickOptionsModalUpdateButton() From e2653ef1efbfd5275952d2f8dd791b5551649641 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 16:16:26 +0200 Subject: [PATCH 18/26] chore: fix icon e2e --- cypress/integration/options/icon.cy.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/cypress/integration/options/icon.cy.js b/cypress/integration/options/icon.cy.js index e394e78de1..b08e58ed60 100644 --- a/cypress/integration/options/icon.cy.js +++ b/cypress/integration/options/icon.cy.js @@ -129,8 +129,7 @@ describe('Icon', () => { }) it('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 +175,7 @@ describe('Icon', () => { expectSingleValueToHaveIconColor('#ffffff') // switch to apply legend color to text - clickMenuBarOptionsButton() - clickOptionsTab(OPTIONS_TAB_LEGEND) + openOptionsModal(OPTIONS_TAB_LEGEND) changeDisplayStyleToText() clickOptionsModalUpdateButton() From ea645633577e9458bbd2c8df6555ddad02405a90 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 16:32:25 +0200 Subject: [PATCH 19/26] chore: fix start e2e --- cypress/elements/fileMenu/index.js | 7 +++---- cypress/elements/menuBar.js | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/cypress/elements/fileMenu/index.js b/cypress/elements/fileMenu/index.js index 515ba4fffb..cec32b8baf 100644 --- a/cypress/elements/fileMenu/index.js +++ b/cypress/elements/fileMenu/index.js @@ -1,8 +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' export const FILE_MENU_BUTTON_NEW = 'New' export const FILE_MENU_BUTTON_OPEN = 'Open…' @@ -18,8 +17,8 @@ export const FILE_MENU_BUTTON_DELETE = 'Delete' 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 index d0aa8cd2f7..4811c77b56 100644 --- a/cypress/elements/menuBar.js +++ b/cypress/elements/menuBar.js @@ -1,4 +1,4 @@ -const menubarEl = 'dhis2-analytics-hovermenubar' +export const menubarEl = 'dhis2-analytics-hovermenubar' const updateButton = 'app-menubar-update-button' const optionsButton = 'app-menubar-options-button' From 506153bd41e60465c795fda1e81efbd774efe3a5 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 16:56:18 +0200 Subject: [PATCH 20/26] chore: clean up unused imports --- cypress/integration/options/icon.cy.js | 5 +---- cypress/integration/options/legend.cy.js | 1 - 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/cypress/integration/options/icon.cy.js b/cypress/integration/options/icon.cy.js index b08e58ed60..563190a5af 100644 --- a/cypress/integration/options/icon.cy.js +++ b/cypress/integration/options/icon.cy.js @@ -28,10 +28,7 @@ import { unselectAllItemsByButton, } from '../../elements/dimensionModal/index.js' import { openDimension } from '../../elements/dimensionsPanel.js' -import { - clickMenuBarOptionsButton, - openOptionsModal, -} from '../../elements/menuBar.js' +import { openOptionsModal } from '../../elements/menuBar.js' import { OPTIONS_TAB_LEGEND, OPTIONS_TAB_STYLE, diff --git a/cypress/integration/options/legend.cy.js b/cypress/integration/options/legend.cy.js index 1fe5952de5..4b1d67b9cd 100644 --- a/cypress/integration/options/legend.cy.js +++ b/cypress/integration/options/legend.cy.js @@ -31,7 +31,6 @@ import { openDimension, } from '../../elements/layout.js' import { - clickMenuBarOptionsButton, clickMenuBarUpdateButton, openOptionsModal, } from '../../elements/menuBar.js' From b5e9b94d1cedf2a4449aca0b020350aae09da867 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Thu, 22 Jun 2023 17:37:49 +0200 Subject: [PATCH 21/26] fix: remove divider from plain data source submenu --- src/components/DownloadMenu/PlainDataSourceSubMenu.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/DownloadMenu/PlainDataSourceSubMenu.js b/src/components/DownloadMenu/PlainDataSourceSubMenu.js index 709770d7e0..ac814894bb 100644 --- a/src/components/DownloadMenu/PlainDataSourceSubMenu.js +++ b/src/components/DownloadMenu/PlainDataSourceSubMenu.js @@ -21,7 +21,10 @@ export const PlainDataSourceSubMenu = ({ return ( - + From fa76f45f33860961d3d329a74607c7f9e14b3852 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 27 Jun 2023 16:28:05 +0200 Subject: [PATCH 22/26] chore: upgrade @dhis2/analytics to get toolbar UI improvements --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 82dccda3f8..b30c4b713c 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "start-server-and-test": "^2.0.0" }, "dependencies": { - "@dhis2/analytics": "^26.0.0", + "@dhis2/analytics": "^26.0.6", "@dhis2/app-runtime": "^3.7.0", "@dhis2/app-runtime-adapter-d2": "^1.1.0", "@dhis2/app-service-datastore": "^1.0.0-beta.3", diff --git a/yarn.lock b/yarn.lock index b7c18e24bb..7178d52600 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2028,10 +2028,10 @@ classnames "^2.3.1" prop-types "^15.7.2" -"@dhis2/analytics@^26.0.0": - version "26.0.0" - resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.0.0.tgz#eaf553370b7e83f604708dbc226e4765b6716ce8" - integrity sha512-jWJIiFfDRfPw9Yf3bRfXusFXLMWlsCOhWoU4ojlUpnve95FPEbbJrt0T5OlHPcKQyY+aMori03hy25982lUS2w== +"@dhis2/analytics@^26.0.6": + version "26.0.6" + resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.0.6.tgz#d852b9ba9e1517e36cee62973fad6d14db963dc4" + integrity sha512-yCHLvuta1wrY1mhhC7jeByx3Si2ySfMrSsIrC6kx13aOXIH++84DqjxB2raeBi2euGPuXNHVlBH16vIhgMPYGA== dependencies: "@dhis2/d2-ui-rich-text" "^7.4.0" "@dhis2/multi-calendar-dates" "1.0.0" From a4cf5747603152450e1dc7b310ec3e32a147ee1c Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 27 Jun 2023 16:29:01 +0200 Subject: [PATCH 23/26] fix: tweak viz type selector styles to match toolbar --- .../VisualizationTypeSelector.js | 16 +++++++++++++--- .../styles/VisualizationTypeSelector.module.css | 13 ++++++++++++- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js index 7952893703..44c89e2aed 100644 --- a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js +++ b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js @@ -2,6 +2,7 @@ import { visTypeDisplayNames, ToolbarSidebar } from '@dhis2/analytics' import { useSetting } from '@dhis2/app-service-datastore' import i18n from '@dhis2/d2-i18n' import { Divider, Popper, Layer } from '@dhis2/ui' +import cx from 'classnames' import PropTypes from 'prop-types' import React, { useState, createRef } from 'react' import { connect } from 'react-redux' @@ -101,14 +102,23 @@ const UnconnectedVisualizationTypeSelector = (
- + {visTypeDisplayNames[visualizationType]} - +
diff --git a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css index a56b0a1f85..cdbcfef3ba 100644 --- a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css +++ b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css @@ -3,6 +3,10 @@ margin-left: auto; } +.arrowIcon.listIsOpen { + transform: rotate(180deg); +} + .button { padding: 7px var(--spacers-dp8); display: flex; @@ -13,8 +17,15 @@ flex-grow: 1 } -.button > span { +.button:hover, +.button.listIsOpen { + background-color: var(--colors-grey200); +} + +.button > .selectedVizTypeLabel { font-size: 14px; + padding-top: 1px; + user-select: none; } .cardContainer { From 3e96e3481103bd426ab853b21b01ba66c6feafb1 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Tue, 27 Jun 2023 16:30:30 +0200 Subject: [PATCH 24/26] chore: remove yarn start command which was only used for development --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index b30c4b713c..c25dc8c965 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "build": "d2-app-scripts build", "start": "d2-app-scripts start", "start:nobrowser": "BROWSER=none yarn start", - "start:localanalytics": "cd ../analytics && yarn build && cd ../data-visualizer-app && rm -rf node_modules/@dhis2/analytics/build && cp -R ../analytics/build/ node_modules/@dhis2/analytics/build && yarn start", "test": "d2-app-scripts test", "coverage": "yarn test --coverage", "deploy": "d2-app-scripts deploy", From 89f9932da5f3702b8c64b5b4331e20eb7e59ec36 Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Wed, 28 Jun 2023 14:10:18 +0200 Subject: [PATCH 25/26] chore: upgrade analytics to get decreased padding --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index c25dc8c965..06c8e5eb87 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "start-server-and-test": "^2.0.0" }, "dependencies": { - "@dhis2/analytics": "^26.0.6", + "@dhis2/analytics": "^26.0.7", "@dhis2/app-runtime": "^3.7.0", "@dhis2/app-runtime-adapter-d2": "^1.1.0", "@dhis2/app-service-datastore": "^1.0.0-beta.3", diff --git a/yarn.lock b/yarn.lock index 7178d52600..9dec001e41 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2028,10 +2028,10 @@ classnames "^2.3.1" prop-types "^15.7.2" -"@dhis2/analytics@^26.0.6": - version "26.0.6" - resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.0.6.tgz#d852b9ba9e1517e36cee62973fad6d14db963dc4" - integrity sha512-yCHLvuta1wrY1mhhC7jeByx3Si2ySfMrSsIrC6kx13aOXIH++84DqjxB2raeBi2euGPuXNHVlBH16vIhgMPYGA== +"@dhis2/analytics@^26.0.7": + version "26.0.7" + resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.0.7.tgz#d0883c74fc909359d1ce01e82c267ba99e8186a5" + integrity sha512-NJ//FeWWn6yy1bDK3lcMPdwOWVhLBQyh1vmj+S0/k86iKRfF+8tmZwinZLVLebzV3DRjSoWSPCzwU6zVDedjWg== dependencies: "@dhis2/d2-ui-rich-text" "^7.4.0" "@dhis2/multi-calendar-dates" "1.0.0" From 9e044c1dacf53dc5fe004fe49c603443a75def0f Mon Sep 17 00:00:00 2001 From: HendrikThePendric Date: Mon, 3 Jul 2023 16:28:39 +0200 Subject: [PATCH 26/26] fix: ensure `MenuSectionHeader` is `dense` when in `HoverMenuBar` --- src/components/DownloadMenu/AdvancedSubMenu.js | 10 ++++++++-- src/components/DownloadMenu/DownloadMenu.js | 5 ++++- src/components/DownloadMenu/GraphicsMenu.js | 1 + src/components/DownloadMenu/PlainDataSourceSubMenu.js | 1 + src/components/DownloadMenu/TableMenu.js | 1 + 5 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/components/DownloadMenu/AdvancedSubMenu.js b/src/components/DownloadMenu/AdvancedSubMenu.js index 5ee8566b62..0f536d3aaf 100644 --- a/src/components/DownloadMenu/AdvancedSubMenu.js +++ b/src/components/DownloadMenu/AdvancedSubMenu.js @@ -21,7 +21,10 @@ export const AdvancedSubMenu = ({ return ( - + @@ -42,7 +45,10 @@ export const AdvancedSubMenu = ({ }) } /> - + diff --git a/src/components/DownloadMenu/DownloadMenu.js b/src/components/DownloadMenu/DownloadMenu.js index 3fb7f201f3..bc7f5320a1 100644 --- a/src/components/DownloadMenu/DownloadMenu.js +++ b/src/components/DownloadMenu/DownloadMenu.js @@ -32,7 +32,10 @@ const DownloadMenu = ({ onDownload={onDownloadImage} /> )} - + { key="graphics-header" label={i18n.t('Graphics')} hideDivider + dense={hoverable} /> { key="table-header" label={i18n.t('Table layout')} hideDivider + dense={hoverable} />