🐛 Fixed admin error when trying to overwrite a default theme (#20299)

ref
https://linear.app/tryghost/issue/ONC-57/trying-to-overwrite-the-default-source-theme-crashes-ghost

- When attempting to overwrite a default theme (source or casper), admin
would crash because this is not allowed by the API and the error was not
handled
- This fixes that by showing a modal with an error message when the user
tries to overwrite a default theme, and instructs the user to rename the
zip file

apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx

@@ -90,7 +90,22 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
     const onThemeUpload = async (file: File) => {
         const themeFileName = file?.name.replace(/\.zip$/, '');
         const existingThemeNames = themes.map(t => t.name);
-        if (existingThemeNames.includes(themeFileName)) {
+        if (isDefaultOrLegacyTheme({name: themeFileName})) {
+            NiceModal.show(ConfirmationModal, {
+                title: 'Cannot overwrite theme',
+                cancelLabel: 'Cancel',
+                okLabel: '',
+                prompt: (
+                    <>
+                        <p>Sorry, <strong>{themeFileName}</strong> is a default theme and cannot be overwritten.</p>
+                        <p>Please rename your zip file and try again.</p>
+                    </>
+                ),
+                onOk: async (confirmModal) => {
+                    confirmModal?.remove();
+                }
+            });
+        } else if (existingThemeNames.includes(themeFileName)) {
             NiceModal.show(ConfirmationModal, {
                 title: 'Overwrite theme',
                 prompt: (

apps/admin-x-settings/test/acceptance/site/theme.test.ts

@@ -207,4 +207,42 @@ test.describe('Theme settings', async () => {
 
         await expect(page.getByTestId('limit-modal')).toHaveText(/Upgrade to enable custom themes/);
     });
+
+    test('Prevents overwriting the default theme', async ({page}) => {
+        await mockApi({page, requests: {
+            ...globalDataRequests,
+            browseThemes: {method: 'GET', path: '/themes/', response: responseFixtures.themes},
+            uploadTheme: {method: 'POST', path: '/themes/upload/', response: {
+                themes: [{
+                    name: 'mytheme',
+                    package: {},
+                    active: false,
+                    templates: []
+                }]
+            }}
+        }});
+
+        await page.goto('/');
+
+        const designSection = page.getByTestId('design');
+
+        await designSection.getByRole('button', {name: 'Customize'}).click();
+
+        const designModal = page.getByTestId('design-modal');
+
+        await designModal.getByTestId('change-theme').click();
+
+        const modal = page.getByTestId('theme-modal');
+
+        await modal.getByRole('button', {name: 'Upload theme'}).click();
+
+        const fileChooserPromise = page.waitForEvent('filechooser');
+
+        await page.getByTestId('confirmation-modal').locator('label[for=theme-upload]').click();
+
+        const fileChooser = await fileChooserPromise;
+        await fileChooser.setFiles(`${__dirname}/../../utils/responses/source.zip`);
+
+        await expect(page.getByTestId('confirmation-modal')).toHaveText(/Cannot overwrite theme/);
+    });
 });