Update to Angular 16

- Update libs to Angular 16 and update remaining libs
- Update issuer to Keycloak
- Fix material legacy components

.eslintrc.json

@@ -2,7 +2,9 @@
   "root": true,
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
         "project": [
           "tsconfig.*?.json"
@@ -18,28 +20,61 @@
         "plugin:@angular-eslint/recommended"
       ],
       "rules": {
-        "max-len": ["error", { "code": 140, "ignorePattern": "import .*" }],
+        "max-len": [
+          "error",
+          {
+            "code": 140,
+            "ignorePattern": "import .*"
+          }
+        ],
         "@angular-eslint/directive-selector": [
           "error",
-          { "type": "attribute", "prefix": "app", "style": "camelCase" }
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
         ],
         "@angular-eslint/component-selector": [
           "error",
-          { "type": "element", "prefix": "app", "style": "kebab-case" }
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
         ],
-        "quotes": ["error", "single", { "allowTemplateLiterals": true }]
+        "quotes": [
+          "error",
+          "single",
+          {
+            "allowTemplateLiterals": true
+          }
+        ]
       }
     },
     {
-      "files": ["*.component.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "files": [
+        "*.component.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
       "rules": {
-        "max-len": ["error", { "code": 140 }]
+        "max-len": [
+          "error",
+          {
+            "code": 140
+          }
+        ]
       }
     },
     {
-      "files": ["*.component.ts"],
-      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
+      "files": [
+        "*.component.ts"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ]
     }
   ]
 }

.gitlab-ci.yml

-image: cypress/browsers:node16.13.0-chrome95-ff94
+image: cypress/browsers:node18.12.0-chrome103-ff107
 
 stages:
   - codeStyle

README.md

@@ -4,6 +4,6 @@
 
 1.  Run `npm install`.
 2.  Install json-server `npm install -g json-server`.
-3.  Run the server with provided parameters `npm run json-server`.
+3.  Run the server with provided parameters `npm run api`.
 4.  Run the app in local environment and ssl `npm start`
-5.  Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+5.  Navigate to `https://localhost:4200/`. The app will automatically reload if you change any of the source files.

VERSION.txt

+16.0.0 Update to Angular 16 and update local issuer to keycloak.
 15.0.0 Update to Angular 15
 14.0.2 Add export of access phase and task from public api.
 14.0.1 Fix markdown after Sentinel update.

package.json

@@ -18,47 +18,47 @@
     "ci-build-and-pack": "npm ci --cache .npm --prefer-offline && npm run build-library && npm run create-package",
     "ci-publish-package": "cd dist/kypo-adaptive-transition-visualization && npm publish",
     "prepare": "husky install",
-    "json-server": "json-server -w utils/json-server/db.json -r utils/json-server/routes.json"
+    "api": "json-server -w utils/json-server/db.json -r utils/json-server/routes.json"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.10",
-    "@angular/cdk": "^15.2.9",
-    "@angular/common": "^15.2.10",
-    "@angular/compiler": "^15.2.10",
-    "@angular/core": "^15.2.10",
-    "@angular/forms": "^15.2.10",
-    "@angular/material": "^15.2.9",
-    "@angular/platform-browser": "^15.2.10",
-    "@angular/platform-browser-dynamic": "^15.2.10",
-    "@angular/router": "^15.2.10",
-    "@sentinel/auth": "^15.3.0",
-    "@sentinel/common": "^15.3.0",
-    "@sentinel/components": "^15.3.0",
-    "@types/d3": "^7.4.0",
-    "angular-oauth2-oidc": "^15.0.1",
-    "angular-oauth2-oidc-jwks": "^15.0.1",
-    "d3": "^7.5.0",
-    "marked": "^4.0.17",
+    "@angular/animations": "^16.2.12",
+    "@angular/cdk": "^16.2.14",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/material": "^16.2.14",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/router": "^16.2.12",
+    "@sentinel/auth": "~16.1.0",
+    "@sentinel/common": "~16.2.3",
+    "@sentinel/components": "~16.3.0",
+    "@types/d3": "^7.4.3",
+    "angular-oauth2-oidc": "^16.0.0",
+    "angular-oauth2-oidc-jwks": "^16.0.0",
+    "d3": "^7.9.0",
+    "marked": "^12.0.2",
     "rxjs": "^7.5.5",
     "tslib": "^2.4.0",
