Only show SongContextMenu on hover

ui/src/song/SongList.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   Datagrid,
+  DatagridBody,
   Filter,
   FunctionField,
   NumberField,
@@ -8,12 +9,18 @@ import {
   TextField,
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
-import { DurationField, SimpleList, List, SongDetails } from '../common'
+import {
+  DurationField,
+  SimpleList,
+  List,
+  SongDetails,
+  SongDatagridRow,
+  SongContextMenu,
+} from '../common'
 import { useDispatch } from 'react-redux'
 import { setTrack } from '../audioplayer'
 import { SongBulkActions } from './SongBulkActions'
 import { AlbumLinkField } from './AlbumLinkField'
-import { SongContextMenu } from './SongContextMenu'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -21,6 +28,13 @@ const SongFilter = (props) => (
   </Filter>
 )
 
+const SongsDatagridBody = (props) => (
+  <DatagridBody {...props} row={<SongDatagridRow />} />
+)
+const SongsDatagrid = (props) => (
+  <Datagrid {...props} body={<SongsDatagridBody />} />
+)
+
 const SongList = (props) => {
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
@@ -48,7 +62,7 @@ const SongList = (props) => {
           rightIcon={(r) => <SongContextMenu record={r} />}
         />
       ) : (
-        <Datagrid
+        <SongsDatagrid
           expand={<SongDetails />}
           rowClick={(id, basePath, record) => dispatch(setTrack(record))}
         >
@@ -62,7 +76,7 @@ const SongList = (props) => {
           )}
           <DurationField source="duration" />
           <SongContextMenu />
-        </Datagrid>
+        </SongsDatagrid>
       )}
     </List>
   )