SF-3483 Upgrade to Application Builder and Angular 19 (#3338)

Author: marksvc

scripts/db_tools/tsconfig.json

@@ -4,7 +4,6 @@
     "compilerOptions": {
       "module": "commonjs"
     }
-
   },
   "compilerOptions": {
     "baseUrl": "./",
@@ -23,24 +22,17 @@
     "module": "ES2020",
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
-    "lib": [
-      "es2018",
-      "dom"
-    ],
+    "lib": ["es2018", "dom"],
     "emitDecoratorMetadata": true,
-    "suppressImplicitAnyIndexErrors": true,
     "esModuleInterop": true,
-    "typeRoots": ["node_modules/@types", "../../src/RealtimeServer/typings",
-    ],
+    "typeRoots": ["node_modules/@types", "../../src/RealtimeServer/typings"],
     "resolveJsonModule": true,
     "paths": {
-      "xforge-common/*": [
-        "../../src/SIL.XForge.Scripture/ClientApp/src/xforge-common/*"
-      ],
-      "*": [ "../../src/RealtimeServer/typings/*"]
+      "xforge-common/*": ["../../src/SIL.XForge.Scripture/ClientApp/src/xforge-common/*"],
+      "*": ["../../src/RealtimeServer/typings/*"]
     },
     "inlineSourceMap": false,
     "inlineSources": true,
-    "noEmit": false,
+    "noEmit": false
   }
 }

src/RealtimeServer/package-lock.json

@@ -66,6 +66,6 @@
     "sharedb-mingo-memory": "^4.0.1",
     "ts-jest": "^29.1.2",
     "ts-mockito": "^2.6.1",
-    "typescript": "~5.2.2"
+    "typescript": "~5.7.3"
   }
 }

src/RealtimeServer/package.json

@@ -2,7 +2,6 @@
 
 # compiled output
 /dist
-/dist-server
 /tmp
 /out-tsc
 

src/SIL.XForge.Scripture/ClientApp/.gitignore

@@ -7,7 +7,8 @@ module.exports = {
   },
   docs: {},
   staticDirs: [
-    { from: '../src/assets', to: '/assets' },
-    { from: '../src/app/checking/checking/test-audio', to: '/assets/audio/' }
+    // Note that 'embedded' directories appear to need to be higher, not lower.
+    { from: '../src/app/checking/checking/test-audio', to: '/assets/audio' },
+    { from: '../src/assets', to: '/assets' }
   ]
 };

src/SIL.XForge.Scripture/ClientApp/.storybook/main.ts

@@ -19,14 +19,14 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "progress": true,
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -36,7 +36,7 @@
             ],
             "styles": ["src/styles.scss", "src/material-styles.scss", "src/themes/themes.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
+              "includePaths": ["node_modules", "."]
             },
             "allowedCommonJsDependencies": [
               "@bugsnag/browser",
@@ -58,9 +58,7 @@
             ],
             "scripts": [],
             "aot": false,
-            "vendorChunk": true,
             "extractLicenses": true,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true,
@@ -84,9 +82,7 @@
               "outputHashing": "all",
               "namedChunks": true,
               "aot": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             },
             "staging": {
               "budgets": [
@@ -105,9 +101,7 @@
               "outputHashing": "all",
               "namedChunks": true,
               "aot": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             },
             "pwaTest": {
               "fileReplacements": [
@@ -118,8 +112,7 @@
               ],
               "outputHashing": "all",
               "namedChunks": true,
-              "vendorChunk": false,
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             },
             "development": {}
           },
@@ -133,7 +126,6 @@
               "buildTarget": "SIL.XForge.Scripture:build:production"
             },
             "development": {
-              "publicHost": "localhost:4200",
               "buildTarget": "SIL.XForge.Scripture:build:development"
             }
           },

src/SIL.XForge.Scripture/ClientApp/angular.json

@@ -193,14 +193,14 @@ export async function createShareLinksAsAdmin(
   await page.getByRole('link', { name: 'Users' }).click();
   await page.getByRole('button', { name: 'Share' }).click();
 
-  await page.getByTitle('Change invitation language').click();
+  await page.getByText('Invitation will be shared in').getByText('(change)').click();
   await page.getByRole('option', { name: 'English (US)' }).click();
 
   const roleToLink: { [role: string]: string } = {};
 
   let optionCount = Number.POSITIVE_INFINITY;
   for (let i = 0; i < optionCount; i++) {
-    await page.getByTitle('Change invitation role').click();
+    await page.getByText('Anyone with the link can').getByText('(change)').click();
     const options = await page.getByRole('option').all();
     optionCount = options.length;
 
@@ -281,7 +281,7 @@ export async function enableFeatureFlag(page: Page, flag: string): Promise<void>
 }
 
 export async function enableDeveloperMode(page: Page, options = { closeMenu: false }): Promise<void> {
-  await page.getByRole('button', { name: 'Help' }).click();
+  await page.getByRole('button').filter({ hasText: 'help' }).click();
 
   // Playwright refuses to click the version number because it's disabled. We override this with force: true. However,
   // this sometimes fails to enable developer mode, probably because the click event was fired before the menu was fully

src/SIL.XForge.Scripture/ClientApp/e2e/e2e-utils.ts

@@ -88,7 +88,7 @@ export async function editTranslation(
   // FIXME(application-bug) We have to click a *different* verse and then back to the one we want to add a note to
   await user.click(getSegment(page, 'target', chapter, verse + 1));
   await user.click(segment);
-  await user.click(page.getByRole('button', { name: 'Add Comment' }));
+  await user.click(page.getByRole('button').filter({ hasText: 'add_comment' }));
   await page.getByRole('textbox', { name: 'Your comment' }).click();
   await page.getByRole('textbox', { name: 'Your comment' }).fill('How do you like my translation of this verse?');
   await user.click(page.getByRole('radio', { name: 'Save' }));
@@ -124,7 +124,7 @@ export async function editTranslation(
   await user.click(page.getByRole('button', { name: 'Select' }));
 
   // Swap the source and target sides
-  await user.click(page.getByRole('button', { name: 'Swap source and target' }));
+  await user.click(page.getByRole('button').filter({ hasText: 'swap_horiz' }));
 
   // Delete the project so edits don't persist and cloud the history
   await deleteProject(page, DEFAULT_PROJECT_SHORTNAME);

src/SIL.XForge.Scripture/ClientApp/e2e/workflows/edit-translation.ts

@@ -74,14 +74,12 @@ export async function generateDraft(
   await expect(closeLocator).toBeVisible({ timeout: 5 * 60_000 });
   await user.click(closeLocator);
 
-  // The stepper renders every step to the page at once, so we need to keep track of which step we're on
-  let currentStep = 0;
+  // The stepper renders every step to the page at once. Get the step we're on.
   function getStep(): Locator {
-    return page.locator(`#cdk-step-content-0-${currentStep}`);
+    return page.locator('.mat-horizontal-stepper-content-current');
   }
   async function goToNextStepExpectingHeading(expectedHeading: string): Promise<void> {
     await user.click(getStep().getByRole('button', { name: 'Next' }));
-    currentStep++;
     await expect(getStep().getByRole('heading', { name: expectedHeading })).toBeVisible();
     await user.wait(1500);
   }