Merge pull request #13213 from cyril-ui-developer/update-builder-imag…

…e-nodejs-v14-to-v16

CONSOLE-3777: Update NodeJS v14 to v18

.ci-operator.yaml

@@ -1,4 +1,4 @@
 build_root_image:
   name: tectonic-console-builder
   namespace: ci
-  tag: v25
+  tag: v26

Dockerfile.builder

@@ -16,7 +16,7 @@ MAINTAINER Ed Rooth - CoreOS
 RUN go install github.com/jstemmer/go-junit-report@latest
 
 ### Install NodeJS and yarn
-ENV NODE_VERSION="v14.21.3"
+ENV NODE_VERSION="v18.18.1"
 ENV YARN_VERSION="v1.22.10"
 
 # yarn needs a home writable by any user running the container

Dockerfile.dev

@@ -1,6 +1,6 @@
 # Dockerfile to build console image from pre-built front end.
 
-FROM quay.io/coreos/tectonic-console-builder:v25 AS build
+FROM quay.io/coreos/tectonic-console-builder:v26 AS build
 RUN mkdir -p /go/src/github.com/openshift/console/
 ADD . /go/src/github.com/openshift/console/
 WORKDIR /go/src/github.com/openshift/console/

Dockerfile.plugins.demo

@@ -3,7 +3,7 @@
 # See dynamic-demo-plugin/README.md for details.
 
 # Stage 0: build the demo plugin
-FROM quay.io/coreos/tectonic-console-builder:v25 AS build
+FROM quay.io/coreos/tectonic-console-builder:v26 AS build
 
 RUN mkdir -p /src/console
 COPY . /src/console

README.md

@@ -15,7 +15,7 @@ The console is a more friendly `kubectl` in the form of a single page webapp. It
 
 ### Dependencies:
 
