Display comments in SongDetails and AlbumList's details

ui/src/album/AlbumListView.js

@@ -21,6 +21,7 @@ import {
 } from '../common'
 import { AlbumContextMenu } from '../common'
 import { makeStyles } from '@material-ui/core/styles'
+import MultiLineTextField from '../common/MultiLineTextField'
 
 const useStyles = makeStyles({
   columnIcon: {
@@ -39,6 +40,7 @@ const AlbumDetails = (props) => {
         <BooleanField source="compilation" />
         <DateField source="updatedAt" showTime />
         <SizeField source="size" />
+        <MultiLineTextField source="comment" />
       </SimpleShowLayout>
     </Show>
   )

ui/src/common/MultiLineTextField.js

@@ -0,0 +1,37 @@
+import React, { memo } from 'react'
+import get from 'lodash.get'
+import Typography from '@material-ui/core/Typography'
+import sanitizeFieldRestProps from './sanitizeFieldRestProps'
+import md5 from 'md5-hex'
+
+const MultiLineTextField = memo(
+  ({ className, emptyText, source, record = {}, stripTags, ...rest }) => {
+    const value = get(record, source)
+    const lines = value ? value.split('\n') : []
+
+    return (
+      <Typography
+        className={className}
+        variant="body2"
+        component="span"
+        {...sanitizeFieldRestProps(rest)}
+      >
+        {lines.length === 0 && emptyText
+          ? emptyText
+          : lines.map((line, idx) => (
+              <div
+                data-testid={`${source}.${idx}`}
+                key={md5(line)}
+                dangerouslySetInnerHTML={{ __html: line }}
+              />
+            ))}
+      </Typography>
+    )
+  }
+)
+
+MultiLineTextField.defaultProps = {
+  addLabel: true,
+}
+
+export default MultiLineTextField

ui/src/common/MultiLineTextField.test.js

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { render, cleanup, screen } from '@testing-library/react'
+import MultiLineTextField from './MultiLineTextField'
+
+describe('<MultiLineTextField />', () => {
+  afterEach(cleanup)
+
+  it('should render each line in a separated div', () => {
+    const record = { comment: 'line1\nline2' }
+    const { queryByTestId } = render(
+      <MultiLineTextField record={record} source={'comment'} />
+    )
+    expect(queryByTestId('comment.0').textContent).toBe('line1')
+    expect(queryByTestId('comment.1').textContent).toBe('line2')
+  })
+
+  it.each([null, undefined])(
+    'should render the emptyText when value is %s',
+    (body) => {
+      const { queryByText } = render(
+        <MultiLineTextField
+          record={{ id: 123, body }}
+          emptyText="NA"
+          source="body"
+        />
+      )
+      expect(queryByText('NA')).not.toBeNull()
+    }
+  )
+})

ui/src/common/SongDetails.js

@@ -8,6 +8,7 @@ import TableRow from '@material-ui/core/TableRow'
 import { BooleanField, DateField, TextField, useTranslate } from 'react-admin'
 import inflection from 'inflection'
 import { BitrateField, SizeField } from './index'
+import MultiLineTextField from './MultiLineTextField'
 
 export const SongDetails = (props) => {
   const translate = useTranslate()
@@ -23,6 +24,7 @@ export const SongDetails = (props) => {
     size: <SizeField record={record} source="size" />,
     updatedAt: <DateField record={record} source="updatedAt" showTime />,
     playCount: <TextField record={record} source="playCount" />,
+    comment: <MultiLineTextField record={record} source="comment" multiline />,
   }
   if (!record.discSubtitle) {
     delete data.discSubtitle

ui/src/common/sanitizeFieldRestProps.js

@@ -0,0 +1,26 @@
+const sanitizeFieldRestProps = ({
+  addLabel,
+  allowEmpty,
+  basePath,
+  cellClassName,
+  className,
+  emptyText,
+  formClassName,
+  fullWidth,
+  headerClassName,
+  label,
+  linkType,
+  link,
+  locale,
+  record,
+  resource,
+  sortable,
+  sortBy,
+  sortByOrder,
+  source,
+  textAlign,
+  translateChoice,
+  ...props
+}) => props
+
+export default sanitizeFieldRestProps