@dhis2-ui/header-bar 8.5.4 → 8.6.1

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

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "MeWithAvatar", {
     return _meWithAvatar.MeWithAvatar;
   }
 });
+Object.defineProperty(exports, "OnlineStatusMessagingWithPwaEnabled", {
+  enumerable: true,
+  get: function () {
+    return _onlineStatusMessage.OnlineStatusMessagingWithPwaEnabled;
+  }
+});
 Object.defineProperty(exports, "PWAEnabled", {
   enumerable: true,
   get: function () {
@@ -63,12 +69,6 @@ Object.defineProperty(exports, "UserHasWebMessagingAuthority", {
     return _userHasWebMessagingAuthority.UserHasWebMessagingAuthority;
   }
 });
-Object.defineProperty(exports, "WithLastOnline", {
-  enumerable: true,
-  get: function () {
-    return _withLastOnline.WithLastOnline;
-  }
-});
 Object.defineProperty(exports, "WithSpecialAppNameCharacters", {
   enumerable: true,
   get: function () {
@@ -133,7 +133,7 @@ var _showOnlineStatus = require("./stories/show-online-status.js");
 
 var _pwaEnabled = require("./stories/pwa-enabled.js");
 
-var _withLastOnline = require("./stories/with-last-online.js");
+var _onlineStatusMessage = require("./stories/online-status-message.js");
 
 var _meWithAvatar = require("./stories/me-with-avatar.js");
 

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

@@ -418,9 +418,10 @@ const MocklAlertStack = () => {
   })));
 };
 
-const createDecoratorProvider = config => {
+const createDecoratorProvider = (config, offlineInterface) => {
   return fn => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-    config: config || providerConfig
+    config: config || providerConfig,
+    offlineInterface: offlineInterface
   }, fn(), /*#__PURE__*/_react.default.createElement(MocklAlertStack, null));
 };
 

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OnlineStatusMessagingWithPwaEnabled = exports.OnlineStatusMessageUpdate = void 0;
+
+var _button = require("@dhis2-ui/button");
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+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 OnlineStatusMessageUpdate = () => {
+  const {
+    onlineStatusMessage,
+    setOnlineStatusMessage
+  } = (0, _appRuntime.useOnlineStatusMessage)();
+  const buttonLabel = !onlineStatusMessage ? 'display online status message' : 'remove online status message';
+  return /*#__PURE__*/_react.default.createElement(_button.Button, {
+    onClick: () => {
+      setOnlineStatusMessage(!onlineStatusMessage ? '8 offline events' : '');
+    }
+  }, buttonLabel);
+};
+
+exports.OnlineStatusMessageUpdate = OnlineStatusMessageUpdate;
+
+const OnlineStatusMessaging = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.HeaderBar, {
+  appName: "Example!"
+}), /*#__PURE__*/_react.default.createElement(OnlineStatusMessageUpdate, null));
+
+const OnlineStatusMessagingWithPwaEnabled = () => /*#__PURE__*/_react.default.createElement(OnlineStatusMessaging, null);
+
+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

@@ -43,7 +43,9 @@ const goOnline = () => {
   });
 };
 
