UISACQCOMP-230 Move reusable version history components to the ACQ lib

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## (6.1.0 IN PROGRESS)
 
 * Add more reusable hooks and utilities. Refs UISACQCOMP-228.
+* Move reusable version history components to the ACQ lib. Refs UISACQCOMP-230.
 
 ## (6.0.1 IN PROGRESS)
 

lib/VersionHistory/components/VersionCheckbox/VersionCheckbox.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import { useContext, useMemo } from 'react';
+
+import { Checkbox } from '@folio/stripes/components';
+
+import { VersionViewContext } from '../../VersionViewContext';
+
+export const VersionCheckbox = ({
+  checked,
+  label,
+  name,
+  ...props
+}) => {
+  const versionContext = useContext(VersionViewContext);
+  const isUpdated = useMemo(() => (
+    versionContext?.paths?.includes(name)
+  ), [name, versionContext?.paths]);
+
+  const checkboxLabel = isUpdated ? <mark>{label}</mark> : label;
+
+  return (
+    <Checkbox
+      checked={Boolean(checked)}
+      disabled
+      label={checkboxLabel}
+      vertical
+      {...props}
+    />
+  );
+};
+
+VersionCheckbox.defaultProps = {
+  checked: false,
+};
+
+VersionCheckbox.propTypes = {
+  checked: PropTypes.bool,
+  label: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired,
+};

lib/VersionHistory/components/VersionCheckbox/index.js

@@ -0,0 +1 @@
+export { VersionCheckbox } from './VersionCheckbox';

lib/VersionHistory/components/VersionKeyValue/VersionKeyValue.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import {
+  useContext,
+  useMemo,
+} from 'react';
+
+import {
+  KeyValue,
+  NoValue,
+} from '@folio/stripes/components';
+
+import { VersionViewContext } from '../../VersionViewContext';
+
+export const VersionKeyValue = ({
+  children,
+  label,
+  multiple,
+  name,
+  value,
+}) => {
+  const versionContext = useContext(VersionViewContext);
+  const isUpdated = useMemo(() => (
+    multiple
+      ? versionContext?.paths?.find((field) => new RegExp(`^${name}\\[\\d\\]$`).test(field))
+      : versionContext?.paths?.includes(name)
+  ), [multiple, name, versionContext?.paths]);
+
+  const content = (children || value) || <NoValue />;
+  const displayValue = isUpdated ? <mark>{content}</mark> : content;
+
+  return (
+    <KeyValue
+      label={label}
+      value={displayValue}
+    />
+  );
+};
+
+VersionKeyValue.defaultProps = {
+  multiple: false,
+};
+
+VersionKeyValue.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.node.isRequired,
+  multiple: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.node,
+};

lib/VersionHistory/components/VersionKeyValue/index.js

@@ -0,0 +1 @@
+export { VersionKeyValue } from './VersionKeyValue';

lib/VersionHistory/components/VersionView/VersionView.js

@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import {
+  memo,
+  useMemo,
+} from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Layout,
+  LoadingPane,
+  Pane,
+  PaneMenu,
+} from '@folio/stripes/components';
+
+import { TagsBadge } from '../../../Tags';
+import { VersionHistoryButton } from '../../VersionHistoryButton';
+
+const VersionView = ({
+  children,
+  id,
+  isLoading,
+  onClose,
+  tags,
+  versionId,
+  ...props
+}) => {
+  const isVersionExist = Boolean(versionId && !isLoading);
+
+  const lastMenu = useMemo(() => (
+    <PaneMenu>
+      {tags && (
+        <TagsBadge
+          disabled
+          tagsQuantity={tags.length}
+        />
+      )}
+      <VersionHistoryButton disabled />
+    </PaneMenu>
+  ), [tags]);
+
+  if (isLoading) return <LoadingPane />;
+
+  return (
+    <Pane
+      id={`${id}-version-view`}
+      defaultWidth="fill"
+      onClose={onClose}
+      lastMenu={lastMenu}
+      {...props}
+    >
+      {
+        isVersionExist
+          ? children
+          : (
+            <Layout
+              element="span"
+              className="flex centerContent"
+            >
+              <FormattedMessage id="stripes-acq-components.versionHistory.noVersion" />
+            </Layout>
+          )
+      }
+    </Pane>
+  );
+};
+
+VersionView.propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool,
+  onClose: PropTypes.func,
+  tags: PropTypes.arrayOf(PropTypes.object),
+  versionId: PropTypes.string,
+};
+
+export default memo(VersionView);

lib/VersionHistory/components/VersionView/index.js

@@ -0,0 +1 @@
+export { default as VersionView } from './VersionView';

lib/VersionHistory/components/index.js

@@ -0,0 +1,3 @@
+export { VersionCheckbox } from './VersionCheckbox';
+export { VersionKeyValue } from './VersionKeyValue';
+export { VersionView } from './VersionView';

lib/VersionHistory/index.js

@@ -1,3 +1,4 @@
+export * from './components';
 export { getFieldLabels } from './getFieldLabels';
 export { getHighlightedFields } from './getHighlightedFields';
 export * from './hooks';

lib/constants/api.js

@@ -1,6 +1,7 @@
 export const ACQUISITION_METHODS_API = 'orders/acquisition-methods';
 export const ACQUISITIONS_UNITS_API = 'acquisitions-units/units';
 export const ACQUISITIONS_UNIT_MEMBERSHIPS_API = 'acquisitions-units/memberships';
+export const AUDIT_ACQ_EVENTS_API = 'audit-data/acquisition';
 export const BATCH_GROUPS_API = 'batch-groups';
 export const BUDGETS_API = 'finance/budgets';
 export const CAMPUSES_API = 'location-units/campuses';

lib/hooks/useOrganization/useOrganization.js

@@ -23,7 +23,7 @@ export const useOrganization = (id, options = {}) => {
     isLoading,
   } = useQuery({
     queryKey: [namespace, id, tenantId],
-    queryFn: () => ky.get(`${VENDORS_API}/${id}`).json(),
+    queryFn: ({ signal }) => ky.get(`${VENDORS_API}/${id}`, { signal }).json(),
     enabled: enabled && Boolean(id),
     ...queryOptions,
   });

translations/stripes-acq-components/en.json

@@ -221,6 +221,7 @@
   "versionHistory.card.version.current": "Current version",
   "versionHistory.card.version.original": "Original version",
   "versionHistory.deletedRecord": "Record deleted",
+  "versionHistory.noVersion": "No version history to display.",
   "versionHistory.pane.header": "Version history",
   "versionHistory.pane.sub": "{count, plural, one {# version} other {# versions}}",