(chore) Bump esm-form-entry-app to Angular v14 (#1414)

* (chore) Bump `esm-form-entry-app` to Angular v14 * Fix type annotations * Fix tests by adding window.matchMedia mock * More test fixes * Fix e2e tests * Try another fix * Fix overflow menu locator * Cleanup * Fixed failing test * Update @openmrs/ngx-formentry * Updated e2e --------- Co-authored-by: Vineet Sharma <[email protected]>
openmrs · Oct 16, 2023 · b35ab06 · b35ab06
1 parent 3cf8943
commit b35ab06
Show file tree

Hide file tree

Showing 26 changed files with 4,520 additions and 4,234 deletions.
diff --git a/.gitignore b/.gitignore
@@ -93,3 +93,6 @@ moduleName/
 /playwright-report/
 /playwright/.cache/
 e2e/storageState.json
+
+# misc
+.angular
diff --git a/e2e/specs/add-and-edit-program.spec.ts b/e2e/specs/add-and-edit-program.spec.ts
@@ -2,7 +2,6 @@ import { test } from '../core';
 import { ProgramPage } from '../pages';
 import { expect } from '@playwright/test';
 import { generateRandomPatient, deletePatient, Patient } from '../commands';
-import { getByTestId, getByText } from '@testing-library/dom';
 
 let patient: Patient;
 
@@ -26,7 +25,7 @@ test('Should add a program and edit program', async ({ page, api }) => {
     await programPage.page.getByText('Record program enrollment').click();
   });
 
-  await test.step('And I Fill the form', async () => {
+  await test.step('And I fill the form', async () => {
     await programPage.page.locator('#program').selectOption('64f950e6-1b07-4ac0-8e7e-f3e148f3463f');
     await programPage.page.locator('#enrollmentDateInput').fill('04/07/2023');
     await programPage.page.locator('#completionDateInput').fill('05/07/2023');
@@ -39,7 +38,7 @@ test('Should add a program and edit program', async ({ page, api }) => {
   });
 
   await test.step('And I should see the success message', async () => {
-    await expect(programPage.page.getByText('saved')).toBeVisible();
+    await expect(programPage.page.getByText('Program enrollment saved')).toBeVisible();
   });
 
   await test.step('Then I should see the program in the patient chart', async () => {
@@ -65,7 +64,7 @@ test('Should add a program and edit program', async ({ page, api }) => {
   });
 
   await test.step('And I should see the success message', async () => {
-    await expect(programPage.page.getByText('updated')).toBeVisible();
+    await expect(programPage.page.getByText('Program enrollment updated')).toBeVisible();
   });
 
   await test.step('Then I should see the updated program in the patient chart', async () => {

diff --git a/package.json b/package.json
@@ -8,11 +8,11 @@
     "start": "openmrs develop --sources packages/esm-patient-chart-app/",
     "ci:publish": "lerna publish from-package --yes",
     "ci:prepublish": "lerna publish from-package --no-git-reset --yes --dist-tag next",
+    "ci:bump-form-engine-lib": "yarn up @openmrs/openmrs-form-engine-lib@next",
     "release": "lerna version --no-git-tag-version",
     "verify": "turbo lint typescript test --color --concurrency=5",
     "prettier": "prettier --config prettier.config.js --write \"packages/**/*.{ts,tsx,css,scss}\" \"e2e/**/*.ts\"",
     "postinstall": "husky install",
-    "ci:bump-form-engine-lib": "yarn up @openmrs/openmrs-form-engine-lib@next",
     "test-e2e": "playwright test"
   },
   "devDependencies": {

diff --git a/packages/esm-form-entry-app/angular.json b/packages/esm-form-entry-app/angular.json
@@ -20,6 +20,11 @@
 				"build": {
 					"builder": "ngx-build-plus:browser",
 					"options": {
+            "allowedCommonJsDependencies": [
+              "lodash",
+              "moment",
+              "zone.js"
+            ],
 						"preserveSymlinks": true,
 						"outputPath": "dist",
 						"index": "",
@@ -74,6 +79,7 @@
 				"serve": {
 					"builder": "ngx-build-plus:dev-server",
 					"options": {
+            "publicHost": "http://localhost:4200",
 						"browserTarget": "openmrs-esm-form-entry-app:build",
 						"extraWebpackConfig": "webpack.config.js"
 					},
@@ -122,6 +128,5 @@
 				}
 			}
 		}
-	},
-	"defaultProject": "openmrs-esm-form-entry-app"
-}
+  }
+}
diff --git a/packages/esm-form-entry-app/package.json b/packages/esm-form-entry-app/package.json
@@ -35,25 +35,25 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
   },
   "dependencies": {
-    "@angular-extensions/elements": "12.6.0",
-    "@angular/animations": "~12.2.17",
-    "@angular/cdk": "~12.2.13",
-    "@angular/common": "~12.2.17",
-    "@angular/compiler": "~12.2.17",
-    "@angular/core": "~12.2.17",
-    "@angular/forms": "~12.2.17",
-    "@angular/platform-browser": "~12.2.17",
-    "@angular/platform-browser-dynamic": "~12.2.17",
-    "@angular/router": "~12.2.17",
+    "@angular-extensions/elements": "^14.1.0",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
     "@carbon/styles": "~1.14.0",
-    "@ng-select/ng-select": "^6.1.0",
+    "@ng-select/ng-select": "^8.3.0",
     "@ngx-translate/core": "^13.0.0",
+    "@openmrs/ngx-file-uploader": "next",
     "@openmrs/ngx-formentry": "next",
     "hammerjs": "^2.0.8",
     "jspdf": "^1.5.3",
     "moment": "^2.29.4",
     "ngx-bootstrap": "^6.0.0",
-    "ngx-file-uploader-openmrs": "^1.0.1",
     "ngx-webcam": "^0.3.2",
     "reflect-metadata": "^0.1.13",
     "single-spa-angular": "^5.0.2",
@@ -70,28 +70,28 @@
     "single-spa": "5.x"
   },
   "devDependencies": {
-    "@angular-architects/module-federation": "^12.5.3",
-    "@angular-devkit/build-angular": "~12.2.18",
-    "@angular/cli": "~12.2.18",
-    "@angular/compiler-cli": "~12.2.17",
-    "@angular/language-service": "~12.2.17",
-    "@angular/localize": "~12.2.17",
+    "@angular-devkit/build-angular": "^14.2.13",
+    "@angular/cli": "^14.2.13",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/language-service": "^14.3.0",
+    "@angular/localize": "^14.3.0",
     "@openmrs/esm-framework": "next",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/webpack-env": "^1.18.2",
     "codelyzer": "^6.0.2",
     "copy-webpack-plugin": "^11.0.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.4",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "jasmine-core": "~5.1.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "ngx-build-plus": "^14.0.0",
     "openmrs": "^5.1.0",
     "protractor": "~7.0.0",
-    "rxjs": "6.6.7",
+    "rxjs": "~6.6.7",
     "style-loader": "2.x",
     "webpack": "~5.76.3"
   }

diff --git a/packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.scss b/packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.scss
@@ -1,8 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
+@import '@openmrs/esm-styleguide/src/vars';
 
 .error-tile {
   width: 60%;

diff --git a/packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.ts b/packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.ts
@@ -127,11 +127,10 @@ export class FeWrapperComponent implements OnInit, OnDestroy {
     this.translateService.use(locale);
 
     import(
-      /* webpackInclude: /\.js$/ */
-      `@angular/common/locales/${locale}.js`
-    ).then((module) => {
-      registerLocaleData(module.default);
-    });
+      /* webpackInclude: /\.mjs$/ */
+      /* webpackChunkName: "./assets/l10n/locales/[request]"*/
+      `@/../../../node_modules/@angular/common/locales/${locale}.mjs`
+    ).then((module) => registerLocaleData(module.default));
 
     return forkJoin({
       formSchema: this.fetchCompiledFormSchema(this.formUuid, locale).pipe(take(1)),

diff --git a/packages/esm-form-entry-app/tsconfig.app.json b/packages/esm-form-entry-app/tsconfig.app.json
@@ -7,6 +7,7 @@
       "node",
       "webpack-env",
     ],
+    "target": "es2020",
     "paths": {
       "@openmrs/esm-framework": [
         "../../node_modules/@openmrs/esm-framework/src/internal"
@@ -24,4 +25,4 @@
     "src/**/*.spec.ts",
     "src/**/*.mock.ts"
   ]
-}
+}
diff --git a/packages/esm-form-entry-app/tsconfig.json b/packages/esm-form-entry-app/tsconfig.json
@@ -12,7 +12,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2020",
     "types": [
       "node",
       "webpack-env",

diff --git a/packages/esm-form-entry-app/webpack.config.js b/packages/esm-form-entry-app/webpack.config.js
@@ -3,6 +3,7 @@ const { ModuleFederationPlugin } = container;
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { StatsWriterPlugin } = require('webpack-stats-plugin');
 const { existsSync, statSync } = require('fs');
+const { inc } = require('semver');
 
 function getFrameworkVersion() {
   try {
@@ -23,7 +24,7 @@ function fileExistsSync(name) {
 
 const path = require('path');
 const { basename, dirname, resolve } = path;
-const { name, version, browser, main, peerDependencies } = require('./package.json');
+const { name, version, browser, main, peerDependencies, types } = require('./package.json');
 const filename = basename(browser || main);
 const root = process.cwd();
 const outDir = dirname(browser || main);
@@ -48,14 +49,15 @@ module.exports = {
   target: 'web',
   devtool: mode === production ? 'hidden-nosources-source-map' : 'eval-source-map',
   devServer: {
-    contentBase: path.join(__dirname, 'dist'),
+    static: path.join(__dirname, 'dist'),
     compress: true,
     port: 4200,
   },
   output: {
     publicPath: 'auto',
     path: resolve(root, outDir),
     uniqueName: '_openmrs_esm_form_entry_app',
+    scriptType: 'text/javascript',
   },
   optimization: {
     runtimeChunk: false,

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-table.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-table.component.tsx
@@ -5,14 +5,14 @@ dayjs.extend(utc);
 import { useTranslation } from 'react-i18next';
 import {
   DataTable,
+  DataTableHeader,
   Table,
   TableCell,
   TableContainer,
   TableBody,
   TableHead,
   TableHeader,
   TableRow,
-  DataTableHeader,
 } from '@carbon/react';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import { formatDatetime, parseDate, useLayoutType, usePagination } from '@openmrs/esm-framework';
@@ -45,7 +45,7 @@ const AppointmentsTable: React.FC<AppointmentTableProps> = ({
     }
   }, [switchedView, goTo, currentPage]);
 
-  const tableHeaders: Array<DataTableHeader> = useMemo(
+  const tableHeaders: Array<typeof DataTableHeader> = useMemo(
     () => [
       { key: 'date', header: t('date', 'Date') },
       { key: 'location', header: t('location', 'Location') },

diff --git a/packages/esm-patient-biometrics-app/src/biometrics/paginated-biometrics.component.tsx b/packages/esm-patient-biometrics-app/src/biometrics/paginated-biometrics.component.tsx
@@ -15,7 +15,7 @@ import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
 import styles from './biometrics-overview.scss';
 
 interface PaginatedBiometricsProps {
-  tableRows: Array<DataTableRow>;
+  tableRows: Array<typeof DataTableRow>;
   pageSize: number;
   pageUrl: string;
   urlLabel: string;

diff --git a/packages/esm-patient-chart-app/src/visit/past-visit-overview.component.tsx b/packages/esm-patient-chart-app/src/visit/past-visit-overview.component.tsx
@@ -14,18 +14,18 @@ import {
 } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import { DefaultWorkspaceProps, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { setCurrentVisit } from '@openmrs/esm-framework';
+import { DefaultWorkspaceProps, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { usePastVisits } from './visits-widget/visit.resource';
 import styles from './past-visit-overview.scss';
-import { setCurrentVisit } from '@openmrs/esm-framework';
 
 const PastVisitOverview: React.FC<DefaultWorkspaceProps> = ({ patientUuid, closeWorkspace }) => {
   const { t, i18n } = useTranslation();
   const locale = i18n.language.toLowerCase().replace('_', '-');
 
   const { data: pastVisits, isError, isLoading } = usePastVisits(patientUuid);
 
-  const headerData: Array<DataTableHeader> = useMemo(
+  const headerData: Array<typeof DataTableHeader> = useMemo(
     () => [
       { key: 'startDate', header: t('startDate', 'Start Date') },
       { key: 'visitType', header: t('type', 'Type') },

diff --git a/...patient-chart-app/src/visit/visits-widget/encounters-table/encounters-table.component.tsx b/...patient-chart-app/src/visit/visits-widget/encounters-table/encounters-table.component.tsx
@@ -37,7 +37,7 @@ interface EncountersTableProps {
 
 type FilterProps = {
   rowIds: Array<string>;
-  headers: Array<DataTableHeader>;
+  headers: Array<typeof DataTableHeader>;
   cellsById: any;
   inputValue: string;
   getCellId: (row, key) => string;

diff --git a/...pp/src/visit/visits-widget/past-visits-components/visits-table/visits-table.component.tsx b/...pp/src/visit/visits-widget/past-visits-components/visits-table/visits-table.component.tsx
@@ -54,7 +54,7 @@ interface VisitTableProps {
 
 type FilterProps = {
   rowIds: Array<string>;
-  headers: Array<DataTableHeader>;
+  headers: Array<typeof DataTableHeader>;
   cellsById: Record<string, Record<string, boolean | string | null | Record<string, unknown>>>;
   inputValue: string;
   getCellId: (row, key) => string;

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.scss b/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.scss
@@ -1,5 +1,9 @@
 .layer {
   height: 100%;
+
+  :global(.cds--overflow-menu) {
+    min-height: unset;
+  }
 }
 
 .menuItem {

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-form.test.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-form.test.tsx
@@ -71,7 +71,7 @@ describe('Conditions Form', () => {
     expect(screen.getByRole('group', { name: /Condition/i })).toBeInTheDocument();
     expect(screen.getByRole('textbox', { name: /Onset date/i })).toBeInTheDocument();
     expect(screen.getByRole('group', { name: /Current status/i })).toBeInTheDocument();
-    expect(screen.getByRole('search', { name: /Enter condition/i })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: /Enter condition/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Clear search input/i })).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: 'Active' })).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: 'Active' })).toBeChecked();

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.test.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.test.tsx
@@ -74,7 +74,7 @@ describe('ConditionsOverview: ', () => {
     expect(screen.getByText(/Sorry, there was a problem displaying this information./i)).toBeInTheDocument();
   });
 
-  xit("renders an overview of the patient's conditions when present", async () => {
+  it("renders an overview of the patient's conditions when present", async () => {
     const user = userEvent.setup();
 
     mockOpenmrsFetch.mockReturnValueOnce({ data: mockFhirConditionsResponse });

diff --git a/packages/esm-patient-forms-app/src/forms/form-view.component.tsx b/packages/esm-patient-forms-app/src/forms/form-view.component.tsx
@@ -83,7 +83,7 @@ const FormView: React.FC<FormViewProps> = ({
     pageSize,
   );
 
-  const tableHeaders: Array<DataTableHeader> = useMemo(
+  const tableHeaders: Array<typeof DataTableHeader> = useMemo(
     () => [
       { key: 'formName', header: t('formName', 'Form name (A-Z)') },
       {
@@ -94,7 +94,7 @@ const FormView: React.FC<FormViewProps> = ({
     [t],
   );
 
-  const tableRows: Array<DataTableRow> = useMemo(
+  const tableRows: Array<typeof DataTableRow> = useMemo(
     () =>
       results?.map((formInfo) => {
         return {

diff --git a/packages/esm-patient-forms-app/src/offline-forms/offline-forms.component.tsx b/packages/esm-patient-forms-app/src/offline-forms/offline-forms.component.tsx
@@ -42,12 +42,12 @@ const OfflineForms: React.FC<OfflineFormsProps> = ({ canMarkFormsAsOffline }) =>
   const forms = useValidOfflineFormEncounters();
   const layout = useLayoutType();
   const toolbarItemSize = isDesktop(layout) ? 'sm' : undefined;
-  const headers: Array<DataTableHeader> = [
+  const headers: Array<typeof DataTableHeader> = [
     { key: 'formName', header: t('offlineFormsTableFormNameHeader', 'Form name') },
     { key: 'availableOffline', header: t('offlineFormsTableFormAvailableOffline', 'Offline') },
   ];
 
-  const rows: Array<DataTableRow & Record<string, unknown>> =
+  const rows: Array<typeof DataTableRow & Record<string, unknown>> =
     forms.data
       ?.filter((formInfo) => userHasAccess(formInfo?.encounterType?.editPrivilege?.display, session?.user))
       .map((form) => ({
@@ -82,7 +82,7 @@ const OfflineForms: React.FC<OfflineFormsProps> = ({ canMarkFormsAsOffline }) =>
             getRowProps,
             getTableContainerProps,
             onInputChange,
-          }: DataTableCustomRenderProps) => (
+          }: typeof DataTableCustomRenderProps) => (
             <TableContainer {...getTableContainerProps()}>
               <div className={styles.tableHeaderContainer}>
                 <Layer>