chore(deps): update react-router, remove react-remarkable, upgrade node

.github/workflows/build-test.yaml

@@ -59,7 +59,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version-file: ./web/.nvmrc
           cache: yarn
           cache-dependency-path: web/yarn.lock
 
@@ -86,7 +86,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version-file: ./web/.nvmrc
           cache: yarn
           cache-dependency-path: web/yarn.lock
 
@@ -113,7 +113,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version-file: ./web/.nvmrc
           cache: yarn
           cache-dependency-path: web/yarn.lock
 
@@ -143,7 +143,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
+          node-version-file: ./web/.nvmrc
           cache: yarn
           cache-dependency-path: web/yarn.lock
 

.github/workflows/release.yaml

@@ -66,21 +66,21 @@ jobs:
     runs-on: ubuntu-latest
     needs: [generate-tag]
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-    - name: Setup Node.js environment
-      uses: actions/setup-node@v4
-      with:
-        node-version: '18.x'
-    - name: Build web
-      env:
-        GIT_TAG: ${{ needs.generate-tag.outputs.tag }}
-      run: mapfile -t envs < <(grep -v '#.*' < .image.env) && export "${envs[@]}" && make -C web deps build-kotsadm
-    - name: Upload web artifact
-      uses: actions/upload-artifact@v4
-      with:
-        name: web
-        path: ./web/dist
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ./web/.nvmrc
+      - name: Build web
+        env:
+          GIT_TAG: ${{ needs.generate-tag.outputs.tag }}
+        run: mapfile -t envs < <(grep -v '#.*' < .image.env) && export "${envs[@]}" && make -C web deps build-kotsadm
+      - name: Upload web artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: web
+          path: ./web/dist
 
   build-kurl-proxy-melange-packages:
     needs: [generate-tag]

dev/dockerfiles/kotsadm-web/Dockerfile.local

@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:22-alpine
 EXPOSE 3000
 
 WORKDIR /replicatedhq/kots/web

dev/scripts/common.sh

@@ -35,7 +35,7 @@ function populate() {
         -v "$(pwd):/replicatedhq/kots" \
         -e YARN_CACHE_FOLDER=/replicatedhq/kots/dev/.yarncache \
         -w /replicatedhq/kots/web \
-        node:18-alpine \
+        node:22-alpine \
         /bin/sh -c "apk add make bash git && make deps"
       ;;
     "kurl-proxy")

web/.nvmrc

@@ -0,0 +1 @@
+v22

web/package.json

@@ -44,8 +44,6 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-helmet": "^6.1.11",
     "@types/react-modal": "^3.16.3",
-    "@types/react-router": "^5.1",
-    "@types/react-router-dom": "^5.1",
     "@types/react-select": "^5.0.1",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -146,9 +144,8 @@
     "react-icomoon": "^2.6.1",
     "react-modal": "^3.16.3",
     "react-refresh": "^0.17.0",
-    "react-remarkable": "^1.1.3",
-    "react-router": "^5.1",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.7.1",
+    "react-router-dom": "^7.7.1",
     "react-select": "^5.10.2",
     "react-tooltip": "^4.2.6",
     "react-vis": "^1.12.1",
@@ -158,14 +155,6 @@
     "tar-stream": "^3.1.7",
     "universal-cookie": "^7.2.2"
   },
