@openmrs/esm-react-utils 5.3.3-pre.1237 → 5.3.3-pre.1247

package/src/extensions.test.tsx

@@ -1,12 +1,12 @@
-import React, { useCallback, useReducer } from "react";
-import { act, render, screen, waitFor, within } from "@testing-library/react";
+import React, { useCallback, useReducer } from 'react';
+import { act, render, screen, waitFor, within } from '@testing-library/react';
 import {
   attach,
   ConnectedExtension,
   getExtensionNameFromId,
   registerExtension,
   updateInternalExtensionStore,
-} from "@openmrs/esm-extensions";
+} from '@openmrs/esm-extensions';
 import {
   getSyncLifecycle,
   Extension,
@@ -14,41 +14,32 @@ import {
   openmrsComponentDecorator,
   useExtensionSlotMeta,
   ExtensionData,
-} from ".";
-import userEvent from "@testing-library/user-event";
-import {
-  registerFeatureFlag,
-  setFeatureFlag,
-} from "@openmrs/esm-feature-flags";
+} from '.';
+import userEvent from '@testing-library/user-event';
+import { registerFeatureFlag, setFeatureFlag } from '@openmrs/esm-feature-flags';
 
 // For some reason in the text context `isEqual` always returns true
 // when using the import substitution in jest.config.js. Here's a custom
 // mock.
-jest.mock(
-  "lodash-es/isEqual",
-  () => (a, b) => JSON.stringify(a) == JSON.stringify(b)
-);
+jest.mock('lodash-es/isEqual', () => (a, b) => JSON.stringify(a) == JSON.stringify(b));
 
-describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
+describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
   beforeEach(() => {
     updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
   });
 
