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/JavascriptConfig

@@ -54,7 +54,7 @@ my $Config = {};
 $Config->{$_} = RT->Config->Get( $_, $session{CurrentUser} )
   for qw(rtname WebURL WebPath MessageBoxRichText MessageBoxRichTextHeight
          MaxAttachmentSize WebDefaultStylesheet QuoteSelectedText OldestTransactionsFirst
-         MessageBoxRichTextInitArguments EnableKeyboardShortcuts);
+         MessageBoxRichTextInitArguments EnableKeyboardShortcuts ShowHistory);
 
 # In case the value is string '0', which is true in js if condition.
 $Config->{EnableKeyboardShortcuts} = 0 unless $Config->{EnableKeyboardShortcuts};

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 .= '&ShowHistory=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/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

@@ -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/util.js

@@ -1785,11 +1785,34 @@ htmx.onLoad(function(elt) {
 
     // Automatically reveal history widget so anchor links like #txn-586 can work
     elt.querySelector('a.jump-to-unread')?.addEventListener('click', (evt) => {
-        revealHistoryWidget();
+        const widget = document.querySelector('.htmx-load-widget[hx-get$="/Widgets/Display/History"]');
+        if (widget) {
+            // For paginated history, we need to reload widget if the specified txn is not on current page
+            if ( RT.Config.ShowHistory === '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');
+                    reloadElement(widget, { "hx-vals": JSON.stringify({ id: (new URLSearchParams(location.search)).get('id') }) });
+                }
+            }
+            else {
+                revealHistoryWidget();
+            }
+        }
     });
 
-    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;
+        }
     }
 
     expandCalendar(elt);