@dhis2-ui/header-bar 8.12.2 → 8.12.4

package/build/cjs/__e2e__/header-bar.stories.e2e.js

@@ -33,12 +33,6 @@ Object.defineProperty(exports, "PWAEnabled", {
     return _pwaEnabled.PWAEnabled;
   }
 });
-Object.defineProperty(exports, "ShowOnlineStatus", {
-  enumerable: true,
-  get: function () {
-    return _showOnlineStatus.ShowOnlineStatus;
-  }
-});
 Object.defineProperty(exports, "UserHasAllAuthority", {
   enumerable: true,
   get: function () {
@@ -129,8 +123,6 @@ var _index = require("../index.js");
 
 var _default2 = require("./stories/default.js");
 
-var _showOnlineStatus = require("./stories/show-online-status.js");
-
 var _pwaEnabled = require("./stories/pwa-enabled.js");
 
 var _onlineStatusMessage = require("./stories/online-status-message.js");

package/build/cjs/__e2e__/stories/common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.providerConfig = exports.modulesWithSpecialCharacters = exports.defaultModules = exports.dataProviderData = exports.createDecoratorProvider = exports.createDecoratorCustomDataProviderHeaderBar = exports.applicationTitle = void 0;
+exports.providerConfig = exports.modulesWithSpecialCharacters = exports.mockOfflineInterface = exports.defaultModules = exports.dataProviderData = exports.createDecoratorProvider = exports.createDecoratorCustomDataProviderHeaderBar = exports.applicationTitle = void 0;
 
 var _appRuntime = require("@dhis2/app-runtime");
 
@@ -368,6 +368,7 @@ const providerConfig = {
     isMetadataVersionEnabled: true,
     metadataSyncEnabled: false
   },
+  // same as in ../../features/common/index.js
   baseUrl: 'https://domain.tld/',
   apiVersion: ''
 };
@@ -404,7 +405,7 @@ MockAlert.propTypes = {
   })
 };
 
-const MocklAlertStack = () => {
+const MockAlertStack = () => {
   const alerts = (0, _appRuntime.useAlerts)();
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -418,11 +419,23 @@ const MocklAlertStack = () => {
   })));
 };
 
-const createDecoratorProvider = (config, offlineInterface) => {
+const mockOfflineInterface = {
+  pwaEnabled: true,
+  startRecording: async () => undefined,
+  getCachedSections: async () => [],
+  removeSection: async () => false,
+  subscribeToDhis2ConnectionStatus: () => () => undefined,
+  latestIsConnected: true
+};
+exports.mockOfflineInterface = mockOfflineInterface;
+
+const createDecoratorProvider = function () {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : providerConfig;
+  let offlineInterface = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mockOfflineInterface;
   return fn => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-    config: config || providerConfig,
+    config: config,
     offlineInterface: offlineInterface
-  }, fn(), /*#__PURE__*/_react.default.createElement(MocklAlertStack, null));
+  }, fn(), /*#__PURE__*/_react.default.createElement(MockAlertStack, null));
 };
 
 exports.createDecoratorProvider = createDecoratorProvider;

package/build/cjs/__e2e__/stories/online-status-message.js

@@ -41,9 +41,4 @@ const OnlineStatusMessagingWithPwaEnabled = () => /*#__PURE__*/_react.default.cr
 exports.OnlineStatusMessagingWithPwaEnabled = OnlineStatusMessagingWithPwaEnabled;
 OnlineStatusMessagingWithPwaEnabled.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
   pwaEnabled: true
-}, {
-  pwaEnabled: true,
-  startRecording: async () => undefined,
-  getCachedSections: async () => [],
-  removeSection: async () => false
 })];

package/build/cjs/features/the_headerbar_can_display_online_status/the_headerbar_displays_online_status.js

@@ -4,43 +4,18 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 
 require("../common/index.js");
 
