From cb37f86584698551bb34d0ad4ad9c62c63cbf91e Mon Sep 17 00:00:00 2001
From: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>
Date: Fri, 26 Apr 2024 16:47:31 +0200
Subject: [PATCH] ui: add published date to preview header

Signed-off-by: Miguel Garcia Garcia <miguel.garcia.garcia@cern.ch>
---
 .../fixtures/schemas/cms-questionnaire.json   |  3 ++
 .../components/DraftHeader/DraftHeader.js     |  4 +-
 .../src/antd/published/components/Preview.js  | 44 ++++++++++++++++---
 .../src/antd/published/containers/Preview.js  |  8 ++--
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/cap/modules/fixtures/schemas/cms-questionnaire.json b/cap/modules/fixtures/schemas/cms-questionnaire.json
index 1c32c9c501..36a2318496 100644
--- a/cap/modules/fixtures/schemas/cms-questionnaire.json
+++ b/cap/modules/fixtures/schemas/cms-questionnaire.json
@@ -1830,6 +1830,9 @@
         "ui:order": ["options", "comments"]
       },
       "fitting_model": {
+        "comments": {
+          "ui:widget": "textarea"
+        },
         "ui:order": ["options", "comments"]
       },
       "stats": {
diff --git a/ui/cap-react/src/antd/drafts/components/DraftHeader/DraftHeader.js b/ui/cap-react/src/antd/drafts/components/DraftHeader/DraftHeader.js
index c9ef15b0e9..18b6827fca 100644
--- a/ui/cap-react/src/antd/drafts/components/DraftHeader/DraftHeader.js
+++ b/ui/cap-react/src/antd/drafts/components/DraftHeader/DraftHeader.js
@@ -39,7 +39,9 @@ const DraftHeader = ({
             newText.trim() != "" && updateGeneralTitle(newText)
           }
         />
-        {!canEdit(canAdmin, canUpdate) && <Tag color="gold">READ ONLY</Tag>}
+        {!canEdit(canAdmin, canUpdate) && (
+          <Tag color="gold-inverse">Read-only</Tag>
+        )}
       </Space>
       <Space size="middle">
         {!screens.lg && (
diff --git a/ui/cap-react/src/antd/published/components/Preview.js b/ui/cap-react/src/antd/published/components/Preview.js
index 24851cc023..bfdbd8310b 100644
--- a/ui/cap-react/src/antd/published/components/Preview.js
+++ b/ui/cap-react/src/antd/published/components/Preview.js
@@ -4,12 +4,27 @@ import { transformSchema } from "../../partials/Utils/schema";
 import { COLLECTION_BASE } from "../../routes";
 import { shouldDisplayTabButton } from "../utils";
 import SideBar from "./SideBar";
-import { EditOutlined } from "@ant-design/icons";
-import { Space, Tag, Button, Row, Col, Radio, Grid, Layout } from "antd";
+import {
+  EditOutlined,
+  ExportOutlined,
+  InfoCircleOutlined,
+} from "@ant-design/icons";
+import {
+  Space,
+  Tag,
+  Button,
+  Row,
+  Col,
+  Radio,
+  Grid,
+  Layout,
+  Tooltip,
+} from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import PropTypes from "prop-types";
 import { useState } from "react";
 import { Link } from "react-router-dom";
+import dayjs from "dayjs";
 
 const Preview = ({
   history,
@@ -21,6 +36,7 @@ const Preview = ({
   id,
   metadata = { general_title: "" },
   schemas = { schema: {}, uiSchema: {} },
+  updated,
 }) => {
   const [display, setDisplay] = useState(
     schemas.uiSchema["ui:object"] == "tabView" ? "tabView" : "list"
@@ -39,19 +55,36 @@ const Preview = ({
           <Space direction="vertical">
             {metadata.general_title}
             <Space style={{ width: "100%" }} wrap>
-              <Tag color="purple">Published</Tag>
-              <Tag>{id}</Tag>
+              <Tag bordered={false} color="purple-inverse">
+                Published
+              </Tag>
+              <Tag bordered={false} color="magenta">
+                {id}
+              </Tag>
               {schemaType && (
                 <Link
                   to={`${COLLECTION_BASE}/${schemaType.name}/${
                     schemaType.version || ""
                   }`}
                 >
-                  <Tag color="geekblue">
+                  <Tag
+                    bordered={false}
+                    color="geekblue"
+                    icon={<ExportOutlined />}
+                  >
                     {schemaType.fullname} v{schemaType.version}
                   </Tag>
                 </Link>
               )}
+              <Tooltip
+                title={`Last publication: ${dayjs(updated).format(
+                  "DD/MM/YYYY HH:mm:ss"
+                )}`}
+              >
+                <Tag bordered={false} icon={<InfoCircleOutlined />}>
+                  {dayjs(updated).format("DD/MM/YYYY")}
+                </Tag>
+              </Tooltip>
             </Space>
           </Space>
         }
@@ -146,6 +179,7 @@ Preview.propTypes = {
   canUpdate: PropTypes.bool,
   files: PropTypes.object,
   status: PropTypes.string,
+  updated: PropTypes.string,
 };
 
 export default Preview;
diff --git a/ui/cap-react/src/antd/published/containers/Preview.js b/ui/cap-react/src/antd/published/containers/Preview.js
index 708cd62994..6f5baa9d7e 100644
--- a/ui/cap-react/src/antd/published/containers/Preview.js
+++ b/ui/cap-react/src/antd/published/containers/Preview.js
@@ -10,12 +10,10 @@ const mapStateToProps = state => ({
   files: state.published.get("files"),
   schemas: state.published.get("schemas"),
   schemaType: state.published.get("schema"),
-  status: state.published.get("status")
+  status: state.published.get("status"),
+  updated: state.published.get("updated"),
 });
 
 const mapDispatchToProps = {};
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Preview);
+export default connect(mapStateToProps, mapDispatchToProps)(Preview);