@dhis2-ui/header-bar 9.10.3 → 9.11.1-beta.1

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

@@ -90,9 +90,10 @@ export const dataProviderData = {
     unreadInterpretations: 10,
     unreadMessageConversations: 5
   }
-}; // Trailing "HeaderBar" because storybook is confusing this with the
-// helper from the org unit tree's common.js helper with the same name
+};
 
+// Trailing "HeaderBar" because storybook is confusing this with the
+// helper from the org unit tree's common.js helper with the same name
 export const createDecoratorCustomDataProviderHeaderBar = function () {
   let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : dataProviderData;
   return fn => {
@@ -153,17 +154,14 @@ export const providerConfig = {
   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]);
@@ -174,7 +172,6 @@ const MockAlert = _ref => {
     }
   }, alert.message);
 };
-
 MockAlert.propTypes = {
   alert: PropTypes.shape({
     message: PropTypes.string,
@@ -184,7 +181,6 @@ MockAlert.propTypes = {
     remove: PropTypes.func
   })
 };
-
 const MockAlertStack = () => {
   const alerts = useAlerts();
   return /*#__PURE__*/React.createElement("div", {
@@ -198,7 +194,6 @@ const MockAlertStack = () => {
     alert: alert
   })));
 };
-
 export const mockOfflineInterface = {
   pwaEnabled: true,
   startRecording: async () => undefined,

package/build/es/__e2e__/stories/custom-application-title.js

@@ -4,7 +4,8 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const CustomApplicationTitle = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-CustomApplicationTitle.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
+CustomApplicationTitle.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
   ['systemSettings/applicationTitle']: {
     applicationTitle: 'Barbaz'
   }

package/build/es/__e2e__/stories/me-with-avatar.js

@@ -4,7 +4,8 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const MeWithAvatar = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-MeWithAvatar.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
+MeWithAvatar.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
   me: {
     name: 'John Doe',
     email: 'john_doe@dhis2.org',

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

@@ -1,5 +1,5 @@
-import { Button } from '@dhis2-ui/button';
 import { useOnlineStatusMessage } from '@dhis2/app-runtime';
+import { Button } from '@dhis2-ui/button';
 import React from 'react';
 import { HeaderBar } from '../../index.js';
 import { providerConfig, createDecoratorCustomDataProviderHeaderBar, createDecoratorProvider } from './common.js';
@@ -15,12 +15,11 @@ export const OnlineStatusMessageUpdate = () => {
     }
   }, buttonLabel);
 };
-
 const OnlineStatusMessaging = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 }), /*#__PURE__*/React.createElement(OnlineStatusMessageUpdate, null));
-
 export const OnlineStatusMessagingWithPwaEnabled = () => /*#__PURE__*/React.createElement(OnlineStatusMessaging, null);
-OnlineStatusMessagingWithPwaEnabled.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+OnlineStatusMessagingWithPwaEnabled.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
   pwaEnabled: true
 })];

package/build/es/__e2e__/stories/pwa-enabled.js

@@ -4,6 +4,7 @@ import { providerConfig, createDecoratorCustomDataProviderHeaderBar, createDecor
 export const PWAEnabled = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-PWAEnabled.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+PWAEnabled.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
   pwaEnabled: true
 })];

package/build/es/__e2e__/stories/user-has-all-authority.js

@@ -4,8 +4,10 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const UserHasAllAuthority = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-UserHasAllAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
-  me: { ...dataProviderData.me,
+UserHasAllAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
+  me: {
+    ...dataProviderData.me,
     authorities: ['ALL']
   }
 }), createDecoratorProvider()];

package/build/es/__e2e__/stories/user-has-no-authorities.js

@@ -4,8 +4,10 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const UserHasNoAuthorities = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-UserHasNoAuthorities.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
-  me: { ...dataProviderData.me,
+UserHasNoAuthorities.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
+  me: {
+    ...dataProviderData.me,
     authorities: []
   }
 }), createDecoratorProvider()];

package/build/es/__e2e__/stories/user-has-web-interpretation-and-messaging-authority.js

