feat: dashboard slideshow

cypress/e2e/slideshow.feature

@@ -0,0 +1,31 @@
+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
+
+    Scenario: I view fullscreen on the third item of the dashboard and navigate backwards
+        Given I open the "Delivery" dashboard
+        When I click the fullscreen button on the third item
+        Then item 3 is shown in fullscreen
+        When I click the previous 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

cypress/e2e/slideshow/index.js

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

cypress/e2e/slideshow/slideshow.js

@@ -0,0 +1,103 @@
+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('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()
+})
+
+When('I click the fullscreen button on the third item', () => {
+    clickMenuButton(sortedDashboardItemIds[2])
+    cy.contains('View fullscreen').realClick()
+})
+
+Then('item 3 is shown in fullscreen', () => {
+    assertItemIsNotVisible(0)
+    assertItemIsNotVisible(1)
+    assertItemIsVisible(2)
+
+    cy.getByDataTest('slideshow-page-counter').should('have.text', '3 / 11')
+})

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-12-18T12:26:05.212Z\n"
-"PO-Revision-Date: 2024-12-18T12:26:05.212Z\n"
+"POT-Creation-Date: 2024-12-19T11:30:27.893Z\n"
+"PO-Revision-Date: 2024-12-19T11:30:27.893Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -50,12 +50,21 @@ msgstr "One item per page"
 msgid "Close dashboard"
 msgstr "Close dashboard"
 
+msgid "No dashboard items to show in slideshow"
+msgstr "No dashboard items to show in slideshow"
+
+msgid "Not available offline"
+msgstr "Not available offline"
+
 msgid "Edit"
 msgstr "Edit"
 
 msgid "Share"
 msgstr "Share"
 
+msgid "Slideshow"
+msgstr "Slideshow"
+
 msgid "Clear dashboard filters?"
 msgstr "Clear dashboard filters?"
 
@@ -111,6 +120,9 @@ msgstr "Search for a dashboard"
 msgid "No dashboards found"
 msgstr "No dashboards found"
 
+msgid "{{appKey}} app not found"
+msgstr "{{appKey}} app not found"
+
 msgid "Remove this item"
 msgstr "Remove this item"
 
@@ -237,8 +249,11 @@ msgstr "There was an error loading data for this item"
 msgid "Open this item in {{appName}}"
 msgstr "Open this item in {{appName}}"
 
-msgid "Not available offline"
-msgstr "Not available offline"
+msgid "Resources"
+msgstr "Resources"
+
+msgid "Reports"
+msgstr "Reports"
 
 msgid "Visualizations"
 msgstr "Visualizations"
@@ -264,12 +279,6 @@ msgstr "Line lists"
 msgid "Apps"
 msgstr "Apps"
 
-msgid "Reports"
-msgstr "Reports"
-
-msgid "Resources"
-msgstr "Resources"
-
 msgid "Users"
 msgstr "Users"
 
@@ -566,6 +575,23 @@ msgstr ""
 msgid "Yes, remove filters"
 msgstr "Yes, remove filters"
 
+msgid "Exit slideshow"
+msgstr "Exit slideshow"
+
+msgid "Previous item"
+msgstr "Previous item"
+
+msgid "Next item"
+msgstr "Next item"
+
+msgid "{{name}}: {{filter}}"
+msgstr "{{name}}: {{filter}}"
+
+msgid "{{count}} filters active"
+msgid_plural "{{count}} filters active"
+msgstr[0] "{{count}} filter active"
+msgstr[1] "{{count}} filters active"
+
 msgid "Loading dashboard – {{name}}"
 msgstr "Loading dashboard – {{name}}"
 

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/DashboardsBar/InformationBlock/ActionsBar.js

@@ -14,16 +14,19 @@ import { connect } from 'react-redux'
 import { useHistory, Redirect } from 'react-router-dom'
 import { acClearItemFilters } from '../../../actions/itemFilters.js'
 import { acSetShowDescription } from '../../../actions/showDescription.js'
+import { acSetSlideshow } from '../../../actions/slideshow.js'
 import { apiPostShowDescription } from '../../../api/description.js'
