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
folio-org · Dec 4, 2024 · 6ed1520 · 6ed1520
1 parent 0aaf3a0
commit 6ed1520
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 35 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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",