@dhis2-ui/header-bar 8.4.17 → 8.5.0-beta.2

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

@@ -75,6 +75,42 @@ Object.defineProperty(exports, "WithSpecialAppNameCharacters", {
     return _withSpecialAppNameCharacter.WithSpecialAppNameCharacters;
   }
 });
+Object.defineProperty(exports, "WithUnknownAppName", {
+  enumerable: true,
+  get: function () {
+    return _withDebugInfoEdgeCases.WithUnknownAppName;
+  }
+});
+Object.defineProperty(exports, "WithUnknownAppNameAndVersion", {
+  enumerable: true,
+  get: function () {
+    return _withDebugInfoEdgeCases.WithUnknownAppNameAndVersion;
+  }
+});
+Object.defineProperty(exports, "WithUnknownAppVersion", {
+  enumerable: true,
+  get: function () {
+    return _withDebugInfoEdgeCases.WithUnknownAppVersion;
+  }
+});
+Object.defineProperty(exports, "WithUnknownInstanceVersion", {
+  enumerable: true,
+  get: function () {
+    return _withDebugInfoEdgeCases.WithUnknownInstanceVersion;
+  }
+});
+Object.defineProperty(exports, "WithUpdateAvailableNotification", {
+  enumerable: true,
+  get: function () {
+    return _withUpdateAvailableNotification.WithUpdateAvailableNotification;
+  }
+});
+Object.defineProperty(exports, "WithUpdateAvailableNotificationNoAppName", {
+  enumerable: true,
+  get: function () {
+    return _withUpdateAvailableNotification.WithUpdateAvailableNotificationNoAppName;
+  }
+});
 Object.defineProperty(exports, "ZeroUnreadInterpretations", {
   enumerable: true,
   get: function () {
@@ -119,6 +155,10 @@ var _zeroUnreadInterpretations = require("./stories/zero-unread-interpretations.
 
 var _zeroUnreadMessages = require("./stories/zero-unread-messages.js");
 
+var _withUpdateAvailableNotification = require("./stories/with-update-available-notification.js");
+
+var _withDebugInfoEdgeCases = require("./stories/with-debug-info-edge-cases.js");
+
 var _default = {
   title: 'HeaderBarTesting',
   component: _index.HeaderBar

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

@@ -7,7 +7,13 @@ exports.providerConfig = exports.modulesWithSpecialCharacters = exports.defaultM
 
 var _appRuntime = require("@dhis2/app-runtime");
 
-var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -278,36 +284,6 @@ exports.modulesWithSpecialCharacters = modulesWithSpecialCharacters;
 const applicationTitle = 'Foobar';
 exports.applicationTitle = applicationTitle;
 const dataProviderData = {
-  'system/info': {
-    contextPath: 'https://debug.dhis2.org/dev',
-    userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
-    calendar: 'iso8601',
-    dateFormat: 'yyyy-mm-dd',
-    serverDate: '2021-10-06T08:06:15.256',
-    serverTimeZoneId: 'Etc/UTC',
-    serverTimeZoneDisplayName: 'Coordinated Universal Time',
-    lastAnalyticsTableSuccess: '2021-09-18T10:24:03.536',
-    intervalSinceLastAnalyticsTableSuccess: '429 h, 42 m, 11 s',
-    lastAnalyticsTableRuntime: '520835',
-    lastSystemMonitoringSuccess: '2019-03-26T17:07:15.418',
-    version: '2.38-SNAPSHOT',
-    revision: '6607c3c',
-    buildTime: '2021-10-05T17:13:00.000',
-    jasperReportsVersion: '6.3.1',
-    environmentVariable: 'DHIS2_HOME',
-    databaseInfo: {
-      spatialSupport: true
-    },
-    encryption: false,
-    emailConfigured: false,
-    redisEnabled: false,
-    systemId: 'eed3d451-4ff5-4193-b951-ffcc68954299',
-    systemName: 'DHIS 2 Demo - Sierra Leone',
-    instanceBaseUrl: 'https://debug.dhis2.org/dev',
-    clusterHostname: '',
-    isMetadataVersionEnabled: true,
-    metadataSyncEnabled: false
-  },
   'systemSettings/applicationTitle': {
     applicationTitle
   },
@@ -346,15 +322,106 @@ const createDecoratorCustomDataProviderHeaderBar = function () {
 
 exports.createDecoratorCustomDataProviderHeaderBar = createDecoratorCustomDataProviderHeaderBar;
 const providerConfig = {
+  appName: 'TestApp',
+  appVersion: {
+    full: '101.2.3-beta.4',
+    major: 101,
+    minor: 2,
+    patch: 3,
+    tag: 'beta.4'
+  },
+  serverVersion: {
+    full: '2.39.2.1-SNAPSHOT',
+    major: 2,
+    minor: 39,
+    patch: 2,
+    hotfix: 1,
+    tag: 'SNAPSHOT'
+  },
+  systemInfo: {
+    contextPath: 'https://debug.dhis2.org/dev',
+    userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36',
+    calendar: 'iso8601',
+    dateFormat: 'yyyy-mm-dd',
+    serverDate: '2021-10-06T08:06:15.256',
+    serverTimeZoneId: 'Etc/UTC',
+    serverTimeZoneDisplayName: 'Coordinated Universal Time',
+    lastAnalyticsTableSuccess: '2021-09-18T10:24:03.536',
+    intervalSinceLastAnalyticsTableSuccess: '429 h, 42 m, 11 s',
+    lastAnalyticsTableRuntime: '520835',
+    lastSystemMonitoringSuccess: '2019-03-26T17:07:15.418',
+    version: '2.39.2.1-SNAPSHOT',
+    revision: '6607c3c',
+    buildTime: '2021-10-05T17:13:00.000',
+    jasperReportsVersion: '6.3.1',
+    environmentVariable: 'DHIS2_HOME',
+    databaseInfo: {
+      spatialSupport: true
+    },
+    encryption: false,
+    emailConfigured: false,
+    redisEnabled: false,
+    systemId: 'eed3d451-4ff5-4193-b951-ffcc68954299',
+    systemName: 'DHIS 2 Demo - Sierra Leone',
+    instanceBaseUrl: 'https://debug.dhis2.org/dev',
+    clusterHostname: '',
+    isMetadataVersionEnabled: true,
+    metadataSyncEnabled: false
+  },
   baseUrl: 'https://domain.tld/',
   apiVersion: ''
 };
 exports.providerConfig = providerConfig;
 
+const MockAlert = _ref => {
+  let {
+    alert
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    var _alert$options;
+
+    if ((_alert$options = alert.options) !== null && _alert$options !== void 0 && _alert$options.duration) {
+      var _alert$options2;
+
+      setTimeout(() => alert.remove(), (_alert$options2 = alert.options) === null || _alert$options2 === void 0 ? void 0 : _alert$options2.duration);
+    }
+  }, [alert]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: '#CCC',
+      padding: 8
+    }
+  }, alert.message);
+};
+
+MockAlert.propTypes = {
+  alert: _propTypes.default.shape({
+    message: _propTypes.default.string,
+    options: _propTypes.default.shape({
+      duration: _propTypes.default.number
+    }),
+    remove: _propTypes.default.func
+  })
+};
+
+const MocklAlertStack = () => {
+  const alerts = (0, _appRuntime.useAlerts)();
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      bottom: 16,
+      right: 16
+    }
+  }, alerts.map(alert => /*#__PURE__*/_react.default.createElement(MockAlert, {
+    key: alert.id,
+    alert: alert
+  })));
+};
+
 const createDecoratorProvider = config => {
   return fn => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
     config: config || providerConfig
-  }, fn());
+  }, fn(), /*#__PURE__*/_react.default.createElement(MocklAlertStack, null));
 };
 
 exports.createDecoratorProvider = createDecoratorProvider;

