Merge branch 'feature/standard-module-ci'

* feature/standard-module-ci:
  Fix jest tests
  Add compiled assets for testing
  Add nvm for jest tests
  Fix tests
  Switch to standard Silverstripe module CI

Author: edwilde

.github/workflows/ci.yml

@@ -2,110 +2,12 @@ name: CI
 
 on:
   push:
-    branches: [ main, master ]
   pull_request:
-    branches: [ main, master ]
+  workflow_dispatch:
 
 jobs:
-  javascript-tests:
-    name: JavaScript Tests
-    runs-on: ubuntu-latest
-    
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x, 20.x]
-    
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      
-      - name: Install dependencies
-        run: npm ci
-      
-      - name: Run linter
-        run: npm run lint
-      
-      - name: Run tests with coverage
-        run: npm run test:js:coverage
-      
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v3
-        with:
-          files: ./coverage/lcov.info
-          flags: javascript
-  
-  php-tests:
-    name: PHP Tests
-    runs-on: ubuntu-latest
-    
-    strategy:
-      matrix:
-        php-version: ['7.4', '8.0', '8.1', '8.2']
-        silverstripe-version: ['^4.0', '^5.0']
-        exclude:
-          - php-version: '7.4'
-            silverstripe-version: '^5.0'
-    
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Setup PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: ${{ matrix.php-version }}
-          extensions: mbstring, intl, pdo, pdo_mysql
-          coverage: xdebug
-      
-      - name: Validate composer.json
-        run: composer validate --strict
-      
-      - name: Cache Composer packages
-        uses: actions/cache@v3
-        with:
-          path: vendor
-          key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-php-
-      
-      - name: Install dependencies
-        run: |
-          composer require silverstripe/framework:${{ matrix.silverstripe-version }} --no-update
-          composer install --prefer-dist --no-progress
-      
-      - name: Run test suite
-        run: vendor/bin/phpunit --coverage-clover coverage.xml
-      
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v3
-        with:
-          files: ./coverage.xml
-          flags: php
-  
-  build:
-    name: Build Assets
-    runs-on: ubuntu-latest
-    
-    steps:
-      - uses: actions/checkout@v3
-      
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18.x'
-          cache: 'npm'
-      
-      - name: Install dependencies
-        run: npm ci
-      
-      - name: Build production assets
-        run: npm run build
-      
-      - name: Verify build output
-        run: |
-          test -f client/dist/queuedjobs-admin.js || exit 1
-          test -f client/dist/queuedjobs-admin.css || exit 1
+  ci:
+    name: CI
+    # Do not run if this is a pull-request from same repo i.e. not a fork repo
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository
+    uses: silverstripe/gha-ci/.github/workflows/ci.yml@v2

.gitignore

@@ -1,5 +1,4 @@
 node_modules/
-client/dist/
 npm-debug.log
 yarn-error.log
 .DS_Store

.nvmrc

@@ -0,0 +1 @@
+20

client/dist/queuedjobs-admin.css

