Merge pull request #2533 from GSA/main

04/24/2025 Production Deploy

Author: ccostino

.ds.baseline

@@ -151,7 +151,7 @@
         "filename": "app/config.py",
         "hashed_secret": "577a4c667e4af8682ca431857214b3a920883efc",
         "is_verified": false,
-        "line_number": 118,
+        "line_number": 120,
         "is_secret": false
       }
     ],
@@ -674,5 +674,5 @@
       }
     ]
   },
-  "generated_at": "2025-03-20T18:22:36Z"
+  "generated_at": "2025-04-10T19:38:31Z"
 }

.github/workflows/checks.yml

@@ -167,6 +167,7 @@ jobs:
         run: make run-flask &
         env:
           NOTIFY_ENVIRONMENT: scanning
+          FEATURE_SOCKET_ENABLED: true
       - name: Run OWASP Baseline Scan
         uses: zaproxy/action-baseline@v0.14.0
         with:

.gitignore

@@ -14,6 +14,7 @@
 *.XLSX
 
 ## Non user files allowed to be commited
+!app/assets/pdf/wa_case_study.pdf
 !app/assets/pdf/best-practices-for-texting-the-public.pdf
 !app/assets/pdf/investing-in-notifications-tts-public-benefits-studio-decision-memo.pdf
 !app/assets/pdf/best-practices-section-outline.pdf

Makefile

@@ -69,7 +69,7 @@ generate-version-file: ## Generates the app version file
 	@echo -e "__git_commit__ = \"${GIT_COMMIT}\"\n__time__ = \"${DATE}\"" > ${APP_VERSION_FILE}
 
 .PHONY: test
-test: py-lint py-test js-lint js-test ## Run tests
+test: py-lint py-test js-test ## Run tests
 
 .PHONY: py-lint
 py-lint: ## Run python linting scanners and black
@@ -99,7 +99,7 @@ too-complex:
 py-test: export NEW_RELIC_ENVIRONMENT=test
 py-test: ## Run python unit tests
 	poetry run coverage run -m pytest --maxfail=10 --ignore=tests/end_to_end tests/
-	poetry run coverage report --fail-under=96
+	poetry run coverage report --fail-under=93
 	poetry run coverage html -d .coverage_cache
 
 .PHONY: dead-code

app/__init__.py

@@ -109,6 +109,7 @@
 from app.notify_client.upload_api_client import upload_api_client
 from app.notify_client.user_api_client import user_api_client
 from app.url_converters import SimpleDateTypeConverter, TemplateTypeConverter
+from app.utils.api_health import is_api_down
 from app.utils.govuk_frontend_jinja.flask_ext import init_govuk_frontend
 from notifications_utils import logging, request_helper
 from notifications_utils.formatters import (
@@ -158,11 +159,14 @@ def _csp(config):
             "https://www.googletagmanager.com",
             "https://www.google-analytics.com",
             "https://dap.digitalgov.gov",
+            "https://cdn.socket.io",
         ],
         "connect-src": [
             "'self'",
             "https://gov-bam.nr-data.net",
             "https://www.google-analytics.com",
+            "http://localhost:6011",
+            "ws://localhost:6011",
         ],
         "style-src": ["'self'", asset_domain],
         "img-src": ["'self'", asset_domain, logo_domain],
@@ -173,17 +177,22 @@ def create_app(application):
     @application.after_request
     def add_csp_header(response):
         existing_csp = response.headers.get("Content-Security-Policy", "")
-        response.headers["Content-Security-Policy"] = existing_csp + "; form-action 'self';"
+        response.headers["Content-Security-Policy"] = (
+            existing_csp + "; form-action 'self';"
+        )
         return response
-    # @application.context_processor
-    # def inject_feature_flags():
-    # this is where feature flags can be easily added as a dictionary within context
-    # feature_about_page_enabled = application.config.get(
-    # "FEATURE_ABOUT_PAGE_ENABLED", False
-    # )
-    # return dict(
-    #     FEATURE_ABOUT_PAGE_ENABLED=feature_about_page_enabled,
-    # )
+
+    @application.context_processor
+    def inject_feature_flags():
+        # this is where feature flags can be easily added as a dictionary within context
+        feature_socket_enabled = application.config.get("FEATURE_SOCKET_ENABLED", False)
+        return dict(
+            FEATURE_SOCKET_ENABLED=feature_socket_enabled,
+        )
+
+    @application.context_processor
+    def inject_is_api_down():
+        return {"is_api_down": is_api_down()}
 
     @application.context_processor
     def inject_initial_signin_url():

app/assets/images/api-error.svg

