fix: ctrl bar covered sharing dialog and cypress tests [DHIS2-10691] (#…

…1652)

The z-index was causing the ctrl bar to cover the sharing dialog, which overlay has a lower z-index. The z-index on the control bar is only needed when it is expanded on small screen, in which case the Sharing dialog is not an option anyway.

Cypress test added.

cypress/integration/ui/edit_dashboard.feature

@@ -24,6 +24,7 @@ Feature: Creating, editing and deleting dashboard
     @mutating
     Scenario: I toggle show description
         Given I open existing dashboard
+        # And the description is not shown
         Then dashboard displays in view mode
         And the dashboard description is not displayed
         When I click to show description
@@ -39,26 +40,31 @@ Feature: Creating, editing and deleting dashboard
         And the chart item is displayed
         Then no analytics requests are made when item is moved
 
-    # TODO: enable test when https://github.com/dhis2/dhis2-core/pull/7538 is merged
-    # @mutating
-    # Scenario: I add translations to a dashboard and save dashboard
-    #     Given instance has db language set to Norwegian
-    #     Given I open existing dashboard
-    #     When I choose to edit dashboard
-    #     And I add translations for dashboard name and description
-    #     And dashboard is saved
-    #     Then Norwegian title and description are displayed
+    @mutating
+    Scenario: I add translations to a dashboard and save dashboard
+        Given I open existing dashboard
+        When I choose to edit dashboard
+        And I add translations for dashboard name and description
+        And dashboard is saved
+        Then Norwegian title and description are displayed
 
     @mutating
     Scenario: I add translations to a dashboard and discard dashboard changes
-        Given instance has db language set to Norwegian
         Given I open existing dashboard
         When I choose to edit dashboard
         And I add translations for dashboard name and description
         And I click Exit without saving
         Then Norwegian title and description are displayed
 
     @mutating
+    Scenario: I change sharing settings of a dashboard
+        Given I open existing dashboard
+        When I change sharing settings
+        And I choose to edit dashboard
+        And dashboard is saved
+        Then the new sharing settings should be preserved
+
+    @nonmutating
     Scenario: I cancel a delete dashboard action
         Given I open existing dashboard
         When I choose to edit dashboard

cypress/integration/ui/edit_dashboard/edit_dashboard.js

@@ -33,10 +33,6 @@ const getRouteFromHash = hash => {
     return hash.slice(lastSlashIdx + 1)
 }
 
-const toggleShowMoreButton = () => {
-    cy.get('[data-test="showmore-button"]').click()
-}
-
 /*
 Scenario: I create a new dashboard
 */
