Added Casper to the themes list

refs https://github.com/TryGhost/Team/issues/1149

- added Casper to the hardcoded official themes list with a ref of `'default'` so that the install theme process knows to process it differently
- updated the install-theme modal
  - removed the `willOverwriteDefault` getter because it's a path that can't be reached and is now handled differently
  - changed `installThemeTask` to only perform an activation when a default theme is passed in

ghost/admin/app/components/modals/design/install-theme.hbs

@@ -18,13 +18,6 @@
                 {{/if}}
             {{/if}}
 
-            {{#if this.willOverwriteDefault}}
-                <p>
-                    Sorry, the default Casper theme cannot be overwritten.<br>
-                    If you wish to make changes please download the theme and upload a renamed zip file.
-                </p>
-            {{/if}}
-
             {{#if this.installSuccess}}
                 {{#if this.hasWarningsOrErrors}}
                     <p>

ghost/admin/app/components/modals/design/install-theme.js

@@ -27,8 +27,12 @@ export default class InstallThemeModalComponent extends Component {
         return this.args.data.theme.name;
     }
 
+    get isDefaultTheme() {
+        return this.args.data.theme.ref === 'default';
+    }
+
     get isConfirming() {
-        return !this.installSuccess && !this.installError && !this.installFailure && !this.willOverwriteDefault;
+        return !this.installSuccess && !this.installError && !this.installFailure;
     }
 
     get installSuccess() {
@@ -39,12 +43,8 @@ export default class InstallThemeModalComponent extends Component {
         return !this.installSuccess && (this.validationErrors.length || this.fatalValidationErrors.length);
     }
 
-    get willOverwriteDefault() {
-        return this.themeName.toLowerCase() === 'casper';
-    }
-
     get willOverwriteExisting() {
-        return this.themes.findBy('name', this.themeName.toLowerCase());
+        return !this.isDefaultTheme && this.themes.findBy('name', this.themeName.toLowerCase());
     }
 
     get hasWarningsOrErrors() {
@@ -52,7 +52,7 @@ export default class InstallThemeModalComponent extends Component {
     }
 
     get shouldShowInstall() {
-        return !this.installSuccess && !this.installFailure && !this.willOverwriteDefault;
+        return !this.installSuccess && !this.installFailure;
     }
 
     @task
@@ -63,6 +63,18 @@ export default class InstallThemeModalComponent extends Component {
     @task
     *installThemeTask() {
         try {
+            if (this.isDefaultTheme) {
+                // default theme can't be installed, only activated
+                const defaultTheme = this.store.peekRecord('theme', this.args.data.theme.name.toLowerCase());
+                yield this.themeManagement.activateTask.perform(defaultTheme, {skipErrors: true});
+                this.installedTheme = defaultTheme;
+
+                // let modal opener do any other background stuff
+                this.args.data.onSuccess?.();
+
+                return true;
+            }
+
             const url = this.ghostPaths.url.api('themes/install') + `?source=github&ref=${this.args.data.theme.ref}`;
             const result = yield this.ajax.post(url);
 

ghost/admin/app/controllers/settings/design/change-theme.js

@@ -11,6 +11,12 @@ export default class ChangeThemeController extends Controller {
     @tracked themes = this.store.peekAll('theme');
 
     marketplaceThemes = [{
+        name: 'Casper',
+        category: 'Blog',
+        previewUrl: 'https://casper.ghost.io/',
+        ref: 'default',
+        image: 'assets/img/themes/Casper.jpg'
+    }, {
         name: 'Journal',
         category: 'Newsletter',
         url: 'https://github.com/TryGhost/Journal',

ghost/admin/app/services/theme-management.js

@@ -65,7 +65,7 @@ export default class ThemeManagementService extends Service {
     }
 
     @task
-    *activateTask(theme, options) {
+    *activateTask(theme, options = {}) {
         let resultModal = null;
 
         try {