package/build/cjs/__e2e__/stories/with-debug-info-edge-cases.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithUnknownInstanceVersion = exports.WithUnknownAppVersion = exports.WithUnknownAppNameAndVersion = exports.WithUnknownAppName = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _headerBar = require("../../header-bar.js");
+
+var _common = require("./common.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const WithUnknownInstanceVersion = () => /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, null);
+
+exports.WithUnknownInstanceVersion = WithUnknownInstanceVersion;
+WithUnknownInstanceVersion.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  systemInfo: { ..._common.providerConfig.systemInfo,
+    version: undefined
+  }
+})];
+
+const WithUnknownAppVersion = () => /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, null);
+
+exports.WithUnknownAppVersion = WithUnknownAppVersion;
+WithUnknownAppVersion.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  appVersion: undefined
+})];
+
+const WithUnknownAppName = () => /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, null);
+
+exports.WithUnknownAppName = WithUnknownAppName;
+WithUnknownAppName.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  appName: undefined
+})];
+
+const WithUnknownAppNameAndVersion = () => /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, null);
+
+exports.WithUnknownAppNameAndVersion = WithUnknownAppNameAndVersion;
+WithUnknownAppNameAndVersion.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  appName: undefined,
+  appVersion: undefined
+})];

package/build/cjs/__e2e__/stories/with-update-available-notification.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithUpdateAvailableNotificationNoAppName = exports.WithUpdateAvailableNotification = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _headerBar = require("../../header-bar.js");
+
+var _common = require("./common.js");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const WithUpdateAvailableNotification = () => {
+  const [modalOpen, setModalOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+    updateAvailable: true,
+    onApplyAvailableUpdate: () => setModalOpen(true)
+  }), modalOpen && /*#__PURE__*/_react.default.createElement("div", null, "The callback was successful"));
+};
+
+exports.WithUpdateAvailableNotification = WithUpdateAvailableNotification;
+WithUpdateAvailableNotification.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  appName: 'Data Visualizer'
+})];
+
+const WithUpdateAvailableNotificationNoAppName = () => /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  updateAvailable: true
+});
+
+exports.WithUpdateAvailableNotificationNoAppName = WithUpdateAvailableNotificationNoAppName;
+WithUpdateAvailableNotificationNoAppName.decorators = [(0, _common.createDecoratorCustomDataProviderHeaderBar)(), (0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  appName: undefined
+})];

