From c790959e0973994e8f11ca02ee17aaf80cfc1419 Mon Sep 17 00:00:00 2001
From: Sag <guptazy@gmail.com>
Date: Wed, 1 May 2024 13:13:00 +0200
Subject: [PATCH] Fixed error rendering for theme uploads (#20097)

ref https://linear.app/tryghost/issue/ENG-842/gluster-file-name-length-limit

- when uploading a theme, Admin did not always render errors properly, zip extraction errors for example
- with this change, we do not change the API responses but rather update Admin to handle both types of error responses
---
 .../settings/site/theme/InvalidThemeModal.tsx        | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/theme/InvalidThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/InvalidThemeModal.tsx
index 8a7b7d7ba9..e827414145 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/InvalidThemeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/InvalidThemeModal.tsx
@@ -6,7 +6,7 @@ import {ThemeProblem} from '@tryghost/admin-x-framework/api/themes';
 type FatalError = {
     details: {
       errors: ThemeProblem[];
-    };
+    }|string;
   };
 
 export type FatalErrors = FatalError[];
@@ -63,7 +63,15 @@ const InvalidThemeModal: React.FC<{
     if (fatalErrors) {
         warningPrompt = <div className="mt-10">
             <List title="Errors">
-                {fatalErrors?.map(error => error?.details?.errors?.map(err => <ThemeProblemView problem={err} />))}
+                {fatalErrors.map((error) => {
+                    if (typeof error.details === 'object' && error.details.errors && error.details.errors.length > 0) {
+                        return error.details.errors.map(err => <ThemeProblemView problem={err} />);
+                    } else if (typeof error.details === 'string') {
+                        return <ListItem title={error.details} />;
+                    } else {
+                        return null;
+                    }
+                })}
             </List>
         </div>;
     }