@@ -1,34 +1,69 @@
+function announceUploadStatusFromElement() {
+  const srRegion = document.getElementById('upload-status-live');
+  const success = document.getElementById('upload-success');
+  const error = document.getElementById('upload-error');
+
+  if (!srRegion) return;
+
+  const message = error?.textContent || success?.textContent;
+
+  if (message) {
+    srRegion.textContent = '';
+    setTimeout(() => {
+      srRegion.textContent = message + '\u00A0'; // add a non-breaking space
+      srRegion.focus(); // Optional
+    }, 300);
+  }
+}
+
+
+// Exported for use in tests
+function initUploadStatusAnnouncer() {
+  document.addEventListener('DOMContentLoaded', () => {
+    announceUploadStatusFromElement();
+  });
+}
+
 (function(Modules) {
   "use strict";
 
   Modules.FileUpload = function() {
-
     this.submit = () => this.$form.trigger('submit');
 
-    this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(`
-      <a href="" class='usa-button usa-button--secondary'>Cancel upload</a>
-    `);
+    this.showCancelButton = () => {
+      $('.file-upload-button', this.$form).replaceWith(`
+        <button class='usa-button uploading-button' aria-disabled="true" tabindex="0">
+          Uploading<span class="dot-anim" aria-hidden="true"></span>
+        </button>
+      `);
+    };
 
     this.start = function(component) {
-
       this.$form = $(component);
 
-      // The label gets styled like a button and is used to hide the native file upload control. This is so that
-      // users see a button that looks like the others on the site.
+      this.$form.on('click', '[data-module="upload-trigger"]', function () {
+        const inputId = $(this).data('file-input-id');
+        const fileInput = document.getElementById(inputId);
+        if (fileInput) fileInput.click();
+      });
 
-      this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1').attr( {role: 'button', tabindex: '0'} );
-      
-      // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());
 
-      // Need to put the event on the container, not the input for it to work properly
-      this.$form.on(
-        'change', '.file-upload-field',
-        () => this.submit() && this.showCancelButton()
-      );
-
+      this.$form.on('change', '.file-upload-field', () => {
+        this.submit();
+        this.showCancelButton();
+      });
     };
+  };
+})(window.GOVUK.Modules);
 
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    announceUploadStatusFromElement,
+    initUploadStatusAnnouncer
   };
+}
 
-})(window.GOVUK.Modules);
+if (typeof window !== 'undefined') {
+  initUploadStatusAnnouncer();
+}

app/assets/javascripts/fileUpload.js

@@ -22,7 +22,6 @@
       this.$scrollableTable
         .on('scroll', this.toggleShadows)
         .on('scroll', this.maintainHeight)
-        .on('focus blur', () => this.$component.toggleClass('js-focus-style'));
 
       if (
         window.GOVUK.stickAtBottomWhenScrolling &&
@@ -37,11 +36,11 @@
 
     this.insertShims = () => {
 
-      const attributesForFocus = 'role aria-labelledby tabindex';
+      const attributesForFocus = 'role aria-labelledby';
       let captionId = this.$table.find('caption').text().toLowerCase().replace(/[^A-Za-z]+/g, '');
 
       this.$table.find('caption').attr('id', captionId);
-      this.$table.wrap(`<div class="fullscreen-scrollable-table" role="region" aria-labelledby="${captionId}" tabindex="0"/>`);
+      this.$table.wrap(`<div class="fullscreen-scrollable-table" role="region" aria-labelledby="${captionId}"/>`);
 
       this.$component
         .append(

app/assets/javascripts/fullscreenTable.js

@@ -0,0 +1,75 @@
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const isJobPage = window.location.pathname.includes('/jobs/');
+  if (!isJobPage) return;
+
+  const jobEl = document.querySelector('[data-job-id]');
+  const jobId = jobEl?.dataset?.jobId;
+  const featureEnabled = jobEl?.dataset?.feature === 'true';
+  const apiHost = jobEl?.dataset?.host;
+
+  if (!jobId) return;
+
+  if (featureEnabled) {
+    const socket = io(apiHost);
+
+    socket.on('connect', () => {
+      socket.emit('join', { room: `job-${jobId}` });
+    });
+
+    window.addEventListener('beforeunload', () => {
+      socket.emit('leave', { room: `job-${jobId}` });
+    });
+
+    const debouncedUpdate = debounce((data) => {
+      updateAllJobSections();
+    }, 1000);
+
+    socket.on('job_updated', (data) => {
+      if (data.job_id !== jobId) return;
+      debouncedUpdate(data);
+    });
+  }
+
+  function updateAllJobSections() {
+    const resourceEl = document.querySelector('[data-socket-update="status"]');
+    const url = resourceEl?.dataset?.resource;
+
+    if (!url) {
+      console.warn('No resource URL found for job updates');
+      return;
+    }
+
+    fetch(url)
+      .then((res) => res.json())
+      .then(({ status, counts, notifications }) => {
+        const sections = {
+          status: document.querySelector('[data-socket-update="status"]'),
+          counts: document.querySelector('[data-socket-update="counts"]'),
+          notifications: document.querySelector(
+            '[data-socket-update="notifications"]'
+          ),
+        };
+
+        if (status && sections.status) {
+          sections.status.innerHTML = status;
+        }
+        if (counts && sections.counts) {
+          sections.counts.innerHTML = counts;
+        }
+        if (notifications && sections.notifications) {
+          sections.notifications.innerHTML = notifications;
+        }
+      })
+      .catch((err) => {
+        console.error('Error fetching job update partials:', err);
+      });
+  }
+});