fix: Resolve errors in e2e tests for cypress

Author: tariq-hasan

.github/workflows/test-node.yaml

@@ -1,6 +1,7 @@
 name: Frontend Test
 
 on:
+  push:
   pull_request:
     paths:
       - pkg/ui/v1beta1/frontend/**
@@ -21,7 +22,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,12 +45,12 @@ 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: |
           COMMIT=$(cat pkg/ui/v1beta1/frontend/COMMIT)
-          cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
+          cd /tmp && git clone https://github.com/tariq-hasan/kubeflow.git
           cd kubeflow
           git checkout $COMMIT
           cd components/crud-web-apps/common/frontend/kubeflow-common-lib
@@ -74,15 +75,15 @@ 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: |
           COMMIT=$(cat pkg/ui/v1beta1/frontend/COMMIT)
-          cd /tmp && git clone https://github.com/kubeflow/kubeflow.git
+          cd /tmp && git clone https://github.com/tariq-hasan/kubeflow.git
           cd kubeflow
           git checkout $COMMIT
           cd components/crud-web-apps/common/frontend/kubeflow-common-lib
@@ -97,5 +98,4 @@ jobs:
       - name: Serve UI & run Cypress tests in Chrome and Firefox
         run: |
           cd pkg/ui/v1beta1/frontend
-          npm run start & npx wait-on http://localhost:4200
-          npm run ui-test-ci-all
+          npm run start & npx wait-on http://localhost:4200 && npm run ui-test-ci-all

cmd/ui/v1beta1/Dockerfile

@@ -5,29 +5,41 @@ RUN apt-get update && apt-get install git -y
 
 WORKDIR /kf
 COPY ./pkg/ui/v1beta1/frontend/COMMIT ./
-RUN git clone https://github.com/kubeflow/kubeflow.git && \
+RUN git clone https://github.com/tariq-hasan/kubeflow.git && \
     COMMIT=$(cat ./COMMIT) && \
     cd kubeflow && \
     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 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 --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
+45e439248

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 ||