Merge pull request #778 from SSWConsulting/flag-items-2

Add ability to ignore URLs for HTML rules from table

ui/src/components/detailslotcomponents/BuildDetailsSlot.svelte

@@ -7,21 +7,25 @@
   import UpdateHtmlRules from "../htmlhintcomponents/UpdateHTMLRules.svelte"
   import { CONSTS } from "../../utils/utils";
   import UpdatePerfThreshold from "../lighthousecomponents/UpdatePerfThreshold.svelte";
+  import { createEventDispatcher } from "svelte";
 
   export let data;
   export let componentType;
   export let htmlRules;
   export let user;
+  export let customHtmlRuleOptions;
 
   let threshold = {};
-  let customHtmlRuleOptions = [];
   let htmlHintRulesShown;
   let loadingHtmlHintSettings;
   let scanUrl;
   let perfThresholdShown;
   let loadingPerfSettings;
   let lastBuild;
 
+  const dispatch = createEventDispatcher();
+  const getCustomHtmlRuleOptions = () => dispatch('getCustomHtmlRuleOptions');
+
   const showHtmlHintThreshold = async (summary, user) => {
     if (!user) {
       return;
@@ -30,15 +34,7 @@
     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 || [];
-
+      getCustomHtmlRuleOptions();
       // Retrieve selected custom HTML Rules 
       const res = await fetch(
         `${CONSTS.API}/api/config/${user.apiKey}/htmlhintrules/${slug(scanUrl)}`
@@ -48,7 +44,6 @@
     } catch (error) {
       console.error("error getting threshold", error);
       threshold = {};
-      customHtmlRuleOptions = [];
     } finally {
       loadingHtmlHintSettings = false;
     }
@@ -115,6 +110,7 @@
     {threshold}
     {customHtmlRuleOptions}
     on:htmlHintThreshold={() => showHtmlHintThreshold(data.summary, user)}
+    on:updateHtmlRules={() => getCustomHtmlRuleOptions()}
   />
 {:else}
   <UpdateHtmlRules 
@@ -126,6 +122,7 @@
     threshold={null}
     {customHtmlRuleOptions}
     on:htmlHintThreshold={() => showHtmlHintThreshold(data.summary, user)}
+    on:updateHtmlRules={() => getCustomHtmlRuleOptions()}
   />
 {/if}
 

ui/src/components/htmlhintcomponents/HtmlErrorsByReason.svelte

@@ -9,17 +9,22 @@
     HTMLERRORS,
     getRuleLink,
     getDisplayText,
+    globMatchUrl
   } from "../../utils/utils.js";
   import { fade } from "svelte/transition";
   import { createEventDispatcher } from "svelte";
   import Icon from "../misccomponents/Icon.svelte";
   import { htmlHintRules, customHtmlHintRules } from "../../utils/utils.js";
+  import LoadingCircle from "../misccomponents/LoadingCircle.svelte";
 
   export let errors = [];
   export let codeIssues = [];
+  export let customHtmlRuleOptions = [];
 
   let showAllErrorLocations = false;
   let currentlySelectedUrl;
+  let ignoredChecks = {};
+  let loadingChecks = {};
 
   const dispatch = createEventDispatcher();
 
@@ -59,6 +64,33 @@
     codeIssues && codeIssues.length > 0
       ? (getCodeErrorRules(codeIssues) || []).concat(HTMLERRORS)
       : HTMLERRORS;
+  $: {
+    customHtmlRuleOptions.forEach((rule) => {
+      const ignoredUrls = rule.ignoredUrls?.split(',').filter(i => i) || [];
+      
+      errors.forEach((error) => {
+        if (error.errors[rule.ruleId] && ignoredUrls.some((url) => globMatchUrl(url, error.url))) {
+          ignoredChecks[getKey(error.url, rule.ruleId)] = true;
+        } else {
+          ignoredChecks[getKey(error.url, rule.ruleId)] = false;
+        }
+      });
+
+      loadingChecks = {};
+    });
+  }
+
+  const toggleIgnore = async (url, id) => {
+    loadingChecks[getKey(url, id)] = true;
+    
+    if (ignoredChecks[getKey(url, id)]) {
+      dispatch('removeIgnoredUrl', { url, id });
+    } else {
+      dispatch('addIgnoredUrl', { url, id });
+    }
+  };
+
+  const getKey = (url, id) => (`${url}-${id}`);
 
   // Assigning key values to each rules to collapse reason line by default
   var arr = htmlHintRules.map(x => ({[x.rule]: true})).concat(customHtmlHintRules.map(x => ({[x.rule]: true})))
@@ -102,19 +134,19 @@
       <thead>
         <tr>
           <th class="w-2/12 px-4 py-2">Page ({error.pages.length})</th>
-          <th class="w-10/12 px-4 py-2">Locations (line:col)</th>
+          <th class="w-9/12 px-4 py-2">Locations (line:col)</th>
+          <th class="w-1/12 px-4 py-2">Ignore</th>
         </tr>
       </thead>
       <tbody>
         {#each error.pages as page}
           <tr>
             <td
-              class="whitespace-nowrap break-all w-2/12 border px-4 py-2
-              break-all"
+              class="whitespace-nowrap break-all w-2/12 border px-4 py-2"
               title={page.url}>
               <a class="link" href={page.url}>{truncate(80)(page.url)}</a>
             </td>
-            <td class="w-10/12 border px-4 py-2 break-all">
+            <td class="w-9/12 border px-4 py-2 break-all">
               <div class="flex flex-wrap">
                 {#each slice(0, 49, page.locations) as item}
                   <div
@@ -156,6 +188,13 @@
                 </a>
               {/if}
             </td>
+            <td class="w-1/12 border px-4 py-2 break-all text-center">
+              {#if loadingChecks[getKey(page.url, error.error)]}
+                <LoadingCircle />
+              {:else}
+                <input type="checkbox" on:click={() => toggleIgnore(page.url, error.error)} bind:checked={ignoredChecks[getKey(page.url, error.error)]} />
+              {/if}
+            </td>
           </tr>
         {/each}
       </tbody>

ui/src/components/htmlhintcomponents/HtmlErrorsBySource.svelte

@@ -7,24 +7,42 @@
     getCodeErrorsByFile,
     getRuleLink,
     getDisplayText,
+    globMatchUrl,
   } from "../../utils/utils.js";
   import { fade } from "svelte/transition";
   import { createEventDispatcher } from "svelte";
   import Icon from "../misccomponents/Icon.svelte";
+  import LoadingCircle from "../misccomponents/LoadingCircle.svelte";
 
   export let errors = [];
   export let codeIssues = [];
+  export let customHtmlRuleOptions = [];
   let showAllErrorLocations = false;
   let currentlySelectedUrl = '';
   let currentlySelectedKey = '';
+  let ignoredChecks = {};
+  let loadingChecks = {};
   
   $: allErrors = errors.concat(getCodeErrorsByFile(codeIssues));
   $: htmlHintIssues = getHtmlHintIssues(errors);
+  $: {
+    customHtmlRuleOptions.forEach((rule) => {
+      const ignoredUrls = rule.ignoredUrls?.split(',').filter(i => i) || [];
+      
+      allErrors.forEach((error) => {
+        if (error.errors[rule.ruleId] && ignoredUrls.some((url) => globMatchUrl(url, error.url))) {
+          ignoredChecks[getKey(error.url, rule.ruleId)] = true;
+        } else {
+          ignoredChecks[getKey(error.url, rule.ruleId)] = false;
+        }
+      });
+    });
+
+    loadingChecks = {};
+  }
   
   const dispatch = createEventDispatcher();
   const viewSource = (url, location, key) => {
-    console.log(url, location);
-
     if (htmlHintIssues.indexOf(key) >= 0) {
       dispatch("viewSource", {
         url,
@@ -51,11 +69,20 @@
       : HTMLERRORS;
 
   let hiddenRows = {};
-  const viewRule = k => {
-    window.open();
-  };
   const hideShow = key =>
     (hiddenRows[key] = key in hiddenRows ? !hiddenRows[key] : true);
+
+  const toggleIgnore = async (url, id) => {
+    loadingChecks[getKey(url, id)] = true;
+
+    if (ignoredChecks[getKey(url, id)]) {
+      dispatch('removeIgnoredUrl', { url, id });
+    } else {
+      dispatch('addIgnoredUrl', { url, id });
+    }
+  };
+
+  const getKey = (url, id) => (`${url}-${id}`);
 </script>
 
 {#each allErrors as url}
@@ -86,15 +113,15 @@
           <th class="w-2/12 px-4 py-2">
             Issues ({Object.keys(url.errors).length})
           </th>
-          <th class="w-10/12 px-4 py-2">Locations</th>
+          <th class="w-9/12 px-4 py-2">Locations</th>
+          <th class="w-1/12 px-4 py-2">Ignore</th>
         </tr>
       </thead>
       <tbody>
         {#each Object.keys(url.errors) as key}
           <tr>
             <td
-              class="whitespace-nowrap break-all w-2/12 border px-4 py-2
-              break-all">
+              class="whitespace-nowrap break-all w-2/12 border px-4 py-2">
               <i class="{ERRORS.indexOf(key) >= 0 ? 'fas fa-exclamation-circle fa-lg' : 'fas fa-exclamation-triangle fa-lg'}" style="{ERRORS.indexOf(key) >= 0 ? 'color: red' : 'color: #d69e2e'}"></i> 
               <a
                 class="hidden md:inline-block align-baseline link"
@@ -104,7 +131,7 @@
               </a>
 
             </td>
-            <td class="w-10/12 border px-4 py-2 break-all">
+            <td class="w-9/12 border px-4 py-2 break-all">
               <div class="flex flex-wrap">
                 {#each slice(0, 49, url.errors[key]) as item}
                   <div
@@ -146,6 +173,13 @@
                 </a>
               {/if}
             </td>
+            <td class="w-1/12 border px-4 py-2 break-all text-center">
+              {#if loadingChecks[getKey(url.url, key)]}
+                <LoadingCircle />
+              {:else}
+                <input type="checkbox" on:click={() => toggleIgnore(url.url, key)} bind:checked={ignoredChecks[getKey(url.url, key)]} />
+              {/if}
+            </td>
           </tr>
         {/each}
       </tbody>

ui/src/components/htmlhintcomponents/HtmlErrorsTable.svelte

@@ -18,6 +18,7 @@
   export let errors = [];
   export let codeIssues = [];
   export let currentRoute;
+  export let customHtmlRuleOptions;
 
   let displayMode = 0;
   let viewUrlSource = "";
@@ -181,14 +182,20 @@
     <HtmlErrorsBySource
       {errors}
       {codeIssues}
+      {customHtmlRuleOptions}
       on:viewSource={viewPageSource}
-      on:viewCode={viewCode} />
+      on:viewCode={viewCode}
+      on:addIgnoredUrl
+      on:removeIgnoredUrl />
   {:else}
     <HtmlErrorsByReason
       {errors}
       {codeIssues}
+      {customHtmlRuleOptions}
       on:viewSource={viewPageSource}
-      on:viewCode={viewCode} />
+      on:viewCode={viewCode}
+      on:addIgnoredUrl
+      on:removeIgnoredUrl />
   {/if}
 {/if}
 

ui/src/components/htmlhintcomponents/RuleItem.svelte

@@ -1,6 +1,7 @@
 <script>
   import { CONSTS, RuleType, customOptionInputType } from '../../utils/utils';
   import { createEventDispatcher } from 'svelte';
+  import LoadingCircle from '../misccomponents/LoadingCircle.svelte';
 
   export let rule;
   export let customHtmlRuleOptions;
@@ -11,6 +12,7 @@
   let ignoredUrls = [''];
   let customOptionInput = '';
   let multiInputValues = [''];
+  let loading = false;
 
   const dispatch = createEventDispatcher();
   const updateHtmlHintCustomOption = () =>
@@ -47,7 +49,7 @@
     ignoredUrls,
     { rule: ruleId }
   ) => {
-    dispatch('updateHtmlHintCustomOption', true);
+    loading = true;
     const res = await fetch(
       `${CONSTS.API}/api/config/addCustomHtmlRuleOptions/${user.apiKey}`,
       {
@@ -62,8 +64,9 @@
       }
     );
 
+    loading = false;
+
     if (res.ok) {
-      dispatch('updateHtmlHintCustomOption', false);
       customOptionInput = null;
       multiInputValues = [''];
       toggleCustomOption(false);
@@ -224,10 +227,17 @@
             {/if}
           {/if}
           <div class="py-2">
-            <button class="text-white bgred px-2 py-1" type="submit"
-              >Save</button
+            <button
+              class="text-white bgred px-2 py-1"
+              type="submit"
+              disabled={loading}
+              >Save
+              {#if loading}
+                <LoadingCircle />
+              {/if}</button
             >
             <button
+              disabled={loading}
               class="text-white bgdark px-2 py-1"
               on:click|preventDefault={() => {
                 toggleCustomOption(false);
@@ -237,6 +247,7 @@
             <button
               class="px-2 py-1"
               style="border: none"
+              disabled={loading}
               on:click|preventDefault={() => {
                 addCustomRuleOptions('', '', rule);
               }}