Fixed: Show error if adding root folder fails

Closes #4570

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.css

@@ -30,3 +30,9 @@
 .importButtonIcon {
   margin-right: 8px;
 }
+
+.addErrorAlert {
+  composes: alert from '~Components/Alert.css';
+
+  margin: 20px 0;
+}

frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
+import Alert from 'Components/Alert';
 import Icon from 'Components/Icon';
 import FieldSet from 'Components/FieldSet';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
@@ -47,21 +48,27 @@ class ImportSeriesSelectFolder extends Component {
       isWindows,
       isFetching,
       isPopulated,
+      isSaving,
       error,
+      saveError,
       items
     } = this.props;
 
+    const hasRootFolders = items.length > 0;
+
     return (
       <PageContent title="Import Series">
         <PageContentBody>
           {
-            isFetching && !isPopulated &&
-              <LoadingIndicator />
+            isFetching && !isPopulated ?
+              <LoadingIndicator /> :
+              null
           }
 
           {
-            !isFetching && !!error &&
-              <div>Unable to load root folders</div>
+            !isFetching && error ?
+              <div>Unable to load root folders</div> :
+              null
           }
 
           {
@@ -87,7 +94,7 @@ class ImportSeriesSelectFolder extends Component {
                 </div>
 
                 {
-                  items.length > 0 ?
+                  hasRootFolders ?
                     <div className={styles.recentFolders}>
                       <FieldSet legend="Root Folders">
                         <RootFolders
@@ -97,21 +104,34 @@ class ImportSeriesSelectFolder extends Component {
                           items={items}
                         />
                       </FieldSet>
+                    </div> :
+                    null
+                }
 
-                      <Button
-                        kind={kinds.PRIMARY}
-                        size={sizes.LARGE}
-                        onPress={this.onAddNewRootFolderPress}
+                {
+                  !isSaving && saveError ?
+                    <Alert
+                      className={styles.addErrorAlert}
+                      kind={kinds.DANGER}
                     >
-                        <Icon
-                          className={styles.importButtonIcon}
-                          name={icons.DRIVE}
-                        />
-                        Choose another folder
-                      </Button>
-                    </div> :
+                      Unable to add root folder
 
-                    <div className={styles.startImport}>
+                      <ul>
+                        {
+                          saveError.responseJSON.map((e, index) => {
+                            return (
+                              <li key={index}>
+                                {e.errorMessage}
+                              </li>
+                            );
+                          })
+                        }
+                      </ul>
+                    </Alert> :
+                    null
+                }
+
+                <div className={hasRootFolders ? undefined : styles.startImport}>
                   <Button
                     kind={kinds.PRIMARY}
                     size={sizes.LARGE}
@@ -121,10 +141,13 @@ class ImportSeriesSelectFolder extends Component {
                       className={styles.importButtonIcon}
                       name={icons.DRIVE}
                     />
-                        Start Import
+                    {
+                      hasRootFolders ?
+                        'Choose another folder' :
+                        'Start Import'
+                    }
                   </Button>
                 </div>
-                }
 
                 <FileBrowserModal
                   isOpen={this.state.isAddNewRootFolderModalOpen}
@@ -145,7 +168,9 @@ ImportSeriesSelectFolder.propTypes = {
   isWindows: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,
   isPopulated: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
   error: PropTypes.object,
+  saveError: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   onNewRootFolderSelect: PropTypes.func.isRequired
 };