Prod Deploy

.ds.baseline

@@ -555,15 +555,15 @@
         "filename": "tests/app/main/views/test_register.py",
         "hashed_secret": "5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8",
         "is_verified": false,
-        "line_number": 200,
+        "line_number": 199,
         "is_secret": false
       },
       {
         "type": "Secret Keyword",
         "filename": "tests/app/main/views/test_register.py",
         "hashed_secret": "bb5b7caa27d005d38039e3797c3ddb9bcd22c3c8",
         "is_verified": false,
-        "line_number": 273,
+        "line_number": 272,
         "is_secret": false
       }
     ],
@@ -684,5 +684,5 @@
       }
     ]
   },
-  "generated_at": "2025-01-13T20:16:58Z"
+  "generated_at": "2025-01-16T16:38:48Z"
 }

.github/ISSUE_TEMPLATE/issue_template.yml

@@ -64,6 +64,17 @@ body:
     validations:
       required: false
 
+  - type: markdown
+    attributes:
+      value: '**Accessibility:**'
+  - type: textarea
+    id: accessibility
+    attributes:
+      label: "List any specific accessibility guidance or tests that need to be considered for this user story."
+      description: "List what type of accessibility tests need to pass."
+    validations:
+      required: false
+
   - type: markdown
     attributes:
       value: '**Notes:**'

.github/pull_request_template.md

@@ -20,3 +20,10 @@ Please enter a detailed description here.
 * Consideration 1
 * Consideration 2
 * Consideration ...
