From 6ed1520e450d64f18ad5be881c2b3014e6d126e7 Mon Sep 17 00:00:00 2001
From: Alisher Musurmonov <alisher_musurmonov1@epam.com>
Date: Mon, 2 Dec 2024 16:01:13 +0500
Subject: [PATCH] UISACQCOMP-231: Display system change label for version cards
 (#836)

* UISACQCOMP-231: Display system change label for version cards

* test: fix failing test

* refactor: simplify changed version card message logic

* revert test changes
---
 CHANGELOG.md                                  |  1 +
 lib/VersionHistory/VersionCard/VersionCard.js | 75 ++++++++++++-------
 .../VersionHistoryPane/VersionHistoryPane.js  | 13 ++--
 lib/VersionHistory/getVersionMetadata.js      |  7 ++
 translations/stripes-acq-components/en.json   |  1 +
 5 files changed, 62 insertions(+), 35 deletions(-)
 create mode 100644 lib/VersionHistory/getVersionMetadata.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f862d458..37e312c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## (6.1.0 IN PROGRESS)
 
 * Add `useDebouncedQuery` hook to fix endless request for `DynamicSelection` component. Refs UISACQCOMP-233.
+* Display system change label for version cards. Refs UISACQCOMP-231.
 
 ## [6.0.1](https://github.com/folio-org/stripes-acq-components/tree/v6.0.1) (2024-11-14)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v6.0.0...v6.0.1)
diff --git a/lib/VersionHistory/VersionCard/VersionCard.js b/lib/VersionHistory/VersionCard/VersionCard.js
index 79a61367..86b718e7 100644
--- a/lib/VersionHistory/VersionCard/VersionCard.js
+++ b/lib/VersionHistory/VersionCard/VersionCard.js
@@ -16,10 +16,11 @@ import css from './VersionCard.css';
 const itemFormatter = (item, i) => (<li key={i} className={css.changedRecord}>{item}</li>);
 
 const VersionCard = ({
-  changedFields,
+  changedFields = [],
   id,
   isCurrent,
   isLatest,
+  isOriginal,
   onSelect,
   source,
   title,
@@ -62,6 +63,49 @@ const VersionCard = ({
     </Tooltip>
   ), [id, isCurrent, onSelectVersion, tooltip]);
 
+  const message = useMemo(() => {
+    if (isOriginal) {
+      return (
+        <b>
+          <FormattedMessage
+            id="stripes-acq-components.versionHistory.card.version.original"
+            tagName="em"
+          />
+        </b>
+      );
+    }
+
+    if (changedFields?.length) {
+      return (
+        <>
+          <FormattedMessage
+            id="stripes-acq-components.versionHistory.card.changed"
+            tagName="b"
+          />
+          <List
+            items={uniq(changedFields)}
+            itemFormatter={itemFormatter}
+            listClass={css.changedRecordsList}
+            listStyle="bullets"
+          />
+        </>
+      );
+    }
+
+    return (
+      <>
+        <FormattedMessage
+          id="stripes-acq-components.versionHistory.card.changed"
+          tagName="b"
+        />
+        <FormattedMessage
+          id="stripes-acq-components.versionHistory.card.systemChange"
+          tagName="div"
+        />
+      </>
+    );
+  }, [changedFields, isOriginal]);
+
   return (
     <Card
       id={`version-card-${id}`}
@@ -84,33 +128,7 @@ const VersionCard = ({
         </span>
       )}
 
-      <span>
-        {
-          changedFields
-            ? (
-              <>
-                <FormattedMessage
-                  id="stripes-acq-components.versionHistory.card.changed"
-                  tagName="b"
-                />
-                <List
-                  items={uniq(changedFields)}
-                  itemFormatter={itemFormatter}
-                  listClass={css.changedRecordsList}
-                  listStyle="bullets"
-                />
-              </>
-            )
-            : (
-              <b>
-                <FormattedMessage
-                  id="stripes-acq-components.versionHistory.card.version.original"
-                  tagName="em"
-                />
-              </b>
-            )
-        }
-      </span>
+      <span>{message}</span>
     </Card>
   );
 };
@@ -120,6 +138,7 @@ VersionCard.propTypes = {
   id: PropTypes.string.isRequired,
   isCurrent: PropTypes.bool,
   isLatest: PropTypes.bool,
+  isOriginal: PropTypes.bool,
   onSelect: PropTypes.func.isRequired,
   source: PropTypes.node.isRequired,
   title: PropTypes.node.isRequired,
diff --git a/lib/VersionHistory/VersionHistoryPane/VersionHistoryPane.js b/lib/VersionHistory/VersionHistoryPane/VersionHistoryPane.js
index 17bf8887..1491053e 100644
--- a/lib/VersionHistory/VersionHistoryPane/VersionHistoryPane.js
+++ b/lib/VersionHistory/VersionHistoryPane/VersionHistoryPane.js
@@ -26,7 +26,7 @@ const VersionHistoryPane = ({
   isLoading: isLoadingProp,
   onClose,
   onSelectVersion,
-  hiddenFields,
+  hiddenFields = [],
   labelsMap,
   versions,
 }) => {
@@ -54,7 +54,7 @@ const VersionHistoryPane = ({
   const versionCards = useMemo(() => (
     versionsToDisplay.map(({
       id: versionId,
-      actionDate,
+      eventDate,
       userId,
     }, i) => {
       const user = usersMap[userId];
@@ -65,6 +65,8 @@ const VersionHistoryPane = ({
         hiddenFields,
       );
 
+      const isOriginal = i === versionsToDisplay.length - 1 && !changedFields?.length;
+
       const source = (
         <FormattedMessage
           id="stripes-components.metaSection.source"
@@ -82,8 +84,9 @@ const VersionHistoryPane = ({
           id={versionId}
           isCurrent={versionId === currentVersion}
           isLatest={i === 0}
+          isOriginal={isOriginal}
           onSelect={onSelectVersion}
-          title={<FolioFormattedTime dateString={actionDate} />}
+          title={<FolioFormattedTime dateString={eventDate} />}
           source={source}
           changedFields={changedFields}
         />
@@ -143,8 +146,4 @@ VersionHistoryPane.propTypes = {
   versions: PropTypes.arrayOf(PropTypes.object).isRequired,
 };
 
-VersionHistoryPane.defaultProps = {
-  hiddenFields: [],
-};
-
 export default memo(VersionHistoryPane);
diff --git a/lib/VersionHistory/getVersionMetadata.js b/lib/VersionHistory/getVersionMetadata.js
new file mode 100644
index 00000000..cbc08fb8
--- /dev/null
+++ b/lib/VersionHistory/getVersionMetadata.js
@@ -0,0 +1,7 @@
+import get from 'lodash/get';
+
+export const getVersionMetadata = (version, entity) => ({
+  ...get(entity, 'metadata', {}),
+  updatedByUserId: version?.userId,
+  updatedDate: version?.eventDate,
+});
diff --git a/translations/stripes-acq-components/en.json b/translations/stripes-acq-components/en.json
index c642972f..2f31ec2a 100644
--- a/translations/stripes-acq-components/en.json
+++ b/translations/stripes-acq-components/en.json
@@ -217,6 +217,7 @@
   "validation.shouldBeGreaterThan": "Value must be greater than or equal to {minNumber}",
 
   "versionHistory.card.changed": "Changed",
+  "versionHistory.card.systemChange": "System maintenance update",
   "versionHistory.card.select.tooltip": "View this version",
   "versionHistory.card.version.current": "Current version",
   "versionHistory.card.version.original": "Original version",