package/build/cjs/apps.js

@@ -189,7 +189,7 @@ const Apps = _ref7 => {
   (0, _react.useEffect)(() => {
     document.addEventListener('click', onDocClick);
     return () => document.removeEventListener('click', onDocClick);
-  }, []);
+  }, [onDocClick]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerEl,
     "data-test": "headerbar-apps",

package/build/cjs/debug-info/debug-info-menu-item.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DebugInfoMenuItem = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _menu = require("@dhis2-ui/menu");
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../locales/index.js"));
+
+var _useDebugInfo = require("./use-debug-info.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DebugInfoMenuItem = _ref => {
+  let {
+    hideProfileMenu,
+    showDebugInfoModal
+  } = _ref;
+  const debugInfo = (0, _useDebugInfo.useDebugInfo)();
+
+  const openDebugModal = () => {
+    hideProfileMenu();
+    showDebugInfoModal();
+  };
+
+  const debugInfoLabel = /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3534786758", [_uiConstants.colors.grey700]]]) + " " + "root"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "dhis2-ui-headerbar-instanceinfo",
+    className: _style.default.dynamic([["3534786758", [_uiConstants.colors.grey700]]]) + " " + "instance-info version"
+  }, debugInfo.dhis2_version ? _index.default.t('DHIS2 {{dhis2Version}}', {
+    dhis2Version: debugInfo.dhis2_version
+  }) : _index.default.t('DHIS2 version unknown')), /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": "dhis2-ui-headerbar-appinfo",
+    className: _style.default.dynamic([["3534786758", [_uiConstants.colors.grey700]]]) + " " + "version"
+  }, debugInfo.app_name ? debugInfo.app_version ? "".concat(debugInfo.app_name, " ").concat(debugInfo.app_version) : _index.default.t('{{appName}} version unknown', {
+    appName: debugInfo.app_name
+  }) : debugInfo.app_version ? _index.default.t('App {{appVersion}}', {
+    appVersion: debugInfo.app_version
+  }) : _index.default.t('App version unknown')), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3534786758",
+    dynamic: [_uiConstants.colors.grey700]
+  }, [".root.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey700, ";font-style:italic;font-size:14px;line-height:17px;}"), ".instance-info.__jsx-style-dynamic-selector{margin-bottom:4px;}", ".version.__jsx-style-dynamic-selector{white-space:no-wrap;}"]));
+
+  return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
+    dense: true,
+    onClick: openDebugModal,
+    label: debugInfoLabel,
+    dataTest: "dhis2-ui-headerbar-debuginfo"
+  });
+};
+
+exports.DebugInfoMenuItem = DebugInfoMenuItem;
+DebugInfoMenuItem.propTypes = {
+  hideProfileMenu: _propTypes.default.func.isRequired,
+  showDebugInfoModal: _propTypes.default.func.isRequired
+};

