Option to toggle fields in songs, albums & artists (#923)

* Add toggleColumns

- Add logic for toggling columns
- Add MenuComponent + useSelectedFields hook

* Refactoring

* eslint-fixes

* Typo

* skip menu in albumGridView

* add omittedFields

* Add toggling for playlists and albumSong

* Refactoring

* defaultProps - fix

* Add toggling for PlaylistSongs

* remove accidental console log

* Refactoring for future compatibility

* Hide ToggleMenu in albumGridView

* Add TopBarComponent in ToggleFieldsMenu

* Add defaultOff for useSelectedFields

* Fix edge case

* eslint fix

* Refactoring

* Add propType for forwardRef

* Fix issues

* add translation for grid and table

* add translation for grid and table

* Ignore menuBtn for spotify-ish and Ligera themes

* hide bpm by default in playlistSongs

* Add memoization

* Default album view must be Grid

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

ui/src/artist/ArtistList.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 import {
   Datagrid,
@@ -21,6 +21,8 @@ import {
 } from '../common'
 import { makeStyles } from '@material-ui/core/styles'
 import config from '../config'
+import ArtistListActions from './ArtistListActions'
+import useSelectedFields from '../common/useSelectedFields'
 
 const useStyles = makeStyles({
   contextHeader: {
@@ -64,6 +66,28 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
   const handleArtistLink = useGetHandleArtistClick(width)
   const history = useHistory()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+
+  const toggleableFields = useMemo(() => {
+    return {
+      albumCount: <NumberField source="albumCount" sortByOrder={'DESC'} />,
+      songCount: <NumberField source="songCount" sortByOrder={'DESC'} />,
+      playCount: <NumberField source="playCount" sortByOrder={'DESC'} />,
+      rating: config.enableStarRating && (
+        <RatingField
+          source="rating"
+          sortByOrder={'DESC'}
+          resource={'artist'}
+          className={classes.ratingField}
+        />
+      ),
+    }
+  }, [classes.ratingField])
+
+  const columns = useSelectedFields({
+    resource: 'artist',
+    columns: toggleableFields,
+  })
+
   return isXsmall ? (
     <ArtistSimpleList
       linkType={(id) => history.push(handleArtistLink(id))}
@@ -72,17 +96,7 @@ const ArtistListView = ({ hasShow, hasEdit, hasList, width, ...rest }) => {
   ) : (
     <Datagrid rowClick={handleArtistLink} classes={{ row: classes.row }}>
       <TextField source="name" />
-      <NumberField source="albumCount" sortByOrder={'DESC'} />
-      <NumberField source="songCount" sortByOrder={'DESC'} />
-      <NumberField source="playCount" sortByOrder={'DESC'} />
-      {config.enableStarRating && (
-        <RatingField
-          source="rating"
-          sortByOrder={'DESC'}
-          resource={'artist'}
-          className={classes.ratingField}
-        />
-      )}
+      {columns}
       <ArtistContextMenu
         source={'starred'}
         sortBy={'starred ASC, starredAt ASC'}
@@ -111,6 +125,7 @@ const ArtistList = (props) => {
         exporter={false}
         bulkActionButtons={false}
         filters={<ArtistFilter />}
+        actions={<ArtistListActions />}
       >
         <ArtistListView {...props} />
       </List>

ui/src/artist/ArtistListActions.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { sanitizeListRestProps, TopToolbar } from 'react-admin'
+import { useMediaQuery } from '@material-ui/core'
+import ToggleFieldsMenu from '../common/ToggleFieldsMenu'
+
+const ArtistListActions = ({ className, ...rest }) => {
+  const isNotSmall = useMediaQuery((theme) => theme.breakpoints.up('sm'))
+
+  return (
+    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      {isNotSmall && <ToggleFieldsMenu resource="artist" />}
+    </TopToolbar>
+  )
+}
+
+export default ArtistListActions