From b7884644870a824fd474fe935fa43381ec7b853a Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Sun, 31 Dec 2023 02:07:06 +0200
Subject: [PATCH] Fixed: Show errors when adding Root Folder

(cherry picked from commit 16d60a6586aeb458601214258da021ee154e5b6e)

Closes #9527
---
 .../SelectFolder/ImportMovieSelectFolder.js   |  2 +-
 frontend/src/RootFolder/RootFolders.tsx       |  2 +-
 .../RootFolder/AddRootFolder.tsx              | 60 +++++++++++++------
 src/NzbDrone.Core/Localization/Core/en.json   |  2 +-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
index 1a53a5e44d9..18352f27e7f 100644
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
+++ b/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>
                         {
diff --git a/frontend/src/RootFolder/RootFolders.tsx b/frontend/src/RootFolder/RootFolders.tsx
index d887b5b5617..3e21845a7a5 100644
--- a/frontend/src/RootFolder/RootFolders.tsx
+++ b/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>
     );
   }
 
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.tsx b/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.tsx
index 54a35e5bf69..dee012cc3fa 100644
--- a/frontend/src/Settings/MediaManagement/RootFolder/AddRootFolder.tsx
+++ b/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,24 +34,42 @@ function AddRootFolder() {
   }, [setIsAddNewRootFolderModalOpen]);
 
   return (
-    <div className={styles.addRootFolderButtonContainer}>
-      <Button
-        kind={kinds.PRIMARY}
-        size={sizes.LARGE}
-        onPress={onAddNewRootFolderPress}
-      >
-        <Icon className={styles.importButtonIcon} name={icons.DRIVE} />
-        {translate('AddRootFolder')}
-      </Button>
-
-      <FileBrowserModal
-        isOpen={isAddNewRootFolderModalOpen}
-        name="rootFolderPath"
-        value=""
-        onChange={onNewRootFolderSelect}
-        onModalClose={onAddRootFolderModalClose}
-      />
-    </div>
+    <>
+      {!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}
+          size={sizes.LARGE}
+          onPress={onAddNewRootFolderPress}
+        >
+          <Icon className={styles.importButtonIcon} name={icons.DRIVE} />
+          {translate('AddRootFolder')}
+        </Button>
+
+        <FileBrowserModal
+          isOpen={isAddNewRootFolderModalOpen}
+          name="rootFolderPath"
+          value=""
+          onChange={onNewRootFolderSelect}
+          onModalClose={onAddRootFolderModalClose}
+        />
+      </div>
+    </>
   );
 }
 
diff --git a/src/NzbDrone.Core/Localization/Core/en.json b/src/NzbDrone.Core/Localization/Core/en.json
index 08663909616..85bffea5a65 100644
--- a/src/NzbDrone.Core/Localization/Core/en.json
+++ b/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",