ui: Fix github run pipeline for node > 16

node-gyp: explicitly set node-gyp to 9.3.0 (latest) in package.json
node-sass: using node-sass is deprecated and named sass now.

Node v18 support:

added --openssl-legacy-provider as workaround for node v18 due to breaking change in the SSL encryption used in webpack
see: webpack/webpack#14532
consider upgrading all SSL related packages in the future

Author: scpa1055

.github/workflows/build-ui.yaml

@@ -16,10 +16,21 @@ jobs:
         working-directory: ./ui
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
           cache: yarn
           cache-dependency-path: ui/yarn.lock
-      - run: yarn install
-      - run: yarn run build
+      - name: Setup yarn and install
+        run: npm install -g yarn && yarn install
+      - name: Run Build ${{ matrix.node }}
+        run: |
+          read version _ <<< $(node --version)
+          echo $version
+          if [[ $version == "v18"* ]]; then
+              npm run build_v18
+          else 
+              npm run build
+          fi
+        shell: bash
+

ui/package.json

@@ -16,7 +16,8 @@
     "jsonpath": "^1.0.2",
     "less": "^3.9.0",
     "mathjs": "^7.5.1",
-    "node-sass": "^4.14.0",
+    "node-gyp": "9.3.0",
+    "sass": "^1.56.1",
     "plotly.js": "^2.2.1",
     "randomcolor": "^0.5.4",
     "react": "^16.8.6",
@@ -37,6 +38,7 @@
   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
+    "build_v18": "react-app-rewired --openssl-legacy-provider build",
     "test": "react-scripts test --env=jsdom"
   },
   "description": "Web-based user interface for cloe",