Release 3.22.0

.eslintrc.json

@@ -1,17 +1,13 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
   "overrides": [
     {
       "files": [
         "*.ts"
       ],
       "parserOptions": {
         "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
+          "tsconfig.json"
         ],
         "createDefaultProgram": true
       },
@@ -46,8 +42,15 @@
       "extends": [
         "plugin:@angular-eslint/template/recommended"
       ],
+      "rules": {}
+    },    {
+      "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"],
       "rules": {
+        "storybook/story-exports": "off"
       }
     }
+  ],
+  "extends": [
+    "plugin:storybook/recommended"
   ]
 }

.github/workflows/master-push.yml

@@ -80,4 +80,3 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # pass the project ID from the secrets through environment variable
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-

.github/workflows/percy.yml

@@ -0,0 +1,23 @@
+name: Percy
+on:
+  pull_request:
+    types: [ opened, synchronize, reopened, ready_for_review ]
+  push:
+    branches:
+      - master
+
+jobs:
+  run-visual-regression-tests:
+    # Run on (master) push or non-draft PRs
+    if: github.event_name == 'push' || github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: npm
+      - run: npm ci
+      - run: npm run percy-storybook
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.github/workflows/semantic-release.yml

@@ -22,8 +22,9 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
           SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
         with:
+          # Latest release-replace plugin fails https://github.com/jpoehnelt/semantic-release-replace-plugin/issues/223
           extra_plugins: |
-            @google/semantic-release-replace-plugin
+            semantic-release-replace-plugin@1.2.0
             @semantic-release/git
             @semantic-release/github
             semantic-release-slack-bot

.releaserc

