From af7099f30c23f23689ec1a8153c3bc710f826fd4 Mon Sep 17 00:00:00 2001
From: Pal Kerecsenyi <pal@p.kerecs.com>
Date: Wed, 17 Jun 2026 16:17:41 +0200
Subject: [PATCH] feat(ep): redesign request page UI; remove record metadata
 fields

---
 .../record_details/CreatePublicRecordModal.js |  23 ++-
 .../components/record_details/EPApproval.js   |  30 ++--
 .../record_details/EPApprovalSubmitModal.js   |  40 -----
 .../requests/EPApprovalRequestDetails.js      | 142 ---------------
 .../less/cds-rdm/ep_approval/ep-workflow.less |  37 ++--
 site/cds_rdm/requests/ep_approval.py          |   5 -
 .../invenio_requests/ep-approval/index.html   | 169 ++++++++----------
 7 files changed, 133 insertions(+), 313 deletions(-)
 delete mode 100644 assets/js/components/requests/EPApprovalRequestDetails.js

diff --git a/assets/js/components/record_details/CreatePublicRecordModal.js b/assets/js/components/record_details/CreatePublicRecordModal.js
index f30aa797..74dddde5 100644
--- a/assets/js/components/record_details/CreatePublicRecordModal.js
+++ b/assets/js/components/record_details/CreatePublicRecordModal.js
@@ -6,7 +6,14 @@
 
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Button, Checkbox, Header, Icon, Message, Modal } from "semantic-ui-react";
+import {
+  Button,
+  Checkbox,
+  Header,
+  Icon,
+  Message,
+  Modal,
+} from "semantic-ui-react";
 import { http } from "react-invenio-forms";
 import { i18next } from "@translations/invenio_rdm_records/i18next";
 
