Fixed: Movie Path UI Warning, Duplicate Import Fixes

frontend/src/Activity/History/Details/HistoryDetails.css

@@ -1,5 +1,5 @@
 .description {
-  composes: title from '~Components/DescriptionList/DescriptionListItemDescription.css';
+  composes: description from '~Components/DescriptionList/DescriptionListItemDescription.css';
 
   overflow-wrap: break-word;
 }

frontend/src/Activity/Queue/QueueRow.js

@@ -307,7 +307,7 @@ QueueRow.propTypes = {
   trackedDownloadStatus: PropTypes.string,
   statusMessages: PropTypes.arrayOf(PropTypes.object),
   errorMessage: PropTypes.string,
-  movie: PropTypes.object.isRequired,
+  movie: PropTypes.object,
   quality: PropTypes.object.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   protocol: PropTypes.string.isRequired,

frontend/src/AddMovie/AddNewMovie/AddNewMovie.css

@@ -35,14 +35,20 @@
 .message {
   margin-top: 30px;
   text-align: center;
+  font-weight: 300;
+  font-size: $largeFontSize;
 }
 
 .helpText {
   margin-bottom: 10px;
-  font-weight: 300;
   font-size: 24px;
 }
 
+.noMoviesText {
+  margin-top: 80px;
+  margin-bottom: 20px;
+}
+
 .noResults {
   margin-bottom: 10px;
   font-weight: 300;

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import { icons } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import Link from 'Components/Link/Link';
 import Icon from 'Components/Icon';
@@ -79,7 +79,8 @@ class AddNewMovie extends Component {
   render() {
     const {
       error,
-      items
+      items,
+      hasExistingMovies
     } = this.props;
 
     const term = this.state.term;
@@ -160,13 +161,34 @@ class AddNewMovie extends Component {
           }
 
           {
-            !term &&
+            term ?
+              null :
               <div className={styles.message}>
-                <div className={styles.helpText}>It's easy to add a new movie, just start typing the name the movie you want to add.</div>
+                <div className={styles.helpText}>
+                  It's easy to add a new movie, just start typing the name the movie you want to add.
+                </div>
                 <div>You can also search using TMDB ID of a movie. eg. tmdb:71663</div>
               </div>
           }
 
+          {
+            !term && !hasExistingMovies ?
+              <div className={styles.message}>
+                <div className={styles.noMoviesText}>
+                  You haven't added any movies yet, do you want to import some or all of your movies first?
+                </div>
+                <div>
+                  <Button
+                    to="/add/import"
+                    kind={kinds.PRIMARY}
+                  >
+                    Import Existing Movies
+                  </Button>
+                </div>
+              </div> :
+              null
+          }
+
           <div />
         </PageContentBodyConnector>
       </PageContent>
@@ -181,6 +203,7 @@ AddNewMovie.propTypes = {
   isAdding: PropTypes.bool.isRequired,
   addError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasExistingMovies: PropTypes.bool.isRequired,
   onMovieLookupChange: PropTypes.func.isRequired,
   onClearMovieLookup: PropTypes.func.isRequired
 };

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -11,13 +11,15 @@ import AddNewMovie from './AddNewMovie';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.addMovie,
+    (state) => state.movies.items.length,
     (state) => state.router.location,
-    (addMovie, location) => {
+    (addMovie, existingMoviesCount, location) => {
       const { params } = parseUrl(location.search);
 
       return {
+        ...addMovie,
         term: params.term,
-        ...addMovie
+        hasExistingMovies: existingMoviesCount > 0
       };
     }
   );

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.js

@@ -55,8 +55,10 @@ class AddNewMovieModalContent extends Component {
       rootFolderPath,
       monitor,
       qualityProfileId,
+      folder,
       tags,
       isSmallScreen,
+      isWindows,
       onModalClose,
       onInputChange
     } = this.props;
@@ -97,6 +99,15 @@ class AddNewMovieModalContent extends Component {
                   <FormInputGroup
                     type={inputTypes.ROOT_FOLDER_SELECT}
                     name="rootFolderPath"
+                    valueOptions={{
+                      movieFolder: folder,
+                      isWindows
+                    }}
+                    selectedValueOptions={{
+                      movieFolder: folder,
+                      isWindows
+                    }}
+                    helpText={`'${folder}' subfolder will be created automatically`}
                     onChange={onInputChange}
                     {...rootFolderPath}
                   />
@@ -180,8 +191,10 @@ AddNewMovieModalContent.propTypes = {
   rootFolderPath: PropTypes.object,
   monitor: PropTypes.object.isRequired,
   qualityProfileId: PropTypes.object,
+  folder: PropTypes.string.isRequired,
   tags: PropTypes.object.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired,
   onInputChange: PropTypes.func.isRequired,
   onAddMoviePress: PropTypes.func.isRequired

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContentConnector.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { setAddMovieDefault, addMovie } from 'Store/Actions/addMovieActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import selectSettings from 'Store/Selectors/selectSettings';
 import AddNewMovieModalContent from './AddNewMovieModalContent';
 
@@ -11,7 +12,8 @@ function createMapStateToProps() {
   return createSelector(
     (state) => state.addMovie,
     createDimensionsSelector(),
-    (addMovieState, dimensions) => {
+    createSystemStatusSelector(),
+    (addMovieState, dimensions, systemStatus) => {
       const {
         isAdding,
         addError,
@@ -30,6 +32,7 @@ function createMapStateToProps() {
         isSmallScreen: dimensions.isSmallScreen,
         validationErrors,
         validationWarnings,
+        isWindows: systemStatus.isWindows,
         ...settings
       };
     }

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -52,6 +52,7 @@ class AddNewMovieSearchResult extends Component {
       status,
       overview,
       ratings,
+      folder,
       images,
       isExistingMovie,
       isExclusionMovie,
@@ -148,6 +149,7 @@ class AddNewMovieSearchResult extends Component {
           title={title}
           year={year}
           overview={overview}
+          folder={folder}
           images={images}
           onModalClose={this.onAddMovieModalClose}
         />
@@ -165,6 +167,7 @@ AddNewMovieSearchResult.propTypes = {
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
   ratings: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   isExistingMovie: PropTypes.bool.isRequired,
   isExclusionMovie: PropTypes.bool.isRequired,

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -262,6 +262,7 @@ class EnhancedSelectInput extends Component {
       isDisabled,
       hasError,
       hasWarning,
+      valueOptions,
       selectedValueOptions,
       selectedValueComponent: SelectedValueComponent,
       optionComponent: OptionComponent
@@ -363,6 +364,7 @@ class EnhancedSelectInput extends Component {
                                   key={v.key}
                                   id={v.key}
                                   isSelected={index === selectedIndex}
+                                  {...valueOptions}
                                   {...v}
                                   isMobile={false}
                                   onSelect={this.onSelect}
@@ -404,6 +406,7 @@ class EnhancedSelectInput extends Component {
                           key={v.key}
                           id={v.key}
                           isSelected={index === selectedIndex}
+                          {...valueOptions}
                           {...v}
                           isMobile={true}
                           onSelect={this.onSelect}
@@ -431,6 +434,7 @@ EnhancedSelectInput.propTypes = {
   isDisabled: PropTypes.bool,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
+  valueOptions: PropTypes.object.isRequired,
   selectedValueOptions: PropTypes.object.isRequired,
   selectedValueComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   optionComponent: PropTypes.elementType,
@@ -441,6 +445,7 @@ EnhancedSelectInput.defaultProps = {
   className: styles.enhancedSelect,
   disabledClassName: styles.isDisabled,
   isDisabled: false,
+  valueOptions: {},
   selectedValueOptions: {},
   selectedValueComponent: HintedSelectInputSelectedValue,
   optionComponent: HintedSelectInputOption

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -13,7 +12,7 @@ function createMapStateToProps() {
     (state) => state.rootFolders,
     (state, { includeNoChange }) => includeNoChange,
     (rootFolders, includeNoChange) => {
-      const values = _.map(rootFolders.items, (rootFolder) => {
+      const values = rootFolders.items.map((rootFolder) => {
         return {
           key: rootFolder.path,
           value: rootFolder.path,
@@ -85,7 +84,7 @@ class RootFolderSelectInputConnector extends Component {
       onChange
     } = this.props;
 
-    if (!value || !_.some(values, (v) => v.key === value) || value === ADD_NEW_KEY) {
+    if (!value || !values.some((v) => v.key === value) || value === ADD_NEW_KEY) {
       const defaultValue = values[0];
 
       if (defaultValue.key === ADD_NEW_KEY) {

frontend/src/Components/Form/RootFolderSelectInputOption.css

@@ -13,6 +13,15 @@
   }
 }
 
+.value {
+  display: flex;
+}
+
+.movieFolder {
+  flex: 0 0 auto;
+  color: $disabledColor;
+}
+
 .freeSpace {
   margin-left: 15px;
   color: $darkGray;

frontend/src/Components/Form/RootFolderSelectInputOption.js

@@ -7,14 +7,20 @@ import styles from './RootFolderSelectInputOption.css';
 
 function RootFolderSelectInputOption(props) {
   const {
+    id,
     value,
     freeSpace,
+    movieFolder,
     isMobile,
+    isWindows,
     ...otherProps
   } = props;
 
+  const slashCharacter = isWindows ? '\\' : '/';
+
   return (
     <EnhancedSelectInputOption
+      id={id}
       isMobile={isMobile}
       {...otherProps}
     >
@@ -23,7 +29,18 @@ function RootFolderSelectInputOption(props) {
         isMobile && styles.isMobile
       )}
       >
-        <div>{value}</div>
+        <div className={styles.value}>
+          {value}
+
+          {
+            movieFolder && id !== 'addNew' ?
+              <div className={styles.movieFolder}>
+                {slashCharacter}
+                {movieFolder}
+              </div> :
+              null
+          }
+        </div>
 
         {
           freeSpace != null &&
@@ -37,9 +54,12 @@ function RootFolderSelectInputOption(props) {
 }
 
 RootFolderSelectInputOption.propTypes = {
+  id: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   freeSpace: PropTypes.number,
-  isMobile: PropTypes.bool.isRequired
+  movieFolder: PropTypes.string,
+  isMobile: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool
 };
 
 export default RootFolderSelectInputOption;

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.css

@@ -7,10 +7,20 @@
   overflow: hidden;
 }
 
+.pathContainer {
+  @add-mixin truncate;
+  display: flex;
+  flex: 1 0 0;
+}
+
 .path {
   @add-mixin truncate;
+  flex: 0 1 auto;
+}
 
-  flex: 1 0 0;
+.movieFolder {
+  flex: 0 1 auto;
+  color: $disabledColor;
 }
 
 .freeSpace {

frontend/src/Components/Form/RootFolderSelectInputSelectedValue.js

@@ -8,17 +8,32 @@ function RootFolderSelectInputSelectedValue(props) {
   const {
     value,
     freeSpace,
+    movieFolder,
     includeFreeSpace,
+    isWindows,
     ...otherProps
   } = props;
 
+  const slashCharacter = isWindows ? '\\' : '/';
+
   return (
     <EnhancedSelectInputSelectedValue
       className={styles.selectedValue}
       {...otherProps}
     >
-      <div className={styles.path}>
-        {value}
+      <div className={styles.pathContainer}>
+        <div className={styles.path}>
+          {value}
+        </div>
+
+        {
+          movieFolder ?
+            <div className={styles.movieFolder}>
+              {slashCharacter}
+              {movieFolder}
+            </div> :
+            null
+        }
       </div>
 
       {
@@ -34,6 +49,8 @@ function RootFolderSelectInputSelectedValue(props) {
 RootFolderSelectInputSelectedValue.propTypes = {
   value: PropTypes.string,
   freeSpace: PropTypes.number,
+  movieFolder: PropTypes.string,
+  isWindows: PropTypes.bool,
   includeFreeSpace: PropTypes.bool.isRequired
 };