Angular 18 upgrade (squashed)

Merge pull request #500 from kendraio/angular-18-squashed Introduces Angular 18 compatibility, compatible Monaco Editor, Ag Grid issues, adds identifiers for Cypress tests to find, UI compatibility refactoring, styling and code clean-up, built on top of Gio's and J Black's work. There were over 70 commits built on an old base branch, so to avoid introducing unintended regressions and to make sensible review process more possible, I rebuilt it as 6 commits, that merge diff patches from key commits. Many unneeded linting changes were removed. About half as many lines are used, and a lot less files are changed too.
kendraio · Nov 28, 2024 · c50db24 · c50db24
2 parents c09fe57 + f3259da
commit c50db24
Show file tree

Hide file tree

Showing 176 changed files with 11,639 additions and 7,896 deletions.
diff --git a/angular.json b/angular.json
@@ -18,12 +18,20 @@
       },      
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "allowedCommonJsDependencies": [
+                "lodash"
+            ],
+            "outputPath": {
+              "base": "dist"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts",
+              "zone.js",
+              "@angular/localize/init"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -33,30 +41,32 @@
               "src/mstile-150x150.png",
               "src/assets",
               "src/manifest.json",
-              {
-                "glob": "**/*",
-                "input": "node_modules/ngx-monaco-editor/assets/monaco",
-                "output": "./assets/monaco/"
-              }
+              { "glob": "**/*", "input": "node_modules/monaco-editor", "output": "/assets/monaco/" }
             ],
             "styles": [
               "node_modules/@fortawesome/fontawesome-free/css/all.css",
               "src/styles.scss",
               "src/styles/vendor.scss",
               "src/styles/main.scss",
-              "node_modules/leaflet/dist/leaflet.css"
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
+              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
             ],
             "scripts": [
               "node_modules/@fortawesome/fontawesome-free/js/all.js",
               "node_modules/auth0-js/dist/auth0.js",
               "node_modules/json-schema-faker/dist/bundle.js"
             ],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "."
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -78,8 +88,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -91,7 +99,7 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             },
             "dev": {
               "fileReplacements": [
@@ -111,8 +119,6 @@
               "sourceMap": true,
               "namedChunks": false,
               "extractLicenses": false,
-              "vendorChunk": false,
-              "buildOptimizer": false,
               "budgets": [
                 {
                   "type": "initial",
@@ -124,34 +130,34 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "serviceWorker": true
+              "serviceWorker": "ngsw-config.json"
             }
           },
           "defaultConfiguration": "dev"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "kendraio-app:build",
             "host": "0.0.0.0",
-            "disableHostCheck": true
+            "disableHostCheck": true,
+            "buildTarget": "kendraio-app:build"
           },
           "configurations": {
             "de": {
-              "browserTarget": "kendraio-app:build:de"
+              "buildTarget": "kendraio-app:build:de"
             },
             "fr": {
-              "browserTarget": "kendraio-app:build:fr"
+              "buildTarget": "kendraio-app:build:fr"
             },
             "production": {
-              "browserTarget": "kendraio-app:build:production"
+              "buildTarget": "kendraio-app:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "kendraio-app:build"
+            "buildTarget": "kendraio-app:build"
           }
         },
         "test": {
@@ -227,4 +233,4 @@
       "@ngrx/schematics"
     ]
   }
-}
+}
diff --git a/cypress/e2e/app-grid-block-layout.js b/cypress/e2e/app-grid-block-layout.js
@@ -0,0 +1,68 @@
+import { loadFlowCode } from "../support/helper";
+
+// tslint:disable: quotemark
+/// <reference types="Cypress" />
+
+const TEST_GRID_CONFIG = {
+  type: "grid",
+  passThrough: true,
+  gridOptions: {
+    pagination: true, // This may overlap with column headers with no styling
+    paginationPageSize: 15,
+    defaultColDef: {
+      sortable: true,
+      resizable: true,
+    },
+  },
+  columnDefs: [
+    {
+      field: "0",
+      headerName: "Column 1",
+    },
+    {
+      field: "1",
+      headerName: "Column 2",
+    },
+    {
+      field: "2",
+      headerName: "Column 3",
+    },
+    {
+      field: "3",
+      headerName: "Column 4",
+    },
+    {
+      field: "4",
+      headerName: "Column 5",
+    },
+  ],
+};
+
+describe("Grid Block Columns", () => {
+  beforeEach(() => {
+    // Prevent external network requests for config
+    cy.intercept(
+      "GET",
+      "https://kendraio.github.io/kendraio-adapter/config.json",
+      { fixture: "adapterConfig.json" }
+    ).as("adapterConfig");
+
+    // Prevent external network requests for fonts with empty CSS rule
+    cy.intercept("https://fonts.googleapis.com/**", "*{ }").as("fonts");
+
+    loadFlowCode([TEST_GRID_CONFIG]);
+  });
+
+  it("should display the columns side by side without text overlap", () => {
+    // Wait for headers to load
+    cy.get('.ag-header-cell').should('have.length.at.least', 2);
+    cy.get('.ag-header-cell').then(($columns) => {
+      const firstColumnBounds = $columns[0].getBoundingClientRect();
+      const secondColumnBounds = $columns[1].getBoundingClientRect();
+
+      // Assert that columns are side by side without overlap
+      expect(firstColumnBounds.right).to.be.at.most(secondColumnBounds.left);
+    });
+  });
+
+});
diff --git a/cypress/e2e/context_and_state.ts b/cypress/e2e/context_and_state.ts
@@ -234,7 +234,7 @@ describe('Kendraio context and state', () => {
     loadFlowCode([
       {
         "type": "context-save",
-        "valueGetter": "`true`",
+        "valueGetter": "`false`",
         "contextKey": "state.global.disabled",
       },
       {

diff --git a/cypress/e2e/gosub.ts b/cypress/e2e/gosub.ts
@@ -24,21 +24,21 @@ describe('Subroutine workflow block', () => {
                 "workflowId": "madeUpFlowIDA"
             }
         ]);
-        cy.get('mat-toolbar > button mat-icon').contains('settings').click();
+        cy.get('[data-cy="toolbar-setting-button"]').click();
         cy.get("#mat-expansion-panel-header-0").click();
         // cy.pause();
         cy.get("#mat-input-0")
             .clear()
             .type("s")
             .type("o")
-            .get(".mat-option-text", { timeout: 1000 })
+            .get("mat-option", { timeout: 1000 })
             .contains("someAdapterB");
         cy.get("#mat-input-0")
             .clear()
             .type("someAdapterB")
             .get("#mat-input-1")
             .clear()
-            .get(".mat-option-text", { timeout: 1000 })
+            .get("mat-option", { timeout: 1000 })
             .contains("madeUpFlowIDB");
     });
 

diff --git a/cypress/e2e/share.ts b/cypress/e2e/share.ts
@@ -36,9 +36,9 @@ describe('Share functionality', () => {
         cy.contains('Rishi');
 
         // Now we press the share button, and select share database:
-        cy.get('mat-icon').contains("settings").click();
-        cy.get('mat-icon').contains("share").click();
-        cy.get('button:contains("Share database")').click();
+        cy.get('[data-cy="toolbar-setting-button"]').click();
+        cy.get('[data-cy="sidenav-share-button"]').click();
+        cy.get('[data-cy="dialog-share-shareDatabase"]').click();
 
         // assert shareValue is in the databaseUrl
         cy.get('app-show-share-link-dialog textarea').should('contain', databaseUrl);