@@ -7,7 +7,7 @@
   "plugins": [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
-    ["@google/semantic-release-replace-plugin", {
+    ["semantic-release-replace-plugin", {
       "replacements": [
         {
           "files": ["src/environments/environment.ts", "src/environments/environment.prod.ts"],

.storybook/main.js

@@ -1,15 +1,17 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-interactions",
   ],
-  "framework": "@storybook/angular",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  }
-}
+  framework: {
+    name: "@storybook/angular",
+    options: {
+      builder: {
+        lazyCompilation: true,
+        fsCache: true,
+      },
+    },
+  },
+};

.storybook/preview.ts

@@ -0,0 +1,26 @@
+import "@angular/localize/init";
+import * as buffer from "buffer";
+import * as MockDate from "mockdate";
+import { Preview } from "@storybook/angular";
+import { environment } from "../src/environments/environment";
+import { SessionType } from "../src/app/core/session/session-type";
+
+// fixing a mocked "TODAY" to have persistent stories for visual regression testing
+MockDate.set(new Date("2023-06-09"));
+// polyfill buffer here as well
+window.Buffer = buffer.Buffer;
+environment.production = false;
+environment.session_type = SessionType.mock;
+environment.demo_mode = false;
+
+export const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    options: {
+      storySort: {
+        order: ["Core", "Features", "*"],
+        method: "alphabetical",
+      },
+    },
+  },
+};

.storybook/tsconfig.json

@@ -1,19 +1,9 @@
 {
-  "extends": "../src/tsconfig.app.json",
-  "compilerOptions": {
-    "types": [
-      "node",
-      "jasmine"
-    ],
-    "allowSyntheticDefaultImports": true
-  },
-  "exclude": [
-    "../src/**/*.spec.ts",
-    "../projects/**/*.spec.ts"
-  ],
+  "extends": "../tsconfig.json",
   "include": [
-    "../src/**/*",
-    "../projects/**/*"
+    "../src/**/*.stories.ts",
+    "../src/polyfills.ts",
+    "preview.ts"
   ],
   "files": [
     "./typings.d.ts"

README.md

@@ -38,8 +38,7 @@ The overall architecture and tech stack including backend services looks like th
 1. This project depends on [npm (NodeJS)](https://www.npmjs.org/) to setup its dependencies. Please make sure you have npm installed.
 2. `git clone` this repository to get all the code with its configuration and requirements.
 3. `npm install` the dependencies (external libraries and packages) 
-4. create a config file `assets/config.json` by copying the default config `assets/config.default.json` that is part of the repository.
-5. `npm run start` to run your local dev server and get started.
+4. `npm run start` to run your local dev server and get started.
 
 ## Documentation
 Our detailed [Developer Documentation](https://aam-digital.github.io/ndb-core/documentation/additional-documentation/overview.html)

angular.json

@@ -56,7 +56,14 @@
                   "maximumWarning": "6kb"
                 }
               ],
-              "optimization": true,
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": false
+                },
+                "fonts": true
+              },
               "outputHashing": "all",
               "namedChunks": false,
               "extractLicenses": true,
@@ -136,7 +143,8 @@
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
           "options": {
-            "browserTarget": "ndb-core:build"
+            "browserTarget": "ndb-core:build",
+            "compodoc": false
           }
         },
         "lint": {

build/Dockerfile

@@ -64,7 +64,7 @@ RUN if [ "$SENTRY_AUTH_TOKEN" != "" ] ; then \
 
 ### PROD image
 
-FROM nginx:1.23.3-alpine
+FROM nginx:1.25.1-alpine
 COPY ./build/default.conf /etc/nginx/templates/default.conf
 COPY --from=builder /app/dist/ /usr/share/nginx/html
 # The port on which the app will run in the Docker container
@@ -73,6 +73,16 @@ ENV PORT=80
 ENV COUCHDB_URL="http://localhost"
 # The url to a nominatim instance, see https://nominatim.org/
 ENV NOMINATIM_URL="https://nominatim.openstreetmap.org"
+
+# content security policy headers
+ENV CSP_REPORT_URI=""
+# overwrite the Content-Security-Policy rules (report-uri is added automatically)
+## default includes all required whitelists for production server
+## to disable any CSP blocking, set to "default-src *  data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval'"
+ENV CSP="default-src 'self' 'unsafe-eval' data: https://sentry.io https://*.tile.openstreetmap.org/ https://matomo.aam-digital.org  https://*.aam-digital.com https://api.github.com/repos/Aam-Digital/ 'sha256-Sh1PNRUktjifFwuOicavxmlAcFpZMbUqQGiCIoKhDI8='; style-src 'self' 'unsafe-inline'"
+### 'sha256-Sh1PNRUktjifFwuOicavxmlAcFpZMbUqQGiCIoKhDI8=' for index.html writing browser details
+### 'unsafe-eval' required for pouchdb https://github.com/pouchdb/pouchdb/issues/7853#issuecomment-535020600
+
 # variables are inserted into the nginx config
-CMD envsubst '$$PORT $$COUCHDB_URL $$NOMINATIM_URL' < /etc/nginx/templates/default.conf > /etc/nginx/conf.d/default.conf &&\
+CMD envsubst '$$PORT $$COUCHDB_URL $$NOMINATIM_URL $$CSP $$CSP_REPORT_URI' < /etc/nginx/templates/default.conf > /etc/nginx/conf.d/default.conf &&\
     nginx -g 'daemon off;'

build/README.md

@@ -10,6 +10,14 @@ for every official (tagged) build.
 ## How to build & publish a new image
 You can simply create a new git tag and the CI setup will build and publish a docker image for that version.
 
+## Building locally
+Run the following commands from the root folder to build, run and kill the application on your local machine:
+```
+docker build -f build/Dockerfile -t aam/digital:latest .
+docker run -p=80:80 --name aam-digital aam/digital:latest
+docker stop aam-digital
+```
+
 ## How does the official release process work?
 We use [semantic-release](https://github.com/semantic-release/semantic-release) to automatically create new versions.
 Our process roughly follows the [GitFlow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) process,

build/default.conf

@@ -10,6 +10,12 @@ server {
 
     root /usr/share/nginx/html;
 
+    add_header Content-Security-Policy-Report-Only "${CSP}; report-uri ${CSP_REPORT_URI}";
+
+    # TODO: consider adding `trusted-types angular angular#unsafe-bypass; require-trusted-types-for 'script';` CSP in future
+    add_header X-Frame-Options: SAMEORIGIN; # only applies in older browsers, CSP frame-ancestors takes prevalence https://stackoverflow.com/a/40417609/1473411
+    add_header X-Content-Type-Options: nosniff;
+
     # Catch requests to the assets folder
     # These should not be forwarded to the index.html
     # This currently includes a fallback for previous requests including a locale

e2e/integration/MarkingChildAsDropout.cy.ts

@@ -3,8 +3,6 @@ describe("Scenario: Marking a child as dropout - E2E test", function () {
     // go to a child
     cy.visit("child");
     cy.get("tr").eq(2).click();
-    // save the name of this Child to the variable
-    cy.get(".mat-title > .remove-margin-bottom").invoke("text").as("childName");
   });
 
   it("WHEN I select a dropout date for this child", () => {
@@ -19,6 +17,8 @@ describe("Scenario: Marking a child as dropout - E2E test", function () {
     cy.get(".mat-calendar-body-active:visible").click();
     // click on button with the content "Save"
     cy.get(".form-buttons-wrapper:visible").contains("button", "Save").click();
+    // save the name of this Child to the variable
+    cy.get(".mat-title > .remove-margin-bottom").invoke("text").as("childName");
   });
 
   it("THEN I should not see this child in the list of all children at first", function () {
@@ -34,7 +34,7 @@ describe("Scenario: Marking a child as dropout - E2E test", function () {
 
   it("AND I should see the child when I activate the 'inactive' filter", function () {
     // click on the button with the content "Inactive"
-    cy.get('[ng-reflect-placeholder="isActive"]').click();
+    cy.contains("span", "Active").click();
     cy.contains("span", "Inactive").should("be.visible").click();
     // find at this table the name of child and it should exist
     cy.get("table").contains(this.childName.trim()).should("exist");

e2e/integration/RecordingAttendanceOfChild.cy.ts

@@ -1,6 +1,7 @@
 describe("Scenario: Recording attendance of a child - E2E test", function () {
   before("GIVEN A specific child is attending a specific class", function () {
-    cy.visit("attendance");
+    cy.visit("");
+    cy.get(`[ng-reflect-angulartics-label="Attendance"]`).click();
   });
 
   it("WHEN I record attendance for this class", () => {

e2e/support/commands.ts

@@ -27,14 +27,11 @@ Cypress.Commands.add("create", create);
 // Overwriting default visit function to wait for index creation
 Cypress.Commands.overwrite("visit", (originalFun, url, options) => {
   originalFun(url, options);
-  cy.get("app-search", { timeout: 10000 }).should("be.visible");
   // wait for demo data generation
-  cy.wait(4000);
-  cy.contains("div", "Generating sample data", {
-    timeout: 20000,
-  }).should("not.exist");
-  // wait for indexing
-  cy.contains("button", "Continue in background", { timeout: 10000 }).should(
+  cy.contains("button", "Continue in background", { timeout: 20000 }).should(
+    "exist"
+  );
+  cy.contains("button", "Continue in background", { timeout: 20000 }).should(
     "not.exist"
   );
 });

e2e/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["**/*.ts"],
+  "include": ["integration"],
   "compilerOptions": {
     "sourceMap": false,
-    "types": ["cypress", "node"]
+    "types": ["cypress"]
   }
 }

karma.conf.js

@@ -25,7 +25,6 @@ module.exports = function (config) {
     plugins: [
       require("karma-jasmine"),
       require("karma-chrome-launcher"),
-      require("karma-firefox-launcher"),
       require("karma-jasmine-html-reporter"),
       require("karma-coverage"),
       require("@angular-devkit/build-angular/plugins/karma"),