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

package/build/cjs/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/cjs/header-bar-context.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHeaderBarContext = exports.HeaderBarContextProvider = void 0;
+
+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 }; }
+
+const headerBarContext = /*#__PURE__*/(0, _react.createContext)({
+  updateAvailable: false,
+  onApplyAvailableUpdate: () => {}
+});
+
+const HeaderBarContextProvider = _ref => {
+  let {
+    updateAvailable,
+    onApplyAvailableUpdate,
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(headerBarContext.Provider, {
+    value: {
+      updateAvailable,
+      onApplyAvailableUpdate
+    }
+  }, children);
+};
+
+exports.HeaderBarContextProvider = HeaderBarContextProvider;
+HeaderBarContextProvider.propTypes = {
+  children: _propTypes.default.node,
+  updateAvailable: _propTypes.default.bool,
+  onApplyAvailableUpdate: _propTypes.default.func
+};
+
+const useHeaderBarContext = () => (0, _react.useContext)(headerBarContext);
+
+exports.useHeaderBarContext = useHeaderBarContext;

package/build/cjs/header-bar.js

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _apps = _interopRequireDefault(require("./apps.js"));
 
+var _headerBarContext = require("./header-bar-context.js");
+
 var _joinPath = require("./join-path.js");
 
 var _index = _interopRequireDefault(require("./locales/index.js"));
@@ -63,9 +65,12 @@ const HeaderBar = _ref => {
 
   let {
     appName,
-    className
+    className,
+    updateAvailable,
+    onApplyAvailableUpdate
   } = _ref;
   const {
+    appName: configAppName,
     baseUrl,
     pwaEnabled,
     headerbar: {
@@ -84,10 +89,11 @@ 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';
 
     _index.default.setDefaultNamespace('default');
@@ -95,15 +101,18 @@ const HeaderBar = _ref => {
     _index.default.changeLanguage(locale);
   }
 
-  return /*#__PURE__*/_react.default.createElement("header", {
-    className: _style.default.dynamic([["3517276904", [_uiConstants.colors.white]]]) + " " + (className || "")
+  return /*#__PURE__*/_react.default.createElement(_headerBarContext.HeaderBarContextProvider, {
+    updateAvailable: updateAvailable,
+    onApplyAvailableUpdate: onApplyAvailableUpdate
+  }, /*#__PURE__*/_react.default.createElement("header", {
+    className: _style.default.dynamic([["3860078320", [_uiConstants.colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3517276904", [_uiConstants.colors.white]]]) + " " + "main"
+    className: _style.default.dynamic([["3860078320", [_uiConstants.colors.white]]]) + " " + "main"
   }, !loading && !error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_logo.Logo, null), /*#__PURE__*/_react.default.createElement(_title.Title, {
-    app: appName,
+    app: appName || configAppName,
     instance: data.title.applicationTitle
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3517276904", [_uiConstants.colors.white]]]) + " " + "right-control-spacer"
+    className: _style.default.dynamic([["3860078320", [_uiConstants.colors.white]]]) + " " + "right-control-spacer"
   }), (pwaEnabled || showOnlineStatus) && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, null), /*#__PURE__*/_react.default.createElement(_notifications.Notifications, {
     interpretations: data.notifications.unreadInterpretations,
     messages: data.notifications.unreadMessageConversations,
@@ -118,13 +127,15 @@ const HeaderBar = _ref => {
   }))), (pwaEnabled || showOnlineStatus) && !loading && !error && /*#__PURE__*/_react.default.createElement(_onlineStatus.OnlineStatus, {
     dense: true
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3517276904",
+    id: "3860078320",
     dynamic: [_uiConstants.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(_uiConstants.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(_uiConstants.colors.white, ";height:48px;}"), ".right-control-spacer.__jsx-style-dynamic-selector{margin-left:auto;}"])));
 };
 
 exports.HeaderBar = HeaderBar;
 HeaderBar.propTypes = {
   appName: _propTypes.default.string,
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  updateAvailable: _propTypes.default.bool,
+  onApplyAvailableUpdate: _propTypes.default.func
 };

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

@@ -3,38 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithOnlineStatus = exports.WithLastOnlineInfo = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
+exports.default = exports.WithUpdateNotification = exports.WithOnlineStatus = exports.WithLastOnlineInfo = exports.NonEnglishUserLocale = exports.NoAuthorityForInterpretationsApp = exports.Loading = exports.Error = exports.Default = exports.CustomLogoWideDimension = void 0;
 
 var _appRuntime = require("@dhis2/app-runtime");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _common = require("./__e2e__/stories/common.js");
+
 var _headerBar = require("./header-bar.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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";
-var _default = {
-  title: 'Header Bar',
-  component: _headerBar.HeaderBar,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  },
-  args: {
-    appName: 'Example!'
-  }
-};
-exports.default = _default;
-const mockConfig = {
-  baseUrl: 'https://debug.dhis2.org/dev/',
-  apiVersion: 33
-};
 const customData = {
   'systemSettings/applicationTitle': {
     applicationTitle: 'Foobar'
@@ -155,77 +137,86 @@ const customAuthoritiesData = { ...customData,
     authorities: ['M_dhis-web-messaging']
   }
 };
+var _default = {
+  title: 'Header Bar',
+  component: _headerBar.HeaderBar,
+  parameters: {
+    componentSubtitle: subtitle,
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  decorators: [(0, _common.createDecoratorProvider)()]
+};
+exports.default = _default;
 
-const Default = args => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-  config: mockConfig
-}, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+const Default = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   data: customData
-}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Example!"
+}));
 
 exports.Default = Default;
 
-const CustomLogoWideDimension = args => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-  config: mockConfig
-}, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+const CustomLogoWideDimension = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   data: customLogoData
-}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Example!"
+}));
 
 exports.CustomLogoWideDimension = CustomLogoWideDimension;
 CustomLogoWideDimension.storyName = 'Custom Logo (wide dimension)';
 
