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

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

@@ -0,0 +1,66 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+Given('the HeaderBar is rendered without an instance version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown Instance Version');
+});
+Given('the HeaderBar is rendered with an app name and app version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'default');
+});
+Given('the HeaderBar is rendered without app name in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown App Name');
+});
+Given('the HeaderBar is rendered with an app name but without app version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown App Version');
+});
+Given('the HeaderBar is rendered without app name or app version in runtime context', () => {
+  cy.visitStory('HeaderBarTesting', 'With Unknown App Name And Version');
+});
+When('the user opens the profile menu', () => {
+  cy.get('[data-test="headerbar-profile"] > button').click();
+});
+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');
+});
+Then("the app's name with unknown version should be displayed", () => {
+  cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should('contain', 'TestApp version unknown');
+});
+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');
+});
+Then('the unknown app with unknown version should be displayed', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-appinfo"]').should('contain', 'App version unknown');
+});
+Then('the instance version should be displayed', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should('contain', 'DHIS2 2.39.2.1-SNAPSHOT');
+});
+Then('the instance version should show as unknown', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-instanceinfo"]').should('contain', 'DHIS2 version unknown');
+});
+When('the user clicks the debug info menu item', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-debuginfo"] > a').click();
+});
+Then('the debug info modal should be shown', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-debuginfomodal"]').should('be.visible');
+});
+Then('the debug info modal should not be shown', () => {
+  cy.get('[data-test="dhis2-ui-headerbar-debuginfomodal"]').should('not.exist');
+});
+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
+  );
+});
+When('the user clicks the copy debug info button', () => {
+  cy.contains('Copy debug info').click();
+});
+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');
+    });
+  });
+});
+Then('the debug info copied to clipboard alert should be shown', () => {
+  cy.contains('Debug information copied to clipboard').should('exist');
+});

package/build/es/features/the_headerbar_should_display_debug_version_infos.feature

@@ -0,0 +1,52 @@
+Feature: The HeaderBar should display debug version infos
+
+    Scenario: The debug version infos are displayed in the profile menu
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the app's name and version should be displayed
+        
+    Scenario: The debug version info modal is displayed when clicking on the menu item
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        When the user clicks the debug info menu item
+        Then the debug info modal should be shown
+
+    Scenario: The debug version info modal displays debug info
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        When the user clicks the debug info menu item
+        Then the debug info modal should contain debug info
+
+    Scenario: The debug version info should be copied to clipboard
+        Given the HeaderBar is rendered with an app name and app version in runtime context
+        When the user opens the profile menu
+        When the user clicks the debug info menu item
+        When the user clicks the copy debug info button
+        Then the debug info should be copied to clipboard
+        And the debug info copied to clipboard alert should be shown
+        And the debug info modal should not be shown
+
+    Scenario: The debug version infos are displayed with unknown dhis2 version in the profile menu
+        Given the HeaderBar is rendered without an instance version in runtime context
+        When the user opens the profile menu
+        Then the instance version should show as unknown
+        And the app's name and version should be displayed
+
+    Scenario: The debug version infos are displayed with unknown app name and version in the profile menu
+        Given the HeaderBar is rendered without app name or app version in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the unknown app with unknown version should be displayed
+
+    Scenario: The debug version infos are displayed with unknown app name in the profile menu
+        Given the HeaderBar is rendered without app name in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the unknown app with app's version should be displayed
+
+    Scenario: The debug version infos are displayed with unknown app version in the profile menu
+        Given the HeaderBar is rendered with an app name but without app version in runtime context
+        When the user opens the profile menu
+        Then the instance version should be displayed
+        And the app's name with unknown version should be displayed

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

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React, { createContext, useContext } from 'react';
+const headerBarContext = /*#__PURE__*/createContext({
+  updateAvailable: false,
+  onApplyAvailableUpdate: () => {}
+});
+export const HeaderBarContextProvider = _ref => {
+  let {
+    updateAvailable,
+    onApplyAvailableUpdate,
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(headerBarContext.Provider, {
+    value: {
+      updateAvailable,
+      onApplyAvailableUpdate
+    }
+  }, children);
+};
+HeaderBarContextProvider.propTypes = {
+  children: PropTypes.node,
+  updateAvailable: PropTypes.bool,
+  onApplyAvailableUpdate: PropTypes.func
+};
+export const useHeaderBarContext = () => useContext(headerBarContext);

package/build/es/header-bar.js

@@ -4,6 +4,7 @@ import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import Apps from './apps.js';
+import { HeaderBarContextProvider } from './header-bar-context.js';
 import { joinPath } from './join-path.js';
 import i18n from './locales/index.js';
 import { Logo } from './logo.js';
@@ -36,9 +37,12 @@ export const HeaderBar = _ref => {
 
   let {
     appName,
-    className
+    className,
+    updateAvailable,
+    onApplyAvailableUpdate
   } = _ref;
   const {
+    appName: configAppName,
     baseUrl,
     pwaEnabled,
     headerbar: {
@@ -57,24 +61,28 @@ export const HeaderBar = _ref => {
       icon: getPath(app.icon),
       defaultAction: getPath(app.defaultAction)
     }));
-  }, [data]); // See https://jira.dhis2.org/browse/LIBS-180
+  }, [data, baseUrl]); // See https://jira.dhis2.org/browse/LIBS-180
 
   if (!loading && !error) {
-    // TODO: This will run every render which is probably wrong!  Also, setting the global locale shouldn't be done in the headerbar
+    // TODO: This will run every render which is probably wrong!
+    // Also, setting the global locale shouldn't be done in the headerbar
     const locale = data.user.settings.keyUiLocale || 'en';
     i18n.setDefaultNamespace('default');
     i18n.changeLanguage(locale);
   }
 
