Added custom theme setting visibility (#17763)

refs https://github.com/TryGhost/Product/issues/3716

ghost/admin/.lint-todo

@@ -586,3 +586,5 @@ remove|ember-template-lint|no-action|401|46|401|46|df19e5858021b80de54052c953e70
 remove|ember-template-lint|no-action|433|46|433|46|3afa41e4d86dd7e5c049a762f0f761c2464a5f96|1688342400000|1698714000000|1703898000000|app/components/gh-portal-links.hbs
 remove|ember-template-lint|no-action|465|46|465|46|f2f0f3f512f141fdd821333c873f5052813bb491|1688342400000|1698714000000|1703898000000|app/components/gh-portal-links.hbs
 remove|ember-template-lint|no-unused-block-params|1|0|1|0|e25f7866ab4ee682b08edf3b29a1351e4079538e|1688342400000|1698714000000|1703898000000|lib/koenig-editor/addon/components/koenig-card-header.hbs
+remove|ember-template-lint|no-invalid-interactive|7|32|7|32|508e64575a985432d0588f3291a126c4b62e68d8|1688342400000|1698714000000|1703898000000|app/components/gh-nav-menu/design.hbs
+add|ember-template-lint|no-invalid-interactive|7|32|7|32|2da5baf637c4f17f4acd498968b6022ffc0f3105|1692316800000|1702688400000|1707872400000|app/components/gh-nav-menu/design.hbs

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

@@ -33,7 +33,7 @@
                             <div class="gh-nav-design-settings" data-test-nav-group={{group.key}}>
                                 <Settings::Design::ThemeSettingsForm
                                     @themeSettings={{group.settings}}
-                                    @updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
+                                    @onChange={{this.handleThemeSettingChange}}
                                 />
                             </div>
                         {{/liquid-if}}

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

@@ -70,6 +70,12 @@ export default class DesignMenuComponent extends Component {
         this.openSection = null;
     }
 
+    @action
+    handleThemeSettingChange() {
+        this.customThemeSettings.rebuildSettingGroups();
+        this.themeManagement.updatePreviewHtmlTask.perform();
+    }
+
     openDefaultSection() {
         const noCustomSettings = isEmpty(this.customThemeSettings.settings);
 

ghost/admin/app/components/settings/design/theme-settings-form.hbs

@@ -2,19 +2,19 @@
     <form>
         {{#each @themeSettings as |setting index|}}
             {{#if (eq setting.type "select")}}
-                <CustomThemeSettings::Select @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
+                <CustomThemeSettings::Select @setting={{setting}} @index={{index}} @onChange={{@onChange}} />
             {{/if}}
             {{#if (eq setting.type "boolean")}}
-                <CustomThemeSettings::Boolean @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
+                <CustomThemeSettings::Boolean @setting={{setting}} @index={{index}} @onChange={{@onChange}} />
             {{/if}}
             {{#if (eq setting.type "color")}}
-                <CustomThemeSettings::Color @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
+                <CustomThemeSettings::Color @setting={{setting}} @index={{index}} @onChange={{@onChange}} />
             {{/if}}
             {{#if (eq setting.type "text")}}
-                <CustomThemeSettings::Text @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
+                <CustomThemeSettings::Text @setting={{setting}} @index={{index}} @onChange={{@onChange}} />
             {{/if}}
             {{#if (eq setting.type "image")}}
-                <CustomThemeSettings::Image @setting={{setting}} @index={{index}} @onChange={{@updatePreview}} />
+                <CustomThemeSettings::Image @setting={{setting}} @index={{index}} @onChange={{@onChange}} />
             {{/if}}
         {{/each}}
     </form>

ghost/admin/app/models/custom-theme-setting.js

@@ -7,5 +7,6 @@ export default Model.extend({
     options: attr(),
     default: attr('string'),
     value: attr(),
-    group: attr('string')
+    group: attr('string'),
+    visibility: attr('string')
 });

ghost/admin/app/services/custom-theme-settings.js

@@ -1,4 +1,5 @@
 import Service, {inject as service} from '@ember/service';
+import nql from '@tryghost/nql';
 import {isEmpty} from '@ember/utils';
 import {run} from '@ember/runloop';
 import {task} from 'ember-concurrency';
@@ -92,6 +93,10 @@ export default class CustomThemeSettingsServices extends Service {
         this.settings.forEach(setting => setting.rollbackAttributes());
     }
 
+    rebuildSettingGroups() {
+        this.settingGroups = this._buildSettingGroups(this.settings);
+    }
+
     _buildSettingGroups(settings) {
         if (!settings || !settings.length) {
             return [];
@@ -111,7 +116,15 @@ export default class CustomThemeSettingsServices extends Service {
         }
 
         this.KNOWN_GROUPS.forEach((knownGroup) => {
-            const groupSettings = settings.filter(setting => setting.group === knownGroup.key);
+            const groupSettings = settings
+                .filter(setting => setting.group === knownGroup.key)
+                .filter((setting) => {
+                    if (setting.visibility) {
+                        return nql(setting.visibility).queryJSON(this.keyValueObject);
+                    }
+
+                    return true;
+                });
 
             if (groupSettings.length) {
                 groups.push(Object.assign({}, knownGroup, {settings: groupSettings}));