@@ -113,7 +120,9 @@ export class CreatePublicRecordModal extends Component {
             </Message>
           ) : publicRecord ? (
             <Message positive>
-              <Message.Header>{i18next.t("Public record created")}</Message.Header>
+              <Message.Header>
+                {i18next.t("Public record created")}
+              </Message.Header>
               <Message.Content>
                 {i18next.t("The public record has been created successfully.")}{" "}
                 <a
@@ -140,7 +149,9 @@ export class CreatePublicRecordModal extends Component {
 
               <Checkbox
                 checked={agreedToTerms}
-                onChange={(_, { checked }) => this.setState({ agreedToTerms: checked })}
+                onChange={(_, { checked }) =>
+                  this.setState({ agreedToTerms: checked })
+                }
                 label={
                   <label>
                     {i18next.t(
@@ -202,7 +213,11 @@ export class CreatePublicRecordModal extends Component {
           )}
         </Modal.Content>
         <Modal.Actions>
-          <Button floated="left" onClick={this.handleClose} disabled={submitting}>
+          <Button
+            floated="left"
+            onClick={this.handleClose}
+            disabled={submitting}
+          >
             {publicRecord ? i18next.t("Close") : i18next.t("Cancel")}
           </Button>
           {!publicRecord && (
diff --git a/assets/js/components/record_details/EPApproval.js b/assets/js/components/record_details/EPApproval.js
index 84491902..27e149c3 100644
--- a/assets/js/components/record_details/EPApproval.js
+++ b/assets/js/components/record_details/EPApproval.js
@@ -11,7 +11,6 @@ import {
   Grid,
   Header,
   Icon,
-  Message,
   Modal,
   Step,
 } from "semantic-ui-react";
@@ -143,13 +142,20 @@ export class EPApprovalManageSection extends Component {
         draft_record_id: draftRecordId,
         can_view_reviewed_version: canViewReviewedVersion,
       } = epApproval;
+
       return (
         <Grid.Column className="pb-20 pt-0">
-          <Message size="small" positive>
-            <Icon name="check circle" />
+          <Divider horizontal>
+            <Header as="h4">{i18next.t("Approval request workflow")}</Header>
+          </Divider>
+
+          <p className="text-muted text-align-center">
             {pubRn
-              ? i18next.t("EP-approved as {{rn}}", { rn: pubRn })
+              ? i18next.t("EP-approved as ")
               : i18next.t("EP-approved record")}
+
+            {pubRn && <strong>{pubRn}</strong>}
+
             {canViewReviewedVersion && draftRecordId && (
               <>
                 {" · "}
@@ -158,12 +164,12 @@ export class EPApprovalManageSection extends Component {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  {i18next.t("Review history")}
+                  {i18next.t("Original record")}
                   <Icon name="external alternate" className="ml-5" />
                 </a>
               </>
             )}
-          </Message>
+          </p>
         </Grid.Column>
       );
     }
@@ -202,7 +208,7 @@ export class EPApprovalManageSection extends Component {
 
     // Timeline step states
     // Step 1 — Request for approval
-    const step1Completed = !!approvedReportNumber;
+    const step1Completed = !!openRequest && !isDeclined;
     const step1Active = !step1Completed && !isPending;
 
     // Step 2 — EP Board review
@@ -300,11 +306,7 @@ export class EPApprovalManageSection extends Component {
                   <Step.Description>
                     {step2Completed ? (
                       requestLink ? (
-                        <a
-                          href={requestLink}
-                          target="_blank"
-                          rel="noreferrer"
-                        >
+                        <a href={requestLink} target="_blank" rel="noreferrer">
                           {i18next.t("Approved as {{rn}}", {
                             rn: approvedReportNumber,
                           })}
@@ -348,7 +350,9 @@ export class EPApprovalManageSection extends Component {
               <div className="ep-action-step">
                 <div>
                   <Step.Title>
-                    {i18next.t("Create final public version")}
+                    {step3Completed
+                      ? i18next.t("Final public version created")
+                      : i18next.t("Create final public version")}
                   </Step.Title>
                   <Step.Description>
                     {step3Completed ? (
diff --git a/assets/js/components/record_details/EPApprovalSubmitModal.js b/assets/js/components/record_details/EPApprovalSubmitModal.js
index f18f1f3d..38c424c8 100644
--- a/assets/js/components/record_details/EPApprovalSubmitModal.js
+++ b/assets/js/components/record_details/EPApprovalSubmitModal.js
@@ -18,11 +18,6 @@ import { http } from "react-invenio-forms";
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 
 const buildInitialForm = (record) => ({
-  experiment: "",
-  submitted_by: "",
-  role: "",
-  publication_title: record?.metadata?.title || "",
-  latest_version_url: record?.links?.self_html || "",
   rapid_approval: false,
   cb_review_completed: false,
   cb_process_type: "",
@@ -94,41 +89,6 @@ export class EPApprovalSubmitModal extends Component {
         <Modal.Content>
           {error && <Message negative content={error} />}
           <Form>
-            <Form.Input
-              label={i18next.t("Experiment")}
-              name="experiment"
-              value={form.experiment}
-              onChange={this.handleChange}
-              required
-            />
-            <Form.Input
-              label={i18next.t("Paper submitted by")}
-              name="submitted_by"
-              value={form.submitted_by}
-              onChange={this.handleChange}
-              required
-            />
-            <Form.Input
-              label={i18next.t("Role")}
-              name="role"
-              value={form.role}
-              onChange={this.handleChange}
-              required
-            />
-            <Form.Input
-              label={i18next.t("Publication Title")}
-              name="publication_title"
-              value={form.publication_title}
-              onChange={this.handleChange}
-              required
-            />
-            <Form.Input
-              label={i18next.t("Latest version at")}
-              name="latest_version_url"
-              value={form.latest_version_url}
-              onChange={this.handleChange}
-              placeholder="http://"
-            />
             <Form.Field>
               <Checkbox
                 label={i18next.t("Request rapid approval (i.e. within 2 days)")}
diff --git a/assets/js/components/requests/EPApprovalRequestDetails.js b/assets/js/components/requests/EPApprovalRequestDetails.js
deleted file mode 100644
index fb1ef9d2..00000000
--- a/assets/js/components/requests/EPApprovalRequestDetails.js
+++ /dev/null
@@ -1,142 +0,0 @@
-// This file is part of CDS RDM
-// Copyright (C) 2025 CERN.
-//
-// CDS RDM is free software; you can redistribute it and/or modify it
-// under the terms of the GPL-2.0 License; see LICENSE file for more details.
-
-import React from "react";
-import PropTypes from "prop-types";
-import { Grid, Table } from "semantic-ui-react";
-import { i18next } from "@translations/invenio_app_rdm/i18next";
-import { Timeline } from "@js/invenio_requests/timelineParent";
-import RequestMetadata from "@js/invenio_requests/request/RequestMetadata";
-
-const BoolCell = ({ value }) => <>{value ? i18next.t("Yes") : i18next.t("No")}</>;
-
-BoolCell.propTypes = { value: PropTypes.bool.isRequired };
-
-const EPApprovalPayloadCard = ({ request }) => {
-  const payload = request.payload || {};
-  const topicLinks = request.topic?.links || {};
-
-  return (
-    <Table definition celled compact className="mb-15">
-      <Table.Body>
-        {topicLinks.self_html && (
-          <Table.Row>
-            <Table.Cell>{i18next.t("Record")}</Table.Cell>
-            <Table.Cell>
-              <a href={topicLinks.self_html} target="_blank" rel="noreferrer">
-                {topicLinks.self_html}
-              </a>
-            </Table.Cell>
-          </Table.Row>
-        )}
-        <Table.Row>
-          <Table.Cell>{i18next.t("Experiment")}</Table.Cell>
-          <Table.Cell>{payload.experiment || "—"}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{i18next.t("Submitted by")}</Table.Cell>
-          <Table.Cell>{payload.submitted_by || "—"}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{i18next.t("Role")}</Table.Cell>
-          <Table.Cell>{payload.role || "—"}</Table.Cell>
-        </Table.Row>
-        {payload.latest_version_url && (
-          <Table.Row>
-            <Table.Cell>{i18next.t("Latest version at")}</Table.Cell>
-            <Table.Cell>
-              <a href={payload.latest_version_url} target="_blank" rel="noreferrer">
-                {payload.latest_version_url}
-              </a>
-            </Table.Cell>
-          </Table.Row>
-        )}
-        <Table.Row>
-          <Table.Cell>{i18next.t("Rapid approval")}</Table.Cell>
-          <Table.Cell>
-            <BoolCell value={!!payload.rapid_approval} />
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{i18next.t("CB review completed")}</Table.Cell>
-          <Table.Cell>
-            <BoolCell value={!!payload.cb_review_completed} />
-            {payload.cb_review_completed && payload.cb_process_type && (
-              <> ({payload.cb_process_type})</>
-            )}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{i18next.t("Paper signed by whole collaboration")}</Table.Cell>
-          <Table.Cell>
-            <BoolCell value={!!payload.paper_signed} />
-            {!payload.paper_signed && payload.num_non_signers > 0 && (
-              <> — {i18next.t("{{n}} non-signer(s)", { n: payload.num_non_signers })}</>
-            )}
-          </Table.Cell>
-        </Table.Row>
-        {payload.controversy && (
-          <Table.Row>
-            <Table.Cell>{i18next.t("Controversy")}</Table.Cell>
-            <Table.Cell>{i18next.t("Yes")}</Table.Cell>
-          </Table.Row>
-        )}
-        {payload.additional_communication && (
-          <Table.Row>
-            <Table.Cell>{i18next.t("Additional communication")}</Table.Cell>
-            <Table.Cell style={{ whiteSpace: "pre-wrap" }}>
-              {payload.additional_communication}
-            </Table.Cell>
-          </Table.Row>
-        )}
-        {payload.approved_report_number && (
-          <Table.Row positive>
-            <Table.Cell>{i18next.t("Approved report number")}</Table.Cell>
-            <Table.Cell>
-              <strong>{payload.approved_report_number}</strong>
-            </Table.Cell>
-          </Table.Row>
-        )}
-      </Table.Body>
-    </Table>
-  );
-};
-
-EPApprovalPayloadCard.propTypes = {
-  request: PropTypes.object.isRequired,
-};
-
-export const EPApprovalAwareRequestDetails = ({
-  request,
-  userAvatar,
-  permissions,
-  config,
-}) => {
-  const isEPApproval = request.type === "ep-approval";
-
-  return (
-    <Grid stackable reversed="mobile">
-      <Grid.Column mobile={16} tablet={12} computer={13}>
-        {isEPApproval && <EPApprovalPayloadCard request={request} />}
-        <Timeline userAvatar={userAvatar} request={request} permissions={permissions} />
-      </Grid.Column>
-      <Grid.Column mobile={16} tablet={4} computer={3}>
-        <RequestMetadata request={request} permissions={permissions} config={config} />
-      </Grid.Column>
-    </Grid>
-  );
-};
-
-EPApprovalAwareRequestDetails.propTypes = {
-  request: PropTypes.object.isRequired,
-  userAvatar: PropTypes.string,
-  permissions: PropTypes.object.isRequired,
-  config: PropTypes.object.isRequired,
-};
-
-EPApprovalAwareRequestDetails.defaultProps = {
-  userAvatar: "",
-};
diff --git a/assets/less/cds-rdm/ep_approval/ep-workflow.less b/assets/less/cds-rdm/ep_approval/ep-workflow.less
index 5caeb911..f76bfc38 100644
--- a/assets/less/cds-rdm/ep_approval/ep-workflow.less
+++ b/assets/less/cds-rdm/ep_approval/ep-workflow.less
@@ -1,13 +1,15 @@
-.ep-step-group .step .content {
-  flex: 1;
-}
+.ep-step-group .step {
+  .content {
+    flex: 1;
+  }
 
-.ep-step-group .step::after {
-  display: none !important;
-}
+  &::after {
+    display: none !important;
+  }
 
-.ep-step-group .step::before {
-  width: 30px;
+  &::before {
+    width: 30px;
+  }
 }
 
 .ep-action-step {
@@ -16,8 +18,23 @@
   align-items: center;
   width: 100%;
   column-gap: 5px;
+
+  .description {
+    font-size: 1em !important;
+  }
 }
 
-.ep-action-step .description {
-  font-size: 1em !important;
+dl.ep-submission-details {
+  dt {
+    font-size: 0.9em;
+    color: @mutedTextColor;
+    margin-bottom: 2px;
+  }
+
+  dd {
+    .ep-details-note {
+      // A little bit darker than @mutedTextColor to distinguish from the labels
+      color: #555;
+    }
+  }
 }
diff --git a/site/cds_rdm/requests/ep_approval.py b/site/cds_rdm/requests/ep_approval.py
index 7ec021a8..84752324 100644
--- a/site/cds_rdm/requests/ep_approval.py
+++ b/site/cds_rdm/requests/ep_approval.py
@@ -346,11 +346,6 @@ class EPApprovalRequest(RDMBaseRequest):
         # Populated on accept by the system.
         "approved_report_number": fields.Str(load_default=None),
         # Form fields.
-        "experiment": fields.Str(required=True),
-        "submitted_by": fields.Str(required=True),
-        "role": fields.Str(required=True),
-        "publication_title": fields.Str(required=True),
-        "latest_version_url": fields.Str(load_default=None),
         "rapid_approval": fields.Bool(load_default=False),
         "cb_review_completed": fields.Bool(load_default=False),
         "cb_process_type": fields.Str(load_default=None),  # "standard" | "accelerated"
diff --git a/templates/semantic-ui/invenio_requests/ep-approval/index.html b/templates/semantic-ui/invenio_requests/ep-approval/index.html
index 3edf1596..61caead6 100644
--- a/templates/semantic-ui/invenio_requests/ep-approval/index.html
+++ b/templates/semantic-ui/invenio_requests/ep-approval/index.html
@@ -24,109 +24,80 @@
   {% set p = invenio_request.get("payload", {}) %}
 
   {% if p %}
-    <div class="ui styled fluid accordion rel-mt-1">
-      <div class="active title">
-        {{ _("Submission details") }}
-      </div>
-      <div class="active content">
-        {% if p.get("approved_report_number") %}
-          <dd class="ui positive message rel-mb-2">
-            <strong>{{ _("Approved report number:") }}</strong> {{ p.approved_report_number }}
+    <dl class="ui stackable grid ep-submission-details rel-mt-1">
+      {% if p.get("approved_report_number") %}
+        <div class="sixteen wide column">
+          <dt>{{ _("Approved report number") }}</dt>
+          <dd>
+            {{ p.approved_report_number }}
           </dd>
-        {% endif %}
-
-        <div class="ui grid rel-mt-1">
-          <dl class="details-list">
-            {% if p.get("experiment") %}
-              <dt class="ui tiny header">
-                {{ _("Experiment") }}
-              </dt>
-              <dd>
-                {{ p.experiment }}
-              </dd>
-            {% endif %}
-
-            {% if p.get("submitted_by") %}
-              <dt class="ui tiny header">
-                {{ _("Submitted by") }}
-              </dt>
-              <dd>
-                {{ p.submitted_by }}
-
-                {% if p.get("role") %}
-                  ({{ p.role }})
-                {% endif %}
-              </dd>
-            {% endif %}
-
-            {% if p.get("publication_title") %}
-              <dt class="ui tiny header">
-                {{ _("Publication title") }}
-              </dt>
-              <dd>
-                {{ p.publication_title }}
-              </dd>
-            {% endif %}
-          </dl>
-          <dl class="details-list">
-            <dt class="ui tiny header">
-              {{ _("Rapid approval") }}
-            </dt>
-            <dd>
-              {{ _("Requested") if p.get("rapid_approval") else _("Not requested") }}
-            </dd>
-
-            <dt class="ui tiny header">
-              {{ _("CB review completed") }}
-            </dt>
-            <dd>
-              {{ _("Yes") if p.get("cb_review_completed") else _("No") }}
-              {% if p.get("cb_review_completed") and p.get("cb_process_type") %}
-                ({{ p.cb_process_type }})
-              {% endif %}
-            </dd>
-
-            <dt class="ui tiny header">
-              {{ _("Paper signed by whole collaboration") }}
-            </dt>
-            <dd>
-              {{ _("Yes") if p.get("paper_signed") else _("No") }}
-              {% if not p.get("paper_signed") and p.get("num_non_signers") %}
-                <br/><small>{{ p.num_non_signers }} {{ _("non-signer(s)") }}</small>
-              {% endif %}
-            </dd>
-
-            {% if not p.get("paper_signed") %}
-              <dt>
-                {{ _("Controversy") }}
-              </dt>
-              <dd>
-                {{ _("Yes") if p.get("controversy") else _("No") }}
-              </dd>
-            {% endif %}
-          </dl>
         </div>
-
-        <dl class="details-list rel-mt-1">
-          {% if p.get("additional_communication") %}
-            <dt class="ui tiny header">
-              {{ _("Additional communication") }}
-            </dt>
-            <dt>
-              {{ p.additional_communication }}
-            </dt>
+      {% endif %}
+
+      <div class="three wide column">
+        <dt>{{ _("Rapid approval") }}</dt>
+        <dd>
+          {% if p.get("rapid_approval") %}
+            <strong>{{ _("Requested") }}</strong>
+          {% else %}
+            <span class="ep-details-note">{{ _("Not requested") }}</span>
           {% endif %}
-
-          {% if p.get("latest_version_url") %}
-            <dd class="rel-mt-1">
-              <a href="{{ p.latest_version_url }}" target="_blank" rel="noopener noreferrer">
-                {{ _("View latest record version") }}
-                <i class="icon external alternate small"></i>
-              </a>
-            </dd>
+        </dd>
+      </div>
+      <div class="three wide column">
+        <dt>{{ _("CB review completed") }}
+        <dd>
+          <i class="small {{ "green check" if p.get("cb_review_completed") else "red times" }} icon"></i>
+          {{ _("Yes") if p.get("cb_review_completed") else _("No") }}
+
+          {% if p.get("cb_review_completed") and p.get("cb_process_type") %}
+            <span class="ep-details-note">
+              ({{ p.cb_process_type }})
+            </span>
+          {% endif %}
+        </dd>
+      </div>
+      <div class="three wide column">
+        <dt>
+          {{ _("Paper signed by whole collaboration") }}
+        </dt>
+        <dd>
+          <i class="small {{ "green check" if p.get("paper_signed") else "red times" }} icon"></i>
+          {{ _("Yes") if p.get("paper_signed") else _("No") }}
+
+          {% if not p.get("paper_signed") and p.get("num_non_signers") %}
+            <span class="ep-details-note">
+              {{ p.num_non_signers }} {{ _("non-signer(s)") }}
+            </span>
           {% endif %}
-        </dl>
+        </dd>
       </div>
-    </div>
+      <div class="three wide column">
+        <dt>
+          {{ _("Controversy") }}
+        </dt>
+        <dd>
+          {% if p.get("controversy") %}
+            <strong>{{ _("Yes") }}</strong>
+          {% else %}
+            <span class="ep-details-note">
+              {{ _("No") }}
+            </span>
+          {% endif %}
+        </dd>
+      </div>
+      <div class="four wide column"></div>
+
+      {% if p.get("additional_communication") %}
+        <div class="twelve wide column">
+          <dt>
+            {{ _("Additional communication") }}
+          </dt>
+          <dd>
+            {{ p.additional_communication }}
+          </dd>
+        </div>
+      {% endif %}
+    </dl>
   {% endif %}
 {%- endblock request_header %}