+
+## A11y Checks (if applicable)
+
+* Double check work is getting picked up by the automated E2E tests 
+* Conduct browser-based tests through [AxeDevTools](https://www.deque.com/axe/devtools/) and [WAVE](https://wave.webaim.org/)
+* Review the [Manual Checklist](https://docs.google.com/document/d/192bBXStebdXWtYhZQ73qaWMJhGcuSB1W6c9YBXhWZvc/edit?usp=sharing)
+* Make sure there are no linting errors in VSCode or other IDE of choice

app/assets/javascripts/activityChart.js

@@ -1,18 +1,22 @@
 (function (window) {
 
     if (document.getElementById('activityChartContainer')) {
-
+        let currentType = 'service';
+        const tableContainer = document.getElementById('activityContainer');
+        const currentUserName = tableContainer.getAttribute('data-currentUserName');
+        const currentServiceId = tableContainer.getAttribute('data-currentServiceId');
         const COLORS = {
             delivered: '#0076d6',
             failed: '#fa9441',
+            pending: '#C7CACE',
             text: '#666'
         };
 
         const FONT_SIZE = 16;
         const FONT_WEIGHT = 'bold';
         const MAX_Y = 120;
 
-        const createChart = function(containerId, labels, deliveredData, failedData) {
+        const createChart = function(containerId, labels, deliveredData, failedData, pendingData) {
             const container = d3.select(containerId);
             container.selectAll('*').remove(); // Clear any existing content
 
@@ -35,7 +39,7 @@
             }
 
             // Calculate total messages
-            const totalMessages = d3.sum(deliveredData) + d3.sum(failedData);
+            const totalMessages = d3.sum(deliveredData) + d3.sum(failedData) + d3.sum(pendingData);
 
             // Create legend only if there are messages
             const legendContainer = d3.select('.chart-legend');
@@ -45,7 +49,8 @@
                 // Show legend if there are messages
                 const legendData = [
                     { label: 'Delivered', color: COLORS.delivered },
-                    { label: 'Failed', color: COLORS.failed }
+                    { label: 'Failed', color: COLORS.failed },
+                    { label: 'Pending', color: COLORS.pending }
                 ];
 
                 const legendItem = legendContainer.selectAll('.legend-item')
@@ -76,8 +81,9 @@
                 .range([0, width])
                 .padding(0.1);
                             // Adjust the y-axis domain to add some space above the tallest bar
-            const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0)));
-            const y = d3.scaleSqrt()
+            const maxY = d3.max(deliveredData.map((d, i) => d + (failedData[i] || 0) + (pendingData[i] || 0)));
+
+            const y = d3.scaleSymlog()
                 .domain([0, maxY + 2]) // Add 2 units of space at the top
                 .nice()
                 .range([height, 0]);
@@ -89,7 +95,7 @@
 
             // Generate the y-axis with whole numbers
             const yAxis = d3.axisLeft(y)
-                .ticks(Math.min(maxY + 2, 10)) // Generate up to 10 ticks based on the data
+                .ticks(Math.min(maxY + 2, 3))
                 .tickFormat(d3.format('d')); // Ensure whole numbers on the y-axis
 
             svg.append('g')
@@ -100,21 +106,22 @@
             const stackData = labels.map((label, i) => ({
                 label: label,
                 delivered: deliveredData[i],
-                failed: failedData[i] || 0 // Ensure there's a value for failed, even if it's 0
+                failed: failedData[i] || 0,
+                pending: pendingData[i] || 0
             }));
 
             // Stack the data
             const stack = d3.stack()
-                .keys(['delivered', 'failed'])
+                .keys(['delivered', 'failed', 'pending'])
                 .order(d3.stackOrderNone)
                 .offset(d3.stackOffsetNone);
 
             const series = stack(stackData);
 
             // Color scale
             const color = d3.scaleOrdinal()
-                .domain(['delivered', 'failed'])
-                .range([COLORS.delivered, COLORS.failed]);
+                .domain(['delivered', 'failed', 'pending'])
+                .range([COLORS.delivered, COLORS.failed, COLORS.pending]);
 
         // Create bars with animation
         const barGroups = svg.selectAll('.bar-group')
@@ -152,7 +159,7 @@
     };
 
     // Function to create an accessible table
-    const createTable = function(tableId, chartType, labels, deliveredData, failedData) {
+    const createTable = function(tableId, chartType, labels, deliveredData, failedData, pendingData) {
         const table = document.getElementById(tableId);
         table.innerHTML = ""; // Clear previous data
 
@@ -164,7 +171,7 @@
 
         // Create table header
         const headerRow = document.createElement('tr');
-        const headers = ['Day', 'Delivered', 'Failed'];
+        const headers = ['Day', 'Delivered', 'Failed', 'Pending'];
         headers.forEach(headerText => {
             const th = document.createElement('th');
             th.textContent = headerText;
@@ -187,6 +194,10 @@
             cellFailed.textContent = failedData[index];
             row.appendChild(cellFailed);
 
+            const cellPending = document.createElement('td');
+            cellPending.textContent = pendingData[index];
+            row.appendChild(cellPending);
+
             tbody.appendChild(row);
         });
 
@@ -196,12 +207,13 @@
     };
 
     const fetchData = function(type) {
+
         var ctx = document.getElementById('weeklyChart');
         if (!ctx) {
             return;
         }
 
-        var url = type === 'service' ? `/daily_stats.json` : `/daily_stats_by_user.json`;
+        var url = type === 'service' ? `/services/${currentServiceId}/daily-stats.json` : `/services/${currentServiceId}/daily-stats-by-user.json`;
         return fetch(url)
             .then(response => {
                 if (!response.ok) {
@@ -213,7 +225,7 @@
                 labels = [];
                 deliveredData = [];
                 failedData = [];
-
+                pendingData = [];
                 let totalMessages = 0;
 
                 for (var dateString in data) {
@@ -224,6 +236,8 @@
                         labels.push(formattedDate);
                         deliveredData.push(data[dateString].sms.delivered);
                         failedData.push(data[dateString].sms.failure);
+                        pendingData.push(data[dateString].sms.pending || 0);
+                        totalMessages += data[dateString].sms.delivered + data[dateString].sms.failure + data[dateString].sms.pending;
 
                         // Calculate the total number of messages
                         totalMessages += data[dateString].sms.delivered + data[dateString].sms.failure;
@@ -252,54 +266,86 @@
                     }
                 } else {
                     // If there are messages, create the chart and table
-                    createChart('#weeklyChart', labels, deliveredData, failedData);
-                    createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
-                }
-
-                return data;
-            })
-            .catch(error => console.error('Error fetching daily stats:', error));
-    };
+                    createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
+                    createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
+                    }
 
+                    return data;
+                })
+                .catch(error => console.error('Error fetching daily stats:', error));
+        };
+        setInterval(() => fetchData(currentType), 25000);
     const handleDropdownChange = function(event) {
         const selectedValue = event.target.value;
+        currentType = selectedValue;
         const subTitle = document.querySelector(`#activityChartContainer .chart-subtitle`);
         const selectElement = document.getElementById('options');
         const selectedText = selectElement.options[selectElement.selectedIndex].text;
 
         subTitle.textContent = `${selectedText} - last 7 days`;
         fetchData(selectedValue);
 
-        // Update ARIA live region
         const liveRegion = document.getElementById('aria-live-account');
         liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
 
-        // Switch tables based on dropdown selection
-        const selectedTable = selectedValue === "individual" ? "table1" : "table2";
-        const tables = document.querySelectorAll('.table-overflow-x-auto');
-        tables.forEach(function(table) {
-            table.classList.add('hidden'); // Hide all tables by adding the hidden class
-            table.classList.remove('visible'); // Ensure they are not visible
-        });
-        const tableToShow = document.getElementById(selectedTable);
-        tableToShow.classList.remove('hidden'); // Remove hidden class
-        tableToShow.classList.add('visible'); // Add visible class
+        const tableHeading = document.querySelector('#tableActivity h2');
+        const senderColumns = document.querySelectorAll('.sender-column');
+        const allRows = document.querySelectorAll('#activity-table tbody tr');
+        const caption = document.querySelector('#activity-table caption');
+
+        if (selectedValue === 'individual') {
+
+            tableHeading.textContent = 'My activity';
+            caption.textContent = `Table showing the sent jobs for ${currentUserName}`;
+
+            senderColumns.forEach(col => {
+            col.style.display = 'none';
+            });
+
+            allRows.forEach(row => row.style.display = 'none');
+
+            const userRows = Array.from(allRows).filter(row => {
+                const senderCell = row.querySelector('.sender-column');
+                const rowSender = senderCell ? senderCell.textContent.trim() : '';
+                return rowSender === currentUserName;
+            });
+
+            userRows.slice(0, 5).forEach(row => {
+                row.style.display = '';
+            });
+        } else {
+
+            tableHeading.textContent = 'Service activity';
+            caption.textContent = `Table showing the sent jobs for service`;
+
+            senderColumns.forEach(col => {
+            col.style.display = '';
+            });
+
+            allRows.forEach((row, index) => {
+                row.style.display = (index < 5) ? '' : 'none';
+            });
+        }
     };
 
     document.addEventListener('DOMContentLoaded', function() {
         // Initialize activityChart chart and table with service data by default
-        fetchData('service');
+        fetchData(currentType);
+
+        const allRows = Array.from(document.querySelectorAll('#activity-table tbody tr'));
+        allRows.forEach((row, index) => {
+            row.style.display = (index < 5) ? '' : 'none';
+        });
 
-        // Add event listener to the dropdown
         const dropdown = document.getElementById('options');
         dropdown.addEventListener('change', handleDropdownChange);
     });
 
         // Resize chart on window resize
         window.addEventListener('resize', function() {
-            if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0) {
-                createChart('#weeklyChart', labels, deliveredData, failedData);
-                createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData);
+            if (labels.length > 0 && deliveredData.length > 0 && failedData.length > 0 && pendingData.length > 0) {
+                createChart('#weeklyChart', labels, deliveredData, failedData, pendingData);
+                createTable('weeklyTable', 'activityChart', labels, deliveredData, failedData, pendingData);
             }
         });
 

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

@@ -1024,3 +1024,7 @@ nav.nav {
   font-size: units(3);
   font-weight: bold;
 }
+
+.form-control-error {
+  border: 4px solid #b10e1e
+}

app/content/get-started.md

@@ -5,7 +5,7 @@
 Explore Notify, add team members, and practice [sending messages to teammates](/using-notify/trial-mode).
 
 2. ## Personalize content
-Learn how to [personalize messages](/using-notify/guidance) to increase response.
+Learn how to [personalize messages](/using-notify/how-to) to increase response.
 
 3. ## Check delivery status
 [Analyze the delivery](/using-notify/delivery-status) of your messages and download reports