-1. [node.js](https://nodejs.org/) >= 14 & [yarn](https://yarnpkg.com/en/docs/install) >= 1.20
+1. [node.js](https://nodejs.org/) >= 18 & [yarn](https://yarnpkg.com/en/docs/install) >= 1.20
 2. [go](https://golang.org/) >= 1.18+
 3. [oc](https://mirror.openshift.com/pub/openshift-v4/clients/oc/4.4/) or [kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/) and an OpenShift or Kubernetes cluster
 4. [jq](https://stedolan.github.io/jq/download/) (for `contrib/environment.sh`)
@@ -108,6 +108,25 @@ In order to enable the monitoring UI and see the "Observe" navigation item while
   export BRIDGE_PLUGINS="monitoring-plugin=http://localhost:9001"
   ```
 
+#### Updating `tectonic-console-builder` image
+Updating `tectonic-console-builder` image is needed whenever there is a change in the build-time dependencies and/or go versions.
+
+In order to update the `tectonic-console-builder` to a new version i.e. v27, follow these steps:
+
+1. Update the `tectonic-console-builder` image tag in files listed below:
+   - .ci-operator.yaml
+   - Dockerfile.dev
+   - Dockerfile.plugins.demo
+   For example, `tectonic-console-builder:27`
+2. Update the dependencies in Dockerfile.builder file i.e. v18.0.0.
+3. Run `./push-builder.sh` script build and push the updated builder image to quay.io.
+   Note: You can test the image using `./builder-run.sh ./build-backend.sh`.
+   To update the image on quay.io, you need edit permission to the quay.io/coreos/  tectonic-console-builder repo. 
+4. Lastly, update the mapping of `tectonic-console-builder` image tag in 
+   [openshift/release](https:// github.com/openshift/release/blob/master/core-services/image-mirroring/supplemental-ci-images/mapping_supplemental_ci_images_ci) repository. 
+   Note: There could be scenario were you would have to add the new image reference in the "mapping_supplemental_ci_images_ci" file, i.e. to avoid CI downtime for upcoming release cycle. 
+   Optional: Request for the [rhel-8-base-nodejs-openshift-4.15](https://github.com/openshift-eng/ocp-build-data/pull/3775/files) nodebuilder update if it doesn't match the node version in `tectonic-console-builder`.
+
 #### CodeReady Containers
 
 If you want to use CodeReady for local development, first make sure [it is set up](https://crc.dev/crc/#setting-up-codeready-containers_gsg), and the [OpenShift cluster is started](https://crc.dev/crc/#starting-the-virtual-machine_gsg).

builder-run.sh

@@ -11,7 +11,7 @@ set -e
 # Without env vars:
 #   ./builder-run.sh ./my-script --my-script-arg1 --my-script-arg2
 
-BUILDER_IMAGE="quay.io/coreos/tectonic-console-builder:v25"
+BUILDER_IMAGE="quay.io/coreos/tectonic-console-builder:v26"
 
 # forward whitelisted env variables to docker
 ENV_STR=()

frontend/package.json

@@ -266,7 +266,7 @@
     "browser-env": "3.x",
     "cache-loader": "^4.1.0",
     "chalk": "2.4.x",
-    "chromedriver": "90.x",
+    "chromedriver": "118.x",
     "circular-dependency-plugin": "5.x",
     "comment-json": "4.x",
     "copy-webpack-plugin": "^5.1.1",
@@ -327,7 +327,7 @@
     "webpack-virtual-modules": "^0.4.3"
   },
   "engines": {
-    "node": ">=14.x"
+    "node": ">=18.x"
   },
   "resolutions": {
     "@types/react-router": "^5.1.20",

frontend/packages/dev-console/integration-tests/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -30,6 +35,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./plugins/index.js')(on, config);
     },

frontend/packages/gitops-plugin/integration-tests/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   projectId: 'j4jxoy',
@@ -36,6 +41,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('../../dev-console/integration-tests/plugins/index.js')(on, config);
     },

frontend/packages/helm-plugin/integration-tests/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -29,6 +34,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },

frontend/packages/integration-tests-cypress/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   viewportWidth: 1920,
@@ -18,6 +23,9 @@ module.exports = defineConfig({
   },
   e2e: {
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./plugins/index.js')(on, config);
     },

frontend/packages/knative-plugin/integration-tests/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -29,6 +34,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },

frontend/packages/operator-lifecycle-manager/integration-tests-cypress/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   viewportWidth: 1920,
@@ -18,6 +23,9 @@ module.exports = defineConfig({
   },
   e2e: {
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('../../integration-tests-cypress/plugins/index.js')(on, config);
     },

frontend/packages/pipelines-plugin/integration-tests/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -28,6 +33,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },

frontend/packages/shipwright-plugin/integration-tests/cypress.config.js

@@ -1,5 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
-
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
   viewportWidth: 1920,
@@ -28,6 +32,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },

frontend/packages/topology/integration-tests/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -33,6 +38,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./plugins/index.js')(on, config);
     },

frontend/packages/webterminal-plugin/integration-tests/cypress.config.js

@@ -1,4 +1,9 @@
+const crypto = require('crypto');
 const { defineConfig } = require('cypress');
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = crypto.createHash;
 
 module.exports = defineConfig({
   defaultCommandTimeout: 40000,
@@ -29,6 +34,9 @@ module.exports = defineConfig({
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
+      Object.assign(crypto, {
+        createHash: () => hash('sha256'),
+      });
       // eslint-disable-next-line global-require
       return require('./../../dev-console/integration-tests/plugins/index.js')(on, config);
     },

frontend/webpack.config.ts

@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
 import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import * as _crypto from 'crypto';
 
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import { sharedPluginModules } from '@console/dynamic-plugin-sdk/src/shared-modules';
@@ -31,6 +32,14 @@ const REACT_REFRESH = process.env.REACT_REFRESH;
 const OPENSHIFT_CI = process.env.OPENSHIFT_CI;
 const WDS_PORT = 8080;
 
+// A workaround fix for the breaking change in Node.js v18 due to the change in hashing algorithm.
+// This code change override the default webpack v4 default hashing algorithm -"md4".
+// This change can be remove when console UI update webpack to version 5 in the future.
+const hash = _crypto.createHash;
+Object.assign(_crypto, {
+  createHash: (): _crypto.Hash => hash('sha256'),
+});
+
 /* Helpers */
 const extractCSS = new MiniCssExtractPlugin({
   filename: