feat: implement comprehensive reviewers functionality for requests

This commit introduces a complete reviewers system for Invenio Requests, enabling
assignment and management of reviewers throughout the request lifecycle.

**Frontend Changes:**
- Add RequestReviewers React component with search and selection functionality
- Implement CollapsedHeader, ReviewerSearch, and SelectedReviewersList components
- Add reviewer management UI to request details page
- Integrate reviewers timeline events and API endpoints

**Backend Changes:**
- Add RequestReviewersComponent for service layer reviewer management
- Implement ReviewersUpdatedType custom event for timeline tracking
- Add reviewer-specific permissions and access control generators
- Update request schema and mappings to support reviewers field
- Add multi-entity reference support for reviewer entities

**Database & Schema:**
- Update OpenSearch mappings (v1, v2, v7) with dynamic reviewer templates
- Extend request JSON schema with reviewers definitions
- Add reviewer entity reference system fields

**Configuration & Permissions:**
- Make reviewers configurable through request types
- Add reviewer-specific permission checks and generators
- Update service configurations to handle reviewer operations

**API & Services:**
- Extend request service with reviewer update capabilities
- Add reviewer-specific API endpoints and parameters
- Implement proper validation and error handling for reviewer operations

**Testing & Quality:**
- Update test configurations and fixtures
- Fix linting issues and code style violations
- Add comprehensive test coverage for reviewer functionality

This implementation provides a complete reviewers workflow including assignment,
removal, permission management, and timeline tracking while maintaining
backward compatibility with existing request functionality.

Co-authored-by: Yash Lamba <[email protected]>

Author: zzacharo

invenio_requests/assets/semantic-ui/js/invenio_requests/InvenioRequestsApp.js

@@ -39,12 +39,12 @@ export class InvenioRequestsApp extends Component {
   }
 
   render() {
-    const { overriddenCmps, userAvatar, permissions } = this.props;
+    const { overriddenCmps, userAvatar, permissions, config } = this.props;
 
     return (
       <OverridableContext.Provider value={overriddenCmps}>
         <Provider store={this.store}>
-          <Request userAvatar={userAvatar} permissions={permissions} />
+          <Request userAvatar={userAvatar} permissions={permissions} config={config} />
         </Provider>
       </OverridableContext.Provider>
     );
@@ -59,11 +59,15 @@ InvenioRequestsApp.propTypes = {
   userAvatar: PropTypes.string.isRequired,
   defaultQueryParams: PropTypes.object,
   permissions: PropTypes.object.isRequired,
+  config: PropTypes.object,
 };
 
 InvenioRequestsApp.defaultProps = {
   overriddenCmps: {},
   requestsApi: null,
   requestEventsApi: null,
   defaultQueryParams: { size: 15 },
+  config: {
+    allowGroupReviewers: false,
+  },
 };

invenio_requests/assets/semantic-ui/js/invenio_requests/api/InvenioRequestApi.js

@@ -73,6 +73,14 @@ export class InvenioRequestsAPI {
     });
   };
 
