Bump Carbon version (#181)

openmrs · Apr 11, 2024 · 0abc705 · ibacher · Apr 11, 2024 · samuelmale
1 parent a2e0d98
commit 0abc705
Show file tree

Hide file tree

Showing 8 changed files with 1,485 additions and 1,720 deletions.
diff --git a/package.json b/package.json
@@ -9,12 +9,11 @@
   "scripts": {
     "lint": "TIMING=1 eslint src --ext .ts,.tsx --fix",
     "verify": "turbo lint typescript test",
-    "typescript": "tsc",
     "test": "jest --config ./jest.config.js --passWithNoTests",
     "build": "webpack --mode production",
     "coverage": "yarn test --coverage",
     "analyze": "webpack --mode=production --env.analyze=true",
-    "prepare": "husky install"
+    "postinstall": "husky install"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -28,8 +27,6 @@
   },
   "dependencies": {
     "ace-builds": "^1.4.12",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
     "formik": "^2.2.6",
     "jest-coverage-badges": "^1.0.0",
     "lodash-es": "^4.17.15",
@@ -51,7 +48,7 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@carbon/react": "^1.13.0",
+    "@carbon/react": "^1.37.0",
     "@openmrs/esm-framework": "next",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.38",
@@ -73,6 +70,7 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "fork-ts-checker-webpack-plugin": "^6.3.3",
     "husky": "^8.0.0",
+    "i18next": "^21.10.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
     "jest-cli": "^29.5.0",
@@ -82,17 +80,19 @@
     "openmrs": "next",
     "prettier": "^2.6.0",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^11.18.1",
     "rxjs": "^6.6.3",
+    "sass": "^1.54.3",
     "swc-loader": "^0.2.3",
+    "swr": "^2.2.4",
     "turbo": "^1.8.5",
     "typescript": "^4.0.3",
     "webpack": "^5.76.2",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.13.1"
   },
   "resolutions": {
-    "@carbon/react": "1.13.0",
     "dayjs": "^1.10.4"
   },
   "lint-staged": {

diff --git a/src/components/inputs/select/ohri-dropdown.test.tsx b/src/components/inputs/select/ohri-dropdown.test.tsx
@@ -67,7 +67,8 @@ const renderForm = (intialValues) => {
               isFieldInitializationComplete: true,
               isSubmitting: false,
               formFieldHandlers: { obs: ObsSubmissionHandler },
-            }}>
+            }}
+          >
             <OHRIDropdown question={question} onChange={jest.fn()} handler={ObsSubmissionHandler} />
           </OHRIFormContext.Provider>
         </Form>
