Add bibliography popups to dossier display

src/dossiers/domain/DossierRecord.ts

@@ -57,7 +57,9 @@ export default class DossierRecord {
     )
   }
 
-  toMarkdownString(): string {
+  toMarkdownString(
+    { bibliography }: { bibliography: boolean } = { bibliography: true }
+  ): string {
     const parts = [
       { name: 'Description', value: this.description },
       { name: 'Provenance', value: this.provenance?.name },
@@ -68,15 +70,15 @@ export default class DossierRecord {
           this.relatedKings.length > 0 ? this.relatedKings.join(', ') : null,
       },
       { name: 'Date', value: this.yearsToMarkdownString() },
-      {
+    ]
+    if (bibliography) {
+      parts.push({
         name: 'Bibliography',
         value: this.references
-          .map((reference) => {
-            return Citation.for(reference).getMarkdown()
-          })
+          .map((reference) => Citation.for(reference).getMarkdown())
           .join('; '),
-      },
-    ]
+      })
+    }
     return parts
       .filter((part) => !!part.value)
       .map((part) => `**${part.name}**: ${part.value}`)

src/dossiers/ui/DossiersDisplay.test.tsx

@@ -12,6 +12,7 @@ import { fragmentFactory } from 'test-support/fragment-fixtures'
 import { referenceDtoFactory } from 'test-support/bibliography-fixtures'
 import { act } from 'react-dom/test-utils'
 import userEvent from '@testing-library/user-event'
+import Citation from 'bibliography/domain/Citation'
 
 jest.mock('common/MarkdownAndHtmlToHtml', () => ({
   __esModule: true,
@@ -43,6 +44,30 @@ describe('DossierRecordDisplay', () => {
     render(<DossierRecordDisplay record={mockRecord} index={0} />)
     expect(screen.getByText(/Test description/)).toBeInTheDocument()
   })
+
+  it('renders bibliography references and handles popups', async () => {
+    render(<DossierRecordDisplay record={mockRecord} index={0} />)
+    mockRecord.references.forEach((reference) => {
+      const referenceMarkdown = Citation.for(reference).getMarkdown()
+      expect(
+        screen.getByText(new RegExp(referenceMarkdown, 'i'))
+      ).toBeInTheDocument()
+    })
+    const firstReferenceMarkdown = Citation.for(
+      mockRecord.references[0]
+    ).getMarkdown()
+    const referenceElement = screen.getByText(
+      new RegExp(firstReferenceMarkdown, 'i')
+    )
+
+    await act(async () => {
+      userEvent.click(referenceElement)
+    })
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument()
+    expect(
+      screen.getByText(new RegExp(mockRecord.references[0].notes))
+    ).toBeInTheDocument()
+  })
 })
 
 describe('DossierRecordsListDisplay', () => {
@@ -51,7 +76,7 @@ describe('DossierRecordsListDisplay', () => {
     expect(screen.queryByRole('list')).not.toBeInTheDocument()
   })
 
-  it('renders a list of records', async () => {
+  it('renders a list of records and handles bibliography popups', async () => {
     const records = [
       mockRecord,
       new DossierRecord({ ...mockRecordDto, _id: 'test2' }),
@@ -67,6 +92,21 @@ describe('DossierRecordsListDisplay', () => {
       records.length
     )
     expect(screen.getByText(/ca. 500 BCE - 470 BCE/)).toBeInTheDocument()
+    const firstReferenceMarkdown = Citation.for(
+      mockRecord.references[0]
+    ).getMarkdown()
+    const referenceElement = screen.getByText(
+      new RegExp(firstReferenceMarkdown, 'i')
+    )
+
+    await act(async () => {
+      userEvent.click(referenceElement)
+    })
+
+    expect(await screen.findAllByRole('tooltip')).toHaveLength(2)
+    expect(
+      screen.getByText(new RegExp(mockRecord.references[0].notes))
+    ).toBeInTheDocument()
   })
 })
 

src/dossiers/ui/DossiersDisplay.tsx

@@ -8,6 +8,33 @@ import Bluebird from 'bluebird'
 import { Popover, Overlay } from 'react-bootstrap'
 import { Fragment } from 'fragmentarium/domain/fragment'
 import './DossiersDisplay.sass'
+import ReferencePopover from 'bibliography/ui/referencePopover'
+import Citation from 'bibliography/domain/Citation'
+import InlineMarkdown from 'common/InlineMarkdown'
+import Reference from 'bibliography/domain/Reference'
+
+function ReferencesDisplay({
+  references,
+}: {
+  references: Reference[]
+}): JSX.Element {
+  const InlineMarkdownWithPopover = ReferencePopover(
+    ({ reference }: { reference: Reference }) => (
+      <InlineMarkdown source={Citation.for(reference).getMarkdown()} />
+    )
+  )
+  return (
+    <>
+      <strong>Bibliography</strong>:{' '}
+      {references.map((reference, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && '; '}
+          <InlineMarkdownWithPopover reference={reference} />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
 
 export function DossierRecordDisplay({
   record,
@@ -17,11 +44,14 @@ export function DossierRecordDisplay({
   index: number
 }): JSX.Element {
   return (
-    <MarkdownAndHtmlToHtml
-      key={`dossier-md-${index}`}
-      markdownAndHtml={record.toMarkdownString()}
-      className="dossier-record"
-    />
+    <>
+      <MarkdownAndHtmlToHtml
+        key={`dossier-md-${index}`}
+        markdownAndHtml={record.toMarkdownString({ bibliography: false })}
+        className="dossier-record"
+      />
+      <ReferencesDisplay references={record.references} />
+    </>
   )
 }