Various UI Fixes and Updates

Closes #188
Closes #185
Closes #187

frontend/src/Album/AlbumDetailsModalContent.css

@@ -42,3 +42,7 @@
 
   margin-right: auto;
 }
+
+.openButtons {
+  margin-right: auto;
+}

frontend/src/Album/AlbumDetailsModalContent.js

@@ -45,17 +45,20 @@ class AlbumDetailsModalContent extends Component {
       albumId,
       artistName,
       foreignArtistId,
+      foreignAlbumId,
       artistMonitored,
       albumTitle,
       monitored,
       isSaving,
       showOpenArtistButton,
+      showOpenAlbumButton,
       startInteractiveSearch,
       onMonitorAlbumPress,
       onModalClose
     } = this.props;
 
     const artistLink = `/artist/${foreignArtistId}`;
+    const albumLink = `/album/${foreignAlbumId}`;
 
     return (
       <ModalContent
@@ -121,18 +124,30 @@ class AlbumDetailsModalContent extends Component {
           </Tabs>
         </ModalBody>
 
-        <ModalFooter>
-          {
-            showOpenArtistButton &&
-              <Button
-                className={styles.openArtistButton}
-                to={artistLink}
-                onPress={onModalClose}
-              >
-                Open Artist
-              </Button>
-          }
+        <ModalFooter >
+          <div className={styles.openButtons}>
+            {
+              showOpenArtistButton &&
+                <Button
+                  className={styles.openArtistButton}
+                  to={artistLink}
+                  onPress={onModalClose}
+                >
+                  Open Artist
+                </Button>
+            }
 
+            {
+              showOpenAlbumButton &&
+                <Button
+                  className={styles.openAlbumButton}
+                  to={albumLink}
+                  onPress={onModalClose}
+                >
+                  Open Album
+                </Button>
+            }
+          </div>
           <Button
             onPress={onModalClose}
           >
@@ -150,6 +165,7 @@ AlbumDetailsModalContent.propTypes = {
   artistId: PropTypes.number.isRequired,
   artistName: PropTypes.string.isRequired,
   foreignArtistId: PropTypes.string.isRequired,
+  foreignAlbumId: PropTypes.string.isRequired,
   artistMonitored: PropTypes.bool.isRequired,
   releaseDate: PropTypes.string.isRequired,
   albumLabel: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -157,6 +173,7 @@ AlbumDetailsModalContent.propTypes = {
   monitored: PropTypes.bool.isRequired,
   isSaving: PropTypes.bool,
   showOpenArtistButton: PropTypes.bool,
+  showOpenAlbumButton: PropTypes.bool,
   selectedTab: PropTypes.string.isRequired,
   startInteractiveSearch: PropTypes.bool.isRequired,
   onMonitorAlbumPress: PropTypes.func.isRequired,

frontend/src/Album/AlbumSearchCell.js

@@ -5,7 +5,6 @@ import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import AlbumDetailsModal from './AlbumDetailsModal';
-import EditAlbumModalConnector from './Edit/EditAlbumModalConnector';
 import styles from './AlbumSearchCell.css';
 
 class AlbumSearchCell extends Component {
@@ -17,8 +16,7 @@ class AlbumSearchCell extends Component {
     super(props, context);
 
     this.state = {
-      isDetailsModalOpen: false,
-      isEditAlbumModalOpen: false
+      isDetailsModalOpen: false
     };
   }
 
@@ -33,14 +31,6 @@ class AlbumSearchCell extends Component {
     this.setState({ isDetailsModalOpen: false });
   }
 
-  onEditAlbumPress = () => {
-    this.setState({ isEditAlbumModalOpen: true });
-  }
-
-  onEditAlbumModalClose = () => {
-    this.setState({ isEditAlbumModalOpen: false });
-  }
-
   //
   // Render
 
@@ -67,12 +57,6 @@ class AlbumSearchCell extends Component {
           onPress={this.onManualSearchPress}
         />
 
-        <IconButton
-          name={icons.EDIT}
-          title="Edit Album"
-          onPress={this.onEditAlbumPress}
-        />
-
         <AlbumDetailsModal
           isOpen={this.state.isDetailsModalOpen}
           albumId={albumId}
@@ -84,12 +68,6 @@ class AlbumSearchCell extends Component {
           {...otherProps}
         />
 
-        <EditAlbumModalConnector
-          isOpen={this.state.isEditAlbumModalOpen}
-          albumId={albumId}
-          artistId={artistId}
-          onModalClose={this.onEditAlbumModalClose}
-        />
       </TableRowCell>
     );
   }

frontend/src/Album/AlbumSearchCellConnector.js

@@ -10,10 +10,9 @@ import AlbumSearchCell from './AlbumSearchCell';
 function createMapStateToProps() {
   return createSelector(
     (state, { albumId }) => albumId,
-    (state, { sceneSeasonNumber }) => sceneSeasonNumber,
     createArtistSelector(),
     createCommandsSelector(),
-    (albumId, sceneSeasonNumber, artist, commands) => {
+    (albumId, artist, commands) => {
       const isSearching = _.some(commands, (command) => {
         const albumSearch = command.name === commandNames.ALBUM_SEARCH;
 

frontend/src/Album/Details/AlbumDetails.js

@@ -11,6 +11,7 @@ import Icon from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import Label from 'Components/Label';
 import AlbumCover from 'Album/AlbumCover';
+import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import EditAlbumModalConnector from 'Album/Edit/EditAlbumModalConnector';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
@@ -50,6 +51,7 @@ class AlbumDetails extends Component {
     super(props, context);
 
     this.state = {
+      isOrganizeModalOpen: false,
       isArtistHistoryModalOpen: false,
       isManageTracksOpen: false,
       isEditAlbumModalOpen: false,
@@ -62,6 +64,14 @@ class AlbumDetails extends Component {
   //
   // Listeners
 
+  onOrganizePress = () => {
+    this.setState({ isOrganizeModalOpen: true });
+  }
+
+  onOrganizeModalClose = () => {
+    this.setState({ isOrganizeModalOpen: false });
+  }
+
   onEditAlbumPress = () => {
     this.setState({ isEditAlbumModalOpen: true });
   }
@@ -135,6 +145,7 @@ class AlbumDetails extends Component {
     } = this.props;
 
     const {
+      isOrganizeModalOpen,
       isArtistHistoryModalOpen,
       isEditAlbumModalOpen,
       isManageTracksOpen,
@@ -164,6 +175,12 @@ class AlbumDetails extends Component {
 
             <PageToolbarSeparator />
 
+            <PageToolbarButton
+              label="Preview Rename"
+              iconName={icons.ORGANIZE}
+              onPress={this.onOrganizePress}
+            />
+
             <PageToolbarButton
               label="Manage Tracks"
               iconName={icons.TRACK_FILE}
@@ -364,6 +381,13 @@ class AlbumDetails extends Component {
 
           </div>
 
+          <OrganizePreviewModalConnector
+            isOpen={isOrganizeModalOpen}
+            artistId={artist.id}
+            albumId={id}
+            onModalClose={this.onOrganizeModalClose}
+          />
+
           <TrackFileEditorModal
             isOpen={isManageTracksOpen}
             artistId={artist.id}

frontend/src/Album/Edit/EditAlbumModalContent.js

@@ -26,7 +26,7 @@ class EditAlbumModalContent extends Component {
 
   }
 
-  //  
+  //
   // Render
 
   render() {