Upgrade angular version v12 to v17 (#308)

* updated to angular v13

* update to angular v14

* migrated to new mdc angular components for common lib

* migrated jupyter to mdc components

* updated to angular v15

* updated to angular 16

* updated to angular 17

* fixed TODOs from mdc migration

* package overrides

* updated node version in github actions

* fixed build operation

* fixed styling with existing volumes dropdown

* fixed the subscriptsizing

* fixed issue with some inputs being too large

* magin bottom fix

* fixed popovers

* fixed table text align

---------

Co-authored-by: Mathis Marcotte <[email protected]>

Author: mathis-marcotte

.github/workflows/common_frontend_tests.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Check frontend code formatting
         run: |
@@ -37,10 +37,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Setup node version to 12
+      - name: Setup node version to 18
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install Kubeflow common library dependecies
         run: |

.github/workflows/jwa_frontend_tests.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Check frontend formatting
         run: |
@@ -38,10 +38,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Setup node version to 16
+      - name: Setup node version to 18
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install Kubeflow common library dependecies
         run: |
@@ -65,10 +65,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Setup node version to 16
+      - name: Setup node version to 18
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install Kubeflow common library dependecies
         run: |

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 0: UI Build Stage
-FROM node:16-alpine as frontend
+FROM node:18-alpine as frontend
 WORKDIR /src
 ENV NG_CLI_ANALYTICS "ci"
 RUN apk add --no-cache --virtual .gyp python3 make g++

README.md

@@ -59,7 +59,7 @@ The front-end is configured to proxy requests to the local API server. It
 requires an environment variable (`KF_USER_ID`) to specify the current user –
 this is passed to the API server as an HTTP header.
 
-The following can be pasted in a script and executed. This uses the latest node lts/gallium version(v16.20.0) with npm v8(8.19.4).
+The following can be pasted in a script and executed. This uses the latest node lts/hydrogen version(v18.19.0) with npm v8(10.2.3).
 **NOTE**: `user` is when using vagrant. Use the email adress if it is the dev cluser (please never connect to prod directly)
 
 ```

frontend/common/kubeflow-common-lib/.eslintrc.json

@@ -16,8 +16,7 @@
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {

frontend/common/kubeflow-common-lib/.gitignore

@@ -40,6 +40,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.angular
 
 # System Files
 .DS_Store

frontend/common/kubeflow-common-lib/angular.json

@@ -1,7 +1,13 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
-    "analytics": false
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
+    "analytics": false,
+    "cache": {
+      "enabled": false
+    }
   },
   "version": 1,
   "newProjectRoot": "projects",
@@ -44,8 +50,12 @@
       }
     }
   },
-  "defaultProject": "kubeflow",
-  "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }