feat(ep): redesign request page UI; remove record metadata fields

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 && (

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 ? (

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)")}

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;
+    }
+  }
 }

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"