feat(settings): dynamically generate the warning checkboxes based on the js-x-ray warnings (#507)

* feat(setttings) added dynamic warnings

* feat(settings) added dynamic warning checkbox

Author: clemgbld

package.json

@@ -82,7 +82,7 @@
     "@nodesecure/documentation-ui": "^1.3.0",
     "@nodesecure/flags": "^3.0.3",
     "@nodesecure/i18n": "^4.0.1",
-    "@nodesecure/js-x-ray": "^8.2.0",
+    "@nodesecure/js-x-ray": "^9.0.0",
     "@nodesecure/licenses-conformance": "^2.1.0",
     "@nodesecure/npm-registry-sdk": "^3.0.0",
     "@nodesecure/ossf-scorecard-sdk": "^3.2.1",

public/components/views/settings/settings.js

@@ -1,5 +1,9 @@
 // Import Third-party Dependencies
 import { getJSON } from "@nodesecure/vis-network";
+import { warnings } from "@nodesecure/js-x-ray/warnings";
+
+// Import Internal Dependencies
+import * as utils from "../../../common/utils.js";
 
 // CONSTANTS
 const kAllowedHotKeys = new Set([
@@ -21,6 +25,7 @@ export class Settings {
   static defaultMenuName = "info";
 
   constructor() {
+    this.#generateWarningCheckboxes();
     this.saveEnabled = false;
     this.dom = {
       /** @type {HTMLSelectElement} */
@@ -95,6 +100,31 @@ export class Settings {
     this.updateFormHotKeys(hotkeys);
   }
 
+  #generateWarningCheckboxes() {
+    const warningsSettings = document.getElementById("warnings-settings");
+    const checkboxes = Object.keys(warnings).map((id) => utils.createDOMElement("div", {
+      childs: [
+        utils.createDOMElement("input", {
+          attributes: {
+            id,
+            value: id,
+            type: "checkbox",
+            checked: true,
+            name: "warnings"
+          }
+        }),
+        utils.createDOMElement("label", {
+          attributes: {
+            for: id
+          },
+          text: id.replaceAll("-", " ")
+        })
+      ]
+    })
+    );
+    warningsSettings.append(...checkboxes);
+  }
+
   updateNavigationHotKey(hotkeys) {
     const navigationElement = document.getElementById("view-navigation");
     navigationElement.querySelectorAll("span").forEach((span) => {

views/index.html

@@ -122,60 +122,8 @@ <h1><i class="icon-cog"></i>[[=z.token('settings.general.title')]]</h1>
             <label for="show-friendly">[[=z.token('settings.general.showFriendly')]]</label>
           </div>
         </div>
-        <div class="line">
+        <div class="line" id="warnings-settings">
           <p>[[=z.token('settings.general.warnings')]]:</p>
-          <div>
-            <input type="checkbox" checked name="warnings" value="parsing-error" id="parsing-error">
-            <label for="parsing-error">parsing error</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="unsafe-import" id="unsafe-import">
-            <label for="unsafe-import">unsafe import</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="unsafe-regex" id="unsafe-regex">
-            <label for="unsafe-regex">unsafe regex</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="unsafe-stmt" id="unsafe-stmt">
-            <label for="unsafe-stmt">unsafe stmt</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="unsafe-assign" id="unsafe-assign">
-            <label for="unsafe-assign">unsafe assign</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="encoded-literal" id="encoded-literal">
-            <label for="encoded-literal">encoded literal</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="short-identifiers" id="short-identifiers">
-            <label for="short-identifiers">short identifiers</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="suspicious-literal" id="suspicious-literal">
-            <label for="suspicious-literal">suspicious literal</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="suspicious-file" id="suspicious-file">
-            <label for="suspicious-file">suspicious file</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="obfuscated-code" id="obfuscated-code">
-            <label for="obfuscated-code">obfuscated code</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="weak-crypto" id="weak-crypto">
-            <label for="weak-crypto">weak crypto</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="shady-link" id="shady-link">
-            <label for="shady-link">shady link</label>
-          </div>
-          <div>
-            <input type="checkbox" checked name="warnings" value="zero-semver" id="zero-semver">
-            <label for="zero-semver">zero semver (0.x.x)</label>
-          </div>
         </div>
         <div class="line">
           <p>[[=z.token('settings.general.flags')]]:</p>