New: Artist genres on artist details page

Closes #2507

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

frontend/src/Artist/Details/ArtistDetails.js

@@ -36,6 +36,7 @@ import InteractiveImportModal from '../../InteractiveImport/InteractiveImportMod
 import ArtistAlternateTitles from './ArtistAlternateTitles';
 import ArtistDetailsLinks from './ArtistDetailsLinks';
 import ArtistDetailsSeasonConnector from './ArtistDetailsSeasonConnector';
+import ArtistGenres from './ArtistGenres';
 import ArtistTagsConnector from './ArtistTagsConnector';
 import styles from './ArtistDetails.css';
 
@@ -187,6 +188,7 @@ class ArtistDetails extends Component {
       statistics,
       qualityProfileId,
       monitored,
+      genres,
       albumTypes,
       status,
       overview,
@@ -431,6 +433,8 @@ class ArtistDetails extends Component {
                       rating={ratings.value}
                       iconSize={20}
                     />
+
+                    <ArtistGenres genres={genres} />
                   </div>
                 </div>
 
@@ -695,6 +699,7 @@ ArtistDetails.propTypes = {
   monitored: PropTypes.bool.isRequired,
   artistType: PropTypes.string,
   albumTypes: PropTypes.arrayOf(PropTypes.string),
+  genres: PropTypes.arrayOf(PropTypes.string),
   status: PropTypes.string.isRequired,
   overview: PropTypes.string.isRequired,
   links: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Artist/Details/ArtistGenres.css

@@ -0,0 +1,3 @@
+.genres {
+  margin-right: 15px;
+}

frontend/src/Artist/Details/ArtistGenres.js

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import styles from './ArtistGenres.css';
+
+function ArtistGenres({ genres }) {
+  const [firstGenre, ...otherGenres] = genres;
+
+  if (otherGenres.length) {
+    return (
+      <Tooltip
+        anchor={
+          <span className={styles.genres}>
+            {firstGenre}
+          </span>
+        }
+        tooltip={
+          <div>
+            {
+              otherGenres.map((tag) => {
+                return (
+                  <Label
+                    key={tag}
+                    kind={kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag}
+                  </Label>
+                );
+              })
+            }
+          </div>
+        }
+        kind={kinds.INVERSE}
+        position={tooltipPositions.TOP}
+      />
+    );
+  }
+
+  return (
+    <span className={styles.genres}>
+      {firstGenre}
+    </span>
+  );
+}
+
+ArtistGenres.propTypes = {
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+
+export default ArtistGenres;

frontend/src/Components/HeartRating.css

@@ -2,3 +2,7 @@
   margin-right: 5px;
   color: var(--themeRed);
 }
+
+.rating {
+  margin-right: 15px;
+}

frontend/src/Components/HeartRating.js

@@ -6,7 +6,7 @@ import styles from './HeartRating.css';
 
 function HeartRating({ rating, iconSize }) {
   return (
-    <span>
+    <span className={styles.rating}>
       <Icon
         className={styles.heart}
         name={icons.HEART}