Fixes #37134 - upgrade to node 18 and npm 8

.github/matrix.json

@@ -1,5 +1,5 @@
 {
   "postgresql": ["12"],
   "ruby": ["2.7", "3.0"],
-  "node": ["14"]
+  "node": ["14", "18"]
 }

.github/workflows/plugins_react_tests.yml

@@ -66,10 +66,10 @@ jobs:
           repository: ${{ matrix.plugin }}
           path: ${{ github.workspace }}/projects/plugin
       - name: Generate ${{ matrix.plugin }} npm dependencies package-lock
-        run: npm install --package-lock-only --no-audit
+        run: npm install --package-lock-only --no-audit --legacy-peer-deps
         working-directory: ${{ github.workspace }}/projects/plugin
       - name: Install ${{ matrix.plugin }} npm dependencies
-        run: npm ci --no-audit
+        run: npm ci --no-audit --legacy-peer-deps
         working-directory: ${{ github.workspace }}/projects/plugin
       - name: Run ${{ matrix.plugin }} tests
         run: npm test

.npmrc

@@ -1 +1,2 @@
 engine-strict=true
+legacy-peer-deps=true

Dockerfile

@@ -1,7 +1,7 @@
 # Base container that is used for both building and running the app
 FROM quay.io/centos/centos:stream8 as base
 ARG RUBY_VERSION="2.7"
-ARG NODEJS_VERSION="14"
+ARG NODEJS_VERSION="18"
 ENV FOREMAN_FQDN=foreman.example.com
 ENV FOREMAN_DOMAIN=example.com
 

developer_docs/foreman_dev_setup.asciidoc

@@ -5,12 +5,11 @@
 
 [[prerequisites]]
 == Prerequisites
-Foreman will run with the following requirements (aside from rubygem dependencies):
+Please refer to the `.github/matrix.json` file in the project repository to find the latest supported versions for Ruby, NodeJS, and PostgreSQL. This file is regularly updated to reflect our current support.
 
-* Ruby 2.7.x
-* NodeJS 14
-* NPM 6.x
-* PostgreSQL 10+ (12+ recommended)
+We recommend using PostgreSQL 12+.
+
+If you're using NPM version 7.x or higher, you will need to use the `--legacy-peer-deps` flag when installing npm packages. This is due to changes in how NPM handles peer dependencies from version 7 onwards.
 
 https://github.com/rbenv/rbenv[rbenv] or https://github.com/rvm/rvm[RVM] can be used to install compatible Ruby versions. Similarly, https://github.com/nvm-sh/nvm[nvm] can be used to manage node and npm on your system.
 

package.json

