@dhis2-ui/header-bar 8.4.16 → 8.5.0-beta.1

package/build/cjs/profile-menu/update-notification.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UpdateNotification = UpdateNotification;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _menu = require("@dhis2-ui/menu");
+
+var _appRuntime = require("@dhis2/app-runtime");
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _headerBarContext = require("../header-bar-context.js");
+
+var _index = _interopRequireDefault(require("../locales/index.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function UpdateNotification(_ref) {
+  let {
+    hideProfileMenu
+  } = _ref;
+  const {
+    appName
+  } = (0, _appRuntime.useConfig)();
+  const {
+    updateAvailable,
+    onApplyAvailableUpdate
+  } = (0, _headerBarContext.useHeaderBarContext)();
+
+  const onClick = () => {
+    hideProfileMenu();
+    onApplyAvailableUpdate === null || onApplyAvailableUpdate === void 0 ? void 0 : onApplyAvailableUpdate();
+  };
+
+  const updateNotificationLabel = /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4135170305", [_uiConstants.colors.blue600]]]) + " " + "root"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4135170305", [_uiConstants.colors.blue600]]]) + " " + "badge"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4135170305", [_uiConstants.colors.blue600]]]) + " " + "spacer"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["4135170305", [_uiConstants.colors.blue600]]]) + " " + "message"
+  }, appName ? _index.default.t('New {{appName}} version available', {
+    appName
+  }) : _index.default.t('New app version available'), /*#__PURE__*/_react.default.createElement("br", {
+    className: _style.default.dynamic([["4135170305", [_uiConstants.colors.blue600]]])
+  }), _index.default.t('Click to reload')), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "4135170305",
+    dynamic: [_uiConstants.colors.blue600]
+  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:14px;line-height:17px;}", ".badge.__jsx-style-dynamic-selector{display:inline-block;width:12px;height:12px;margin:0 8px;border-radius:6px;background-color:".concat(_uiConstants.colors.blue600, ";}"), ".spacer.__jsx-style-dynamic-selector{display:inline-block;width:8px;}", ".message.__jsx-style-dynamic-selector{display:inline-block;}"]));
+
+  return updateAvailable ? /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
+    dense: true,
+    onClick: onClick,
+    label: updateNotificationLabel,
+    dataTest: "dhis2-ui-headerbar-updatenotification"
+  }) : null;
+}
+
+UpdateNotification.propTypes = {
+  hideProfileMenu: _propTypes.default.func.isRequired
+};

package/build/cjs/profile.js

@@ -11,78 +11,68 @@ var _userAvatar = require("@dhis2-ui/user-avatar");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _profileMenu = require("./profile/profile-menu.js");
+var _debugInfoModal = require("./debug-info/debug-info-modal.js");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-class Profile extends _react.default.Component {
-  constructor() {
-    super(...arguments);
+var _index = require("./profile-menu/index.js");
 
-    _defineProperty(this, "state", {
-      show: false
-    });
+var _useOnDocClick = require("./profile/use-on-doc-click.js");
 
-    _defineProperty(this, "onDocClick", evt => {
-      if (this.elContainer && !this.elContainer.contains(evt.target)) {
-        this.setState({
-          show: false
-        });
-      }
-    });
+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); }
 
-    _defineProperty(this, "handleToggle", () => this.setState({
-      show: !this.state.show
-    }));
-  }
+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; }
 