package/build/cjs/debug-info/debug-info-modal.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DebugInfoModal = DebugInfoModal;
+
+var _button = require("@dhis2-ui/button");
+
+var _modal = require("@dhis2-ui/modal");
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../locales/index.js"));
+
+var _debugInfoTable = require("./debug-info-table.js");
+
+var _useDebugInfo = require("./use-debug-info.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function DebugInfoModal(_ref) {
+  let {
+    onClose
+  } = _ref;
+  const debugInfo = (0, _useDebugInfo.useFormattedDebugInfo)();
+  const {
+    show: showClipboardAlert
+  } = (0, _appRuntime.useAlert)('Debug information copied to clipboard', {
+    duration: 3000
+  });
+
+  const copyDebugInfo = () => {
+    navigator.clipboard.writeText(debugInfo);
+    onClose();
+    showClipboardAlert();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_modal.Modal, {
+    position: "middle",
+    dataTest: "dhis2-ui-headerbar-debuginfomodal"
+  }, /*#__PURE__*/_react.default.createElement(_modal.ModalTitle, null, _index.default.t('Debug info')), /*#__PURE__*/_react.default.createElement(_modal.ModalContent, null, /*#__PURE__*/_react.default.createElement(_debugInfoTable.DebugInfoTable, null)), /*#__PURE__*/_react.default.createElement(_modal.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+    end: true
+  }, /*#__PURE__*/_react.default.createElement(_button.Button, {
+    onClick: () => onClose()
+  }, _index.default.t('Close')), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    primary: true,
+    onClick: copyDebugInfo,
+    dataTest: "dhis2-ui-headerbar-debuginfomodal-copybutton"
+  }, _index.default.t('Copy debug info')))));
+}
+
+DebugInfoModal.propTypes = {
+  onClose: _propTypes.default.func.isRequired
+};

package/build/cjs/debug-info/debug-info-table.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DebugInfoTable = DebugInfoTable;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useDebugInfo = require("./use-debug-info.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const formatDebugInfoKey = key => {
+  const tokens = key.split('_');
+  return tokens.map(token => {
+    if (token.toLowerCase() === 'dhis2') {
+      return 'DHIS2';
+    } else {
+      return token[0].toUpperCase() + token.substr(1).toLowerCase();
+    }
+  }).join(' ');
+};
+
+function DebugInfoTable() {
+  const debugInfo = (0, _useDebugInfo.useDebugInfo)();
+  return /*#__PURE__*/_react.default.createElement("table", {
+    'data-test': 'dhis2-ui-headerbar-debuginfotable',
+    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+  }, /*#__PURE__*/_react.default.createElement("tbody", {
+    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+  }, Object.keys(debugInfo).map(key => /*#__PURE__*/_react.default.createElement("tr", {
+    key: key,
+    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+  }, /*#__PURE__*/_react.default.createElement("td", {
+    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]]) + " " + "debug-info-key"
+  }, formatDebugInfoKey(key)), /*#__PURE__*/_react.default.createElement("td", {
+    className: _style.default.dynamic([["865651843", [_uiConstants.colors.grey700]]])
+  }, debugInfo[key])))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "865651843",
+    dynamic: [_uiConstants.colors.grey700]
+  }, ["table.__jsx-style-dynamic-selector{white-space:pre-wrap;font-size:14px;line-height:1.2;color:".concat(_uiConstants.colors.grey700, ";font-famile:Menlo,Courier,monospace !important;}"), "td.__jsx-style-dynamic-selector{padding:3px 16px 3px 0;}", ".debug-info-key.__jsx-style-dynamic-selector{font-weight:bold;}"]));
+}

package/build/cjs/debug-info/use-debug-info.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormattedDebugInfo = exports.useDebugInfo = void 0;
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+const useDebugInfo = () => {
+  const {
+    appName,
+    appVersion,
+    systemInfo
+  } = (0, _appRuntime.useConfig)();
+  return {
+    app_name: appName || null,
+    app_version: (appVersion === null || appVersion === void 0 ? void 0 : appVersion.full) || null,
+    dhis2_version: (systemInfo === null || systemInfo === void 0 ? void 0 : systemInfo.version) || null,
+    dhis2_revision: (systemInfo === null || systemInfo === void 0 ? void 0 : systemInfo.revision) || null
+  };
+};
+
+exports.useDebugInfo = useDebugInfo;
+
+const useFormattedDebugInfo = () => JSON.stringify(useDebugInfo(), undefined, 2);
+
+exports.useFormattedDebugInfo = useFormattedDebugInfo;