-    "zone.js": "~0.11.6"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.10",
-    "@angular-eslint/builder": "^15.2.1",
-    "@angular-eslint/eslint-plugin": "^15.2.1",
-    "@angular-eslint/eslint-plugin-template": "^15.2.1",
-    "@angular-eslint/schematics": "^15.2.1",
-    "@angular-eslint/template-parser": "^15.2.1",
-    "@angular/cli": "^15.2.10",
-    "@angular/compiler-cli": "^15.2.10",
+    "@angular-devkit/build-angular": "^16.2.14",
+    "@angular-eslint/builder": "^16.3.1",
+    "@angular-eslint/eslint-plugin": "^16.3.1",
+    "@angular-eslint/eslint-plugin-template": "^16.3.1",
+    "@angular-eslint/schematics": "^16.3.1",
+    "@angular-eslint/template-parser": "^16.3.1",
+    "@angular/cli": "^16.2.14",
+    "@angular/compiler-cli": "^16.2.12",
     "@types/jasmine": "~4.0.3",
     "@types/marked": "^4.0.3",
     "@types/node": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
-    "eslint": "^8.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "eslint": "^8.39.0",
     "husky": "^8.0.1",
     "jasmine-core": "~4.2.0",
     "json-server": "^0.17.4",
@@ -67,7 +67,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^15.2.2",
+    "ng-packagr": "^16.2.3",
     "prettier": "^2.7.1",
     "typescript": "~4.9.5"
   }

projects/adaptive-transition-visualization-example-app/.eslintrc.json

 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": [
+    "../../.eslintrc.json"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
-        "project": ["projects/training-agenda-example-app/tsconfig.*?.json"],
+        "project": [
+          "projects/training-agenda-example-app/tsconfig.*?.json"
+        ],
         "createDefaultProgram": true
       },
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
-          { "type": "attribute", "prefix": "app", "style": "camelCase" }
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
         ],
         "@angular-eslint/component-selector": [
           "error",
-          { "type": "element", "prefix": "app", "style": "kebab-case" }
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
         ]
       }
     },
     {
-      "files": ["*.component.html"],
+      "files": [
+        "*.component.html"
+      ],
       "rules": {}
     }
   ]

projects/adaptive-transition-visualization-example-app/src/app/components/visualization/visualization.module.ts

@@ -4,7 +4,7 @@ import { VisualizationRoutingModule } from './visualization-routing.module';
 import { VisualizationComponent } from './visualization.component';
 import { KypoAdaptiveTransitionVisualizationModule } from '@muni-kypo-crp/adaptive-transition-visualization';
 import { CustomConfig } from '../../custom-config';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
   declarations: [VisualizationComponent],

projects/adaptive-transition-visualization-example-app/src/environments/environment.prod.ts

@@ -2,25 +2,24 @@
 // `ng build --configuration production` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
+const BASE_URL = 'https://172.19.0.22';
 const HOME_URL = 'https://localhost:4200';