@@ -85,7 +86,7 @@ describe('dropdown input field', () => {
   it('should record new obs', async () => {
     await renderForm({});
     // setup
-    const dropdownWidget = screen.getByRole('button', { name: /Patient past program./ });
+    const dropdownWidget = screen.getByRole('combobox', { name: /Patient past program./ });
 
     // assert initial values
     await act(async () => {
@@ -128,7 +129,7 @@ describe('dropdown input field', () => {
       value: '6ddd933a-e65c-4f35-8884-c555b50c55e1',
     };
     await renderForm({ 'patient-past-program': question.value.value });
-    const dropdownWidget = screen.getByRole('button', { name: /Patient past program./ });
+    const dropdownWidget = screen.getByRole('combobox', { name: /Patient past program./ });
 
     // do some edits
     fireEvent.click(dropdownWidget);

diff --git a/src/declarations.d.tsx b/src/declarations.d.tsx
@@ -1,2 +1,4 @@
+declare module '@carbon/react';
 declare module '*.css';
 declare module '*.scss';
+declare type SideNavProps = {};
diff --git a/src/ohri-form.component.test.tsx b/src/ohri-form.component.test.tsx
@@ -1,18 +1,4 @@
-import {
-  render,
-  fireEvent,
-  screen,
-  cleanup,
-  act,
-  waitFor,
-  getByText,
-  prettyDOM,
-  findAllByRole,
-  getAllByRole,
-  queryAllByRole,
-  within,
-  findByTestId,
-} from '@testing-library/react';
+import { render, fireEvent, screen, cleanup, act, within } from '@testing-library/react';
 import { when } from 'jest-when';
 import * as api from '../src/api/api';
 import React from 'react';
@@ -38,14 +24,10 @@ import obsGroup_test_form from '../__mocks__/forms/ohri-forms/obs-group-test_for
 import labour_and_delivery_test_form from '../__mocks__/forms/ohri-forms/labour_and_delivery_test_form.json';
 import sample_fields_form from '../__mocks__/forms/ohri-forms/sample_fields.json';
 import postSubmission_test_form from '../__mocks__/forms/ohri-forms/post-submission-test-form.json';
-import * as registry from '../src/registry/registry';
 import { evaluatePostSubmissionExpression } from './utils/post-submission-action-helper';
-import * as formContext from './ohri-form-context';
-import * as usePostSubmission from './hooks/usePostSubmissionAction';
 
 import {
   assertFormHasAllFields,
-  findAllRadioGroupInputs,
   findAllRadioGroupMembers,
   findAllTextOrDateInputs,
   findMultiSelectInput,
@@ -57,7 +39,6 @@ import {
 } from './utils/test-utils';
 import { mockVisit } from '../__mocks__/visit.mock';
 import { showToast } from '@openmrs/esm-framework';
-import { PostSubmissionAction } from './api/types';
 
 //////////////////////////////////////////
 ////// Base setup
@@ -140,7 +121,7 @@ describe('OHRI Forms:', () => {
       fail("Field with title 'Community service delivery point' should not be found");
     } catch (err) {
       expect(
-        err.message.includes('Unable to find role="button" and name "Community service delivery point"'),
+        err.message.includes('Unable to find role="combobox" and name "Community service delivery point"'),
       ).toBeTruthy();
     }
 
@@ -157,7 +138,7 @@ describe('OHRI Forms:', () => {
       await findMultiSelectInput(screen, 'TB screening');
       fail("Field with title 'TB screening' should not be found");
     } catch (err) {
-      expect(err.message.includes('Unable to find role="combobox" and name "TB screening"')).toBeTruthy();
+      expect(err.message.includes('Unable to find role="combobox" and name `/TB screening/i`')).toBeTruthy();
     }
   });
   // Form submission
@@ -622,8 +603,7 @@ describe('OHRI Forms:', () => {
       let femaleRadios = await findAllRadioGroupMembers(screen, 'Female');
       let maleRadios = await findAllRadioGroupMembers(screen, 'Male');
       let birthDateFields = await findAllTextOrDateInputs(screen, 'Date of Birth');
-
-      const addButton = await findSelectInput(screen, 'Add');
+      const addButton = await screen.findByRole('button', { name: 'Add' });
 
       //Verify
       await act(async () => expect(femaleRadio).toBeInTheDocument());
@@ -653,7 +633,7 @@ describe('OHRI Forms:', () => {
       let maleRadios = await findAllRadioGroupMembers(screen, 'Male');
       let birthDateFields = await findAllTextOrDateInputs(screen, 'Date of Birth');
 
-      const addButton = await findSelectInput(screen, 'Add');
+      const addButton = await screen.findByRole('button', { name: 'Add' });
 
       //Verify Initial state
       await act(async () => expect(femaleRadios.length).toBe(1));
@@ -663,7 +643,7 @@ describe('OHRI Forms:', () => {
       //Add repeat group
       await act(async () => fireEvent.click(addButton));
 
-      const deleteButton = await findSelectInput(screen, 'danger');
+      const deleteButton = await screen.findByRole('button', { name: 'danger' });
       femaleRadios = await findAllRadioGroupMembers(screen, 'Female');
       maleRadios = await findAllRadioGroupMembers(screen, 'Male');
       birthDateFields = await findAllTextOrDateInputs(screen, 'Date of Birth');

diff --git a/src/ohri-form.component.tsx b/src/ohri-form.component.tsx
@@ -9,7 +9,7 @@ import {
   detach,
   getAsyncLifecycle,
   registerExtension,
-  showToast,
+  showSnackbar,
   useSession,
   Visit,
 } from '@openmrs/esm-framework';
@@ -114,7 +114,6 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
   const [isFormTouched, setIsFormTouched] = useState(false);
   const [showWarningModal, setShowWarningModal] = useState(false);
   const postSubmissionHandlers = usePostSubmissionAction(refinedFormJson?.postSubmissionActions);
-
   const sessionMode = mode ? mode : encounterUUID || encounterUuid ? 'edit' : 'enter';
 
   const showSidebar = useMemo(() => {
@@ -126,8 +125,10 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
   }, [patient?.id, sessionMode, workspaceLayout]);
 
   const showButtonSet = useMemo(() => {
-    return workspaceLayout === 'minimized' || 'maximized'  && sessionMode != 'embedded-view' && scrollablePages.size <= 1;
-  }, [sessionMode, workspaceLayout,scrollablePages]);
+    return (
+      workspaceLayout === 'minimized' || ('maximized' && sessionMode != 'embedded-view' && scrollablePages.size <= 1)
+    );
+  }, [sessionMode, workspaceLayout, scrollablePages]);
 
   useEffect(() => {
     const extDetails = {
@@ -195,18 +196,18 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
       Promise.all(submissions)
         .then(async (results) => {
           if (mode === 'edit') {
-            showToast({
-              description: t('updatedRecordDescription', 'The patient encounter was updated'),
+            showSnackbar({
               title: t('updatedRecord', 'Record updated'),
+              subtitle: t('updatedRecordDescription', 'The patient encounter was updated'),
               kind: 'success',
-              critical: true,
+              isLowContrast: true,
             });
           } else {
-            showToast({
-              description: t('createdRecordDescription', 'A new encounter was created'),
+            showSnackbar({
               title: t('createdRecord', 'Record created'),
+              subtitle: t('createdRecordDescription', 'A new encounter was created'),
               kind: 'success',
-              critical: true,
+              isLowContrast: true,
             });
           }
           // Post Submission Actions
@@ -241,14 +242,14 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
                   }
                 } catch (error) {
                   const errorMessages = extractErrorMessagesFromResponse(error);
-                  showToast({
-                    description: t('errorDescription', errorMessages.join(', ')),
+                  showSnackbar({
                     title: t(
                       'errorDescriptionTitle',
                       actionId ? actionId.replace(/([a-z])([A-Z])/g, '$1 $2') : 'Post Submission Error',
                     ),
+                    subtitle: t('errorDescription', errorMessages.join(', ')),
                     kind: 'error',
-                    critical: true,
+                    isLowContrast: false,
                   });
                 }
               }),
@@ -258,11 +259,11 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
         })
         .catch((error) => {
           const errorMessages = extractErrorMessagesFromResponse(error);
-          showToast({
-            description: t('errorDescription', errorMessages.join(', ')),
+          showSnackbar({
             title: t('errorDescriptionTitle', 'Error on saving form'),
+            subtitle: t('errorDescription', errorMessages.join(', ')),
             kind: 'error',
-            critical: true,
+            isLowContrast: false,
           });
         })
         .finally(() => {
@@ -279,7 +280,8 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
       onSubmit={(values, { setSubmitting }) => {
         handleFormSubmit(values);
         setSubmitting(false);
-      }}>
+      }}
+    >
       {(props) => {
         setIsFormTouched(props.dirty);
 
@@ -327,7 +329,8 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
                         ? `${styles.minifiedFormContentBody}`
                         : ''
                     }
-                  `}>
+                  `}
+                    >
                       <OHRIEncounterForm
                         formJson={refinedFormJson}
                         patient={patient}
@@ -364,14 +367,15 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
 
                             onCancel && onCancel();
                             handleClose && handleClose();
-                          }}>
+                          }}
+                        >
                           {mode === 'view' ? 'Close' : 'Cancel'}
                         </Button>
                         <Button type="submit" disabled={mode === 'view' || isSubmitting}>
                           {isSubmitting ? (
                             <InlineLoading description={t('submitting', 'Submitting') + '...'} />
                           ) : (
-                            <span>{t('save', 'Save')}</span>
+                            <span>{`${t('save', 'Save')}`}</span>
                           )}
                         </Button>
                       </ButtonSet>

diff --git a/src/utils/test-utils.ts b/src/utils/test-utils.ts
@@ -14,12 +14,12 @@ export async function findRadioGroupMember(screen, name: string): Promise<HTMLIn
   return await screen.findByRole('radio', { name });
 }
 
-export async function findMultiSelectInput(screen, name: string): Promise<HTMLInputElement> {
-  return await screen.findByRole('combobox', { name });
+export async function findMultiSelectInput(screen, nameSubstring: string): Promise<HTMLInputElement> {
+  return await screen.findByRole('combobox', { name: new RegExp(nameSubstring, 'i') });
 }
 
 export async function findSelectInput(screen, name: string): Promise<HTMLInputElement> {
-  return await screen.findByRole('button', { name });
+  return await screen.findByRole('combobox', { name });
 }
 
 export async function findAllRadioGroupInputs(screen, name: string): Promise<Array<HTMLInputElement>> {

diff --git a/tsconfig.json b/tsconfig.json
@@ -19,5 +19,6 @@
     "resolveJsonModule": true,
     "noEmit": true,
     "target": "esnext"
-  }
+  },
+  "include": ["src/**/*", "./setupTests.ts"]
 }