Arjun | add Tx for next UI components (#1007)

* addd. tx for next ui components * fix. test fixes * add. localisation for provider view text in OT * fix. tests for all micro-frontend components * refactor. tests and add ability to add translations through config * add. missing internationalisation
Bahmni · Oct 8, 2024 · e84c014 · e84c014
1 parent f9efc51
commit e84c014
Show file tree

Hide file tree

Showing 22 changed files with 239 additions and 108 deletions.
diff --git a/micro-frontends/public/i18n/locale_en.json b/micro-frontends/public/i18n/locale_en.json
@@ -18,5 +18,14 @@
  "EDIT_FORM_ERROR_MESSAGE": "Please enter a value in the mandatory fields or correct the value in the highlighted fields to proceed",
  "ACKNOWLEDGEMENT":"Acknowledge",
  "ENTER_NOTES": "Enter Notes",
- "NOTE": "Note"
+ "NOTE": "Note",
+ "ALLERGY_SAVED_SUCCESS":"Allergy saved successfully",
+ "ERROR_SAVING_ALLERGY":"Error saving allergy",
+ "ACKNOWLEDGEMENT_REQUIRED_TEXT": "Acknowledgement required",
+ "MALE":"Male",
+ "FEMALE": "Female",
+ "OTHER": "Other",
+ "ADDITIONAL_COMMENT_ALLERGY": "Additional comments such as onset date etc.",
+ "ALLERGEN_SEARCH_PLACEHOLDER": "Type to search Allergen",
+ "OK_KEY": "OK"
 }
diff --git a/micro-frontends/public/i18n/locale_fr.json b/micro-frontends/public/i18n/locale_fr.json
@@ -1,22 +1,32 @@
 {
- "NO_FORM": "Aucun formulaire trouvé pour ce patient....",
- "DASHBOARD_TITLE_FORMS_2_DISPLAY_CONTROL_KEY": "Formulaires d'observations",
- "LOADING_MESSAGE": "Chargement... Veuillez patienter",
- "NO_ALLERGIES": "Aucune allergie enregistrée pour ce patient.",
- "BACK_TO_ALLERGEN": "Retour à Allergies",
- "ALLERGIES_HEADING": "Allergies et réactions",
- "ALLERGIES_DISPLAY_CONTROL_HEADING": "Allergies",
- "SEVERITY": "Gravité",
- "SAVE": "Sauvegarder",
- "CANCEL": "Annuler",
- "NO_ALLERGENS_FOUND": "Aucun allergène trouvé",
- "SEARCH_ALLERGEN": "Rechercher un allergène",
- "REACTIONS": "Réaction(s)",
- "SEARCH_REACTION": "Réaction à la recherche",
- "COMMON_REACTIONS": "Réactions courantes",
- "ALLERGEN": "Allergène",
- "EDIT_FORM_ERROR_MESSAGE": "Veuillez saisir une valeur dans les champs obligatoires ou corriger la valeur dans les champs en surbrillance pour continuer",
- "ACKNOWLEDGEMENT": "Reconnaître",
- "ENTER_NOTES": "Saisir des notes",
- "NOTE": "Note"
+ "NO_FORM": "Aucun formulaire trouvé pour ce patient....",
+ "DASHBOARD_TITLE_FORMS_2_DISPLAY_CONTROL_KEY": "Formulaires d'observations",
+ "LOADING_MESSAGE": "Chargement... Veuillez patienter",
+ "NO_ALLERGIES": "Aucune allergie enregistrée pour ce patient.",
+ "BACK_TO_ALLERGEN": "Retour à Allergies",
+ "ALLERGIES_HEADING": "Allergies et réactions",
+ "ALLERGIES_DISPLAY_CONTROL_HEADING": "Allergies",
+ "SEVERITY": "Gravité",
+ "SAVE": "Sauvegarder",
+ "CANCEL": "Annuler",
+ "NO_ALLERGENS_FOUND": "Aucun allergène trouvé",
+ "SEARCH_ALLERGEN": "Rechercher un allergène",
+ "REACTIONS": "Réaction(s)",
+ "SEARCH_REACTION": "Réaction à la recherche",
+ "COMMON_REACTIONS": "Réactions courantes",
+ "ALLERGEN": "Allergène",
+ "EDIT_FORM_ERROR_MESSAGE": "Veuillez saisir une valeur dans les champs obligatoires ou corriger la valeur dans les champs en surbrillance pour continuer",
+ "ACKNOWLEDGEMENT": "Reconnaître",
+ "ENTER_NOTES": "Saisir des notes",
+ "NOTE": "Note",
+ "ALLERGY_SAVED_SUCCESS": "Allergie enregistrée avec succès",
+ "ERROR_SAVING_ALLERGY": "Erreur lors de l'enregistrement de l'allergie",
+ "ACKNOWLEDGEMENT_REQUIRED_TEXT": "Accusé de réception requis",
+ "MALE": "Homme",
+ "FEMALE": "Femme",
+ "OTHER": "Autre",
+ "ADDITIONAL_COMMENT_ALLERGY": "Commentaires supplémentaires tels que la date d'apparition, etc.",
+ "ALLERGEN_SEARCH_PLACEHOLDER": "Saisissez pour rechercher un allergène",
+ "ADD_BUTTON_TEXT": "Ajouter +",
+ "OK_KEY": "D'ACCORD"
 }
