Fix artists

ui/src/album/AlbumListView.js

@@ -1,9 +1,7 @@
-import React, { cloneElement, isValidElement, useState } from 'react'
+import React from 'react'
 import {
   BooleanField,
   Datagrid,
-  DatagridBody,
-  DatagridRow,
   DateField,
   NumberField,
   Show,
@@ -29,6 +27,16 @@ const useStyles = makeStyles({
     marginTop: '-2px',
     verticalAlign: 'text-top',
   },
+  row: {
+    '&:hover': {
+      '& $contextMenu': {
+        visibility: 'visible',
+      },
+    },
+  },
+  contextMenu: {
+    visibility: 'hidden',
+  },
 })
 
 const AlbumDetails = (props) => {
@@ -48,37 +56,6 @@ const AlbumDetails = (props) => {
   )
 }
 
-const AlbumDatagridRow = ({ children, ...rest }) => {
-  const [visible, setVisible] = useState(false)
-  const childCount = React.Children.count(children)
-  return (
-    <DatagridRow
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
-      {...rest}
-    >
-      {React.Children.map(
-        children,
-        (child, index) =>
-          child &&
-          isValidElement(child) &&
-          (index < childCount - 1
-            ? child
-            : cloneElement(child, {
-                visible,
-              }))
-      )}
-    </DatagridRow>
-  )
-}
-
-const AlbumDatagridBody = (props) => (
-  <DatagridBody {...props} row={<AlbumDatagridRow />} />
-)
-const AlbumDatagrid = (props) => (
-  <Datagrid {...props} body={<AlbumDatagridBody />} />
-)
-
 const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
   const classes = useStyles()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
@@ -98,7 +75,12 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
       {...rest}
     />
   ) : (
-    <AlbumDatagrid expand={<AlbumDetails />} rowClick={'show'} {...rest}>
+    <Datagrid
+      expand={<AlbumDetails />}
+      rowClick={'show'}
+      classes={{ row: classes.row }}
+      {...rest}
+    >
       <TextField source="name" />
       <ArtistLinkField source="artist" />
       {isDesktop && <NumberField source="songCount" sortByOrder={'DESC'} />}
@@ -109,11 +91,13 @@ const AlbumListView = ({ hasShow, hasEdit, hasList, ...rest }) => {
         source={'starred'}
         sortBy={'starred ASC, starredAt ASC'}
         sortByOrder={'DESC'}
+        className={classes.contextMenu}
         label={
           <StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
         }
+        textAlign={'right'}
       />
-    </AlbumDatagrid>
+    </Datagrid>
   )
 }
 

ui/src/artist/ArtistList.js

