@openmrs/esm-styleguide 8.0.1-pre.3511 → 8.0.1-pre.3525

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "8.0.1-pre.3511",
+  "version": "8.0.1-pre.3525",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "main": "dist/openmrs-esm-styleguide.js",
@@ -37,6 +37,7 @@
   "scripts": {
     "test": "cross-env TZ=UTC vitest run --passWithNoTests",
     "test:watch": "cross-env TZ=UTC vitest watch",
+    "coverage": "cross-env TZ=UTC vitest run --coverage --passWithNoTests",
     "build": "concurrently \"rspack --mode=production\" \"tsc --project tsconfig.build.json\"",
     "build:development": "concurrently \"rspack --mode=development\" \"tsc --project tsconfig.build.json\"",
     "analyze": "rspack --mode=production --env analyze=true",
@@ -97,20 +98,21 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "8.0.1-pre.3511",
-    "@openmrs/esm-config": "8.0.1-pre.3511",
-    "@openmrs/esm-emr-api": "8.0.1-pre.3511",
-    "@openmrs/esm-error-handling": "8.0.1-pre.3511",
-    "@openmrs/esm-extensions": "8.0.1-pre.3511",
-    "@openmrs/esm-globals": "8.0.1-pre.3511",
-    "@openmrs/esm-navigation": "8.0.1-pre.3511",
-    "@openmrs/esm-react-utils": "8.0.1-pre.3511",
-    "@openmrs/esm-state": "8.0.1-pre.3511",
-    "@openmrs/esm-translations": "8.0.1-pre.3511",
-    "@openmrs/esm-utils": "8.0.1-pre.3511",
+    "@openmrs/esm-api": "8.0.1-pre.3525",
+    "@openmrs/esm-config": "8.0.1-pre.3525",
+    "@openmrs/esm-emr-api": "8.0.1-pre.3525",
+    "@openmrs/esm-error-handling": "8.0.1-pre.3525",
+    "@openmrs/esm-extensions": "8.0.1-pre.3525",
+    "@openmrs/esm-globals": "8.0.1-pre.3525",
+    "@openmrs/esm-navigation": "8.0.1-pre.3525",
+    "@openmrs/esm-react-utils": "8.0.1-pre.3525",
+    "@openmrs/esm-state": "8.0.1-pre.3525",
+    "@openmrs/esm-translations": "8.0.1-pre.3525",
+    "@openmrs/esm-utils": "8.0.1-pre.3525",
     "@rspack/cli": "^1.3.11",
     "@rspack/core": "^1.3.11",
     "@types/geopattern": "^1.2.9",
+    "@vitest/coverage-v8": "^4.0.7",
     "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
     "happy-dom": "^17.4.7",
@@ -124,7 +126,7 @@
     "svgo-loader": "^4.0.0",
     "swr": "2.2.5",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.4"
+    "vitest": "^4.0.7"
   },
   "stableVersion": "8.0.0"
 }

package/src/location-picker/location-picker.component.tsx

@@ -1,5 +1,12 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { InlineLoading, RadioButton, RadioButtonGroup, RadioButtonSkeleton, Search } from '@carbon/react';
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import {
+  InlineLoading,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  RadioButtonSkeleton,
+  Search,
+} from '@carbon/react';
 import { getCoreTranslation } from '@openmrs/esm-translations';
 import { useOnVisible } from '@openmrs/esm-framework';
 import { useLocationByUuid, useLocations } from './location-picker.resource';