-  componentDidMount() {
-    document.addEventListener('click', this.onDocClick);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.onDocClick);
-  }
-
-  render() {
-    const {
-      name,
-      email,
-      avatarId,
-      helpUrl
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: c => this.elContainer = c,
-      "data-test": "headerbar-profile",
-      className: "jsx-2642719072" + " " + "headerbar-profile"
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      onClick: this.handleToggle,
-      className: "jsx-2642719072" + " " + "headerbar-profile-btn"
-    }, /*#__PURE__*/_react.default.createElement(_userAvatar.UserAvatar, {
-      avatarId: avatarId,
-      name: name,
-      dataTest: "headerbar-profile-icon",
-      medium: true
-    })), this.state.show ? /*#__PURE__*/_react.default.createElement(_profileMenu.ProfileMenu, {
-      avatarId: avatarId,
-      name: name,
-      email: email,
-      helpUrl: helpUrl
-    }) : null, /*#__PURE__*/_react.default.createElement(_style.default, {
-      id: "2642719072"
-    }, [".headerbar-profile.jsx-2642719072{position:relative;width:36px;height:36px;min-width:36px;min-height:36px;margin:2px 12px 0 24px;}", ".headerbar-profile-btn.jsx-2642719072{background:transparent;padding:0;border:0;cursor:pointer;width:100%;height:100%;}", ".headerbar-profile-btn.jsx-2642719072:focus{outline:1px dotted white;}"]));
-  }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-}
+const Profile = _ref => {
+  let {
+    name,
+    email,
+    avatarId,
+    helpUrl
+  } = _ref;
+  const [showProfileMenu, setShowProfileMenu] = (0, _react.useState)(false);
+  const [showDebugInfoModal, setShowDebugInfoModal] = (0, _react.useState)(false);
+  const hideProfileMenu = (0, _react.useCallback)(() => setShowProfileMenu(false), [setShowProfileMenu]);
+  const toggleProfileMenu = (0, _react.useCallback)(() => setShowProfileMenu(show => !show), [setShowProfileMenu]);
+  const containerRef = (0, _react.useRef)(null);
+  (0, _useOnDocClick.useOnDocClick)(containerRef, hideProfileMenu);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    "data-test": "headerbar-profile",
+    className: "jsx-2213392235" + " " + "headerbar-profile"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: toggleProfileMenu,
+    className: "jsx-2213392235" + " " + "headerbar-profile-btn"
+  }, /*#__PURE__*/_react.default.createElement(_userAvatar.UserAvatar, {
+    avatarId: avatarId,
+    name: name,
+    dataTest: "headerbar-profile-icon",
+    medium: true
+  })), showProfileMenu && /*#__PURE__*/_react.default.createElement(_index.ProfileMenu, {
+    avatarId: avatarId,
+    name: name,
+    email: email,
+    helpUrl: helpUrl,
+    hideProfileMenu: hideProfileMenu,
+    showDebugInfoModal: () => {
+      setShowDebugInfoModal(true);
+    }
+  }), showDebugInfoModal && /*#__PURE__*/_react.default.createElement(_debugInfoModal.DebugInfoModal, {
+    onClose: () => {
+      setShowDebugInfoModal(false);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2213392235"
+  }, [".headerbar-profile.jsx-2213392235{position:relative;width:36px;height:36px;min-width:36px;min-height:36px;margin:2px 12px 0 24px;}", ".headerbar-profile-btn.jsx-2213392235{background:transparent;padding:0;border:0;cursor:pointer;width:100%;height:100%;}", ".headerbar-profile-btn.jsx-2213392235:focus{outline:1px dotted white;}"]));
+};
 
-exports.default = Profile;
 Profile.propTypes = {
   name: _propTypes.default.string.isRequired,
   avatarId: _propTypes.default.string,
   email: _propTypes.default.string,
   helpUrl: _propTypes.default.string
-};
+};
+var _default = Profile;
+exports.default = _default;

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

@@ -1,7 +1,7 @@
-import { HeaderBar } from '../index.js';
+import { HeaderBar as component } from '../index.js';
 export default {
   title: 'HeaderBarTesting',
-  component: HeaderBar
+  component
 };
 export { Default } from './stories/default.js';
 export { ShowOnlineStatus } from './stories/show-online-status.js';
@@ -16,4 +16,6 @@ export { UserHasWebInterpretationAuthority } from './stories/user-has-web-interp
 export { UserHasWebMessagingAuthority } from './stories/user-has-web-messaging-authority.js';
 export { UserHasNoAuthorities } from './stories/user-has-no-authorities.js';
 export { ZeroUnreadInterpretations } from './stories/zero-unread-interpretations.js';
-export { ZeroUnreadMessages } from './stories/zero-unread-messages.js';
+export { ZeroUnreadMessages } from './stories/zero-unread-messages.js';
+export { WithUpdateAvailableNotification, WithUpdateAvailableNotificationNoAppName } from './stories/with-update-available-notification.js';
+export { WithUnknownInstanceVersion, WithUnknownAppNameAndVersion, WithUnknownAppName, WithUnknownAppVersion } from './stories/with-debug-info-edge-cases.js';

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
-import { CustomDataProvider, Provider } from '@dhis2/app-runtime';
-import React from 'react';
+import { CustomDataProvider, Provider, useAlerts } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
 export const defaultModules = [{
   name: 'dhis-web-dashboard',
   namespace: '/dhis-web-dashboard',
@@ -264,36 +265,6 @@ export const modulesWithSpecialCharacters = [{
 }];
 export const applicationTitle = 'Foobar';
 export 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
   },
@@ -328,11 +299,103 @@ export const createDecoratorCustomDataProviderHeaderBar = function () {
   };
 };
 export 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: ''
 };