@@ -4,8 +4,10 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const UserHasWebInterpretationAndMessagingAuthority = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-UserHasWebInterpretationAndMessagingAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
-  me: { ...dataProviderData.me,
+UserHasWebInterpretationAndMessagingAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
+  me: {
+    ...dataProviderData.me,
     authorities: ['M_dhis-web-interpretation', 'M_dhis-web-messaging']
   }
 }), createDecoratorProvider()];

package/build/es/__e2e__/stories/user-has-web-interpretation-authority.js

@@ -4,8 +4,10 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const UserHasWebInterpretationAuthority = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-UserHasWebInterpretationAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
-  me: { ...dataProviderData.me,
+UserHasWebInterpretationAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
+  me: {
+    ...dataProviderData.me,
     authorities: ['M_dhis-web-interpretation']
   }
 }), createDecoratorProvider()];

package/build/es/__e2e__/stories/user-has-web-messaging-authority.js

@@ -4,8 +4,10 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const UserHasWebMessagingAuthority = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-UserHasWebMessagingAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
-  me: { ...dataProviderData.me,
+UserHasWebMessagingAuthority.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
+  me: {
+    ...dataProviderData.me,
     authorities: ['M_dhis-web-messaging']
   }
 }), createDecoratorProvider()];

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

@@ -2,21 +2,26 @@ 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,
+WithUnknownInstanceVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
+  systemInfo: {
+    ...providerConfig.systemInfo,
     version: undefined
   }
 })];
 export const WithUnknownAppVersion = () => /*#__PURE__*/React.createElement(HeaderBar, null);
-WithUnknownAppVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+WithUnknownAppVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
   appVersion: undefined
 })];
 export const WithUnknownAppName = () => /*#__PURE__*/React.createElement(HeaderBar, null);
-WithUnknownAppName.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+WithUnknownAppName.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
   appName: undefined
 })];
 export const WithUnknownAppNameAndVersion = () => /*#__PURE__*/React.createElement(HeaderBar, null);
-WithUnknownAppNameAndVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+WithUnknownAppNameAndVersion.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
   appName: undefined,
   appVersion: undefined
 })];

package/build/es/__e2e__/stories/with-special-app-name-character.js

@@ -4,8 +4,10 @@ import { modulesWithSpecialCharacters, dataProviderData, createDecoratorCustomDa
 export const WithSpecialAppNameCharacters = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-WithSpecialAppNameCharacters.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
-  ['action::menu/getModules']: { ...dataProviderData['action::menu/getModules'],
+WithSpecialAppNameCharacters.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
+  ['action::menu/getModules']: {
+    ...dataProviderData['action::menu/getModules'],
     modules: modulesWithSpecialCharacters
   }
 }), createDecoratorProvider()];

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

@@ -8,12 +8,14 @@ export const WithUpdateAvailableNotification = () => {
     onApplyAvailableUpdate: () => setModalOpen(true)
   }), modalOpen && /*#__PURE__*/React.createElement("div", null, "The callback was successful"));
 };
-WithUpdateAvailableNotification.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+WithUpdateAvailableNotification.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
   appName: 'Data Visualizer'
 })];
 export const WithUpdateAvailableNotificationNoAppName = () => /*#__PURE__*/React.createElement(HeaderBar, {
   updateAvailable: true
 });
