Feat/angular 16 upgrade (#124)

* feat(devcontainer): upgrade to node 18

* feat(deps): angular 14 update

* feat(deps): angular material 14 update

* feat(deps): angular 15 update

* feat(deps): angular material 15 update

* feat(deps): angular 16 update

* feat(deps): angular material 16 update

* feat(deps): replace deprecated dependency

* feat(deps): update openapi and test libs

* feat(workflow): update versions

* chore: bump version

.browserslistrc

@@ -1,11 +1,9 @@
 # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries
-#
-# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

.devcontainer/Dockerfile

@@ -1,55 +1,14 @@
-#-------------------------------------------------------------------------------------------------------------
-# Copyright (c) Microsoft Corporation. All rights reserved.
-# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
-#-------------------------------------------------------------------------------------------------------------
-
-FROM node:lts
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye
 
 # Avoid warnings by switching to noninteractive
 ENV DEBIAN_FRONTEND=noninteractive
 
-# The node image comes with a base non-root 'node' user which this Dockerfile
-# gives sudo access. However, for Linux, this user's GID/UID must match your local
-# user UID/GID to avoid permission issues with bind mounts. Update USER_UID / USER_GID 
-# if yours is not 1000. See https://aka.ms/vscode-remote/containers/non-root-user.
-ARG USER_UID=502
-ARG USER_GID=$USER_UID
-
 # Configure apt and install packages
 RUN apt-get update \
-    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \ 
-    #
-    # Verify git and needed tools are installed
-    && apt-get -y install git iproute2 procps \
-    #
-    # Remove outdated yarn from /opt and install via package 
-    # so it can be easily updated via apt-get upgrade yarn
-    && rm -rf /opt/yarn-* \
-    && rm -f /usr/local/bin/yarn \
-    && rm -f /usr/local/bin/yarnpkg \
-    && apt-get install -y curl apt-transport-https lsb-release \
-    && curl -sS https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/pubkey.gpg | apt-key add - 2>/dev/null \
-    && echo "deb https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
-    && apt-get update \
-    && apt-get -y install --no-install-recommends yarn \
-    #
-    # Install tslint and typescript globally
-    && npm install -g tslint typescript \
-    # Install angular CLI globally
-    && npm install -g @angular/cli \
     # Install the bits required for ChromeHeadless tests
     # Using Chromium instead of full Chrome (saves having to add additional download sites which
     # may be blocked in some environments.
     && apt-get install -y chromium chromium-l10n \
-    #
-    # [Optional] Update a non-root user to match UID/GID - see https://aka.ms/vscode-remote/containers/non-root-user.
-    && if [ "$USER_GID" != "1000" ]; then groupmod node --gid $USER_GID; fi \
-    && if [ "$USER_UID" != "1000" ]; then usermod --uid $USER_UID node; fi \
-    # [Optional] Add add sudo support for non-root user
-    && apt-get install -y sudo \
-    && echo node ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/node \
-    && chmod 0440 /etc/sudoers.d/node \
-    #
     # Clean up
     && apt-get autoremove -y \
     && apt-get clean -y \

.devcontainer/devcontainer.json

@@ -1,31 +1,23 @@
-// For format details, see https://aka.ms/vscode-remote/devcontainer.json or the definition README at
-// https://github.com/microsoft/vscode-dev-containers/tree/master/containers/typescript-node-lts
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "Node.js (latest LTS) & TypeScript",
-	"dockerFile": "Dockerfile",
-	//"image": "docker.pkg.github.com/dhutchison/container-images/angular-dev:0.1",
+	"name": "Node.js & TypeScript",
+	"build": {
+		"dockerfile": "Dockerfile"
+	}
 
-	// Use 'settings' to set *default* container specific settings.json values on container create. 
-	// You can edit these settings after create using File > Preferences > Settings > Remote.
-	"settings": { 
-		"terminal.integrated.shell.linux": "/bin/bash"
-	},
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
 
-	// Uncomment the next line if you want to publish any ports.
-	"appPort": [4200],
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
 
-	// Uncomment the next line to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": ""
 
-	// Uncomment the next line to use a non-root user. On Linux, this will prevent
-	// new files getting created as root, but you may need to update the USER_UID
-	// and USER_GID in .devcontainer/Dockerfile to match your user if not 1000.
-	"runArgs": [ "-u", "node" ],
+	// Configure tool-specific properties.
+	// "customizations": {},
 
-	// Add the IDs of extensions you want installed when the container is created in the array below.
-	"extensions": [
-		"ms-vscode.vscode-typescript-tslint-plugin",
-		"ms-azuretools.vscode-docker", 
-		"eamodio.gitlens"
-	]
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
 }

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.github/workflows/build-deploy.yml

@@ -8,26 +8,44 @@ on:
   push:
     branches: [ master ]
 
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job
-  build-test-deploy:
+
+  build-test:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
     # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
     - name: Checkout 🛎️
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
       with:
         # Shallow clones should be disabled for a better relevancy of sonar analysis
         fetch-depth: 0
     # This installs node and npm for us
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '18'
         cache: 'npm'
+    - name: Setup Pages
+      id: pages
+      uses: actions/configure-pages@v4
     # Lint and Build
     - name: Install, Lint and Build 🔧
       run: |
@@ -45,11 +63,18 @@ jobs:
         # Needed to get PR information, if any
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
-    # Deploy to GH pages
-    - name: Deploy 🚀
-      uses: JamesIves/github-pages-deploy-action@3.7.1
-      with:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        BRANCH: gh-pages # The branch the action should deploy to.
-        FOLDER: dist # The folder the action should deploy.
-        CLEAN: true
+    - name: Upload artifact
+      # Automatically uploads an artifact from the './_site' directory by default
+      uses: actions/upload-pages-artifact@v2
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build-test
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v3

.github/workflows/build-test.yml

@@ -20,14 +20,14 @@ jobs:
     steps:
     # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
       with:
         # Shallow clones should be disabled for a better relevancy of sonar analysis
         fetch-depth: 0
     # This installs node and npm for us
-    - uses: actions/setup-node@v2
+    - uses: actions/setup-node@v4
       with:
-        node-version: '16'
+        node-version: '18'
         cache: 'npm'
     # Lint and Build
     - name: Install, Lint and Build

angular.json

@@ -122,8 +122,10 @@
       }
     }
   },
-  "defaultProject": "OpenAPIVisualiser",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
+    "analytics": false
   }
 }

cypress.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+    e2e: {
+        baseUrl: "http://localhost:4200",
+        video: false,
+        specPattern: 'cypress/integration/*_spec.js',
+        setupNodeEvents(on, config) {
+            require('@cypress/code-coverage/task')(on, config)
+            // include any other plugin code...
+
+            // It's IMPORTANT to return the config object
+            // with any changed environment variables
+            return config
+          },
+    },
+})

cypress/support/e2e.js

@@ -0,0 +1,3 @@
+
+// Import cypress code-coverage collector plugin
+import '@cypress/code-coverage/support';