Add support for code suppression fields

This changes the issue count, adds a card for suppressions,
and also moves any suppressed issues to the end of the list.

src/handlebars-config.ts

@@ -0,0 +1,10 @@
+const Handlebars = require('handlebars');
+import { firstInitial, formatDate } from './lib/codeutil';
+
+export function registerHandlebarsHelpers() {
+  Handlebars.registerHelper('firstInitial', firstInitial);
+  Handlebars.registerHelper('formatDate', formatDate);
+
+  // Add any existing helpers here
+  // ...
+}

src/lib/codeutil.ts

@@ -109,10 +109,17 @@ export async function processSourceCode(dataArray){
   const rulesArray = dataArray[0].runs[0].tool.driver.rules;
   for (const issue of dataArray[0].runs[0].results){
     issue.severitytext = codeSeverityMap[issue.level];
-    findSeverityIndex = codeSeverityCounter.findIndex(
-      (f) => f.severity === issue.severitytext,
-    );
-    codeSeverityCounter[findSeverityIndex].counter++;
+
+    // Only count non-suppressed issues
+    if (!issue.suppressions || issue.suppressions.length === 0) {
+      findSeverityIndex = codeSeverityCounter.findIndex(
+        (f) => f.severity === issue.severitytext,
+      );
+      if (findSeverityIndex !== -1) {
+        codeSeverityCounter[findSeverityIndex].counter++;
+      }
+    }
+
     //add the code snippet here...
     issue.locations[0].physicalLocation.codeString = await readCodeSnippet(
       issue.locations[0],
@@ -149,4 +156,30 @@ export async function processSourceCode(dataArray){
     };
   });
   return OrderedIssuesArray;
-}
+}
+
+export function processSuppression(suppression: any) {
+  if (!suppression) return null;
+
+  return {
+    justification: suppression.justification,
+    category: suppression.properties?.category || 'unknown',
+    expiration: suppression.properties?.expiration,
+    ignoredOn: suppression.properties?.ignoredOn,
+    ignoredBy: suppression.properties?.ignoredBy,
+  };
+}
+
+export function firstInitial(email: string | null | undefined): string {
+  if (!email || typeof email !== 'string') {
+    return '?'; // Return a placeholder if email is null, undefined, or not a string
+  }
+  return email.charAt(0).toUpperCase();
+}
+
+export function formatDate(date: string | null | undefined): string {
+  if (!date) {
+    return 'Unknown date';
+  }
+  return new Date(date).toISOString().slice(0, 19).replace('T', ' ') + ' GMT';
+}

src/lib/snyk-to-html.ts

@@ -11,7 +11,11 @@ import path = require('path');
 import { addIssueDataToPatch, getUpgrades, severityMap, IacProjectType } from './vuln';
 import {
   processSourceCode,
+  processSuppression,
 } from './codeutil';
+import { registerHandlebarsHelpers } from '../handlebars-config';
+
+registerHandlebarsHelpers();
 import { 
   formatDateTime
 } from './dateutil';