-WithUpdateAvailableNotificationNoAppName.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({ ...providerConfig,
+WithUpdateAvailableNotificationNoAppName.decorators = [createDecoratorCustomDataProviderHeaderBar(), createDecoratorProvider({
+  ...providerConfig,
   appName: undefined
 })];

package/build/es/__e2e__/stories/zero-unread-interpretations.js

@@ -4,7 +4,8 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const ZeroUnreadInterpretations = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-ZeroUnreadInterpretations.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
+ZeroUnreadInterpretations.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
   ['me/dashboard']: {
     unreadInterpretations: 0
   }

package/build/es/__e2e__/stories/zero-unread-messages.js

@@ -4,7 +4,8 @@ import { dataProviderData, createDecoratorCustomDataProviderHeaderBar, createDec
 export const ZeroUnreadMessages = () => /*#__PURE__*/React.createElement(HeaderBar, {
   appName: "Example!"
 });
-ZeroUnreadMessages.decorators = [createDecoratorCustomDataProviderHeaderBar({ ...dataProviderData,
+ZeroUnreadMessages.decorators = [createDecoratorCustomDataProviderHeaderBar({
+  ...dataProviderData,
   ['me/dashboard']: {
     unreadMessages: 0
   }

package/build/es/apps.js

@@ -1,22 +1,21 @@
 import _JSXStyle from "styled-jsx/style";
-import { Card } from '@dhis2-ui/card';
-import { InputField } from '@dhis2-ui/input';
 import { useConfig } from '@dhis2/app-runtime';
 import { colors, spacers, theme } from '@dhis2/ui-constants';
 import { IconApps24, IconSettings24 } from '@dhis2/ui-icons';
+import { Card } from '@dhis2-ui/card';
+import { InputField } from '@dhis2-ui/input';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { joinPath } from './join-path.js';
 import i18n from './locales/index.js';
+
 /**
  * Copied from here:
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
  */
-
 function escapeRegExpCharacters(text) {
   return text.replace(/[/.*+?^${}()|[\]\\]/g, '\\$&');
 }
-
 function Search(_ref) {
   let {
     value,
@@ -46,12 +45,10 @@ function Search(_ref) {
     id: "4264724627"
   }, ["div.jsx-4264724627{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:52px;margin:8px;}", "span.jsx-4264724627{-webkit-flex:1 100%;-ms-flex:1 100%;flex:1 100%;}", "span.jsx-4264724627:last-child{-webkit-flex:1 auto;-ms-flex:1 auto;flex:1 auto;margin:8px;}"]));
 }
-
 Search.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired
 };
-
 function Item(_ref2) {
   let {
     name,
@@ -70,15 +67,13 @@ function Item(_ref2) {
   }, name), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1412616027",
     dynamic: [theme.primary050]
-  }, ["a.__jsx-style-dynamic-selector{display:inline-block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:96px;margin:8px;border-radius:12px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}", "a.__jsx-style-dynamic-selector:hover,a.__jsx-style-dynamic-selector:focus{background-color:".concat(theme.primary050, ";cursor:pointer;}"), "a.__jsx-style-dynamic-selector:hover>div.__jsx-style-dynamic-selector{font-weight:500;cursor:pointer;}", "img.__jsx-style-dynamic-selector{width:48px;height:48px;margin:8px;cursor:pointer;}", "div.__jsx-style-dynamic-selector{overflow-wrap:anywhere;margin-top:14px;color:rgba(0,0,0,0.87);font-size:12px;-webkit-letter-spacing:0.01em;-moz-letter-spacing:0.01em;-ms-letter-spacing:0.01em;letter-spacing:0.01em;line-height:14px;text-align:center;cursor:pointer;}"]));
+  }, ["a.__jsx-style-dynamic-selector{display:inline-block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:96px;margin:8px;border-radius:12px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}", `a.__jsx-style-dynamic-selector:hover,a.__jsx-style-dynamic-selector:focus{background-color:${theme.primary050};cursor:pointer;}`, "a.__jsx-style-dynamic-selector:hover>div.__jsx-style-dynamic-selector{font-weight:500;cursor:pointer;}", "img.__jsx-style-dynamic-selector{width:48px;height:48px;margin:8px;cursor:pointer;}", "div.__jsx-style-dynamic-selector{overflow-wrap:anywhere;margin-top:14px;color:rgba(0,0,0,0.87);font-size:12px;-webkit-letter-spacing:0.01em;-moz-letter-spacing:0.01em;-ms-letter-spacing:0.01em;letter-spacing:0.01em;line-height:14px;text-align:center;cursor:pointer;}"]));
 }
-
 Item.propTypes = {
   img: PropTypes.string,
   name: PropTypes.string,
   path: PropTypes.string
 };
-
 function List(_ref3) {
   let {
     apps,
@@ -104,7 +99,7 @@ function List(_ref3) {
       icon
     } = _ref5;
     return /*#__PURE__*/React.createElement(Item, {
-      key: "app-".concat(name, "-").concat(idx),
+      key: `app-${name}-${idx}`,
       name: displayName || name,
       path: defaultAction,
       img: icon
@@ -113,12 +108,10 @@ function List(_ref3) {
     id: "2424821176"
   }, ["div.jsx-2424821176{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:30vw;min-width:300px;max-width:560px;min-height:200px;max-height:465px;margin-block-start:0;margin-block-end:8px;margin-inline:8px;overflow:auto;overflow-x:hidden;}"]));
 }
-
 List.propTypes = {
   apps: PropTypes.array,
   filter: PropTypes.string
 };
-
 const AppMenu = _ref6 => {
   let {
     apps,
@@ -138,13 +131,11 @@ const AppMenu = _ref6 => {
     id: "3826299842"
   }, ["div.jsx-3826299842{z-index:10000;position:absolute;inset-inline-end:-4px;}"]));
 };
-
 AppMenu.propTypes = {
   apps: PropTypes.array.isRequired,
   onFilterChange: PropTypes.func.isRequired,
   filter: PropTypes.string
 };
-
 const Apps = _ref7 => {
   let {
     apps
@@ -185,9 +176,8 @@ const Apps = _ref7 => {
   }) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "325245423",
     dynamic: [spacers.dp4, spacers.dp12]
-  }, ["button.__jsx-style-dynamic-selector{display:block;background:transparent;padding-block-start:".concat(spacers.dp4, ";padding-block-end:0;padding-inline:").concat(spacers.dp12, ";border:0;cursor:pointer;height:100%;}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "button.__jsx-style-dynamic-selector:active{background:#104067;}", "div.__jsx-style-dynamic-selector{position:relative;height:100%;}"]));
+  }, [`button.__jsx-style-dynamic-selector{display:block;background:transparent;padding-block-start:${spacers.dp4};padding-block-end:0;padding-inline:${spacers.dp12};border:0;cursor:pointer;height:100%;}`, "button.__jsx-style-dynamic-selector:focus{outline:2px solid white;outline-offset:-2px;}", "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:hover{background:#1a557f;}", "button.__jsx-style-dynamic-selector:active{background:#104067;}", "div.__jsx-style-dynamic-selector{position:relative;height:100%;}"]));
 };
