Access state for LabelValueMetadata from its own container

Author: marlo-longley

__tests__/src/components/LabelValueMetadata.test.js

@@ -1,14 +1,23 @@
 import { render, screen } from '@tests/utils/test-utils';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
 
+/** */
+function createWrapper(props) {
+  return render(
+    <LabelValueMetadata
+      {...props}
+    />,
+  );
+}
+
 /* eslint-disable testing-library/no-node-access */
 describe('LabelValueMetadata', () => {
   let wrapper;
-  let labelValuePair;
+  let labelValuePairs;
 
   describe('when the labelValuePair has content', () => {
     beforeEach(() => {
-      labelValuePair = [
+      labelValuePairs = [
         {
           label: 'Label 1',
           values: ['Value 1'],
@@ -18,9 +27,8 @@ describe('LabelValueMetadata', () => {
           values: ['Value 2', 'Value 3'],
         },
       ];
-      wrapper = render(
-        <LabelValueMetadata labelValuePairs={labelValuePair} />,
-      );
+
+      wrapper = createWrapper({ labelValuePairs });
     });
 
     it('renders a dt/dd for each label/value pair', () => {
@@ -38,32 +46,28 @@ describe('LabelValueMetadata', () => {
       expect(screen.getByText('Value 1')).toBeInTheDocument();
       expect(screen.getByText('Value 2, Value 3')).toBeInTheDocument();
     });
-  });
 
-  describe('when the labelValuePair has no content', () => {
-    beforeEach(() => {
-      labelValuePair = [];
-      wrapper = render(
-        <LabelValueMetadata labelValuePairs={labelValuePair} />,
-      );
+    it('uses the default labelValueJoiner from config', () => {
+      expect(screen.getByText('Value 2, Value 3')).toBeInTheDocument();
     });
+  });
 
+  describe('when the labelValuePair has no content', () => {
     it('renders an empty fragment instead of an empty dl', () => {
+      wrapper = createWrapper({ labelValuePairs: [] });
       expect(wrapper.container).toBeEmptyDOMElement();
     });
   });
 
   describe('when the labelValuePair has content and labelValueJoiner is set to a custom variable', () => {
     beforeEach(() => {
-      labelValuePair = [
+      labelValuePairs = [
         {
           label: 'Label 1',
           values: ['Value 1', 'Value 2'],
         },
       ];
-      wrapper = render(
-        <LabelValueMetadata labelValuePairs={labelValuePair} labelValueJoiner="*" />,
-      );
+      wrapper = createWrapper({ labelValueJoiner: '*', labelValuePairs });
     });
 
     it('renders a dt/dd for each label/value pair', () => {
@@ -83,7 +87,7 @@ describe('LabelValueMetadata', () => {
 
   describe('when the labelValuePair has a default label', () => {
     beforeEach(() => {
-      labelValuePair = [
+      labelValuePairs = [
         {
           values: ['Value 1'],
         },
@@ -92,9 +96,7 @@ describe('LabelValueMetadata', () => {
           values: ['Value 2'],
         },
       ];
-      wrapper = render(
-        <LabelValueMetadata labelValuePairs={labelValuePair} defaultLabel="Default label" />,
-      );
+      createWrapper({ defaultLabel: 'Default label', labelValuePairs });
     });
 
     it('renders correct labels in dt', () => {

src/components/AttributionPanel.jsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Img } from 'react-image';
 import CompanionWindow from '../containers/CompanionWindow';
 import { CompanionWindowSection } from './CompanionWindowSection';
-import { LabelValueMetadata } from './LabelValueMetadata';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
 import ns from '../config/css-ns';
 import { PluginHook } from './PluginHook';
 
@@ -28,7 +28,6 @@ export function AttributionPanel({
   rights = null,
   windowId,
   id,
-  labelValueJoiner,
 }) {
   const { t } = useTranslation();
 
@@ -43,7 +42,7 @@ export function AttributionPanel({
     >
       <CompanionWindowSection>
         { requiredStatement && (
-        <LabelValueMetadata labelValuePairs={requiredStatement} labelValueJoiner={labelValueJoiner} defaultLabel={t('attribution')} />
+        <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />
         )}
         {
             rights && rights.length > 0 && (
@@ -88,5 +87,4 @@ AttributionPanel.propTypes = {
   })),
   rights: PropTypes.arrayOf(PropTypes.string),
   windowId: PropTypes.string.isRequired,
-  labelValueJoiner: PropTypes.string,
 };

src/components/CanvasInfo.jsx

@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import SanitizedHtml from '../containers/SanitizedHtml';
-import { LabelValueMetadata } from './LabelValueMetadata';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
 import { PluginHook } from './PluginHook';
 
 /**
@@ -16,7 +16,6 @@ export function CanvasInfo({
   canvasMetadata = [],
   index = 1,
   totalSize = 1,
-  labelValueJoiner,
 }) {
   const { t } = useTranslation();
   const id = useId();
@@ -48,7 +47,7 @@ export function CanvasInfo({
       )}
 
       {canvasMetadata && canvasMetadata.length > 0 && (
-        <LabelValueMetadata labelValuePairs={canvasMetadata} labelValueJoiner={labelValueJoiner} />
+        <LabelValueMetadata labelValuePairs={canvasMetadata} />
       )}
       <PluginHook targetName="CanvasInfo" {...pluginProps} />
     </CollapsibleSection>
@@ -61,5 +60,4 @@ CanvasInfo.propTypes = {
   canvasMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
   index: PropTypes.number,
   totalSize: PropTypes.number,
-  labelValueJoiner: PropTypes.string,
 };

src/components/CollectionDialog.jsx

@@ -16,7 +16,7 @@ import Skeleton from '@mui/material/Skeleton';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import asArray from '../lib/asArray';
-import { LabelValueMetadata } from './LabelValueMetadata';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
 import ManifestInfo from '../containers/ManifestInfo';
@@ -67,7 +67,7 @@ Placeholder.propTypes = {
  */
 export function CollectionDialog({
   addWindow, collection = null, dialogCollectionPath = [], error = null, hideCollectionDialog,
-  isMultipart = false, manifest, manifestId, ready = false, labelValueJoiner,
+  isMultipart = false, manifest, manifestId, ready = false,
   setWorkspaceAddVisibility, showCollectionDialog, updateWindow, windowId = null,
 }) {
   const container = useContext(WorkspaceContext);
@@ -161,7 +161,7 @@ export function CollectionDialog({
             label={t('attributionTitle')}
           >
             { requiredStatement && (
-              <LabelValueMetadata labelValuePairs={requiredStatement} labelValueJoiner={labelValueJoiner} defaultLabel={t('attribution')} />
+              <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />
             )}
             {
               rights && rights.length > 0 && (
@@ -241,5 +241,4 @@ CollectionDialog.propTypes = {
   showCollectionDialog: PropTypes.func.isRequired,
   updateWindow: PropTypes.func.isRequired,
   windowId: PropTypes.string,
-  labelValueJoiner: PropTypes.string,
 };

src/components/LabelValueMetadata.jsx

@@ -7,7 +7,8 @@ import ns from '../config/css-ns';
  * Renders label/value pair metadata in a dl
  * @prop {object} labelValuePair
  */
-export function LabelValueMetadata({ defaultLabel = undefined, labelValuePairs, labelValueJoiner = ', '}) {
+export function LabelValueMetadata({ defaultLabel = undefined, labelValuePairs, labelValueJoiner=', ' }) {
+  
   if (labelValuePairs.length === 0) {
     return null;
   }
@@ -33,6 +34,5 @@ LabelValueMetadata.propTypes = {
   labelValuePairs: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     values: PropTypes.arrayOf(PropTypes.string),
-    labelValueJoiner: PropTypes.string
   })).isRequired,
 };

src/components/ManifestInfo.jsx

@@ -4,15 +4,14 @@ import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import SanitizedHtml from '../containers/SanitizedHtml';
-import { LabelValueMetadata } from './LabelValueMetadata';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
 import { PluginHook } from './PluginHook';
 
 /**
  * ManifestInfo
  */
 export function ManifestInfo({
   manifestDescription = null, manifestLabel = null, manifestMetadata = [], manifestSummary = null,
-  labelValueJoiner,
   ...rest
 }) {
   const { t } = useTranslation();
@@ -50,7 +49,7 @@ export function ManifestInfo({
       )}
 
       {manifestMetadata.length > 0 && (
-        <LabelValueMetadata labelValuePairs={manifestMetadata} labelValueJoiner={labelValueJoiner} />
+        <LabelValueMetadata labelValuePairs={manifestMetadata} />
       )}
 
       <PluginHook targetName="ManifestInfo" {...pluginProps} />
@@ -63,5 +62,4 @@ ManifestInfo.propTypes = {
   manifestLabel: PropTypes.string,
   manifestMetadata: PropTypes.array, // eslint-disable-line react/forbid-prop-types
   manifestSummary: PropTypes.string,
-  labelValueJoiner: PropTypes.string
 };

src/config/settings.js

@@ -582,5 +582,5 @@ export default {
       { profile: 'http://iiif.io/api/auth/0/login' }
     ]
   },
-  labelValueJoiner: ", "
+  labelValueJoiner: ', '
 };

src/containers/AttributionPanel.js

@@ -4,7 +4,6 @@ import {
   getManifestLogo,
   getRequiredStatement,
   getRights,
-  getConfig,
 } from '../state/selectors';
 import { withPlugins } from '../extend/withPlugins';
 import { AttributionPanel } from '../components/AttributionPanel';
@@ -15,7 +14,6 @@ import { AttributionPanel } from '../components/AttributionPanel';
  * @private
  */
 const mapStateToProps = (state, { id, windowId }) => ({
-  labelValueJoiner: getConfig(state).labelValueJoiner,
   manifestLogo: getManifestLogo(state, { windowId }),
   requiredStatement: getRequiredStatement(state, { windowId }),
   rights: getRights(state, { windowId }),

src/containers/CanvasInfo.js

@@ -6,7 +6,6 @@ import {
   getCanvas,
   getCanvasLabel,
   getCanvasDescription,
-  getConfig,
 } from '../state/selectors';
 import { CanvasInfo } from '../components/CanvasInfo';
 
@@ -21,7 +20,6 @@ const mapStateToProps = (state, { canvasId, companionWindowId, windowId }) => ({
   canvasMetadata: getDestructuredMetadata(
     getCanvas(state, { canvasId, companionWindowId, windowId }),
   ),
-  labelValueJoiner: getConfig(state).labelValueJoiner,
 });
 
 const enhance = compose(

src/containers/CollectionDialog.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
-  getManifest, getManifestoInstance, getSequenceBehaviors, getWindow, getConfig,
+  getManifest, getManifestoInstance, getSequenceBehaviors, getWindow,
 } from '../state/selectors';
 import { CollectionDialog } from '../components/CollectionDialog';
 
@@ -37,7 +37,6 @@ const mapStateToProps = (state, { windowId }) => {
     dialogCollectionPath,
     error: manifest && manifest.error,
     isMultipart: getSequenceBehaviors(state, { manifestId }).includes('multi-part'),
-    labelValueJoiner: getConfig(state).labelValueJoiner,
     manifest: manifest && getManifestoInstance(state, { manifestId }),
     manifestId,
     open: state.workspace.collectionDialogOn,