+  addReviewer = async (reviewers) => {
+    return await http.put(this.#urls.self, {
+      reviewers: reviewers.map((r) => {
+        return "user" in r ? { user: r.id } : { group: r.id };
+      }),
+    });
+  };
+
   performAction = async (action, commentContent = null) => {
     let payload = {};
     if (!_isEmpty(commentContent)) {

invenio_requests/assets/semantic-ui/js/invenio_requests/request/Request.js

@@ -32,6 +32,7 @@ export class Request extends Component {
             request={request}
             userAvatar={userAvatar}
             permissions={permissions}
+            config={this.props.config}
           />
         </Loader>
       </Overridable>
@@ -45,6 +46,7 @@ Request.propTypes = {
   updateRequestAfterAction: PropTypes.func.isRequired,
   userAvatar: PropTypes.string,
   permissions: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
 };
 
 Request.defaultProps = {

invenio_requests/assets/semantic-ui/js/invenio_requests/request/RequestDetails.js

@@ -14,7 +14,7 @@ import { Timeline } from "../timeline";
 
 class RequestDetails extends Component {
   render() {
-    const { request, userAvatar, permissions } = this.props;
+    const { request, userAvatar, permissions, config } = this.props;
     return (
       <Overridable id="InvenioRequests.RequestDetails.layout" {...this.props}>
         <Grid stackable reversed="mobile">
@@ -26,7 +26,11 @@ class RequestDetails extends Component {
             />
           </Grid.Column>
           <Grid.Column mobile={16} tablet={4} computer={3}>
-            <RequestMetadata request={request} />
+            <RequestMetadata
+              request={request}
+              permissions={permissions}
+              config={config}
+            />
           </Grid.Column>
         </Grid>
       </Overridable>
@@ -38,6 +42,7 @@ RequestDetails.propTypes = {
   request: PropTypes.object.isRequired,
   userAvatar: PropTypes.string,
   permissions: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
 };
 
 RequestDetails.defaultProps = {

invenio_requests/assets/semantic-ui/js/invenio_requests/request/RequestMetadata.js

@@ -11,10 +11,11 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { Image } from "react-invenio-forms";
 import Overridable from "react-overridable";
-import { Divider, Header, Icon, Message } from "semantic-ui-react";
+import { Divider, Header, Icon, Message, Button } from "semantic-ui-react";
 import { toRelativeTime } from "react-invenio-forms";
 import RequestStatus from "./RequestStatus";
 import RequestTypeLabel from "./RequestTypeLabel";
+import { RequestReviewers } from "./reviewers/RequestReviewers";
 
 const User = ({ user }) => (
   <div className="flex">
@@ -84,10 +85,8 @@ ExternalEmail.propTypes = {
 
 const Group = ({ group }) => (
   <div className="flex">
-    <Icon name="group" className="mr-5" />
-    <span>
-      {i18next.t("Group")}: {group?.name}
-    </span>
+    <Icon name="group" className="mr-10" />
+    <span>{group?.name}</span>
   </div>
 );
 
@@ -97,7 +96,7 @@ Group.propTypes = {
   }).isRequired,
 };
 
-const EntityDetails = ({ userData, details }) => {
+export const EntityDetails = ({ userData, details }) => {
   const isUser = "user" in userData;
   const isCommunity = "community" in userData;
   const isExternalEmail = "email" in userData;
@@ -139,7 +138,7 @@ EntityDetails.propTypes = {
   ]).isRequired,
 };
 
-const DeletedResource = ({ details }) => (
+export const DeletedResource = ({ details }) => (
   <Message negative>{details.metadata.title}</Message>
 );
 
@@ -158,9 +157,25 @@ class RequestMetadata extends Component {
     const { request } = this.props;
     const expandedCreatedBy = request.expanded?.created_by;
     const expandedReceiver = request.expanded?.receiver;
+
+    const enableReviewers = this.props.config.enableReviewers;
+    const allowGroupReviewers = this.props.config.allowGroupReviewers;
+    const maxReviewers = this.props.config.maxReviewers;
+
     return (
       <Overridable id="InvenioRequest.RequestMetadata.Layout" request={request}>
         <>
+          {enableReviewers && (
+            <>
+              <RequestReviewers
+                request={request}
+                permissions={this.props.permissions}
+                allowGroupReviewers={allowGroupReviewers}
+                maxReviewers={maxReviewers}
+              />
+              <Divider />
+            </>
+          )}
           {expandedCreatedBy !== undefined && (
             <>
               <Header as="h3" size="tiny">
@@ -235,6 +250,8 @@ class RequestMetadata extends Component {
 
 RequestMetadata.propTypes = {
   request: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+  permissions: PropTypes.object.isRequired,
 };
 
 export default Overridable.component(

invenio_requests/assets/semantic-ui/js/invenio_requests/request/reviewers/RequestReviewers.js

@@ -0,0 +1,163 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2025 CERN.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { HeaderSubheader, Grid, List, Image, Segment } from "semantic-ui-react";
+import { UsersApi } from "@js/invenio_communities/api/UsersApi";
+import { GroupsApi } from "@js/invenio_communities/api/GroupsApi";
+import {
+  InvenioRequestsAPI,
+  RequestLinksExtractor,
+} from "@js/invenio_requests/api/InvenioRequestApi";
+import { i18next } from "@translations/invenio_requests/i18next";
+import RequestsFeed from "../../components/RequestsFeed";
+import { EntityDetails, DeletedResource } from "../RequestMetadata";
+import { CollapsedHeader } from "./components/CollapsedHeader";
+import { ReviewerSearch } from "./components/ReviewerSearch";
+import { SelectedReviewersList } from "./components/SelectedReviewersList";
+
+const isResourceDeleted = (details) => details.is_ghost === true;
+
+export const RequestReviewers = ({
+  request,
+  permissions,
+  allowGroupReviewers,
+  maxReviewers,
+}) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [searchType, setSearchType] = useState("user");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [results, setResults] = useState([]);
+
+  const reviewers = request.expanded?.reviewers || [];
+
+  const initialReviewers = reviewers.map((r, index) => {
+    return "user" in request.reviewers[index]
+      ? { ...r, user: request.reviewers[index].user }
+      : { ...r, group: request.reviewers[index].group };
+  });
+
+  const [selectedReviewers, setSelectedReviewers] = useState(initialReviewers);
+  const requestApi = new InvenioRequestsAPI(new RequestLinksExtractor(request));
+
+  const handleSearchChange = async (e, { value }) => {
+    setSearchQuery(value);
+    if (value.length > 1) {
+      try {
+        let suggestions;
+        if (searchType === "user") {
+          const usersClient = new UsersApi();
+          suggestions = await usersClient.suggestUsers(value);
+        } else {
+          const groupsClient = new GroupsApi();
+          suggestions = await groupsClient.getGroups(value);
+        }
+        setResults(suggestions.data.hits.hits);
+      } catch (error) {
+        console.error(`Error fetching ${searchType} suggestions:`, error);
+        setResults([]);
+      }
+    } else {
+      setResults([]);
+    }
+  };
+
+  const handleResultSelect = async (e, { result }) => {
+    if (!selectedReviewers.find((r) => r.id === result.id)) {
+      const newReviewers = [
+        ...selectedReviewers,
+        { ...result, [searchType]: result.id },
+      ];
+      setSelectedReviewers(newReviewers);
+      const _ = await requestApi.addReviewer(newReviewers);
+    }
+    setSearchQuery("");
+    setResults([]);
+  };
+
+  const removeReviewer = async (userId) => {
+    const newReviewers = selectedReviewers.filter((r) => r.id !== userId);
+    setSelectedReviewers(newReviewers);
+    const _ = await requestApi.addReviewer(newReviewers);
+    setSelectedReviewers(newReviewers);
+  };
+
+  // A helper to render a search result item.
+  const renderResult = (item) => (
+    <List.Item key={item.id}>
+      <RequestsFeed.Avatar src={item.links?.avatar} as={Image} circular size="tiny" />
+      <List.Content>{item.profile?.full_name || item.name}</List.Content>
+    </List.Item>
+  );
+
+  return (
+    <>
+      <CollapsedHeader
+        canUpdateReviewers={permissions.can_action_accept}
+        onOpen={() => setIsMenuOpen(!isMenuOpen)}
+        label={i18next.t("Reviewers")}
+      />
+      {!isMenuOpen ? (
+        <Grid className="mt-0 mb-5">
+          {selectedReviewers.length > 0 ? (
+            selectedReviewers.map((reviewer) => (
+              <>
+                <Grid.Column width={14} className="pb-0">
+                  <React.Fragment key={reviewer.id}>
+                    {isResourceDeleted(reviewer) ? (
+                      <DeletedResource details={reviewer} />
+                    ) : (
+                      <>
+                        <EntityDetails userData={reviewer} details={reviewer} />
+                      </>
+                    )}
+                  </React.Fragment>
+                </Grid.Column>
+              </>
+            ))
+          ) : (
+            <Grid.Column width={12} className="pb-0 pl-20">
+              <HeaderSubheader>{i18next.t("No reviewers selected")}</HeaderSubheader>
+            </Grid.Column>
+          )}
+        </Grid>
+      ) : (
+        <Segment>
+          <ReviewerSearch
+            searchType={searchType}
+            onFilterChange={setSearchType}
+            searchQuery={searchQuery}
+            results={results}
+            onSearchChange={handleSearchChange}
+            onResultSelect={handleResultSelect}
+            renderResult={renderResult}
+            i18next={i18next}
+            allowGroupReviewers={allowGroupReviewers}
+          />
+
+          <SelectedReviewersList
+            selectedReviewers={selectedReviewers}
+            removeReviewer={removeReviewer}
+            i18next={i18next}
+            maxReviewers={maxReviewers}
+          />
+        </Segment>
+      )}
+    </>
+  );
+};
+
+RequestReviewers.propTypes = {
+  request: PropTypes.object.isRequired,
+  permissions: PropTypes.shape({
+    can_action_accept: PropTypes.bool.isRequired,
+  }).isRequired,
+  allowGroupReviewers: PropTypes.bool.isRequired,
+  maxReviewers: PropTypes.number.isRequired,
+};

invenio_requests/assets/semantic-ui/js/invenio_requests/request/reviewers/components/CollapsedHeader.js

@@ -0,0 +1,40 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2025 CERN.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import PropTypes from "prop-types";
+import React from "react";
+import { Grid, Header, Icon } from "semantic-ui-react";
+
+// Renders the header when the menu is collapsed.
+export const CollapsedHeader = ({ canUpdateReviewers, onOpen, label }) => {
+  if (!canUpdateReviewers) {
+    return (
+      <Header as="h3" size="tiny" className="mb-0">
+        {label}
+      </Header>
+    );
+  }
+  return (
+    <Grid onClick={onOpen} className="pb-0 mr-0">
+      <Grid.Column width={12} floated="left">
+        <Header as="h3" size="tiny" className="m-0">
+          {label}
+        </Header>
+      </Grid.Column>
+      <Grid.Column floated="right" className="mt-2 pr-20">
+        <Icon name="setting" className="m-0 link" />
+      </Grid.Column>
+    </Grid>
+  );
+};
+
+CollapsedHeader.propTypes = {
+  canUpdateReviewers: PropTypes.bool.isRequired,
+  onOpen: PropTypes.func,
+  label: PropTypes.string.isRequired,
+};