1871 - Adding search functionality to the Activity landing page in the Dashboard

app/assets/javascripts/searchActivity.js

@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('activity-search');
+    const tableRows = document.querySelectorAll('.job-table tbody .table-row');
+    const tableBody = document.querySelector('.job-table tbody');
+    const liveRegion = document.querySelector('.usa-table__announcement-region');
+
+    function filterTable() {
+        const filter = searchInput.value.toLowerCase();
+        let visibleRowCount = 0;
+
+        tableRows.forEach(row => {
+            const rowText = row.textContent.toLowerCase();
+
+            if (rowText.includes(filter)) {
+                row.style.display = 'table-row'; // Show the row
+                visibleRowCount++;
+            } else {
+                row.style.display = 'none'; // Hide the row
+            }
+        });
+
+        // Update ARIA live region
+        liveRegion.textContent = `${visibleRowCount} result${visibleRowCount !== 1 ? 's' : ''} found`;
+
+        // Check if there are no visible rows
+        if (visibleRowCount === 0) {
+            let noResultsRow = document.querySelector('.no-results');
+            if (!noResultsRow) {
+                const newRow = document.createElement('tr');
+                newRow.classList.add('no-results');
+                newRow.innerHTML = `
+                    <td colspan="7" class="table-empty-message">No results found</td>
+                `;
+                tableBody.appendChild(newRow);
+            }
+        } else {
+            const noResultsRow = document.querySelector('.no-results');
+            if (noResultsRow) {
+                noResultsRow.remove();
+            }
+        }
+    }
+
+    // Listen for input events to catch when the "X" button is used
+    searchInput.addEventListener('input', function() {
+        filterTable();
+    });
+
+    // Also handle the keyup event for other input changes
+    searchInput.addEventListener('keyup', function() {
+        filterTable();
+    });
+});

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -444,6 +444,20 @@ td.table-empty-message {
    }
 }
 
+.usa-search .usa-button {
+   img {
+      margin-left: 0;
+   }
+}
+
+.table-filter {
+   flex-direction: column;
+   input {
+      margin-top: units(1);
+      border-right: 1px solid color('gray-cool-60');
+   }
+}
+
 .usage-table {
    ul {
       list-style: none;

app/templates/views/activity/all-activity.html

@@ -64,9 +64,20 @@
     <h1 class="usa-sr-only">All activity</h1>
     <h2 class="font-body-2xl line-height-sans-2 margin-0">All activity</h2>
     <h2 class="margin-top-4 margin-bottom-1">Sent jobs</h2>
+    <section aria-label="All activity search" class="margin-top-2">
+      <form class="usa-search usa-search--small table-filter" role="search">
+        <label class="usa-labe margin-top-0" for="activity-search">Search</label>
+        <input
+          class="usa-input"
+          id="activity-search"
+          type="search"
+          name="All activity search"
+        />
+      </form>
+    </section>
     <div class="usa-table-container--scrollable-mobile">
       <table class="usa-table usa-table--compact job-table">
-        <caption></caption>
+        <caption class="usa-sr-only">All activity table</caption>
         <thead class="table-field-headings">
           <tr>
             <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId">
@@ -125,7 +136,9 @@
         {% endif %}
         </tbody>
       </table>
-      <div class="usa-sr-only usa-table__announcement-region" aria-live="polite"></div>
+      <div class="usa-table__announcement-region usa-sr-only" aria-live="polite" aria-atomic="true">
+        <!-- Live region content goes here -->
+      </div>
       <p><b>Note: </b>Report data is only available for 7 days after your message has been sent</p>
     </div>
     {{show_pagination}}