-(0, _steps.Before)(() => goOnline());
+(0, _steps.Before)(() => {
+  goOnline();
+});
 (0, _steps.After)(() => goOnline());
 (0, _steps.Given)('the HeaderBar loads without error with showOnlineStatus configured', () => {
   cy.visitStory('HeaderBarTesting', 'Show Online Status');
@@ -51,8 +53,8 @@ const goOnline = () => {
 (0, _steps.Given)('the HeaderBar loads without error when PWA is enabled', () => {
   cy.visitStory('HeaderBarTesting', 'PWA Enabled');
 });
-(0, _steps.Given)("the HeaderBar loads without error with 'LAST_ONLINE' configured", () => {
-  cy.visitStory('HeaderBarTesting', 'With Last Online');
+(0, _steps.Given)('the HeaderBar loads and is PWA enabled so online status messages will be visible', () => {
+  cy.visitStory('HeaderBarTesting', 'Online Status Messaging With PWA Enabled');
 });
 (0, _steps.And)('the viewport is narrower than 480px', () => {
   cy.viewport(460, 660);
@@ -91,10 +93,22 @@ const goOnline = () => {
     expect($icon).to.have.class('offline');
   });
 });
-(0, _steps.Then)('no info text is displayed', () => {
+(0, _steps.Then)('no online status message text is displayed', () => {
   cy.get('[data-test="headerbar-online-status"] .info').should('not.exist');
   cy.get('[data-test="headerbar-online-status"] .info-dense').should('not.exist');
 });
+(0, _steps.When)('an online status message is sent', () => {
+  cy.get('button').contains('display online status message').click();
+});
+(0, _steps.When)('an online status message is removed', () => {
+  cy.get('button').contains('remove online status message').click();
+});
+(0, _steps.Then)('an online status message is displayed', () => {
+  cy.get('[data-test="headerbar-online-status"] .info').should('include.text', '8 offline events');
+});
+(0, _steps.Then)('an online status message is displayed with formatting for small screens', () => {
+  cy.get('[data-test="headerbar-online-status"] .info-dense').should('include.text', '8 offline events');
+});
 (0, _steps.Then)('last online text is displayed in the status badge', () => {
   cy.get('[data-test="headerbar-online-status"].badge .info').should('include.text', 'Last online');
 });

package/build/cjs/features/the_headerbar_can_display_online_status.feature

@@ -26,38 +26,37 @@ 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
     Scenario: The HeaderBar displays an offline status when offline
         Given the HeaderBar loads without error when PWA is enabled
         And the browser goes offline
         Then the status badge shows offline
 
-    # Additional text
+    # Online status message
 
-    Scenario: No additional status text is displayed by default
-        Given the HeaderBar loads without error when PWA is enabled
-        Then no info text is displayed
-        And the browser goes offline
-        Then no info text is displayed
+    Scenario: In the HeaderBar no online status message text is displayed by default
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        Then no online status message text is displayed
 
-    Scenario: No additional status text is displayed by default on small screens
-        Given the HeaderBar loads without error when PWA is enabled
+    Scenario: In the HeaderBar the online status message text is displayed
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        When an online status message is sent
+        Then an online status message is displayed
+
+    Scenario: In the HeaderBar the online status message text can be removed
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        When an online status message is sent
+        Then an online status message is displayed
+        When an online status message is removed
+        Then no online status message text is displayed
+
+    # Online status message - small screens
+
+    Scenario: In the HeaderBar the online status message text can be set on small screens
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
         And the viewport is narrower than 480px
-        Then no info text is displayed
-        And the browser goes offline
-        Then no info text is displayed
-
-    # These tests can individually fail intermittently, disrupting CI.
-    # Disabled for the time being:
-
-    # Scenario: Last online text is displayed in status badge when configured and offline
-    #     Given the HeaderBar loads without error with 'LAST_ONLINE' configured
-    #     Then no info text is displayed
-    #     And the browser goes offline
-    #     Then last online text is displayed in the status badge
-
-    # Scenario: Last online text is displayed in status bar when configured and offline
-    #     Given the HeaderBar loads without error with 'LAST_ONLINE' configured
-    #     And the viewport is narrower than 480px
-    #     Then no info text is displayed
-    #     And the browser goes offline
-    #     Then last online text is displayed in the mobile status bar
+        Then no online status message text is displayed
+        When an online status message is sent
+        Then an online status message is displayed with formatting for small screens

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithUpdateNotification = exports.WithOnlineStatus = exports.WithLastOnlineInfo = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
+exports.default = exports.WithUpdateNotification = exports.WithOnlineStatusMessage = exports.WithOnlineStatus = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
 
 var _appRuntime = require("@dhis2/app-runtime");
 
@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _common = require("./__e2e__/stories/common.js");
 
+var _onlineStatusMessage = require("./__e2e__/stories/online-status-message.js");
+
 var _headerBar = require("./header-bar.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -228,33 +230,34 @@ WithOnlineStatus.parameters = {
   }
 };
 
-const WithLastOnlineInfo = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+const WithUpdateNotification = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   data: customData
 }, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
-  appName: "Exemple!"
+  appName: "Data Visualizer",
+  updateAvailable: true
 }));
 
-exports.WithLastOnlineInfo = WithLastOnlineInfo;
-WithLastOnlineInfo.decorators = [(0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+exports.WithUpdateNotification = WithUpdateNotification;
+
+const WithOnlineStatusMessage = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Exemple!"
+}), /*#__PURE__*/_react.default.createElement(_onlineStatusMessage.OnlineStatusMessageUpdate, null));
+
+exports.WithOnlineStatusMessage = WithOnlineStatusMessage;
+WithOnlineStatusMessage.decorators = [(0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  pwaEnabled: true
+}, {
   pwaEnabled: true,
-  headerbar: {
-    onlineStatusInfo: 'LAST_ONLINE'
-  }
+  startRecording: async () => undefined,
+  getCachedSections: async () => [],
+  removeSection: async () => false
 })];