package/build/cjs/features/the_headerbar_should_display_app_update_notification/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+(0, _steps.Given)('the HeaderBar is rendered without an available update', () => {
+  cy.visitStory('HeaderBarTesting', 'default');
+});
+(0, _steps.Given)('the HeaderBar is rendered with an available update', () => {
+  cy.visitStory('HeaderBarTesting', 'With Update Available Notification');
+});
+(0, _steps.Given)('the HeaderBar is rendered with no app name and an available update', () => {
+  cy.visitStory('HeaderBarTesting', 'With Update Available Notification No App Name');
+});
+(0, _steps.When)('the user opens the profile menu', () => {
+  cy.get('[data-test="headerbar-profile"] > button').click();
+});
+(0, _steps.Then)('the update notification should not be displayed', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').should('not.exist');
+});
+(0, _steps.Then)('the update notification should be displayed', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').should('contain', 'New Data Visualizer version available').should('contain', 'Click to reload');
+});
+(0, _steps.Then)('the update notification should be displayed without app name', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').should('contain', 'New app version available').should('contain', 'Click to reload');
+});
+(0, _steps.When)('the user clicks the update notification', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').click();
+});
+(0, _steps.Then)('the profile menu should not be shown', () => {
+  cy.get('[data-test="headerbar-profile-menu"]').should('not.exist');
+});
+(0, _steps.Then)('a callback should display a test div', () => {
+  cy.contains('The callback was successful').should('be.visible');
+});

package/build/cjs/features/the_headerbar_should_display_app_update_notification.feature

@@ -0,0 +1,22 @@
+Feature: The HeaderBar should display app update notification
+
+    Scenario: No app update is available
+        Given the HeaderBar is rendered without an available update
+        When the user opens the profile menu
+        Then the update notification should not be displayed
+
+    Scenario: An app update is available
+        Given the HeaderBar is rendered with an available update
+        When the user opens the profile menu
+        Then the update notification should be displayed
+
+    Scenario: A callback is executed when the user click on the update notification
+        Given the HeaderBar is rendered with an available update
+        When the user opens the profile menu
+        When the user clicks the update notification
+        Then a callback should display a test div
+    
+    Scenario: An app update is available but not app name was specified
+        Given the HeaderBar is rendered with no app name and an available update
+        When the user opens the profile menu
+        Then the update notification should be displayed without app name

package/build/cjs/features/the_headerbar_should_display_debug_version_infos/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _steps = require("cypress-cucumber-preprocessor/steps");
+
+(0, _steps.Given)('the HeaderBar is rendered without an instance version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown Instance Version');
+});
+(0, _steps.Given)('the HeaderBar is rendered with an app name and app version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'default');
+});
+(0, _steps.Given)('the HeaderBar is rendered without app name in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown App Name');
+});
+(0, _steps.Given)('the HeaderBar is rendered with an app name but without app version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown App Version');
+});
+(0, _steps.Given)('the HeaderBar is rendered without app name or app version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown App Name And Version');
+});
+(0, _steps.When)('the user opens the profile menu', () => {
+  cy.get('[data-test="headerbar-profile"] > button').click();
+});
+(0, _steps.Then)("the app's name and version should be displayed", () => {
+  cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should('contain', 'TestApp 101.2.3-beta.4');
+});
+(0, _steps.Then)("the app's name with unknown version should be displayed", () => {
+  cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should('contain', 'TestApp version unknown');
+});
+(0, _steps.Then)("the unknown app with app's version should be displayed", () => {
+  cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should('contain', 'App 101.2.3-beta.4');
+});
+(0, _steps.Then)('the unknown app with unknown version should be displayed', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should('contain', 'App version unknown');
+});
+(0, _steps.Then)('the instance version should be displayed', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should('contain', 'DHIS2 2.39.2.1-SNAPSHOT');
+});
+(0, _steps.Then)('the instance version should show as unknown', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should('contain', 'DHIS2 version unknown');
+});
+(0, _steps.When)('the user clicks the debug info menu item', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-debuginfo"] > a').click();
+});
+(0, _steps.Then)('the debug info modal should be shown', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-debuginfomodal"]').should('be.visible');
+});
+(0, _steps.Then)('the debug info modal should not be shown', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-debuginfomodal"]').should('not.exist');
+});
+(0, _steps.Then)('the debug info modal should contain debug info', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-debuginfotable"]').should('contain', '2.39.2.1-SNAPSHOT' // DHIS2 version
+  ).should('contain', '6607c3c' // Revision
+  ).should('contain', 'TestApp' // App name
+  ).should('contain', '101.2.3-beta.4' // App version
+  );
+});
+(0, _steps.When)('the user clicks the copy debug info button', () => {
+  cy.contains('Copy debug info').click();
+});
+(0, _steps.Then)('the debug info should be copied to clipboard', () => {
+  cy.window().then(win => {
+    win.navigator.clipboard.readText().then(text => {
+      expect(text).to.contain('2.39.2.1-SNAPSHOT');
+    });
+  });
+});
+(0, _steps.Then)('the debug info copied to clipboard alert should be shown', () => {
+  cy.contains('Debug information copied to clipboard').should('exist');
+});