diff --git a/cypress/integration/view/offline.feature b/cypress/integration/view/offline.feature
index 6cd844e1e..848a1cc76 100644
--- a/cypress/integration/view/offline.feature
+++ b/cypress/integration/view/offline.feature
@@ -59,6 +59,13 @@ Feature: Offline dashboard
When I click Exit without saving
Then the cached dashboard is loaded and displayed in view mode
+ Scenario: I am in edit mode when I lose connectivity and then connectivity is restored
+ Given I open an uncached dashboard in edit mode
+ When connectivity is turned off
+ Then all edit actions requiring connectivity are disabled
+ When connectivity is turned on
+ Then all edit actions requiring connectivity are enabled
+
Scenario: I remove a dashboard from cache while offline
Given I open and cache a dashboard
And connectivity is turned off
diff --git a/cypress/integration/view/offline/offline.js b/cypress/integration/view/offline/offline.js
index 7165b1c3e..0b2ffa8d5 100644
--- a/cypress/integration/view/offline/offline.js
+++ b/cypress/integration/view/offline/offline.js
@@ -237,9 +237,22 @@ Then('all edit actions requiring connectivity are disabled', () => {
cy.contains('Delete').should('be.disabled')
cy.contains('Exit without saving').should('not.be.disabled')
+ cy.contains('Change layout').should('be.disabled')
cy.get(itemSearchSel).find('input').should('have.class', 'disabled')
})
+Then('all edit actions requiring connectivity are enabled', () => {
+ cy.contains('Save changes').should('be.enabled')
+ cy.contains('Print preview').should('be.enabled')
+ cy.contains('Filter settings').should('be.enabled')
+ cy.contains('Translate').should('be.enabled')
+ cy.contains('Delete').should('be.enabled')
+ cy.contains('Exit without saving').should('be.enabled')
+
+ cy.contains('Change layout').should('be.enabled')
+ cy.get(itemSearchSel).find('input').should('not.have.class', 'disabled')
+})
+
// Scenario: I am online with a cached dashboard when I lose connectivity
Given('I open and cache a dashboard', () => {
openAndCacheDashboard(CACHED_DASHBOARD_TITLE)
diff --git a/src/pages/edit/LayoutModal.js b/src/pages/edit/LayoutModal.js
index 649753aaf..958025299 100644
--- a/src/pages/edit/LayoutModal.js
+++ b/src/pages/edit/LayoutModal.js
@@ -1,3 +1,4 @@
+import { useOnlineStatus } from '@dhis2/app-runtime'
import i18n from '@dhis2/d2-i18n'
import {
Modal,
@@ -12,6 +13,7 @@ import {
import cx from 'classnames'
import PropTypes from 'prop-types'
import React, { useEffect, useState } from 'react'
+import OfflineTooltip from '../../components/OfflineTooltip'
import { GRID_COLUMNS } from '../../modules/gridUtil'
import { LayoutFixedIcon } from './assets/LayoutFixed'
import { LayoutFreeflowIcon } from './assets/LayoutFreeflow'
@@ -25,6 +27,7 @@ const getColsSaveValue = value =>
value === '' ? DEFAULT_COLUMNS : parseInt(value, 10)
export const LayoutModal = ({ columns, onSaveLayout, onClose }) => {
+ const { offline } = useOnlineStatus()
const [cols, setCols] = useState(columns)
useEffect(() => setCols(columns), [])
@@ -165,15 +168,18 @@ export const LayoutModal = ({ columns, onSaveLayout, onClose }) => {
-
+