Merge pull request #1923 from ProjectMirador/render-html-content-in-info-panel

Render HTML content in info panel. Closes #1854

__tests__/src/components/LabelValueMetadata.test.js

 import React from 'react';
 import { shallow } from 'enzyme';
+import SanitizedHtml from '../../../src/components/SanitizedHtml';
 import LabelValueMetadata from '../../../src/components/LabelValueMetadata';
 
 describe('LabelValueMetadata', () => {
@@ -25,14 +26,23 @@ describe('LabelValueMetadata', () => {
 
     it('renders a dt/dd for each label/value pair', () => {
       expect(wrapper.find('dl').length).toEqual(1);
-
       expect(wrapper.find('dt').length).toEqual(2);
+      expect(wrapper.find('dd').length).toEqual(2);
+    });
+
+    it('renders correct labels in dt', () => {
       expect(wrapper.find('dt').first().text()).toEqual('Label 1');
       expect(wrapper.find('dt').last().text()).toEqual('Label 2');
+    });
 
-      expect(wrapper.find('dd').length).toEqual(2);
-      expect(wrapper.find('dd').first().text()).toEqual('Value 1');
-      expect(wrapper.find('dd').last().text()).toEqual('Value 2');
+    it('renders SanitizedHtml component in dt for each value', () => {
+      expect(wrapper.find('dd').first().find(SanitizedHtml).length).toBe(1);
+      expect(wrapper.find('dd').last().find(SanitizedHtml).length).toBe(1);
+    });
+
+    it('passes value string to SanitizedHtml', () => {
+      expect(wrapper.find(SanitizedHtml).first().props().htmlString).toBe('Value 1');
+      expect(wrapper.find(SanitizedHtml).last().props().htmlString).toBe('Value 2');
     });
   });
 

__tests__/src/components/WindowSideBarInfoPanel.test.js

@@ -2,9 +2,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
 import WindowSideBarInfoPanel from '../../../src/components/WindowSideBarInfoPanel';
+import SanitizedHtml from '../../../src/components/SanitizedHtml';
 import LabelValueMetadata from '../../../src/components/LabelValueMetadata';
 
 describe('WindowSideBarInfoPanel', () => {
+  const metadata = [{ label: {}, value: {} }];
   let wrapper;
 
   describe('when metadata is present', () => {
@@ -13,43 +15,73 @@ describe('WindowSideBarInfoPanel', () => {
         <WindowSideBarInfoPanel
           canvasLabel="The Canvas Label"
           canvasDescription="The Canvas Description"
-          canvasMetadata={[{ label: {}, value: {} }]}
+          canvasMetadata={metadata}
           manifestLabel="The Manifest Label"
           manifestDescription="The Manifest Description"
+          manifestMetadata={metadata}
+          t={str => str}
         />,
       ).dive();
     });
 
-    it('renders canvas level label, description, and metadata', () => {
+    it('renders header', () => {
       expect(
-        wrapper.find('WithStyles(Typography)[variant="h3"]').first().matchesElement(
+        wrapper.find(Typography).at(0).matchesElement(
+          <Typography>aboutThisItem</Typography>,
+        ),
+      ).toBe(true);
+    });
+
+    it('renders canvas label', () => {
+      expect(
+        wrapper.find(Typography).at(1).matchesElement(
           <Typography>The Canvas Label</Typography>,
         ),
       ).toBe(true);
+    });
 
+    it('renders canvas description in SanitizedHtml component', () => {
       expect(
-        wrapper.find('WithStyles(Typography)[variant="body2"]').first().matchesElement(
-          <Typography>The Canvas Description</Typography>,
+        wrapper.find(Typography).at(2).matchesElement(
+          <Typography>
+            <SanitizedHtml htmlString="The Canvas Description" ruleSet="iiif" />
+          </Typography>,
         ),
       ).toBe(true);
+    });
 
-      expect(wrapper.find(LabelValueMetadata).length).toBe(2); // one for canvas one for manifest
+    it('renders canvas metadata in LabelValueMetadata component', () => {
+      expect(
+        wrapper.find(LabelValueMetadata).at(0).matchesElement(
+          <LabelValueMetadata labelValuePairs={metadata} />,
+        ),
+      ).toBe(true);
     });
 
-    it('renders manifest level label, description, and metadata', () => {
+    it('renders manifest label', () => {
       expect(
-        wrapper.find('WithStyles(Typography)[variant="h3"]').last().matchesElement(
+        wrapper.find(Typography).at(3).matchesElement(
           <Typography>The Manifest Label</Typography>,
         ),
       ).toBe(true);
+    });
 
+    it('renders manifest description in SanitizedHtml component', () => {
       expect(
-        wrapper.find('WithStyles(Typography)[variant="body2"]').last().matchesElement(
-          <Typography>The Manifest Description</Typography>,
+        wrapper.find(Typography).at(4).matchesElement(
+          <Typography>
+            <SanitizedHtml htmlString="The Manifest Description" ruleSet="iiif" />
+          </Typography>,
         ),
       ).toBe(true);
+    });
 
-      expect(wrapper.find(LabelValueMetadata).length).toBe(2); // one for canvas one for manifest
+    it('renders manifest metadata in LabelValueMetadata component', () => {
+      expect(
+        wrapper.find(LabelValueMetadata).at(1).matchesElement(
+          <LabelValueMetadata labelValuePairs={metadata} />,
+        ),
+      ).toBe(true);
     });
   });
 
@@ -60,15 +92,17 @@ describe('WindowSideBarInfoPanel', () => {
       ).dive();
     });
 
-    it('does not render empty elements', () => {
+    it('does render header', () => {
       expect(
-        wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement(
+        wrapper.find(Typography).first().matchesElement(
           <Typography>aboutThisItem</Typography>,
         ),
       ).toBe(true);
+    });
 
-      expect(wrapper.find('WithStyles(Typography)[variant="h3"]').length).toEqual(0);
-      expect(wrapper.find('WithStyles(Typography)[variant="body2"]').length).toEqual(0);
+    it('does not render empty elements elements', () => {
+      expect(wrapper.find(Typography).length).toBe(1); // only header element
+      expect(wrapper.find(LabelValueMetadata).length).toBe(0);
     });
   });
 });

src/components/LabelValueMetadata.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import SanitizedHtml from './SanitizedHtml';
 
 /**
  * Renders label/value pair metadata in a dl
@@ -24,8 +25,12 @@ class LabelValueMetadata extends Component {
     return (
       <dl>
         {labelValuePairs.reduce((acc, labelValuePair, i) => acc.concat([
-          <dt key={`label-${i}`}>{labelValuePair.label}</dt>,
-          <dd key={`value-${i}`}>{labelValuePair.value}</dd>,
+          <dt key={`label-${i}`}>
+            {labelValuePair.label}
+          </dt>,
+          <dd key={`value-${i}`}>
+            <SanitizedHtml htmlString={labelValuePair.value} ruleSet="iiif" />
+          </dd>,
         ]), [])}
       </dl>
     );

src/components/WindowSideBarInfoPanel.js

@@ -4,8 +4,10 @@ import Divider from '@material-ui/core/Divider';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import LabelValueMetadata from './LabelValueMetadata';
+import SanitizedHtml from './SanitizedHtml';
 import ns from '../config/css-ns';
 
+
 /**
  * WindowSideBarInfoPanel
  */
@@ -25,16 +27,48 @@ class WindowSideBarInfoPanel extends Component {
       manifestMetadata,
       t,
     } = this.props;
+
     return (
       <div className={ns('window-sidebar-info-panel')}>
-        <Typography variant="h2" className={classes.windowSideBarH2}>{t('aboutThisItem')}</Typography>
-        {canvasLabel && <Typography variant="h3" className={classes.windowSideBarH3}>{canvasLabel}</Typography>}
-        {canvasDescription && <Typography variant="body2">{canvasDescription}</Typography>}
-        {canvasMetadata && <LabelValueMetadata labelValuePairs={canvasMetadata} />}
+
+        <Typography variant="h2" className={classes.windowSideBarH2}>
+          {t('aboutThisItem')}
+        </Typography>
+
+        {canvasLabel && (
+          <Typography variant="h3" className={classes.windowSideBarH3}>
+            {canvasLabel}
+          </Typography>
+        )}
+
+        {canvasDescription && (
+          <Typography variant="body2">
+            <SanitizedHtml htmlString={canvasDescription} ruleSet="iiif" />
+          </Typography>
+        )}
+
+        {canvasMetadata.length > 0 && (
+          <LabelValueMetadata labelValuePairs={canvasMetadata} />
+        )}
+
         <Divider />
-        {manifestLabel && <Typography variant="h3" className={classes.windowSideBarH3}>{manifestLabel}</Typography>}
-        {manifestDescription && <Typography variant="body2">{manifestDescription}</Typography>}
-        {manifestMetadata && <LabelValueMetadata labelValuePairs={manifestMetadata} />}
+
+        {manifestLabel && (
+          <Typography variant="h3" className={classes.windowSideBarH3}>
+            {manifestLabel}
+          </Typography>
+        )}
+
+        {manifestDescription && (
+          <Typography variant="body2">
+            <SanitizedHtml htmlString={manifestDescription} ruleSet="iiif" />
+          </Typography>
+        )}
+
+        {manifestMetadata.length > 0 && (
+          <LabelValueMetadata labelValuePairs={manifestMetadata} />
+        )}
+
       </div>
     );
   }