Upgrade Consul UI to Node 18 (#19252)

* Upgrading node to node 18

* Ensure we're on latest version of yarn as well

* add comma to make frontend tests run

* Use Node 18 Alpine image in UI build dockerfile

* delete package-lock.json

---------

Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com>
Co-authored-by: Ella Cai <ella.y.cai@gmail.com>
Co-authored-by: Ella Cai <ella@hashicorp.com>

.github/workflows/build.yml

@@ -104,7 +104,7 @@ jobs:
       - name: Setup with node and yarn
         uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: '14'
+          node-version: '18'
           cache: 'yarn'
           cache-dependency-path: 'ui/yarn.lock'
 
@@ -193,7 +193,7 @@ jobs:
       - name: Setup with node and yarn
         uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: '14'
+          node-version: '18'
           cache: 'yarn'
           cache-dependency-path: 'ui/yarn.lock'
 
@@ -244,7 +244,7 @@ jobs:
       - name: Setup with node and yarn
         uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: '14'
+          node-version: '18'
           cache: 'yarn'
           cache-dependency-path: 'ui/yarn.lock'
 

.github/workflows/frontend.yml

@@ -37,10 +37,10 @@ jobs:
 
     - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
       with:
-        node-version: '16'
+        node-version: '18'
 
     - name: Install Yarn
-      run: npm install -g yarn
+      run: corepack enable
 
     # Install dependencies.
     - name: install yarn packages
@@ -57,10 +57,10 @@ jobs:
 
     - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
       with:
-        node-version: '16'
+        node-version: '18'
 
     - name: Install Yarn
-      run: npm install -g yarn
+      run: corepack enable
 
     # Install dependencies.
     - name: install yarn packages
@@ -86,10 +86,10 @@ jobs:
 
     - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
       with:
-        node-version: '16'
+        node-version: '18'
 
     - name: Install Yarn
-      run: npm install -g yarn
+      run: corepack enable
 
     - name: Install Chrome
       uses: browser-actions/setup-chrome@c485fa3bab6be59dce18dbc18ef6ab7cbc8ff5f1 # v1.2.0

.github/workflows/nightly-test-1.17.x.yaml

@@ -24,7 +24,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -56,7 +56,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -95,7 +95,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -128,7 +128,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -167,7 +167,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -198,7 +198,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 

.github/workflows/nightly-test-main.yaml

@@ -24,7 +24,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -56,7 +56,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -95,7 +95,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -128,7 +128,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -167,7 +167,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 
@@ -198,7 +198,7 @@ jobs:
       # Not necessary to use yarn, but enables caching
       - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0
         with:
-          node-version: 14
+          node-version: 18
           cache: 'yarn'
           cache-dependency-path: ./ui/yarn.lock
 

build-support/docker/Build-UI.dockerfile

@@ -1,10 +1,11 @@
 # Copyright (c) HashiCorp, Inc.
 # SPDX-License-Identifier: BUSL-1.1
 
-FROM docker.mirror.hashicorp.services/circleci/node:16-browsers
+FROM docker.mirror.hashicorp.services/node:18-alpine
 
 USER root
 
+RUN apk update && apk add make
 RUN mkdir /consul-src
 WORKDIR /consul-src
 CMD make dist-docker

ui/.nvmrc

@@ -1 +1 @@
-16
+18

ui/package.json

@@ -24,6 +24,6 @@
     "ember-basic-dropdown": "3.0.21"
   },
   "engines": {
-    "node": ">=14 <=16"
+    "node": "18"
   }
 }

ui/packages/consul-ui/README.md

@@ -112,7 +112,7 @@ See [./docs/index.mdx](./docs/index.mdx#environment-variables)
 We follow a `ui/**/**` branch naming pattern. This branch naming pattern allows
 front-end focused builds, such as FE tests, to run automatically in Pull
 Requests. Please note this only works if you are a member of the HashiCorp
-GitHub Org. If you are an external contributor these tests won't run and will
+GitHub Org. If you are an external contributor, these tests won't run and will
 instead be run by a member of our team during review.
 
 Examples:

ui/packages/consul-ui/package.json

@@ -199,7 +199,7 @@
     "webpack": "^5.74.0"
   },
   "engines": {
-    "node": ">=14 <=16"
+    "node": "18"
   },
   "ember": {
     "edition": "octane"
@@ -214,7 +214,7 @@
     ]
   },
   "volta": {
-    "node": "14.20.1"
+    "node": "18"
   },
   "dependencies": {
     "doctoc": "^2.0.0"