feat: dashboard slideshow

cypress/e2e/slideshow.feature

@@ -0,0 +1,20 @@
+Feature: Slideshow
+
+    Scenario: I view a dashboard in slideshow
+        Given I open the "Delivery" dashboard
+        When I click the slideshow button
+        Then item 1 is shown in fullscreen
+        When I click the next slide button
+        Then item 2 is shown in fullscreen
+        When I click the previous slide button
+        Then item 1 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown
+
+
+    Scenario: I view fullscreen on the second item of the dashboard
+        Given I open the "Delivery" dashboard
+        When I click the fullscreen button on the second item
+        Then item 2 is shown in fullscreen
+        When I click the exit slideshow button
+        Then the normal view is shown

cypress/e2e/slideshow/index.js

@@ -0,0 +1 @@
+'../common/index.js'

cypress/e2e/slideshow/slideshow.js

@@ -0,0 +1,91 @@
+import { When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import {
+    getDashboardItem,
+    clickMenuButton,
+} from '../../elements/dashboardItem.js'
+
+const sortedDashboardItemIds = ['GaVhJpqABYX', 'qXsjttMYuoZ', 'Rwb3oXJ3bZ9']
+
+const assertItemIsVisible = (slideshowItemIndex) => {
+    getDashboardItem(sortedDashboardItemIds[slideshowItemIndex]).should(
+        'have.css',
+        'opacity',
+        '1'
+    )
+}
+
+const assertItemIsNotVisible = (slideshowItemIndex) => {
+    getDashboardItem(sortedDashboardItemIds[slideshowItemIndex]).should(
+        'have.css',
+        'opacity',
+        '0'
+    )
+}
+
+const getSlideshowExitButton = () =>
+    cy.getByDataTest('slideshow-exit-button', { timeout: 15000 })
+
+When('I click the slideshow button', () => {
+    cy.get('button').contains('Slideshow').realClick()
+})
+
+Then('item 1 is shown in fullscreen', () => {
+    getSlideshowExitButton().should('be.visible')
+
+    // check that only the first item is shown
+    assertItemIsVisible(0)
+    assertItemIsNotVisible(1)
+    assertItemIsNotVisible(2)
+
+    cy.getByDataTest('slideshow-page-counter').should('have.text', '1 / 11')
+
+    // visible item does not have context menu button
+    getDashboardItem(sortedDashboardItemIds[0])
+        .findByDataTest('dashboarditem-menu-button')
+        .should('not.exist')
+})
+
+When('I click the exit slideshow button', () => {
+    getSlideshowExitButton().realClick()
+})
+
+Then('the normal view is shown', () => {
+    getSlideshowExitButton().should('not.exist')
+
+    // check that multiple items are shown
+    assertItemIsVisible(0)
+    assertItemIsVisible(1)
+    assertItemIsVisible(2)
+
+    // items have context menu button
+    getDashboardItem(sortedDashboardItemIds[0])
+        .findByDataTest('dashboarditem-menu-button')
+        .should('be.visible')
+
+    getDashboardItem(sortedDashboardItemIds[1])
+        .findByDataTest('dashboarditem-menu-button')
+        .should('be.visible')
+})
+
+// When I click the next slide button
+When('I click the next slide button', () => {
+    cy.getByDataTest('slideshow-next-button').realClick()
+})
+
+// Then the next slide is shown
+Then('item 2 is shown in fullscreen', () => {
+    assertItemIsNotVisible(0)
+    assertItemIsVisible(1)
+    assertItemIsNotVisible(2)
+
+    cy.getByDataTest('slideshow-page-counter').should('have.text', '2 / 11')
+})
+
+When('I click the previous slide button', () => {
+    cy.getByDataTest('slideshow-prev-button').realClick()
+})
+
+When('I click the fullscreen button on the second item', () => {
+    clickMenuButton(sortedDashboardItemIds[1])
+    cy.contains('View fullscreen').realClick()
+})

cypress/support/e2e.js

@@ -1,5 +1,6 @@
 // import '@dhis2/cypress-commands'
 import { enableAutoLogin } from '@dhis2/cypress-commands'
+import 'cypress-real-events'
 import './commands.js'
 
 enableAutoLogin()

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: 2024-08-27T07:26:05.058Z\n"
-"PO-Revision-Date: 2024-08-27T07:26:05.060Z\n"
+"POT-Creation-Date: 2024-11-21T14:44:35.575Z\n"
+"PO-Revision-Date: 2024-11-21T14:44:35.577Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -26,6 +26,9 @@ msgstr "Show fewer dashboards"
 msgid "Show more dashboards"
 msgstr "Show more dashboards"
 
+msgid "{{appKey}} app not found"
+msgstr "{{appKey}} app not found"
+
 msgid "Remove this item"
 msgstr "Remove this item"
 
@@ -526,12 +529,18 @@ msgstr "Close dashboard"
 msgid "More"
 msgstr "More"
 
+msgid "No dashboard items to show in slideshow"
+msgstr "No dashboard items to show in slideshow"
+
 msgid "Edit"
 msgstr "Edit"
 
 msgid "Share"
 msgstr "Share"
 
+msgid "Slideshow"
+msgstr "Slideshow"
+
 msgid "Clear dashboard filters?"
 msgstr "Clear dashboard filters?"
 

package.json

@@ -54,6 +54,7 @@
         "@testing-library/jest-dom": "^6.1.2",
         "@testing-library/react": "^12",
         "cypress": "^13.13.1",
+        "cypress-real-events": "^1.13.0",
         "d2-manifest": "^1.0.0",
         "eslint-plugin-cypress": "^3.3.0",
         "immutability-helper": "^3.1.1",

src/actions/slideshow.js

@@ -0,0 +1,6 @@
+import { SET_SLIDESHOW } from '../reducers/slideshow.js'
+
+export const acSetSlideshow = (isSlideshow) => ({
+    type: SET_SLIDESHOW,
+    value: isSlideshow,
+})

src/components/Item/AppItem/Item.js

@@ -1,4 +1,6 @@
+import i18n from '@dhis2/d2-i18n'
 import { Divider, colors, spacers, IconQuestion24 } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
@@ -9,8 +11,9 @@ import {
 } from '../../../reducers/itemFilters.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import { getIframeSrc } from './getIframeSrc.js'
+import styles from './styles/AppItem.module.css'
 
-const AppItem = ({ dashboardMode, item, itemFilters, apps }) => {
+const AppItem = ({ dashboardMode, item, itemFilters, apps, isFullscreen }) => {
     let appDetails
 
     const appKey = item.appKey
@@ -39,26 +42,23 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps }) => {
             <iframe
                 title={appDetails.name}
                 src={getIframeSrc(appDetails, item, itemFilters)}
-                className={
-                    !hideTitle
-                        ? 'dashboard-item-content'
-                        : 'dashboard-item-content-hidden-title'
-                }
+                className={cx(styles.content, {
+                    [styles.hiddenTitle]: hideTitle,
+                    [styles.fullscreen]: isFullscreen,
+                })}
                 style={{ border: 'none' }}
             />
         </>
     ) : (
         <>
-            <ItemHeader title={`${appKey} app not found`} />
+            <ItemHeader
+                title={i18n.t('{{appKey}} app not found', { appKey })}
+            />
             <Divider margin={`0 0 ${spacers.dp4} 0`} />
             <div
-                className="dashboard-item-content"
-                style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    height: '90%',
-                }}
+                className={cx(styles.content, styles.centered, {
+                    [styles.fullscreen]: isFullscreen,
+                })}
             >
                 <IconQuestion24 color={colors.grey500} />
             </div>
@@ -69,6 +69,7 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps }) => {
 AppItem.propTypes = {
     apps: PropTypes.array,
     dashboardMode: PropTypes.string,
+    isFullscreen: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
 }

src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap

@@ -18,7 +18,7 @@ exports[`renders a valid App item in view mode 1`] = `
     class="ui-Divider"
   />
   <iframe
-    class="dashboard-item-content"
+    class="content"
     src="launchurl?dashboardItemId=rainbowdash"
     title="Scorecard"
   />
@@ -51,7 +51,7 @@ exports[`renders a valid App item with filter in edit mode 1`] = `
     class="ui-Divider"
   />
   <iframe
-    class="dashboard-item-content"
+    class="content"
     src="launchurl?dashboardItemId=rainbowdash"
     title="Scorecard"
   />
@@ -76,7 +76,7 @@ exports[`renders a valid App item with filter in view mode 1`] = `
     class="ui-Divider"
   />
   <iframe
-    class="dashboard-item-content"
+    class="content"
     src="launchurl?dashboardItemId=rainbowdash&userOrgUnit=rainbow"
     title="Scorecard"
   />
@@ -109,7 +109,7 @@ exports[`renders a valid App item with title in edit mode irrespective of app se
     class="ui-Divider"
   />
   <iframe
-    class="dashboard-item-content"
+    class="content"
     src="launchurl?dashboardItemId=twilightsparkle"
     title="No Title"
   />
@@ -119,7 +119,7 @@ exports[`renders a valid App item with title in edit mode irrespective of app se
 exports[`renders a valid App item without title in view mode if specified in app settings 1`] = `
 <div>
   <iframe
-    class="dashboard-item-content-hidden-title"
+    class="content hiddenTitle"
     src="launchurl?dashboardItemId=twilightsparkle"
     title="No Title"
   />
@@ -144,8 +144,7 @@ exports[`renders an invalid App item 1`] = `
     class="ui-Divider"
   />
   <div
-    class="dashboard-item-content"
-    style="display: flex; justify-content: center; align-items: center; height: 90%;"
+    class="content centered"
   >
     <svg
       color="#a0adba"

src/components/Item/AppItem/styles/AppItem.module.css

@@ -0,0 +1,21 @@
+.content {
+    composes: content from '../../styles/Item.module.css';
+    flex: 1;
+}
+
+.hiddenTitle {
+    margin-block-start: 5px;
+    margin-block-end: 4px;
+    margin-inline: 4px;
+}
+
+.fullscreen {
+    composes: fullscreen from '../../styles/Item.module.css';
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    block-size: 90%;
+}

src/components/Item/ListItem/Item.js

@@ -1,6 +1,7 @@
 import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { Divider, IconFileDocument16, colors, spacers } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
@@ -22,7 +23,13 @@ const getContentItems = (item) =>
             array.findIndex((el) => el.id === item.id) === index
     )
 
-const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
+const ListItem = ({
+    item,
+    dashboardMode,
+    removeItem,
+    updateItem,
+    isFullscreen,
+}) => {
     const { baseUrl } = useConfig()
     const contentItems = getContentItems(item)
 
@@ -74,7 +81,11 @@ const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
                 isShortened={item.shortened}
             />
             <Divider margin={`0 0 ${spacers.dp4} 0`} />
-            <div className="dashboard-item-content">
+            <div
+                className={cx(classes.content, {
+                    [classes.fullscreen]: isFullscreen,
+                })}
+            >
                 <ul className={classes.list}>
                     {contentItems.map((contentItem) => (
                         <li className={classes.item} key={contentItem.id}>
@@ -92,6 +103,7 @@ const ListItem = ({ item, dashboardMode, removeItem, updateItem }) => {
 
 ListItem.propTypes = {
     dashboardMode: PropTypes.string,
+    isFullscreen: PropTypes.bool,
     item: PropTypes.object,
     removeItem: PropTypes.func,
     updateItem: PropTypes.func,

src/components/Item/ListItem/Item.module.css

@@ -34,3 +34,16 @@
     outline: none;
     color: var(--colors-red800);
 }
+
+.content {
+    composes: content from '../styles/Item.module.css';
+    flex: 1;
+}
+
+.fullscreen .list {
+    padding-inline: 24px;
+}
+
+.fullscreen {
+    composes: fullscreen from '../styles/Item.module.css';
+}

src/components/Item/MessagesItem/Item.js

@@ -83,7 +83,7 @@ const MessagesItem = ({ messages, item, dashboardMode }) => {
             />
             <Divider margin={`0 0 ${spacers.dp4} 0`} />
             {messages.length > 0 && (
-                <div className="dashboard-item-content">
+                <div className={classes.content}>
                     <ul className={classes.list}>{getMessageItems()}</ul>
                     <div className={classes.seeAll}>
                         <a href={getMessageHref()}>

src/components/Item/MessagesItem/styles/Item.module.css

@@ -23,3 +23,8 @@
     max-block-size: 30px;
     overflow: hidden;
 }
+
+.content {
+    composes: content from '../../styles/Item.module.css';
+    flex: 1;
+}