-  return /*#__PURE__*/React.createElement("header", {
-    className: _JSXStyle.dynamic([["3517276904", [colors.white]]]) + " " + (className || "")
+  return /*#__PURE__*/React.createElement(HeaderBarContextProvider, {
+    updateAvailable: updateAvailable,
+    onApplyAvailableUpdate: onApplyAvailableUpdate
+  }, /*#__PURE__*/React.createElement("header", {
+    className: _JSXStyle.dynamic([["3860078320", [colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3517276904", [colors.white]]]) + " " + "main"
+    className: _JSXStyle.dynamic([["3860078320", [colors.white]]]) + " " + "main"
   }, !loading && !error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Logo, null), /*#__PURE__*/React.createElement(Title, {
-    app: appName,
+    app: appName || configAppName,
     instance: data.title.applicationTitle
   }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3517276904", [colors.white]]]) + " " + "right-control-spacer"
+    className: _JSXStyle.dynamic([["3860078320", [colors.white]]]) + " " + "right-control-spacer"
   }), (pwaEnabled || showOnlineStatus) && /*#__PURE__*/React.createElement(OnlineStatus, null), /*#__PURE__*/React.createElement(Notifications, {
     interpretations: data.notifications.unreadInterpretations,
     messages: data.notifications.unreadMessageConversations,
@@ -89,11 +97,13 @@ export const HeaderBar = _ref => {
   }))), (pwaEnabled || showOnlineStatus) && !loading && !error && /*#__PURE__*/React.createElement(OnlineStatus, {
     dense: true
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3517276904",
+    id: "3860078320",
     dynamic: [colors.white]
-  }, [".main.__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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;border-bottom:1px solid rgba(32,32,32,0.15);color:".concat(colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"]));
+  }, [".main.__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;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:#2c6693;border-bottom:1px solid rgba(32,32,32,0.15);color:".concat(colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"])));
 };
 HeaderBar.propTypes = {
   appName: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  updateAvailable: PropTypes.bool,
+  onApplyAvailableUpdate: PropTypes.func
 };

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

@@ -1,27 +1,9 @@
-import { CustomDataProvider, Provider } from '@dhis2/app-runtime';
+import { CustomDataProvider } from '@dhis2/app-runtime';
 import React from 'react';
+import { createDecoratorProvider, providerConfig } from './__e2e__/stories/common.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";
-export default {
-  title: 'Header Bar',
-  component: HeaderBar,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  },
-  args: {
-    appName: 'Example!'
-  }
-};
-const mockConfig = {
-  baseUrl: 'https://debug.dhis2.org/dev/',
-  apiVersion: 33
-};
 const customData = {
   'systemSettings/applicationTitle': {
     applicationTitle: 'Foobar'
@@ -142,56 +124,64 @@ const customAuthoritiesData = { ...customData,
     authorities: ['M_dhis-web-messaging']
   }
 };
-export const Default = args => /*#__PURE__*/React.createElement(Provider, {
-  config: mockConfig
-}, /*#__PURE__*/React.createElement(CustomDataProvider, {
+export default {
+  title: 'Header Bar',
+  component: HeaderBar,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  decorators: [createDecoratorProvider()]
+};
+export const Default = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   data: customData
-}, /*#__PURE__*/React.createElement(HeaderBar, args)));
-export const CustomLogoWideDimension = args => /*#__PURE__*/React.createElement(Provider, {
-  config: mockConfig
-}, /*#__PURE__*/React.createElement(CustomDataProvider, {
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Example!"
+}));
+export const CustomLogoWideDimension = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   data: customLogoData
-}, /*#__PURE__*/React.createElement(HeaderBar, args)));
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Example!"
+}));
 CustomLogoWideDimension.storyName = 'Custom Logo (wide dimension)';
-export const NonEnglishUserLocale = args => /*#__PURE__*/React.createElement(Provider, {
-  config: mockConfig
-}, /*#__PURE__*/React.createElement(CustomDataProvider, {
+export const NonEnglishUserLocale = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   data: customLocaleData
-}, /*#__PURE__*/React.createElement(HeaderBar, args)));
-NonEnglishUserLocale.args = {
-  appName: 'Exemple!'
-};
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Exemple!"
+}));
 NonEnglishUserLocale.storyName = 'Non-english user locale';
