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

package/build/es/profile.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/header-bar",
-    "version": "8.4.17",
+    "version": "8.5.0-beta.2",
     "description": "UI HeaderBar",
     "repository": {
         "type": "git",
@@ -33,19 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
+        "@dhis2-ui/box": "8.5.0-beta.2",
+        "@dhis2-ui/button": "8.5.0-beta.2",
+        "@dhis2-ui/card": "8.5.0-beta.2",
+        "@dhis2-ui/center": "8.5.0-beta.2",
+        "@dhis2-ui/divider": "8.5.0-beta.2",
+        "@dhis2-ui/input": "8.5.0-beta.2",
+        "@dhis2-ui/layer": "8.5.0-beta.2",
+        "@dhis2-ui/loader": "8.5.0-beta.2",
+        "@dhis2-ui/logo": "8.5.0-beta.2",
+        "@dhis2-ui/menu": "8.5.0-beta.2",
+        "@dhis2-ui/modal": "8.5.0-beta.2",
+        "@dhis2-ui/user-avatar": "8.5.0-beta.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "8.4.17",
-        "@dhis2-ui/card": "8.4.17",
-        "@dhis2-ui/center": "8.4.17",
-        "@dhis2-ui/divider": "8.4.17",
-        "@dhis2-ui/input": "8.4.17",
-        "@dhis2-ui/layer": "8.4.17",
-        "@dhis2-ui/loader": "8.4.17",
-        "@dhis2-ui/logo": "8.4.17",
-        "@dhis2-ui/menu": "8.4.17",
-        "@dhis2-ui/user-avatar": "8.4.17",
-        "@dhis2/ui-constants": "8.4.17",
-        "@dhis2/ui-icons": "8.4.17",
+        "@dhis2/ui-constants": "8.5.0-beta.2",
+        "@dhis2/ui-icons": "8.5.0-beta.2",
         "classnames": "^2.3.1",
         "moment": "^2.29.1",
         "prop-types": "^15.7.2"

package/build/cjs/features/the_headerbar_displays_instance_and_app_infos/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('the HeaderBar has been supplied with an app name and version', () => {});
-(0, _steps.Given)('the HeaderBar has not been supplied with an app version', () => {});
-(0, _steps.Given)("the HeaderBar's profile menu is visible", () => {});
-(0, _steps.Given)('the profile menu failed loading the instance infos', () => {});
-(0, _steps.Given)('the profile menu has successfully loaded the instance infos', () => {});
-(0, _steps.Given)('the profile menu is loading the instance infos', () => {});
-(0, _steps.Then)('a message stating that loading the instance infos has failed should be displayed', () => {});
-(0, _steps.Then)('a message stating that the instance infos are being loaded should be displayed', () => {});
-(0, _steps.Then)('the app infos should be displayed', () => {});
-(0, _steps.Then)('the app infos should not be displayed', () => {});
-(0, _steps.Then)('the instance infos should be displayed', () => {});

package/build/cjs/features/the_headerbar_displays_instance_and_app_infos.feature

@@ -1,29 +0,0 @@
-Feature: The HeaderBar displays instance and app infos
-
-    Scenario: The HeaderBar displays both instance and app infos
-        Given the HeaderBar has been supplied with an app name and version
-        And the HeaderBar's profile menu is visible
-        And the profile menu has successfully loaded the instance infos
-        Then the instance infos should be displayed
-        And the app infos should be displayed
-
-    Scenario: The HeaderBar displays app infos and an instance infos loading message
-        Given the HeaderBar has been supplied with an app name and version
-        And the HeaderBar's profile menu is visible
-        And the profile menu is loading the instance infos
-        Then the app infos should be displayed
-        And a message stating that the instance infos are being loaded should be displayed
-
-    Scenario: The HeaderBar displays app infos and an instance infos error message
-        Given the HeaderBar has been supplied with an app name and version
-        And the HeaderBar's profile menu is visible
-        And the profile menu failed loading the instance infos
-        Then the app infos should be displayed
-        And a message stating that loading the instance infos has failed should be displayed
-
-    Scenario: The HeaderBar displays only instance infos
-        Given the HeaderBar has not been supplied with an app version
-        And the HeaderBar's profile menu is visible
-        And the profile menu has successfully loaded the instance infos
-        Then the instance infos should be displayed
-        And the app infos should not be displayed

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

@@ -1,12 +0,0 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
-Given('the HeaderBar has been supplied with an app name and version', () => {});
-Given('the HeaderBar has not been supplied with an app version', () => {});
-Given("the HeaderBar's profile menu is visible", () => {});
-Given('the profile menu failed loading the instance infos', () => {});
-Given('the profile menu has successfully loaded the instance infos', () => {});
-Given('the profile menu is loading the instance infos', () => {});
-Then('a message stating that loading the instance infos has failed should be displayed', () => {});
-Then('a message stating that the instance infos are being loaded should be displayed', () => {});
-Then('the app infos should be displayed', () => {});
-Then('the app infos should not be displayed', () => {});
-Then('the instance infos should be displayed', () => {});

package/build/es/features/the_headerbar_displays_instance_and_app_infos.feature

@@ -1,29 +0,0 @@
-Feature: The HeaderBar displays instance and app infos
-
-    Scenario: The HeaderBar displays both instance and app infos
-        Given the HeaderBar has been supplied with an app name and version
-        And the HeaderBar's profile menu is visible
-        And the profile menu has successfully loaded the instance infos
-        Then the instance infos should be displayed
-        And the app infos should be displayed
-
-    Scenario: The HeaderBar displays app infos and an instance infos loading message
-        Given the HeaderBar has been supplied with an app name and version
-        And the HeaderBar's profile menu is visible
-        And the profile menu is loading the instance infos
-        Then the app infos should be displayed
-        And a message stating that the instance infos are being loaded should be displayed
-
-    Scenario: The HeaderBar displays app infos and an instance infos error message
-        Given the HeaderBar has been supplied with an app name and version
-        And the HeaderBar's profile menu is visible
-        And the profile menu failed loading the instance infos
-        Then the app infos should be displayed
-        And a message stating that loading the instance infos has failed should be displayed
-
-    Scenario: The HeaderBar displays only instance infos
-        Given the HeaderBar has not been supplied with an app version
-        And the HeaderBar's profile menu is visible
-        And the profile menu has successfully loaded the instance infos
-        Then the instance infos should be displayed
-        And the app infos should not be displayed