@@ -1,9 +1,7 @@
-import React, { cloneElement, isValidElement, useState } from 'react'
+import React from 'react'
 import { useHistory } from 'react-router-dom'
 import {
   Datagrid,
-  DatagridBody,
-  DatagridRow,
   Filter,
   NumberField,
   SearchInput,
@@ -28,6 +26,16 @@ const useStyles = makeStyles({
     marginTop: '-2px',
     verticalAlign: 'text-top',
   },
+  row: {
+    '&:hover': {
+      '& $contextMenu': {
+        visibility: 'visible',
+      },
+    },
+  },
+  contextMenu: {
+    visibility: 'hidden',
+  },
 })
 
 const ArtistFilter = (props) => (
@@ -41,37 +49,6 @@ const ArtistFilter = (props) => (
   </Filter>
 )
 
-const ArtistDatagridRow = ({ children, ...rest }) => {
-  const [visible, setVisible] = useState(false)
-  const childCount = React.Children.count(children)
-  return (
-    <DatagridRow
-      onMouseEnter={() => setVisible(true)}
-      onMouseLeave={() => setVisible(false)}
-      {...rest}
-    >
-      {React.Children.map(
-        children,
-        (child, index) =>
-          child &&
-          isValidElement(child) &&
-          (index < childCount - 1
-            ? child
-            : cloneElement(child, {
-                visible,
-              }))
-      )}
-    </DatagridRow>
-  )
-}
-
-const ArtistDatagridBody = (props) => (
-  <DatagridBody {...props} row={<ArtistDatagridRow />} />
-)
-const ArtistDatagrid = (props) => (
-  <Datagrid {...props} body={<ArtistDatagridBody />} />
-)
-
 const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
   const classes = useStyles()
   const handleArtistLink = useGetHandleArtistClick(width)
@@ -87,7 +64,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
       {...rest}
     />
   ) : (
-    <ArtistDatagrid rowClick={handleArtistLink}>
+    <Datagrid rowClick={handleArtistLink} classes={{ row: classes.row }}>
       <TextField source="name" />
       <NumberField source="albumCount" sortByOrder={'DESC'} />
       <NumberField source="songCount" sortByOrder={'DESC'} />
@@ -96,11 +73,13 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
         source={'starred'}
         sortBy={'starred ASC, starredAt ASC'}
         sortByOrder={'DESC'}
+        className={classes.contextMenu}
         label={
           <StarBorderIcon fontSize={'small'} className={classes.columnIcon} />
         }
+        textAlign={'right'}
       />
-    </ArtistDatagrid>
+    </Datagrid>
   )
 }
 

ui/src/common/ContextMenus.js

@@ -7,6 +7,7 @@ import MenuItem from '@material-ui/core/MenuItem'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import { makeStyles } from '@material-ui/core/styles'
 import { useDataProvider, useNotify, useTranslate } from 'react-admin'
+import clsx from 'clsx'
 import {
   playNext,
   addTracks,
@@ -25,7 +26,6 @@ const useStyles = makeStyles({
   },
   menu: {
     color: (props) => props.color,
-    visibility: (props) => (props.visible ? 'visible' : 'hidden'),
   },
 })
 
@@ -34,10 +34,10 @@ const ContextMenu = ({
   showStar,
   record,
   color,
-  visible,
+  className,
   songQueryParams,
 }) => {
-  const classes = useStyles({ color, visible })
+  const classes = useStyles({ color })
   const dataProvider = useDataProvider()
   const dispatch = useDispatch()
   const translate = useTranslate()
@@ -129,11 +129,11 @@ const ContextMenu = ({
   const open = Boolean(anchorEl)
 
   return (
-    <span className={classes.noWrap}>
+    <span className={clsx(classes.noWrap, className)}>
       <StarButton
         record={record}
         resource={resource}
-        visible={visible && showStar}
+        visible={showStar}
         color={color}
       />
       <IconButton
@@ -181,13 +181,11 @@ export const AlbumContextMenu = (props) => (
 AlbumContextMenu.propTypes = {
   record: PropTypes.object,
   discNumber: PropTypes.number,
-  visible: PropTypes.bool,
   color: PropTypes.string,
   showStar: PropTypes.bool,
 }
 
 AlbumContextMenu.defaultProps = {
-  visible: true,
   showStar: true,
   addLabel: true,
 }
@@ -206,13 +204,11 @@ export const ArtistContextMenu = (props) => (
 
 ArtistContextMenu.propTypes = {
   record: PropTypes.object,
-  visible: PropTypes.bool,
   color: PropTypes.string,
   showStar: PropTypes.bool,
 }
 
 ArtistContextMenu.defaultProps = {
-  visible: true,
   showStar: true,
   addLabel: true,
 }

ui/src/common/StarButton.js

@@ -10,8 +10,7 @@ import subsonic from '../subsonic'
 const useStyles = makeStyles({
   star: {
     color: (props) => props.color,
-    visibility: (props) =>
+    visibility: (props) => (props.starred ? 'visible' : 'inherit'),
-      props.visible || props.starred ? 'visible' : 'hidden',
   },
 })