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

@@ -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);

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();
     }
 

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;

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

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>