-// https://www.cypress.io/blog/2020/11/12/testing-application-in-offline-network-mode/
+// see https://github.com/cypress-io/cypress/issues/17723#issuecomment-1457064322
 const goOffline = () => {
-  cy.log('**go offline**').then(() => {
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.enable'
-    });
-  }).then(() => {
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.emulateNetworkConditions',
-      params: {
-        offline: true,
-        latency: -1,
-        downloadThroughput: -1,
-        uploadThroughput: -1
-      }
-    });
-  });
+  cy.log('**go offline**') // stub every request with a StaticResponse to simulate network error
+  .then(() => cy.intercept('*', {
+    forceNetworkError: true
+  })).then(() => cy.window().then(win => win.dispatchEvent(new Event('offline'))));
 };
 
 const goOnline = () => {
   // disable offline mode, otherwise we will break our tests :)
-  cy.log('**go online**').then(() => {
-    // https://chromedevtools.github.io/devtools-protocol/1-3/Network/#method-emulateNetworkConditions
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.emulateNetworkConditions',
-      params: {
-        offline: false,
-        latency: -1,
-        downloadThroughput: -1,
-        uploadThroughput: -1
-      }
-    });
-  }).then(() => {
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.disable'
-    });
-  });
+  cy.log('**go online**') // go back to normal network behavior
+  .then(() => cy.intercept('*')).then(() => cy.window().then(win => win.dispatchEvent(new Event('online'))));
 };
 
 (0, _steps.Before)(() => {

package/build/cjs/features/the_headerbar_can_display_online_status.feature

@@ -6,10 +6,6 @@ Feature: The HeaderBar can display online status
         Given the HeaderBar loads without an error
         Then the HeaderBar does not render online status
 
-    Scenario: The HeaderBar displays online status when configured to
-        Given the HeaderBar loads without error with showOnlineStatus configured
-        Then the HeaderBar renders online status
-
     Scenario: The HeaderBar displays online status when PWA is enabled
         Given the HeaderBar loads without error when PWA is enabled
         Then the HeaderBar renders online status
@@ -26,9 +22,8 @@ Feature: The HeaderBar can display online status
         And the viewport is narrower than 480px
         Then the HeaderBar displays only the mobile status bar
 
-    # the following test has been know to fail when run locally and appears to be a know cypress issue
-    # https://github.com/cypress-io/cypress/issues/17723
-    # at time of writing the problem doesn't appear to happen on CI
+    # This is not a complete test of the connection status functionality --
+    # see the app-runtime for detailed tests
     Scenario: The HeaderBar displays an offline status when offline
         Given the HeaderBar loads without error when PWA is enabled
         And the browser goes offline

package/build/cjs/header-bar.js

@@ -72,10 +72,7 @@ const HeaderBar = _ref => {
   const {
     appName: configAppName,
     baseUrl,
-    pwaEnabled,
-    headerbar: {
-      showOnlineStatus
-    } = {}
+    pwaEnabled
   } = (0, _appRuntime.useConfig)();
   const {
     loading,
@@ -113,7 +110,7 @@ const HeaderBar = _ref => {
     instance: data.title.applicationTitle
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["3860078320", [_uiConstants.colors.white]]]) + " " + "right-control-spacer"
-  }), (pwaEnabled || showOnlineStatus) && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, null), /*#__PURE__*/_react.default.createElement(_notifications.Notifications, {
+  }), pwaEnabled && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, null), /*#__PURE__*/_react.default.createElement(_notifications.Notifications, {
     interpretations: data.notifications.unreadInterpretations,
     messages: data.notifications.unreadMessageConversations,
     userAuthorities: data.user.authorities
@@ -124,7 +121,7 @@ const HeaderBar = _ref => {
     email: data.user.email,
     avatarId: (_data$user$avatar = data.user.avatar) === null || _data$user$avatar === void 0 ? void 0 : _data$user$avatar.id,
     helpUrl: data.help.helpPageLink
-  }))), (pwaEnabled || showOnlineStatus) && !loading && !error && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, {
+  }))), pwaEnabled && !loading && !error && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, {
     dense: true
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3860078320",

package/build/cjs/header-bar.stories.js

@@ -248,11 +248,8 @@ const WithOnlineStatusMessage = () => /*#__PURE__*/_react.default.createElement(
 exports.WithOnlineStatusMessage = WithOnlineStatusMessage;
 WithOnlineStatusMessage.decorators = [(0, _common.createDecoratorProvider)({ ..._common.providerConfig,
   pwaEnabled: true
-}, {
-  pwaEnabled: true,
-  startRecording: async () => undefined,
-  getCachedSections: async () => [],
-  removeSection: async () => false
+}, { ..._common.mockOfflineInterface,
+  latestIsConnected: false
 })];
 WithOnlineStatusMessage.parameters = {
   docs: {

package/build/cjs/online-status.js

@@ -27,8 +27,8 @@ function OnlineStatus(_ref) {
     dense
   } = _ref;
   const {
-    online
-  } = (0, _appRuntime.useOnlineStatus)();
+    isConnected: online
+  } = (0, _appRuntime.useDhis2ConnectionStatus)();
   const {
     onlineStatusMessage
   } = (0, _appRuntime.useOnlineStatusMessage)();

package/build/es/__e2e__/header-bar.stories.e2e.js

@@ -4,7 +4,6 @@ export default {
   component
 };
 export { Default } from './stories/default.js';
-export { ShowOnlineStatus } from './stories/show-online-status.js';
 export { PWAEnabled } from './stories/pwa-enabled.js';
 export { OnlineStatusMessagingWithPwaEnabled } from './stories/online-status-message.js';
 export { MeWithAvatar } from './stories/me-with-avatar.js';

package/build/es/__e2e__/stories/common.js

@@ -345,6 +345,7 @@ export const providerConfig = {
     isMetadataVersionEnabled: true,
     metadataSyncEnabled: false
   },
+  // same as in ../../features/common/index.js
   baseUrl: 'https://domain.tld/',
   apiVersion: ''
 };
@@ -380,7 +381,7 @@ MockAlert.propTypes = {
   })
 };
 