-WithLastOnlineInfo.parameters = {
+WithOnlineStatusMessage.parameters = {
   docs: {
     description: {
-      story: 'When offline, the status indicator will show text describing \
-                time since last online.'
+      story: 'When online status is updated, the status indicator will show react node sent as the message'
     }
   }
-};
-
-const WithUpdateNotification = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
-  data: customData
-}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
-  appName: "Data Visualizer",
-  updateAvailable: true
-}));
-
-exports.WithUpdateNotification = WithUpdateNotification;
+};

package/build/cjs/locales/en/translations.json

@@ -8,7 +8,6 @@
     "Debug info": "Debug info",
     "Close": "Close",
     "Copy debug info": "Copy debug info",
-    "Last online {{relativeTime}}": "Last online {{relativeTime}}",
     "Online": "Online",
     "Offline": "Offline",
     "Edit profile": "Edit profile",

package/build/cjs/online-status.js

@@ -11,8 +11,6 @@ var _appRuntime = require("@dhis2/app-runtime");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _moment = _interopRequireDefault(require("moment"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -23,52 +21,30 @@ var _onlineStatusStyles = _interopRequireDefault(require("./online-status.styles
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const useOnlineStatusInfo = _ref => {
-  let {
-    online,
-    lastOnline
-  } = _ref;
-  const {
-    headerbar
-  } = (0, _appRuntime.useConfig)();
-
-  if ((headerbar === null || headerbar === void 0 ? void 0 : headerbar.onlineStatusInfo) === 'LAST_ONLINE' && !online && lastOnline) {
-    return _index.default.t('Last online {{relativeTime}}', {
-      relativeTime: (0, _moment.default)(lastOnline).fromNow()
-    });
-  } // todo: in the future, support 'CUSTOM' option
-
-
-  return null;
-};
 /** A badge to display online/offline status in the header bar */
-
-
-function OnlineStatus(_ref2) {
+function OnlineStatus(_ref) {
   let {
     dense
-  } = _ref2;
+  } = _ref;
   const {
-    online,
-    lastOnline
+    online
   } = (0, _appRuntime.useOnlineStatus)();
-  const info = useOnlineStatusInfo({
-    online,
-    lastOnline
-  });
+  const {
+    onlineStatusMessage
+  } = (0, _appRuntime.useOnlineStatusMessage)();
   const displayStatus = online ? _index.default.t('Online') : _index.default.t('Offline');
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": "headerbar-online-status",
     className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + ((0, _classnames.default)('container', dense ? 'bar' : 'badge') || "")
-  }, info && !dense && /*#__PURE__*/_react.default.createElement("span", {
+  }, onlineStatusMessage && !dense && /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + "info unselectable"
-  }, info), /*#__PURE__*/_react.default.createElement("div", {
+  }, onlineStatusMessage), /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + ((0, _classnames.default)('icon', online ? 'online' : 'offline') || "")
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + "label unselectable"
-  }, displayStatus), info && dense && /*#__PURE__*/_react.default.createElement("span", {
+  }, displayStatus), onlineStatusMessage && dense && /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-".concat(_onlineStatusStyles.default.__hash) + " " + "info-dense unselectable"
-  }, info), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, onlineStatusMessage), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: _onlineStatusStyles.default.__hash
   }, _onlineStatusStyles.default));
 }

