A-1208458330960841 | Translation capabilities for Lab Entry module (#69)

* Arjun | add. translations for lab components

* add. capability to add translations for lab application

* fix. remaining translations and add locales for all values

* Fix. tests and translation issues - [WIP: translation for Table headers]

* add. translations for headers

* add. translations for headers

.github/workflows/build_publish.yml

@@ -5,6 +5,7 @@ on:
     branches: 
       - main
       - 'release-*'
+      - 'Bahmni-IPD-master'
     tags:
       - '[0-9]+.[0-9]+.[0-9]+'
 
@@ -22,10 +23,10 @@ jobs:
           wget -q https://raw.githubusercontent.com/Bahmni/bahmni-infra-utils/main/setArtifactVersion.sh && chmod +x setArtifactVersion.sh
           ./setArtifactVersion.sh
           rm setArtifactVersion.sh
-      - name: Setup Node.js 16.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: "16.x"
+          node-version: "18.x"
       - run: yarn install
       - run: yarn build:appshell
       - run: yarn lint
@@ -49,7 +50,7 @@ jobs:
           platforms: linux/amd64,linux/arm64
           file: package/docker/Dockerfile
           push: true
-          tags: bahmni/bahmni-lab:${{env.ARTIFACT_VERSION}},bahmni/bahmni-lab:latest
+          tags: bahmni/bahmni-lab:${{env.ARTIFACT_VERSION}},bahmni/bahmni-lab:ipd
       - name: Helm - Update Version and Image Tag
         run: |
           yq --inplace '.image.tag = "${{ env.ARTIFACT_VERSION }}"' $HELM_CHART_PATH/values.yaml

.github/workflows/pull_request.yml

@@ -2,7 +2,7 @@ name: Pull Reqeust
 
 on:
   pull_request:
-    branches: [ main ]
+    branches: [ Bahmni-IPD-master ]
     types: [opened, synchronize, reopened]
 
 jobs:
@@ -11,10 +11,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Setup Node.js 16.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v1
         with:
-          node-version: "16.x"
+          node-version: "18.x"
       - run: yarn install
       - run: yarn lint
       - run: yarn typescript

package.json

@@ -16,7 +16,7 @@
     "serve": "webpack serve --mode=development",
     "debug": "npm run serve",
     "build": "npx webpack --mode production",
-    "build:dist": "cp -R omrs-app-shell/* dist/ && rm -rf omrs-app-shell/", 
+    "build:dist": "cp -R omrs-app-shell/* dist/ && rm -rf omrs-app-shell/",
     "analyze": "webpack --mode=production --env.analyze=true",
     "lint": "eslint src --ext tsx",
     "prettier": "prettier --config prettier.config.js --write \"src/**/*.{ts,tsx}\"",
@@ -25,7 +25,8 @@
     "test": "jest --config jest.config.json --verbose false --passWithNoTests",
     "test:watch": "jest --config jest.config.json  --verbose false --passWithNoTests --watch",
     "coverage": "npm test -- --coverage",
-    "badges": "npm run coverage && jest-coverage-badges --output './badges' "
+    "badges": "npm run coverage && jest-coverage-badges --output './badges' ",
+    "extract-translations": "i18next 'src/**/*.{js,jsx,ts,tsx}' -c tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -70,7 +71,6 @@
   "devDependencies": {
     "@openmrs/esm-framework": "3.4.1-pre.189",
     "@openmrs/esm-patient-common-lib": "3.2.1-pre.217",
-    "openmrs": "3.4.1-pre.189",
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.2.165",
     "@swc/jest": "^0.2.20",
@@ -106,6 +106,7 @@
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "husky": "^3.0.4",
     "i18next": "^19.4.2",
+    "i18next-parser": "^9.0.2",
     "identity-obj-proxy": "^3.0.0",
     "istanbul-badges-readme": "^1.4.0",
     "jest": "^26.4.2",
@@ -114,10 +115,11 @@
     "jest-watch-typeahead": "^0.6.5",
     "jest-when": "^3.5.0",
     "node-sass": "^6.0.1",
+    "openmrs": "3.4.1-pre.189",
     "prettier": "^1.18.2",
     "pretty-quick": "^1.11.1",
     "react": "^16.9.0",
-    "react-cookie" :"^4.1.1",
+    "react-cookie": "^4.1.1",
     "react-dom": "^16.9.0",
     "react-i18next": "^11.3.4",
     "react-router": "^5.0.1",

src/__mocks__/translations.mock.ts

@@ -0,0 +1,55 @@
+export const translations = {
+  ABNORMAL_TEXT: 'Abnormal',
+  ADD_FILES_MESSAGE: 'Drag and drop files here or click to upload',
+  ALLOWED_FILE_TYPES: 'Allowed file extensions: pdf, jpeg, jpg',
+  AVAILABLE_TESTS_LABEL: 'Available Tests',
+  CLEAR_FILTER_TEXT: 'Clear Filter',
+  DISCARD_LABEL: 'Discard',
+  DOCTOR_LIST: 'doctor list',
+  DOCTOR_NAME_ERROR: 'Something went wrong in fetching Doctor Names...',
+  DUPLICATE_ORDER_SUBTITLE:
+    'You have selected duplicate orders. Please select unique orders.',
+  DUPLICATE_ORDER_TITLE: 'Duplicate Order',
+  ENTER_TEST_RESULTS_TEXT: 'Enter Test Results',
+  ENTER_VALUE_KEY: 'Enter Value',
+  ERROR_MESSAGE_PRETEXT: 'Something went wrong:',
+  FILE_FORMAT_ERROR: 'Only files with following extension allowed: pdf, jpg',
+  FILE_SIZE_ERROR: 'File size exceeds max limit (5mb)',
+  HOME_BUTTON_LABEL: 'Home',
+  HOME_PAGE_SUBTITLE: 'Please click on the search icon above to get started',
+  HOME_PAGE_TITLE: 'WELCOME TO LAB ENTRY',
+  INVALID_DATA_ENTERED: 'Please enter valid data',
+  ITEMS_MATCHING_TEXT: 'items matching',
+  LAB_TEST_FETCH_ERROR: 'Something went wrong in fetching Lab Tests',
+  loading: 'Loading',
+  LOGO_ALT_TEXT: 'Bahmni logo',
+  MAX_FILE_SIZE_MESSAGE: 'Maximum File size allowed: 5MB',
+  NO_REPORTS_FOUND_TEXT: 'No previous reports found for this patient',
+  NO_TEST_SELECTED: 'You have not selected any tests',
+  PANEL_LABEL: 'Panel',
+  PENDING_LAB_ORDERS_ERROR:
+    'Something went wrong in fetching pending lab orders...',
+  PENDING_LAB_ORDERS_TEXT: 'Pending Lab Orders',
+  RECORD_CLINICAL_CONCLUSION_KEY: 'Click to record clinical conclusion',
+  REPORT_CONCLUSION_KEY: 'Report Conclusion',
+  REPORTS_ANDLAB_TESTS_FETCH_ERROR:
+    'Something went wrong in fetching Report tables or Lab Tests...',
+  REPORTS_TABLE_TEXT: 'Reports table',
+  REQUESTED_BY: 'Requested by',
+  SAVE_AND_UPLOAD_LABEL: 'Save and Upload',
+  SEARCH_LABEL: 'Search',
+  SEARCH_TEST_PLACEHOLDER: 'Search by lab test name',
+  SELECT_ANSWER: 'Select an answer',
+  SELECT_DOCTOR: 'Select a Doctor',
+  SELECT_TESTS_LABEL: 'Select Tests',
+  SELECTED_TESTS_LABEL: 'Selected Tests',
+  UPLOAD_REPORT_TEXT: 'Upload Report',
+  REPORT_DATE_LABEL: 'Report date',
+  DATE_LABEL: 'Date',
+  TEST_LABEL: 'Test',
+  ORDERED_BY_LABEL: 'Ordered By',
+  ORDER_NOTES_LABEL: 'Order Notes',
+  TESTS_LABEL: 'Tests',
+  FILE_LABEL: 'File',
+  REQUESTER_LABEL: 'Requester',
+}

src/home-button/home-button.test.tsx

@@ -1,7 +1,16 @@
-import { render, screen } from '@testing-library/react'
+import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import HomeButton from './home-button'
+import {translations} from '../__mocks__/translations.mock'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: key => {
+      return translations[key] || key
+    },
+  }),
+}))
 
 describe('home button', () => {
   beforeEach(() => {
@@ -31,5 +40,4 @@ describe('home button', () => {
     userEvent.click(screen.getByLabelText('Home'))
     expect(window.location.href).toEqual('/bahmni/home')
   })
-
 })

src/home-button/home-button.tsx

@@ -3,11 +3,13 @@ import {HeaderGlobalAction} from 'carbon-components-react'
 import React from 'react'
 import {bahmniHomePath} from '../utils/constants'
 import styles from './home-button.scss'
+import {useTranslation} from 'react-i18next'
 
 const HomeButton = () => {
+  const {t} = useTranslation()
   return (
     <HeaderGlobalAction
-      aria-label="Home"
+      aria-label={t('HOME_BUTTON_LABEL', 'Home')}
       className={styles.headerGlobalBarButton}
       onClick={() => {
         window.location.href = bahmniHomePath

src/home/home.test.tsx

@@ -1,27 +1,36 @@
-import { openmrsFetch } from '@openmrs/esm-framework'
-import { render, screen, waitFor } from '@testing-library/react'
+import {openmrsFetch} from '@openmrs/esm-framework'
+import {render, screen, waitFor} from '@testing-library/react'
 import React from 'react'
-import { of } from 'rxjs'
-import { SWRConfig } from 'swr'
+import {of} from 'rxjs'
+import {SWRConfig} from 'swr'
 import {
   auditLogGlobalPropertyURL,
   auditLogURL,
-  getPayloadForUserLogin
+  getPayloadForUserLogin,
 } from '../utils/api-utils'
-import { verifyApiCall } from '../utils/test-utils'
-import { mockUser } from '../__mocks__/mockUser'
+import {verifyApiCall} from '../utils/test-utils'
+import {mockUser} from '../__mocks__/mockUser'
 import Home from './home'
+import {translations} from '../__mocks__/translations.mock'
 
 const mockUserObservable = of(mockUser)
 jest.mock('@openmrs/esm-framework', () => ({
   openmrsFetch: jest.fn().mockResolvedValue({}),
   getCurrentUser: jest.fn(() => mockUserObservable),
   subscribeConnectivity: jest.fn(),
 }))
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: key => {
+      return translations[key] || key
+    },
+  }),
+}))
+
 describe('home page', () => {
   let mockedOpenmrsFetch = openmrsFetch as jest.Mock
-  mockedOpenmrsFetch
-    .mockReturnValueOnce({data: true})
+  mockedOpenmrsFetch.mockReturnValueOnce({data: true})
   it('should show home page', () => {
     render(
       <SWRConfig value={{provider: () => new Map()}}>
@@ -45,8 +54,7 @@ describe('home page - Auditing', () => {
   })
 
   it('should update audit logs when user enters lab lite', async () => {
-    mockedOpenmrsFetch
-      .mockReturnValueOnce({data: true})
+    mockedOpenmrsFetch.mockReturnValueOnce({data: true})
 
     render(
       <SWRConfig value={{provider: () => new Map()}}>
@@ -62,8 +70,7 @@ describe('home page - Auditing', () => {
   })
 
   it('should not update audit logs when audit log property is disabled', async () => {
-    mockedOpenmrsFetch
-      .mockReturnValueOnce({data: false})
+    mockedOpenmrsFetch.mockReturnValueOnce({data: false})
 
     render(
       <SWRConfig value={{provider: () => new Map()}}>

src/home/home.tsx

@@ -12,10 +12,13 @@ import {
 } from '../utils/api-utils'
 import {isAuditLogEnabledKey, loggedInUserKey} from '../utils/constants'
 import classes from './home.scss'
+import {useTranslation} from 'react-i18next'
+
 interface AuditLogResponse {
   data: boolean
 }
 const Home = () => {
+  const {t} = useTranslation()
   const [loggedInUser, setLoggedInUser] = useState<LoggedInUser | null>(null)
 
   let {data: auditLogEnabledResponse, error: auditLogResponseError} = useSWR<
@@ -43,11 +46,16 @@ const Home = () => {
   return (
     <div className={classes.homeContainer}>
       <div className={classes.image}>
-        <img src={BahmniLogo} alt="Bahmni Logo" />
+        <img src={BahmniLogo} alt={t('LOGO_ALT_TEXT', 'Bahmni Logo')} />
       </div>
-      <h1 className={classes.welcomeText}>WELCOME TO LAB ENTRY</h1>
+      <h1 className={classes.welcomeText}>
+        {t('HOME_PAGE_TITLE', 'WELCOME TO LAB ENTRY')}
+      </h1>
       <span className={classes.helpText}>
-        Please click on the search icon above to get started
+        {t(
+          'HOME_PAGE_SUBTITLE',
+          'Please click on the search icon above to get started',
+        )}
       </span>
     </div>
   )

src/hooks/useOrderTypeUuidConfig.ts

@@ -3,8 +3,7 @@ import useSWR from 'swr'
 import createPersistedState from 'use-persisted-state'
 import {orderTypeUuidKey, labOrderType} from '../utils/constants'
 import {OrderTypeFetchResponse, OrderType} from '../types'
-import {getOrderTypeUuid} from '../utils/api-utils'
-import {fetcher} from '../utils/api-utils'
+import {getOrderTypeUuid, fetcher} from '../utils/api-utils'
 const useOrderTypeUuidConfigState = createPersistedState<string>(
   orderTypeUuidKey,
 )

src/i18n.js

@@ -0,0 +1,41 @@
+import i18n from 'i18next'
+import {initReactI18next} from 'react-i18next'
+import enTranslations from '../translations/en.json'
+import frTranslations from '../translations/fr.json'
+import esTranslations from '../translations/es.json'
+import itTranslations from '../translations/it.json'
+import pt_BRTranslations from '../translations/pt_BR.json'
+
+const getLanguage = () => {
+  const language = localStorage.getItem('i18nextLng')
+  return language || 'en'
+}
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translations: enTranslations,
+    },
+    fr: {
+      translations: frTranslations,
+    },
+    es: {
+      translations: esTranslations,
+    },
+    it: {
+      translations: itTranslations,
+    },
+    pt_BR: {
+      translations: pt_BRTranslations,
+    },
+  },
+  lng: getLanguage(),
+  fallbackLng: 'en',
+  ns: ['translations'],
+  defaultNS: 'translations',
+  interpolation: {
+    escapeValue: false,
+  },
+})
+
+export default i18n

src/index.ts

@@ -44,10 +44,13 @@ function setupOpenMRS() {
     pages: [
       {
         route: /^[A-Za-z0-9-]+/,
-        load: getAsyncLifecycle(() => import('./patient-lab-dashboard/patient-lab-root.component'), {
-          featureName: 'patient-lab-root',
-          moduleName: labliteModuleName,
-        }),
+        load: getAsyncLifecycle(
+          () => import('./patient-lab-dashboard/patient-lab-root.component'),
+          {
+            featureName: 'patient-lab-root',
+            moduleName: labliteModuleName,
+          },
+        ),
       },
     ],
     extensions: [

src/patient-lab-dashboard/doctors-list-dropdown/doctor-list-dropdown.test.tsx

@@ -11,6 +11,15 @@ import {
   mockDoctorsListErrorResponse,
 } from '../../__mocks__/doctorNames.mock'
 import DoctorListDropdown from './doctor-list-dropdown'
+import {translations} from '../../__mocks__/translations.mock'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: key => {
+      return translations[key] || key
+    },
+  }),
+}))
 
 const mockedOpenmrsFetch = openmrsFetch as jest.Mock
 describe('upload file', () => {