-const MocklAlertStack = () => {
+const MockAlertStack = () => {
   const alerts = useAlerts();
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -394,9 +395,19 @@ const MocklAlertStack = () => {
   })));
 };
 
-export const createDecoratorProvider = (config, offlineInterface) => {
+export const mockOfflineInterface = {
+  pwaEnabled: true,
+  startRecording: async () => undefined,
+  getCachedSections: async () => [],
+  removeSection: async () => false,
+  subscribeToDhis2ConnectionStatus: () => () => undefined,
+  latestIsConnected: true
+};
+export const createDecoratorProvider = function () {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : providerConfig;
+  let offlineInterface = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : mockOfflineInterface;
   return fn => /*#__PURE__*/React.createElement(Provider, {
-    config: config || providerConfig,
+    config: config,
     offlineInterface: offlineInterface
-  }, fn(), /*#__PURE__*/React.createElement(MocklAlertStack, null));
+  }, fn(), /*#__PURE__*/React.createElement(MockAlertStack, null));
 };

package/build/es/__e2e__/stories/online-status-message.js

@@ -23,9 +23,4 @@ const OnlineStatusMessaging = () => /*#__PURE__*/React.createElement(React.Fragm
 export const OnlineStatusMessagingWithPwaEnabled = () => /*#__PURE__*/React.createElement(OnlineStatusMessaging, null);
 OnlineStatusMessagingWithPwaEnabled.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
   pwaEnabled: true
-}, {
-  pwaEnabled: true,
-  startRecording: async () => undefined,
-  getCachedSections: async () => [],
-  removeSection: async () => false
 })];

package/build/es/features/the_headerbar_can_display_online_status/the_headerbar_displays_online_status.js

@@ -1,42 +1,17 @@
 import { Before, After, Given, Then, When, And } from 'cypress-cucumber-preprocessor/steps';