+
+const MockAlert = _ref => {
+  let {
+    alert
+  } = _ref;
+  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.createElement("div", {
+    style: {
+      backgroundColor: '#CCC',
+      padding: 8
+    }
+  }, alert.message);
+};
+
+MockAlert.propTypes = {
+  alert: PropTypes.shape({
+    message: PropTypes.string,
+    options: PropTypes.shape({
+      duration: PropTypes.number
+    }),
+    remove: PropTypes.func
+  })
+};
+
+const MocklAlertStack = () => {
+  const alerts = useAlerts();
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      bottom: 16,
+      right: 16
+    }
+  }, alerts.map(alert => /*#__PURE__*/React.createElement(MockAlert, {
+    key: alert.id,
+    alert: alert
+  })));
+};
+
 export const createDecoratorProvider = config => {
   return fn => /*#__PURE__*/React.createElement(Provider, {
     config: config || providerConfig
-  }, fn());
+  }, fn(), /*#__PURE__*/React.createElement(MocklAlertStack, null));
 };

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { HeaderBar } from '../../header-bar.js';
+import { createDecoratorCustomDataProviderHeaderBar, createDecoratorProvider, providerConfig } from './common.js';
+export const WithUnknownInstanceVersion = () => /*#__PURE__*/React.createElement(HeaderBar, null);
+WithUnknownInstanceVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+  systemInfo: { ...providerConfig.systemInfo,
+    version: undefined
+  }
+})];
+export const WithUnknownAppVersion = () => /*#__PURE__*/React.createElement(HeaderBar, null);
+WithUnknownAppVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+  appVersion: undefined
+})];
+export const WithUnknownAppName = () => /*#__PURE__*/React.createElement(HeaderBar, null);
+WithUnknownAppName.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+  appName: undefined
+})];
+export const WithUnknownAppNameAndVersion = () => /*#__PURE__*/React.createElement(HeaderBar, null);
+WithUnknownAppNameAndVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+  appName: undefined,
+  appVersion: undefined
+})];

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

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { HeaderBar } from '../../header-bar.js';
+import { createDecoratorCustomDataProviderHeaderBar, createDecoratorProvider, providerConfig } from './common.js';
+export const WithUpdateAvailableNotification = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderBar, {
+    updateAvailable: true,
+    onApplyAvailableUpdate: () => setModalOpen(true)
+  }), modalOpen && /*#__PURE__*/React.createElement("div", null, "The callback was successful"));
+};
+WithUpdateAvailableNotification.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+  appName: 'Data Visualizer'
+})];
+export const WithUpdateAvailableNotificationNoAppName = () => /*#__PURE__*/React.createElement(HeaderBar, {
+  updateAvailable: true
+});
+WithUpdateAvailableNotificationNoAppName.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+  appName: undefined
+})];

package/build/es/apps.js

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

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

