Add Annotation Search and Verification Pages

This pull request creates an annotations search page & accompanying verification grid to the workbench client.

Fixes: #2140

Features
- Add open-ecoacoustics web components as a dependency
- Add annotations search page
- Add verification interface page
- Add @angular/elements allowing us to create custom elements using Angular components (was needed for full Lit + - Angular interoperability within slotted content)
- Add semantic selectors to wip component
- Add disabled attributes to date-time-input.component start/end date/time inputs
- Add pageSize attribute to pagination template
- You can now add response headers to the SSR server using the angular.json serve.options.headers object

Bug Fixes
- Fix the previously non-functional UnsavedInputGuard
- Fix docker image publish workflow doubling the inputted tag name on manual dispatches
- Fix docker version build numbers now use an incrementing number instead of the number of commits in the tag
- Fixes a bug with route titles when viewing profiles
- Fixes a bug where typeahead input component pills would not be vertically centered
- Fix failing CI due to deprecated dependencies

Code Quality
- Disable AOT during development builds and disable lib check (don't typecheck third party library code). These changes result in decreased dev build time by ~40-50%
- Add new test helpers selectFromTypeahead and getElementByInnerText

.github/workflows/publish.yml

@@ -25,7 +25,7 @@ jobs:
 
     steps:
       - name: Checkout Workbench Client
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           lfs: true
           fetch-depth: 50
@@ -48,4 +48,4 @@ jobs:
         shell: pwsh
         run: ./scripts/build_docker.ps1
           -github_actor '${{ github.actor }}'
-          -release_tag '${{ inputs.release_tag }}${{ github.event.inputs.release_tag }}'
+          -release_tag '${{ inputs.release_tag }}'

.github/workflows/workflow.yml

@@ -12,13 +12,13 @@ jobs:
 
     steps:
       - name: Checkout Baw Client
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: QutEcoacoustics/baw-client
           ref: migration
 
       - name: Install Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: "12"
           cache: "npm"
@@ -66,7 +66,7 @@ jobs:
         run: npm run build -- --production
 
       - name: Publish build files
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           path: bin/
           name: baw-client
@@ -91,16 +91,16 @@ jobs:
           - FirefoxHeadless
     steps:
       - name: Checkout Workbench Client
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: "20"
           cache: "npm"
 
       - name: Download Artifacts
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v4
         with:
           path: baw-client
 
@@ -115,9 +115,9 @@ jobs:
 
       - name: Upload Unit Test Results
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
-          name: Unit Test Results (OS ${{ matrix.os }})
+          name: Unit Test Results (OS ${{ matrix.os }} ${{ matrix.browsers }})
           path: TESTS-*.xml
 
       - name: Lint project
@@ -153,7 +153,7 @@ jobs:
 
     steps:
       - name: Checkout Workbench Client
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           lfs: true
 
@@ -175,15 +175,15 @@ jobs:
 
     steps:
       - name: Checkout Workbench Client
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           lfs: true
 
       - name: Checkout LFS objects
         run: git lfs checkout
 
       - name: Install Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: "20"
           cache: "npm"
@@ -195,7 +195,7 @@ jobs:
         run: npm run build
 
       - name: Publish build files
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           path: ./dist/workbench-client/
           name: workbench-client
@@ -211,7 +211,7 @@ jobs:
 
     steps:
       - name: Download Artifacts
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v4
         with:
           path: artifacts
       - name: Publish Unit Test Results

angular.json

@@ -23,11 +23,17 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
+            "aot": false,
+            "optimization": false,
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/manifest.json"
+              "src/manifest.json",
+              {
+                "glob": "**/*",
+                "input": "node_modules/@ecoacoustics/web-components/dist",
+                "output": "@ecoacoustics/web-components"
+              }
             ],
             "styles": [
               "src/styles.scss"
@@ -38,7 +44,6 @@
                 "node_modules"
               ]
             },
-            "scripts": [],
             "sourceMap": true,
             "allowedCommonJsDependencies": [
               "zone.js/dist/zone-error",
@@ -48,6 +53,7 @@
           },
           "configurations": {
             "production": {
+              "aot": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -58,7 +64,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "extractLicenses": true,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -75,15 +80,20 @@
               "optimization": false,
               "outputHashing": "all",
               "sourceMap": true,
-              "extractLicenses": true,
-              "buildOptimizer": false
+              "extractLicenses": true
             }
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "buildTarget": "workbench-client:build"
+            "buildTarget": "workbench-client:build",
+            "headers": {
+              "Cross-Origin-Opener-Policy": "same-origin",
+              "Cross-Origin-Embedder-Policy": "require-corp",
+              "Cross-Origin-Resource-Policy": "cross-origin",
+              "Access-Control-Allow-Origin": "*"
+            }
           },
           "configurations": {
             "production": {
@@ -92,13 +102,16 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular-builders/custom-webpack:karma",
           "options": {
             "codeCoverage": true,
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
+            "customWebpackConfig": {
+              "path": "./webpack.config.js"
+            },
             "assets": [
               "src/assets",
               "src/manifest.json"

karma.conf.js

@@ -1,6 +1,12 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/6.3/config/configuration-file.html
 
+var maxSigned32BitInt = Math.pow(2, 31) - 1;
+
+// GitHub Actions sets the CI environment variable to true
+// see: https://github.blog/changelog/2020-04-15-github-actions-sets-the-ci-environment-variable-to-true
+var isCi = process.env.CI === "true";
+
 module.exports = function (config) {
   config.set({
     basePath: "",
@@ -24,7 +30,18 @@ module.exports = function (config) {
       reports: ["html", "lcovonly", "text-summary", "cobertura"],
       fixWebpackSourcePaths: true,
     },
-    browserDisconnectTimeout: 30000,
+    // when running Karma locally, we do not want it to timeout
+    // if we added a timeout to locally run tests, we would only have the
+    // timeout duration of time to debug why the tests failed
+    //
+    // the timeout is a signed 32 bit integer and does not accept a JS Infinity
+    // therefore, we set the timeout to the maximum signed 32 bit integer value
+    // this gives us ~596 hours of time to debug the tests
+    //
+    // we reset the timeout to 30 seconds when running in CI so that CI tests
+    // do not hang indefinitely due to a test failure
+    browserDisconnectTimeout: isCi ? 30000 : maxSigned32BitInt,
+    browserNoActivityTimeout: isCi ? 30000 : maxSigned32BitInt,
     browserDisconnectTolerance: 3,
     browserConsoleLogOptions: {
       level: "debug",
@@ -39,6 +56,20 @@ module.exports = function (config) {
     browsers: ["Chrome"],
     singleRun: false,
     restartOnFileChange: true,
+    // serve these files through the karma server
+    // by serving these files through the karma server we can fetch and test
+    // against real files during testing
+    files: [
+      { pattern: "src/assets/test-assets/*", included: false, served: true },
+      {
+        // TODO: this should expose all of node_modules through the karma server
+        // so that we can dynamically import anything from node_modules
+        // without adding it to this list
+        pattern: __dirname + "/node_modules/@ecoacoustics/web-components/**",
+        included: false,
+        served: true,
+      },
+    ],
     viewport: {
       // Ensure you modify the viewports object (@test/helpers/general.ts) to match
       // the values declared here.