-
 Apps.propTypes = {
   apps: PropTypes.array.isRequired
 };

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

@@ -1,6 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
-import { MenuItem } from '@dhis2-ui/menu';
 import { colors } from '@dhis2/ui-constants';
+import { MenuItem } from '@dhis2-ui/menu';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../locales/index.js';
@@ -11,12 +11,10 @@ export const DebugInfoMenuItem = _ref => {
     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", {
@@ -27,14 +25,14 @@ export const DebugInfoMenuItem = _ref => {
   }) : 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', {
+  }, debugInfo.app_name ? debugInfo.app_version ? `${debugInfo.app_name} ${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;}"]));
+  }, [`.root.__jsx-style-dynamic-selector{color:${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,

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

@@ -1,6 +1,6 @@
+import { useAlert } from '@dhis2/app-runtime';
 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';
@@ -16,13 +16,11 @@ export function DebugInfoModal(_ref) {
   } = 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"

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

@@ -2,7 +2,6 @@ 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 => {
@@ -13,7 +12,6 @@ const formatDebugInfoKey = key => {
     }
   }).join(' ');
 };
-
 export function DebugInfoTable() {
   const debugInfo = useDebugInfo();
   return /*#__PURE__*/React.createElement("table", {
@@ -31,5 +29,5 @@ export function DebugInfoTable() {
   }, debugInfo[key])))), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "4076206425",
     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-block:3px;padding-inline-end:16px;padding-inline-start:0;}", ".debug-info-key.__jsx-style-dynamic-selector{font-weight:bold;}"]));
+  }, [`table.__jsx-style-dynamic-selector{white-space:pre-wrap;font-size:14px;line-height:1.2;color:${colors.grey700};font-famile:Menlo,Courier,monospace !important;}`, "td.__jsx-style-dynamic-selector{padding-block:3px;padding-inline-end:16px;padding-inline-start:0;}", ".debug-info-key.__jsx-style-dynamic-selector{font-weight:bold;}"]));
 }

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

