Show artist link in Songs lists

ui/src/common/ArtistLinkField.js

@@ -14,25 +14,35 @@ export const useGetHandleArtistClick = (width) => {
   }
 }
 
-export const ArtistLinkField = withWidth()(({ record, className, width }) => {
+const songsFilteredByArtist = (artist) => {
-  const artistLink = useGetHandleArtistClick(width)
+  return `/song?filter={"artist":"${artist}"}`
+}
 
-  return (
+export const ArtistLinkField = withWidth()(
-    <Link
+  ({ record, className, width, source }) => {
-      to={artistLink(record.albumArtistId)}
+    const artistLink = useGetHandleArtistClick(width)
-      onClick={(e) => e.stopPropagation()}
+
-      className={className}
+    const id = record[source + 'Id']
-    >
+    const link = id ? artistLink(id) : songsFilteredByArtist(record[source])
-      {record.albumArtist}
+    return (
-    </Link>
+      <Link
-  )
+        to={link}
-})
+        onClick={(e) => e.stopPropagation()}
+        className={className}
+      >
+        {record[source]}
+      </Link>
+    )
+  }
+)
 
 ArtistLinkField.propTypes = {
   record: PropTypes.object,
   className: PropTypes.string,
+  source: PropTypes.string,
 }
 
 ArtistLinkField.defaultProps = {
   addLabel: true,
+  source: 'albumArtist',
 }

ui/src/layout/Menu.js

@@ -68,7 +68,7 @@ const Menu = ({ dense = false }) => {
   const renderResourceMenuItemLink = (resource) => (
     <MenuItemLink
       key={resource.name}
-      to={`/${resource.name}`}
+      to={`/${resource.name}?page=1`}
       activeClassName={classes.active}
       primaryText={translatedResourceName(resource, translate)}
       leftIcon={resource.icon || <ViewListIcon />}

ui/src/playlist/PlaylistSongs.js

@@ -25,6 +25,7 @@ import {
   useSelectedFields,
   useResourceRefresh,
   DateField,
+  ArtistLinkField,
 } from '../common'
 import { AddToPlaylistDialog } from '../dialogs'
 import { AlbumLinkField } from '../song/AlbumLinkField'
@@ -134,7 +135,8 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
       trackNumber: isDesktop && <TextField source="id" label={'#'} />,
       title: <SongTitleField source="title" showTrackNumbers={false} />,
       album: isDesktop && <AlbumLinkField source="album" />,
-      artist: isDesktop && <TextField source="artist" />,
+      artist: isDesktop && <ArtistLinkField source="artist" />,
+      albumArtist: isDesktop && <ArtistLinkField source="albumArtist" />,
       duration: (
         <DurationField source="duration" className={classes.draggable} />
       ),
@@ -158,7 +160,14 @@ const PlaylistSongs = ({ playlistId, readOnly, actions, ...props }) => {
   const columns = useSelectedFields({
     resource: 'playlistTrack',
     columns: toggleableFields,
-    defaultOff: ['channels', 'bpm', 'year', 'playCount', 'playDate'],
+    defaultOff: [
+      'channels',
+      'bpm',
+      'year',
+      'playCount',
+      'playDate',
+      'albumArtist',
+    ],
   })
 
   return (

ui/src/song/SongList.js

@@ -23,6 +23,7 @@ import {
   SongSimpleList,
   RatingField,
   useResourceRefresh,
+  ArtistLinkField,
 } from '../common'
 import { useDispatch } from 'react-redux'
 import { makeStyles } from '@material-ui/core/styles'
@@ -107,8 +108,8 @@ const SongList = (props) => {
           sortByOrder={'ASC'}
         />
       ),
-      artist: <TextField source="artist" />,
+      artist: <ArtistLinkField source="artist" />,
-      albumArtist: <TextField source="albumArtist" />,
+      albumArtist: <ArtistLinkField source="albumArtist" />,
       trackNumber: isDesktop && <NumberField source="trackNumber" />,
       playCount: isDesktop && (
         <NumberField source="playCount" sortByOrder={'DESC'} />