Bug 40383

Summary: Modernise the EDIFACT Message display modal
Product: Koha Reporter: Martin Renvoize (ashimema) <martin.renvoize>
Component: AcquisitionsAssignee: Martin Renvoize (ashimema) <martin.renvoize>
Status: Needs Signoff --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: kyle
Version: 24.11   
Hardware: All   
OS: All   
GIT URL: Change sponsored?: ---
Patch complexity: --- Documentation contact:
Documentation submission: Text to go in the release notes:
Version(s) released in:
Circulation function:
Bug Depends on: 20253, 40174, 40334    
Bug Blocks: 32938    
Attachments: Preview
Bug 40383: Add unit tests for Koha::Edifact to_json method
Bug 40383: Add JSON representation to Koha::Edifact and JSON download to edimsg.pl
Bug 40383: Enhanced EDIFACT message modal with search and focus functionality
Bug 40383: Add Cypress test coverage for EDIFACT modal

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
Created attachment 184185 [details]
Preview
Comment 2 Martin Renvoize (ashimema) 2025-07-22 16:17:57 UTC
Created attachment 184487 [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>
Comment 3 Martin Renvoize (ashimema) 2025-07-22 16:17:59 UTC
Created attachment 184488 [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
Comment 4 Martin Renvoize (ashimema) 2025-07-22 16:18:02 UTC
Created attachment 184489 [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
Comment 5 Martin Renvoize (ashimema) 2025-07-22 16:18:04 UTC
Created attachment 184490 [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