diff --git a/.github/matrix.json b/.github/matrix.json
index f15a18dd692..c7b791b594d 100644
--- a/.github/matrix.json
+++ b/.github/matrix.json
@@ -1,5 +1,5 @@
 {
   "postgresql": ["12"],
   "ruby": ["2.7", "3.0"],
-  "node": ["14"]
+  "node": ["14", "18"]
 }
diff --git a/.github/workflows/plugins_react_tests.yml b/.github/workflows/plugins_react_tests.yml
index 09615b630b2..7d0f7184b7c 100644
--- a/.github/workflows/plugins_react_tests.yml
+++ b/.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
diff --git a/.npmrc b/.npmrc
index b6f27f13595..d5831dd5188 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
 engine-strict=true
+legacy-peer-deps=true
diff --git a/Dockerfile b/Dockerfile
index b5e8fe1571d..83c4ac1b771 100644
--- a/Dockerfile
+++ b/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
 
diff --git a/developer_docs/foreman_dev_setup.asciidoc b/developer_docs/foreman_dev_setup.asciidoc
index 4b17d284e2e..503406fd311 100644
--- a/developer_docs/foreman_dev_setup.asciidoc
+++ b/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.
 
diff --git a/package.json b/package.json
index 2901807f428..05b90f7f458 100644
--- a/package.json
+++ b/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",
diff --git a/webpack/assets/javascripts/react_app/components/common/dates/LongDateTime.test.js b/webpack/assets/javascripts/react_app/components/common/dates/LongDateTime.test.js
index 58444c1b595..c4f096b10e9 100644
--- a/webpack/assets/javascripts/react_app/components/common/dates/LongDateTime.test.js
+++ b/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>
+      `);
     });
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/dates/__snapshots__/LongDateTime.test.js.snap b/webpack/assets/javascripts/react_app/components/common/dates/__snapshots__/LongDateTime.test.js.snap
deleted file mode 100644
index 62a6f38960d..00000000000
--- a/webpack/assets/javascripts/react_app/components/common/dates/__snapshots__/LongDateTime.test.js.snap
+++ /dev/null
@@ -1,89 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LongDateTime formats date 1`] = `
-<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>
-`;
-
-exports[`LongDateTime formats date with relative tooltip 1`] = `
-<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>
-`;
-
-exports[`LongDateTime formats date with seconds 1`] = `
-<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>
-`;
-
-exports[`LongDateTime renders default value 1`] = `
-<LongDateTime
-  date={null}
-  defaultValue="Default value"
-  seconds={false}
-  showRelativeTimeTooltip={false}
->
-  <span>
-    Default value
-  </span>
-</LongDateTime>
-`;