@@ -2,7 +2,7 @@ import { Before, Given } from '@badeball/cypress-cucumber-preprocessor';
 export const baseUrl = 'https://domain.tld/';
 export const webCommons = 'https://domain.tld/dhis-web-commons/';
 Before(() => {
-  cy.intercept('GET', "".concat(baseUrl, "api/fileResources/avatarId/data"), {
+  cy.intercept('GET', `${baseUrl}api/fileResources/avatarId/data`, {
     fixture: 'HeaderBar/avatar.png'
   }).as('avatar');
 });

package/build/es/features/the_headerbar_can_display_online_status/the_headerbar_displays_online_status.js

@@ -1,18 +1,19 @@
-import { Before, After, Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; // see https://github.com/cypress-io/cypress/issues/17723#issuecomment-1457064322
+import { Before, After, Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 
+// see https://github.com/cypress-io/cypress/issues/17723#issuecomment-1457064322
 const goOffline = () => {
-  cy.log('**go offline**') // stub every request with a StaticResponse to simulate network error
+  cy.log('**go offline**')
+  // stub every request with a StaticResponse to simulate network error
   .then(() => cy.intercept('*', {
     forceNetworkError: true
   })).then(() => cy.window().then(win => win.dispatchEvent(new Event('offline'))));
 };
-
 const goOnline = () => {
   // disable offline mode, otherwise we will break our tests :)
-  cy.log('**go online**') // go back to normal network behavior
+  cy.log('**go online**')
+  // go back to normal network behavior
   .then(() => cy.intercept('*')).then(() => cy.window().then(win => win.dispatchEvent(new Event('online'))));
 };
-
 Before(() => {
   goOnline();
 });
@@ -22,6 +23,7 @@ Given('the HeaderBar loads without error with showOnlineStatus configured', () =
 });
 Given('the HeaderBar loads without error when PWA is enabled', () => {
   cy.visitStory('HeaderBarTesting', 'PWA Enabled');
+  cy.get(':contains("Online")').should('exist');
 });
 Given('the HeaderBar loads and is PWA enabled so online status messages will be visible', () => {
   cy.visitStory('HeaderBarTesting', 'Online Status Messaging With PWA Enabled');
@@ -56,6 +58,10 @@ Given('the browser goes offline', () => {
   goOffline();
 });
 Then('the status badge shows offline', () => {
+  // cy.get('[data-test="headerbar-online-status"].badge .label')
+  //     .invoke('text')
+  //     .should('equal', 'Offline')
+
   cy.get('[data-test="headerbar-online-status"].badge .label').should($label => {
     expect($label.text()).to.equal('Offline');
   });

package/build/es/features/the_headerbar_contains_a_profile_menu/common.js

@@ -3,5 +3,8 @@ Then('the HeaderBar does not display the profile menu', () => {
   cy.get('[data-test="headerbar-profile-menu"]').should('not.exist');
 });
 When('the user opens the menu', () => {
-  cy.get("\n        [data-test=\"headerbar-profile-icon-text\"],\n        [data-test=\"headerbar-profile-icon-image\"]\n    ").click();
+  cy.get(`
+        [data-test="headerbar-profile-icon-text"],
+        [data-test="headerbar-profile-icon-image"]
+    `).click();
 });

package/build/es/features/the_headerbar_contains_a_profile_menu/the_headerbar_shows_a_text_icon_if_the_user_does_not_have_an_avatar.js

@@ -2,7 +2,7 @@ import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('the HeaderBar loads without an error and the user does not have an avatar', () => {
   cy.visitStory('HeaderBarTesting', 'Default');
 });
-Then("the headerbar contains a text icon of size 36px", () => {
+Then(`the headerbar contains a text icon of size 36px`, () => {
   cy.fixture('HeaderBar/me').then(() => {
     cy.get('[data-test="headerbar-profile-icon-text"]').should('be.visible').and('have.css', 'height', '36px').and('have.css', 'width', '36px');
   });
@@ -10,7 +10,7 @@ Then("the headerbar contains a text icon of size 36px", () => {
 When('the user clicks on the text icon', () => {
   cy.get('[data-test="headerbar-profile-icon-text"]').click();
 });
-Then("the profile menu contains a text icon of size 48px", () => {
+Then(`the profile menu contains a text icon of size 48px`, () => {
   cy.fixture('HeaderBar/me').then(() => {
     cy.get('[data-test="headerbar-profile-menu-icon-text"]').should('be.visible').and('have.css', 'height', '48px').and('have.css', 'width', '48px');
   });

package/build/es/features/the_headerbar_contains_a_profile_menu/the_menu_opens.js

@@ -1,6 +1,9 @@
 import { When, Then } from '@badeball/cypress-cucumber-preprocessor';
 When('the user clicks on the profile icons', () => {
-  cy.get("\n        [data-test=\"headerbar-profile-icon-text\"],\n        [data-test=\"headerbar-profile-icon-image\"]\n    ").click();
+  cy.get(`
+        [data-test="headerbar-profile-icon-text"],
+        [data-test="headerbar-profile-icon-image"]
+    `).click();
 });
 Then('the menu opens', () => {
   cy.get('[data-test="headerbar-profile-menu"]').should('be.visible');

package/build/es/features/the_headerbar_contains_a_profile_menu/the_user_can_log_out.js

@@ -1,6 +1,6 @@
 import { When, Then } from '@badeball/cypress-cucumber-preprocessor';
 import { baseUrl } from '../common/index.js';
-const logoutUrl = "".concat(baseUrl, "dhis-web-commons-security/logout.action");
+const logoutUrl = `${baseUrl}dhis-web-commons-security/logout.action`;
 Then('contains a link to log out the user', () => {
   cy.get('[data-test="headerbar-profile-menu"] > li').should(lis => {
     const menuItem = lis.eq(4);
@@ -16,23 +16,27 @@ Then('the user clicks the link to log out', () => {
 });
 Then('a loading mask covers the screen', () => {
   cy.get('[data-test="headerbar-profile-menu-loading-mask"]').should('be.visible');
-}); // Currently not working
+});
 
+// Currently not working
 When('clearSensitiveCaches is called', async () => {
   // Open caches to test 'clearSensitiveCaches':
   // A keepable cache
-  await caches.open('workbox-precache-v2-asdf'); // Other, potentially-sensitive cache
-
-  await caches.open('test-cache'); // Todo: wait for function to resolve (loading mask goes away?)
-
-  const keys = await caches.keys(); // Static asset caches are kept
-
-  expect(keys).to.include('workbox-precache-v2-asdf'); // Others are removed
+  await caches.open('workbox-precache-v2-asdf');
+  // Other, potentially-sensitive cache
+  await caches.open('test-cache');
 
+  // Todo: wait for function to resolve (loading mask goes away?)
+  const keys = await caches.keys();
+  // Static asset caches are kept
+  expect(keys).to.include('workbox-precache-v2-asdf');
+  // Others are removed
   expect(keys).not.to.include('test-cache');
-}); // Currently not working
+});
 
-Then('the window navigates to the logout URL', () => {// (Currently unable to stub window.location.assign;
+// Currently not working
+Then('the window navigates to the logout URL', () => {
+  // (Currently unable to stub window.location.assign;
   // would be done in 'Then the user clicks link to log out')
   // cy.get('@locationAssign').should('be.calledWith', logoutUrl)
 });

package/build/es/features/the_search_should_escape_regexp_character/the_user_searches_for_an_app_with_a_regex_character.js

@@ -3,8 +3,9 @@ import { modulesWithSpecialCharacters } from '../../__e2e__/stories/modulesWithS
 Given(/some app names contain a (.*)/, character => {
   // Needs to be wrapped, otherwise for some reason the wrong char is in the scope
   cy.wrap(character).then(char => {
-    cy.visitStory('HeaderBarTesting', 'With Special App Name Characters'); // verify that there's a module with the special char in its name
+    cy.visitStory('HeaderBarTesting', 'With Special App Name Characters');
 
+    // verify that there's a module with the special char in its name
     const modulesWithSpecialChar = modulesWithSpecialCharacters.filter(module => {
       return module.displayName.indexOf(char) !== -1;
     });