From 9ae2e2431507cf7cc8353bb921879da6479ad38d Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 2 Oct 2023 09:50:23 +0700
Subject: [PATCH] Fixed overwritten theme duplication in ThemeList (#18405)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs
https://www.notion.so/ghost/AdminX-feedback-27fc7f549bbf4a53bfa2e7b6e5643963?p=6a295239a38840f18b0a3b1710095074&pm=s

- There was an issue where an overwritten theme would be included in the
themes array twice when passed to the ThemeList component.
- We now remove the initial theme from the array when overwriting to
avoid duplications.

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 1260615</samp>

This pull request refactors the theme problem view component to make it
reusable and fixes a bug with theme name display in the theme modal. It
affects the files `InvalidThemeModal.tsx` and `ThemeModal.tsx` in the
admin-x-settings app.
---
 .../src/components/settings/site/ThemeModal.tsx             | 6 ++++++
 .../components/settings/site/theme/InvalidThemeModal.tsx    | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
index c68b4e97a6..33a94ab100 100644
--- a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
@@ -95,6 +95,12 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
                 okColor: 'red',
                 onOk: async (confirmModal) => {
                     setUploading(true);
+
+                    // this is to avoid the themes array from returning the overwritten theme.
+                    // find index of themeFileName in existingThemeNames and remove from the array
+                    const index = existingThemeNames.indexOf(themeFileName);
+                    themes.splice(index, 1);
+
                     await handleThemeUpload({file, onActivate: onClose});
                     setUploading(false);
                     setCurrentTab('installed');
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 8c304963fa..cef2adfa53 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
@@ -13,7 +13,7 @@ type FatalError = {
     };
   };
 
-  type FatalErrors = FatalError[];
+type FatalErrors = FatalError[];
 
 export const ThemeProblemView = ({problem}:{problem: ThemeProblem}) => {
     const [isExpanded, setExpanded] = useState(false);