Make "Jump to Unread" links work with paginated history

When a URL contains an anchor referencing a transaction like #txn-123, RT
will now automatically locate the history page containing transaction #123
and navigate to the appropriate page.

Author: sunnavy

share/html/Elements/RT__Ticket/ColumnMap

@@ -419,7 +419,8 @@ $COLUMN_MAP = {
 
             my $link = RT->Config->Get('WebPath');
             $link .= $session{'CurrentUser'}->Privileged ? '/Ticket/Display.html?id=' : '/SelfService/Display.html?id=';
-            $link .= $self->id . '&MarkAsSeen=1&ShowHistory=1&Anchor=txn-' . $first_unread->id;
+            $link .= $self->id . '&MarkAsSeen=1&Anchor=txn-' . $first_unread->id;
+            $link .= '&ForceShowHistory=1' if RT->Config->Get( 'ShowHistory', $session{'CurrentUser'} ) eq 'click';
 
             my $title = loc("Jump to Unread & Mark as Seen");
             return \( '<a data-bs-toggle="tooltip" data-bs-title="' . $title . '" href="' . $link . '"><b>' ),

share/html/Elements/ShowHistoryHeader

@@ -55,7 +55,7 @@ $SingleTransaction => 0
 $Title             => loc('History')
 $FilterURL         => ''
 $FilterTarget      => ''
-$ShowHistory       => ''
+$ShowHistory       => $ScrollShowHistory ? 'scroll' : RT->Config->Get( 'ShowHistory', $session{CurrentUser} )
 </%ARGS>
 <%INIT>
 my $record_type = $Object->RecordType;
@@ -81,7 +81,7 @@ $FilterURL ||= RT->Config->Get('WebPath')
 
 $FilterTarget ||= "#$container_id";
 </%INIT>
-<div class="history <% lc $record_type %>" id="<% $histid %>">
+<div class="history <% lc $record_type %>" id="<% $histid %>" data-history-mode="<% $ShowHistory %>">
 <%perl>
 
 my $oldestTransactionsFirst;
@@ -214,6 +214,7 @@ if ( $ShowDisplayModes or $ShowTitle or $ScrollShowHistory ) {
         if ( $ShowHistory eq 'page' ) {
             $titleright .= qq{<input type="hidden" name="ShowPagination" value="1">};
             $titleright .= qq{<input type="hidden" name="Page" value="1">};
+            $titleright .= qq{<input type="hidden" name="focusTransactionId" value="">};
             if ( $ARGS{PerPage} ) {
                 $titleright .= qq{<input type="hidden" name="PerPage" value="$ARGS{PerPage}">};
             }

share/html/Helpers/TicketHistoryPage

@@ -147,6 +147,21 @@ if ($ShowPagination && defined $Page) {
     # Apply pagination to collection (RT uses 0-based page indexing internally)
     $transactions->RowsPerPage($PerPage);
     $transactions->GotoPage($Page - 1);
+
+    # Auto jump to the page that contains specified txn
+    if ($focusTransactionId) {
+        my $auto_page = $Page;
+        while ( !grep { $focusTransactionId == $_->Id } @{ $transactions->ItemsArrayRef || [] } ) {
+            $auto_page++;
+            $transactions->GotoPage( $auto_page - 1 );
+            if ( $auto_page > $total_pages ) {
+                RT->Logger->debug("Couldn't find transaction #$focusTransactionId");
+                undef $auto_page;
+                last;
+            }
+        }
+        $Page = $auto_page if $auto_page;
+    }
 } elsif ($focusTransactionId) { # make sure we load enough if we need to focus a transaction
     $transactions->Limit(
         FIELD    => 'id',
@@ -172,7 +187,8 @@ if ($ShowPagination && defined $Page) {
 
     # Add pagination controls if there are multiple pages
     if ($total_pages > 1) {
-        my %url_params = map { $_ => $ARGS{$_} } grep { defined $ARGS{$_} && !blessed $ARGS{$_} } keys %ARGS;
+        my %url_params = map { $_ => $ARGS{$_} }
+            grep { defined $ARGS{$_} && !blessed $ARGS{$_} && $_ ne 'focusTransactionId' } keys %ARGS;
         $url_params{ShowPagination} = 1;
 
         my $base_url = RT->Config->Get('WebPath') . "/Helpers/TicketHistoryPage";

share/html/Ticket/Elements/PagedShowHistory

@@ -53,6 +53,8 @@ my %params = (
     PerPage => $ARGS{PerPage} || 10,
     Page => $ARGS{Page} || 1,
     id => $Ticket->id,
+    ( RT::Interface::Web::RequestENV('HTTP_HX_CURRENT_URL') // '' ) =~ m{#txn-(\d+)$}
+        && !$ARGS{Page} ? ( focusTransactionId => $1 ) : (),
 );
 
 my $url = RT->Config->Get('WebPath') . "/Helpers/TicketHistoryPage?" .

share/html/Ticket/Elements/ShowUpdateStatus

@@ -57,7 +57,7 @@
 % my $ShowHistory = RT->Config->Get( 'ShowHistory', $session{'CurrentUser'} );
 % my $url = RT->Config->Get('WebPath') . "/$DisplayPath/Display.html?id=" . $Ticket->id;
 % if ( $ShowHistory eq 'click' ) {
-%   $url .= '&ShowHistory=1';
+%   $url .= '&ForceShowHistory=1';
 % }
         <a
 %       if ( RT::Interface::Web::RequestENV('REQUEST_URI') eq $url ) { # URL doesn't change, no need to reload
@@ -67,7 +67,7 @@
         <div class="d-sm-none mt-1"></div>
         <a class="btn btn-primary btn-sm" href="<% RT->Config->Get('WebPath') ."/$DisplayPath/Display.html?id=". $Ticket->id. "&MarkAsSeen=1" |n %>"><&|/l&>Mark as Seen</&></a>
         <div class="d-sm-none mt-1"></div>
-        <a class="btn btn-primary btn-sm" href="<% RT->Config->Get('WebPath') ."/$DisplayPath/Display.html?id=". $Ticket->id ."&MarkAsSeen=1&ShowHistory=1&Anchor=txn-" . $txn->id |n %>"><&|/l&>Jump & Mark as Seen</&></a>
+        <a class="btn btn-primary btn-sm" href="<% $url . '&MarkAsSeen=1&Anchor=txn-' . $txn->id |n %>"><&|/l&>Jump & Mark as Seen</&></a>
       </span>
     </div>
   </div>

share/static/js/init.js

@@ -704,10 +704,17 @@ document.addEventListener('htmx:load', function(evt) {
         elem.change( trigger_func );
     });
 
-    if (window.location.hash.match(/#txn-\d+$/)) {
-        revealHistoryWidget();
-    }
+    if (window.location.hash) {
+        const hash = window.location.hash;
+        if (hash.match(/#txn-\d+$/)) {
+            revealHistoryWidget();
+        }
 
+        // Automatically scroll to the specified element
+        if (elt.querySelector(hash) || elt.querySelector('[name="' + hash.substring(1) + '"]')) {
+            location.href = location.href;
+        }
+    }
 
     /* inline edit on ticket display */
     jQuery('.titlebox[data-inline-edit-behavior="link"], .titlebox[data-inline-edit-behavior="click"]').each(function() {
@@ -933,8 +940,30 @@ jQuery(document).on('click', 'a.search-filter', function (e) {
 });
 
 // Automatically reveal history widget so anchor links like #txn-586 can work
-jQuery(document).on('click', 'a.jump-to-unread', function () {
-    revealHistoryWidget();
+jQuery(document).on('click', 'a.jump-to-unread', function (evt) {
+    const widget = document.querySelector('.htmx-load-widget[hx-get$="/Widgets/Display/History"]');
+    if (widget) {
+        const history_mode = widget.querySelector('[data-history-mode]')?.getAttribute('data-history-mode');
+        // For paginated history, we need to reload widget if the specified txn is not on current page
+        if ( history_mode === 'page' && widget.getAttribute('data-hx-revealed') === 'true' ) {
+            const matched = evt.target.getAttribute('href').match(/#(txn-(\d+))$/);
+            if ( matched && !document.querySelector('[name="' + matched[1] + '"]') ) {
+                // Update location first so widget can retrieve the txn id from hash in URL
+                location.href = evt.target.getAttribute('href');
+                const filter_form = widget.querySelector('form.transaction-filter-form');
+                if (filter_form) {
+                    filter_form.querySelector('input[name=focusTransactionId]').value = matched[2];
+                    htmx.trigger(filter_form, 'submit');
+                    setTimeout(function() {
+                        filter_form.querySelector('input[name=focusTransactionId]').value = '';
+                    }, 100);
+                }
+            }
+        }
+        else {
+            revealHistoryWidget();
+        }
+    }
 });
 
 // Clip content