@@ -0,0 +1,156 @@
+/**
+ * Queued Jobs Live Refresh - Styles
+ *
+ * Provides styling for the play/pause toggle button and notification system.
+ */
+
+/* ==========================================================================
+   Play/Pause Toggle Button
+   ========================================================================== */
+
+/**
+ * Base button styling - subtle outline style that matches SilverStripe admin UI
+ * WCAG 2.2 AA compliant: min 44x44px touch target, sufficient contrast
+ */
+.queuedjobs-live-toggle {
+    padding: 8px 12px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+	margin-top: -4px;
+    margin-right: 8px;
+    vertical-align: middle;
+    min-width: 44px;
+    min-height: 44px;
+    position: relative;
+}
+
+/* Screen reader only text */
+.queuedjobs-live-toggle .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Spin the icon when refreshing */
+.queuedjobs-live-toggle.refreshing .toggle-icon {
+    animation: spin 1s linear infinite;
+	animation-delay: 200ms;
+}
+
+/* Icon styling with smooth transitions */
+.queuedjobs-live-toggle .toggle-icon {
+    display: inline-block;
+    font-size: 16px;
+    line-height: 1;
+    width: 16px;
+    text-align: center;
+    transition: 100ms opacity 150ms ease-in-out;
+    opacity: 1;
+}
+
+/* ==========================================================================
+   Animations
+   ========================================================================== */
+
+/* Spin animation for refresh indicator */
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ==========================================================================
+   Notification System
+   ========================================================================== */
+
+/**
+ * Error/info notification that slides in from the right
+ * WCAG 2.2 AA compliant: role="alert", sufficient contrast, dismissible
+ */
+.queuedjobs-live-notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: #d32f2f;
+    color: white;
+    padding: 12px 40px 12px 16px;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    z-index: 10001;
+    max-width: 400px;
+    animation: slideIn 0.3s ease;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+/* Slide-in animation */
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* Close button within notification - WCAG 2.2 AA: 24x24px minimum */
+.queuedjobs-live-notification .close-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+    color: white;
+    font-size: 20px;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.queuedjobs-live-notification .close-btn:hover,
+.queuedjobs-live-notification .close-btn:focus {
+    background: rgba(255, 255, 255, 0.3);
+    outline: 2px solid white;
+    outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Layout
+   ========================================================================== */
+
+/* Button is inserted directly into DOM, no container needed */
+
+/* ==========================================================================
+   Responsive Design
+   ========================================================================== */
+
+@media (max-width: 768px) {
+    /* Smaller button on mobile */
+    .queuedjobs-live-toggle {
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+
+    /* Full-width notifications on mobile */
+    .queuedjobs-live-notification {
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        max-width: none;
+    }
+}

client/dist/queuedjobs-admin.js

@@ -8,6 +8,7 @@
  * @author Ed Wilde
  * @version 1.0.0
  */
+/* global jQuery */
 (function() {
     'use strict';
 
@@ -50,12 +51,12 @@
             // SilverStripe CMS uses jQuery PJAX, so we need multiple event listeners
             document.addEventListener('pjax:end', () => this.setup());
             window.addEventListener('cms-content-loaded', () => this.setup());
-            
+
             // Also listen on jQuery if available (SilverStripe uses jQuery PJAX)
             if (typeof jQuery !== 'undefined') {
                 jQuery(document).on('pjax:end', () => this.setup());
             }
-            
+
             // Periodically check if button needs to be created (fallback)
             // This handles cases where events don't fire reliably
             setInterval(() => {
@@ -116,20 +117,20 @@
          * Insert the button immediately before the filter button.
          * Handles different DOM structures that may occur during GridField updates.
          * Hides button if filter area is open (no filter button visible).
-         * 
+         *
          * @param {HTMLElement} button - The button element to insert
          */
         insertButtonBeforeFilter(button) {
             const filterButton = document.querySelector('button[name="showFilter"], .grid-field__filter-open');
             const gridField = document.querySelector('.ss-gridfield, .grid-field');
-            
+
             if (!filterButton) {
                 // Check if filter is open (has show-filter class)
                 if (gridField && gridField.classList.contains('show-filter')) {
                     // Filter is open, hide our button
                     button.style.display = 'none';
                     // Still need to insert it somewhere to keep reference
-                    const toolbar = document.querySelector('.cms-content-toolbar') || 
+                    const toolbar = document.querySelector('.cms-content-toolbar') ||
                                   document.querySelector('.cms-content-header');
                     if (toolbar) {
                         toolbar.appendChild(button);
@@ -192,11 +193,11 @@
             const form = document.querySelector('.queuedjobs-live-enabled');
             if (!form) return;
 
-            const observer = new MutationObserver((mutations) => {
+            const observer = new MutationObserver(() => {
                 const button = document.querySelector('.queuedjobs-live-toggle');
                 const filterButton = document.querySelector('button[name="showFilter"], .grid-field__filter-open');
                 const gridField = document.querySelector('.ss-gridfield, .grid-field');
-                
+
                 if (!button) {
                     // Button was removed, re-create it
                     this.createToggleButton();
@@ -207,7 +208,7 @@
                 } else {
                     // Check if filter is open/closed
                     const filterIsOpen = gridField && gridField.classList.contains('show-filter');
-                    
+
                     if (filterIsOpen && !filterButton) {
                         // Filter is open, hide button
                         button.style.display = 'none';
@@ -313,7 +314,7 @@
 
             // Fade out (100ms transition)
             icon.style.opacity = '0';
-            
+
             // Wait for fade out (100ms) + pause (200ms) before changing content
             setTimeout(() => {
                 if (this.isPolling) {
@@ -329,16 +330,16 @@
                     this.toggleButton.setAttribute('aria-label', 'Toggle auto-refresh. Currently stopped.');
                     this.toggleButton.setAttribute('aria-pressed', 'false');
                 }
-                
+
                 // Update transition for fade in
                 icon.style.transition = 'opacity 0.15s ease';
-                
+
                 // Trigger reflow to ensure transition applies
                 void icon.offsetHeight;
-                
+
                 // Fade in (150ms transition)
                 icon.style.opacity = '1';
-                
+
                 // Reset transition back to default after fade in completes
                 setTimeout(() => {
                     icon.style.transition = '';
@@ -494,7 +495,7 @@
             notification.className = 'queuedjobs-live-notification';
             notification.setAttribute('role', 'alert');
             notification.setAttribute('aria-live', 'assertive');
-            
+
             const messageSpan = document.createElement('span');
             messageSpan.textContent = message;
             notification.appendChild(messageSpan);