fix: expanded control bar not resizing on drag [DHIS2-10795]

cypress/integration/common/toggle_show_more_dashboards.js

@@ -0,0 +1,5 @@
+import { When } from 'cypress-cucumber-preprocessor/steps'
+
+When('I toggle show more dashboards', () => {
+    cy.get('[data-test="showmore-button"]').click()
+})

cypress/integration/ui/view_dashboard.feature

@@ -44,3 +44,10 @@ Feature: Viewing dashboards
         Given I open the "Delivery" dashboard
         When I drag to increase the height of the control bar
         Then the control bar height should be updated
+
+    @mutating
+    Scenario: I change the height of an expanded control bar
+        Given I open the "Delivery" dashboard
+        When I toggle show more dashboards
+        And I drag to decrease the height of the control bar
+        Then the control bar height should be updated

cypress/integration/ui/view_dashboard/control_bar.js

@@ -29,3 +29,13 @@ Then('the control bar height should be updated', () => {
         .trigger('mouseup')
     cy.wait('@putRows').its('response.statusCode').should('eq', 201)
 })
+
+When('I drag to decrease the height of the control bar', () => {
+    cy.intercept('PUT', '/userDataStore/dashboard/controlBarRows').as('putRows')
+    cy.get(dragHandleSel, EXTENDED_TIMEOUT)
+        .trigger('mousedown')
+        .trigger('mousemove', { clientY: 300 })
+        .trigger('mouseup')
+
+    cy.wait('@putRows').its('response.statusCode').should('eq', 201)
+})

src/components/ControlBar/ViewControlBar/DashboardsBar.js

@@ -30,12 +30,16 @@ const DashboardsBar = ({
 
     const rootElement = document.documentElement
 
-    const adjustRows = newHeight => {
+    const adjustRows = mouseYPos => {
         const newRows = Math.max(
             MIN_ROW_COUNT,
-            getRowsFromHeight(newHeight - 52) // don't rush the transition to a bigger row count
+            getRowsFromHeight(mouseYPos - 52) // don't rush the transition to a bigger row count
         )
 
+        if (newRows < MAX_ROW_COUNT) {
+            onExpandedChanged(false)
+        }
+
         if (newRows !== userRows) {
             updateUserRows(Math.min(newRows, MAX_ROW_COUNT))
             userRowsChanged.current = true

src/components/ControlBar/ViewControlBar/DragHandle.js

@@ -46,4 +46,4 @@ DragHandle.propTypes = {
     onHeightChanged: PropTypes.func,
 }
 
-export default DragHandle
+export default React.memo(DragHandle, () => true)

src/components/ControlBar/ViewControlBar/controlBarDimensions.js

@@ -3,7 +3,7 @@ const PADDING_TOP = 10
 const SHOWMORE_BUTTON_HEIGHT = 21 // 27px - 6px below bottom edge of ctrlbar
 
 export const getRowsFromHeight = height => {
-    return Math.floor(
+    return Math.round(
         (height - SHOWMORE_BUTTON_HEIGHT - PADDING_TOP) / ROW_HEIGHT
     )
 }