Added initial support for customising option values to custom HTML rules

api/functions/commands.js

@@ -139,6 +139,17 @@ exports.removeAlertEmailAddress = (api, rowkey) => {
 	return deleteEntity(TABLE.alertEmailAddresses, entity);
 };
 
+exports.addCustomHtmlRuleOptions = (api, data) => {
+	const entGen = azure.TableUtilities.entityGenerator;
+	return updateEntity(
+		TABLE.HtmlRulesCustomOptions,
+		replaceProp(data, {
+			PartitionKey: entGen.String(api),
+			RowKey: entGen.String(data.ruleId),
+		})
+	);
+};
+
 exports.uploadLighthouseReport = (runId, lhr) =>
 	uploadBlob(BLOB.lhr, `${runId}.json`, JSON.stringify(lhr));
 

api/functions/consts.js

@@ -14,7 +14,8 @@ exports.TABLE = {
 	ScanResults: 'ScanResults',
 	htmlhintrules: 'htmlhintrules',
 	alertEmailAddresses: 'alertEmailAddresses',
-	UnscannableLinks: 'UnscannableLinks'
+	UnscannableLinks: 'UnscannableLinks',
+	HtmlRulesCustomOptions: 'HtmlRulesCustomOptions'
 };
 
 // blob storage names cannot have uppercase or numbers

api/functions/index.js

@@ -22,6 +22,7 @@
 	addHTMLHintRulesForEachRun,
 	addAlertEmailAddresses,
 	removeAlertEmailAddress,
+	addCustomHtmlRuleOptions,
 } = require('./commands');
 const {
 	getPersonalSummary,
@@ -39,6 +40,7 @@
 	getAllScanSummaryFromUrl,
 	getUnscannableLinks,
 	compareScans,
+	getCustomHtmlRuleOptions,
 } = require('./queries');
 const {
 	newGuid,
@@ -179,6 +181,14 @@
 	res.json(await getUnscannableLinks());
 });
 
+app.post('/config/getCustomHtmlRuleOptions/:api', async (req, res) => {
+	res.json(await getCustomHtmlRuleOptions(req.params.api, req.body.url));
+});
+
+app.post('/config/addCustomHtmlRuleOptions/:api', async (req, res) => {
+	res.json(await addCustomHtmlRuleOptions(req.params.api, req.body));
+});
+
 app.post('/scanresult/:api/:buildId', async (req, res) => {
 	const {
 		badUrls,
@@ -230,7 +240,7 @@
 	const buildId = req.params.buildId;
 	const runId = newGuid();
 	const buildDate = new Date();
 	const unscannableLinks = await getUnscannableLinks();
 
 	const uid = await getUserIdFromApiKey(apikey);
 	if (!uid) {

api/functions/queries.js

@@ -332,3 +332,15 @@ exports.compareScans = (api, url) =>
 		} 
 		resolve(isErrorUp)
 	});
+
+exports.getCustomHtmlRuleOptions = (api, url) => 
+	new Promise(async (resolve) => {
+		const entity = new TableClient(azureUrl, TABLE.HtmlRulesCustomOptions, credential).listEntities({
+			queryOptions: { filter: odata`PartitionKey eq ${api} and url eq ${url}` }
+		});
+		let result = []
+		for await (const item of entity) {
+			result.push(item);
+		}
+		resolve(result || {})
+	})

docker/api.js

@@ -125,6 +125,20 @@ exports.getAllScanSummaryFromUrl = (api, url) => {
   );
 };
 
