Replace expanded with a dialog (#1258)

* Replace expanded with a dialog

* Change `info` label to "Get Info"

* Rename things for consistency

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/album/AlbumTableView.js

@@ -1,22 +1,5 @@
 import React, { useMemo } from 'react'
-import Table from '@material-ui/core/Table'
-import TableBody from '@material-ui/core/TableBody'
-import inflection from 'inflection'
-import TableCell from '@material-ui/core/TableCell'
-import TableContainer from '@material-ui/core/TableContainer'
-import TableRow from '@material-ui/core/TableRow'
-import {
-  ArrayField,
-  BooleanField,
-  ChipField,
-  Datagrid,
-  DateField,
-  NumberField,
-  SingleFieldList,
-  TextField,
-  useRecordContext,
-  useTranslate,
-} from 'react-admin'
+import { Datagrid, NumberField, TextField } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import { makeStyles } from '@material-ui/core/styles'
@@ -25,7 +8,6 @@ import {
   DurationField,
   RangeField,
   SimpleList,
-  MultiLineTextField,
   AlbumContextMenu,
   RatingField,
   useSelectedFields,
@@ -59,56 +41,6 @@ const useStyles = makeStyles({
   },
 })
 
-const AlbumDetails = (props) => {
-  const classes = useStyles()
-  const translate = useTranslate()
-  const record = useRecordContext(props)
-  const data = {
-    albumArtist: <TextField source={'albumArtist'} />,
-    genre: (
-      <ArrayField source={'genres'}>
-        <SingleFieldList linkType={false}>
-          <ChipField source={'name'} />
-        </SingleFieldList>
-      </ArrayField>
-    ),
-    compilation: <BooleanField source={'compilation'} />,
-    updatedAt: <DateField source={'updatedAt'} showTime />,
-    comment: <MultiLineTextField source={'comment'} />,
-  }
-
-  const optionalFields = ['comment', 'genre']
-  optionalFields.forEach((field) => {
-    !record[field] && delete data[field]
-  })
-
-  return (
-    <TableContainer>
-      <Table aria-label="album details" size="small">
-        <TableBody>
-          {Object.keys(data).map((key) => {
-            return (
-              <TableRow key={`${record.id}-${key}`}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  className={classes.tableCell}
-                >
-                  {translate(`resources.album.fields.${key}`, {
-                    _: inflection.humanize(inflection.underscore(key)),
-                  })}
-                  :
-                </TableCell>
-                <TableCell align="left">{data[key]}</TableCell>
-              </TableRow>
-            )
-          })}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
-}
-
 const AlbumTableView = ({
   hasShow,
   hasEdit,
@@ -180,12 +112,7 @@ const AlbumTableView = ({
       {...rest}
     />
   ) : (
-    <Datagrid
-      expand={<AlbumDetails />}
-      rowClick={'show'}
-      classes={{ row: classes.row }}
-      {...rest}
-    >
+    <Datagrid rowClick={'show'} classes={{ row: classes.row }} {...rest}>
       <TextField source="name" />
       {columns}
       <AlbumContextMenu