diff --git a/micro-frontends/src/next-ui/Components/AddAllergy/AddAllergy.jsx b/micro-frontends/src/next-ui/Components/AddAllergy/AddAllergy.jsx
@@ -11,7 +11,7 @@ import {
  RadioButtonGroup,
  TextArea,
 } from "carbon-components-react";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { ArrowLeft } from "@carbon/icons-react/next";
 import { SelectReactions } from "../SelectReactions/SelectReactions";
 import { bahmniEncounter, getEncounterType } from "../../utils/PatientAllergiesControl/AllergyControlUtils";
@@ -23,6 +23,7 @@ export function AddAllergy(props) {
  const [reactions, setReactions] = React.useState([]);
  const [severity, setSeverity] = React.useState("");
  const [notes, setNotes] = React.useState("");
+ const intl = useIntl();
  const backToAllergenText = (
  <FormattedMessage
  id={"BACK_TO_ALLERGEN"}
@@ -35,6 +36,9 @@ export function AddAllergy(props) {
  defaultMessage={"Allergies and Reactions"}
  />
  );
+ const additionalComments = (
+ intl.formatMessage({ id: "ADDITIONAL_COMMENT_ALLERGY", defaultMessage: "Additional comments such as onset date etc."})
+ );
  const [isSaveEnabled, setIsSaveEnabled] = React.useState(false);
  const [isSaveSuccess, setIsSaveSuccess] = React.useState(null);
  const [error, setError] = React.useState(null);
@@ -121,7 +125,10 @@ export function AddAllergy(props) {
  <span className={"red-text"}>&nbsp;*</span>
  </div>
  <RadioButtonGroup
- name={"severity"}
+ name={<FormattedMessage
+ id={"SEVERITY"}
+ defaultMessage={"Severity"}
+ />}
  key={"Severity"}
  onChange={(e) => {
  setSeverity(e);
@@ -131,15 +138,17 @@ export function AddAllergy(props) {
  {severityOptions.map((option) => {
  return (
  <RadioButton
+ key={option.uuid}
  labelText={option.name}
  value={option.uuid}
  ></RadioButton>
  );
  })}
  </RadioButtonGroup>
  <TextArea
+ data-testid={"additional-comments"}
  labelText={""}
- placeholder={"Additional comments such as onset date etc."}
+ placeholder={additionalComments}
  onBlur={(e) => {
  setNotes(e.target.value);
  }}

diff --git a/micro-frontends/src/next-ui/Components/AddAllergy/AddAllergy.spec.jsx b/micro-frontends/src/next-ui/Components/AddAllergy/AddAllergy.spec.jsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
+import { render, fireEvent, screen, getByTestId, waitFor } from "@testing-library/react";
 import { AddAllergy } from "./AddAllergy";
+import { IntlProvider } from "react-intl";
 
 const mockAllergensData = [
  { name: "Eggs", kind: "Food", uuid: "162301AAAAAA" },
@@ -21,17 +22,17 @@ const mockReactionsData = {
 };
 
 const mockSeverityData = [
-  { name: "Mild", uuid: "162301AAAAAA" },
-  { name: "Moderate", uuid: "162302AAAAAA" },
-  { name: "Severe", uuid: "162303AAAAAA" },
+ { name: "Mild", uuid: "162301AAAAAA" },
+ { name: "Moderate", uuid: "162302AAAAAA" },
+ { name: "Severe", uuid: "162303AAAAAA" },
 ]
 const patient = {
-  uuid: "patient#1",
-  name: "demo"
+ uuid: "patient#1",
+ name: "demo"
 }
 const provider = {
-  uuid: "provider#1",
-  name: "demo provider"
+ uuid: "provider#1",
+ name: "demo provider"
 }
 
 describe("AddAllergy", () => {
@@ -58,6 +59,7 @@ describe("AddAllergy", () => {
  };
  it("should render the component", () => {
  const { container } = render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -67,12 +69,14 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
  expect(container).toMatchSnapshot();
  });
 
  it("should call onClose when close button is clicked", () => {
  const { container } = render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -82,13 +86,15 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
  fireEvent.click(container.querySelector(".close"));
  expect(onClose).toHaveBeenCalledTimes(1);
  });
 
  it("should show Search Allergen when allergen is empty", () => {
  const { getByTestId } = render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -98,12 +104,14 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
  expect(getByTestId("search-allergen")).not.toBeNull();
  });
 
  it("should show Allergen List when Search is done", () => {
  render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -113,6 +121,7 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
  searchAllergen();
  expect(screen.getByText("Peanuts")).not.toBeNull();
@@ -121,6 +130,7 @@ describe("AddAllergy", () => {
 
  it("should show select reactions when allergen is selected", () => {
  render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -130,6 +140,7 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
  searchAllergen();
  expect(screen.getByTestId("search-allergen")).not.toBeNull();
@@ -144,6 +155,7 @@ describe("AddAllergy", () => {
 
  it("should show search Allergen ocClick of back button", () => {
  render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -153,6 +165,7 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
  searchAllergen();
  selectAllergen();
@@ -165,15 +178,17 @@ describe("AddAllergy", () => {
 
  it("should render severity after allergen is selected", () => {
  render(
- <AddAllergy
- onClose={onClose}
- onSave={onSave}
- patient={patient}
- provider={provider}
- severityOptions={mockSeverityData}
- allergens={mockAllergensData}
- reaction={mockReactionsData}
- />
+ <IntlProvider locale="en">
+ <AddAllergy
+ onClose={onClose}
+ onSave={onSave}
+ patient={patient}
+ provider={provider}
+ severityOptions={mockSeverityData}
+ allergens={mockAllergensData}
+ reaction={mockReactionsData}
+ />
+ </IntlProvider>
  );
  searchAllergen();
 
@@ -185,15 +200,17 @@ describe("AddAllergy", () => {
 
  it("should enable save button when reactions and severity are selected", () => {
  const { container } = render(
- <AddAllergy
- onClose={onClose}
- onSave={onSave}
- patient={patient}
- provider={provider}
- severityOptions={mockSeverityData}
- allergens={mockAllergensData}
- reaction={mockReactionsData}
- />
+ <IntlProvider locale="en">
+ <AddAllergy
+ onClose={onClose}
+ onSave={onSave}
+ patient={patient}
+ provider={provider}
+ severityOptions={mockSeverityData}
+ allergens={mockAllergensData}
+ reaction={mockReactionsData}
+ />
+ </IntlProvider>
  );
  searchAllergen();
  selectAllergen();
@@ -206,6 +223,7 @@ describe("AddAllergy", () => {
 
  it("should update severity when severity is changed", () => {
  const { container } = render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -215,14 +233,16 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
  searchAllergen();
  selectAllergen();
  selectSeverity(container);
  });
 
- it("should render notes", () => {
- const { container } = render(
+ it("should render the textarea with the correct placeholder", async () => {
+ const { container, getByTestId } = render(
+ <IntlProvider locale="en">
  <AddAllergy
  onClose={onClose}
  onSave={onSave}
@@ -232,11 +252,17 @@ describe("AddAllergy", () => {
  allergens={mockAllergensData}
  reaction={mockReactionsData}
  />
+ </IntlProvider>
  );
+
+ await waitFor(() => {
+ expect(screen.getByText("Save").getAttribute("disabled")).not.toBeNull();
+ });
+
  searchAllergen();
  selectAllergen();
 
- const textArea = container.querySelector(".bx--text-area");
+ const textArea = getByTestId("additional-comments");
  expect(textArea.placeholder).toBe(
  "Additional comments such as onset date etc."
  );

diff --git a/micro-frontends/src/next-ui/Components/EditObservationForm/EditObservationForm.jsx b/micro-frontends/src/next-ui/Components/EditObservationForm/EditObservationForm.jsx
@@ -135,7 +135,10 @@ EditObservationForm.propTypes = {
  encounterUuid: PropTypes.string.isRequired,
  consultationMapper: PropTypes.object.isRequired,
  handleSave: PropTypes.func.isRequired,
- handleSaveError: PropTypes.func.isRequired
+ handleSaveError: PropTypes.func.isRequired,
+ handleEditSave: PropTypes.func.isRequired,
+ editErrorMessage: PropTypes.string.isRequired,
+ setEditFormLoading: PropTypes.func.isRequired
 };
 
 export default EditObservationForm;
diff --git a/micro-frontends/src/next-ui/Components/ErrorNotification/ErrorNotification.jsx b/micro-frontends/src/next-ui/Components/ErrorNotification/ErrorNotification.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import "./ErrorNotification.scss";
 import { I18nProvider } from '../i18n/I18nProvider';
 import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
 
 const ErrorNotification = ({setEditError, editErrorMessage}) => {
  const errorMessage = editErrorMessage ? editErrorMessage : <FormattedMessage
@@ -16,12 +17,17 @@ const ErrorNotification = ({setEditError, editErrorMessage}) => {
  {errorMessage}
  </div>
  <div class="button-wrapper">
- <button type="button" onClick={()=>{setEditError(false)}} class="show-btn">OK</button>
+ <button type="button" onClick={()=>{setEditError(false)}} class="show-btn"><FormattedMessage id={"OK_KEY"} defaultMessage='OK'/></button>
  </div>
  </div>
  </div>
  </I18nProvider>
  )
 }
 
+ErrorNotification.propTypes = {
+ setEditError: PropTypes.func,
+ editErrorMessage: PropTypes.string
+}
+
 export default ErrorNotification;