-export const NoAuthorityForInterpretationsApp = args => /*#__PURE__*/React.createElement(Provider, {
-  config: mockConfig
-}, /*#__PURE__*/React.createElement(CustomDataProvider, {
+export const NoAuthorityForInterpretationsApp = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   data: customAuthoritiesData
-}, /*#__PURE__*/React.createElement(HeaderBar, args)));
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Example!"
+}));
 NoAuthorityForInterpretationsApp.storyName = 'No authority for interpretations app';
-export const Loading = args => /*#__PURE__*/React.createElement(Provider, {
-  config: mockConfig
-}, /*#__PURE__*/React.createElement(CustomDataProvider, {
+export const Loading = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   options: {
     loadForever: true
   }
-}, /*#__PURE__*/React.createElement(HeaderBar, args)));
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Example!"
+}));
 Loading.storyName = 'Loading...';
-export const Error = args => /*#__PURE__*/React.createElement(Provider, {
-  config: mockConfig
-}, /*#__PURE__*/React.createElement(CustomDataProvider, {
+export const Error = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
   data: {}
-}, /*#__PURE__*/React.createElement(HeaderBar, args)));
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Exemple!"
+}));
 Error.storyName = 'Error!';
-export const WithOnlineStatus = args => {
-  const config = { ...mockConfig,
-    pwaEnabled: true
-  };
-  return /*#__PURE__*/React.createElement(Provider, {
-    config: config
-  }, /*#__PURE__*/React.createElement(CustomDataProvider, {
-    data: customData
-  }, /*#__PURE__*/React.createElement(HeaderBar, args)));
-};
+export const WithOnlineStatus = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Exemple!"
+}));
+WithOnlineStatus.decorators = [createDecoratorProvider({ ...providerConfig,
+  pwaEnabled: true
+})];
 WithOnlineStatus.parameters = {
   docs: {
     description: {
@@ -202,19 +192,17 @@ WithOnlineStatus.parameters = {
     }
   }
 };
-export const WithLastOnlineInfo = args => {
-  const config = { ...mockConfig,
-    pwaEnabled: true,
-    headerbar: {
-      onlineStatusInfo: 'LAST_ONLINE'
-    }
-  };
-  return /*#__PURE__*/React.createElement(Provider, {
-    config: config
-  }, /*#__PURE__*/React.createElement(CustomDataProvider, {
-    data: customData
-  }, /*#__PURE__*/React.createElement(HeaderBar, args)));
-};
+export const WithLastOnlineInfo = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/React.createElement(HeaderBar, {
+  appName: "Exemple!"
+}));
+WithLastOnlineInfo.decorators = [createDecoratorProvider({ ...providerConfig,
+  pwaEnabled: true,
+  headerbar: {
+    onlineStatusInfo: 'LAST_ONLINE'
+  }
+})];
 WithLastOnlineInfo.parameters = {
   docs: {
     description: {
@@ -222,4 +210,10 @@ WithLastOnlineInfo.parameters = {
                 time since last online.'
     }
   }
-};
+};
+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

