fix: dashboard filter modal should not be available in small screen

cypress/integration/common/dashboard_filter.js

@@ -0,0 +1,40 @@
+import { When } from 'cypress-cucumber-preprocessor/steps'
+import {
+    filterBadgeSel,
+    unselectedItemsSel,
+    filterDimensionsPanelSel,
+    dimensionsModalSel,
+    orgUnitCheckboxesSel,
+} from '../../selectors/dashboardFilter'
+import { EXTENDED_TIMEOUT } from '../../support/utils'
+
+const PERIOD = 'Last 6 months'
+const OU = 'Sierra Leone'
+const FACILITY_TYPE = 'Clinic'
+
+When('I add a {string} filter', dimensionType => {
+    cy.contains('Add filter').click()
+
+    // open the dimensions modal
+    cy.get(filterDimensionsPanelSel).contains(dimensionType).click()
+
+    // select an item in the modal
+    if (dimensionType === 'Period') {
+        cy.get(unselectedItemsSel).contains(PERIOD).dblclick()
+    } else if (dimensionType === 'Organisation Unit') {
+        cy.get(dimensionsModalSel, EXTENDED_TIMEOUT).find('.arrow').click()
+        cy.get(dimensionsModalSel, EXTENDED_TIMEOUT)
+            .find(orgUnitCheckboxesSel, EXTENDED_TIMEOUT)
+            .contains(OU, EXTENDED_TIMEOUT)
+            .click()
+    } else {
+        cy.get(unselectedItemsSel).contains(FACILITY_TYPE).dblclick()
+    }
+
+    // confirm to apply the filter
+    cy.get('button').contains('Confirm').click()
+})
+
+When('I click on the {string} filter badge', filterName => {
+    cy.get(filterBadgeSel).find('span:visible').contains(filterName).click()
+})

cypress/integration/ui/dashboard_filter.feature

@@ -18,3 +18,9 @@ Feature: Dashboard filter
     Scenario: I add a Facility Type filter
         When I add a "Facility Type" filter
         Then the Facility Type filter is applied to the dashboard
+
+    @nonmutating
+    Scenario: I can access the dimensions modal from the filter badge
+        When I add a "Period" filter
+        And I click on the "Period" filter badge
+        Then the filter modal is opened

cypress/integration/ui/dashboard_filter/dashboard_filter.js

@@ -1,15 +1,12 @@
-import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Then } from 'cypress-cucumber-preprocessor/steps'
 import {
     getDashboardItem,
     chartSubtitleSel,
     chartXAxisLabelSel,
 } from '../../../selectors/dashboardItem'
 import {
-    unselectedItemsSel,
-    filterDimensionsPanelSel,
     filterBadgeSel,
-    orgUnitHierarchySel,
-    orgUnitCheckboxesSel,
+    dimensionsModalSel,
 } from '../../../selectors/dashboardFilter'
 import { dashboards } from '../../../assets/backends'
 import { EXTENDED_TIMEOUT } from '../../../support/utils'
@@ -20,29 +17,6 @@ const FACILITY_TYPE = 'Clinic'
 
 const chartItemUid = dashboards.Delivery.items.chart.itemUid
 
-When('I add a {string} filter', dimensionType => {
-    cy.contains('Add filter').click()
-
-    // open the dimensions modal
-    cy.get(filterDimensionsPanelSel).contains(dimensionType).click()
-
-    // select an item in the modal
-    if (dimensionType === 'Period') {
-        cy.get(unselectedItemsSel).contains(PERIOD).dblclick()
-    } else if (dimensionType === 'Organisation Unit') {
-        cy.get(orgUnitHierarchySel, EXTENDED_TIMEOUT).find('.arrow').click()
-        cy.get(orgUnitHierarchySel, EXTENDED_TIMEOUT)
-            .find(orgUnitCheckboxesSel, EXTENDED_TIMEOUT)
-            .contains(OU, EXTENDED_TIMEOUT)
-            .click()
-    } else {
-        cy.get(unselectedItemsSel).contains(FACILITY_TYPE).dblclick()
-    }
-
-    // confirm to apply the filter
-    cy.get('button').contains('Confirm').click()
-})
-
 /*
 Scenario: I add a Period filter
 */
