Refactor to use 'html-to-react'

Signed-off-by: Matt Ray <github@mattray.dev>

ui/docker-entrypoint.sh

@@ -9,6 +9,7 @@ else
     sed -i "s^{PLACEHOLDER_BASE_URL}^$BASE_URL^g" /var/www/*.js
 fi
 
+# export your OPENCOST_FOOTER_CONTENT='<a href="https://opencost.io">OpenCost</a>' in your Dockerfile to set
 if [[ ! -z "$OPENCOST_FOOTER_CONTENT" ]]; then
     sed -i "s^PLACEHOLDER_FOOTER_CONTENT^$OPENCOST_FOOTER_CONTENT^g" /var/www/*.js
 else

ui/package-lock.json

@@ -13,8 +13,8 @@
         "material-design-icons-iconfont": "^6.1.0",
         "axios": "^1.6.0",
         "@material-ui/icons": "^4.11.2",
-        "html-react-parser": "^5.1.1",
         "@material-ui/pickers": "^3.3.10",
+        "html-to-react": "^1.7.0",
         "@babel/runtime": "^7.23.9",
         "date-fns": "^2.30.0",
         "react-dom": "^17.0.1",
@@ -170,14 +170,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/style-to-js": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.10.tgz",
-      "integrity": "sha512-VC7MBJa+y0RZhpnLKDPmVRLRswsASLmixkiZ5R8xZpNT9VyjeRzwnXd2pBzAWdgSGv/pCNNH01gPCCUsB9exYg==",
-      "dependencies": {
-        "style-to-object": "1.0.5"
-      }
-    },
     "node_modules/@parcel/watcher-linux-arm64-glibc": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.0.tgz",
@@ -395,15 +387,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/html-dom-parser": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.7.tgz",
-      "integrity": "sha512-2YD2/yB0QgrlkBIn0CsGaRXC89E1gtuPVpiOGC52NTzPCC83n0WMdGD+5q7lpcKqbCpnWValQbovuy/NI/0kag==",
-      "dependencies": {
-        "domhandler": "5.0.3",
-        "htmlparser2": "9.1.0"
-      }
-    },
     "node_modules/jss": {
       "version": "10.10.0",
       "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
@@ -1050,6 +1033,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/html-to-react/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
     "node_modules/@parcel/reporter-cli": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.11.0.tgz",
@@ -1127,6 +1123,20 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/html-to-react/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/@parcel/workers": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-2.11.0.tgz",
@@ -1359,19 +1369,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/html-dom-parser/node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -1711,19 +1708,6 @@
         "url": "https://opencollective.com/svgo"
       }
     },
-    "node_modules/html-dom-parser/node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
     "node_modules/node-gyp-build-optional-packages": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.1.1.tgz",
@@ -2147,6 +2131,11 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -2410,20 +2399,6 @@
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "dev": true
     },
-    "node_modules/html-react-parser/node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
     "node_modules/react-smooth/node_modules/react-transition-group": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -2739,25 +2714,6 @@
         "@parcel/watcher-win32-x64": "2.4.0"
       }
     },
-    "node_modules/style-to-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.5.tgz",
-      "integrity": "sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==",
-      "dependencies": {
-        "inline-style-parser": "0.2.2"
-      }
-    },
-    "node_modules/html-dom-parser/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -3131,11 +3087,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/inline-style-parser": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.2.tgz",
-      "integrity": "sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ=="
-    },
     "node_modules/@parcel/transformer-posthtml": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/@parcel/transformer-posthtml/-/transformer-posthtml-2.11.0.tgz",
@@ -4030,6 +3981,19 @@
         "react": ">=15"
       }
     },
+    "node_modules/html-to-react/node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/@babel/helper-hoist-variables": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
@@ -4627,6 +4591,19 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/html-to-react": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.7.0.tgz",
+      "integrity": "sha512-b5HTNaTGyOj5GGIMiWVr1k57egAZ/vGy0GGefnCQ1VW5hu9+eku8AXHtf2/DeD95cj/FKBKYa1J7SWBOX41yUQ==",
+      "dependencies": {
+        "domhandler": "^5.0",
+        "htmlparser2": "^9.0",
+        "lodash.camelcase": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "^0.13.0 || ^0.14.0 || >=15"
+      }
+    },
     "node_modules/@swc/core-darwin-x64": {
       "version": "1.3.107",
       "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.3.107.tgz",
@@ -4986,24 +4963,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/html-dom-parser/node_modules/htmlparser2": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
-      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.1.0",
-        "entities": "^4.5.0"
-      }
-    },
     "node_modules/@parcel/transformer-svg/node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -5323,20 +5282,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/html-dom-parser/node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
     "node_modules/@parcel/utils/node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -5478,20 +5423,6 @@
         "npm": ">=7.0.0"
       }
     },
-    "node_modules/html-react-parser": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.1.tgz",
-      "integrity": "sha512-L5VK0rKN3VM7uzRH+4wxAL9elvHuCNDjyWKKjcCDR+YWW5Qr7WWSK7+e627DcePVAFi5IMqc+rAU8j/1DpC/Tw==",
-      "dependencies": {
-        "domhandler": "5.0.3",
-        "html-dom-parser": "5.0.7",
-        "react-property": "2.0.2",
-        "style-to-js": "1.1.10"
-      },
-      "peerDependencies": {
-        "react": "0.14 || 15 || 16 || 17 || 18"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -5673,6 +5604,24 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/html-to-react/node_modules/htmlparser2": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
+      "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.1.0",
+        "entities": "^4.5.0"
+      }
+    },
     "node_modules/@parcel/transformer-svg": {
       "version": "2.11.0",
       "resolved": "https://registry.npmjs.org/@parcel/transformer-svg/-/transformer-svg-2.11.0.tgz",
@@ -5697,11 +5646,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/react-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
-      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug=="
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -5915,6 +5859,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/html-to-react/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/@parcel/optimizer-svgo/node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",

ui/package.json

@@ -23,7 +23,7 @@
     "@material-ui/styles": "^4.11.5",
     "axios": "^1.6.0",
     "date-fns": "^2.30.0",
-    "html-react-parser": "^5.1.1",
+    "html-to-react": "^1.7.0",
     "material-design-icons-iconfont": "^6.1.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",

ui/src/components/Footer.js

@@ -1,12 +1,13 @@
-import parse from 'html-react-parser';
+import {Parser as HtmlToReactParser} from 'html-to-react'
 
-function Footer() {
+// Footer could be HTML, so we need to parse it.
+const Footer = () => {
+  const content = '<div align="right"><br/>PLACEHOLDER_FOOTER_CONTENT</div>';
+  const htmlToReactParser = new HtmlToReactParser();
+  const parsedContent = htmlToReactParser.parse(content);
   return (
-    <div align="right">
-      <br/>
-      { parse('PLACEHOLDER_FOOTER_CONTENT') }
-    </div>
-  )
-}
+    parsedContent
+    )
+  }
 
 export default Footer;