feat(events): deep links

* Added a "Copy link" button to events/comments in the UI, which copies
the current URL with a hash containing the event ID.
* When TimelineFeed is mounted, it sees if there's a relevant hash in
the URL, and requests the server to return the page that contains that
event (instead of just requesting the first page).
* Added an argument to the request event `search` route to return the
page containing a given event instead of a specific numbered page. The
actual page number chosen is returned by the server (see
inveniosoftware/invenio-records-resources#656).
This is calculated by counting the number of records older than the
specified one and dividing by the page size.

Author: palkerecsenyi

invenio_requests/assets/semantic-ui/js/invenio_requests/components/RequestsFeed.js

@@ -6,7 +6,7 @@
 // under the terms of the MIT License; see LICENSE file for more details.
 
 import PropTypes from "prop-types";
-import React from "react";
+import React, { forwardRef } from "react";
 import { Image } from "react-invenio-forms";
 import { Container, Feed, Icon } from "semantic-ui-react";
 
@@ -26,18 +26,31 @@ RequestsFeed.defaultProps = {
   children: null,
 };
 
-export const RequestEventItem = ({ children }) => (
-  <div className="requests-event-item">
-    <div className="requests-event-container">{children}</div>
-  </div>
-);
+export const RequestEventItem = forwardRef(function RequestEventItem(
+  { id, children, selected },
+  ref
+) {
+  return (
+    <div
+      className={`requests-event-item${selected ? " selected" : ""}`}
+      id={id}
+      ref={ref}
+    >
+      <div className="requests-event-container">{children}</div>
+    </div>
+  );
+});
 
 RequestEventItem.propTypes = {
+  id: PropTypes.string,
   children: PropTypes.node,
+  selected: PropTypes.bool,
 };
 
 RequestEventItem.defaultProps = {
+  id: null,
   children: null,
+  selected: false,
 };
 
 export const RequestEventInnerContainer = ({ children, isEvent }) => (

invenio_requests/assets/semantic-ui/js/invenio_requests/timeline/TimelineFeed.js

@@ -17,6 +17,7 @@ import { Pagination } from "../components/Pagination";
 import RequestsFeed from "../components/RequestsFeed";
 import { TimelineCommentEditor } from "../timelineCommentEditor";
 import { TimelineCommentEventControlled } from "../timelineCommentEventControlled";
+import { getEventIdFromUrl } from "../timelineEvents/utils";
 
 class TimelineFeed extends Component {
   constructor(props) {
@@ -30,7 +31,9 @@ class TimelineFeed extends Component {
 
   componentDidMount() {
     const { getTimelineWithRefresh } = this.props;
-    getTimelineWithRefresh();
+
+    // Check if an event ID is included in the hash
+    getTimelineWithRefresh(getEventIdFromUrl());
   }
 
   async componentDidUpdate(prevProps) {

invenio_requests/assets/semantic-ui/js/invenio_requests/timeline/index.js

@@ -13,7 +13,8 @@ import {
 import TimelineFeedComponent from "./TimelineFeed";
 
 const mapDispatchToProps = (dispatch) => ({
-  getTimelineWithRefresh: () => dispatch(getTimelineWithRefresh()),
+  getTimelineWithRefresh: (includeEventId) =>
+    dispatch(getTimelineWithRefresh(includeEventId)),
   timelineStopRefresh: () => dispatch(clearTimelineInterval()),
   setPage: (page) => dispatch(setPage(page)),
 });

invenio_requests/assets/semantic-ui/js/invenio_requests/timeline/state/actions.js

@@ -25,7 +25,7 @@ class intervalManager {
   }
 }
 
-export const fetchTimeline = (loadingState = true) => {
+export const fetchTimeline = (includeEventId = undefined, loadingState = true) => {
   return async (dispatch, getState, config) => {
     const state = getState();
     const { size, page, data: timelineData } = state.timeline;
@@ -44,6 +44,7 @@ export const fetchTimeline = (loadingState = true) => {
         size: size,
         page: page,
         sort: "oldest",
+        include_event_id: includeEventId,
       });
 
       // Check if timeline has more events than the current state
@@ -62,6 +63,15 @@ export const fetchTimeline = (loadingState = true) => {
         }
       }
 
+      if (response.data.page !== page) {
+        // If a different page was returned (e.g. a specific event ID was requested) we need to update it.
+        // This will _not_ trigger a reload of the timeline.
+        dispatch({
+          type: CHANGE_PAGE,
+          payload: response.data.page,
+        });
+      }
+
       dispatch({
         type: SUCCESS,
         payload: response.data,
@@ -99,12 +109,12 @@ const timelineReload = (dispatch, getState, config) => {
 
   if (concurrentRequests) return;
 
-  dispatch(fetchTimeline(false));
+  dispatch(fetchTimeline(undefined, false));
 };
 
-export const getTimelineWithRefresh = () => {
+export const getTimelineWithRefresh = (includeEventId) => {
   return async (dispatch, getState, config) => {
-    dispatch(fetchTimeline(true));
+    dispatch(fetchTimeline(includeEventId, true));
     dispatch(setTimelineInterval());
   };
 };

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineEvents/TimelineCommentEvent.js

@@ -6,7 +6,7 @@
 
 import { i18next } from "@translations/invenio_requests/i18next";
 import PropTypes from "prop-types";
-import React, { Component } from "react";
+import React, { Component, createRef } from "react";
 import { Image } from "react-invenio-forms";
 import Overridable from "react-overridable";
 import { Container, Dropdown, Feed, Icon } from "semantic-ui-react";
@@ -16,16 +16,34 @@ import { RichEditor } from "react-invenio-forms";
 import RequestsFeed from "../components/RequestsFeed";
 import { TimelineEventBody } from "../components/TimelineEventBody";
 import { toRelativeTime } from "react-invenio-forms";
+import { copyUrlForEvent, getEventIdFromUrl } from "./utils";
 
 class TimelineCommentEvent extends Component {
   constructor(props) {
     super(props);
 
     const { event } = props;
 
+    const {
+      event: { id: thisEventId },
+    } = this.props;
+    const urlEventId = getEventIdFromUrl();
+    const isSelected = urlEventId === thisEventId;
+
     this.state = {
       commentContent: event?.payload?.content,
+      isSelected,
     };
+    this.ref = createRef(null);
+  }
+
+  componentDidMount() {
+    const { isSelected } = this.state;
+    if (isSelected && this.ref.current) {
+      // We need to manually focus the element since it will have been loaded after the initial page load.
+      this.ref.current.scrollIntoView({ behaviour: "smooth" });
+      this.ref.current.focus();
+    }
   }
 
   eventToType = ({ type, payload }) => {
@@ -41,6 +59,13 @@ class TimelineCommentEvent extends Component {
     }
   };
 
+  copyLink() {
+    const {
+      event: { id: eventId },
+    } = this.props;
+    copyUrlForEvent(eventId);
+  }
+
   render() {
     const {
       isLoading,
@@ -51,7 +76,7 @@ class TimelineCommentEvent extends Component {
       deleteComment,
       toggleEditMode,
     } = this.props;
-    const { commentContent } = this.state;
+    const { commentContent, isSelected } = this.state;
 
     const commentHasBeenEdited = event?.revision_id > 1 && event?.payload;
 
@@ -75,7 +100,11 @@ class TimelineCommentEvent extends Component {
     }
     return (
       <Overridable id={`TimelineEvent.layout.${this.eventToType(event)}`} event={event}>
-        <RequestsFeed.Item>
+        <RequestsFeed.Item
+          id={`event-${event.id}`}
+          ref={this.ref}
+          selected={isSelected}
+        >
           <RequestsFeed.Content>
             {userAvatar}
             <RequestsFeed.Event>
@@ -88,6 +117,9 @@ class TimelineCommentEvent extends Component {
                     aria-label={i18next.t("Actions")}
                   >
                     <Dropdown.Menu>
+                      <Dropdown.Item onClick={() => this.copyLink()}>
+                        {i18next.t("Copy link")}
+                      </Dropdown.Item>
                       {canUpdate && (
                         <Dropdown.Item onClick={() => toggleEditMode()}>
                           {i18next.t("Edit")}

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineEvents/utils.js

@@ -0,0 +1,21 @@
+// This file is part of InvenioRequests
+// Copyright (C) 2025 CERN.
+//
+// Invenio Requests is free software; you can redistribute it and/or modify it
+// under the terms of the MIT License; see LICENSE file for more details.
+
+export const copyUrlForEvent = (eventId) => {
+  const currentUrl = new URL(window.location.href);
+  currentUrl.hash = `event-${eventId}`;
+  navigator.clipboard.writeText(currentUrl.toString());
+};
+
+export const getEventIdFromUrl = () => {
+  const currentUrl = new URL(window.location.href);
+  const hash = currentUrl.hash;
+  let eventId = null;
+  if (hash.startsWith("#event-")) {
+    eventId = hash.substring(7);
+  }
+  return eventId;
+};

invenio_requests/resources/events/config.py

@@ -10,10 +10,19 @@
 
 """RequestEvent Resource Configuration."""
 
-from invenio_records_resources.resources import RecordResourceConfig
+from invenio_records_resources.resources import (
+    RecordResourceConfig,
+    SearchRequestArgsSchema,
+)
 from marshmallow import fields
 
 
+class RequestCommentsSearchRequestArgsSchema(SearchRequestArgsSchema):
+    """Add parameter to parse tags."""
+
+    include_event_id = fields.UUID()
+
+
 class RequestCommentsResourceConfig(RecordResourceConfig):
     """Request Events resource configuration."""
 
@@ -37,6 +46,8 @@ class RequestCommentsResourceConfig(RecordResourceConfig):
         "comment_id": fields.Str(),
     }
 
+    request_search_args = RequestCommentsSearchRequestArgsSchema
+
     response_handlers = {
         "application/vnd.inveniordm.v1+json": RecordResourceConfig.response_handlers[
             "application/json"

invenio_requests/resources/events/resource.py

@@ -130,10 +130,14 @@ def search(self):
         """Perform a search over EVENTS.
 
         Its primary purpose is as a batch read of events i.e. the timeline.
+
+        By specifying `include_event_id`, you can ensure that the page containing the
+        given event will be loaded. This will ignore the `page` argument.
         """
         hits = self.service.search(
             identity=g.identity,
             request_id=resource_requestctx.view_args["request_id"],
+            include_event_id=resource_requestctx.args.get("include_event_id"),
             params=resource_requestctx.args,
             search_preference=search_preference(),
             expand=resource_requestctx.args.get("expand", False),

invenio_requests/services/events/service.py

@@ -10,11 +10,13 @@
 
 """RequestEvents Service."""
 
+import sqlalchemy.exc
 from flask_principal import AnonymousIdentity
 from invenio_i18n import _
 from invenio_notifications.services.uow import NotificationOp
 from invenio_records_resources.services import RecordService, ServiceSchemaWrapper
 from invenio_records_resources.services.base.links import LinksTemplate
+from invenio_records_resources.services.records.params import PaginationParam
 from invenio_records_resources.services.uow import (
     RecordCommitOp,
     RecordIndexOp,
@@ -236,38 +238,68 @@ def delete(self, identity, id_, revision_id=None, uow=None):
         return True
 
     def search(
-        self, identity, request_id, params=None, search_preference=None, **kwargs
+        self,
+        identity,
+        request_id,
+        include_event_id=None,
+        params=None,
+        search_preference=None,
+        **kwargs
     ):
         """Search for events for a given request matching the querystring."""
         params = params or {}
         params.setdefault("sort", "oldest")
 
-        expand = kwargs.pop("expand", False)
-
         # Permissions - guarded by the request's can_read.
         request = self._get_request(request_id)
         self.require_permission(identity, "read", request=request)
 
-        # Prepare and execute the search
+        request_filter = dsl.Q("term", request_id=str(request.id))
+
+        # Prepare the search
         search = self._search(
             "search",
             identity,
             params,
             search_preference,
             permission_action="unused",
-            extra_filter=dsl.Q("term", request_id=str(request.id)),
+            extra_filter=request_filter,
+            versioning=False,
             **kwargs,
         )
-        search_result = search.execute()
 
+        if include_event_id is not None:
+            # If a specific event ID is requested, we need to work out the corresponding page number.
+            try:
+                event = self._get_event(include_event_id)
+                self.require_permission(identity, "read", request=request, event=event)
+
+                num_older_than_event = search.filter(
+                    "range", created={"lt": event.created}
+                ).count()
+                page = num_older_than_event // params["size"] + 1
+                # Re run the pagination param interpreter to update the search with the new page number
+                params.update(page=page)
+                search = PaginationParam(self.config.search).apply(
+                    identity, search, params
+                )
+            except sqlalchemy.exc.NoResultFound:
+                # Silently fail if the ID doesn't correspond to a valid event.
+                # In this case we just default to the page the user originally requested (or page 1).
+                pass
+
+        # We deactivated versioning before (it doesn't apply for count queries) so we need to re-enable it.
+        search_result = search.params(version=True).execute()
+
+        expand = kwargs.pop("expand", False)
         return self.result_list(
             self,
             identity,
             search_result,
             params,
             links_tpl=LinksTemplate(
                 self.config.links_search,
-                context={"request_id": str(request.id), "args": params},
+                context={"request_id": str(request_id), "args": params},
             ),
             links_item_tpl=self.links_item_tpl,
             expandable_fields=self.expandable_fields,