@@ -87,3 +61,7 @@ Then('the Facility Type filter is applied to the dashboard', () => {
         .contains(FACILITY_TYPE, EXTENDED_TIMEOUT)
         .should('be.visible')
 })
+
+Then('the filter modal is opened', () => {
+    cy.get(dimensionsModalSel, EXTENDED_TIMEOUT).should('be.visible')
+})

cypress/integration/ui/responsive_dashboard.feature

@@ -45,3 +45,11 @@ Feature: Small screen dashboard
         When I go to small screen
         And I change url to edit
         Then the "Delivery" dashboard displays in view mode
+
+    @nonmutating
+    Scenario: I cannot edit dashboard filter while in small screen
+        Given I open the "Delivery" dashboard
+        And I add a "Period" filter
+        When I go to small screen
+        And I click on the "Period" filter badge
+        Then the filter modal is not opened

cypress/integration/ui/responsive_dashboard/responsive_dashboard.js

@@ -2,6 +2,7 @@ import { When, Then } from 'cypress-cucumber-preprocessor/steps'
 import { EXTENDED_TIMEOUT } from '../../../support/utils'
 import { chartSel } from '../../../selectors/dashboardItem'
 import { dashboardTitleSel } from '../../../selectors/viewDashboard'
+import { dimensionsModalSel } from '../../../selectors/dashboardFilter'
 
 const TEST_DASHBOARD_TITLE = 'TEST_DASHBOARD_TITLE'
 
@@ -106,3 +107,7 @@ When('I change url to edit', () => {
         })
     })
 })
+
+Then('the filter modal is not opened', () => {
+    cy.get(dimensionsModalSel, EXTENDED_TIMEOUT).should('not.exist')
+})

cypress/selectors/dashboardFilter.js

@@ -1,6 +1,10 @@
 export const filterBadgeSel = '[data-test="dashboard-filter-badge"]'
+
 export const filterDimensionsPanelSel = '[data-test="dashboard-filter-popover"]'
+
 export const unselectedItemsSel =
     '[data-test="dhis2-uicore-transfer-sourceoptions"]'
-export const orgUnitHierarchySel = '[data-test="ou-dimension-modal"]'
+
 export const orgUnitCheckboxesSel = '*[role="button"]'
+
+export const dimensionsModalSel = '[data-test="dimension-modal"]'

src/components/FilterBar/FilterBadge.js

@@ -8,33 +8,38 @@ import { acSetActiveModalDimension } from '../../actions/activeModalDimension'
 
 import classes from './styles/FilterBadge.module.css'
 