package/build/cjs/online-status.styles.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-const _defaultExport = [".container.jsx-1778673733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(_uiConstants.colors.grey100, ";}"), ".container.badge.jsx-1778673733{margin-right:".concat(_uiConstants.spacers.dp24, ";padding:").concat(_uiConstants.spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-1778673733{display:none;padding:0px ".concat(_uiConstants.spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-1778673733{display:none;}.container.bar.jsx-1778673733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-1778673733{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-1778673733{margin-right:".concat(_uiConstants.spacers.dp16, ";}"), ".info-dense.jsx-1778673733{margin-left:".concat(_uiConstants.spacers.dp12, ";font-size:12px;}"), ".icon.jsx-1778673733{width:8px;height:8px;border-radius:8px;margin-right:".concat(_uiConstants.spacers.dp4, ";}"), ".icon.online.jsx-1778673733{background-color:".concat(_uiConstants.colors.teal400, ";}"), ".icon.offline.jsx-1778673733{background-color:transparent;border:1px solid ".concat(_uiConstants.colors.yellow300, ";}"), ".icon.reconnecting.jsx-1778673733{background:".concat(_uiConstants.colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-1778673733 2s linear infinite;animation:fadeinout-jsx-1778673733 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-1778673733{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", "@keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", ".label.jsx-1778673733{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
-_defaultExport.__hash = "1778673733";
+const _defaultExport = [".container.jsx-2116755021{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(_uiConstants.colors.grey100, ";}"), ".container.badge.jsx-2116755021{margin-right:".concat(_uiConstants.spacers.dp24, ";padding:").concat(_uiConstants.spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-2116755021{display:none;padding:0px ".concat(_uiConstants.spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-2116755021{display:none;}.container.bar.jsx-2116755021{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-2116755021{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-2116755021{margin-right:".concat(_uiConstants.spacers.dp16, ";}"), ".info-dense.jsx-2116755021{margin-left:".concat(_uiConstants.spacers.dp12, ";font-size:12px;}"), ".icon.jsx-2116755021{width:8px;min-width:8px;height:8px;border-radius:8px;margin-right:".concat(_uiConstants.spacers.dp4, ";}"), ".icon.online.jsx-2116755021{background-color:".concat(_uiConstants.colors.teal400, ";}"), ".icon.offline.jsx-2116755021{background-color:transparent;border:1px solid ".concat(_uiConstants.colors.yellow300, ";}"), ".icon.reconnecting.jsx-2116755021{background:".concat(_uiConstants.colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-2116755021 2s linear infinite;animation:fadeinout-jsx-2116755021 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-2116755021{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-2116755021{50%{opacity:1;}}", "@keyframes fadeinout-jsx-2116755021{50%{opacity:1;}}", ".label.jsx-2116755021{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
+_defaultExport.__hash = "2116755021";
 var _default = _defaultExport;
 exports.default = _default;

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

@@ -6,7 +6,7 @@ export default {
 export { Default } from './stories/default.js';
 export { ShowOnlineStatus } from './stories/show-online-status.js';
 export { PWAEnabled } from './stories/pwa-enabled.js';
-export { WithLastOnline } from './stories/with-last-online.js';
+export { OnlineStatusMessagingWithPwaEnabled } from './stories/online-status-message.js';
 export { MeWithAvatar } from './stories/me-with-avatar.js';
 export { WithSpecialAppNameCharacters } from './stories/with-special-app-name-character.js';
 export { CustomApplicationTitle } from './stories/custom-application-title.js';

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

@@ -394,8 +394,9 @@ const MocklAlertStack = () => {
   })));
 };
 
-export const createDecoratorProvider = config => {
+export const createDecoratorProvider = (config, offlineInterface) => {
   return fn => /*#__PURE__*/React.createElement(Provider, {
-    config: config || providerConfig
+    config: config || providerConfig,
+    offlineInterface: offlineInterface
   }, fn(), /*#__PURE__*/React.createElement(MocklAlertStack, null));
 };

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

@@ -0,0 +1,31 @@
+import { Button } from '@dhis2-ui/button';
+import { useOnlineStatusMessage } from '@dhis2/app-runtime';
+import React from 'react';
+import { HeaderBar } from '../../index.js';
+import { providerConfig, createDecoratorCustomDataProviderHeaderBar, createDecoratorProvider } from './common.js';
+export const OnlineStatusMessageUpdate = () => {
+  const {
+    onlineStatusMessage,
+    setOnlineStatusMessage
+  } = useOnlineStatusMessage();
+  const buttonLabel = !onlineStatusMessage ? 'display online status message' : 'remove online status message';
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: () => {
+      setOnlineStatusMessage(!onlineStatusMessage ? '8 offline events' : '');
+    }
+  }, buttonLabel);
+};
+
+const OnlineStatusMessaging = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Example!"
+}), /*#__PURE__*/React.createElement(OnlineStatusMessageUpdate, null));
+
+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,4 +1,4 @@
-import { Before, After, Given, Then, And } from 'cypress-cucumber-preprocessor/steps';
+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/
 
 const goOffline = () => {
@@ -39,7 +39,9 @@ const goOnline = () => {
   });
 };
 
-Before(() => goOnline());
+Before(() => {
+  goOnline();
+});
 After(() => goOnline());
 Given('the HeaderBar loads without error with showOnlineStatus configured', () => {
   cy.visitStory('HeaderBarTesting', 'Show Online Status');
@@ -47,8 +49,8 @@ Given('the HeaderBar loads without error with showOnlineStatus configured', () =
 Given('the HeaderBar loads without error when PWA is enabled', () => {
   cy.visitStory('HeaderBarTesting', 'PWA Enabled');
 });
-Given("the HeaderBar loads without error with 'LAST_ONLINE' configured", () => {
-  cy.visitStory('HeaderBarTesting', 'With Last Online');
+Given('the HeaderBar loads and is PWA enabled so online status messages will be visible', () => {
+  cy.visitStory('HeaderBarTesting', 'Online Status Messaging With PWA Enabled');
 });
 And('the viewport is narrower than 480px', () => {
   cy.viewport(460, 660);
@@ -87,10 +89,22 @@ Then('the status badge shows offline', () => {
     expect($icon).to.have.class('offline');
   });
 });
-Then('no info text is displayed', () => {
+Then('no online status message text is displayed', () => {
   cy.get('[data-test="headerbar-online-status"] .info').should('not.exist');
   cy.get('[data-test="headerbar-online-status"] .info-dense').should('not.exist');
 });
+When('an online status message is sent', () => {
+  cy.get('button').contains('display online status message').click();
+});
+When('an online status message is removed', () => {
+  cy.get('button').contains('remove online status message').click();
+});
+Then('an online status message is displayed', () => {
+  cy.get('[data-test="headerbar-online-status"] .info').should('include.text', '8 offline events');
+});
+Then('an online status message is displayed with formatting for small screens', () => {
+  cy.get('[data-test="headerbar-online-status"] .info-dense').should('include.text', '8 offline events');
+});
 Then('last online text is displayed in the status badge', () => {
   cy.get('[data-test="headerbar-online-status"].badge .info').should('include.text', 'Last online');
 });

package/build/es/features/the_headerbar_can_display_online_status.feature

@@ -26,38 +26,37 @@ 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
     Scenario: The HeaderBar displays an offline status when offline
         Given the HeaderBar loads without error when PWA is enabled
         And the browser goes offline
         Then the status badge shows offline
 
-    # Additional text
+    # Online status message
 
-    Scenario: No additional status text is displayed by default
-        Given the HeaderBar loads without error when PWA is enabled
-        Then no info text is displayed
-        And the browser goes offline
-        Then no info text is displayed
+    Scenario: In the HeaderBar no online status message text is displayed by default
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        Then no online status message text is displayed
 
-    Scenario: No additional status text is displayed by default on small screens
-        Given the HeaderBar loads without error when PWA is enabled
+    Scenario: In the HeaderBar the online status message text is displayed
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        When an online status message is sent
+        Then an online status message is displayed
+
+    Scenario: In the HeaderBar the online status message text can be removed
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
+        When an online status message is sent
+        Then an online status message is displayed
+        When an online status message is removed
+        Then no online status message text is displayed
+
+    # Online status message - small screens
+
+    Scenario: In the HeaderBar the online status message text can be set on small screens
+        Given the HeaderBar loads and is PWA enabled so online status messages will be visible
         And the viewport is narrower than 480px
-        Then no info text is displayed
-        And the browser goes offline
-        Then no info text is displayed
-
-    # These tests can individually fail intermittently, disrupting CI.
-    # Disabled for the time being:
-
-    # Scenario: Last online text is displayed in status badge when configured and offline
-    #     Given the HeaderBar loads without error with 'LAST_ONLINE' configured
-    #     Then no info text is displayed
-    #     And the browser goes offline
-    #     Then last online text is displayed in the status badge
-
-    # Scenario: Last online text is displayed in status bar when configured and offline
-    #     Given the HeaderBar loads without error with 'LAST_ONLINE' configured
-    #     And the viewport is narrower than 480px
-    #     Then no info text is displayed
-    #     And the browser goes offline
-    #     Then last online text is displayed in the mobile status bar
+        Then no online status message text is displayed
+        When an online status message is sent
+        Then an online status message is displayed with formatting for small screens

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

@@ -1,6 +1,7 @@
 import { CustomDataProvider } from '@dhis2/app-runtime';
 import React from 'react';
 import { createDecoratorProvider, 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';
 const description = "\nThe header bar is mandatory for all apps. This creates a stable, understandable point of reference for the user across all kinds of different apps. It must always be displayed fixed to the top of the screen. Do not interfere or obstruct interaction with the header bar.\n\nThe header bar is included automatically with the App Shell and should not need any configuration.\n\n#### Theme\n\nThe header bar can be themeed to suit the brand/color of your DHIS2 instance. The color of the text/icons will be automatically adjusted based on the selected color.\n\n```js\nimport { HeaderBar } from '@dhis2/ui'\n```\n";
@@ -192,28 +193,29 @@ WithOnlineStatus.parameters = {
     }
   }
 };
-export const WithLastOnlineInfo = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+export const WithUpdateNotification = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   data: customData
 }, /*#__PURE__*/React.createElement(HeaderBar, {
-  appName: "Exemple!"
+  appName: "Data Visualizer",
+  updateAvailable: true
 }));
-WithLastOnlineInfo.decorators = [createDecoratorProvider({ ...providerConfig,
+export const WithOnlineStatusMessage = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Exemple!"
+}), /*#__PURE__*/React.createElement(OnlineStatusMessageUpdate, null));
+WithOnlineStatusMessage.decorators = [createDecoratorProvider({ ...providerConfig,
+  pwaEnabled: true
+}, {
   pwaEnabled: true,
-  headerbar: {
-    onlineStatusInfo: 'LAST_ONLINE'
-  }
+  startRecording: async () => undefined,
+  getCachedSections: async () => [],
+  removeSection: async () => false
 })];
-WithLastOnlineInfo.parameters = {
+WithOnlineStatusMessage.parameters = {
   docs: {
     description: {
-      story: 'When offline, the status indicator will show text describing \
-                time since last online.'
+      story: 'When online status is updated, the status indicator will show react node sent as the message'
     }
   }
-};
-export const WithUpdateNotification = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
-  data: customData
-}, /*#__PURE__*/React.createElement(HeaderBar, {
-  appName: "Data Visualizer",
-  updateAvailable: true
-}));
+};

package/build/es/locales/en/translations.json

@@ -8,7 +8,6 @@
     "Debug info": "Debug info",
     "Close": "Close",
     "Copy debug info": "Copy debug info",
-    "Last online {{relativeTime}}": "Last online {{relativeTime}}",
     "Online": "Online",
     "Offline": "Offline",
     "Edit profile": "Edit profile",

package/build/es/online-status.js

@@ -1,58 +1,35 @@
 import _JSXStyle from "styled-jsx/style";
-import { useConfig, useOnlineStatus } from '@dhis2/app-runtime';
+import { useOnlineStatus, useOnlineStatusMessage } from '@dhis2/app-runtime';
 import cx from 'classnames';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from './locales/index.js';
 import styles from './online-status.styles.js';
-
-const useOnlineStatusInfo = _ref => {
-  let {
-    online,
-    lastOnline
-  } = _ref;
-  const {
-    headerbar
-  } = useConfig();
-
-  if ((headerbar === null || headerbar === void 0 ? void 0 : headerbar.onlineStatusInfo) === 'LAST_ONLINE' && !online && lastOnline) {
-    return i18n.t('Last online {{relativeTime}}', {
-      relativeTime: moment(lastOnline).fromNow()
-    });
-  } // todo: in the future, support 'CUSTOM' option
-
-
-  return null;
-};
 /** A badge to display online/offline status in the header bar */
 
-
-export function OnlineStatus(_ref2) {
+export function OnlineStatus(_ref) {
   let {
     dense
-  } = _ref2;
+  } = _ref;
   const {
-    online,
-    lastOnline
+    online
   } = useOnlineStatus();
-  const info = useOnlineStatusInfo({
-    online,
-    lastOnline
-  });
+  const {
+    onlineStatusMessage
+  } = useOnlineStatusMessage();
   const displayStatus = online ? i18n.t('Online') : i18n.t('Offline');
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-online-status",
     className: "jsx-".concat(styles.__hash) + " " + (cx('container', dense ? 'bar' : 'badge') || "")
-  }, info && !dense && /*#__PURE__*/React.createElement("span", {
+  }, onlineStatusMessage && !dense && /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "info unselectable"
-  }, info), /*#__PURE__*/React.createElement("div", {
+  }, onlineStatusMessage), /*#__PURE__*/React.createElement("div", {
     className: "jsx-".concat(styles.__hash) + " " + (cx('icon', online ? 'online' : 'offline') || "")
   }), /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "label unselectable"
-  }, displayStatus), info && dense && /*#__PURE__*/React.createElement("span", {
+  }, displayStatus), onlineStatusMessage && dense && /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "info-dense unselectable"
-  }, info), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, onlineStatusMessage), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles));
 }