-const NonEnglishUserLocale = args => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-  config: mockConfig
-}, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+const NonEnglishUserLocale = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   data: customLocaleData
-}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Exemple!"
+}));
 
 exports.NonEnglishUserLocale = NonEnglishUserLocale;
-NonEnglishUserLocale.args = {
-  appName: 'Exemple!'
-};
 NonEnglishUserLocale.storyName = 'Non-english user locale';
 
-const NoAuthorityForInterpretationsApp = args => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-  config: mockConfig
-}, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+const NoAuthorityForInterpretationsApp = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   data: customAuthoritiesData
-}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Example!"
+}));
 
 exports.NoAuthorityForInterpretationsApp = NoAuthorityForInterpretationsApp;
 NoAuthorityForInterpretationsApp.storyName = 'No authority for interpretations app';
 
-const Loading = args => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-  config: mockConfig
-}, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+const Loading = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   options: {
     loadForever: true
   }
-}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Example!"
+}));
 
 exports.Loading = Loading;
 Loading.storyName = 'Loading...';
 
-const Error = args => /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-  config: mockConfig
-}, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+const Error = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
   data: {}
-}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Exemple!"
+}));
 
 exports.Error = Error;
 Error.storyName = 'Error!';
 
-const WithOnlineStatus = args => {
-  const config = { ...mockConfig,
-    pwaEnabled: true
-  };
-  return /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-    config: config
-  }, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
-    data: customData
-  }, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
-};
+const WithOnlineStatus = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Exemple!"
+}));
 
 exports.WithOnlineStatus = WithOnlineStatus;
+WithOnlineStatus.decorators = [(0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  pwaEnabled: true
+})];
 WithOnlineStatus.parameters = {
   docs: {
     description: {
@@ -237,21 +228,19 @@ WithOnlineStatus.parameters = {
   }
 };
 
-const WithLastOnlineInfo = args => {
-  const config = { ...mockConfig,
-    pwaEnabled: true,
-    headerbar: {
-      onlineStatusInfo: 'LAST_ONLINE'
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_appRuntime.Provider, {
-    config: config
-  }, /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
-    data: customData
-  }, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, args)));
-};
+const WithLastOnlineInfo = () => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+  data: customData
+}, /*#__PURE__*/_react.default.createElement(_headerBar.HeaderBar, {
+  appName: "Exemple!"
+}));
 
 exports.WithLastOnlineInfo = WithLastOnlineInfo;