@@ -20,7 +27,8 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
   locationsPerRequest = 50,
   onChange,
 }) => {
-  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const searchId = useId();
 
   const { location: defaultLocation } = useLocationByUuid(defaultLocationUuid);
 
@@ -29,55 +37,69 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
     isLoading,
     hasMore,
     loadingNewData,
+    error,
     setPage,
   } = useLocations(locationTag, locationsPerRequest, searchTerm);
 
   const locations = useMemo(() => {
     if (defaultLocation && !searchTerm && defaultLocationUuid) {
-      return [defaultLocation, ...fetchedLocations?.filter(({ resource }) => resource.id !== defaultLocationUuid)];
+      return [defaultLocation, ...fetchedLocations.filter(({ resource }) => resource.id !== defaultLocationUuid)];
     }
-    return fetchedLocations;
+    return fetchedLocations ?? [];
   }, [defaultLocation, fetchedLocations, defaultLocationUuid, searchTerm]);
 
-  const search = (location: string) => {
-    onChange();
-    setSearchTerm(location);
-  };
+  const handleSearchChange = useCallback(
+    (searchQuery: string) => {
+      onChange();
+      setSearchTerm(searchQuery.trim());
+    },
+    [onChange],
+  );
 
   const loadMore = useCallback(() => {
     if (loadingNewData || !hasMore) {
       return;
-    } else {
-      setPage((page) => page + 1);
     }
+    setPage((page) => page + 1);
   }, [loadingNewData, hasMore, setPage]);
 
   const loadingIconRef = useOnVisible(loadMore);
 
-  const reloadIndex = hasMore ? Math.max(0, Math.floor(locations.length - locationsPerRequest / 2)) : -1;
+  const infiniteScrollTriggerIndex = hasMore ? Math.max(0, Math.floor(locations.length - locationsPerRequest / 2)) : -1;
 
   return (
-    <div>
+    <>
       <Search
+        aria-describedby={error ? `${searchId}-error` : undefined}
         labelText={getCoreTranslation('searchForLocation')}
-        id="search-1"
+        id={searchId}
         placeholder={getCoreTranslation('searchForLocation')}
-        onChange={(event) => search(event.target.value)}
+        onChange={(event) => handleSearchChange(event.target.value)}
         size="lg"
       />
+      {error && (
+        <div className={styles.errorNotification} id={`${searchId}-error`}>
+          <InlineNotification
+            kind="error"
+            subtitle={getCoreTranslation(
+              'errorLoadingLoginLocations',
+              'Unable to load login locations. Please try again or contact support if the problem persists.',
+            )}
+            title={getCoreTranslation('error', 'Error')}
+          />
+        </div>
+      )}
       <div className={styles.searchResults}>
         {isLoading ? (
           <div className={styles.loadingContainer}>
-            <RadioButtonSkeleton className={styles.radioButtonSkeleton} role="progressbar" />
-            <RadioButtonSkeleton className={styles.radioButtonSkeleton} role="progressbar" />
-            <RadioButtonSkeleton className={styles.radioButtonSkeleton} role="progressbar" />
-            <RadioButtonSkeleton className={styles.radioButtonSkeleton} role="progressbar" />
-            <RadioButtonSkeleton className={styles.radioButtonSkeleton} role="progressbar" />
+            {Array.from({ length: 5 }).map((_, index) => (
+              <RadioButtonSkeleton key={index} className={styles.radioButtonSkeleton} role="progressbar" />
+            ))}
           </div>
         ) : (
           <>
             <div className={styles.locationResultsContainer}>
-              {locations?.length > 0 ? (
+              {locations.length > 0 ? (
                 <RadioButtonGroup
                   name="loginLocations"
                   onChange={(value) => {
@@ -89,10 +111,14 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
                   {locations.map((entry, i) => (
                     <RadioButton
                       className={styles.locationRadioButton}
-                      key={entry.resource.id}
                       id={entry.resource.id}
+                      key={entry.resource.id}
+                      labelText={
+                        <span ref={i === infiniteScrollTriggerIndex ? loadingIconRef : null}>
+                          {entry.resource.name}
+                        </span>
+                      }
                       name={entry.resource.name}
-                      labelText={<span ref={i === reloadIndex ? loadingIconRef : null}>{entry.resource.name}</span>}
                       value={entry.resource.id}
                     />
                   ))}
@@ -111,6 +137,6 @@ export const LocationPicker: React.FC<LocationPickerProps> = ({
           </>
         )}
       </div>
-    </div>
+    </>
   );
 };

package/src/location-picker/location-picker.module.scss

@@ -15,11 +15,6 @@
   height: 25.5rem;
 }
 
-.resultsCount {
-  @extend .bodyCompact01;
-  color: $color-gray-70;
-}
-
 .locationResultsContainer {
   display: flex;
   overflow-y: auto;
@@ -39,18 +34,6 @@
   margin-bottom: layout.$spacing-05;
 }
 
-.confirmButton {
-  padding: layout.$spacing-06;
-
-  .savePreferenceCheckbox {
-    padding-bottom: layout.$spacing-05 !important;
-  }
-
-  button {
-    width: 100%;
-  }
-}
-
 .radioButtonSkeleton {
   margin-right: 0 !important;
   margin-bottom: layout.$spacing-07;
@@ -82,3 +65,7 @@
   justify-content: center;
   margin: layout.$spacing-06 auto 0;
 }
+
+.errorNotification {
+  margin: layout.$spacing-03 0;
+}

package/src/location-picker/location-picker.resource.ts

@@ -5,7 +5,6 @@ import useSwrInfinite from 'swr/infinite';
 import { type FetchResponse, fhirBaseUrl, openmrsFetch } from '@openmrs/esm-api';
 import { type FHIRLocationResource } from '@openmrs/esm-emr-api';
 import { useDebounce } from '@openmrs/esm-react-utils';
-import { showNotification } from '../notifications';
 
 export interface LocationResponse {
   type: string;
@@ -27,6 +26,7 @@ export interface LoginLocationData {
   totalResults?: number;
   hasMore: boolean;
   loadingNewData: boolean;
+  error: Error | null;
   setPage: (size: number | ((_size: number) => number)) => Promise<FetchResponse<LocationResponse>[] | undefined>;
 }
 
@@ -53,7 +53,6 @@ export function useLocationByUuid(locationUuid?: string) {
 }
 
 export function useLocations(locationTag?: string, count: number = 0, searchQuery: string = ''): LoginLocationData {
-  const { t } = useTranslation();
   const debouncedSearchQuery = useDebounce(searchQuery);
   function constructUrl(page: number, prevPageData: FetchResponse<LocationResponse>) {
     if (prevPageData) {
@@ -92,7 +91,7 @@ export function useLocations(locationTag?: string, count: number = 0, searchQuer
       urlSearchParameters.append('_tag', locationTag);
     }
 
-    if (typeof debouncedSearchQuery === 'string' && debouncedSearchQuery != '') {
+    if (typeof debouncedSearchQuery === 'string' && debouncedSearchQuery !== '') {
       urlSearchParameters.append('name:contains', debouncedSearchQuery);
     }
 
@@ -104,15 +103,6 @@ export function useLocations(locationTag?: string, count: number = 0, searchQuer
     openmrsFetch,
   );
 
-  if (error) {
-    showNotification({
-      title: t('errorLoadingLoginLocations', 'Error loading login locations'),
-      kind: 'error',
-      critical: true,
-      description: error?.message,
-    });
-  }
-
   const memoizedLocations = useMemo(() => {
     return {
       locations: data?.length ? data?.flatMap((entries) => entries?.data?.entry ?? []) : [],
@@ -120,9 +110,10 @@ export function useLocations(locationTag?: string, count: number = 0, searchQuer
       totalResults: data?.[0]?.data?.total,
       hasMore: data?.length ? data?.[data.length - 1]?.data?.link?.some((link) => link.relation === 'next') : false,
       loadingNewData: isValidating,
+      error: error || null,
       setPage: setSize,
     };
-  }, [isLoading, data, isValidating, setSize]);
+  }, [isLoading, data, isValidating, setSize, error]);
 
   return memoizedLocations;
 }