Bug 40383 - Modernise the EDIFACT Message display modal
Summary: Modernise the EDIFACT Message display modal
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Acquisitions (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Martin Renvoize (ashimema)
QA Contact: Kyle M Hall (khall)
URL:
Keywords:
Depends on: 20253 38689 40334 40174
Blocks: 32938 41297
  Show dependency treegraph
 
Reported: 2025-07-15 12:27 UTC by Martin Renvoize (ashimema)
Modified: 2026-03-09 07:51 UTC (History)
3 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: Sponsored
Comma delimited list of Sponsors: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Crowdfunding goal: 0
Crowdfunding committed: 0
Crowdfunding contact:
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
The EDIFACT message viewer has been significantly improved with a new interactive modal interface replacing the previous basic display. New features: - Tree view — Collapsible, hierarchical display of EDIFACT interchange structure with segment tagging - Raw view — Plain-text fallback for direct inspection of message content - Search — Real-time search with regex support, result count, and previous/next navigation - Focus mode — Highlights segments relevant to the current context (basket or invoice) when opened from those pages - JSON download — New ?format=json endpoint on edimsg.pl and download button for programmatic access and debugging; backed by a new to_json() method on Koha::Edifact
Version(s) released in:
Circulation function:


Attachments
Preview (95.34 KB, image/png)
2025-07-17 08:14 UTC, Martin Renvoize (ashimema)
Details
Bug 40383: Add unit tests for Koha::Edifact to_json method (3.87 KB, patch)
2025-07-22 16:17 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl (9.33 KB, patch)
2025-07-22 16:17 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality (85.72 KB, patch)
2025-07-22 16:18 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add Cypress test coverage for EDIFACT modal (98.61 KB, patch)
2025-07-22 16:18 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add unit tests for Koha::Edifact to_json method (3.95 KB, patch)
2025-10-08 11:42 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl (9.40 KB, patch)
2025-10-08 11:42 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality (85.79 KB, patch)
2025-10-08 11:42 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add Cypress test coverage for EDIFACT modal (98.77 KB, patch)
2025-10-08 11:42 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add unit tests for Koha::Edifact to_json method (4.02 KB, patch)
2025-10-29 17:18 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl (9.40 KB, patch)
2025-10-29 17:18 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality (85.79 KB, patch)
2025-10-29 17:18 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add Cypress test coverage for EDIFACT modal (98.77 KB, patch)
2025-10-29 17:18 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add unit tests for Koha::Edifact to_json method (4.02 KB, patch)
2025-11-13 16:35 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl (9.40 KB, patch)
2025-11-13 16:35 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality (85.79 KB, patch)
2025-11-13 16:35 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add Cypress test coverage for EDIFACT modal (98.77 KB, patch)
2025-11-13 16:35 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add unit tests for Koha::Edifact to_json method (4.28 KB, patch)
2026-02-05 11:13 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl (9.40 KB, patch)
2026-02-05 11:13 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality (85.79 KB, patch)
2026-02-05 11:13 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add Cypress test coverage for EDIFACT modal (98.77 KB, patch)
2026-02-05 11:13 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl (9.47 KB, patch)
2026-02-13 12:34 UTC, Kyle M Hall (khall)
Details | Diff | Splinter Review
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality (85.67 KB, patch)
2026-02-13 12:35 UTC, Kyle M Hall (khall)
Details | Diff | Splinter Review
Bug 40383: Add Cypress test coverage for EDIFACT modal (98.84 KB, patch)
2026-02-13 12:35 UTC, Kyle M Hall (khall)
Details | Diff | Splinter Review
Bug 40383: Tidy t/Edifact.t for QA script (749 bytes, patch)
2026-02-13 12:35 UTC, Kyle M Hall (khall)
Details | Diff | Splinter Review
Bug 40383: Add unit tests for Koha::Edifact to_json method (4.06 KB, patch)
2026-03-02 11:30 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl (9.45 KB, patch)
2026-03-02 11:30 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality (85.87 KB, patch)
2026-03-02 11:30 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: Add Cypress test coverage for EDIFACT modal (98.82 KB, patch)
2026-03-02 11:30 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: (QA follow-up) Update Cypress tests to follow current best practices (31.74 KB, patch)
2026-03-02 11:30 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review
Bug 40383: (follow-up) Address code review concerns (8.74 KB, patch)
2026-03-09 07:48 UTC, Martin Renvoize (ashimema)
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize (ashimema) 2025-07-15 12:27:22 UTC
In bugs 40333 and 40334 we split out the modal display of raw edifact messages and allowed them to be display directly on the related basket and invoice pages.

This patch aims to modernise their display to allow for both the 'raw' mode as well as a mode modern and easily navigable 'tree' view mode.
Comment 1 Martin Renvoize (ashimema) 2025-07-17 08:14:18 UTC Comment hidden (obsolete)
Comment 2 Martin Renvoize (ashimema) 2025-07-22 16:17:57 UTC Comment hidden (obsolete)
Comment 3 Martin Renvoize (ashimema) 2025-07-22 16:17:59 UTC Comment hidden (obsolete)
Comment 4 Martin Renvoize (ashimema) 2025-07-22 16:18:02 UTC Comment hidden (obsolete)
Comment 5 Martin Renvoize (ashimema) 2025-07-22 16:18:04 UTC Comment hidden (obsolete)
Comment 6 Martin Renvoize (ashimema) 2025-10-08 11:42:52 UTC Comment hidden (obsolete)
Comment 7 Martin Renvoize (ashimema) 2025-10-08 11:42:54 UTC Comment hidden (obsolete)
Comment 8 Martin Renvoize (ashimema) 2025-10-08 11:42:56 UTC Comment hidden (obsolete)
Comment 9 Martin Renvoize (ashimema) 2025-10-08 11:42:58 UTC Comment hidden (obsolete)
Comment 10 Martin Renvoize (ashimema) 2025-10-08 11:45:08 UTC
Hannah and I have been using this for debugging messages on their live system. It's gone a long way to making EDI message more understandable and accessible
Comment 11 Martin Renvoize (ashimema) 2025-10-29 17:18:05 UTC Comment hidden (obsolete)
Comment 12 Martin Renvoize (ashimema) 2025-10-29 17:18:07 UTC Comment hidden (obsolete)
Comment 13 Martin Renvoize (ashimema) 2025-10-29 17:18:09 UTC Comment hidden (obsolete)
Comment 14 Martin Renvoize (ashimema) 2025-10-29 17:18:11 UTC Comment hidden (obsolete)
Comment 15 Martin Renvoize (ashimema) 2025-10-29 17:19:07 UTC
Test plan fun.. thanks for looking Kyle. Should all apply again now.
Comment 16 Martin Renvoize (ashimema) 2025-11-13 16:35:03 UTC
Created attachment 189575 [details] [review]
Bug 40383: Add unit tests for Koha::Edifact to_json method

This patch adds unit tests for the new to_json method being introduced
in Koha::Edifact module in the next patch.

The tests verify:
- JSON output generation and validity
- Proper structure with header, messages, and trailer fields
- Message array structure with correct number of messages
- Individual message structure (header, segments, trailer)
- Segment data integrity including raw data and elements arrays
- Line ID functionality for related segments (LIN, QTY, PRI, PIA)

Test plan:
1. Apply this patch and the next one
2. Run: prove t/Edifact.t
3. Verify all 63 tests pass
4. Confirm the new JSON-related tests (22 tests) execute successfully

Sponsored-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Comment 17 Martin Renvoize (ashimema) 2025-11-13 16:35:05 UTC
Created attachment 189576 [details] [review]
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl

This patch implements a JSON representation of EDIFACT interchanges for enhanced
programmatic access and debugging capabilities.

Backend Changes:
- Add to_json() method to Koha::Edifact module
- Structured JSON output with header, messages array, and trailer
- Segment parsing with raw data, elements arrays, and line_id tracking
- Line item grouping using LIN segment identifiers

Frontend Changes:
- Add JSON download button to edimsg.pl page
- Support for ?format=json parameter and Accept: application/json header
- Proper HTTP content-type handling for JSON responses
- Error handling for missing messages in JSON format

JSON Structure:
{
  "header": "UNB+UNOC:3+...",
  "messages": [
    {
      "header": "UNH+1+QUOTES:D:93A:UN:EAN008'",
      "segments": [
        {
          "tag": "LIN",
          "raw": "LIN+1+1+9780552150040:EN'",
          "elements": ["1", "1", "9780552150040:EN"],
          "line_id": "1"
        }
      ],
      "trailer": "UNT+25+1'"
    }
  ],
  "trailer": "UNZ+1+1'"
}

Test plan:
1. Apply this patch
2. Ensure you have EDIFACT messages in your system
3. Go to Acquisitions > EDIFACT messages
4. Click "View message" for any message
5. Click the new "JSON" button
6. Verify JSON downloads with proper structure
7. Verify direct URL access with ?format=json parameter works
8. Test with Accept: application/json header

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Comment 18 Martin Renvoize (ashimema) 2025-11-13 16:35:07 UTC
Created attachment 189577 [details] [review]
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality

This patch completely rebuilds the EDIFACT message modal interface, featuring:

**Core Features:**
- Modern Bootstrap 5 navbar with integrated search functionality
- Tree view and raw view display modes for message structure
- Real-time search with regex support and result navigation
- Smart focus functionality that highlights relevant segments based on
  context (basket, invoice)

**User Interface:**
- Bootstrap navbar between modal header and body
- Search form with previous/next navigation and live result counts
- Clean separation between always-visible controls and view-specific toolbars
- Accessibility conscious with proper ARIA labels and semantic markup
- Streamlined DOM structure with direct modal-body scrolling

**Test Plan:**
1. Apply patch and run: yarn css:build to compile SCSS
2. Navigate to Acquisitions > EDIFACT messages
3. Click "View message" on any EDIFACT message
4. **Modal Display Testing:**
   - Verify modal opens with Bootstrap navbar between header and body
   - Confirm tree view is active by default with segment structure visible
   - Click raw view button to verify plain text display
   - Test modal responsiveness by resizing window
5. **Search Functionality Testing:**
   - Enter "UNH" in search field, verify navbar shows result count
   - Use previous/next buttons to navigate between results
   - Test search with terms like "ORDER", "NAD", "LIN" - all results should be found
   - Verify native browser clear button appears and works
   - Test case-insensitive search behavior
6. **Focus Functionality Testing:**
   - From basket page, click enhanced view link - should highlight relevant segments
   - From invoice page, click enhanced view - should focus on invoice-related segments
   - Verify focus highlighting persists during search operations
7. **Error Handling Testing:**
   - Test with invalid message ID, verify error display
   - Test network errors, confirm loading states work properly
8. **Accessibility Testing:**
   - Verify keyboard navigation works with search controls
   - Test screen reader compatibility with ARIA labels
   - Confirm modal can be closed with Escape key

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Comment 19 Martin Renvoize (ashimema) 2025-11-13 16:35:09 UTC
Created attachment 189578 [details] [review]
Bug 40383: Add Cypress test coverage for EDIFACT modal

This patch adds end-to-end testing for the EDIFACT modal interface,
providing coverage of all user interactions and functionality.

**Test Coverage:**
- Modal display and initialization with proper Bootstrap navbar structure
- View toggle functionality between tree and raw display modes
- Search functionality including navigation, result counting, and highlighting
- Focus functionality for basket and invoice contexts
- Error handling for invalid message IDs and network failures
- Accessibility features including keyboard navigation
- Responsive behavior and modal interaction patterns

**Test Plan:**
1. Apply patch
2. Ensure KTD environment is running with test data
3. Run tests: `npx cypress run --spec "t/cypress/integration/Acquisitions/Edifact*"`
4. **Verify Test Results:**
5. **Manual Verification:**
   - All test scenarios reflect real user workflows
   - Test data requirements are clearly documented in spec file
   - Test data is cleaned up after the tests are run

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Comment 20 Martin Renvoize (ashimema) 2026-02-05 11:13:03 UTC Comment hidden (obsolete)
Comment 21 Martin Renvoize (ashimema) 2026-02-05 11:13:04 UTC Comment hidden (obsolete)
Comment 22 Martin Renvoize (ashimema) 2026-02-05 11:13:05 UTC Comment hidden (obsolete)
Comment 23 Martin Renvoize (ashimema) 2026-02-05 11:13:06 UTC Comment hidden (obsolete)
Comment 24 Martin Renvoize (ashimema) 2026-02-05 11:13:30 UTC
Just another rebase
Comment 25 Kyle M Hall (khall) 2026-02-13 12:34:59 UTC
Created attachment 193057 [details] [review]
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl

This patch implements a JSON representation of EDIFACT interchanges for enhanced
programmatic access and debugging capabilities.

Backend Changes:
- Add to_json() method to Koha::Edifact module
- Structured JSON output with header, messages array, and trailer
- Segment parsing with raw data, elements arrays, and line_id tracking
- Line item grouping using LIN segment identifiers

Frontend Changes:
- Add JSON download button to edimsg.pl page
- Support for ?format=json parameter and Accept: application/json header
- Proper HTTP content-type handling for JSON responses
- Error handling for missing messages in JSON format

JSON Structure:
{
  "header": "UNB+UNOC:3+...",
  "messages": [
    {
      "header": "UNH+1+QUOTES:D:93A:UN:EAN008'",
      "segments": [
        {
          "tag": "LIN",
          "raw": "LIN+1+1+9780552150040:EN'",
          "elements": ["1", "1", "9780552150040:EN"],
          "line_id": "1"
        }
      ],
      "trailer": "UNT+25+1'"
    }
  ],
  "trailer": "UNZ+1+1'"
}

Test plan:
1. Apply this patch
2. Ensure you have EDIFACT messages in your system
3. Go to Acquisitions > EDIFACT messages
4. Click "View message" for any message
5. Click the new "JSON" button
6. Verify JSON downloads with proper structure
7. Verify direct URL access with ?format=json parameter works
8. Test with Accept: application/json header

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 26 Kyle M Hall (khall) 2026-02-13 12:35:00 UTC
Created attachment 193058 [details] [review]
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality

This patch completely rebuilds the EDIFACT message modal interface, featuring:

**Core Features:**
- Modern Bootstrap 5 navbar with integrated search functionality
- Tree view and raw view display modes for message structure
- Real-time search with regex support and result navigation
- Smart focus functionality that highlights relevant segments based on
  context (basket, invoice)

**User Interface:**
- Bootstrap navbar between modal header and body
- Search form with previous/next navigation and live result counts
- Clean separation between always-visible controls and view-specific toolbars
- Accessibility conscious with proper ARIA labels and semantic markup
- Streamlined DOM structure with direct modal-body scrolling

**Test Plan:**
1. Apply patch and run: yarn css:build to compile SCSS
2. Navigate to Acquisitions > EDIFACT messages
3. Click "View message" on any EDIFACT message
4. **Modal Display Testing:**
   - Verify modal opens with Bootstrap navbar between header and body
   - Confirm tree view is active by default with segment structure visible
   - Click raw view button to verify plain text display
   - Test modal responsiveness by resizing window
5. **Search Functionality Testing:**
   - Enter "UNH" in search field, verify navbar shows result count
   - Use previous/next buttons to navigate between results
   - Test search with terms like "ORDER", "NAD", "LIN" - all results should be found
   - Verify native browser clear button appears and works
   - Test case-insensitive search behavior
6. **Focus Functionality Testing:**
   - From basket page, click enhanced view link - should highlight relevant segments
   - From invoice page, click enhanced view - should focus on invoice-related segments
   - Verify focus highlighting persists during search operations
7. **Error Handling Testing:**
   - Test with invalid message ID, verify error display
   - Test network errors, confirm loading states work properly
8. **Accessibility Testing:**
   - Verify keyboard navigation works with search controls
   - Test screen reader compatibility with ARIA labels
   - Confirm modal can be closed with Escape key

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 27 Kyle M Hall (khall) 2026-02-13 12:35:02 UTC
Created attachment 193059 [details] [review]
Bug 40383: Add Cypress test coverage for EDIFACT modal

This patch adds end-to-end testing for the EDIFACT modal interface,
providing coverage of all user interactions and functionality.

**Test Coverage:**
- Modal display and initialization with proper Bootstrap navbar structure
- View toggle functionality between tree and raw display modes
- Search functionality including navigation, result counting, and highlighting
- Focus functionality for basket and invoice contexts
- Error handling for invalid message IDs and network failures
- Accessibility features including keyboard navigation
- Responsive behavior and modal interaction patterns

**Test Plan:**
1. Apply patch
2. Ensure KTD environment is running with test data
3. Run tests: `npx cypress run --spec "t/cypress/integration/Acquisitions/Edifact*"`
4. **Verify Test Results:**
5. **Manual Verification:**
   - All test scenarios reflect real user workflows
   - Test data requirements are clearly documented in spec file
   - Test data is cleaned up after the tests are run

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 28 Kyle M Hall (khall) 2026-02-13 12:35:04 UTC
Created attachment 193060 [details] [review]
Bug 40383: Tidy t/Edifact.t for QA script

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 29 Lucas Gass (lukeg) 2026-02-27 17:44:58 UTC
The cypress tests don't pass for me. 

Also, I see quite a bit of cy.wait(1000).
Comment 30 Martin Renvoize (ashimema) 2026-03-02 09:51:26 UTC
Ah yes.. these were probably some of the first Cypress tests I wrote.. I'll have a little dig
Comment 31 Martin Renvoize (ashimema) 2026-03-02 11:30:10 UTC
Created attachment 194327 [details] [review]
Bug 40383: Add unit tests for Koha::Edifact to_json method

This patch adds unit tests for the new to_json method being introduced
in Koha::Edifact module in the next patch.

The tests verify:
- JSON output generation and validity
- Proper structure with header, messages, and trailer fields
- Message array structure with correct number of messages
- Individual message structure (header, segments, trailer)
- Segment data integrity including raw data and elements arrays
- Line ID functionality for related segments (LIN, QTY, PRI, PIA)

Test plan:
1. Apply this patch and the next one
2. Run: prove t/Edifact.t
3. Verify all 63 tests pass
4. Confirm the new JSON-related tests (22 tests) execute successfully

Sponsored-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 32 Martin Renvoize (ashimema) 2026-03-02 11:30:12 UTC
Created attachment 194328 [details] [review]
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl

This patch implements a JSON representation of EDIFACT interchanges for enhanced
programmatic access and debugging capabilities.

Backend Changes:
- Add to_json() method to Koha::Edifact module
- Structured JSON output with header, messages array, and trailer
- Segment parsing with raw data, elements arrays, and line_id tracking
- Line item grouping using LIN segment identifiers

Frontend Changes:
- Add JSON download button to edimsg.pl page
- Support for ?format=json parameter and Accept: application/json header
- Proper HTTP content-type handling for JSON responses
- Error handling for missing messages in JSON format

JSON Structure:
{
  "header": "UNB+UNOC:3+...",
  "messages": [
    {
      "header": "UNH+1+QUOTES:D:93A:UN:EAN008'",
      "segments": [
        {
          "tag": "LIN",
          "raw": "LIN+1+1+9780552150040:EN'",
          "elements": ["1", "1", "9780552150040:EN"],
          "line_id": "1"
        }
      ],
      "trailer": "UNT+25+1'"
    }
  ],
  "trailer": "UNZ+1+1'"
}

Test plan:
1. Apply this patch
2. Ensure you have EDIFACT messages in your system
3. Go to Acquisitions > EDIFACT messages
4. Click "View message" for any message
5. Click the new "JSON" button
6. Verify JSON downloads with proper structure
7. Verify direct URL access with ?format=json parameter works
8. Test with Accept: application/json header

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 33 Martin Renvoize (ashimema) 2026-03-02 11:30:13 UTC
Created attachment 194329 [details] [review]
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality

This patch completely rebuilds the EDIFACT message modal interface, featuring:

**Core Features:**
- Modern Bootstrap 5 navbar with integrated search functionality
- Tree view and raw view display modes for message structure
- Real-time search with regex support and result navigation
- Smart focus functionality that highlights relevant segments based on
  context (basket, invoice)

**User Interface:**
- Bootstrap navbar between modal header and body
- Search form with previous/next navigation and live result counts
- Clean separation between always-visible controls and view-specific toolbars
- Accessibility conscious with proper ARIA labels and semantic markup
- Streamlined DOM structure with direct modal-body scrolling

**Test Plan:**
1. Apply patch and run: yarn css:build to compile SCSS
2. Navigate to Acquisitions > EDIFACT messages
3. Click "View message" on any EDIFACT message
4. **Modal Display Testing:**
   - Verify modal opens with Bootstrap navbar between header and body
   - Confirm tree view is active by default with segment structure visible
   - Click raw view button to verify plain text display
   - Test modal responsiveness by resizing window
5. **Search Functionality Testing:**
   - Enter "UNH" in search field, verify navbar shows result count
   - Use previous/next buttons to navigate between results
   - Test search with terms like "ORDER", "NAD", "LIN" - all results should be found
   - Verify native browser clear button appears and works
   - Test case-insensitive search behavior
6. **Focus Functionality Testing:**
   - From basket page, click enhanced view link - should highlight relevant segments
   - From invoice page, click enhanced view - should focus on invoice-related segments
   - Verify focus highlighting persists during search operations
7. **Error Handling Testing:**
   - Test with invalid message ID, verify error display
   - Test network errors, confirm loading states work properly
8. **Accessibility Testing:**
   - Verify keyboard navigation works with search controls
   - Test screen reader compatibility with ARIA labels
   - Confirm modal can be closed with Escape key

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 34 Martin Renvoize (ashimema) 2026-03-02 11:30:14 UTC
Created attachment 194330 [details] [review]
Bug 40383: Add Cypress test coverage for EDIFACT modal

This patch adds end-to-end testing for the EDIFACT modal interface,
providing coverage of all user interactions and functionality.

**Test Coverage:**
- Modal display and initialization with proper Bootstrap navbar structure
- View toggle functionality between tree and raw display modes
- Search functionality including navigation, result counting, and highlighting
- Focus functionality for basket and invoice contexts
- Error handling for invalid message IDs and network failures
- Accessibility features including keyboard navigation
- Responsive behavior and modal interaction patterns

**Test Plan:**
1. Apply patch
2. Ensure KTD environment is running with test data
3. Run tests: `npx cypress run --spec "t/cypress/integration/Acquisitions/Edifact*"`
4. **Verify Test Results:**
5. **Manual Verification:**
   - All test scenarios reflect real user workflows
   - Test data requirements are clearly documented in spec file
   - Test data is cleaned up after the tests are run

Signed-off-by: Hannah Dunne-Howrie <hdunne-howrie@westminster.gov.uk>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 35 Martin Renvoize (ashimema) 2026-03-02 11:30:16 UTC
Created attachment 194331 [details] [review]
Bug 40383: (QA follow-up) Update Cypress tests to follow current best practices

Remove before()/after() DB hooks — all assertions already use cy.intercept
mocks so no real database messages are needed. Extract repeated button
injection into an openEDIModal() helper. Replace all cy.wait(N) fixed-time
waits with assertion-based waits and cy.wait('@alias') for network sync.
Fix a Bootstrap 5 race condition in the modal-close cleanup test where
hidden.bs.modal fired after the backdrop animation, causing the re-opened
modal's focus class to be removed mid-test.
Comment 36 Jonathan Druart 2026-03-05 11:34:20 UTC
(In reply to Martin Renvoize (ashimema) from comment #33)
> Created attachment 194329 [details] [review] [review]
> Bug 40383: Enhanced EDIFACT message modal with search and focus functionality

This patch adds TT tags within script tags.

+        var interface = "[% interface | html %]";
+        var theme = "[% theme | html %]";

It seems that those 2 variables are not used anyway.
Comment 37 Jonathan Druart 2026-03-05 11:36:02 UTC
There are actually used in other .js files.

I would suggest to move them into a separate script tag:

<script>
    const interface = "[% interface | html %]";
    const theme = "[% theme | html %]";
</script>
Comment 38 Jonathan Druart 2026-03-05 11:37:32 UTC
+    const escapeHtml = str => {

We already have String.prototype.escapeHtml in staff-global.js
Comment 39 Martin Renvoize (ashimema) 2026-03-09 07:48:43 UTC
Created attachment 194963 [details] [review]
Bug 40383: (follow-up) Address code review concerns

- Move TT interface/theme variables into a separate <script> tag to avoid
  mixing template variables with external JavaScript file scope
- Replace local escapeHtml() functions in edifact_interchange.js and
  edifact_errors.js with String.prototype.escapeHtml already defined
  in staff-global.js
Comment 40 Martin Renvoize (ashimema) 2026-03-09 07:49:10 UTC
Good catches, thanks for the review Jonathan.