🎨 Added error message from limit service to theme upload

no issue

- Addresses 634d2daa13 (r49241896)
- Uses limit service to display the configured error message

ghost/admin/app/components/modal-upgrade-host-limit-custom-theme.hbs

@@ -6,7 +6,11 @@
 
 <div class="modal-body">
     <p>
-        Your current plan only supports official themes. You can install them from the <a href="https://ghost.org/marketplace/">Ghost theme marketplace</a>.
+        {{#if this.model.limitErrorMessage}}
+            {{html-safe this.model.limitErrorMessage}}
+        {{else}}
+            Your current plan only supports official themes. You can install them from the <a href="https://ghost.org/marketplace/">Ghost theme marketplace</a>.
+        {{/if}}
     </p>
 </div>
 

ghost/admin/app/controllers/settings/theme.js

@@ -55,6 +55,7 @@ export default Controller.extend({
     themes: null,
     themeToDelete: null,
     displayUpgradeModal: false,
+    limitErrorMessage: null,
 
     init() {
         this._super(...arguments);
@@ -73,6 +74,17 @@ export default Controller.extend({
         async activateTheme(theme) {
             const isOverLimit = await this.limit.checkWouldGoOverLimit('customThemes', {value: theme.name});
             if (isOverLimit) {
+                try {
+                    await this.limit.limiter.errorIfWouldGoOverLimit('customThemes', {value: theme.name});
+                    this.limitErrorMessage = null;
+                } catch (error) {
+                    if (error.errorType !== 'HostLimitError') {
+                        throw error;
+                    }
+
+                    this.limitErrorMessage = error.message;
+                }
+
                 this.set('displayUpgradeModal', true);
                 return;
             }

ghost/admin/app/routes/settings/theme/uploadtheme.js

@@ -1,18 +1,42 @@
 import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
+import {inject as service} from '@ember/service';
 
-export default AuthenticatedRoute.extend({
+export default class UploadthemeRouter extends AuthenticatedRoute {
+    @service limit;
 
-    model() {
-        return this.store.findAll('theme');
-    },
+    limitErrorMessage = null
+
+    async model() {
+        // TODO: The "Upload a theme" button may welcome a spinner in case the limiter introduces
+        // an actual async operation. Without a spinner the UI may seem unresponsive after a click.
+        const [themes] = await Promise.all([
+            this.store.findAll('theme'),
+            // Sending a bad string to make sure it fails (empty string isn't valid)
+            this.limit.limiter.errorIfWouldGoOverLimit('customThemes', {value: '.'})
+                .then(() => {
+                    this.limitErrorMessage = null;
+                })
+                .catch((error) => {
+                    if (error.errorType === 'HostLimitError') {
+                        this.limitErrorMessage = error.message;
+                        return;
+                    }
+
+                    throw error;
+                })
+        ]);
+
+        return themes;
+    }
 
     setupController(controller, model) {
         controller.set('themes', model);
-    },
+        controller.set('limitErrorMessage', this.limitErrorMessage);
+    }
 
-    actions: {
+    actions = {
         cancel() {
             this.transitionTo('settings.theme');
         }
     }
-});
+}

ghost/admin/app/templates/settings/theme.hbs

@@ -104,6 +104,9 @@
 
 {{#if this.displayUpgradeModal}}
     <GhFullscreenModal @modal="upgrade-host-limit-custom-theme"
+        @model={{hash
+            limitErrorMessage=limitErrorMessage
+        }}
         @close={{action "hideUpgradeModal"}}
         @modifier="action wide" />
 {{/if}}

ghost/admin/app/templates/settings/theme/uploadtheme.hbs

@@ -1,7 +1,16 @@
-<GhFullscreenModal @modal={{if this.isAllowed "upload-theme" "upgrade-host-limit-custom-theme"}}
-    @model={{hash
-        themes=this.themes
-        activate=(route-action 'activateTheme')
-    }}
-    @close={{route-action "cancel"}}
-    @modifier="action wide" />
+{{#if this.isAllowed}}
+    <GhFullscreenModal @modal="upload-theme"
+        @model={{hash
+            themes=this.themes
+            activate=(route-action 'activateTheme')
+        }}
+        @close={{route-action "cancel"}}
+        @modifier="action wide" />
+{{else}}
+    <GhFullscreenModal @modal="upgrade-host-limit-custom-theme"
+        @model={{hash
+            limitErrorMessage=limitErrorMessage
+        }}
+        @close={{route-action "cancel"}}
+        @modifier="action wide" />
+{{/if}}