(fix) O3-2768: Display error in case there are no locations

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback, LegacyRef, useMemo } f
 import { useLocation, type Location, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
+  ActionableNotification,
   Button,
   Checkbox,
   InlineLoading,
@@ -40,7 +41,6 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
     useDefaultLocation(isUpdateFlow);
 
   const [searchTerm, setSearchTerm] = useState(null);
-
   const { user, sessionLocation } = useSession();
   const { currentUser, userProperties } = useMemo(
     () => ({
@@ -57,6 +57,8 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
     hasMore,
     loadingNewData,
     setPage,
+    mutate,
+    error: errorFetchingLoginLocations,
   } = useLoginLocations(chooseLocation.useLoginLocationTag, chooseLocation.locationsPerRequest, searchTerm);
 
   const locations = useMemo(() => {
@@ -84,12 +86,10 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
 
   const changeLocation = useCallback(
     (locationUuid?: string, saveUserPreference?: boolean) => {
-      setIsSubmitting(true);
-
       const referrer = state?.referrer;
       const returnToUrl = new URLSearchParams(location?.search).get('returnToUrl');
 
-      const sessionDefined = locationUuid ? setSessionLocation(locationUuid, new AbortController()) : Promise.resolve();
+      const sessionDefined = setSessionLocation(locationUuid, new AbortController());
 
       updateDefaultLocation(locationUuid, saveUserPreference);
       sessionDefined.then(() => {
@@ -110,15 +110,16 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
 
   // Handle cases where the location picker is disabled, there is only one location, or there are no locations.
   useEffect(() => {
-    if (!isLoading && !searchTerm) {
+    if (!isLoading && !errorFetchingLoginLocations && !searchTerm) {
       if (!config.chooseLocation.enabled || locations?.length === 1) {
         changeLocation(locations[0]?.resource.id, false);
       }
-      if (!locations?.length) {
+
+      if (!locations.length) {
         changeLocation();
       }
     }
-  }, [changeLocation, config.chooseLocation.enabled, isLoading, locations, searchTerm]);
+  }, [changeLocation, config.chooseLocation.enabled, isLoading, locations, searchTerm, errorFetchingLoginLocations]);
 
   // Handle cases where the login location is present in the userProperties.
   useEffect(() => {
@@ -170,6 +171,43 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
 
   const reloadIndex = hasMore ? Math.floor(locations.length * 0.5) : -1;
 
+  if (errorFetchingLoginLocations) {
+    return (
+      <div className={styles.locationPickerContainer}>
+        <div className={styles.locationCard}>
+          <div className={styles.paddedContainer}>
+            <p className={styles.welcomeTitle}>
+              {t('welcome', 'Welcome')} {currentUser}
+            </p>
+            <p className={styles.welcomeMessage}>
+              {t(
+                'selectYourLocation',
+                'Select your location from the list below. Use the search bar to find your location.',
+              )}
+            </p>
+          </div>
+
+          <div className={styles.searchResults}>
+            <div className={styles.errorNotification}>
+              <ActionableNotification
+                actionButtonLabel={t('tryAgain', 'Try again')}
+                hideCloseButton
+                inline
+                kind="error"
+                onActionButtonClick={mutate}
+                title={t('errorLoadingLoginLocations', 'Error loading login locations')}
+                subtitle={getCoreTranslation(
+                  'contactAdministratorIfIssuePersists',
+                  'If the problem persists contact your system administrator.',
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.locationPickerContainer}>
       <form onSubmit={handleSubmit}>

packages/apps/esm-login-app/src/location-picker/location-picker.scss

@@ -134,3 +134,8 @@ pagination > button:first-child:hover {
 .loader {
   min-height: fit-content;
 }
+
+.errorNotification {
+  margin-inline-start: -1.5rem;
+  margin-inline-end: -1.5rem;
+}

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

@@ -1,8 +1,9 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import type { KeyedMutator } from 'swr';
 import useSwrInfinite from 'swr/infinite';
 import useSwrImmutable from 'swr/immutable';
-import { type FetchResponse, fhirBaseUrl, openmrsFetch, useDebounce, showNotification } from '@openmrs/esm-framework';
+import { type FetchResponse, fhirBaseUrl, openmrsFetch, useDebounce } from '@openmrs/esm-framework';
 import type { LocationEntry, LocationResponse } from './types';
 
 interface LoginLocationData {
@@ -12,6 +13,8 @@ interface LoginLocationData {
   hasMore: boolean;
   loadingNewData: boolean;
   setPage: (size: number | ((_size: number) => number)) => Promise<FetchResponse<LocationResponse>[]>;
+  mutate: KeyedMutator<FetchResponse<LocationResponse>[]>;
+  error: Error;
 }
 
 export function useLoginLocations(
@@ -66,19 +69,16 @@ export function useLoginLocations(
     return url + urlSearchParameters.toString();
   }
 
-  const { data, isLoading, isValidating, setSize, error } = useSwrInfinite<FetchResponse<LocationResponse>, Error>(
-    constructUrl,
-    openmrsFetch,
-  );
+  const { data, isLoading, isValidating, setSize, error, mutate } = useSwrInfinite<
+    FetchResponse<LocationResponse>,
+    Error
+  >(constructUrl, openmrsFetch);
 
-  if (error) {
-    showNotification({
-      title: t('errorLoadingLoginLocations', 'Error loading login locations'),
-      kind: 'error',
-      critical: true,
-      description: error?.message,
-    });
-  }
+  useEffect(() => {
+    if (error) {
+      console.error(error);
+    }
+  }, [error]);
 
   const memoizedLocations = useMemo(() => {
     return {
@@ -89,8 +89,9 @@ export function useLoginLocations(
       loadingNewData: isValidating,
       setPage: setSize,
       error,
+      mutate,
     };
-  }, [isLoading, data, isValidating, setSize]);
+  }, [isLoading, data, isValidating, setSize, error, mutate]);
 
   return memoizedLocations;
 }

packages/apps/esm-login-app/translations/en.json

@@ -21,6 +21,7 @@
   "searchForLocation": "Search for a location",
   "selectYourLocation": "Select your location from the list below. Use the search bar to find your location.",
   "submitting": "Submitting",
+  "tryAgain": "Try again",
   "username": "Username",
   "validValueRequired": "A valid value is required",
   "welcome": "Welcome"

packages/framework/esm-translations/src/translations.ts

@@ -20,6 +20,7 @@ export const coreTranslations = {
   change: 'Change',
   close: 'Close',
   confirm: 'Confirm',
+  contactAdministratorIfIssuePersists: 'If the problem persists contact your system administrator.',
   contactDetails: 'Contact Details',
   error: 'Error',
   errorCopy:

packages/framework/esm-translations/translations/en.json

@@ -9,6 +9,7 @@
   "cityVillage": "City",
   "close": "Close",
   "confirm": "Confirm",
+  "contactAdministratorIfIssuePersists": "If the problem persists contact your system administrator.",
   "contactDetails": "Contact Details",
   "country": "Country",
   "countyDistrict": "District",