+import ConfirmActionDialog from '../../../components/ConfirmActionDialog.js'
+import DropdownButton from '../../../components/DropdownButton/DropdownButton.js'
+import MenuItem from '../../../components/MenuItemWithTooltip.js'
+import { useSystemSettings } from '../../../components/SystemSettingsProvider.js'
+import { itemTypeSupportsFullscreen } from '../../../modules/itemTypes.js'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 import { orObject } from '../../../modules/util.js'
 import { ROUTE_START_PATH } from '../../../pages/start/index.js'
 import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js'
 import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
-import ConfirmActionDialog from '../../ConfirmActionDialog.js'
-import DropdownButton from '../../DropdownButton/DropdownButton.js'
-import MenuItem from '../../MenuItemWithTooltip.js'
 import FilterSelector from './FilterSelector.js'
 import classes from './styles/ActionsBar.module.css'
 
@@ -32,13 +35,15 @@ const ActionsBar = ({
     access,
     showDescription,
     starred,
+    setSlideshow,
     toggleDashboardStarred,
     showAlert,
     updateShowDescription,
     removeAllFilters,
     restrictFilters,
     allowedFilters,
     filtersLength,
+    dashboardItems,
 }) => {
     const history = useHistory()
     const [moreOptionsIsOpen, setMoreOptionsIsOpen] = useState(false)
@@ -49,6 +54,7 @@ const ActionsBar = ({
     const { isDisconnected: offline } = useDhis2ConnectionStatus()
     const { lastUpdated, isCached, startRecording, remove } =
         useCacheableSection(id)
+    const { allowVisFullscreen } = useSystemSettings().systemSettings
 
     const onRecordError = useCallback(() => {
         showAlert({
@@ -94,6 +100,10 @@ const ActionsBar = ({
 
     const userAccess = orObject(access)
 
+    const hasSlideshowItems = dashboardItems?.some(
+        (i) => itemTypeSupportsFullscreen(i.type) || false
+    )
+
     const getMoreMenu = () => (
         <FlyoutMenu>
             {lastUpdated ? (
@@ -176,6 +186,12 @@ const ActionsBar = ({
         return <Redirect to={redirectUrl} />
     }
 
+    const slideshowTooltipContent = !hasSlideshowItems
+        ? i18n.t('No dashboard items to show in slideshow')
+        : offline && !isCached
+        ? i18n.t('Not available offline')
+        : null
+
     return (
         <>
             <div className={classes.actions}>
@@ -204,6 +220,24 @@ const ActionsBar = ({
                             </Button>
                         </OfflineTooltip>
                     ) : null}
+                    {allowVisFullscreen ? (
+                        <OfflineTooltip
+                            content={slideshowTooltipContent}
+                            disabled={!!slideshowTooltipContent}
+                            disabledWhenOffline={false}
+                        >
+                            <Button
+                                secondary
+                                small
+                                disabled={!!slideshowTooltipContent}
+                                className={classes.slideshowButton}
+                                onClick={() => setSlideshow(0)}
+                                dataTest="enter-slideshow-button"
+                            >
+                                {i18n.t('Slideshow')}
+                            </Button>
+                        </OfflineTooltip>
+                    ) : null}
                     <FilterSelector
                         allowedFilters={allowedFilters}
                         restrictFilters={restrictFilters}
@@ -248,10 +282,12 @@ const ActionsBar = ({
 ActionsBar.propTypes = {
     access: PropTypes.object,
     allowedFilters: PropTypes.array,
+    dashboardItems: PropTypes.array,
     filtersLength: PropTypes.number,
     id: PropTypes.string,
     removeAllFilters: PropTypes.func,
     restrictFilters: PropTypes.bool,
+    setSlideshow: PropTypes.func,
     showAlert: PropTypes.func,
     showDescription: PropTypes.bool,
     starred: PropTypes.bool,
@@ -270,6 +306,7 @@ const mapStateToProps = (state) => {
 }
 
 export default connect(mapStateToProps, {
+    setSlideshow: acSetSlideshow,
     removeAllFilters: acClearItemFilters,
     updateShowDescription: acSetShowDescription,
 })(ActionsBar)