From 0ea5f9228d82d7b3d7fbd39c0164ff42eba77c13 Mon Sep 17 00:00:00 2001
From: Michael Barrett <mike@ghost.org>
Date: Mon, 21 Aug 2023 11:26:51 +0100
Subject: [PATCH] Added custom theme setting visibility (#17763)

refs https://github.com/TryGhost/Product/issues/3716
---
 ghost/admin/.lint-todo                            |  2 ++
 ghost/admin/app/components/gh-nav-menu/design.hbs |  2 +-
 ghost/admin/app/components/gh-nav-menu/design.js  |  6 ++++++
 .../settings/design/theme-settings-form.hbs       | 10 +++++-----
 ghost/admin/app/models/custom-theme-setting.js    |  3 ++-
 ghost/admin/app/services/custom-theme-settings.js | 15 ++++++++++++++-
 6 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/ghost/admin/.lint-todo b/ghost/admin/.lint-todo
index b24982abc0..68d6946202 100644
--- a/ghost/admin/.lint-todo
+++ b/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
diff --git a/ghost/admin/app/components/gh-nav-menu/design.hbs b/ghost/admin/app/components/gh-nav-menu/design.hbs
index 4fe2afe4cf..77db8722b3 100644
--- a/ghost/admin/app/components/gh-nav-menu/design.hbs
+++ b/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}}
diff --git a/ghost/admin/app/components/gh-nav-menu/design.js b/ghost/admin/app/components/gh-nav-menu/design.js
index 684602fb98..e33c2eb5e0 100644
--- a/ghost/admin/app/components/gh-nav-menu/design.js
+++ b/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);
 
diff --git a/ghost/admin/app/components/settings/design/theme-settings-form.hbs b/ghost/admin/app/components/settings/design/theme-settings-form.hbs
index 8e12981bd2..a3cc9b2919 100644
--- a/ghost/admin/app/components/settings/design/theme-settings-form.hbs
+++ b/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>
diff --git a/ghost/admin/app/models/custom-theme-setting.js b/ghost/admin/app/models/custom-theme-setting.js
index 6ca60af88b..b93eb88cba 100644
--- a/ghost/admin/app/models/custom-theme-setting.js
+++ b/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')
 });
diff --git a/ghost/admin/app/services/custom-theme-settings.js b/ghost/admin/app/services/custom-theme-settings.js
index 00b89b8ffa..6826626f7d 100644
--- a/ghost/admin/app/services/custom-theme-settings.js
+++ b/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}));