Added static version of theme errors notification

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

- a labs flag had to be created so we avoid working in branches
- permanent notification toast was added to make theme errors more discoverable
- static modal was needed to hold theme error details

ghost/admin/app/components/gh-nav-menu/footer.hbs

@@ -1,4 +1,11 @@
 <div class="gh-nav-bottom">
+    {{#if (feature 'themeErrorsNotification')}}
+    <button type="button" class="gh-theme-error-toast" {{on "click" (fn this.openThemeErrors null)}}>
+        <span class="gh-notification-title">Your theme contains errors</span>
+        <span class="gh-theme-error-p">Some functionality on your site may be limited &rarr;</span>
+    </button>
+    {{/if}}
+    
     <div class="flex items-center justify-between">
         <div class="pe-all">
             <GhBasicDropdown @horizontalPosition="left" @verticalPosition="above" @calculatePosition={{this.userDropdownPosition}} as |dropdown|>

ghost/admin/app/components/gh-nav-menu/footer.js

@@ -1,6 +1,8 @@
+import AboutModal from '../modals/theme-errors';
 import Component from '@ember/component';
 import calculatePosition from 'ember-basic-dropdown/utils/calculate-position';
 import classic from 'ember-classic-decorator';
+import {action} from '@ember/object';
 import {and, match} from '@ember/object/computed';
 import {inject} from 'ghost-admin/decorators/inject';
 import {inject as service} from '@ember/service';
@@ -11,6 +13,7 @@ export default class Footer extends Component {
     @service router;
     @service whatsNew;
     @service feature;
+    @service modals;
 
     @inject config;
 
@@ -20,6 +23,11 @@ export default class Footer extends Component {
     @match('router.currentRouteName', /^settings/)
         isSettingsRoute;
 
+    @action
+    openThemeErrors() {
+        this.advancedModal = this.modals.open(AboutModal);
+    }
+
     // equivalent to "left: auto; right: -20px"
     userDropdownPosition(trigger, dropdown) {
         let {horizontalPosition, verticalPosition, style} = calculatePosition(...arguments);

ghost/admin/app/components/modals/theme-errors.hbs

@@ -0,0 +1,22 @@
+<div class="modal-content gh-about-modal">
+    <header class="modal-header">
+        <h1>Theme errors</h1>
+    </header>
+    <button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
+
+    <div class="modal-body">
+        <div>
+            <h2 class="mb0 mt4 f5 fw6">Fatal Errors</h2>
+            <p class="mb2">Must-fix to activate theme</p>
+        </div>
+
+        <div>[fatal errors placeholder]</div>
+
+        <div>
+            <h2 class="mb0 mt4 f5 fw6">Errors</h2>
+            <p class="mb2">Highly recommended to fix, functionality <strong>could</strong> be restricted</p>
+        </div>
+
+        <div>[errors placeholder]</div>
+    </div>
+</div>

ghost/admin/app/components/modals/theme-errors.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class ThemeErrorsModal extends Component {
+    constructor() {
+        super(...arguments);
+    }
+}

ghost/admin/app/services/feature.js

@@ -64,6 +64,7 @@ export default class FeatureService extends Service {
     @feature('audienceFeedback') audienceFeedback;
     @feature('suppressionList') suppressionList;
     @feature('emailStability') emailStability;
+    @feature('themeErrorsNotification') themeErrorsNotification;
 
     _user = null;
 

ghost/admin/app/styles/layouts/main.css

@@ -2147,3 +2147,22 @@ section.gh-ds h2 {
         justify-content: center;
     }
 }
+
+
+/* Theme error toast and modal */
+.gh-theme-error-toast {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.3rem;
+    text-align: left;
+    line-height: 1.35em;
+    padding: 20px;
+    margin-bottom: 32px;
+    color: #fff;
+    background: var(--red);
+    border-radius: 6px;
+}
+
+.gh-theme-error-toast .gh-notification-title {
+    margin: 0 0 6px 0;
+}

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

@@ -164,7 +164,7 @@
                 <div class="gh-expandable-block">
                     <div class="gh-expandable-header">
                         <div>
-                            <h4 class="gh-expandable-title">URL Cache</h4>
+                            <h4 class="gh-expandable-title">URL cache</h4>
                             <p class="gh-expandable-description">
                                Enable URL Caching
                             </p>
@@ -203,7 +203,7 @@
                 <div class="gh-expandable-block">
                     <div class="gh-expandable-header">
                         <div>
-                            <h4 class="gh-expandable-title">Suppression List</h4>
+                            <h4 class="gh-expandable-title">Suppression list</h4>
                             <p class="gh-expandable-description">
                                 Allows checking whether a member's email is blocked and removing emails from the suppression list.
                             </p>
@@ -226,6 +226,19 @@
                         </div>
                     </div>
                 </div>
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Theme errors notification</h4>
+                            <p class="gh-expandable-description">
+                                Improves discoverability of theme errors
+                            </p>
+                        </div>
+                        <div class="for-switch">
+                            <GhFeatureFlag @flag="themeErrorsNotification" />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {{/if}}

ghost/core/core/shared/labs.js

@@ -31,7 +31,8 @@ const ALPHA_FEATURES = [
     'beforeAfterCard',
     'lexicalEditor',
     'suppressionList',
-    'emailStability'
+    'emailStability',
+    'themeErrorsNotification'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];