From 93768ef6786623e28cd56d66f0d4083e21a7ddf7 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 19 Oct 2021 19:43:36 +0100
Subject: [PATCH] Added navigation back to design settings index after
 activating uploaded theme

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

- added a `@data.onActivationSuccess` option to the upload-theme modal that if present is called when activation of a theme is completed as part of the upload process
- added a `startThemeUpload()` action to the `change-theme` controller so that we can pass in an `onActivationSuccess` which transitions to the `design.settings.index` screen
- removed unnecessary `@tracked` decorators on class properties that have `store.peekAll('theme')` assigned to them
---
 ghost/admin/app/components/gh-nav-menu/design.js  |  3 ++-
 .../app/components/modals/design/upload-theme.js  |  1 +
 .../controllers/settings/design/change-theme.js   | 15 ++++++++++++++-
 ghost/admin/app/services/theme-management.js      |  6 ++----
 .../templates/settings/design/change-theme.hbs    |  2 +-
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/ghost/admin/app/components/gh-nav-menu/design.js b/ghost/admin/app/components/gh-nav-menu/design.js
index 038f2b226e..6aef53eb68 100644
--- a/ghost/admin/app/components/gh-nav-menu/design.js
+++ b/ghost/admin/app/components/gh-nav-menu/design.js
@@ -13,7 +13,8 @@ export default class DesignMenuComponent extends Component {
     @service themeManagement;
 
     @tracked openSection = null;
-    @tracked themes = this.store.peekAll('theme');
+
+    themes = this.store.peekAll('theme');
 
     constructor() {
         super(...arguments);
diff --git a/ghost/admin/app/components/modals/design/upload-theme.js b/ghost/admin/app/components/modals/design/upload-theme.js
index 6300c7cced..630d3089a4 100644
--- a/ghost/admin/app/components/modals/design/upload-theme.js
+++ b/ghost/admin/app/components/modals/design/upload-theme.js
@@ -151,6 +151,7 @@ export default class UploadThemeModalComponent extends Component {
     @action
     activate() {
         this.themeManagement.activateTask.perform(this.theme);
+        this.args.data.onActivationSuccess?.();
         this.args.close();
     }
 
diff --git a/ghost/admin/app/controllers/settings/design/change-theme.js b/ghost/admin/app/controllers/settings/design/change-theme.js
index 55139252e9..53f9fd6a6f 100644
--- a/ghost/admin/app/controllers/settings/design/change-theme.js
+++ b/ghost/admin/app/controllers/settings/design/change-theme.js
@@ -4,11 +4,13 @@ import {inject as service} from '@ember/service';
 import {tracked} from '@glimmer/tracking';
 
 export default class ChangeThemeController extends Controller {
+    @service router;
     @service store;
     @service themeManagement;
 
     @tracked showAdvanced = false;
-    @tracked themes = this.store.peekAll('theme');
+
+    themes = this.store.peekAll('theme');
 
     officialThemes = [{
         name: 'Casper',
@@ -154,6 +156,17 @@ export default class ChangeThemeController extends Controller {
         return themesList;
     }
 
+    @action
+    startThemeUpload(event) {
+        event?.preventDefault();
+
+        this.themeManagement.upload({
+            onActivationSuccess: () => {
+                this.router.transitionTo('settings.design');
+            }
+        });
+    }
+
     @action
     toggleAdvanced(event) {
         this.showAdvanced = !this.showAdvanced;
diff --git a/ghost/admin/app/services/theme-management.js b/ghost/admin/app/services/theme-management.js
index acbba52348..4aef96ac1e 100644
--- a/ghost/admin/app/services/theme-management.js
+++ b/ghost/admin/app/services/theme-management.js
@@ -45,9 +45,7 @@ export default class ThemeManagementService extends Service {
     }
 
     @action
-    async upload(event) {
-        event?.preventDefault();
-
+    async upload(options = {}) {
         try {
             // Sending a bad string to make sure it fails (empty string isn't valid)
             await this.limit.limiter.errorIfWouldGoOverLimit('customThemes', {value: '.'});
@@ -61,7 +59,7 @@ export default class ThemeManagementService extends Service {
             throw error;
         }
 
-        return this.modals.open('modals/design/upload-theme');
+        return this.modals.open('modals/design/upload-theme', options);
     }
 
     @task
diff --git a/ghost/admin/app/templates/settings/design/change-theme.hbs b/ghost/admin/app/templates/settings/design/change-theme.hbs
index eba468044c..64e7fbad15 100644
--- a/ghost/admin/app/templates/settings/design/change-theme.hbs
+++ b/ghost/admin/app/templates/settings/design/change-theme.hbs
@@ -3,7 +3,7 @@
         <h2 class="gh-canvas-title" data-test-screen-title>Themes</h2>
         <section class="view-actions">
             <button type="button" class="mr4 gh-btn {{if this.showAdvanced "gh-btn-green"}}" {{on "click" this.toggleAdvanced}}><span>Advanced</span></button>
-            <button type="button" class="gh-btn gh-btn-primary" {{on "click" this.themeManagement.upload}}><span>Upload theme</span></button>
+            <button type="button" class="gh-btn gh-btn-primary" {{on "click" this.startThemeUpload}}><span>Upload theme</span></button>
         </section>
     </GhCanvasHeader>