-
 export const environment = {
   production: true,
-  trainingServiceUrl: 'https://172.19.0.22/kypo-rest-training/api/v1/',
-  elasticSearchServiceUrl: 'https://172.19.0.22/kypo-elasticsearch-service/api/v1/',
+  trainingServiceUrl: BASE_URL + '/kypo-rest-training/api/v1/',
+  elasticSearchServiceUrl: BASE_URL + '/kypo-elasticsearch-service/api/v1/',
   // URL of the SPA to redirect the user after silent refresh
   silentRefreshRedirectUri: HOME_URL,
   // URL of the SPA to redirect the user to after login
   redirectUri: HOME_URL,
   // The SPA's id. The SPA is registered with this id at the config-server
-  scope: 'openid profile email',
   sessionChecksEnabled: false,
   authConfig: {
     guardMainPageRedirect: 'visualization',
     guardLoginPageRedirect: 'login',
-    interceptorAllowedUrls: ['https://172.19.0.22'],
+    interceptorAllowedUrls: [BASE_URL],
     authorizationStrategyConfig: {
-      authorizationUrl: 'https://172.19.0.22/kypo-rest-user-and-group/api/v1/users/info',
+      authorizationUrl: BASE_URL + '/kypo-rest-user-and-group/api/v1/users/info',
     },
     providers: [
       {
@@ -28,12 +27,14 @@ export const environment = {
         textColor: 'white',
         backgroundColor: '#002776',
         oidcConfig: {
-          issuer: 'https://172.19.0.22:443/csirtmu-dummy-issuer-server/',
-          clientId: '0bf33f00-2700-4efb-ab09-186076f85c7d',
+          requireHttps: true,
+          issuer: BASE_URL + '/keycloak/realms/KYPO',
+          clientId: 'KYPO-client',
           redirectUri: HOME_URL,
-          scope: 'openid email profile',
-          logoutUrl: 'https://172.19.0.22/csirtmu-dummy-issuer-server/endsession',
-          postLogoutRedirectUri: HOME_URL,
+          scope: 'openid email profile offline_access',
+          logoutUrl: BASE_URL + '/keycloak/realms/KYPO/protocol/openid-connect/logout',
+          silentRefreshRedirectUri: BASE_URL + '/silent-refresh.html',
+          postLogoutRedirectUri: HOME_URL + '/logout-confirmed',
           clearHashAfterLogin: true,
         },
       },

projects/adaptive-transition-visualization-example-app/src/environments/environment.ts

@@ -2,17 +2,15 @@
 // `ng build --configuration production` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
+const BASE_URL = 'http://localhost:3000'; // 'https://172.19.0.22';
 const HOME_URL = 'https://localhost:4200';
 
-// Server url
-export const baseURL = 'http://localhost:3000';
-
-export const userAngGroupURL = baseURL + '/kypo-rest-user-and-group/api/v1/';
+export const userAngGroupURL = BASE_URL + '/kypo-rest-user-and-group/api/v1/';
 
 export const environment = {
   production: false,
-  trainingServiceUrl: 'http://localhost:3000/kypo-adaptive-training/api/v1/',
-  elasticSearchServiceUrl: 'https://172.19.0.22/kypo-elasticsearch-service/api/v1/',
+  trainingServiceUrl: BASE_URL + '/kypo-adaptive-training/api/v1/',
+  elasticSearchServiceUrl: BASE_URL + '/kypo-elasticsearch-service/api/v1/',
   // URL of the SPA to redirect the user after silent refresh
   silentRefreshRedirectUri: HOME_URL,
   // URL of the SPA to redirect the user to after login
@@ -24,23 +22,25 @@ export const environment = {
     interceptorAllowedUrls: [
       // all matching urls will have authorization token header
       'http://localhost',
-      baseURL,
+      BASE_URL,
     ],
     authorizationStrategyConfig: {
       authorizationUrl: userAngGroupURL + 'users/info',
     },
     providers: [
       {
-        label: 'Login with MUNI',
+        label: 'Login with local issuer',
         textColor: 'white',
         backgroundColor: '#002776',
         oidcConfig: {
-          issuer: 'https://172.19.0.22:443/csirtmu-dummy-issuer-server/',
-          clientId: 'bxPXhdWNeqhWssxbSGiRjQbnQqmqxDdiTTDJ',
+          requireHttps: true,
+          issuer: BASE_URL + '/keycloak/realms/KYPO',
+          clientId: 'KYPO-client',
           redirectUri: HOME_URL,
-          scope: 'openid email profile',
-          logoutUrl: 'https://172.19.0.22/csirtmu-dummy-issuer-server/endsession',
-          postLogoutRedirectUri: HOME_URL,
+          scope: 'openid email profile offline_access',
+          logoutUrl: BASE_URL + '/keycloak/realms/KYPO/protocol/openid-connect/logout',
+          silentRefreshRedirectUri: BASE_URL + '/silent-refresh.html',
+          postLogoutRedirectUri: HOME_URL + '/logout-confirmed',
           clearHashAfterLogin: true,
         },
       },

projects/kypo-adaptive-transition-visualization/.eslintrc.json

 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": [
+    "../../.eslintrc.json"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
-        "project": ["projects/kypo-adaptive-transition-visualization/tsconfig.*?.json"],
+        "project": [
+          "projects/kypo-adaptive-transition-visualization/tsconfig.*?.json"
+        ],
         "createDefaultProgram": true
       },
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
-          { "type": "attribute", "prefix": "kypo", "style": "camelCase" }
+          {
+            "type": "attribute",
+            "prefix": "kypo",
+            "style": "camelCase"
+          }
         ],
         "@angular-eslint/component-selector": [
           "error",
-          { "type": "element", "prefix": "kypo", "style": "kebab-case" }
+          {
+            "type": "element",
+            "prefix": "kypo",
+            "style": "kebab-case"
+          }
         ]
       }
     },
     {
-      "files": ["*.component.html"],
+      "files": [
+        "*.component.html"
+      ],
       "rules": {}
     }
   ]

projects/kypo-adaptive-transition-visualization/package.json

@@ -2,10 +2,10 @@
   "name": "@muni-kypo-crp/adaptive-transition-visualization",
   "version": "15.0.0",
   "peerDependencies": {
-    "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0"
+    "@angular/common": "^16.2.12",
+    "@angular/core": "^16.2.12"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.4.0"
   }
 }

projects/kypo-adaptive-transition-visualization/src/components/adaptive-transition-visualization-wrapper/adaptive-transition-visualization-wrapper.component.scss

@@ -5,7 +5,6 @@
 
 .svg {
   width: 100%;
-  // margin-bottom: 1%;
 }
 
 // hide axis lines
@@ -37,4 +36,4 @@
   border: 0px;
 	border-radius: 3px;
   color: white;
-}
\ No newline at end of file
+}