+WithLastOnlineInfo.decorators = [(0, _common.createDecoratorProvider)({ ..._common.providerConfig,
+  pwaEnabled: true,
+  headerbar: {
+    onlineStatusInfo: 'LAST_ONLINE'
+  }
+})];
 WithLastOnlineInfo.parameters = {
   docs: {
     description: {
@@ -259,4 +248,13 @@ WithLastOnlineInfo.parameters = {
                 time since last online.'
     }
   }
-};
+};
+
+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

@@ -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/cjs/profile/use-on-doc-click.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnDocClick = void 0;
+
+var _react = require("react");
+
+const useOnDocClick = (containerRef, hide) => {
+  const onDocClick = (0, _react.useMemo)(() => {
+    return evt => {
+      if (!containerRef.current) {
+        return null;
+      }
+
+      if (!containerRef.current.contains(evt.target)) {
+        hide();
+      }
+    };
+  }, [containerRef, hide]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('click', onDocClick);
+    return () => {
+      document.removeEventListener('click', onDocClick);
+    };
+  }, [onDocClick]);
+};
+
+exports.useOnDocClick = useOnDocClick;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useOnDocClick = require("./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
+    };
+    (0, _reactHooks.renderHook)(() => (0, _useOnDocClick.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
+    };
+    (0, _reactHooks.renderHook)(() => (0, _useOnDocClick.useOnDocClick)(containerRef, hide));
+    eventListenerMap.click({
+      target: el
+    });
+    expect(hide).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _profileMenu = require("./profile-menu.js");
+
+Object.keys(_profileMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _profileMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _profileMenu[key];
+    }
+  });
+});

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

@@ -29,12 +29,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _debugInfoMenuItem = require("../debug-info/debug-info-menu-item.js");
+
 var _joinPath = require("../join-path.js");
 
 var _index = _interopRequireDefault(require("../locales/index.js"));
 
 var _profileHeader = require("./profile-header.js");
 
+var _updateNotification = require("./update-notification.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; }
@@ -52,7 +56,9 @@ const ProfileContents = _ref => {
     name,
     email,
     avatarId,
-    helpUrl
+    helpUrl,
+    hideProfileMenu,
+    showDebugInfoModal
   } = _ref;
   const {
     baseUrl
@@ -113,12 +119,21 @@ const ProfileContents = _ref => {
     icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconLogOut24, {
       color: _uiConstants.colors.grey700
     })
+  }), /*#__PURE__*/_react.default.createElement(_menu.MenuDivider, {
+    dense: true
+  }), /*#__PURE__*/_react.default.createElement(_debugInfoMenuItem.DebugInfoMenuItem, {
+    hideProfileMenu: hideProfileMenu,
+    showDebugInfoModal: showDebugInfoModal
+  }), /*#__PURE__*/_react.default.createElement(_updateNotification.UpdateNotification, {
+    hideProfileMenu: hideProfileMenu
   }))), loading && /*#__PURE__*/_react.default.createElement(LoadingMask, null), /*#__PURE__*/_react.default.createElement(_style.default, {
     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.default.func.isRequired,
+  showDebugInfoModal: _propTypes.default.func.isRequired,
   avatarId: _propTypes.default.string,
   email: _propTypes.default.string,
   helpUrl: _propTypes.default.string,
@@ -126,27 +141,20 @@ ProfileContents.propTypes = {
 };
 
 const ProfileMenu = _ref2 => {
-  let {
-    avatarId,
-    name,
-    email,
-    helpUrl
+  let { ...props
   } = _ref2;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": "headerbar-profile-menu",
-    className: "jsx-3620236321"
-  }, /*#__PURE__*/_react.default.createElement(ProfileContents, {
-    name: name,
-    email: email,
-    avatarId: avatarId,
-    helpUrl: helpUrl
-  }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    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.default.createElement(ProfileContents, props), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1689179824"
+  }, ["div.jsx-1689179824{z-index:10000;position:absolute;top:34px;right:-6px;width:320px;border-top:4px solid transparent;}"]));
 };
 
 exports.ProfileMenu = ProfileMenu;
 ProfileMenu.propTypes = {
+  hideProfileMenu: _propTypes.default.func.isRequired,
+  showDebugInfoModal: _propTypes.default.func.isRequired,
   avatarId: _propTypes.default.string,
   email: _propTypes.default.string,
   helpUrl: _propTypes.default.string,