-  "resolutions": {
-    "d3-color": "^3.1.0",
-    "moment": "^2.9.0",
-    "trim": "^0.0.3",
-    "moment-timezone": "^0.5.35",
-    "trim-newlines": "^3.0.1",
-    "webpack-dev-middleware": "^6.1.2"
-  },
   "browserslist": [
     "> 1%",
     "last 4 versions",

web/src/components/PreflightRenderer.tsx

@@ -1,7 +1,5 @@
 import classNames from "classnames";
-// TODO: find replacement for react-remarkable
-// @ts-ignore
-import Markdown from "react-remarkable";
+import Markdown from "./shared/Markdown";
 import Icon from "./Icon";
 
 import { PreflightResult } from "@src/features/PreflightChecks/types";
@@ -68,7 +66,7 @@ export default function PreflightRenderer(props: Props) {
                     className="PreflightMessageRow u-marginTop--10"
                     data-testid="preflight-message-row"
                   >
-                    <Markdown source={row.message} />
+                    <Markdown>{row.message}</Markdown>
                   </div>
                   {row.learnMoreUri && (
                     <div className="u-marginTop--5">

web/src/components/config_render/ConfigCheckbox.tsx

@@ -1,7 +1,5 @@
 import { ChangeEvent, Component, createRef } from "react";
-// TODO: add type checking support for react-remarkable or add a global ignore
-// @ts-ignore
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 import { setOrder } from "./ConfigUtil";
 import { ConfigWrapper } from "./ConfigComponents";
 

web/src/components/config_render/ConfigDropdown.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { ConfigWrapper } from "./ConfigComponents";
 import ConfigItemTitle from "./ConfigItemTitle";
 import Icon from "@components/Icon";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 import { isEmpty } from "lodash";
 
 const ConfigDropdown = (props) => {

web/src/components/config_render/ConfigFileInput.jsx

@@ -2,7 +2,7 @@ import { Component } from "react";
 import FileInput from "./FileInput";
 import ConfigItemTitle from "./ConfigItemTitle";
 import map from "lodash/map";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 
 export default class ConfigFileInput extends Component {
   handleOnChange = (files) => {

web/src/components/config_render/ConfigGroup.jsx

@@ -1,5 +1,5 @@
-import { createRef } from "react";
-import Markdown from "react-remarkable";
+import React from "react";
+import Markdown from "../shared/Markdown";
 import some from "lodash/some";
 import isEmpty from "lodash/isEmpty";
 import { ConfigService } from "../../services/ConfigService";
@@ -16,7 +16,6 @@ import Icon from "../Icon";
 import ConfigDropdown from "./ConfigDropdown";
 
 const ConfigGroup = (props) => {
-  const markdownNode = createRef();
 
   const handleItemChange = (itemName, value, data) => {
     if (props.handleChange) {
@@ -272,7 +271,6 @@ const ConfigGroup = (props) => {
           {item.description !== "" ? (
             <div className="field-section-help-text help-text-color u-marginTop--10">
               <Markdown
-                ref={markdownNode}
                 options={{
                   linkTarget: "_blank",
                   linkify: true,

web/src/components/config_render/ConfigInput.jsx

@@ -1,6 +1,6 @@
 import { Component } from "react";
 import ConfigItemTitle from "./ConfigItemTitle";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 import { setOrder } from "./ConfigUtil";
 import { ConfigWrapper } from "./ConfigComponents";
 import Icon from "../Icon";

web/src/components/config_render/ConfigItemTitle.jsx

@@ -1,5 +1,5 @@
 import { Component } from "react";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 import classNames from "classnames";
 
 export default class ConfigItemTitle extends Component {

web/src/components/config_render/ConfigSelectOne.jsx

@@ -4,7 +4,7 @@ import isEmpty from "lodash/isEmpty";
 
 import ConfigItemTitle from "./ConfigItemTitle";
 import ConfigRadio from "./ConfigRadio";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 import { setOrder } from "./ConfigUtil";
 import { ConfigWrapper } from "./ConfigComponents";
 import Icon from "../Icon";

web/src/components/config_render/ConfigTextarea.jsx

@@ -1,6 +1,6 @@
 import { Component, createRef } from "react";
 import ConfigItemTitle from "./ConfigItemTitle";
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 import { setOrder } from "./ConfigUtil";
 import { ConfigWrapper } from "./ConfigComponents";
 

web/src/components/shared/Markdown.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import MarkdownIt from "markdown-it";
+
+interface MarkdownProps {
+  children: string;
+  options?: {
+    linkTarget?: string;
+    linkify?: boolean;
+  };
+}
+
+const Markdown: React.FC<MarkdownProps> = ({ children, options = {} }) => {
+  const { linkTarget = "_blank", linkify = true } = options;
+
+  const md = new MarkdownIt({
+    linkify,
+    html: true,
+    breaks: true,
+  });
+
+  // Configure link attributes if linkTarget is specified
+  if (linkTarget) {
+    md.renderer.rules.link_open = function (tokens, idx, opts, _env, renderer) {
+      const token = tokens[idx];
+      const hrefIndex = token.attrIndex('href');
+
+      if (hrefIndex >= 0) {
+        const href = token.attrGet('href');
+        // Only add target="_blank" for external links
+        if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
+          token.attrSet('target', linkTarget);
+          token.attrSet('rel', 'noopener noreferrer');
+        }
+      }
+
+      return renderer.renderToken(tokens, idx, opts);
+    };
+  }
+
+  const html = md.render(children || "");
+
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+export default Markdown;

web/src/components/upgrade_service/ConfirmAndDeploy.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from "react";
 import Modal from "react-modal";
-// TODO: add type checking support for react-remarkable or add a global ignore
-// @ts-ignore
-import Markdown from "react-remarkable";
+import Markdown from "../shared/Markdown";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 
 import { KotsPageTitle } from "@components/Head";
@@ -165,7 +163,7 @@ const ConfirmAndDeploy = ({
                     {error.title}
                   </p>
                   <div className="PreflightMessageRow u-marginTop--10">
-                    <Markdown source={error.message} />
+                    <Markdown>{error.message}</Markdown>
                   </div>
                   {error.showCannotFail && (
                     <p className="u-textColor--error u-fontSize--small u-fontWeight--medium u-marginTop--10">
@@ -198,7 +196,7 @@ const ConfirmAndDeploy = ({
                     {warning.title}
                   </p>
                   <div className="PreflightMessageRow u-marginTop--10">
-                    <Markdown source={warning.message} />
+                    <Markdown>{warning.message}</Markdown>
                   </div>
                 </div>
               </div>

web/src/features/Auth/components/SecureAdminConsole.tsx

@@ -76,7 +76,7 @@ class SecureAdminConsole extends Component<Props, State> {
             replace: true,
           });
         } else {
-          this.props.navigate("upload-license", { replace: true });
+          this.props.navigate("/upload-license", { replace: true });
         }
       } else {
         this.props.navigate("/unsupported");

web/tsconfig.json

@@ -98,7 +98,7 @@
     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "skipLibCheck": true, /* Skip type checking all .d.ts files. */
     "target": "es5", // Specify ECMAScript target version
     "lib": ["dom", "dom.iterable", "esnext"], // List of library files to be included in the compilation
     "allowJs": true, // Allow JavaScript files to be compiled