package/build/es/online-status.styles.js

@@ -1,4 +1,4 @@
 import { colors, spacers } from '@dhis2/ui-constants';
-const _defaultExport = [".container.jsx-1778673733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(colors.grey100, ";}"), ".container.badge.jsx-1778673733{margin-right:".concat(spacers.dp24, ";padding:").concat(spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-1778673733{display:none;padding:0px ".concat(spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-1778673733{display:none;}.container.bar.jsx-1778673733{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-1778673733{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-1778673733{margin-right:".concat(spacers.dp16, ";}"), ".info-dense.jsx-1778673733{margin-left:".concat(spacers.dp12, ";font-size:12px;}"), ".icon.jsx-1778673733{width:8px;height:8px;border-radius:8px;margin-right:".concat(spacers.dp4, ";}"), ".icon.online.jsx-1778673733{background-color:".concat(colors.teal400, ";}"), ".icon.offline.jsx-1778673733{background-color:transparent;border:1px solid ".concat(colors.yellow300, ";}"), ".icon.reconnecting.jsx-1778673733{background:".concat(colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-1778673733 2s linear infinite;animation:fadeinout-jsx-1778673733 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-1778673733{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", "@keyframes fadeinout-jsx-1778673733{50%{opacity:1;}}", ".label.jsx-1778673733{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
-_defaultExport.__hash = "1778673733";
+const _defaultExport = [".container.jsx-2116755021{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background-color:#104167;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:".concat(colors.grey100, ";}"), ".container.badge.jsx-2116755021{margin-right:".concat(spacers.dp24, ";padding:").concat(spacers.dp8, ";border-radius:5px;font-size:14px;}"), ".container.bar.jsx-2116755021{display:none;padding:0px ".concat(spacers.dp4, ";min-height:24px;font-size:13px;}"), "@media (max-width:480px){.container.badge.jsx-2116755021{display:none;}.container.bar.jsx-2116755021{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}", ".unselectable.jsx-2116755021{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".info.jsx-2116755021{margin-right:".concat(spacers.dp16, ";}"), ".info-dense.jsx-2116755021{margin-left:".concat(spacers.dp12, ";font-size:12px;}"), ".icon.jsx-2116755021{width:8px;min-width:8px;height:8px;border-radius:8px;margin-right:".concat(spacers.dp4, ";}"), ".icon.online.jsx-2116755021{background-color:".concat(colors.teal400, ";}"), ".icon.offline.jsx-2116755021{background-color:transparent;border:1px solid ".concat(colors.yellow300, ";}"), ".icon.reconnecting.jsx-2116755021{background:".concat(colors.grey300, ";-webkit-animation:fadeinout 2s linear infinite;-webkit-animation:fadeinout-jsx-2116755021 2s linear infinite;animation:fadeinout-jsx-2116755021 2s linear infinite;opacity:0;}"), "@-webkit-keyframes fadeinout{50%.jsx-2116755021{opacity:1;}}", "@-webkit-keyframes fadeinout-jsx-2116755021{50%{opacity:1;}}", "@keyframes fadeinout-jsx-2116755021{50%{opacity:1;}}", ".label.jsx-2116755021{-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;}"];
+_defaultExport.__hash = "2116755021";
 export default _defaultExport;

package/package.json

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

package/build/cjs/__e2e__/stories/with-last-online.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithLastOnline = 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 WithLastOnline = () => /*#__PURE__*/_react.default.createElement(_index.HeaderBar, {
-  appName: "Example!"
-});
-
-exports.WithLastOnline = WithLastOnline;
-WithLastOnline.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
-  headerbar: {
-    showOnlineStatus: true,
-    onlineStatusInfo: 'LAST_ONLINE'
-  }
-})];

package/build/es/__e2e__/stories/with-last-online.js

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