@@ -1,5 +1,13 @@
 {
     "Search apps": "Search apps",
+    "DHIS2 {{dhis2Version}}": "DHIS2 {{dhis2Version}}",
+    "DHIS2 version unknown": "DHIS2 version unknown",
+    "{{appName}} version unknown": "{{appName}} version unknown",
+    "App {{appVersion}}": "App {{appVersion}}",
+    "App version unknown": "App version unknown",
+    "Debug info": "Debug info",
+    "Close": "Close",
+    "Copy debug info": "Copy debug info",
     "Last online {{relativeTime}}": "Last online {{relativeTime}}",
     "Online": "Online",
     "Offline": "Offline",
@@ -8,5 +16,8 @@
     "Account": "Account",
     "Help": "Help",
     "About DHIS2": "About DHIS2",
-    "Logout": "Logout"
+    "Logout": "Logout",
+    "New {{appName}} version available": "New {{appName}} version available",
+    "New app version available": "New app version available",
+    "Click to reload": "Click to reload"
 }

package/build/es/profile/use-on-doc-click.js

@@ -0,0 +1,20 @@
+import { useEffect, useMemo } from 'react';
+export const useOnDocClick = (containerRef, hide) => {
+  const onDocClick = useMemo(() => {
+    return evt => {
+      if (!containerRef.current) {
+        return null;
+      }
+
+      if (!containerRef.current.contains(evt.target)) {
+        hide();
+      }
+    };
+  }, [containerRef, hide]);
+  useEffect(() => {
+    document.addEventListener('click', onDocClick);
+    return () => {
+      document.removeEventListener('click', onDocClick);
+    };
+  }, [onDocClick]);
+};

package/build/es/profile/use-on-doc-click.test.js

@@ -0,0 +1,38 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useOnDocClick } from './use-on-doc-click.js';
+describe('useOnDocClick', () => {
+  let eventListenerMap = {};
+  const hide = jest.fn();
+  jest.spyOn(document, 'addEventListener').mockImplementation((event, callback) => {
+    eventListenerMap[event] = callback;
+  });
+  beforeEach(() => {
+    eventListenerMap = {};
+  });
+  afterEach(() => {
+    document.addEventListener.mockClear();
+    hide.mockClear();
+  });
+  it('should call the hide function when clicking outside', () => {
+    const el = document.createElement('span');
+    const containerRef = {
+      current: el
+    };
+    renderHook(() => useOnDocClick(containerRef, hide));
+    eventListenerMap.click({
+      target: document.body
+    });
+    expect(hide).toHaveBeenCalled();
+  });
+  it('should not call the hide function when clicking inside', () => {
+    const el = document.createElement('span');
+    const containerRef = {
+      current: el
+    };
+    renderHook(() => useOnDocClick(containerRef, hide));
+    eventListenerMap.click({
+      target: el
+    });
+    expect(hide).not.toHaveBeenCalled();
+  });
+});

package/build/es/profile-menu/index.js

@@ -0,0 +1 @@
+export * from './profile-menu.js';

package/build/es/{profile → profile-menu}/profile-menu.js

@@ -4,15 +4,17 @@ import { Center } from '@dhis2-ui/center';
 import { Divider } from '@dhis2-ui/divider';
 import { Layer } from '@dhis2-ui/layer';
 import { CircularLoader } from '@dhis2-ui/loader';