+exports.getCustomHtmlRuleOptions = (api, url) => {
+  return fetch(`${endpoint}/api/config/getCustomHtmlRuleOptions/${api}`, {
+    method: "POST",
+    body: JSON.stringify({url}),
+    headers: { "Content-Type": "application/json" },
+  }).then((res) => {
+    if (res) {
+      return res.json();
+    } else {
+      throw Error("Failed to get custom html rule options");
+    }
+  });
+};
+
 exports.htmlHintConfig = {
   "grammar-scrum-terms": true,
   "code-block-missing-language": true,

docker/customHtmlRules.js

@@ -1,7 +1,10 @@
+const { getCustomHtmlRuleOptions } = require("./api");
 const HTMLHint = require("htmlhint").default;
 const findPhoneNumbersInText = require('libphonenumber-js').findPhoneNumbersInText;
 
-exports.addCustomHtmlRule = () => {
+exports.addCustomHtmlRule = async (apiToken, url) => {
+  const customRuleOptions = await getCustomHtmlRuleOptions(apiToken, url)
+
   HTMLHint.addRule({
     id: "code-block-missing-language",
     description: "Code blocks must contain a language specifier.",
@@ -380,9 +383,15 @@ exports.addCustomHtmlRule = () => {
       parser.addListener("tagstart", (event) => {
         var tagName = event.tagName.toLowerCase(),
         mapAttrs = parser.getMapAttrs(event.attrs);
+        const ruleId = "detect-absolute-references-url-path-correctly";
         if (tagName === "a") {
           if (mapAttrs["href"]) {
-            if (mapAttrs["href"].startsWith("https://ssw.com.au/rules")) {
+            // Check if custom options exist in this rule
+            let optionValue = '';
+            if (customRuleOptions && customRuleOptions.length > 0 && customRuleOptions.filter(option => option.ruleId === ruleId).length > 0) {
+              optionValue = customRuleOptions.find(option => option.ruleId === ruleId).optionValue
+            }
+            if (mapAttrs["href"].startsWith(optionValue.length > 0 ? optionValue : "https://ssw.com.au/rules")) {
               if (!mapAttrs["href"].startsWith("/")) {
               reporter.warn(
                 "URLs must be formatted to direct to a url path correctly.",
@@ -433,17 +442,26 @@ exports.addCustomHtmlRule = () => {
       var self = this;
 
       parser.addListener("text", (event) => {
-        var spellings = [
-          "a.k.a",
-          "A.K.A",
-          "AKA",
-          "e-mail",
-          "EMail",
-          "can not",
-          "web site",
-          "user name",
-          "task bar"
-        ];
+        const ruleId = "common-spelling-mistakes";
+        let optionValue = [];
+        // Check if custom options exist in this rule
+        if (customRuleOptions && customRuleOptions.length > 0 && customRuleOptions.filter(option => option.ruleId === ruleId).length > 0) {
+          optionValue = customRuleOptions.find(option => option.ruleId === ruleId).optionValue.split(',');
+        }
+        var spellings = 
+          optionValue.length > 0 ? 
+          optionValue :
+          [
+            "a.k.a",
+            "A.K.A",
+            "AKA",
+            "e-mail",
+            "EMail",
+            "can not",
+            "web site",
+            "user name",
+            "task bar"
+          ];
 
         if (event.raw) {
           const pageContent = event.raw;
@@ -486,6 +504,11 @@ exports.addCustomHtmlRule = () => {
         const self = this;
         let isInCodeBlock = false;
         parser.addListener("tagstart", (event) => {
+          // Check if custom options exist in this rule
+          let optionValue = '';
+          if (customRuleOptions && customRuleOptions.length > 0 && customRuleOptions.filter(option => option.ruleId === ruleId).length > 0) {
+            optionValue = customRuleOptions.find(option => option.ruleId === ruleId).optionValue
+          }
           const tagName = event.tagName.toLowerCase();
           if (tagName === "code") {
             isInCodeBlock = true;
@@ -498,7 +521,7 @@ exports.addCustomHtmlRule = () => {
           }
         });
         parser.addListener("text", (event) => {
-          if (event.raw && event.lastEvent && findPhoneNumbersInText(event.raw, "AU").length) {
+          if (event.raw && event.lastEvent && findPhoneNumbersInText(event.raw, optionValue.length > 0 ? optionValue : 'AU').length) {
             const pageContent = event.lastEvent.raw;
             if (pageContent && event.lastEvent.tagName) {
               const tagName = event.lastEvent.tagName.toLowerCase();

docker/index.js

@@ -29,6 +29,7 @@ const {
   runArtilleryLoadTest
 } = require("./utils");
 const { htmlHintConfig } = require("./api");
+const { addCustomHtmlRule } = require("./customHtmlRules");
 
 const LIGHTHOUSEFOLDER = "./lhr.json";
 const ARTILLERYFOLDER = "./artilleryOut.json";
@@ -230,9 +231,12 @@ const processAndUpload = async (
     [atr, atrSummary] = readArtilleryReport(ARTILLERYFOLDER, writeLog);
   }
 
-  const { addCustomHtmlRule } = require("./customHtmlRules");
   if (args.htmlhint) {
-    addCustomHtmlRule();
+    if (args.token) {
+      addCustomHtmlRule(args.token, args.url);
+    } else {
+      addCustomHtmlRule();
+    };
     [htmlIssuesSummary, htmlIssues] = await runHtmlHint(
       args.url,
       results,

ui/src/components/detailslotcomponents/BuildDetailsSlot.svelte

@@ -14,6 +14,7 @@
   export let user;
 
   let threshold = {};
+  let customHtmlRuleOptions = [];
   let htmlHintRulesShown;
   let loadingHtmlHintSettings;
   let scanUrl;
@@ -29,6 +30,16 @@
     htmlHintRulesShown = true;
     loadingHtmlHintSettings = true;
     try {
+      // Retrieve custom HTML Rules input options
+      const optionRes = await fetch(`${CONSTS.API}/api/config/getCustomHtmlRuleOptions/${user.apiKey}`, {
+        method: "POST",
+        body: JSON.stringify({url: scanUrl}),
+        headers: { "Content-Type": "application/json" },
+      })
+      const optionResult = await optionRes.json();
+      customHtmlRuleOptions = optionResult || [];
+
+      // Retrieve selected custom HTML Rules 
       const res = await fetch(
         `${CONSTS.API}/api/config/${user.apiKey}/htmlhintrules/${slug(scanUrl)}`
       );
@@ -37,6 +48,7 @@
     } catch (error) {
       console.error("error getting threshold", error);
       threshold = {};
+      customHtmlRuleOptions = [];
     } finally {
       loadingHtmlHintSettings = false;
     }
@@ -101,6 +113,8 @@
     {user}
     {htmlRules}
     {threshold}
+    {customHtmlRuleOptions}
+    on:htmlHintThreshold={() => showHtmlHintThreshold(data.summary, user)}
   />
 {:else}
   <UpdateHtmlRules 
@@ -110,6 +124,8 @@
     {user}
     htmlRules={null}
     threshold={null}
+    {customHtmlRuleOptions}
+    on:htmlHintThreshold={() => showHtmlHintThreshold(data.summary, user)}
   />
 {/if}