-import '../common/index.js'; // https://www.cypress.io/blog/2020/11/12/testing-application-in-offline-network-mode/
+import '../common/index.js'; // see https://github.com/cypress-io/cypress/issues/17723#issuecomment-1457064322
 
 const goOffline = () => {
-  cy.log('**go offline**').then(() => {
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.enable'
-    });
-  }).then(() => {
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.emulateNetworkConditions',
-      params: {
-        offline: true,
-        latency: -1,
-        downloadThroughput: -1,
-        uploadThroughput: -1
-      }
-    });
-  });
+  cy.log('**go offline**') // stub every request with a StaticResponse to simulate network error
+  .then(() => cy.intercept('*', {
+    forceNetworkError: true
+  })).then(() => cy.window().then(win => win.dispatchEvent(new Event('offline'))));
 };
 
 const goOnline = () => {
   // disable offline mode, otherwise we will break our tests :)
-  cy.log('**go online**').then(() => {
-    // https://chromedevtools.github.io/devtools-protocol/1-3/Network/#method-emulateNetworkConditions
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.emulateNetworkConditions',
-      params: {
-        offline: false,
-        latency: -1,
-        downloadThroughput: -1,
-        uploadThroughput: -1
-      }
-    });
-  }).then(() => {
-    return Cypress.automation('remote:debugger:protocol', {
-      command: 'Network.disable'
-    });
-  });
+  cy.log('**go online**') // go back to normal network behavior
+  .then(() => cy.intercept('*')).then(() => cy.window().then(win => win.dispatchEvent(new Event('online'))));
 };
 
 Before(() => {

package/build/es/features/the_headerbar_can_display_online_status.feature

@@ -6,10 +6,6 @@ Feature: The HeaderBar can display online status
         Given the HeaderBar loads without an error
         Then the HeaderBar does not render online status
 
-    Scenario: The HeaderBar displays online status when configured to
-        Given the HeaderBar loads without error with showOnlineStatus configured
-        Then the HeaderBar renders online status
-
     Scenario: The HeaderBar displays online status when PWA is enabled
         Given the HeaderBar loads without error when PWA is enabled
         Then the HeaderBar renders online status
@@ -26,9 +22,8 @@ Feature: The HeaderBar can display online status
         And the viewport is narrower than 480px
         Then the HeaderBar displays only the mobile status bar
 
-    # the following test has been know to fail when run locally and appears to be a know cypress issue
-    # https://github.com/cypress-io/cypress/issues/17723
-    # at time of writing the problem doesn't appear to happen on CI
+    # This is not a complete test of the connection status functionality --
+    # see the app-runtime for detailed tests
     Scenario: The HeaderBar displays an offline status when offline
         Given the HeaderBar loads without error when PWA is enabled
         And the browser goes offline

package/build/es/header-bar.js

@@ -44,10 +44,7 @@ export const HeaderBar = _ref => {
   const {
     appName: configAppName,
     baseUrl,
-    pwaEnabled,
-    headerbar: {
-      showOnlineStatus
-    } = {}
+    pwaEnabled
   } = useConfig();
   const {
     loading,
@@ -83,7 +80,7 @@ export const HeaderBar = _ref => {
     instance: data.title.applicationTitle
   }), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["3860078320", [colors.white]]]) + " " + "right-control-spacer"
-  }), (pwaEnabled || showOnlineStatus) && /*#__PURE__*/React.createElement(OnlineStatus, null), /*#__PURE__*/React.createElement(Notifications, {
+  }), pwaEnabled && /*#__PURE__*/React.createElement(OnlineStatus, null), /*#__PURE__*/React.createElement(Notifications, {
     interpretations: data.notifications.unreadInterpretations,
     messages: data.notifications.unreadMessageConversations,
     userAuthorities: data.user.authorities
@@ -94,7 +91,7 @@ export const HeaderBar = _ref => {
     email: data.user.email,
     avatarId: (_data$user$avatar = data.user.avatar) === null || _data$user$avatar === void 0 ? void 0 : _data$user$avatar.id,
     helpUrl: data.help.helpPageLink
-  }))), (pwaEnabled || showOnlineStatus) && !loading && !error && /*#__PURE__*/React.createElement(OnlineStatus, {
+  }))), pwaEnabled && !loading && !error && /*#__PURE__*/React.createElement(OnlineStatus, {
     dense: true
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3860078320",

package/build/es/header-bar.stories.js

@@ -1,6 +1,6 @@
 import { CustomDataProvider } from '@dhis2/app-runtime';
 import React from 'react';
-import { createDecoratorProvider, providerConfig } from './__e2e__/stories/common.js';
+import { createDecoratorProvider, mockOfflineInterface, providerConfig } from './__e2e__/stories/common.js';
 import { OnlineStatusMessageUpdate } from './__e2e__/stories/online-status-message.js';
 import { HeaderBar } from './header-bar.js';
 const subtitle = 'The common navigation bar used in all DHIS2 apps';
@@ -206,11 +206,8 @@ export const WithOnlineStatusMessage = () => /*#__PURE__*/React.createElement(Cu
 }), /*#__PURE__*/React.createElement(OnlineStatusMessageUpdate, null));
 WithOnlineStatusMessage.decorators = [createDecoratorProvider({ ...providerConfig,
   pwaEnabled: true
-}, {
-  pwaEnabled: true,
-  startRecording: async () => undefined,
-  getCachedSections: async () => [],
-  removeSection: async () => false
+}, { ...mockOfflineInterface,
+  latestIsConnected: false
 })];
 WithOnlineStatusMessage.parameters = {
   docs: {

package/build/es/online-status.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-import { useOnlineStatus, useOnlineStatusMessage } from '@dhis2/app-runtime';
+import { useDhis2ConnectionStatus, useOnlineStatusMessage } from '@dhis2/app-runtime';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -12,8 +12,8 @@ export function OnlineStatus(_ref) {
     dense
   } = _ref;
   const {
-    online
-  } = useOnlineStatus();
+    isConnected: online
+  } = useDhis2ConnectionStatus();
   const {
     onlineStatusMessage
   } = useOnlineStatusMessage();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "8.12.2",
+    "version": "8.12.4",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "8.12.2",
-        "@dhis2-ui/button": "8.12.2",
-        "@dhis2-ui/card": "8.12.2",
-        "@dhis2-ui/center": "8.12.2",
-        "@dhis2-ui/divider": "8.12.2",
-        "@dhis2-ui/input": "8.12.2",
-        "@dhis2-ui/layer": "8.12.2",
-        "@dhis2-ui/loader": "8.12.2",
-        "@dhis2-ui/logo": "8.12.2",
-        "@dhis2-ui/menu": "8.12.2",
-        "@dhis2-ui/modal": "8.12.2",
-        "@dhis2-ui/user-avatar": "8.12.2",
+        "@dhis2-ui/box": "8.12.4",
+        "@dhis2-ui/button": "8.12.4",
+        "@dhis2-ui/card": "8.12.4",
+        "@dhis2-ui/center": "8.12.4",
+        "@dhis2-ui/divider": "8.12.4",
+        "@dhis2-ui/input": "8.12.4",
+        "@dhis2-ui/layer": "8.12.4",
+        "@dhis2-ui/loader": "8.12.4",
+        "@dhis2-ui/logo": "8.12.4",
+        "@dhis2-ui/menu": "8.12.4",
+        "@dhis2-ui/modal": "8.12.4",
+        "@dhis2-ui/user-avatar": "8.12.4",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.12.2",
-        "@dhis2/ui-icons": "8.12.2",
+        "@dhis2/ui-constants": "8.12.4",
+        "@dhis2/ui-icons": "8.12.4",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"
@@ -56,7 +56,7 @@
         "build"
     ],
     "devDependencies": {
-        "@dhis2/app-runtime": "^3.6.0",
+        "@dhis2/app-runtime": "^3.9.0",
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",

package/build/cjs/__e2e__/stories/show-online-status.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ShowOnlineStatus = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../../index.js");
-
-var _common = require("./common.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ShowOnlineStatus = () => /*#__PURE__*/_react.default.createElement(_index.HeaderBar, {
-  appName: "Example!"
-});
-
-exports.ShowOnlineStatus = ShowOnlineStatus;
-ShowOnlineStatus.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
-  headerbar: {
-    showOnlineStatus: true
-  }
-})];

package/build/es/__e2e__/stories/show-online-status.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { HeaderBar } from '../../index.js';
-import { providerConfig, createDecoratorCustomDataProviderHeaderBar, createDecoratorProvider } from './common.js';
-export const ShowOnlineStatus = () => /*#__PURE__*/React.createElement(HeaderBar, {
-  appName: "Example!"
-});
-ShowOnlineStatus.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
-  headerbar: {
-    showOnlineStatus: true
-  }
-})];