projects/kypo-adaptive-transition-visualization/src/kypo-adaptive-transition-visualization.component.scss

 .container {
     height: 100%;
-    margin: 0px 30px;
+    margin: 20px 30px;
     display: flex;
     flex-direction: column;
     justify-content: stretch;
@@ -11,4 +11,3 @@
   text {
     font-family:sans-serif;
   }
-  
\ No newline at end of file

projects/kypo-adaptive-transition-visualization/src/kypo-adaptive-transition-visualization.module.ts

@@ -29,7 +29,7 @@ import { MultipleChoiceQuestionDetailComponent } from './components/task-preview
 import { FreeFormQuestionDetailComponent } from './components/task-preview/questionnaire-task-preview/abstract-question/free-form-question-detail/free-form-question-detail.component';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { KypoAdaptiveTransitionVisualizationPollingService } from './services/kypo-adaptive-transition-visualization-polling.service';
 import { KypoAdaptiveTransitionVisualizationService } from './services/kypo-adaptive-transition-visualization.service';
 import { KypoAdaptiveTransitionVisualizationApi } from './api/kypo-adaptive-transition-visualization-api.service';

tsconfig.json

@@ -9,7 +9,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "paths": {
-      "@muni-kypo-crp/adaptive-transition-visualization": ["./src/public-api.ts"],
+      "@muni-kypo-crp/adaptive-transition-visualization": ["./src/public-api.ts"]
     },
     "sourceMap": true,
     "declaration": false,
@@ -17,7 +17,8 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "es2022",
+    "useDefineForClassFields": false,
     "module": "esnext",
     "typeRoots": [
       "node_modules/@types"

utils/json-server/db.json

@@ -23,7 +23,7 @@
         "title": "title",
         "order": 0,
         "answer": "answer",
-        "content": "content",
+        "content": "An example task 1 content.",
         "solution": "solution",
         "incorrect_answer_limit": 10,
         "modify_sandbox": false,
@@ -33,7 +33,7 @@
           "title": "title",
           "order": 1,
           "answer": "answer",
-          "content": "content",
+          "content": "An example task 2 content.",
           "solution": "solution",
           "incorrect_answer_limit": 10,
           "modify_sandbox": false,