(feat) O3-2817: Fix some issues in the change language modal (#917)

* (feat) O3-2817: Fix issues in the change language modal * Fixup annotations
openmrs · Feb 6, 2024 · ca0c93a · ca0c93a
1 parent 97feb47
commit ca0c93a
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 37 deletions.
diff --git a/...-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx b/...-primary-navigation-app/src/components/change-language/change-language-link.extension.tsx
@@ -10,19 +10,17 @@ export function ChangeLanguageLink() {
   const { t } = useTranslation();
   const session = useSession();
 
-  const launchChangeModal = useCallback(() => {
-    showModal('change-language-modal');
-  }, []);
+  const launchChangeLanguageModal = useCallback(() => showModal('change-language-modal'), []);
 
   const languageNames = new Intl.DisplayNames([session?.locale], { type: 'language' });
 
   return (
-    <SwitcherItem className={styles.panelItemContainer} aria-label="Change language">
+    <SwitcherItem className={styles.panelItemContainer} aria-label={t('changeLanguage', 'Change language')}>
       <div>
         <Language size={20} />
         <p>{languageNames.of(session?.locale)}</p>
       </div>
-      <Button kind="ghost" onClick={launchChangeModal}>
+      <Button kind="ghost" onClick={launchChangeLanguageModal}>
         {t('change', 'Change')}
       </Button>
     </SwitcherItem>

diff --git a/...apps/esm-primary-navigation-app/src/components/change-language/change-language-modal.scss b/...apps/esm-primary-navigation-app/src/components/change-language/change-language-modal.scss
@@ -4,7 +4,6 @@
 .languageOptionsContainer {
   display: flex;
   flex-direction: column;
-  margin-left: 2em;
   max-height: 28rem;
 }
 
@@ -14,3 +13,13 @@
   align-items: center;
   @extend .bodyShort01;
 }
+
+.submitButton {
+  :global(.cds--inline-loading) {
+    min-height: 1rem !important;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset !important;
+  }
+}
diff --git a/.../apps/esm-primary-navigation-app/src/components/change-language/change-language.modal.tsx b/.../apps/esm-primary-navigation-app/src/components/change-language/change-language.modal.tsx
@@ -1,6 +1,14 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, ModalBody, ModalFooter, ModalHeader, RadioButton, RadioButtonGroup } from '@carbon/react';
+import {
+  Button,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  RadioButton,
+  RadioButtonGroup,
+} from '@carbon/react';
 import { useConnectivity, useSession } from '@openmrs/esm-framework';
 import { postUserPropertiesOffline, postUserPropertiesOnline } from './change-language.resource';
 import styles from './change-language-modal.scss';
@@ -11,53 +19,58 @@ interface ChangeLanguageModalProps {
 
 export default function ChangeLanguageModal({ close }: ChangeLanguageModalProps) {
   const { t } = useTranslation();
+  const isOnline = useConnectivity();
   const session = useSession();
   const user = session?.user;
   const allowedLocales = session?.allowedLocales ?? [];
   const [selectedLocale, setSelectedLocale] = useState(session?.locale);
-  const isOnline = useConnectivity();
+  const [isChangingLanguage, setIsChangingLanguage] = useState(false);
+
+  const handleSubmit = useCallback(() => {
+    setIsChangingLanguage(true);
 
-  const onSubmit = useCallback(() => {
     const postUserProperties = isOnline ? postUserPropertiesOnline : postUserPropertiesOffline;
-    if (selectedLocale !== session?.locale) {
+
+    if (selectedLocale && selectedLocale !== session?.locale) {
       const ac = new AbortController();
       postUserProperties(
         user.uuid,
         {
           ...(user.userProperties ?? {}),
-          defaultLocale: selectedLocale,
+          defaultLocale: selectedLocale.replace(/-/gi, '_'),
         },
         ac,
       );
     }
   }, [isOnline, user.userProperties, user.uuid, selectedLocale]);
 
   const languageNames = useMemo(
-    () => Object.fromEntries(allowedLocales.map((l) => [l, new Intl.DisplayNames([l], { type: 'language' }).of(l)])),
+    () =>
+      Object.fromEntries(
+        allowedLocales.map((locale) => [locale, new Intl.DisplayNames([locale], { type: 'language' }).of(locale)]),
+      ),
     [allowedLocales],
   );
 
   return (
     <>
-      <ModalHeader closeModal={close} title={t('changeLanguage', 'Change Language')} />
+      <ModalHeader closeModal={close} title={t('changeLanguage', 'Change language')} />
       <ModalBody>
         <div className={styles.languageOptionsContainer}>
           <RadioButtonGroup
             valueSelected={selectedLocale}
             orientation="vertical"
-            name="Login locations"
-            onChange={(l) => {
-              setSelectedLocale(l.toString());
-            }}
+            name="Language options"
+            onChange={(locale) => setSelectedLocale(locale.toString())}
           >
-            {allowedLocales.map((l, i) => (
+            {allowedLocales.map((locale, i) => (
               <RadioButton
                 className={styles.languageRadioButton}
-                key={`locale-option-${l}`}
-                id={`locale-option-${l}`}
-                name={l}
-                labelText={languageNames[l]}
-                value={l}
+                key={`locale-option-${locale}-${i}`}
+                id={`locale-option-${locale}-${i}`}
+                name={locale}
+                labelText={languageNames[locale]}
+                value={locale}
               />
             ))}
           </RadioButtonGroup>
@@ -67,8 +80,17 @@ export default function ChangeLanguageModal({ close }: ChangeLanguageModalProps)
         <Button kind="secondary" onClick={close}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button type="submit" onClick={onSubmit}>
-          {t('apply', 'Apply')}
+        <Button
+          className={styles.submitButton}
+          disabled={isChangingLanguage || selectedLocale === session?.locale}
+          type="submit"
+          onClick={handleSubmit}
+        >
+          {isChangingLanguage ? (
+            <InlineLoading description={t('changingLanguage', 'Changing language') + '...'} />
+          ) : (
+            <span>{t('change', 'Change')}</span>
+          )}
         </Button>
       </ModalFooter>
     </>

diff --git a/...nge-language/change-language.resource.tsx → ...ange-language/change-language.resource.ts b/...nge-language/change-language.resource.tsx → ...ange-language/change-language.resource.ts
@@ -9,7 +9,7 @@ export type PostUserProperties = (
 
 export async function postUserPropertiesOnline(
   userUuid: string,
-  userProperties: any,
+  userProperties: Record<string, string>,
   abortController: AbortController,
 ): Promise<void> {
   await openmrsFetch(`/ws/rest/v1/user/${userUuid}`, {
@@ -25,7 +25,7 @@ export async function postUserPropertiesOnline(
 
 export async function postUserPropertiesOffline(
   userUuid: string,
-  userProperties: Record<string, unknown>,
+  userProperties: Record<string, string>,
 ): Promise<void> {
   await queueSynchronizationItemFor(userUuid, userPropertyChange, userProperties, {
     displayName: 'User Language Change',

diff --git a/...s/apps/esm-primary-navigation-app/src/components/change-language/change-language.test.tsx b/...s/apps/esm-primary-navigation-app/src/components/change-language/change-language.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import ChangeLanguageModal from './change-language.modal';
+import { render, screen } from '@testing-library/react';
 import { useSession } from '@openmrs/esm-framework';
+import ChangeLanguageModal from './change-language.modal';
 
-const mockUser: any = {
+const mockUser = {
   uuid: 'uuid',
   userProperties: {
     defaultLocale: 'fr',
@@ -32,7 +32,7 @@ describe(`Change Language Modal`, () => {
     render(<ChangeLanguageModal close={jest.fn()} />);
     expect(screen.getByRole('radio', { name: /français/ })).toBeChecked();
     await user.click(screen.getByRole('radio', { name: /english/i }));
-    await user.click(screen.getByRole('button', { name: /apply/i }));
+    await user.click(screen.getByRole('button', { name: /change/i }));
     expect(mockPostUserPropertiesOnline).toHaveBeenCalledWith(
       mockUser.uuid,
       { defaultLocale: 'en' },

diff --git a/packages/apps/esm-primary-navigation-app/translations/am.json b/packages/apps/esm-primary-navigation-app/translations/am.json
@@ -2,7 +2,7 @@
   "apply": "Apply",
   "cancel": "Cancel",
   "change": "Change",
-  "changeLanguage": "Change Language",
+  "changeLanguage": "Change language",
   "notifications": "Notifications",
   "userMenuTooltip": "User"
 }
diff --git a/packages/apps/esm-primary-navigation-app/translations/ar.json b/packages/apps/esm-primary-navigation-app/translations/ar.json
@@ -2,7 +2,7 @@
   "apply": "Apply",
   "cancel": "Cancel",
   "change": "تغيير",
-  "changeLanguage": "Change Language",
+  "changeLanguage": "Change language",
   "notifications": "الإشعارات",
   "userMenuTooltip": "User"
 }
diff --git a/packages/apps/esm-primary-navigation-app/translations/en.json b/packages/apps/esm-primary-navigation-app/translations/en.json
@@ -1,8 +1,8 @@
 {
-  "apply": "Apply",
   "cancel": "Cancel",
   "change": "Change",
-  "changeLanguage": "Change Language",
+  "changeLanguage": "Change language",
+  "changingLanguage": "Changing language",
   "notifications": "Notifications",
   "userMenuTooltip": "User"
 }
diff --git a/packages/apps/esm-primary-navigation-app/translations/he.json b/packages/apps/esm-primary-navigation-app/translations/he.json
@@ -2,7 +2,7 @@
   "apply": "אישור",
   "cancel": "Cancel",
   "change": "שינוי",
-  "changeLanguage": "Change Language",
+  "changeLanguage": "Change language",
   "notifications": "התראות",
   "userMenuTooltip": "User"
 }
diff --git a/packages/apps/esm-primary-navigation-app/translations/km.json b/packages/apps/esm-primary-navigation-app/translations/km.json
@@ -2,7 +2,7 @@
   "apply": "បញ្ជាក់",
   "cancel": "Cancel",
   "change": "ផ្លាស់ប្តូរ",
-  "changeLanguage": "Change Language",
+  "changeLanguage": "Change language",
   "notifications": "ការជូនដំណឹង",
   "userMenuTooltip": "User"
 }