From d6f2b46678d025ee2670852fbd234ced54e864cb Mon Sep 17 00:00:00 2001
From: David Glick <david@glicksoftware.com>
Date: Tue, 5 Nov 2024 12:18:42 -0800
Subject: [PATCH] URL Management control panel: show errors from CSV upload
 (#6473)

---
 packages/volto/news/6473.bugfix                 |  1 +
 .../components/manage/Controlpanels/Aliases.jsx | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 packages/volto/news/6473.bugfix

diff --git a/packages/volto/news/6473.bugfix b/packages/volto/news/6473.bugfix
new file mode 100644
index 0000000000..f69b52f0e1
--- /dev/null
+++ b/packages/volto/news/6473.bugfix
@@ -0,0 +1 @@
+URL Management control panel: Show errors from a failed CSV upload. @davisagli
diff --git a/packages/volto/src/components/manage/Controlpanels/Aliases.jsx b/packages/volto/src/components/manage/Controlpanels/Aliases.jsx
index d607e4949b..7b8375da93 100644
--- a/packages/volto/src/components/manage/Controlpanels/Aliases.jsx
+++ b/packages/volto/src/components/manage/Controlpanels/Aliases.jsx
@@ -156,6 +156,7 @@ const Aliases = (props) => {
   const [editingData, setEditingData] = useState(null);
   const [uploadModalOpen, setUploadModalOpen] = useState(false);
   const [uploadError, setUploadError] = useState(null);
+  const [csvErrors, setCSVErrors] = useState([]);
   const isClient = useClient();
 
   const updateResults = useCallback(() => {
@@ -273,6 +274,7 @@ const Aliases = (props) => {
           .then(() => {
             updateResults();
             setUploadError(null);
+            setCSVErrors([]);
             setUploadModalOpen(false);
             toast.success(
               <Toast
@@ -284,6 +286,7 @@ const Aliases = (props) => {
           })
           .catch((error) => {
             setUploadError(error.response?.body?.message);
+            setCSVErrors(error.response?.body?.csv_errors ?? []);
           });
       });
   };
@@ -388,6 +391,20 @@ const Aliases = (props) => {
                               /people/JoeT,/Users/joe-thurston,2018-12-31,false
                             </code>
                           </p>
+                          {csvErrors.length ? (
+                            <div
+                              className="ui error message"
+                              style={{ 'overflow-x': 'auto' }}
+                            >
+                              <pre>
+                                Errors:{'\n'}
+                                {csvErrors.map(
+                                  (err) =>
+                                    `${err.line_number}: ${err.line} - ${err.message}\n`,
+                                )}
+                              </pre>
+                            </div>
+                          ) : null}
                         </>
                       }
                       schema={{