Fixed: Show errors when adding Root Folder

(cherry picked from commit 16d60a6586aeb458601214258da021ee154e5b6e)

Closes #9527

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -148,7 +148,7 @@ class ImportMovieSelectFolder extends Component {
                       className={styles.addErrorAlert}
                       kind={kinds.DANGER}
                     >
-                      {translate('UnableToAddRootFolder')}
+                      {translate('AddRootFolderError')}
 
                       <ul>
                         {

frontend/src/RootFolder/RootFolders.tsx

@@ -49,7 +49,7 @@ function RootFolders() {
 
   if (!isFetching && !!error) {
     return (
-      <Alert kind={kinds.DANGER}>{translate('UnableToLoadRootFolders')}</Alert>
+      <Alert kind={kinds.DANGER}>{translate('RootFoldersLoadError')}</Alert>
     );
   }
 

frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.tsx

@@ -1,14 +1,18 @@
 import React, { useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
 import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import { addRootFolder } from 'Store/Actions/rootFolderActions';
+import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
 import translate from 'Utilities/String/translate';
 import styles from './AddRootFolder.css';
 
 function AddRootFolder() {
+  const { isSaving, saveError } = useSelector(createRootFoldersSelector());
+
   const dispatch = useDispatch();
 
   const [isAddNewRootFolderModalOpen, setIsAddNewRootFolderModalOpen] =
@@ -30,6 +34,23 @@ function AddRootFolder() {
   }, [setIsAddNewRootFolderModalOpen]);
 
   return (
+    <>
+      {!isSaving && saveError ? (
+        <Alert kind={kinds.DANGER}>
+          {translate('AddRootFolderError')}
+
+          <ul>
+            {Array.isArray(saveError.responseJSON) ? (
+              saveError.responseJSON.map((e, index) => {
+                return <li key={index}>{e.errorMessage}</li>;
+              })
+            ) : (
+              <li>{JSON.stringify(saveError.responseJSON)}</li>
+            )}
+          </ul>
+        </Alert>
+      ) : null}
+
       <div className={styles.addRootFolderButtonContainer}>
         <Button
           kind={kinds.PRIMARY}
@@ -48,6 +69,7 @@ function AddRootFolder() {
           onModalClose={onAddRootFolderModalClose}
         />
       </div>
+    </>
   );
 }
 

src/NzbDrone.Core/Localization/Core/en.json

@@ -30,6 +30,7 @@
   "AddRemotePathMapping": "Add Remote Path Mapping",
   "AddRestriction": "Add Restriction",
   "AddRootFolder": "Add Root Folder",
+  "AddRootFolderError": "Unable to add root folder",
   "AddToDownloadQueue": "Add to download queue",
   "Added": "Added",
   "AddedToDownloadQueue": "Added to download queue",
@@ -1253,7 +1254,6 @@
   "UnableToAddANewNotificationPleaseTryAgain": "Unable to add a new notification, please try again.",
   "UnableToAddANewQualityProfilePleaseTryAgain": "Unable to add a new quality profile, please try again.",
   "UnableToAddANewRemotePathMappingPleaseTryAgain": "Unable to add a new remote path mapping, please try again.",
-  "UnableToAddRootFolder": "Unable to add root folder",
   "UnableToLoadAltTitle": "Unable to load alternative titles.",
   "UnableToLoadAutoTagging": "Unable to load auto tagging",
   "UnableToLoadCollections": "Unable to load collections",