O3-1242 App crashes on logout

packages/apps/esm-implementer-tools-app/src/implementer-tools.button.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import Close20 from "@carbon/icons-react/es/close/20";
 import Tools24 from "@carbon/icons-react/es/tools/24";
 import { HeaderGlobalAction } from "carbon-components-react";
-import { UserHasAccess, useStore } from "@openmrs/esm-framework";
+import { useStore } from "@openmrs/esm-framework";
 import { implementerToolsStore, togglePopup } from "./store";
 import styles from "./implementer-tools.styles.scss";
 
@@ -12,17 +12,15 @@ const ImplementerToolsButton: React.FC = () => {
   const { isOpen } = useStore(implementerToolsStore);
 
   return (
-    <UserHasAccess privilege="coreapps.systemAdministration">
-      <HeaderGlobalAction
-        aria-label={t("implementerTools", "Implementer Tools")}
-        aria-labelledby="Implementer Tools"
-        className={styles.toolStyles}
-        name="ImplementerToolsIcon"
-        onClick={togglePopup}
-      >
-        {isOpen ? <Close20 /> : <Tools24 />}
-      </HeaderGlobalAction>
-    </UserHasAccess>
+    <HeaderGlobalAction
+      aria-label={t("implementerTools", "Implementer Tools")}
+      aria-labelledby="Implementer Tools"
+      className={styles.toolStyles}
+      name="ImplementerToolsIcon"
+      onClick={togglePopup}
+    >
+      {isOpen ? <Close20 /> : <Tools24 />}
+    </HeaderGlobalAction>
   );
 };
 

packages/apps/esm-implementer-tools-app/src/index.ts

@@ -25,6 +25,7 @@ function setupOpenMRS() {
           () => import("./implementer-tools.button"),
           options
         ),
+        privilege: "coreapps.systemAdministration",
       },
     ],
   };

packages/apps/esm-login-app/src/choose-location/choose-location.component.tsx

@@ -6,9 +6,9 @@ import {
   navigate,
   useConfig,
   setSessionLocation,
+  useSession,
 } from "@openmrs/esm-framework";
 import { useLoginLocations } from "./choose-location.resource";
-import { useCurrentUser } from "../CurrentUserContext";
 import type { StaticContext } from "react-router";
 
 export interface LoginReferrer {
@@ -27,7 +27,7 @@ export const ChooseLocation: React.FC<ChooseLocationProps> = ({
   const returnToUrl = new URLSearchParams(location?.search).get("returnToUrl");
   const referrer = location?.state?.referrer;
   const config = useConfig();
-  const user = useCurrentUser();
+  const { user } = useSession();
   const { locationData, isLoading } = useLoginLocations(
     config.chooseLocation.useLoginLocationTag
   );
@@ -39,8 +39,10 @@ export const ChooseLocation: React.FC<ChooseLocationProps> = ({
         : Promise.resolve();
 
       sessionDefined.then(() => {
-        // console.log("referrer: ", referrer);
-        if (referrer && referrer !== "/") {
+        if (
+          referrer &&
+          !["/", "/login", "/login/location"].includes(referrer)
+        ) {
           navigate({ to: "${openmrsSpaBase}" + referrer });
           return;
         }
@@ -55,6 +57,8 @@ export const ChooseLocation: React.FC<ChooseLocationProps> = ({
     [referrer, config.links.loginSuccess, returnToUrl]
   );
 
+  // Handle cases where the location picker is disabled, there is only one
+  // location, or there are no locations.
   useEffect(() => {
     if (!isLoading) {
       if (!config.chooseLocation.enabled || locationData?.length === 1) {
@@ -72,6 +76,11 @@ export const ChooseLocation: React.FC<ChooseLocationProps> = ({
     isLoading,
   ]);
 
+  if (!isLoading && !user) {
+    navigate({ to: "${openmrsSpaBase}/login" });
+    return null;
+  }
+
   if (!isLoading || !isLoginEnabled) {
     return (
       <LocationPicker

packages/apps/esm-login-app/src/choose-location/choose-location.resource.ts

@@ -3,7 +3,7 @@ import {
   openmrsFetch,
   fhirBaseUrl,
   FetchResponse,
-  showNotification,
+  reportError,
 } from "@openmrs/esm-framework";
 import useSwrInfinite from "swr/infinite";
 import { LocationEntry, LocationResponse } from "../types";
@@ -61,11 +61,8 @@ export function useLoginLocations(
   >(getUrl, openmrsFetch);
 
   if (error) {
-    showNotification({
-      title: error.name,
-      description: error.message,
-      kind: "error",
-    });
+    console.error(error);
+    reportError(error);
   }
 
   const memoizedLocationData = useMemo(() => {

packages/apps/esm-login-app/src/choose-location/choose-location.test.tsx

@@ -1,6 +1,11 @@
 import { waitFor } from "@testing-library/react";
 import renderWithRouter from "../test-helpers/render-with-router";
-import { navigate, openmrsFetch, useConfig } from "@openmrs/esm-framework";
+import {
+  navigate,
+  openmrsFetch,
+  useConfig,
+  useSession,
+} from "@openmrs/esm-framework";
 import {
   mockSetSessionLocation,
   mockSoleLoginLocation,
@@ -12,13 +17,13 @@ const mockedNavigate = navigate as jest.Mock;
 const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockedUseConfig = useConfig as jest.Mock;
 
-jest.mock("../CurrentUserContext", () => ({
-  useCurrentUser() {
-    return {
-      display: "Testy McTesterface",
-    };
+const mockUseSession = useSession as jest.Mock;
+
+mockUseSession.mockReturnValue({
+  user: {
+    display: "Testy McTesterface",
   },
-}));
+});
 
 describe("ChooseLocation: ", () => {
   beforeEach(() => {

packages/apps/esm-login-app/src/login/login.component.tsx

@@ -4,9 +4,8 @@ import ArrowRight24 from "@carbon/icons-react/es/arrow--right/24";
 import { Button, InlineNotification, TextInput } from "carbon-components-react";
 import { RouteComponentProps } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useConfig, interpolateUrl } from "@openmrs/esm-framework";
+import { useConfig, interpolateUrl, useSession } from "@openmrs/esm-framework";
 import { performLogin } from "./login.resource";
-import { useCurrentUser } from "../CurrentUserContext";
 import type { StaticContext } from "react-router";
 
 const hidden: React.CSSProperties = {
@@ -27,7 +26,7 @@ export interface LoginProps
 
 const Login: React.FC<LoginProps> = ({ history, location, isLoginEnabled }) => {
   const config = useConfig();
-  const user = useCurrentUser();
+  const { user } = useSession();
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [errorMessage, setErrorMessage] = useState("");

packages/apps/esm-login-app/src/login/login.test.tsx

@@ -1,9 +1,12 @@
 import { useState } from "react";
 import { waitFor, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { setSessionLocation, useConfig } from "@openmrs/esm-framework";
+import {
+  setSessionLocation,
+  useConfig,
+  useSession,
+} from "@openmrs/esm-framework";
 import { performLogin } from "./login.resource";
-import { useCurrentUser } from "../CurrentUserContext";
 import { mockConfig } from "../../__mocks__/config.mock";
 import renderWithRouter from "../test-helpers/render-with-router";
 import Login from "./login.component";
@@ -15,12 +18,8 @@ jest.mock("./login.resource", () => ({
 }));
 
 const mockedSetSessionLocation = setSessionLocation as jest.Mock;
-const mockedUseCurrentUser = useCurrentUser as jest.Mock;
 const mockedUseConfig = useConfig as jest.Mock;
-
-jest.mock("../CurrentUserContext", () => ({
-  useCurrentUser: jest.fn(),
-}));
+const mockedUseSession = useSession as jest.Mock;
 
 const loginLocations = [
   { uuid: "111", display: "Earth" },
@@ -31,7 +30,8 @@ describe(`<Login />`, () => {
   beforeEach(() => {
     mockedLogin.mockReset();
     mockedSetSessionLocation.mockReset();
-    mockedUseCurrentUser.mockReset();
+    mockedUseSession.mockReset();
+    mockedUseSession.mockReturnValue({ authenticated: false });
     mockedUseConfig.mockReturnValue(mockConfig);
   });
 
@@ -106,10 +106,10 @@ describe(`<Login />`, () => {
       });
       return Promise.resolve({ data: { authenticated: true } });
     });
-    mockedUseCurrentUser.mockImplementation(() => {
+    mockedUseSession.mockImplementation(() => {
       const [user, setUser] = useState();
       refreshUser = setUser;
-      return user;
+      return { user, authenticated: !!user };
     });
 
     const wrapper = renderWithRouter(

packages/apps/esm-login-app/src/redirect-logout/logout.resource.ts

@@ -1,7 +1,13 @@
-import { openmrsFetch, refetchCurrentUser } from "@openmrs/esm-framework";
+import {
+  clearCurrentUser,
+  openmrsFetch,
+  refetchCurrentUser,
+} from "@openmrs/esm-framework";
 
-export function performLogout() {
-  return openmrsFetch("/ws/rest/v1/session", {
+export async function performLogout() {
+  await openmrsFetch("/ws/rest/v1/session", {
     method: "DELETE",
-  }).then(refetchCurrentUser);
+  });
+  clearCurrentUser();
+  await refetchCurrentUser();
 }

packages/apps/esm-login-app/src/redirect-logout/redirect-logout.component.tsx

@@ -1,26 +1,25 @@
 import React, { useEffect } from "react";
 import { RouteComponentProps } from "react-router-dom";
-import { navigate, useConfig } from "@openmrs/esm-framework";
+import { navigate, useConfig, useSession } from "@openmrs/esm-framework";
 import { performLogout } from "./logout.resource";
-import { useCurrentUser } from "../CurrentUserContext";
 
 export interface RedirectLogoutProps extends RouteComponentProps<{}> {
   isLoginEnabled: boolean;
 }
 
 const RedirectLogout: React.FC<RedirectLogoutProps> = ({ isLoginEnabled }) => {
   const config = useConfig();
-  const user = useCurrentUser();
+  const user = useSession();
 
   useEffect(() => {
-    if (!user || !isLoginEnabled) {
+    if (!user.authenticated || !isLoginEnabled) {
       navigate({ to: "${openmrsSpaBase}/login" });
     } else {
       performLogout().then(() => {
         if (config.provider.type === "oauth2") {
           location.href = config.provider.logoutUrl;
         } else {
-          location.href = window.spaBase;
+          navigate({ to: "${openmrsSpaBase}/login" });
         }
       });
     }

packages/apps/esm-login-app/src/root.component.tsx

@@ -3,39 +3,34 @@ import Login from "./login/login.component";
 import ChooseLocation from "./choose-location/choose-location.component";
 import RedirectLogout from "./redirect-logout/redirect-logout.component";
 import { BrowserRouter, Route } from "react-router-dom";
-import { CurrentUserContext } from "./CurrentUserContext";
 
 export interface RootProps {
   isLoginEnabled: boolean;
 }
 
 const Root: React.FC<RootProps> = ({ isLoginEnabled }) => {
   return (
-    <CurrentUserContext>
-      <BrowserRouter basename={window.spaBase}>
-        <Route
-          exact
-          path="/login(/confirm)?"
-          render={(props) => (
-            <Login {...props} isLoginEnabled={isLoginEnabled} />
-          )}
-        />
-        <Route
-          exact
-          path="/login/location"
-          render={(props) => (
-            <ChooseLocation {...props} isLoginEnabled={isLoginEnabled} />
-          )}
-        />
-        <Route
-          exact
-          path="/logout"
-          render={(props) => (
-            <RedirectLogout {...props} isLoginEnabled={isLoginEnabled} />
-          )}
-        />
-      </BrowserRouter>
-    </CurrentUserContext>
+    <BrowserRouter basename={window.spaBase}>
+      <Route
+        exact
+        path="/login(/confirm)?"
+        render={(props) => <Login {...props} isLoginEnabled={isLoginEnabled} />}
+      />
+      <Route
+        exact
+        path="/login/location"
+        render={(props) => (
+          <ChooseLocation {...props} isLoginEnabled={isLoginEnabled} />
+        )}
+      />
+      <Route
+        exact
+        path="/logout"
+        render={(props) => (
+          <RedirectLogout {...props} isLoginEnabled={isLoginEnabled} />
+        )}
+      />
+    </BrowserRouter>
   );
 };