New: Series folder hint when selecting a root folder while adding a new series

frontend/src/AddSeries/AddNewSeries/AddNewSeries.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;
 }
 
+.noSeriesText {
+  margin-top: 80px;
+  margin-bottom: 20px;
+}
+
 .noResults {
   margin-bottom: 10px;
   font-weight: 300;

frontend/src/AddSeries/AddNewSeries/AddNewSeries.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-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';
@@ -78,7 +78,8 @@ class AddNewSeries extends Component {
   render() {
     const {
       error,
-      items
+      items,
+      hasExistingSeries
     } = this.props;
 
     const term = this.state.term;
@@ -155,13 +156,34 @@ class AddNewSeries extends Component {
           }
 
           {
-            !term &&
+            term ?
+              null :
               <div className={styles.message}>
-                <div className={styles.helpText}>It's easy to add a new series, just start typing the name the series you want to add.</div>
+                <div className={styles.helpText}>
+                  It's easy to add a new series, just start typing the name the series you want to add.
+                </div>
                 <div>You can also search using TVDB ID of a show. eg. tvdb:71663</div>
               </div>
           }
 
+          {
+            !term && !hasExistingSeries ?
+              <div className={styles.message}>
+                <div className={styles.noSeriesText}>
+                  You haven't added any series yet, do you want to import some or all of your series first?
+                </div>
+                <div>
+                  <Button
+                    to="/add/import"
+                    kind={kinds.PRIMARY}
+                  >
+                    Import Existing Series
+                  </Button>
+                </div>
+              </div> :
+              null
+          }
+
           <div />
         </PageContentBodyConnector>
       </PageContent>
@@ -176,6 +198,7 @@ AddNewSeries.propTypes = {
   isAdding: PropTypes.bool.isRequired,
   addError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  hasExistingSeries: PropTypes.bool.isRequired,
   onSeriesLookupChange: PropTypes.func.isRequired,
   onClearSeriesLookup: PropTypes.func.isRequired
 };

frontend/src/AddSeries/AddNewSeries/AddNewSeriesConnector.js

@@ -10,13 +10,15 @@ import AddNewSeries from './AddNewSeries';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.addSeries,
+    (state) => state.series.items.length,
     (state) => state.router.location,
-    (addSeries, location) => {
+    (addSeries, existingSeriesCount, location) => {
       const { params } = parseUrl(location.search);
 
       return {
+        ...addSeries,
         term: params.term,
-        ...addSeries
+        hasExistingSeries: existingSeriesCount > 0
       };
     }
   );

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContent.js

@@ -66,9 +66,11 @@ class AddNewSeriesModalContent extends Component {
       languageProfileId,
       seriesType,
       seasonFolder,
+      folder,
       tags,
       showLanguageProfile,
       isSmallScreen,
+      isWindows,
       onModalClose,
       onInputChange,
       ...otherProps
@@ -115,6 +117,15 @@ class AddNewSeriesModalContent extends Component {
                   <FormInputGroup
                     type={inputTypes.ROOT_FOLDER_SELECT}
                     name="rootFolderPath"
+                    valueOptions={{
+                      seriesFolder: folder,
+                      isWindows
+                    }}
+                    selectedValueOptions={{
+                      seriesFolder: folder,
+                      isWindows
+                    }}
+                    helpText={`'${folder}' subfolder will be created automatically`}
                     onChange={onInputChange}
                     {...rootFolderPath}
                   />
@@ -260,9 +271,11 @@ AddNewSeriesModalContent.propTypes = {
   languageProfileId: PropTypes.object,
   seriesType: PropTypes.object.isRequired,
   seasonFolder: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
   tags: PropTypes.object.isRequired,
   showLanguageProfile: PropTypes.bool.isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired,
   onInputChange: PropTypes.func.isRequired,
   onAddSeriesPress: PropTypes.func.isRequired

frontend/src/AddSeries/AddNewSeries/AddNewSeriesModalContentConnector.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { setAddSeriesDefault, addSeries } from 'Store/Actions/addSeriesActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import selectSettings from 'Store/Selectors/selectSettings';
 import AddNewSeriesModalContent from './AddNewSeriesModalContent';
 
@@ -12,7 +13,8 @@ function createMapStateToProps() {
     (state) => state.addSeries,
     (state) => state.settings.languageProfiles,
     createDimensionsSelector(),
-    (addSeriesState, languageProfiles, dimensions) => {
+    createSystemStatusSelector(),
+    (addSeriesState, languageProfiles, dimensions, systemStatus) => {
       const {
         isAdding,
         addError,
@@ -32,6 +34,7 @@ function createMapStateToProps() {
         isSmallScreen: dimensions.isSmallScreen,
         validationErrors,
         validationWarnings,
+        isWindows: systemStatus.isWindows,
         ...settings
       };
     }

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -53,6 +53,7 @@ class AddNewSeriesSearchResult extends Component {
       overview,
       statistics,
       ratings,
+      folder,
       images,
       isExistingSeries,
       isSmallScreen
@@ -160,6 +161,7 @@ class AddNewSeriesSearchResult extends Component {
           title={title}
           year={year}
           overview={overview}
+          folder={folder}
           images={images}
           onModalClose={this.onAddSeriesModalClose}
         />
@@ -178,6 +180,7 @@ AddNewSeriesSearchResult.propTypes = {
   overview: PropTypes.string,
   statistics: PropTypes.object.isRequired,
   ratings: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   isExistingSeries: PropTypes.bool.isRequired,
   isSmallScreen: PropTypes.bool.isRequired