fix: Resolve errors in e2e tests for cypress in Katib UI

.github/workflows/test-node.yaml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 12.18.1
+          node-version: 16.20.2
 
       - name: Format katib code
         run: |
@@ -44,7 +44,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 12.18.1
+          node-version: 16.20.2
 
       - name: Fetch Kubeflow and install common code dependencies
         run: |
@@ -74,10 +74,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup node version to 12
+      - name: Setup node version to 16
         uses: actions/setup-node@v4
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Fetch Kubeflow and install common code dependencies
         run: |

cmd/ui/v1beta1/Dockerfile

@@ -11,23 +11,35 @@ RUN git clone https://github.com/kubeflow/kubeflow.git && \
     git checkout $COMMIT
 
 # --- Build the frontend kubeflow library ---
-FROM node:12 AS frontend-kubeflow-lib
+FROM node:16 AS frontend-kubeflow-lib
 
 WORKDIR /src
 
 ARG LIB=/kf/kubeflow/components/crud-web-apps/common/frontend/kubeflow-common-lib
 COPY --from=fetch-kubeflow-kubeflow $LIB/package*.json ./
-RUN npm ci
+RUN npm config set fetch-retry-mintimeout 200000 && \
+    npm config set fetch-retry-maxtimeout 1200000 && \
+    npm config get registry && \
+    npm config set registry https://registry.npmjs.org/ && \
+    npm config get https-proxy && \
+    npm config rm https-proxy && \
+    npm ci
 
 COPY --from=fetch-kubeflow-kubeflow $LIB/ ./
 RUN npm run build
 
 # --- Build the frontend ---
-FROM node:12 AS frontend
+FROM node:16 AS frontend
 
 WORKDIR /src
 COPY ./pkg/ui/v1beta1/frontend/package*.json ./
-RUN npm ci
+RUN npm config set fetch-retry-mintimeout 20000 && \
+    npm config set fetch-retry-maxtimeout 120000 && \
+    npm config get registry && \
+    npm config set registry https://registry.npmjs.org/ && \
+    npm config get https-proxy && \
+    npm config rm https-proxy && \
+    npm ci
 
 COPY ./pkg/ui/v1beta1/frontend/ .
 COPY --from=frontend-kubeflow-lib /src/dist/kubeflow/ ./node_modules/kubeflow/

pkg/ui/v1beta1/README.md

@@ -19,7 +19,7 @@ To make changes to the UI you need to install:
 
 - Tools, defined [here](https://github.com/kubeflow/katib/blob/master/docs/developer-guide.md#requirements).
 
-- `node` (v12.18.1) and `npm` (v6.13). Recommended to install `node` and `npm` using [`nvm`](https://github.com/nvm-sh/nvm). After installing `nvm`, you can run `nvm install 12.18.1` to install `node` version 12.18.1 and run `nvm use 12.18.1` to use that version.
+- `node` (v16.20.2) and `npm` (v8.19.4). Recommended to install `node` and `npm` using [`nvm`](https://github.com/nvm-sh/nvm). After installing `nvm`, you can run `nvm install 16.20.2` to install `node` version 16.20.2 and run `nvm use 16.20.2` to use that version.
 
 ## Development
 

pkg/ui/v1beta1/frontend/COMMIT

@@ -1 +1 @@
-046c6d3c8
+78969ee82

pkg/ui/v1beta1/frontend/README.md

@@ -12,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--configuration "production"` flag for a production build.
 
 ## Running unit tests
 

pkg/ui/v1beta1/frontend/angular.json

@@ -17,6 +17,10 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "allowedCommonJsDependencies": [
+              "date-fns",
+              "lodash"
+            ],
             "preserveSymlinks": true,
             "outputPath": "dist/frontend",
             "index": "src/index.html",

pkg/ui/v1beta1/frontend/cypress/e2e/index-page.cy.ts

@@ -52,19 +52,19 @@ describe('Index page', () => {
       const status = parseStatus(experiments[i]);
       if (status.phase === STATUS_TYPE.READY) {
         cy.wrap(element)
-          .find('lib-status>mat-icon')
+          .find('lib-status-icon>mat-icon')
           .should('contain', 'check_circle');
       } else if (status.phase === STATUS_TYPE.STOPPED) {
         cy.wrap(element)
-          .find('lib-status>lib-icon')
+          .find('lib-status-icon>lib-icon')
           .should('have.attr', 'icon', 'custom:stoppedResource');
       } else if (status.phase === STATUS_TYPE.UNAVAILABLE) {
         cy.wrap(element)
-          .find('lib-status>mat-icon')
+          .find('lib-status-icon>mat-icon')
           .should('contain', 'timelapse');
       } else if (status.phase === STATUS_TYPE.WARNING) {
         cy.wrap(element)
-          .find('lib-status>mat-icon')
+          .find('lib-status-icon>mat-icon')
           .should('contain', 'warning');
       } else if (
         status.phase === STATUS_TYPE.WAITING ||