MF-56: Add logout to primary nav bar

__mocks__/openmrs-esm-api.mock.tsx

@@ -0,0 +1,9 @@
+import { of } from "rxjs";
+
+export function openmrsFetch() {
+  return new Promise(() => {});
+}
+
+export function getCurrentUser() {
+  return of({ authenticated: false });
+}

jest.config.json

@@ -3,6 +3,7 @@
     "^.+\\.tsx?$": "babel-jest"
   },
   "moduleNameMapper": {
+    "@openmrs/esm-api": "<rootDir>/__mocks__/openmrs-esm-api.mock.tsx",
     "\\.(css)$": "identity-obj-proxy"
   }
 }

package.json

@@ -70,6 +70,8 @@
     "kremling": "^2.0.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router-dom": "^5.0.1",
+    "rxjs": "^6.5.3",
     "single-spa-react": "^2.10.2"
   }
 }

src/auth.resource.tsx

@@ -0,0 +1,16 @@
+import { getCurrentUser, openmrsFetch } from "@openmrs/esm-api";
+
+export default {
+  getLoggedInUser,
+  logoutUser
+};
+
+function getLoggedInUser() {
+  return getCurrentUser();
+}
+
+function logoutUser() {
+  return openmrsFetch("/ws/rest/v1/session", {
+    method: "DELETE"
+  });
+}

src/openmrs-esm-primary-navigation.d.tsx

@@ -3,6 +3,7 @@
 
 declare module "@openmrs/esm-api" {
   export function openmrsFetch(url: string, fetchInit: any): any;
+  export function getCurrentUser(opts?: any): any;
 }
 
 declare module "*.css";

src/root.component.tsx

@@ -1,9 +1,26 @@
 import React from "react";
 import openmrsRootDecorator from "@openmrs/react-root-decorator";
 import styles from "./root.styles.css";
+import authResource from "./auth.resource";
+import { toggle } from "kremling";
+import { BrowserRouter, Redirect } from "react-router-dom";
 
-function Root() {
+function Root(props: NavProps) {
   const [sidenavOpen, setSidenavOpen] = React.useState(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = React.useState(false);
+  const [userNames, setUserNames] = React.useState(null);
+  const [userInitials, setUserInitials] = React.useState(null);
+  const [isLoggedIn, setIsLoggedIn] = React.useState(true);
+
+  React.useEffect(() => {
+    authResource.getLoggedInUser().subscribe(({ person }) => {
+      const { display } = person;
+      setUserNames(display);
+      setUserInitials(
+        `${display.split(/\s/)[0][0]}${display.split(/\s/)[1][0]}`
+      );
+    });
+  }, []);
 
   React.useEffect(() => {
     const operation = sidenavOpen ? "add" : "remove";
@@ -14,29 +31,67 @@ function Root() {
     };
   }, [sidenavOpen]);
 
+  function logout() {
+    authResource
+      .logoutUser()
+      .then(() => setIsLoggedIn(false))
+      .catch(err => {
+        throw err;
+      });
+  }
+
+  if (!isLoggedIn) {
+    // @ts-ignore
+    return <Redirect to={`${window.getOpenmrsSpaBase()}login`} />;
+  }
   return (
-    <nav className={styles.topNav}>
-      <button
-        className="omrs-unstyled omrs-padding-left-4 omrs-padding-right-4"
-        onClick={toggleSidenav}
-      >
-        <svg className={`omrs-icon ${styles.menuIcon}`}>
-          <use xlinkHref="#omrs-icon-menu" />
-        </svg>
-      </button>
-      <div className="omrs-type-title-4">
-        {/* We'll figure out whether to use document.title or not later */}
-        Home
-      </div>
-      <div className={styles.avatar}>AB</div>
-    </nav>
+    <BrowserRouter>
+      <React.Fragment>
+        <nav className={styles.topNav}>
+          <button
+            className="omrs-unstyled omrs-padding-left-4 omrs-padding-right-4"
+            onClick={toggleSidenav}
+          >
+            <svg className={`omrs-icon ${styles.menuIcon}`}>
+              <use xlinkHref="#omrs-icon-menu" />
+            </svg>
+          </button>
+          <div className="omrs-type-title-4">
+            {/* We'll figure out whether to use document.title or not later */}
+            Home
+          </div>
+          <div>
+            <button
+              onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
+              className={`omrs-unstyled ${styles.avatar}`}
+            >
+              {userInitials}
+            </button>
+          </div>
+        </nav>
+        <div className={toggle(styles.userMenu, styles.hidden, isUserMenuOpen)}>
+          <div className={`${styles.userMenuCard} omrs-padding-16`}>
+            <div className="omrs-type-body-large omrs-margin-12">
+              {userNames}
+            </div>
+            <button onClick={logout} className="omrs-btn omrs-outlined-neutral">
+              Logout
+            </button>
+          </div>
+        </div>
+      </React.Fragment>
+    </BrowserRouter>
   );
 
   function toggleSidenav() {
     setSidenavOpen(!sidenavOpen);
   }
 }
 
+type NavProps = {
+  history?: any;
+};
+
 export default openmrsRootDecorator({ featureName: "primary navigation" })(
   Root
 );

src/root.styles.css

@@ -14,11 +14,33 @@
 }
 
 .avatar {
-  border: 1px solid var(--omrs-color-bg-lowest-contrast);
-  border-radius: 50%;
-  padding: 0.5rem;
+  border: 1px solid var(--omrs-color-bg-lowest-contrast) !important;
+  border-radius: 50% !important;
+  padding: 0.5rem !important;
 }
 
 .menuIcon {
   fill: var(--omrs-color-interaction);
 }
+
+.userMenu {
+  display: flex;
+  position: absolute;
+  justify-content: flex-end;
+  width: 100%;
+  right: 0;
+}
+
+.userMenuCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid var(--omrs-color-ink-lowest-contrast);
+  border-radius: 0 0 0.25rem 0.25rem;
+  background: var(--omrs-color-bg-high-contrast);
+  border-top: none;
+}
+
+.hidden {
+  display: none;
+}