@@ -91,7 +87,6 @@ Then('different dashboard displays in view mode', () => {
 })
 
 Given('I open existing dashboard', () => {
-    toggleShowMoreButton()
     cy.get(dashboardChipSel, EXTENDED_TIMEOUT)
         .contains(TEST_DASHBOARD_TITLE)
         .click()
@@ -132,7 +127,6 @@ When('I confirm delete', () => {
 })
 
 Then('the dashboard is deleted and first starred dashboard displayed', () => {
-    toggleShowMoreButton()
     cy.get(dashboardChipSel).contains(TEST_DASHBOARD_TITLE).should('not.exist')
 
     cy.get('[data-test="view-dashboard-title"]')

cypress/integration/ui/edit_dashboard/sharing.js

@@ -0,0 +1,29 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { EXTENDED_TIMEOUT } from '../../../support/utils'
+import { dashboardTitleSel } from '../../../selectors/viewDashboard'
+
+const USER_NAME = 'Kevin Boateng'
+
+When('I change sharing settings', () => {
+    cy.get('button').contains('Share', EXTENDED_TIMEOUT).click()
+
+    //confirm that Boateng is not currently listed
+    cy.get('hr').should('have.length', 3)
+
+    cy.get('[placeholder="Enter names"]').type('Boateng')
+    cy.contains(USER_NAME).click()
+
+    cy.get('div').contains(USER_NAME).should('be.visible')
+
+    cy.get('button').contains('close', { matchCase: false }).click()
+})
+
+Then('the new sharing settings should be preserved', () => {
+    cy.visit('/')
+    cy.get(dashboardTitleSel, EXTENDED_TIMEOUT).should('be.visible')
+    cy.get('button').contains('Share', EXTENDED_TIMEOUT).should('be.visible')
+    cy.get('button').contains('Share', EXTENDED_TIMEOUT).click()
+
+    cy.get('hr').should('have.length', 4)
+    cy.get('div').contains(USER_NAME, EXTENDED_TIMEOUT).should('be.visible')
+})

cypress/integration/ui/edit_dashboard/show_description.js

@@ -1,4 +1,17 @@
 import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+// import { getApiBaseUrl } from '../../../support/server/utils'
+
+// TODO this request currently fails with 415 Unsupported media type
+// goal is to add this step
+// Given('the description is not shown', () => {
+//     cy.request(
+//         'PUT',
+//         `${getApiBaseUrl()}/api/userDataStore/dashboard/showDescription`,
+//         false
+//     ).then(response => {
+//         expect(response.status).to.equal(201)
+//     })
+// })
 
 When('I click to show description', () => {
     cy.intercept('PUT', 'userDataStore/dashboard/showDescription').as(

cypress/integration/ui/edit_dashboard/translate_dashboard.js

@@ -1,5 +1,5 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
-// import { EXTENDED_TIMEOUT } from '../../../support/utils'
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { EXTENDED_TIMEOUT } from '../../../support/utils'
 import { getApiBaseUrl } from '../../../support/server/utils'
 
 import {
@@ -10,16 +10,6 @@ import {
 let norwegianTitle = ''
 let norwegianDesc = ''
 
-Given('instance has db language set to Norwegian', () => {
-    cy.request(
-        'POST',
-        `${getApiBaseUrl()}/api/userSettings/keyDbLocale`,
-        'no'
-    ).then(response => {
-        expect(response.status).to.equal(200)
-    })
-})
-
 When('I add translations for dashboard name and description', () => {
     const now = new Date().toUTCString()
     norwegianTitle = 'nor title ' + now
@@ -28,25 +18,39 @@ When('I add translations for dashboard name and description', () => {
     cy.get('button').contains('Translate').click()
     cy.contains('Select locale').click()
     cy.contains('Select locale').type('Norwegian{enter}')
-    cy.get('[placeholder="Name"]').type(norwegianTitle)
-    cy.get('[placeholder="Description"]').type(norwegianDesc)
+    cy.get('[placeholder="Name"]').clear().type(norwegianTitle)
+    cy.get('[placeholder="Description"]').clear().type(norwegianDesc)
     cy.get('button').contains('Save').click()
 })
 
 Then('Norwegian title and description are displayed', () => {
-    cy.get('button').contains('More').click()
-    cy.contains('Show description').click()
+    // set dblocale to Norwegian
+    cy.request(
+        'POST',
+        `${getApiBaseUrl()}/api/userSettings/keyDbLocale`,
+        'no'
+    ).then(response => {
+        expect(response.status).to.equal(200)
+    })
+
+    // reload the dashboard
+    cy.visit('/')
 
-    cy.get(dashboardTitleSel)
+    cy.get(dashboardTitleSel, EXTENDED_TIMEOUT)
         .should('be.visible')
         .and('contain', norwegianTitle)
+
+    cy.get('button').contains('More', EXTENDED_TIMEOUT).click()
+    cy.contains('Show description').click()
+
     cy.get(dashboardDescriptionSel)
         .should('be.visible')
         .and('contain', norwegianDesc)
 
     cy.get('button').contains('More').click()
     cy.contains('Hide description').click()
 
+    // set dblocale back to English
     cy.request(
         'POST',
         `${getApiBaseUrl()}/api/userSettings/keyDbLocale`,

src/components/ControlBar/ViewControlBar/styles/DashboardsBar.module.css

@@ -2,7 +2,6 @@
     position: relative;
     background-color: var(--colors-white);
     box-shadow: rgba(0, 0, 0, 0.2) 0 0 6px 3px;
-    z-index: 2001;
     overflow: hidden;
     box-sizing: border-box;
     flex: none;
@@ -24,6 +23,7 @@
 
 .expanded .container {
     height: var(--max-rows-height);
+    z-index: 2001;
 }
 
 .spacer {