-import { MenuItem } from '@dhis2-ui/menu';
-import { useConfig, clearSensitiveCaches } from '@dhis2/app-runtime';
+import { MenuDivider, MenuItem } from '@dhis2-ui/menu';
+import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime';
 import { colors } from '@dhis2/ui-constants';
 import { IconSettings24, IconInfo24, IconLogOut24, IconUser24, IconQuestion24 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import { DebugInfoMenuItem } from '../debug-info/debug-info-menu-item.js';
 import { joinPath } from '../join-path.js';
 import i18n from '../locales/index.js';
 import { ProfileHeader } from './profile-header.js';
+import { UpdateNotification } from './update-notification.js';
 
 const LoadingMask = () => /*#__PURE__*/React.createElement(Layer, {
   translucent: true,
@@ -25,7 +27,9 @@ const ProfileContents = _ref => {
     name,
     email,
     avatarId,
-    helpUrl
+    helpUrl,
+    hideProfileMenu,
+    showDebugInfoModal
   } = _ref;
   const {
     baseUrl
@@ -86,37 +90,39 @@ const ProfileContents = _ref => {
     icon: /*#__PURE__*/React.createElement(IconLogOut24, {
       color: colors.grey700
     })
+  }), /*#__PURE__*/React.createElement(MenuDivider, {
+    dense: true
+  }), /*#__PURE__*/React.createElement(DebugInfoMenuItem, {
+    hideProfileMenu: hideProfileMenu,
+    showDebugInfoModal: showDebugInfoModal
+  }), /*#__PURE__*/React.createElement(UpdateNotification, {
+    hideProfileMenu: hideProfileMenu
   }))), loading && /*#__PURE__*/React.createElement(LoadingMask, null), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2099675810"
   }, ["div.jsx-2099675810{width:100%;padding:0;}", "ul.jsx-2099675810{padding:0;margin:0;}", "a.jsx-2099675810,a.jsx-2099675810:hover,a.jsx-2099675810:focus,a.jsx-2099675810:active,a.jsx-2099675810:visited{-webkit-text-decoration:none;text-decoration:none;display:block;}"]));
 };
 
 ProfileContents.propTypes = {
+  hideProfileMenu: PropTypes.func.isRequired,
+  showDebugInfoModal: PropTypes.func.isRequired,
   avatarId: PropTypes.string,
   email: PropTypes.string,
   helpUrl: PropTypes.string,
   name: PropTypes.string
 };
 export const ProfileMenu = _ref2 => {
-  let {
-    avatarId,
-    name,
-    email,
-    helpUrl
+  let { ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "headerbar-profile-menu",
-    className: "jsx-3620236321"
-  }, /*#__PURE__*/React.createElement(ProfileContents, {
-    name: name,
-    email: email,
-    avatarId: avatarId,
-    helpUrl: helpUrl
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3620236321"
-  }, ["div.jsx-3620236321{z-index:10000;position:absolute;top:34px;right:-6px;width:310px;border-top:4px solid transparent;}"]));
+    className: "jsx-1689179824"
+  }, /*#__PURE__*/React.createElement(ProfileContents, props), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1689179824"
+  }, ["div.jsx-1689179824{z-index:10000;position:absolute;top:34px;right:-6px;width:320px;border-top:4px solid transparent;}"]));
 };
 ProfileMenu.propTypes = {
+  hideProfileMenu: PropTypes.func.isRequired,
+  showDebugInfoModal: PropTypes.func.isRequired,
   avatarId: PropTypes.string,
   email: PropTypes.string,
   helpUrl: PropTypes.string,

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

@@ -0,0 +1,51 @@
+import _JSXStyle from "styled-jsx/style";
+import { MenuItem } from '@dhis2-ui/menu';
+import { useConfig } from '@dhis2/app-runtime';
+import { colors } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useHeaderBarContext } from '../header-bar-context.js';
+import i18n from '../locales/index.js';
+export function UpdateNotification(_ref) {
+  let {
+    hideProfileMenu
+  } = _ref;
+  const {
+    appName
+  } = useConfig();
+  const {
+    updateAvailable,
+    onApplyAvailableUpdate
+  } = useHeaderBarContext();
+
+  const onClick = () => {
+    hideProfileMenu();
+    onApplyAvailableUpdate === null || onApplyAvailableUpdate === void 0 ? void 0 : onApplyAvailableUpdate();
+  };
+
+  const updateNotificationLabel = /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4135170305", [colors.blue600]]]) + " " + "root"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4135170305", [colors.blue600]]]) + " " + "badge"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4135170305", [colors.blue600]]]) + " " + "spacer"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["4135170305", [colors.blue600]]]) + " " + "message"
+  }, appName ? i18n.t('New {{appName}} version available', {
+    appName
+  }) : i18n.t('New app version available'), /*#__PURE__*/React.createElement("br", {
+    className: _JSXStyle.dynamic([["4135170305", [colors.blue600]]])
+  }), i18n.t('Click to reload')), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4135170305",
+    dynamic: [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(colors.blue600, ";}"), ".spacer.__jsx-style-dynamic-selector{display:inline-block;width:8px;}", ".message.__jsx-style-dynamic-selector{display:inline-block;}"]));
+  return updateAvailable ? /*#__PURE__*/React.createElement(MenuItem, {
+    dense: true,
+    onClick: onClick,
+    label: updateNotificationLabel,
+    dataTest: "dhis2-ui-headerbar-updatenotification"
+  }) : null;
+}
+UpdateNotification.propTypes = {
+  hideProfileMenu: PropTypes.func.isRequired
+};