🐛 Fixed bug preventing Casper from being activated from gallery (#18697)

fixes TryGhost/Product#4038

- When selecting a theme from the gallery view of official themes, the logic needs to be different for default/legacy themes (source & casper) vs other official themes. For default/legacy themes, they will already be installed so we just need to activate them, not install them.
- Previously this logic was applied only to the default theme (currently source) but was not applied to Casper, which led to errors when trying to install Casper, since it is protected from being overwritten
- This change treats default/legacy themes the same by skipping the install process and going straight to activating for casper and source

apps/admin-x-settings/src/api/themes.ts

@@ -1,3 +1,4 @@
+import {OfficialTheme} from '../components/providers/ServiceProvider';
 import {createMutation, createQuery} from '../utils/api/hooks';
 import {customThemeSettingsDataType} from './customThemeSettings';
 
@@ -132,12 +133,16 @@ export function isActiveTheme(theme: Theme): boolean {
     return theme.active;
 }
 
-export function isDefaultTheme(theme: Theme): boolean {
-    return theme.name === 'source';
+export function isDefaultTheme(theme: Theme | OfficialTheme): boolean {
+    return theme.name.toLowerCase() === 'source';
 }
 
-export function isLegacyTheme(theme: Theme): boolean {
-    return theme.name === 'casper';
+export function isLegacyTheme(theme: Theme | OfficialTheme): boolean {
+    return theme.name.toLowerCase() === 'casper';
+}
+
+export function isDefaultOrLegacyTheme(theme: Theme | OfficialTheme): boolean {
+    return isDefaultTheme(theme) || isLegacyTheme(theme);
 }
 
 export function isDeletableTheme(theme: Theme): boolean {

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

@@ -16,7 +16,7 @@ import ThemePreview from './theme/ThemePreview';
 import useHandleError from '../../../utils/api/handleError';
 import useRouting from '../../../hooks/useRouting';
 import {HostLimitError, useLimiter} from '../../../hooks/useLimiter';
-import {InstalledTheme, Theme, ThemesInstallResponseType, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '../../../api/themes';
+import {InstalledTheme, Theme, ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '../../../api/themes';
 import {OfficialTheme} from '../../providers/ServiceProvider';
 import {showToast} from '../../../admin-x-ds/global/Toast';
 
@@ -364,7 +364,7 @@ const ChangeThemeModal: React.FC<ChangeThemeModalProps> = ({source, themeRef}) =
             let prompt = <></>;
 
             // default theme can't be installed, only activated
-            if (selectedTheme.ref === 'default') {
+            if (isDefaultOrLegacyTheme(selectedTheme)) {
                 title = 'Activate theme';
                 prompt = <>By clicking below, <strong>{selectedTheme.name}</strong> will automatically be activated as the theme for your site.</>;
             } else {

apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx

@@ -9,7 +9,7 @@ import PageHeader from '../../../../admin-x-ds/global/layout/PageHeader';
 import React, {useState} from 'react';
 import Select, {SelectOption} from '../../../../admin-x-ds/global/form/Select';
 import {OfficialTheme, ThemeVariant} from '../../../providers/ServiceProvider';
-import {Theme} from '../../../../api/themes';
+import {Theme, isDefaultOrLegacyTheme} from '../../../../api/themes';
 
 const hasVariants = (theme: OfficialTheme) => theme.variants && theme.variants.length > 0;
 
@@ -72,14 +72,14 @@ const ThemePreview: React.FC<{
 
     if (isInstalling) {
         installButtonLabel = 'Installing...';
-    } else if (selectedTheme.ref === 'default' && !installedTheme?.active) {
+    } else if (isDefaultOrLegacyTheme(selectedTheme) && !installedTheme?.active) {
         installButtonLabel = `Activate ${selectedTheme.name}`;
     } else if (installedTheme) {
         installButtonLabel = `Update ${selectedTheme.name}`;
     }
 
     const handleInstall = () => {
-        if (installedTheme && selectedTheme.ref !== 'default') {
+        if (installedTheme && !isDefaultOrLegacyTheme(selectedTheme)) {
             NiceModal.show(ConfirmationModal, {
                 title: 'Overwrite theme',
                 prompt: (