@@ -347,6 +351,20 @@ async function processCodeData(
 
   const OrderedIssuesArray = await processSourceCode(dataArray);
 
+  // Process suppressions
+  OrderedIssuesArray.forEach(project => {
+    project.vulnerabilities = project.vulnerabilities.map(vuln => {
+      if (vuln.suppressions && vuln.suppressions.length > 0) {
+        vuln.suppression = processSuppression(vuln.suppressions[0]);
+      }
+      return vuln;
+    }).sort((a, b) => {
+      if (a.suppression && !b.suppression) return 1;
+      if (!a.suppression && b.suppression) return -1;
+      return 0;
+    });
+  });
+
   const totalIssues = dataArray[0].runs[0].results.length;
   const processedData = {
     projects: OrderedIssuesArray,
@@ -443,3 +461,12 @@ const hh = {
 };
 
 Object.keys(hh).forEach(k => Handlebars.registerHelper(k, hh[k]));
+
+function getIssueCountsBySeverity(issuesGroupedBySeverity: any) {
+  const counts: { [key: string]: number } = {};
+  Object.keys(issuesGroupedBySeverity).forEach((severity) => {
+    counts[severity] = issuesGroupedBySeverity[severity].filter((issue: any) => !issue.suppression).length;
+  });
+  return counts;
+}
+

template/code/test-report.code-snip.hbs

@@ -1,4 +1,4 @@
-<div class="card card--vuln  disclosure--not-new severity--{{severitytext}}" data-snyk-test="{{severitytext}}">
+<div class="card card--vuln  disclosure--not-new severity--{{severitytext}} {{#if suppression}}suppressed{{/if}}" data-snyk-test="{{severitytext}}">
     <header class="card__header">
         <div class="card__header__main">
             <div class="severity-icon severity-icon--{{severitytext}}"></div>
@@ -36,6 +36,43 @@
             <h2 class="card__panel__heading"><span class="heading-char">✓</span> Fix Analysis</h2>
             <div class="card__panel__markdown">{{{markdown ruleiddesc.help.markdown}}}</div>
         </div>
+        {{#if suppression}}
+        <div class="suppression-card">
+            <div class="suppression-card__container">
+                <ul class="suppression-card__items">
+                    <li class="suppression-card__item">
+                        <div class="suppression-card__item__key">Ignored at {{formatDate suppression.ignoredOn}} by</div>
+                        <div class="suppression-card__item__value">
+                            <span class="user-initial">{{firstInitial suppression.ignoredBy.name}}</span>
+                            {{#if suppression.ignoredBy.name}} {{ suppression.ignoredBy.name }} {{/if}} {{#if suppression.ignoredBy.email}} &lt;{{suppression.ignoredBy.email}}&gt;{{/if}}
+                        </div>
+                    </li>
+                    <li class="suppression-card__item">
+                        <div class="suppression-card__item__key">Type</div>
+                        <div class="suppression-card__item__value">
+                            {{suppression.category}}
+                        </div>
+                    </li>
+                    <li class="suppression-card__item">
+                        <div class="suppression-card__item__key">Reason</div>
+                        <div class="suppression-card__item__value">
+                            {{suppression.justification}}
+                        </div>
+                    </li>
+                </ul>
+                <ul class="suppression-card__items">
+                    <li class="suppression-card__item">
+                    </li>
+                    <li class="suppression-card__item">
+                        <div class="suppression-card__item__key">Expires</div>
+                        <div class="suppression-card__item__value">
+                            {{#if suppression.expiration}}{{formatDate suppression.expiration}}{{else}}Never{{/if}}
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        {{/if}}
     {{/unless}}
     </div>
 </div>

template/code/test-report.hbs

@@ -69,4 +69,4 @@
   </main>
 </body>
 {{> inline-js }}
-</html>
+</html>

template/code/test-report.inline-css.hbs

@@ -94,6 +94,85 @@
   }
 
 
+  .suppressed {
+    opacity: 0.7;
+    border-left: 5px solid #888;
+  }
+
+  .suppression-card {
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 20px;
+    background-color: #fff7e6;
+  }
+
+  .suppression-card__container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .suppression-card__items {
+    flex: 1 1 50%;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .suppression-card__item {
+    margin-bottom: 10px;
+  }
+
+  .suppression-card__item__key {
+    font-weight: bold;
+    color: #b35900;
+    margin-bottom: 2px;
+  }
+
+  .suppression-card__item__value {
+    color: #333;
+  }
+
+  .user-initial {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #6666cc;
+    color: white;
+    text-align: center;
+    line-height: 24px;
+    margin-right: 5px;
+    font-weight: bold;
+  }
+
+  .suppression-card table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .suppression-card td {
+    padding: 5px;
+    vertical-align: top;
+  }
+
+  .suppression-card strong {
+    color: #b35900;
+  }
+
+  .user-initial {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #6666cc;
+    color: white;
+    text-align: center;
+    line-height: 24px;
+    margin-right: 5px;
+    font-weight: bold;
+  }
+
 /* Layout */
 
   [class*=layout-container] {
@@ -358,4 +437,11 @@
    .marker { border:1px solid #555; margin:-1px 0; background: transparent }
 }
 
+.suppression-card__path {
+    word-break: break-all;
+}
+
 </style>
+
+
+