chore(#8237): upgrade webapp's Angular to v16 (#8515)

- Upgrades webapp's angular to v16
- Upgrades Typescript, rxjs, tslibs, ngxbootstrap versions in order to support Angular 16.
- Replaces Bootstrap's accordion with Angular Material's. 
- Removes defaultProject from angular.json, this property is deprecated.
- Overrides styles of Bootstrap 4, patching, so app looks the same as before in the new design and old design (action bar and filters)
- Overrides Angular Material's fonts to use the Noto fonts

package.json

@@ -56,17 +56,17 @@
     "upgrade-wdio": "wdio run ./tests/e2e/upgrade/wdio.conf.js"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^15.0.0",
-    "@angular-devkit/build-angular": "^15.0.5",
-    "@angular-eslint/builder": "^15.1.0",
-    "@angular-eslint/eslint-plugin": "^15.1.0",
-    "@angular-eslint/eslint-plugin-template": "^15.1.0",
-    "@angular-eslint/schematics": "^15.1.0",
-    "@angular-eslint/template-parser": "^15.1.0",
-    "@angular/cli": "^15.0.5",
-    "@angular/compiler": "^15.0.4",
-    "@angular/compiler-cli": "^15.0.4",
-    "@angular/localize": "^15.0.4",
+    "@angular-builders/custom-webpack": "^16.0.1",
+    "@angular-devkit/build-angular": "^16.2.1",
+    "@angular-eslint/builder": "^16.1.1",
+    "@angular-eslint/eslint-plugin": "^16.1.1",
+    "@angular-eslint/eslint-plugin-template": "^16.1.1",
+    "@angular-eslint/schematics": "^16.1.1",
+    "@angular-eslint/template-parser": "^16.1.1",
+    "@angular/cli": "^16.2.1",
+    "@angular/compiler": "^16.2.3",
+    "@angular/compiler-cli": "^16.2.3",
+    "@angular/localize": "^16.2.3",
     "@faker-js/faker": "^6.1.2",
     "@medic/eslint-config": "^1.1.0",
     "@types/chai": "^4.3.4",
@@ -154,7 +154,7 @@
     "semver": "^7.3.8",
     "sinon": "^11.1.2",
     "tail": "^2.2.4",
-    "typescript": "4.8",
+    "typescript": "^5.1.6",
     "uglify-js": "^3.17.4",
     "uuid": "^8.3.2",
     "webpack-bundle-analyzer": "^4.7.0",

tests/.eslintrc

@@ -29,6 +29,8 @@
   "globals": {
     "$": true,
     "$$": true,
-    "document": true
+    "document": true,
+    "caches": true,
+    "navigator": true
   }
 }

tests/e2e/default/service-worker/service-worker.wdio-spec.js

@@ -4,8 +4,7 @@ const utils = require('@utils');
 const loginPage = require('@page-objects/default/login/login.wdio.page');
 const commonPage = require('@page-objects/default/common/common.wdio.page');
 
-/* global caches fetch Response navigator */
-
+// global caches fetch Response navigator
 const getCachedRequests = async (raw) => {
   const cacheDetails = await browser.executeAsync(async (callback) => {
     const cacheNames = await caches.keys();

tests/page-objects/default/reports/reports.wdio.page.js

@@ -32,8 +32,8 @@ const reviewReportOptionById = (id) => $(`${REVIEW_REPORT_CONTAINER} button.${id
 const activeReviewOption = () => $(`${REVIEW_REPORT_CONTAINER} button.active-option`);
 const reviewReportCloseButton = () => $(`${REVIEW_REPORT_CONTAINER} .panel-header .panel-header-close`);
 
-const sidebarFilterDateAccordionHeader = () => $('#date-filter-accordion .panel-heading');
-const sidebarFilterDateAccordionBody = () => $('#date-filter-accordion .panel-collapse.show');
+const sidebarFilterDateAccordionHeader = () => $('#date-filter-accordion mat-expansion-panel-header');
+const sidebarFilterDateAccordionBody = () => $('#date-filter-accordion mat-panel-description');
 const sidebarFilterToDate = () => $('#toDateFilter');
 const sidebarFilterFromDate = () => $('#fromDateFilter');
 const sidebarFilterOpenBtn = () => $('mm-search-bar .open-filter');

webapp/angular.json

@@ -129,7 +129,6 @@
       }
     }
   },
-  "defaultProject": "webapp",
   "cli": {
     "analytics": false
   }