@@ -0,0 +1,48 @@
+import _JSXStyle from "styled-jsx/style";
+import { MenuItem } from '@dhis2-ui/menu';
+import { colors } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../locales/index.js';
+import { useDebugInfo } from './use-debug-info.js';
+export const DebugInfoMenuItem = _ref => {
+  let {
+    hideProfileMenu,
+    showDebugInfoModal
+  } = _ref;
+  const debugInfo = useDebugInfo();
+
+  const openDebugModal = () => {
+    hideProfileMenu();
+    showDebugInfoModal();
+  };
+
+  const debugInfoLabel = /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3534786758", [colors.grey700]]]) + " " + "root"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": "dhis2-ui-headerbar-instanceinfo",
+    className: _JSXStyle.dynamic([["3534786758", [colors.grey700]]]) + " " + "instance-info version"
+  }, debugInfo.dhis2_version ? i18n.t('DHIS2 {{dhis2Version}}', {
+    dhis2Version: debugInfo.dhis2_version
+  }) : i18n.t('DHIS2 version unknown')), /*#__PURE__*/React.createElement("div", {
+    "data-test": "dhis2-ui-headerbar-appinfo",
+    className: _JSXStyle.dynamic([["3534786758", [colors.grey700]]]) + " " + "version"
+  }, debugInfo.app_name ? debugInfo.app_version ? "".concat(debugInfo.app_name, " ").concat(debugInfo.app_version) : i18n.t('{{appName}} version unknown', {
+    appName: debugInfo.app_name
+  }) : debugInfo.app_version ? i18n.t('App {{appVersion}}', {
+    appVersion: debugInfo.app_version
+  }) : i18n.t('App version unknown')), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3534786758",
+    dynamic: [colors.grey700]
+  }, [".root.__jsx-style-dynamic-selector{color:".concat(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.createElement(MenuItem, {
+    dense: true,
+    onClick: openDebugModal,
+    label: debugInfoLabel,
+    dataTest: "dhis2-ui-headerbar-debuginfo"
+  });
+};
+DebugInfoMenuItem.propTypes = {
+  hideProfileMenu: PropTypes.func.isRequired,
+  showDebugInfoModal: PropTypes.func.isRequired
+};

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

@@ -0,0 +1,41 @@
+import { Button, ButtonStrip } from '@dhis2-ui/button';
+import { Modal, ModalActions, ModalContent, ModalTitle } from '@dhis2-ui/modal';
+import { useAlert } from '@dhis2/app-runtime';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../locales/index.js';
+import { DebugInfoTable } from './debug-info-table.js';
+import { useFormattedDebugInfo } from './use-debug-info.js';
+export function DebugInfoModal(_ref) {
+  let {
+    onClose
+  } = _ref;
+  const debugInfo = useFormattedDebugInfo();
+  const {
+    show: showClipboardAlert
+  } = useAlert('Debug information copied to clipboard', {
+    duration: 3000
+  });
+
+  const copyDebugInfo = () => {
+    navigator.clipboard.writeText(debugInfo);
+    onClose();
+    showClipboardAlert();
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    position: "middle",
+    dataTest: "dhis2-ui-headerbar-debuginfomodal"
+  }, /*#__PURE__*/React.createElement(ModalTitle, null, i18n.t('Debug info')), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(DebugInfoTable, null)), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
+    end: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => onClose()
+  }, i18n.t('Close')), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    onClick: copyDebugInfo,
+    dataTest: "dhis2-ui-headerbar-debuginfomodal-copybutton"
+  }, i18n.t('Copy debug info')))));
+}
+DebugInfoModal.propTypes = {
+  onClose: PropTypes.func.isRequired
+};

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

@@ -0,0 +1,35 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors } from '@dhis2/ui-constants';
+import React from 'react';
+import { useDebugInfo } from './use-debug-info.js';
+
+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(' ');
+};
+
+export function DebugInfoTable() {
+  const debugInfo = useDebugInfo();
+  return /*#__PURE__*/React.createElement("table", {
+    'data-test': 'dhis2-ui-headerbar-debuginfotable',
+    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+  }, /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+  }, Object.keys(debugInfo).map(key => /*#__PURE__*/React.createElement("tr", {
+    key: key,
+    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+  }, /*#__PURE__*/React.createElement("td", {
+    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]]) + " " + "debug-info-key"
+  }, formatDebugInfoKey(key)), /*#__PURE__*/React.createElement("td", {
+    className: _JSXStyle.dynamic([["865651843", [colors.grey700]]])
+  }, debugInfo[key])))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "865651843",
+    dynamic: [colors.grey700]
+  }, ["table.__jsx-style-dynamic-selector{white-space:pre-wrap;font-size:14px;line-height:1.2;color:".concat(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/es/debug-info/use-debug-info.js

@@ -0,0 +1,15 @@
+import { useConfig } from '@dhis2/app-runtime';
+export const useDebugInfo = () => {
+  const {
+    appName,
+    appVersion,
+    systemInfo
+  } = 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
+  };
+};
+export const useFormattedDebugInfo = () => JSON.stringify(useDebugInfo(), undefined, 2);

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

@@ -0,0 +1,31 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+Given('the HeaderBar is rendered without an available update', () => {
+  cy.visitStory('HeaderBarTesting', 'default');
+});
+Given('the HeaderBar is rendered with an available update', () => {
+  cy.visitStory('HeaderBarTesting', 'With Update Available Notification');
+});
+Given('the HeaderBar is rendered with no app name and an available update', () => {
+  cy.visitStory('HeaderBarTesting', 'With Update Available Notification No App Name');
+});
+When('the user opens the profile menu', () => {
+  cy.get('[data-test="headerbar-profile"] > button').click();
+});
+Then('the update notification should not be displayed', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').should('not.exist');
+});
+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');
+});
+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');
+});
+When('the user clicks the update notification', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-updatenotification"]').click();
+});
+Then('the profile menu should not be shown', () => {
+  cy.get('[data-test="headerbar-profile-menu"]').should('not.exist');
+});
+Then('a callback should display a test div', () => {
+  cy.contains('The callback was successful').should('be.visible');
+});

package/build/es/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