fix: control bar refactor (#1529)

Fixes:

* in small screen, make dashboard non-interactive when control bar is expanded (DHIS2-10436)
* in small screen control bar horizontal scrollbar only shows half height (DHIS2-10417)
* control bar now resizes instantly when moving between portrait and landscape (DHIS2-10418)
* control bar fixed while dashboard and header bar scroll in phone landscape orientation (DHIS2-10423)

Refactor:
* remove most height calculations for dashboard and control bar. This includes for the PrintDashboards. Use flexbox and margins instead.
* separate control bar drag functionality into a DragHandle component
** Most code in DragHandle hasn't changed from its original form in the deleted ControlBar file
* delete ControlBar and move functionality (related to userRows) to DashboardsBar together. Most height calcs removed, and instead css to calculate controlbar height.
* Filter component is kind of complex now, as it renders both a Filter for sm (collapsed and expanded) and lg screens (controlled by css display).

cypress/integration/ui/responsive_dashboard/responsive_dashboard.js

@@ -47,16 +47,16 @@ Then('the wide screen view is shown', () => {
 
 Then('the small screen edit view is shown', () => {
     //no controlbar
-    cy.contains('Save changes').should('not.exist')
-    cy.contains('Exit without saving').should('not.exist')
+    cy.contains('Save changes').should('not.be.visible')
+    cy.contains('Exit without saving').should('not.be.visible')
 
     //notice box and no dashboard
     cy.contains('dashboards on small screens is not supported').should(
         'be.visible'
     )
     // no title or item grid
-    cy.get('[data-test="dashboard-title-input"]').should('not.exist')
-    cy.get('.react-grid-layout').should('not.exist')
+    cy.get('[data-test="dashboard-title-input"]').should('not.be.visible')
+    cy.get('.react-grid-layout').should('not.be.visible')
 })
 
 Then('the wide screen edit view is shown', () => {
@@ -93,7 +93,7 @@ Then('the {string} dashboard displays in default view mode', title => {
     })
 
     cy.get(dashboardTitleSel).should('be.visible').and('contain', title)
-    cy.get(chartSel, EXTENDED_TIMEOUT).should('exist')
+    cy.get(chartSel, EXTENDED_TIMEOUT).should('be.visible')
 })
 
 // Scenario: I change the url to 'edit' while in small screen

cypress/integration/ui/view_dashboard.feature

@@ -38,3 +38,9 @@ Feature: Viewing dashboards
         Then the print one-item-per-page displays for "Delivery" dashboard
         When I click to exit print preview
         Then the "Delivery" dashboard displays in view mode
+
+    @mutating
+    Scenario: I change the height of the control bar
+        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

cypress/integration/ui/view_dashboard/control_bar.js

@@ -0,0 +1,31 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { EXTENDED_TIMEOUT } from '../../../support/utils'
+import {
+    dragHandleSel,
+    dashboardsBarSel,
+} from '../../../selectors/viewDashboard'
+
+// Scenario: I change the height of the control bar
+When('I drag to increase 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)
+})
+
+Then('the control bar height should be updated', () => {
+    cy.visit('/')
+    cy.get(dashboardsBarSel, EXTENDED_TIMEOUT)
+        .invoke('height')
+        .should('eq', 231)
+
+    // restore the original height
+    cy.get(dragHandleSel)
+        .trigger('mousedown')
+        .trigger('mousemove', { clientY: 71 })
+        .trigger('mouseup')
+    cy.wait('@putRows').its('response.statusCode').should('eq', 201)
+})

cypress/integration/ui/view_dashboard/index.js

@@ -3,26 +3,27 @@ import { dashboards } from '../../../assets/backends/sierraLeone_236'
 import {
     dashboardTitleSel,
     dashboardChipSel,
+    dashboardSearchInputSel,
 } from '../../../selectors/viewDashboard'
 
 When('I select the Immunization dashboard', () => {
     cy.get(dashboardChipSel).contains('Immun').click()
 })
 
 When('I search for dashboards containing Immunization', () => {
-    cy.get('[data-test="search-dashboard-input"]').type('Immun')
+    cy.get(dashboardSearchInputSel).type('Immun')
 })
 
 Then('Immunization and Immunization data dashboards are choices', () => {
     cy.get(dashboardChipSel).should('be.visible').and('have.length', 2)
 })
 
 When('I press enter in the search dashboard field', () => {
-    cy.get('[data-test="search-dashboard-input"]').type('{enter}')
+    cy.get(dashboardSearchInputSel).type('{enter}')
 })
 
 When('I search for dashboards containing Noexist', () => {
-    cy.get('[data-test="search-dashboard-input"]').type('Noexist')
+    cy.get(dashboardSearchInputSel).type('Noexist')
 })
 Then('no dashboards are choices', () => {
     cy.get(dashboardChipSel).should('not.exist')

cypress/selectors/viewDashboard.js

@@ -2,10 +2,15 @@
 export const dashboardChipSel = '[data-test="dashboard-chip"]'
 export const newDashboardLinkSel = '[data-test="link-new-dashboard"]'
 export const chipStarSel = '[data-test="dhis2-uicore-chip-icon"]'
+export const dashboardSearchInputSel =
+    'input:visible[placeholder="Search for a dashboard"]'
 
 // Active dashboard
 export const dashboardTitleSel = '[data-test="view-dashboard-title"]'
 export const dashboardDescriptionSel = '[data-test="dashboard-description"]'
 export const starSel = '[data-test="button-star-dashboard"]'
 export const dashboardStarredSel = '[data-test="dashboard-starred"]'
 export const dashboardUnstarredSel = '[data-test="dashboard-unstarred"]'
+
+export const dragHandleSel = '[data-test="controlbar-drag-handle"]'
+export const dashboardsBarSel = '[data-test="dashboards-bar"]'

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: 2021-02-05T15:43:33.906Z\n"
-"PO-Revision-Date: 2021-02-05T15:43:33.906Z\n"
+"POT-Creation-Date: 2021-02-15T14:41:50.992Z\n"
+"PO-Revision-Date: 2021-02-15T14:41:50.992Z\n"
 
 msgid "Untitled dashboard"
 msgstr ""
@@ -237,13 +237,13 @@ msgstr ""
 msgid "Failed to star the dashboard"
 msgstr ""
 
-msgid "Edit"
+msgid "More"
 msgstr ""
 
-msgid "Share"
+msgid "Edit"
 msgstr ""
 
-msgid "More"
+msgid "Share"
 msgstr ""
 
 msgid "Dashboard layout"

src/components/App.css

@@ -1,9 +1,17 @@
-/* control bar variables: height */
+/* control bar variables */
 :root {
-    --controlbar-showmore-height: 24px;
-    --headerbar-height: 48px;
-    --searchbar-height: 40px;
-    --drag-handle-height: 7px;
+    --user-rows-count: 1;
+    --controlbar-padding: 31px;
+    --row-height: 40px;
+    --min-rows-height: calc(
+        var(--controlbar-padding) + (1 * var(--row-height))
+    );
+    --max-rows-height: calc(
+        var(--controlbar-padding) + (10 * var(--row-height))
+    );
+    --user-rows-height: calc(
+        var(--controlbar-padding) + (var(--user-rows-count) * var(--row-height))
+    );
 }
 
 body {