@@ -5,7 +5,7 @@
   "description": "Foreman isn't really a node module, these are just dependencies needed to build the webpack bundle. 'dependencies' are the asset libraries in use and 'devDependencies' are used for the build process.",
   "private": true,
   "engines": {
-    "node": ">14.0.0 <16.0.0"
+    "node": ">=14.0.0 <21.0.0"
   },
   "scripts": {
     "lint": "tfm-lint",

webpack/assets/javascripts/react_app/components/common/dates/LongDateTime.test.js

@@ -18,7 +18,59 @@ describe('LongDateTime', () => {
 
     intl.ready.then(() => {
       wrapper.update();
-      expect(wrapper.find('LongDateTime')).toMatchSnapshot();
+      if (process.version.startsWith('v14') || process.version.startsWith('v16')) {
+        expect(wrapper.find('LongDateTime')).toMatchInlineSnapshot(
+          `
+          <LongDateTime
+            date={2017-10-13T11:54:55.000Z}
+            defaultValue="Default value"
+            seconds={false}
+            showRelativeTimeTooltip={false}
+          >
+            <span>
+              <FormattedDate
+                day="2-digit"
+                hour="2-digit"
+                minute="2-digit"
+                month="long"
+                value={2017-10-13T11:54:55.000Z}
+                year="numeric"
+              >
+                <span>
+                  October 13, 2017, 11:54 AM
+                </span>
+              </FormattedDate>
+            </span>
+          </LongDateTime>
+        `
+        );
+      } else {
+        expect(wrapper.find('LongDateTime')).toMatchInlineSnapshot(
+          `
+          <LongDateTime
+            date={2017-10-13T11:54:55.000Z}
+            defaultValue="Default value"
+            seconds={false}
+            showRelativeTimeTooltip={false}
+          >
+            <span>
+              <FormattedDate
+                day="2-digit"
+                hour="2-digit"
+                minute="2-digit"
+                month="long"
+                value={2017-10-13T11:54:55.000Z}
+                year="numeric"
+              >
+                <span>
+                  October 13, 2017 at 11:54 AM
+                </span>
+              </FormattedDate>
+            </span>
+          </LongDateTime>
+        `
+        );
+      }
     });
   });
 
@@ -33,7 +85,63 @@ describe('LongDateTime', () => {
 
     intl.ready.then(() => {
       wrapper.update();
-      expect(wrapper.find('LongDateTime')).toMatchSnapshot();
+      if (process.version.startsWith('v14') || process.version.startsWith('v16')) {
+        expect(wrapper.find('LongDateTime')).toMatchInlineSnapshot(
+          `
+          <LongDateTime
+            date={2017-10-13T11:54:55.000Z}
+            defaultValue="Default value"
+            seconds={false}
+            showRelativeTimeTooltip={true}
+          >
+            <span
+              title="15 days ago"
+            >
+              <FormattedDate
+                day="2-digit"
+                hour="2-digit"
+                minute="2-digit"
+                month="long"
+                value={2017-10-13T11:54:55.000Z}
+                year="numeric"
+              >
+                <span>
+                  October 13, 2017, 11:54 AM
+                </span>
+              </FormattedDate>
+            </span>
+          </LongDateTime>
+        `
+        );
+      } else {
+        expect(wrapper.find('LongDateTime')).toMatchInlineSnapshot(
+          `
+          <LongDateTime
+            date={2017-10-13T11:54:55.000Z}
+            defaultValue="Default value"
+            seconds={false}
+            showRelativeTimeTooltip={true}
+          >
+            <span
+              title="15 days ago"
+            >
+              <FormattedDate
+                day="2-digit"
+                hour="2-digit"
+                minute="2-digit"
+                month="long"
+                value={2017-10-13T11:54:55.000Z}
+                year="numeric"
+              >
+                <span>
+                  October 13, 2017 at 11:54 AM
+                </span>
+              </FormattedDate>
+            </span>
+          </LongDateTime>
+        `
+        );
+      }
     });
   });
 
@@ -44,7 +152,61 @@ describe('LongDateTime', () => {
 
     intl.ready.then(() => {
       wrapper.update();
-      expect(wrapper.find('LongDateTime')).toMatchSnapshot();
+      if (process.version.startsWith('v14') || process.version.startsWith('v16')) {
+        expect(wrapper.find('LongDateTime')).toMatchInlineSnapshot(
+          `
+          <LongDateTime
+            date={2017-10-13T11:54:55.000Z}
+            defaultValue="Default value"
+            seconds={true}
+            showRelativeTimeTooltip={false}
+          >
+            <span>
+              <FormattedDate
+                day="2-digit"
+                hour="2-digit"
+                minute="2-digit"
+                month="long"
+                second="2-digit"
+                value={2017-10-13T11:54:55.000Z}
+                year="numeric"
+              >
+                <span>
+                  October 13, 2017, 11:54:55 AM
+                </span>
+              </FormattedDate>
+            </span>
+          </LongDateTime>
+        `
+        );
+      } else {
+        expect(wrapper.find('LongDateTime')).toMatchInlineSnapshot(
+          `
+          <LongDateTime
+            date={2017-10-13T11:54:55.000Z}
+            defaultValue="Default value"
+            seconds={true}
+            showRelativeTimeTooltip={false}
+          >
+            <span>
+              <FormattedDate
+                day="2-digit"
+                hour="2-digit"
+                minute="2-digit"
+                month="long"
+                second="2-digit"
+                value={2017-10-13T11:54:55.000Z}
+                year="numeric"
+              >
+                <span>
+                  October 13, 2017 at 11:54:55 AM
+                </span>
+              </FormattedDate>
+            </span>
+          </LongDateTime>
+        `
+        );
+      }
     });
   });
 
@@ -55,7 +217,18 @@ describe('LongDateTime', () => {
 
     intl.ready.then(() => {
       wrapper.update();
-      expect(wrapper.find('LongDateTime')).toMatchSnapshot();
+      expect(wrapper.find('LongDateTime')).toMatchInlineSnapshot(`
+        <LongDateTime
+          date={null}
+          defaultValue="Default value"
+          seconds={false}
+          showRelativeTimeTooltip={false}
+        >
+          <span>
+            Default value
+          </span>
+        </LongDateTime>
+      `);
     });
   });
 });