@openmrs/esm-form-engine-lib 3.0.0-pre.1616 → 3.0.0-pre.1621

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "3.0.0-pre.1616",
+  "version": "3.0.0-pre.1621",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",
@@ -74,7 +74,7 @@
     "fork-ts-checker-webpack-plugin": "^6.5.3",
     "husky": "^8.0.3",
     "i18next": "^23.11.4",
-    "i18next-parser": "^8.13.0",
+    "i18next-parser": "^9.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",

package/src/components/inputs/content-switcher/content-switcher.component.tsx

@@ -60,7 +60,12 @@ const ContentSwitcher: React.FC<FormFieldInputProps> = ({ field, value, errors,
           className={styles.selectedOption}
           size="md">
           {field.questionOptions.answers.map((option, index) => (
-            <Switch name={option.concept || option.value} text={option.label} key={index} disabled={field.isDisabled} />
+            <Switch
+              name={option.concept || option.value}
+              text={t(option.label)}
+              key={index}
+              disabled={field.isDisabled}
+            />
           ))}
         </CdsContentSwitcher>
       </FormGroup>

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -22,7 +22,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
     .map((answer, index) => ({
       id: `${field.id}-${answer.concept}`,
       concept: answer.concept,
-      label: answer.label,
+      label: t(answer.label),
       key: index,
       disabled: answer.disable?.isDisabled,
       readonly: isTrue(field.readonly),
@@ -97,14 +97,14 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
           <Layer>
             {isSearchable ? (
               <FilterableMultiSelect
+                id={field.id}
+                key={field.id}
                 placeholder={t('search', 'Search') + '...'}
                 onChange={handleSelectItemsChange}
-                id={t(field.label)}
                 items={selectOptions}
                 initialSelectedItems={initiallySelectedQuestionItems}
                 label={''}
                 titleText={label}
-                key={field.id}
                 itemToString={(item) => (item ? item.label : ' ')}
                 disabled={field.isDisabled}
                 invalid={errors.length > 0}
@@ -120,7 +120,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                     <Checkbox
                       key={`${field.id}-${value.concept}`}
                       className={styles.checkbox}
-                      labelText={value.label}
+                      labelText={t(value.label)}
                       id={`${field.id}-${value.concept}`}
                       onChange={() => {
                         handleSelectCheckbox(value);

package/src/components/inputs/radio/radio.component.tsx

@@ -50,7 +50,7 @@ const Radio: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings,
               return (
                 <RadioButton
                   id={`${field.id}-${answer.label}`}
-                  labelText={answer.label ?? ''}
+                  labelText={t(answer.label) ?? ''}
                   value={answer.concept}
                   key={index}
                   onClick={(e) => {

package/src/components/inputs/select/dropdown.component.tsx

@@ -27,9 +27,9 @@ const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
       let answer = field.questionOptions.answers.find((opt) => {
         return opt.value ? opt.value == item : opt.concept == item;
       });
-      return answer?.label;
+      return answer ? t(answer.label) : '';
     },
-    [field.questionOptions.answers],
+    [field.questionOptions.answers, t],
   );
 
   const items = useMemo(() => {

package/src/components/inputs/workspace-launcher/workspace-launcher.component.tsx

@@ -28,7 +28,9 @@ const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
       <div>
         <div className={styles.label}>{t(field.label)}</div>
         <div className={styles.workspaceButton}>
-          <Button disabled={isTrue(field.readonly)}  onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
+          <Button disabled={isTrue(field.readonly)} onClick={handleLaunchWorkspace}>
+            {t(field.questionOptions?.buttonLabel) ?? t('launchWorkspace', 'Launch Workspace')}
+          </Button>
         </div>
       </div>
     )

package/src/components/value/value.component.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import styles from './value.scss';
+import { useTranslation } from 'react-i18next';
 
 export const ValueEmpty = () => {
+  const { t } = useTranslation();
+
   return (
     <div>
-      <span className={styles.empty}>(Blank)</span>
+      <span className={styles.empty}>({t('blank', 'Blank')})</span>
     </div>
   );
 };

package/translations/en.json

@@ -2,6 +2,7 @@
   "add": "Add",
   "addCameraImage": "Add camera image",
   "addFile": "Add files",
+  "blank": "Blank",
   "cameraCapture": "Camera capture",
   "cancel": "Cancel",
   "chooseAnOption": "Choose an option",
@@ -17,7 +18,7 @@
   "fileUploadDescriptionAny": "Upload any file type",
   "invalidWorkspaceName": "Invalid workspace name.",
   "invalidWorkspaceNameSubtitle": "Please provide a valid workspace name.",
-  "launchWorkspace": "",
+  "launchWorkspace": "Launch Workspace",
   "loading": "Loading",
   "notification": "Notification",
   "nullMandatoryField": "Please fill the required fields",
@@ -26,13 +27,12 @@
   "remove": "Remove",
   "required": "Required",
   "reuseValue": "Reuse value",
-  "revert": "Revert",
   "save": "Save",
   "search": "Search",
+  "searching": "Searching",
   "submitting": "Submitting",
   "time": "Time",
   "unspecified": "Unspecified",
-  "unspecifyAll": "Unspecify All",
   "upload": "Upload",
   "uploadedPhoto": "Uploaded photo",
   "uploadImage": "Upload image",