Fixed: UI fixes from Sonarr

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

frontend/src/AddArtist/AddNewArtist/AddNewArtistSearchResult.js

@@ -116,12 +116,13 @@ class AddNewArtistSearchResult extends Component {
 
               {
                 isExistingArtist &&
-                  <Icon
-                    className={styles.alreadyExistsIcon}
-                    name={icons.CHECK_CIRCLE}
-                    size={36}
-                    title="Already in your library"
-                  />
+                  <span title="Already in your library">
+                    <Icon
+                      className={styles.alreadyExistsIcon}
+                      name={icons.CHECK_CIRCLE}
+                      size={36}
+                    />
+                  </span>
               }
             </div>
 

frontend/src/Album/Details/AlbumDetailsMedium.js

@@ -134,12 +134,13 @@ class AlbumDetailsMedium extends Component {
             className={styles.expandButton}
             onPress={this.onExpandPress}
           >
-            <Icon
-              className={styles.expandButtonIcon}
-              name={isExpanded ? icons.COLLAPSE : icons.EXPAND}
-              title={isExpanded ? 'Hide tracks' : 'Show tracks'}
-              size={24}
-            />
+            <span title={isExpanded ? 'Hide tracks' : 'Show tracks'}>
+              <Icon
+                className={styles.expandButtonIcon}
+                name={isExpanded ? icons.COLLAPSE : icons.EXPAND}
+                size={24}
+              />
+            </span>
             {
               !isSmallScreen &&
                 <span>&nbsp;</span>

frontend/src/Album/EpisodeStatus.js

@@ -48,10 +48,9 @@ function EpisodeStatus(props) {
 
   if (grabbed) {
     return (
-      <div className={styles.center}>
+      <div className={styles.center} title="Album is downloading">
         <Icon
           name={icons.DOWNLOADING}
-          title="Album is downloading"
         />
       </div>
     );
@@ -75,10 +74,9 @@ function EpisodeStatus(props) {
 
   if (!airDateUtc) {
     return (
-      <div className={styles.center}>
+      <div className={styles.center} title="TBA">
         <Icon
           name={icons.TBA}
-          title="TBA"
         />
       </div>
     );
@@ -86,10 +84,9 @@ function EpisodeStatus(props) {
 
   if (!monitored) {
     return (
-      <div className={styles.center}>
+      <div className={styles.center} title="Album is not monitored">
         <Icon
           name={icons.UNMONITORED}
-          title="Album is not monitored"
         />
       </div>
     );
@@ -97,20 +94,18 @@ function EpisodeStatus(props) {
 
   if (hasAired) {
     return (
-      <div className={styles.center}>
+      <div className={styles.center} title="Track missing from disk">
         <Icon
           name={icons.MISSING}
-          title="Track missing from disk"
         />
       </div>
     );
   }
 
   return (
-    <div className={styles.center}>
+    <div className={styles.center} title="Album has not aired">
       <Icon
         name={icons.NOT_AIRED}
-        title="Album has not aired"
       />
     </div>
   );

frontend/src/AlbumStudio/AlbumStudioRow.js

@@ -39,12 +39,12 @@ class AlbumStudioRow extends Component {
         />
 
         <TableRowCell className={styles.status}>
-          <Icon
-            className={styles.statusIcon}
-            name={status === 'ended' ? icons.ARTIST_ENDED : icons.ARTIST_CONTINUING}
-            title={status === 'ended' ? 'Ended' : 'Continuing'}
-
-          />
+          <span title={status === 'ended' ? 'Ended' : 'Continuing'}>
+            <Icon
+              className={styles.statusIcon}
+              name={status === 'ended' ? icons.ARTIST_ENDED : icons.ARTIST_CONTINUING}
+            />
+          </span>
         </TableRowCell>
 
         <TableRowCell className={styles.title}>

frontend/src/Artist/ArtistBanner.js

@@ -67,14 +67,11 @@ class ArtistBanner extends Component {
         hasError: false,
         isLoaded: true
       });
-    }
-
-    // The banner could not be loaded..
-    if (!nextBanner && (this.props !== prevProps)) {
+    } else if (!nextBanner && banner) {
       this.setState({
-        banner: undefined,
+        banner: nextBanner,
         bannerUrl: bannerPlaceholder,
-        hasError: true
+        hasError: false
       });
     }
   }

frontend/src/Artist/ArtistPoster.js

@@ -67,14 +67,11 @@ class ArtistPoster extends Component {
         hasError: false,
         isLoaded: true
       });
-    }
-
-    // The poster could not be loaded..
-    if (!nextPoster && (this.props !== prevProps)) {
+    } else if (!nextPoster && poster) {
       this.setState({
-        poster: undefined,
+        poster: nextPoster,
         posterUrl: posterPlaceholder,
-        hasError: true
+        hasError: false
       });
     }
   }

frontend/src/Artist/Delete/DeleteArtistModalContent.js

@@ -136,7 +136,9 @@ DeleteArtistModalContent.propTypes = {
 };
 
 DeleteArtistModalContent.defaultProps = {
-  trackFileCount: 0
+  statistics: {
+    trackFileCount: 0
+  }
 };
 
 export default DeleteArtistModalContent;

frontend/src/Artist/Details/ArtistDetailsSeason.js

@@ -150,12 +150,13 @@ class ArtistDetailsSeason extends Component {
 
             </div>
 
-            <Icon
-              className={styles.expandButtonIcon}
-              name={isExpanded ? icons.COLLAPSE : icons.EXPAND}
-              title={isExpanded ? 'Hide albums' : 'Show albums'}
-              size={24}
-            />
+            <span title={isExpanded ? 'Hide albums' : 'Show albums'}>
+              <Icon
+                className={styles.expandButtonIcon}
+                name={isExpanded ? icons.COLLAPSE : icons.EXPAND}
+                size={24}
+              />
+            </span>
 
             {
               !isSmallScreen &&

frontend/src/Artist/Index/Table/ArtistStatusCell.js

@@ -19,18 +19,19 @@ function ArtistStatusCell(props) {
       className={className}
       {...otherProps}
     >
-      <Icon
-        className={styles.statusIcon}
-        name={monitored ? icons.MONITORED : icons.UNMONITORED}
-        title={monitored ? 'Artist is monitored' : 'Artist is unmonitored'}
-      />
+      <span title={monitored ? 'Artist is monitored' : 'Artist is unmonitored'}>
+        <Icon
+          className={styles.statusIcon}
+          name={monitored ? icons.MONITORED : icons.UNMONITORED}
+        />
+      </span>
 
-      <Icon
-        className={styles.statusIcon}
-        name={status === 'ended' ? icons.ARTIST_ENDED : icons.ARTIST_CONTINUING}
-        title={status === 'ended' ? 'Ended' : 'Continuing'}
-
-      />
+      <span title={status === 'ended' ? 'Ended' : 'Continuing'}>
+        <Icon
+          className={styles.statusIcon}
+          name={status === 'ended' ? icons.ARTIST_ENDED : icons.ARTIST_CONTINUING}
+        />
+      </span>
     </Component>
   );
 }

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -107,10 +107,11 @@ class AgendaEvent extends Component {
 
           {
             !queueItem && grabbed &&
-              <Icon
-                name={icons.DOWNLOADING}
-                title="Album is downloading"
-              />
+              <span title="Album is downloading">
+                <Icon
+                  name={icons.DOWNLOADING}
+                />
+              </span>
           }
         </Link>
       </div>

frontend/src/Calendar/Events/CalendarEvent.js

@@ -91,11 +91,12 @@ class CalendarEvent extends Component {
 
             {
               !queueItem && grabbed &&
-                <Icon
-                  className={styles.statusIcon}
-                  name={icons.DOWNLOADING}
-                  title="Album is downloading"
-                />
+                <span title="Album is downloading">
+                  <Icon
+                    className={styles.statusIcon}
+                    name={icons.DOWNLOADING}
+                  />
+                </span>
             }
           </div>
 

frontend/src/Components/Icon.js

@@ -16,6 +16,10 @@ function Icon(props) {
     ...otherProps
   } = props;
 
+  if (title && !window.Lidarr.isProduction) {
+    console.error('Icons cannot have a title');
+  }
+
   return (
     <FontAwesomeIcon
       className={classNames(
@@ -24,7 +28,6 @@ function Icon(props) {
       )}
       icon={name}
       spin={isSpinning}
-      title={title}
       style={{
         fontSize: `${size}px`
       }}

frontend/src/Components/Page/Sidebar/Messages/Message.js

@@ -45,10 +45,9 @@ function Message(props) {
       styles[type]
     )}
     >
-      <div className={styles.iconContainer}>
+      <div className={styles.iconContainer} title={name}>
         <Icon
           name={getIconName(name)}
-          title={name}
         />
       </div>
 

frontend/src/Settings/Profiles/Quality/QualityProfileItem.js

@@ -92,10 +92,9 @@ class QualityProfileItem extends Component {
 
         {
           connectDragSource(
-            <div className={styles.dragHandle}>
+            <div className={styles.dragHandle} title="Create group">
               <Icon
                 className={styles.dragIcon}
-                title="Create group"
                 name={icons.REORDER}
               />
             </div>

frontend/src/Settings/Profiles/Quality/QualityProfileItemGroup.js

@@ -129,11 +129,10 @@ class QualityProfileItemGroup extends Component {
 
           {
             connectDragSource(
-              <div className={styles.dragHandle}>
+              <div className={styles.dragHandle} title="Reorder">
                 <Icon
                   className={styles.dragIcon}
                   name={icons.REORDER}
-                  title="Reorder"
                 />
               </div>
             )

frontend/src/Store/Actions/calendarActions.js

@@ -45,7 +45,7 @@ export const defaultState = {
       filters: [
         {
           key: 'monitored',
-          value: false,
+          value: false || true,
           type: filterTypes.EQUAL
         }
       ]
@@ -192,7 +192,6 @@ export const clearCalendar = createAction(CLEAR_CALENDAR);
 // Action Handlers
 
 export const actionHandlers = handleThunks({
-
   [FETCH_CALENDAR]: function(getState, payload, dispatch) {
     const state = getState();
     const unmonitored = state.calendar.selectedFilterKey === 'all';
@@ -339,8 +338,8 @@ export const reducers = createHandleActions({
   [CLEAR_CALENDAR]: (state) => {
     const {
       view,
-      showUpcoming,
       selectedFilterKey,
+      showUpcoming,
       ...otherDefaultState
     } = defaultState;
 

frontend/src/Store/Actions/queueActions.js

@@ -225,7 +225,7 @@ export const actionHandlers = handleThunks({
 
     promise.done((data) => {
       dispatch(batchActions([
-        dispatch(fetchQueue()),
+        fetchQueue(),
 
         set({
           section: paged,

frontend/src/System/Backup/BackupRow.js

@@ -87,10 +87,11 @@ class BackupRow extends Component {
       <TableRow key={id}>
         <TableRowCell className={styles.type}>
           {
-            <Icon
-              name={iconClassName}
-              title={iconTooltip}
-            />
+            <span title={iconTooltip}>
+              <Icon
+                name={iconClassName}
+              />
+            </span>
           }
         </TableRowCell>
 

frontend/src/System/Status/Health/Health.js

@@ -125,11 +125,12 @@ class Health extends Component {
                     return (
                       <TableRow key={`health${item.message}`}>
                         <TableRowCell>
-                          <Icon
-                            name={icons.DANGER}
-                            kind={item.type.toLowerCase() === 'error' ? kinds.DANGER : kinds.WARNING}
-                            title={titleCase(item.type)}
-                          />
+                          <span title={titleCase(item.type)}>
+                            <Icon
+                              name={icons.DANGER}
+                              kind={item.type.toLowerCase() === 'error' ? kinds.DANGER : kinds.WARNING}
+                            />
+                          </span>
                         </TableRowCell>
 
                         <TableRowCell>{item.message}</TableRowCell>

src/NzbDrone.Core/Music/Commands/BulkMoveArtistCommand.cs

@@ -1,3 +1,4 @@
+using System;
 using System.Collections.Generic;
 using NzbDrone.Core.Messaging.Commands;
 
@@ -11,9 +12,39 @@ namespace NzbDrone.Core.Music.Commands
         public override bool SendUpdatesToClient => true;
     }
 
-    public class BulkMoveArtist
+    public class BulkMoveArtist : IEquatable<BulkMoveArtist>
     {
         public int ArtistId { get; set; }
         public string SourcePath { get; set; }
+
+        public bool Equals(BulkMoveArtist other)
+        {
+            if (other == null)
+            {
+                return false;
+            }
+
+            return ArtistId.Equals(other.ArtistId);
+        }
+
+        public override bool Equals(object obj)
+        {
+            if (obj == null)
+            {
+                return false;
+            }
+
+            if (obj.GetType() != GetType())
+            {
+                return false;
+            }
+
+            return ArtistId.Equals(((BulkMoveArtist)obj).ArtistId);
+        }
+
+        public override int GetHashCode()
+        {
+            return ArtistId.GetHashCode();
+        }
     }
 }