UISACQCOMP-231: Display system change label for version cards

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Move reusable version history components to the ACQ lib. Refs UISACQCOMP-230.
 * Move reusable helper function to support version history functionality. Refs UISACQCOMP-232.
 * 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)

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,

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);

lib/VersionHistory/getVersionMetadata.js

@@ -3,5 +3,5 @@ import get from 'lodash/get';
 export const getVersionMetadata = (version, entity) => ({
   ...get(entity, 'metadata', {}),
   updatedByUserId: version?.userId,
-  updatedDate: version?.actionDate,
+  updatedDate: version?.eventDate,
 });

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",