@dhis2-ui/header-bar 7.0.1 → 7.1.0

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

@@ -1,11 +1,42 @@
 "use strict";
 
-require("../common/index");
-
 var _steps = require("cypress-cucumber-preprocessor/steps");
 
+var _index = require("../common/index");
+
+const logoutUrl = `${_index.baseUrl}dhis-web-commons-security/logout.action`;
 (0, _steps.Then)('contains a link to log out the user', () => {
   cy.get('[data-test="headerbar-profile-menu"] > li').should(lis => {
-    expect(lis.eq(4)).to.be.visible;
+    const menuItem = lis.eq(4);
+    expect(menuItem).to.be.visible;
+    expect(menuItem.find('a')).to.have.attr('href', logoutUrl);
   });
+});
+(0, _steps.And)('there is no loading mask', () => {
+  cy.get('[data-test="headerbar-profile-menu-loading-mask"]').should('not.exist');
+});
+(0, _steps.Then)('the user clicks the link to log out', () => {
+  cy.get('[data-test="headerbar-profile-menu"] > li:nth-child(5)').trigger('click');
+});
+(0, _steps.Then)('a loading mask covers the screen', () => {
+  cy.get('[data-test="headerbar-profile-menu-loading-mask"]').should('be.visible');
+}); // Currently not working
+
+(0, _steps.And)('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
+
+  expect(keys).not.to.include('test-cache');
+}); // Currently not working
+
+(0, _steps.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/cjs/features/the_headerbar_contains_a_profile_menu.feature

@@ -57,6 +57,15 @@ Feature: The HeaderBar contains a profile menu
         Given the HeaderBar loads without an error
         When the user opens the menu
         Then contains a link to log out the user
+        And there is no loading mask
+
+        # The following are omitted because of testing complications
+        # around navigation:
+        
+        # Then the user clicks the link to log out
+        # Then a loading mask covers the screen
+        # And clearSensitiveCaches is called
+        # Then the window navigates to the logout URL
 
     Scenario: The profile menu closes when the user clicks outside
         Given the HeaderBar loads without an error

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

@@ -9,8 +9,14 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 
 var _card = require("@dhis2-ui/card");
 
+var _center = require("@dhis2-ui/center");
+
 var _divider = require("@dhis2-ui/divider");
 
+var _layer = require("@dhis2-ui/layer");
+
+var _loader = require("@dhis2-ui/loader");
+
 var _menu = require("@dhis2-ui/menu");
 
 var _appRuntime = require("@dhis2/app-runtime");
@@ -21,7 +27,7 @@ var _uiConstants = require("@dhis2/ui-constants");
 
 var _uiIcons = require("@dhis2/ui-icons");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _joinPath = require("../join-path.js");
 
@@ -29,8 +35,18 @@ var _index = _interopRequireDefault(require("../locales/index.js"));
 
 var _profileHeader = require("./profile-header.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; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const LoadingMask = () => /*#__PURE__*/_react.default.createElement(_layer.Layer, {
+  translucent: true,
+  disablePortal: true,
+  dataTest: "headerbar-profile-menu-loading-mask"
+}, /*#__PURE__*/_react.default.createElement(_center.Center, null, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, null)));
+
 const ProfileContents = ({
   name,
   email,
@@ -40,6 +56,7 @@ const ProfileContents = ({
   const {
     baseUrl
   } = (0, _appRuntime.useConfig)();
+  const [loading, setLoading] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "jsx-2099675810"
   }, /*#__PURE__*/_react.default.createElement(_profileHeader.ProfileHeader, {
@@ -80,13 +97,22 @@ const ProfileContents = ({
       color: _uiConstants.colors.grey700
     })
   }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
-    href: (0, _joinPath.joinPath)(baseUrl, 'dhis-web-commons-security/logout.action'),
+    href: (0, _joinPath.joinPath)(baseUrl, 'dhis-web-commons-security/logout.action') // NB: By MenuItem implementation, this callback
+    // overwrites default navigation behavior but maintains
+    // the href attribute
+    ,
+    onClick: async () => {
+      setLoading(true);
+      await (0, _appRuntime.clearSensitiveCaches)();
+      setLoading(false);
+      window.location.assign((0, _joinPath.joinPath)(baseUrl, 'dhis-web-commons-security/logout.action'));
+    },
     label: _index.default.t('Logout'),
     value: "logout",
     icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconLogOut24, {
       color: _uiConstants.colors.grey700
     })
-  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }))), 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;}"]));
 };

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

@@ -1,7 +1,38 @@
-import '../common/index';
-import { Then } from 'cypress-cucumber-preprocessor/steps';
+import { And, Then } from 'cypress-cucumber-preprocessor/steps';
+import { baseUrl } from '../common/index';
+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 => {
-    expect(lis.eq(4)).to.be.visible;
+    const menuItem = lis.eq(4);
+    expect(menuItem).to.be.visible;
+    expect(menuItem.find('a')).to.have.attr('href', logoutUrl);
   });