-  test("Extension receives state changes passed through (not using <Extension>)", async () => {
+  test('Extension receives state changes passed through (not using <Extension>)', async () => {
     function EnglishExtension({ suffix }) {
       return <div>English{suffix}</div>;
     }
-    registerSimpleExtension("English", "esm-languages-app", EnglishExtension);
-    attach("Box", "English");
+    registerSimpleExtension('English', 'esm-languages-app', EnglishExtension);
+    attach('Box', 'English');
     const App = openmrsComponentDecorator({
-      moduleName: "esm-languages-app",
-      featureName: "Languages",
+      moduleName: 'esm-languages-app',
+      featureName: 'Languages',
       disableTranslations: true,
     })(() => {
-      const [suffix, toggleSuffix] = useReducer(
-        (suffix) => (suffix == "!" ? "?" : "!"),
-        "!"
-      );
+      const [suffix, toggleSuffix] = useReducer((suffix) => (suffix == '!' ? '?' : '!'), '!');
       return (
         <div>
           <ExtensionSlot name="Box" state={{ suffix }} />
@@ -58,35 +49,24 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
     });
     render(<App />);
 
-    await waitFor(() =>
-      expect(screen.getByText(/English/)).toBeInTheDocument()
-    );
-    expect(screen.getByText(/English/)).toHaveTextContent("English!");
-    userEvent.click(screen.getByText("Toggle suffix"));
-    await waitFor(() =>
-      expect(screen.getByText(/English/)).toHaveTextContent("English?")
-    );
+    await waitFor(() => expect(screen.getByText(/English/)).toBeInTheDocument());
+    expect(screen.getByText(/English/)).toHaveTextContent('English!');
+    userEvent.click(screen.getByText('Toggle suffix'));
+    await waitFor(() => expect(screen.getByText(/English/)).toHaveTextContent('English?'));
   });
 
-  test("Extension receives state changes (using <Extension>)", async () => {
+  test('Extension receives state changes (using <Extension>)', async () => {
     function HaitianCreoleExtension({ suffix }) {
       return <div>Haitian Creole{suffix}</div>;
     }
-    registerSimpleExtension(
-      "Haitian",
-      "esm-languages-app",
-      HaitianCreoleExtension
-    );
-    attach("Box", "Haitian");
+    registerSimpleExtension('Haitian', 'esm-languages-app', HaitianCreoleExtension);
+    attach('Box', 'Haitian');
     const App = openmrsComponentDecorator({
-      moduleName: "esm-languages-app",
-      featureName: "Languages",
+      moduleName: 'esm-languages-app',
+      featureName: 'Languages',
       disableTranslations: true,
     })(() => {
-      const [suffix, toggleSuffix] = useReducer(
-        (suffix) => (suffix == "!" ? "?" : "!"),
-        "!"
-      );
+      const [suffix, toggleSuffix] = useReducer((suffix) => (suffix == '!' ? '?' : '!'), '!');
 
       return (
         <div>
@@ -100,52 +80,46 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
     });
     render(<App />);
 
-    await waitFor(() =>
-      expect(screen.getByText(/Haitian/)).toBeInTheDocument()
-    );
-    expect(screen.getByText(/Haitian/)).toHaveTextContent("Haitian Creole!");
-    userEvent.click(screen.getByText("Toggle suffix"));
-    await waitFor(() =>
-      expect(screen.getByText(/Haitian/)).toHaveTextContent("Haitian Creole?")
-    );
+    await waitFor(() => expect(screen.getByText(/Haitian/)).toBeInTheDocument());
+    expect(screen.getByText(/Haitian/)).toHaveTextContent('Haitian Creole!');
+    userEvent.click(screen.getByText('Toggle suffix'));
+    await waitFor(() => expect(screen.getByText(/Haitian/)).toHaveTextContent('Haitian Creole?'));
   });
 
-  test("ExtensionSlot throws error if both state and children provided", () => {
+  test('ExtensionSlot throws error if both state and children provided', () => {
     const App = () => (
-      <ExtensionSlot name="Box" state={{ color: "red" }}>
+      <ExtensionSlot name="Box" state={{ color: 'red' }}>
         <Extension />
       </ExtensionSlot>
     );
     expect(() => render(<App />)).toThrowError(
       expect.objectContaining({
         message: expect.stringMatching(/children.*state/),
-      })
+      }),
     );
   });
 
-  test("Extension Slot receives meta", async () => {
-    registerSimpleExtension("Spanish", "esm-languages-app", undefined, {
-      code: "es",
+  test('Extension Slot receives meta', async () => {
+    registerSimpleExtension('Spanish', 'esm-languages-app', undefined, {
+      code: 'es',
     });
-    attach("Box", "Spanish");
+    attach('Box', 'Spanish');
     const App = openmrsComponentDecorator({
-      moduleName: "esm-languages-app",
-      featureName: "Languages",
+      moduleName: 'esm-languages-app',
+      featureName: 'Languages',
       disableTranslations: true,
     })(() => {
-      const metas = useExtensionSlotMeta("Box");
+      const metas = useExtensionSlotMeta('Box');
       const wrapItem = useCallback(
         (slot: React.ReactNode, extension: ExtensionData) => {
           return (
             <div>
-              <h1>
-                {metas[getExtensionNameFromId(extension.extensionId)].code}
-              </h1>
+              <h1>{metas[getExtensionNameFromId(extension.extensionId)].code}</h1>
               {slot}
             </div>
           );
         },
-        [metas]
+        [metas],
       );
       return (
         <div>
@@ -157,48 +131,36 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
     });
     render(<App />);
 
-    await waitFor(() =>
-      expect(screen.getByRole("heading")).toBeInTheDocument()
-    );
-    expect(screen.getByRole("heading")).toHaveTextContent("es");
-    await waitFor(() =>
-      expect(screen.getByText("Spanish")).toBeInTheDocument()
-    );
+    await waitFor(() => expect(screen.getByRole('heading')).toBeInTheDocument());
+    expect(screen.getByRole('heading')).toHaveTextContent('es');
+    await waitFor(() => expect(screen.getByText('Spanish')).toBeInTheDocument());
   });
 
-  test("Both meta and state can be used at the same time", async () => {
+  test('Both meta and state can be used at the same time', async () => {
     function SwahiliExtension({ suffix }) {
       return <div>Swahili{suffix}</div>;
     }
-    registerSimpleExtension("Swahili", "esm-languages-app", SwahiliExtension, {
-      code: "sw",
+    registerSimpleExtension('Swahili', 'esm-languages-app', SwahiliExtension, {
+      code: 'sw',
     });
-    attach("Box", "Swahili");
+    attach('Box', 'Swahili');
     const App = openmrsComponentDecorator({
-      moduleName: "esm-languages-app",
-      featureName: "Languages",
+      moduleName: 'esm-languages-app',
+      featureName: 'Languages',
       disableTranslations: true,
     })(() => {
-      const [suffix, toggleSuffix] = useReducer(
-        (suffix) => (suffix == "!" ? "?" : "!"),
-        "!"
-      );
-      const metas = useExtensionSlotMeta("Box");
+      const [suffix, toggleSuffix] = useReducer((suffix) => (suffix == '!' ? '?' : '!'), '!');
+      const metas = useExtensionSlotMeta('Box');
       const wrapItem = useCallback(
         (slot: React.ReactNode, extension?: ExtensionData) => {
           return (
             <div>
-              <h1>
-                {
-                  metas[getExtensionNameFromId(extension?.extensionId ?? "")]
-                    .code
-                }
-              </h1>
+              <h1>{metas[getExtensionNameFromId(extension?.extensionId ?? '')].code}</h1>
               {slot}
             </div>
           );
         },
-        [metas]
+        [metas],
       );
       return (
         <div>
@@ -211,31 +173,25 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
     });
     render(<App />);
 
-    await waitFor(() =>
-      expect(screen.getByRole("heading")).toBeInTheDocument()
-    );
-    expect(screen.getByRole("heading")).toHaveTextContent("sw");
-    await waitFor(() =>
-      expect(screen.getByText(/Swahili/)).toHaveTextContent("Swahili!")
-    );
-    userEvent.click(screen.getByText("Toggle suffix"));
-    await waitFor(() =>
-      expect(screen.getByText(/Swahili/)).toHaveTextContent("Swahili?")
-    );
+    await waitFor(() => expect(screen.getByRole('heading')).toBeInTheDocument());
+    expect(screen.getByRole('heading')).toHaveTextContent('sw');
+    await waitFor(() => expect(screen.getByText(/Swahili/)).toHaveTextContent('Swahili!'));
+    userEvent.click(screen.getByText('Toggle suffix'));
+    await waitFor(() => expect(screen.getByText(/Swahili/)).toHaveTextContent('Swahili?'));
   });
 
-  test("Extension Slot renders function children", async () => {
-    registerSimpleExtension("Urdu", "esm-languages-app", undefined, {
-      code: "urd",
+  test('Extension Slot renders function children', async () => {
+    registerSimpleExtension('Urdu', 'esm-languages-app', undefined, {
+      code: 'urd',
     });
-    registerSimpleExtension("Hindi", "esm-languages-app", undefined, {
-      code: "hi",
+    registerSimpleExtension('Hindi', 'esm-languages-app', undefined, {
+      code: 'hi',
     });
-    attach("Box", "Urdu");
-    attach("Box", "Hindi");
+    attach('Box', 'Urdu');
+    attach('Box', 'Hindi');
     const App = openmrsComponentDecorator({
-      moduleName: "esm-languages-app",
-      featureName: "Languages",
+      moduleName: 'esm-languages-app',
+      featureName: 'Languages',
       disableTranslations: true,
     })(() => {
       return (
@@ -253,33 +209,25 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
     });
     render(<App />);
 
-    await waitFor(() => expect(screen.getByTestId("Urdu")).toBeInTheDocument());
-    expect(
-      within(screen.getByTestId("Urdu")).getByRole("heading")
-    ).toHaveTextContent("urd");
-    expect(
-      within(screen.getByTestId("Hindi")).getByRole("heading")
-    ).toHaveTextContent("hi");
+    await waitFor(() => expect(screen.getByTestId('Urdu')).toBeInTheDocument());
+    expect(within(screen.getByTestId('Urdu')).getByRole('heading')).toHaveTextContent('urd');
+    expect(within(screen.getByTestId('Hindi')).getByRole('heading')).toHaveTextContent('hi');
   });
 
-  test("Extension renders with child function", async () => {
-    registerSimpleExtension("Hindi", "esm-languages-app", undefined, {
-      code: "hi",
+  test('Extension renders with child function', async () => {
+    registerSimpleExtension('Hindi', 'esm-languages-app', undefined, {
+      code: 'hi',
     });
-    attach("Box", "Hindi");
+    attach('Box', 'Hindi');
     const App = openmrsComponentDecorator({
-      moduleName: "esm-languages-app",
-      featureName: "Languages",
+      moduleName: 'esm-languages-app',
+      featureName: 'Languages',
       disableTranslations: true,
     })(() => {
       return (
         <div>
           <ExtensionSlot name="Box">
-            {() => (
-              <Extension>
-                {(slot) => <div data-testid="custom-wrapper">{slot}</div>}
-              </Extension>
-            )}
+            {() => <Extension>{(slot) => <div data-testid="custom-wrapper">{slot}</div>}</Extension>}
           </ExtensionSlot>
         </div>
       );
@@ -287,64 +235,37 @@ describe("ExtensionSlot, Extension, and useExtensionSlotMeta", () => {
 
     render(<App />);
 
-    await waitFor(() =>
-      expect(screen.getByTestId("custom-wrapper")).toBeInTheDocument()
-    );
+    await waitFor(() => expect(screen.getByTestId('custom-wrapper')).toBeInTheDocument());
 
     // essentially: is the first child of custom-wrapper the extension?
-    expect(screen.getByTestId("custom-wrapper").children[0]).toHaveAttribute(
-      "data-extension-id",
-      "Hindi"
-    );
+    expect(screen.getByTestId('custom-wrapper').children[0]).toHaveAttribute('data-extension-id', 'Hindi');
   });
 
-  test("Extensions behind feature flags only render when their feature flag is enabled", async () => {
-    registerSimpleExtension("Arabic", "esm-languages-app");
-    registerSimpleExtension(
-      "Turkish",
-      "esm-languages-app",
-      undefined,
-      undefined,
-      "turkic"
-    );
-    registerSimpleExtension(
-      "Turkmeni",
-      "esm-languages-app",
-      undefined,
-      undefined,
-      "turkic"
-    );
-    registerSimpleExtension(
-      "Kurmanji",
-      "esm-languages-app",
-      undefined,
-      undefined,
-      "kurdish"
-    );
-    attach("Box", "Arabic");
-    attach("Box", "Turkish");
-    attach("Box", "Turkmeni");
-    attach("Box", "Kurmanji");
-    registerFeatureFlag("turkic", "", "");
-    registerFeatureFlag("kurdish", "", "");
-    setFeatureFlag("turkic", true);
+  test('Extensions behind feature flags only render when their feature flag is enabled', async () => {
+    registerSimpleExtension('Arabic', 'esm-languages-app');
+    registerSimpleExtension('Turkish', 'esm-languages-app', undefined, undefined, 'turkic');
+    registerSimpleExtension('Turkmeni', 'esm-languages-app', undefined, undefined, 'turkic');
+    registerSimpleExtension('Kurmanji', 'esm-languages-app', undefined, undefined, 'kurdish');
+    attach('Box', 'Arabic');
+    attach('Box', 'Turkish');
+    attach('Box', 'Turkmeni');
+    attach('Box', 'Kurmanji');
+    registerFeatureFlag('turkic', '', '');
+    registerFeatureFlag('kurdish', '', '');
+    setFeatureFlag('turkic', true);
     const App = openmrsComponentDecorator({
-      moduleName: "esm-languages-app",
-      featureName: "Languages",
+      moduleName: 'esm-languages-app',
+      featureName: 'Languages',
       disableTranslations: true,
     })(() => <ExtensionSlot name="Box" />);
     render(<App />);
 
-    await waitFor(() =>
-      expect(screen.getByText(/Turkmeni/)).toBeInTheDocument()
-    );
-    expect(screen.getByText("Arabic")).toBeInTheDocument();
-    expect(screen.getByText("Turkish")).toBeInTheDocument();
-    expect(screen.queryByText("Kurmanji")).not.toBeInTheDocument();
-    act(() => setFeatureFlag("kurdish", true));
-    await waitFor(() =>
-      expect(screen.getByText("Kurmanji")).toBeInTheDocument()
-    );
+    await waitFor(() => expect(screen.getByText(/Turkmeni/)).toBeInTheDocument());
+    expect(screen.getByText('Arabic')).toBeInTheDocument();
+    expect(screen.getByText('Turkish')).toBeInTheDocument();
+    expect(screen.queryByText('Kurmanji')).not.toBeInTheDocument();
+    act(() => setFeatureFlag('kurdish', true));
+    await waitFor(() => expect(screen.getByText('Kurmanji')).toBeInTheDocument());
   });
 });
 
@@ -353,7 +274,7 @@ function registerSimpleExtension(
   moduleName: string,
   Component?: React.ComponentType<any>,
   meta: object = {},
-  featureFlag?: string
+  featureFlag?: string,
 ) {
   const SimpleComponent = () => <div>{name}</div>;
   registerExtension({

package/src/getLifecycle.ts

@@ -1,16 +1,10 @@
 /** @module @category Framework */
-import React, { ComponentType } from "react";
-import ReactDOMClient from "react-dom/client";
-import singleSpaReact from "single-spa-react";
-import {
-  openmrsComponentDecorator,
-  ComponentDecoratorOptions,
-} from "./openmrsComponentDecorator";
+import React, { ComponentType } from 'react';
+import ReactDOMClient from 'react-dom/client';
+import singleSpaReact from 'single-spa-react';
+import { openmrsComponentDecorator, ComponentDecoratorOptions } from './openmrsComponentDecorator';
 
-export function getLifecycle<T>(
-  Component: ComponentType<T>,
-  options: ComponentDecoratorOptions
-) {
+export function getLifecycle<T>(Component: ComponentType<T>, options: ComponentDecoratorOptions) {
   return singleSpaReact({
     React,
     ReactDOMClient,
@@ -20,16 +14,12 @@ export function getLifecycle<T>(
 
 export function getAsyncLifecycle<T>(
   lazy: () => Promise<{ default: ComponentType<T> }>,
-  options: ComponentDecoratorOptions
+  options: ComponentDecoratorOptions,
 ) {
-  return () =>
-    lazy().then(({ default: Component }) => getLifecycle(Component, options));
+  return () => lazy().then(({ default: Component }) => getLifecycle(Component, options));
 }
 
-export function getSyncLifecycle<T>(
-  Component: ComponentType<T>,
-  options: ComponentDecoratorOptions
-) {
+export function getSyncLifecycle<T>(Component: ComponentType<T>, options: ComponentDecoratorOptions) {
   return () => Promise.resolve(getLifecycle(Component, options));
 }
 

package/src/index.ts

@@ -1,31 +1,31 @@
-export * from "./ComponentContext";
-export * from "./ConfigurableLink";
-export * from "./Extension";
-export * from "./ExtensionSlot";
-export * from "./UserHasAccess";
-export * from "./getLifecycle";
-export * from "./openmrsComponentDecorator";
-export * from "./useAbortController";
-export * from "./useAssignedExtensions";
-export * from "./useAssignedExtensionIds";
-export * from "./useBodyScrollLock";
-export * from "./useConfig";
-export * from "./useConnectedExtensions";
-export * from "./useConnectivity";
-export * from "./useDebounce";
-export * from "./useExtensionInternalStore";
-export * from "./useExtensionSlot";
-export * from "./useExtensionSlotMeta";
-export * from "./useExtensionStore";
-export * from "./useFeatureFlag";
-export * from "./useForceUpdate";
-export * from "./useLayoutType";
-export * from "./useLocations";
-export * from "./useOnClickOutside";
-export * from "./useOpenmrsSWR";
-export * from "./usePatient";
-export { useSession } from "./useSession";
-export * from "./useStore";
-export * from "./useVisit";
-export * from "./useVisitTypes";
-export * from "./usePagination";
+export * from './ComponentContext';
+export * from './ConfigurableLink';
+export * from './Extension';
+export * from './ExtensionSlot';
+export * from './UserHasAccess';
+export * from './getLifecycle';
+export * from './openmrsComponentDecorator';
+export * from './useAbortController';
+export * from './useAssignedExtensions';
+export * from './useAssignedExtensionIds';
+export * from './useBodyScrollLock';
+export * from './useConfig';
+export * from './useConnectedExtensions';
+export * from './useConnectivity';
+export * from './useDebounce';
+export * from './useExtensionInternalStore';
+export * from './useExtensionSlot';
+export * from './useExtensionSlotMeta';
+export * from './useExtensionStore';
+export * from './useFeatureFlag';
+export * from './useForceUpdate';
+export * from './useLayoutType';
+export * from './useLocations';
+export * from './useOnClickOutside';
+export * from './useOpenmrsSWR';
+export * from './usePatient';
+export { useSession } from './useSession';
+export * from './useStore';
+export * from './useVisit';
+export * from './useVisitTypes';
+export * from './usePagination';

package/src/openmrsComponentDecorator.test.tsx

@@ -1,30 +1,30 @@
-import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
-import { openmrsComponentDecorator } from "./openmrsComponentDecorator";
-import { ComponentContext } from "./ComponentContext";
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { openmrsComponentDecorator } from './openmrsComponentDecorator';
+import { ComponentContext } from './ComponentContext';
 
-describe("openmrs-component-decorator", () => {
+describe('openmrs-component-decorator', () => {
   const opts = {
-    featureName: "Test",
+    featureName: 'Test',
     throwErrorsToConsole: false,
-    moduleName: "test",
+    moduleName: 'test',
   };
 
-  it("renders a component", () => {
+  it('renders a component', () => {
     const DecoratedComp = openmrsComponentDecorator(opts)(CompThatWorks);
     render(<DecoratedComp />);
     waitFor(() => {
-      expect(screen.getByText("The button")).toBeTruthy();
+      expect(screen.getByText('The button')).toBeTruthy();
     });
   });
 
-  it("catches any errors in the component tree and renders a ui explaining something bad happened", () => {
+  it('catches any errors in the component tree and renders a ui explaining something bad happened', () => {
     const DecoratedComp = openmrsComponentDecorator(opts)(CompThatThrows);
     render(<DecoratedComp />);
     // TO-DO assert the UX for broken react app is showing
   });
 
-  it("provides ComponentContext", () => {
+  it('provides ComponentContext', () => {
     const DecoratedComp = openmrsComponentDecorator(opts)(CompWithConfig);
     render(<DecoratedComp />);
   });
@@ -35,7 +35,7 @@ function CompThatWorks() {
 }
 
 let CompThatThrows = function () {
-  throw Error("ahahaa");
+  throw Error('ahahaa');
 };
 
 function CompWithConfig() {

package/src/openmrsComponentDecorator.tsx

@@ -1,11 +1,7 @@
-import React, { type ComponentType, Suspense } from "react";
-import { I18nextProvider } from "react-i18next";
-import type {} from "@openmrs/esm-globals";
-import {
-  ComponentConfig,
-  ComponentContext,
-  ExtensionData,
-} from "./ComponentContext";
+import React, { type ComponentType, Suspense } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import type {} from '@openmrs/esm-globals';
+import { ComponentConfig, ComponentContext, ExtensionData } from './ComponentContext';
 
 const defaultOpts = {
   strictMode: true,
@@ -32,22 +28,17 @@ export interface OpenmrsReactComponentState {
 
 export function openmrsComponentDecorator(userOpts: ComponentDecoratorOptions) {
   if (
-    typeof userOpts !== "object" ||
-    typeof userOpts.featureName !== "string" ||
-    typeof userOpts.moduleName !== "string"
+    typeof userOpts !== 'object' ||
+    typeof userOpts.featureName !== 'string' ||
+    typeof userOpts.moduleName !== 'string'
   ) {
-    throw new Error("Invalid options");
+    throw new Error('Invalid options');
   }
 
   const opts = Object.assign({}, defaultOpts, userOpts);
 
-  return function decorateComponent(
-    Comp: ComponentType<any>
-  ): ComponentType<any> {
-    return class OpenmrsReactComponent extends React.Component<
-      OpenmrsReactComponentProps,
-      OpenmrsReactComponentState
-    > {
+  return function decorateComponent(Comp: ComponentType<any>): ComponentType<any> {
+    return class OpenmrsReactComponent extends React.Component<OpenmrsReactComponentProps, OpenmrsReactComponentState> {
       static displayName = `OpenmrsReactComponent(${opts.featureName})`;
 
       constructor(props: OpenmrsReactComponentProps) {
@@ -84,9 +75,7 @@ export function openmrsComponentDecorator(userOpts: ComponentDecoratorOptions) {
       render() {
         if (this.state.caughtError) {
           // TO-DO have a UX designed for when a catastrophic error occurs
-          return (
-            <div>An error has occurred. Please try reloading the page.</div>
-          );
+          return <div>An error has occurred. Please try reloading the page.</div>;
         } else {
           const content = (
             <Suspense fallback={null}>
@@ -94,10 +83,7 @@ export function openmrsComponentDecorator(userOpts: ComponentDecoratorOptions) {
                 {opts.disableTranslations ? (
                   <Comp {...this.props} />
                 ) : (
-                  <I18nextProvider
-                    i18n={window.i18next}
-                    defaultNS={opts.moduleName}
-                  >
+                  <I18nextProvider i18n={window.i18next} defaultNS={opts.moduleName}>
                     <Comp {...this.props} />
                   </I18nextProvider>
                 )}