Feature: Upload notification modal

[McNamara84]

This pull request enhances the XML upload experience by improving user feedback, accessibility, and error handling in the upload modal and related scripts. It introduces toast notifications for upload results, adds a loading spinner, internationalizes all user-facing messages, and refactors the upload logic for better maintainability and testability.

Changes

User Experience and UI Improvements

• Added a Bootstrap toast notification for upload success and error messages, shown in the top-right corner, with fallback to in-modal alerts if toast is unavailable (modals.html, js/upload.js) [1] [2].
• Introduced a loading spinner overlay in the upload modal to indicate processing state (modals.html, js/upload.js) [1] [2].
• The upload modal now resets its state (input, spinner, alerts, border highlights) when closed (js/upload.js).

Internationalization and Accessibility

• All upload-related messages (success, errors, loading, invalid file type) are now internationalized using new i18n keys, with fallbacks for robustness (js/upload.js, lang/en.json, lang/de.json, lang/fr.json) [1] [2] [3] [4].
• Added visually hidden loading text for screen readers in the spinner (modals.html).

Robustness and Refactoring

• Added isXmlFile utility function for consistent file type checking and improved error feedback on invalid uploads (js/upload.js) [1] [2] [3].
• Refactored upload logic into testable, modular functions and improved test coverage for new behaviors (js/upload.js, tests/js/upload.test.js) [1] [2] [3].

Testing and Maintenance

• Updated and extended tests to cover new toast notifications, spinner, and upload modal reset behaviors (tests/js/upload.test.js) [1] [2].
• Fixed minor test setup issues in unrelated test files for consistency (tests/js/authorInstitution.test.js, tests/js/saveHandler.test.js) [1] [2].

Notes for Reviewer

None.

Checklist

• My code follows the style guide.
• I have self-reviewed my code.
• I added comments for hard-to-understand code.
• If applicable, PHP code is documented using PHPDoc.
• If applicable, JavaScript code is documented using JSDoc.
• If needed, the ELMO Guide has been updated.
• If needed, the README has been updated.
• If needed, the API documentation has been updated.
• If a new feature was added or a bug fixed, the changelog has been updated.
• My changes do not create new warnings in the test browser console.
• I have added unit tests that cover my code.
• All new and existing unit tests pass locally.
• All new and existing automated unit tests pass in the pull request.
• If applicable, Playwright tests have been updated and new tests added.
• All new and existing automated Playwright tests pass in the pull request.
• I ensured the changes meet accessibility guidelines.

Known Issues

None.

[Copilot]

Pull request overview

This PR improves the XML upload UX by adding a loading/disabled state during processing and switching success feedback from an in-modal alert to a Bootstrap toast, along with updated translations and tests.

Changes:

• Add upload “loading” state (spinner + disable file input/drop zone) and reset modal state on close.
• Add Bootstrap toast notifications for upload success/error feedback.
• Update i18n strings and expand unit/Playwright test coverage for the new UI behavior.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
js/upload.js	Adds loading-state toggling, toast feedback helper, and modal reset-on-close behavior.
modals.html	Adds spinner markup in upload modal and a global toast container for upload feedback.
lang/en.json	Adds new upload loading/toast strings.
lang/de.json	Adds new upload loading/toast strings.
lang/fr.json	Adds new upload loading/toast strings.
tests/js/upload.module.test.js	Adds module-level tests for loading state, toast behavior, and modal reset behavior.
tests/js/upload.test.js	Updates jsdom DOM fixtures and adds tests around loading/toast logic (currently via local re-implementations).
tests/playwright/flows/xml-upload-flow.spec.ts	Updates e2e assertions from in-modal status to toast-based success feedback.

Comments suppressed due to low confidence (1)

tests/js/upload.test.js:83

• This test file re-implements production functions inline (e.g., showUploadStatus, handleXmlFile, setUploadLoadingState, showUploadToast) instead of importing js/upload.js. That means it won’t catch regressions in the real implementation and can drift as the code evolves (especially now that upload.js exports these helpers). Consider switching these tests to require('../../js/upload.js') and asserting against the exported functions, or removing this file in favor of upload.module.test.js if that’s the intended canonical coverage test.

    describe('showUploadStatus', () => {
        test('displays success message with correct class', () => {
            function showUploadStatus(message, type) {
                const statusElement = $('#xml-upload-status');
                statusElement.removeClass()
                    .addClass(`alert alert-${type}`)
                    .removeClass('d-none')
                    .text(message);
            }

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 9 out of 11 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 13 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 13 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

tests/js/upload.module.test.js:136

• Several tests in this file call showUploadStatus() without enabling fake timers or cancelling the auto-hide timeout. Since showUploadStatus schedules a 10s setTimeout, these tests will leave real timers pending (making the Jest run slower and potentially causing open-handle/leak warnings). Consider using jest.useFakeTimers() for this describe block or calling uploadModule.clearStatusHideTimer() (or jest.runOnlyPendingTimers()) in test/afterEach cleanup.

    describe('showUploadStatus', () => {
        test('shows success message', () => {
            uploadModule.showUploadStatus('Success message', 'success');

            const statusElement = $('#xml-upload-status');
            expect(statusElement.text()).toBe('Success message');
            expect(statusElement.hasClass('alert-success')).toBe(true);
            expect(statusElement.hasClass('d-none')).toBe(false);
        });

[Copilot]

Pull request overview

Copilot reviewed 11 out of 13 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 11 out of 13 changed files in this pull request and generated 2 comments.