+});
+And('there is no loading mask', () => {
+  cy.get('[data-test="headerbar-profile-menu-loading-mask"]').should('not.exist');
+});
+Then('the user clicks the link to log out', () => {
+  cy.get('[data-test="headerbar-profile-menu"] > li:nth-child(5)').trigger('click');
+});
+Then('a loading mask covers the screen', () => {
+  cy.get('[data-test="headerbar-profile-menu-loading-mask"]').should('be.visible');
+}); // Currently not working
+
+And('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
+
+  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;
+  // would be done in 'Then the user clicks link to log out')
+  // cy.get('@locationAssign').should('be.calledWith', logoutUrl)
 });

package/build/es/features/the_headerbar_contains_a_profile_menu.feature

@@ -57,6 +57,15 @@ Feature: The HeaderBar contains a profile menu
         Given the HeaderBar loads without an error
         When the user opens the menu
         Then contains a link to log out the user
+        And there is no loading mask
+
+        # The following are omitted because of testing complications
+        # around navigation:
+        
+        # Then the user clicks the link to log out
+        # Then a loading mask covers the screen
+        # And clearSensitiveCaches is called
+        # Then the window navigates to the logout URL
 
     Scenario: The profile menu closes when the user clicks outside
         Given the HeaderBar loads without an error

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

@@ -1,16 +1,25 @@
 import _JSXStyle from "styled-jsx/style";
 import { Card } from '@dhis2-ui/card';
+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 } from '@dhis2/app-runtime';
+import { useConfig, clearSensitiveCaches } from '@dhis2/app-runtime';
 import propTypes from '@dhis2/prop-types';
 import { colors } from '@dhis2/ui-constants';
 import { IconSettings24, IconInfo24, IconLogOut24, IconUser24, IconQuestion24 } from '@dhis2/ui-icons';
-import React from 'react';
+import React, { useState } from 'react';
 import { joinPath } from '../join-path.js';
 import i18n from '../locales/index.js';
 import { ProfileHeader } from './profile-header.js';
 
+const LoadingMask = () => /*#__PURE__*/React.createElement(Layer, {
+  translucent: true,
+  disablePortal: true,
+  dataTest: "headerbar-profile-menu-loading-mask"
+}, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(CircularLoader, null)));
+
 const ProfileContents = ({
   name,
   email,
@@ -20,6 +29,7 @@ const ProfileContents = ({
   const {
     baseUrl
   } = useConfig();
+  const [loading, setLoading] = useState(false);
   return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
     className: "jsx-2099675810"
   }, /*#__PURE__*/React.createElement(ProfileHeader, {
@@ -60,13 +70,22 @@ const ProfileContents = ({
       color: colors.grey700
     })
   }), /*#__PURE__*/React.createElement(MenuItem, {
-    href: joinPath(baseUrl, 'dhis-web-commons-security/logout.action'),
+    href: joinPath(baseUrl, 'dhis-web-commons-security/logout.action') // NB: By MenuItem implementation, this callback
+    // overwrites default navigation behavior but maintains
+    // the href attribute
+    ,
+    onClick: async () => {
+      setLoading(true);
+      await clearSensitiveCaches();
+      setLoading(false);
+      window.location.assign(joinPath(baseUrl, 'dhis-web-commons-security/logout.action'));
+    },
     label: i18n.t('Logout'),
     value: "logout",
     icon: /*#__PURE__*/React.createElement(IconLogOut24, {
       color: colors.grey700
     })
-  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }))), 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;}"]));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "7.0.1",
+    "version": "7.1.0",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -33,15 +33,18 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "7.0.1",
-        "@dhis2-ui/card": "7.0.1",
-        "@dhis2-ui/divider": "7.0.1",
-        "@dhis2-ui/input": "7.0.1",
-        "@dhis2-ui/logo": "7.0.1",
-        "@dhis2-ui/menu": "7.0.1",
+        "@dhis2-ui/box": "7.1.0",
+        "@dhis2-ui/card": "7.1.0",
+        "@dhis2-ui/center": "7.1.0",
+        "@dhis2-ui/divider": "7.1.0",
+        "@dhis2-ui/input": "7.1.0",
+        "@dhis2-ui/layer": "7.1.0",
+        "@dhis2-ui/loader": "7.1.0",
+        "@dhis2-ui/logo": "7.1.0",
+        "@dhis2-ui/menu": "7.1.0",
         "@dhis2/prop-types": "^1.6.4",
-        "@dhis2/ui-constants": "7.0.1",
-        "@dhis2/ui-icons": "7.0.1",
+        "@dhis2/ui-constants": "7.1.0",
+        "@dhis2/ui-icons": "7.1.0",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"