From 6af98f13dad4b15763cbff7e84ef79be774b5b14 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Fri, 1 Oct 2021 16:09:07 +0200
Subject: [PATCH] fix: disable layout when offline (#2007)

---
 cypress/integration/view/offline.feature      |  7 ++++
 cypress/integration/view/offline/offline.js   | 13 ++++++++
 src/pages/edit/LayoutModal.js                 | 24 ++++++++------
 src/pages/edit/TitleBar.js                    | 15 +++++++--
 .../__snapshots__/TitleBar.spec.js.snap       | 32 ++++++++++++-------
 5 files changed, 67 insertions(+), 24 deletions(-)

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 }) => {
                     <Button secondary onClick={onClose}>
                         {i18n.t('Cancel')}
                     </Button>
-                    <Button
-                        primary
-                        onClick={() => {
-                            onSaveLayout(getColsSaveValue(cols))
-                            onClose()
-                        }}
-                    >
-                        {i18n.t('Save layout')}
-                    </Button>
+                    <OfflineTooltip>
+                        <Button
+                            disabled={offline}
+                            primary
+                            onClick={() => {
+                                onSaveLayout(getColsSaveValue(cols))
+                                onClose()
+                            }}
+                        >
+                            {i18n.t('Save layout')}
+                        </Button>
+                    </OfflineTooltip>
                     {/* TODO: Only save the layout when "Save" is clicked? */}
                 </ButtonStrip>
             </ModalActions>
diff --git a/src/pages/edit/TitleBar.js b/src/pages/edit/TitleBar.js
index 57df52b36..5eeb37b9f 100644
--- a/src/pages/edit/TitleBar.js
+++ b/src/pages/edit/TitleBar.js
@@ -1,3 +1,4 @@
+import { useOnlineStatus } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { InputField, TextAreaField, Radio, Button } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -10,6 +11,7 @@ import {
     tSetDashboardItems,
     acSetItemConfigInsertPosition,
 } from '../../actions/editDashboard'
+import OfflineTooltip from '../../components/OfflineTooltip'
 import { orObject } from '../../modules/util'
 import {
     sGetEditDashboardRoot,
@@ -32,6 +34,7 @@ const EditTitleBar = ({
     onChangeDescription,
     onSaveLayout,
 }) => {
+    const { offline } = useOnlineStatus()
     const updateTitle = (_, e) => {
         onChangeTitle(e.target.value)
     }
@@ -80,9 +83,15 @@ const EditTitleBar = ({
                                   })
                                 : i18n.t('Freeflow')}
                         </span>
-                        <Button small onClick={() => setShowLayoutModal(true)}>
-                            {i18n.t('Change layout')}
-                        </Button>
+                        <OfflineTooltip>
+                            <Button
+                                disabled={offline}
+                                small
+                                onClick={() => setShowLayoutModal(true)}
+                            >
+                                {i18n.t('Change layout')}
+                            </Button>
+                        </OfflineTooltip>
                     </div>
                 </div>
                 <div className={classes.positionWrapper}>
diff --git a/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap
index 5b183795c..2229f2385 100644
--- a/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap
+++ b/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap
@@ -121,13 +121,17 @@ exports[`TitleBar renders correctly when no name or description 1`] = `
           >
             Freeflow
           </span>
-          <button
-            class="jsx-1937199209 small"
-            data-test="dhis2-uicore-button"
-            type="button"
+          <span
+            class="span"
           >
-            Change layout
-          </button>
+            <button
+              class="jsx-1937199209 small"
+              data-test="dhis2-uicore-button"
+              type="button"
+            >
+              Change layout
+            </button>
+          </span>
         </div>
       </div>
       <div
@@ -363,13 +367,17 @@ exports[`TitleBar renders correctly with name and description 1`] = `
           >
             Freeflow
           </span>
-          <button
-            class="jsx-1937199209 small"
-            data-test="dhis2-uicore-button"
-            type="button"
+          <span
+            class="span"
           >
-            Change layout
-          </button>
+            <button
+              class="jsx-1937199209 small"
+              data-test="dhis2-uicore-button"
+              type="button"
+            >
+              Change layout
+            </button>
+          </span>
         </div>
       </div>
       <div