fix: Resolve errors in e2e tests for cypress

Signed-off-by: tariq-hasan <[email protected]>

Author: tariq-hasan

.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: 14.21.3
 
       - name: Format katib code
         run: |
@@ -44,12 +44,12 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 12.18.1
+          node-version: 14.21.3
 
       - 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 +74,15 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup node version to 12
+      - name: Setup node version to 14
         uses: actions/setup-node@v4
         with:
-          node-version: 12
+          node-version: 14
 
       - 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

cmd/ui/v1beta1/Dockerfile

@@ -5,13 +5,13 @@ 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:14 AS frontend-kubeflow-lib
 
 WORKDIR /src
 
@@ -23,7 +23,7 @@ COPY --from=fetch-kubeflow-kubeflow $LIB/ ./
 RUN npm run build
 
 # --- Build the frontend ---
-FROM node:12 AS frontend
+FROM node:14 AS frontend
 
 WORKDIR /src
 COPY ./pkg/ui/v1beta1/frontend/package*.json ./

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` (v14.21.3) 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 14.21.3` to install `node` version 14.21.3 and run `nvm use 14.21.3` to use that version.
 
 ## Development
 

pkg/ui/v1beta1/frontend/COMMIT

@@ -1 +1 @@
-046c6d3c8
+bb21632a5

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