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

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

@@ -16,6 +16,7 @@ import { useLoginLocations } from '../login.resource';
 import styles from './location-picker.scss';
 import { useDefaultLocation } from './location-picker.resource';
 import type { ConfigSchema } from '../config-schema';
+import { Snackbar } from '@openmrs/esm-styleguide/src/snackbars/snackbar.component';
 
 interface LocationPickerProps {
   hideWelcomeMessage?: boolean;
@@ -33,7 +34,6 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
     useDefaultLocation(isUpdateFlow);
 
   const [searchTerm, setSearchTerm] = useState(null);
-
   const { user, sessionLocation } = useSession();
   const { currentUser, userProperties } = useMemo(
     () => ({
@@ -50,6 +50,7 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
     hasMore,
     loadingNewData,
     setPage,
+    mutate,
   } = useLoginLocations(chooseLocation.useLoginLocationTag, chooseLocation.locationsPerRequest, searchTerm);
 
   const locations = useMemo(() => {
@@ -77,12 +78,14 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
 
   const changeLocation = useCallback(
     (locationUuid?: string, saveUserPreference?: boolean) => {
-      setIsSubmitting(true);
+      if (!locationUuid) {
+        return;
+      }
 
       const referrer = state?.referrer;
       const returnToUrl = new URLSearchParams(location?.search).get('returnToUrl');
 
-      const sessionDefined = locationUuid ? setSessionLocation(locationUuid, new AbortController()) : Promise.resolve();
+      const sessionDefined = locationUuid ? setSessionLocation(locationUuid, new AbortController()) : Promise.reject();
 
       updateDefaultLocation(locationUuid, saveUserPreference);
       sessionDefined.then(() => {
@@ -107,9 +110,6 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
       if (!config.chooseLocation.enabled || locations?.length === 1) {
         changeLocation(locations[0]?.resource.id, false);
       }
-      if (!locations?.length) {
-        changeLocation();
-      }
     }
   }, [changeLocation, config.chooseLocation.enabled, isLoading, locations, searchTerm]);
 
@@ -178,15 +178,32 @@ const LocationPicker: React.FC<LocationPickerProps> = ({ hideWelcomeMessage, cur
               )}
             </p>
           </div>
-          <Search
-            autoFocus
-            labelText={t('searchForLocation', 'Search for a location')}
-            id="search-1"
-            placeholder={t('searchForLocation', 'Search for a location')}
-            onChange={(event) => search(event.target.value)}
-            name="searchForLocation"
-            size="lg"
-          />
+          {locations?.length > 0 ? (
+            <Search
+              autoFocus
+              labelText={t('searchForLocation', 'Search for a location')}
+              id="search-1"
+              placeholder={t('searchForLocation', 'Search for a location')}
+              onChange={(event) => search(event.target.value)}
+              name="searchForLocation"
+              size="lg"
+            />
+          ) : (
+            <Snackbar
+              snackbar={{
+                id: 1,
+                actionButtonLabel: t('reload', 'Reload'),
+                onActionButtonClick: () => mutate(),
+                kind: 'error',
+                title: t('locationsFailedToLoad', 'Locations failed to load'),
+                subtitle: t(
+                  'locationIssueContactAdministrator',
+                  'If the issue persists please contact your administrator',
+                ),
+              }}
+              closeSnackbar={() => {}}
+            />
+          )}
           <div className={styles.searchResults}>
             {isLoading ? (
               <div className={styles.loadingContainer}>

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

@@ -1,5 +1,6 @@
 import { 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';
@@ -12,6 +13,7 @@ interface LoginLocationData {
   hasMore: boolean;
   loadingNewData: boolean;
   setPage: (size: number | ((_size: number) => number)) => Promise<FetchResponse<LocationResponse>[]>;
+  mutate: KeyedMutator<FetchResponse<LocationResponse>[]>;
 }
 
 export function useLoginLocations(
@@ -66,10 +68,10 @@ 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({
@@ -89,6 +91,7 @@ export function useLoginLocations(
       loadingNewData: isValidating,
       setPage: setSize,
       error,
+      mutate,
     };
   }, [isLoading, data, isValidating, setSize]);