-const FilterBadge = ({ filter, openFilterModal, removeFilter }) => (
-    <div className={classes.container} data-test="dashboard-filter-badge">
-        <span
-            className={classes.badge}
-            onClick={() =>
-                openFilterModal({
-                    id: filter.id,
-                    name: filter.name,
-                })
-            }
-        >
-            {`${filter.name}: ${
-                filter.values.length > 1
-                    ? i18n.t('{{count}} selected', {
-                          count: filter.values.length,
-                      })
-                    : filter.values[0].name
-            }`}
-        </span>
-        <span
-            className={classes.removeButton}
-            onClick={() => removeFilter(filter.id)}
-        >
-            {i18n.t('Remove')}
-        </span>
-    </div>
-)
+const FilterBadge = ({ filter, openFilterModal, removeFilter }) => {
+    const filterText = `${filter.name}: ${
+        filter.values.length > 1
+            ? i18n.t('{{count}} selected', {
+                  count: filter.values.length,
+              })
+            : filter.values[0].name
+    }`
+
+    return (
+        <div className={classes.container} data-test="dashboard-filter-badge">
+            <span
+                className={classes.badge}
+                onClick={() =>
+                    openFilterModal({
+                        id: filter.id,
+                        name: filter.name,
+                    })
+                }
+            >
+                {filterText}
+            </span>
+            <span className={classes.badgeSmall}>{filterText}</span>
+            <span
+                className={classes.removeButton}
+                onClick={() => removeFilter(filter.id)}
+            >
+                {i18n.t('Remove')}
+            </span>
+        </div>
+    )
+}
 
 FilterBadge.propTypes = {
     filter: PropTypes.object.isRequired,

src/components/FilterBar/__tests__/FilterBadge.spec.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import configureMockStore from 'redux-mock-store'
+import FilterBadge from '../FilterBadge'
+
+const mockStore = configureMockStore()
+
+test('Filter Badge displays badge containing number of items in filter', () => {
+    const filter = {
+        id: 'ponies',
+        name: 'Ponies',
+        values: [{ name: 'Rainbow Dash' }, { name: 'Twilight Sparkle' }],
+    }
+    const { container } = render(
+        <Provider store={mockStore({})}>
+            <FilterBadge
+                filter={filter}
+                openFilterModal={jest.fn()}
+                removeFilter={jest.fn}
+            />
+        </Provider>
+    )
+    expect(container).toMatchSnapshot()
+})
+
+test('FilterBadge displays badge with filter item name when only one filter item', () => {
+    const filter = {
+        id: 'ponies',
+        name: 'Ponies',
+        values: [{ name: 'Twilight Sparkle' }],
+    }
+
+    const { container } = render(
+        <Provider store={mockStore({})}>
+            <FilterBadge
+                filter={filter}
+                openFilterModal={jest.fn()}
+                removeFilter={jest.fn}
+            />
+        </Provider>
+    )
+    expect(container).toMatchSnapshot()
+})

src/components/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter Badge displays badge containing number of items in filter 1`] = `
+<div>
+  <div
+    class="container"
+    data-test="dashboard-filter-badge"
+  >
+    <span
+      class="badge"
+    >
+      Ponies: 2 selected
+    </span>
+    <span
+      class="badgeSmall"
+    >
+      Ponies: 2 selected
+    </span>
+    <span
+      class="removeButton"
+    >
+      Remove
+    </span>
+  </div>
+</div>
+`;
+
+exports[`FilterBadge displays badge with filter item name when only one filter item 1`] = `
+<div>
+  <div
+    class="container"
+    data-test="dashboard-filter-badge"
+  >
+    <span
+      class="badge"
+    >
+      Ponies: Twilight Sparkle
+    </span>
+    <span
+      class="badgeSmall"
+    >
+      Ponies: Twilight Sparkle
+    </span>
+    <span
+      class="removeButton"
+    >
+      Remove
+    </span>
+  </div>
+</div>
+`;

src/components/FilterBar/styles/FilterBadge.module.css

@@ -15,9 +15,25 @@
     white-space: nowrap;
 }
 
+.badgeSmall {
+    display: none;
+    font-size: 13px;
+    white-space: nowrap;
+}
+
 .removeButton {
     font-size: 12px;
     text-decoration: underline;
     margin-left: var(--spacers-dp24);
     cursor: pointer;
 }
+
+@media only screen and (max-width: 480px) {
+    .badge {
+        display: none;
+    }
+
+    .badgeSmall {
+        display: block;
+    }
+}

src/components/ItemFilter/FilterDialog.js

@@ -113,7 +113,7 @@ const FilterDialog = ({
         <>
             {dimension.id && (
                 <Modal
-                    dataTest={`${dimension.id}-dimension-modal`}
+                    dataTest="dimension-modal"
                     onClose={onClose}
                     position="top"
                     large