display new button for failure lines we haven't seen [in 21 days]. (#7538)

ui/shared/tabs/failureSummary/FailureSummaryTab.jsx

@@ -155,6 +155,24 @@ class FailureSummaryTab extends React.Component {
     const jobLogsAllParsed =
       logs.length > 0 && logs.every((jlu) => jlu.parse_status !== 'pending');
 
+    let newButtonShown = false;
+    let suggestionCounter = 0;
+    suggestions.forEach((suggestion) => {
+      suggestionCounter++;
+      // this allows us to focus on the top line
+      if (suggestionCounter < 2) {
+        suggestion.showNewButton = false;
+        if (
+          !newButtonShown &&
+          suggestion.search.split(' | ').length === 3 &&
+          suggestion.counter === 1
+        ) {
+          newButtonShown = true;
+          suggestion.showNewButton = true;
+        }
+      }
+    });
+
     return (
       <div className="w-100 h-100" role="region" aria-label="Failure Summary">
         <ul

ui/shared/tabs/failureSummary/SuggestionsListItem.jsx

@@ -168,6 +168,17 @@ export default class SuggestionsListItem extends React.Component {
               >
                 <FontAwesomeIcon icon={faBug} title="File bug" />
               </Button>
+
+              {suggestion.showNewButton && (
+                <Button
+                  className="btn-orange"
+                  outline
+                  title="number of times this error message has been seen until now (including this run)"
+                >
+                  NEW
+                </Button>
+              )}
+
               <span className="align-middle">{suggestion.search} </span>
               <Clipboard
                 description=" text of error line"