fix: pass callback to handle expanded flag everywhere DashboardsBar is used [DHIS2-11031]

cypress/elements/viewDashboard.js

@@ -14,6 +14,7 @@ export const dashboardsBarSel = '[data-test="dashboards-bar"]'
 
 // Active dashboard
 export const dashboardTitleSel = '[data-test="view-dashboard-title"]'
+export const dashboardsBarContainerSel = '[data-test="dashboardsbar-container"]'
 export const dashboardDescriptionSel = '[data-test="dashboard-description"]'
 export const starSel = '[data-test="button-star-dashboard"]'
 export const dashboardStarredSel = '[data-test="dashboard-starred"]'

cypress/integration/view/view_dashboard.feature

@@ -43,7 +43,20 @@ Feature: Viewing dashboards
         Given I open the "Delivery" dashboard with shapes removed
         Then the "Delivery" dashboard displays in view mode
 
+    @mutating
+    Scenario: I expand the control bar
+        Given I open the "Delivery" dashboard
+        Then the control bar should be at collapsed height
+        When I toggle show more dashboards
+        Then the control bar should be expanded to full height
 
+    @mutating
+    Scenario: I expand the control bar when dashboard not found
+        Given I type an invalid dashboard id in the browser url
+        Then a message displays informing that the dashboard is not found
+        And the control bar should be at collapsed height
+        When I toggle show more dashboards
+        Then the control bar should be expanded to full height
 
 # TODO: flaky test
 # @mutating

cypress/integration/view/view_dashboard/toggle_show_more_dashboards.js

@@ -1,6 +1,46 @@
-import { When } from 'cypress-cucumber-preprocessor/steps'
-import { showMoreLessSel } from '../../../elements/viewDashboard'
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+import {
+    dashboardTitleSel,
+    dashboardsBarContainerSel,
+    showMoreLessSel,
+} from '../../../elements/viewDashboard'
+import { getApiBaseUrl } from '../../../support/server/utils'
+import { EXTENDED_TIMEOUT } from '../../../support/utils'
+
+const MIN_DASHBOARDS_BAR_HEIGHT = 71
+const MAX_DASHBOARDS_BAR_HEIGHT = 431
+
+beforeEach(() => {
+    cy.request({
+        method: 'PUT',
+        url: `${getApiBaseUrl()}/api/userDataStore/dashboard/controlBarRows`,
+        headers: {
+            'content-type': 'application/json',
+        },
+        body: '1',
+    }).then(response => expect(response.status).to.equal(201))
+})
 
 When('I toggle show more dashboards', () => {
     cy.get(showMoreLessSel).click()
 })
+
+Given('I type an invalid dashboard id in the browser url', () => {
+    cy.visit('#/invalid', EXTENDED_TIMEOUT)
+})
+
+Then('a message displays informing that the dashboard is not found', () => {
+    cy.contains('Requested dashboard not found').should('be.visible')
+    cy.get(dashboardTitleSel).should('not.exist')
+})
+Then('the control bar should be at collapsed height', () => {
+    cy.get(dashboardsBarContainerSel, EXTENDED_TIMEOUT)
+        .invoke('height')
+        .should('eq', MIN_DASHBOARDS_BAR_HEIGHT)
+})
+
+Then('the control bar should be expanded to full height', () => {
+    cy.get(dashboardsBarContainerSel, EXTENDED_TIMEOUT)
+        .invoke('height')
+        .should('eq', MAX_DASHBOARDS_BAR_HEIGHT)
+})

src/pages/view/CacheableViewDashboard.js

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Layer, CenteredContent, CircularLoader } from '@dhis2/ui'
 import isEmpty from 'lodash/isEmpty'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useState } from 'react'
 import { connect } from 'react-redux'
 import NoContentMessage from '../../components/NoContentMessage'
 import { getPreferredDashboardId } from '../../modules/localStorage'
@@ -20,6 +20,8 @@ const CacheableViewDashboard = ({
     dashboardsIsEmpty,
     username,
 }) => {
+    const [dashboardsBarExpanded, setDashboardsBarExpanded] = useState(false)
+
     if (!dashboardsLoaded) {
         return (
             <Layer translucent>
@@ -30,25 +32,23 @@ const CacheableViewDashboard = ({
         )
     }
 
-    if (dashboardsIsEmpty) {
+    if (dashboardsIsEmpty || id === null) {
         return (
             <>
-                <DashboardsBar />
-                <NoContentMessage
-                    text={i18n.t(
-                        'No dashboards found. Use the + button to create a new dashboard.'
-                    )}
+                <DashboardsBar
+                    expanded={dashboardsBarExpanded}
+                    onExpandedChanged={expanded =>
+                        setDashboardsBarExpanded(expanded)
+                    }
                 />
-            </>
-        )
-    }
-
-    if (id === null) {
-        return (
-            <>
-                <DashboardsBar />
                 <NoContentMessage
-                    text={i18n.t('Requested dashboard not found')}
+                    text={
+                        dashboardsIsEmpty
+                            ? i18n.t(
+                                  'No dashboards found. Use the + button to create a new dashboard.'
+                              )
+                            : i18n.t('Requested dashboard not found')
+                    }
                 />
             </>
         )

src/pages/view/DashboardsBar/DashboardsBar.js

@@ -90,7 +90,10 @@ const DashboardsBar = ({
             className={expanded ? classes.expanded : classes.collapsed}
             data-test="dashboards-bar"
         >
-            <div className={cx(classes.container)}>
+            <div
+                className={cx(classes.container)}
+                data-test="dashboardsbar-container"
+            >
                 <div className={classes.content} ref={ref}>
                     <Content
                         onChipClicked={cancelExpanded}