FEATURE: ability to add all active components to theme (#8447)

FEATURE: ability to add all active components to theme (#8447)

  • FEATURE: ability to add all active components to theme

  • FIX: add a component to all themes takes only active ones

  • FIX: move select components/themes to top

  • FIX: improve defaultIsAvailable

  • FIX: Add filter(Boolean) and remove btn class

diff --git a/app/assets/javascripts/admin/controllers/admin-customize-themes-show.js.es6 b/app/assets/javascripts/admin/controllers/admin-customize-themes-show.js.es6
index a7308865ce..b9712761e5 100644
--- a/app/assets/javascripts/admin/controllers/admin-customize-themes-show.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-customize-themes-show.js.es6
@@ -23,7 +23,13 @@ export default Controller.extend({
   editRouteName: "adminCustomizeThemes.edit",
   parentThemesNames: mapBy("model.parentThemes", "name"),
   availableParentThemes: filterBy("allThemes", "component", false),
+  availableActiveParentThemes: filterBy("availableParentThemes", "isActive"),
   availableThemesNames: mapBy("availableParentThemes", "name"),
+  availableActiveThemesNames: mapBy("availableActiveParentThemes", "name"),
+  availableActiveChildThemes: filterBy("availableChildThemes", "hasParents"),
+  availableComponentsNames: mapBy("availableChildThemes", "name"),
+  availableActiveComponentsNames: mapBy("availableActiveChildThemes", "name"),
+  childThemesNames: mapBy("model.childThemes", "name"),
 
   @discourseComputed("model.editedFields")
   editedFieldsFormatted() {
@@ -60,7 +66,7 @@ export default Controller.extend({
   },
 
   @discourseComputed("model.parentThemes.[]")
-  relativesSelectorSettings() {
+  relativesSelectorSettingsForComponent() {
     return Ember.Object.create({
       list_type: "compact",
       type: "list",
@@ -71,12 +77,30 @@ export default Controller.extend({
       choices: this.availableThemesNames,
       default: this.parentThemesNames.join("|"),
       value: this.parentThemesNames.join("|"),
-      defaultValues: this.availableThemesNames.join("|"),
+      defaultValues: this.availableActiveThemesNames.join("|"),
       allThemes: this.allThemes,
       setDefaultValuesLabel: I18n.t("admin.customize.theme.add_all_themes")
     });
   },
 
+  @discourseComputed("model.parentThemes.[]")
+  relativesSelectorSettingsForTheme() {
+    return Ember.Object.create({
+      list_type: "compact",
+      type: "list",
+      preview: null,
+      anyValue: false,
+      setting: "child_theme_ids",
+      label: I18n.t("admin.customize.theme.included_components"),
+      choices: this.availableComponentsNames,
+      default: this.childThemesNames.join("|"),
+      value: this.childThemesNames.join("|"),
+      defaultValues: this.availableActiveComponentsNames.join("|"),
+      allThemes: this.allThemes,
+      setDefaultValuesLabel: I18n.t("admin.customize.theme.add_all")
+    });
+  },
+
   @discourseComputed("allThemes", "model.component", "model")
   availableChildThemes(allThemes) {
     if (!this.get("model.component")) {
diff --git a/app/assets/javascripts/admin/mixins/setting-component.js.es6 b/app/assets/javascripts/admin/mixins/setting-component.js.es6
index 9cec819404..63fa9bcf4b 100644
--- a/app/assets/javascripts/admin/mixins/setting-component.js.es6
+++ b/app/assets/javascripts/admin/mixins/setting-component.js.es6
@@ -100,6 +100,28 @@ export default Mixin.create({
     return settingDefault !== bufferedValue;
   },
 
+  @discourseComputed("buffered.value")
+  bufferedValues(bufferedValuesString) {
+    return (
+      bufferedValuesString && bufferedValuesString.split("|").filter(Boolean)
+    );
+  },
+
+  @discourseComputed("setting.defaultValues")
+  defaultValues(defaultValuesString) {
+    return (
+      defaultValuesString && defaultValuesString.split("|").filter(Boolean)
+    );
+  },
+
+  @discourseComputed("defaultValues", "bufferedValues")
+  defaultIsAvailable(defaultValues, bufferedValues) {
+    return (
+      defaultValues &&
+      !defaultValues.every(value => bufferedValues.includes(value))
+    );
+  },
+
   _watchEnterKey: on("didInsertElement", function() {
     $(this.element).on("keydown.setting-enter", ".input-setting-string", e => {
       if (e.keyCode === 13) {
@@ -216,7 +238,13 @@ export default Mixin.create({
     },
 
     setDefaultValues() {
-      this.set("buffered.value", this.get("setting.defaultValues"));
+      this.set(
+        "buffered.value",
+        this.bufferedValues
+          .concat(this.defaultValues)
+          .uniq()
+          .join("|")
+      );
     }
   }
 });
diff --git a/app/assets/javascripts/admin/models/theme.js.es6 b/app/assets/javascripts/admin/models/theme.js.es6
index fb00497c25..d1528bcd06 100644
--- a/app/assets/javascripts/admin/models/theme.js.es6
+++ b/app/assets/javascripts/admin/models/theme.js.es6
@@ -19,6 +19,7 @@ const Theme = RestModel.extend({
   isActive: or("default", "user_selectable"),
   isPendingUpdates: gt("remote_theme.commits_behind", 0),
   hasEditedFields: gt("editedFields.length", 0),
+  hasParents: gt("parent_themes.length", 0),
 
   @discourseComputed("theme_fields.[]")
   targets() {
diff --git a/app/assets/javascripts/admin/templates/components/site-setting.hbs b/app/assets/javascripts/admin/templates/components/site-setting.hbs
index 888a132a26..e67af55751 100644
--- a/app/assets/javascripts/admin/templates/components/site-setting.hbs
+++ b/app/assets/javascripts/admin/templates/components/site-setting.hbs
@@ -1,6 +1,6 @@
 <div class='setting-label'>
    <h3>{{unbound settingName}}</h3>
-   {{#if setting.defaultValues }}
+   {{#if defaultIsAvailable}}
      <a onClick={{action 'setDefaultValues'}}>{{setting.setDefaultValuesLabel}}</a>
    {{/if}}
 </div>
diff --git a/app/assets/javascripts/admin/templates/customize-themes-show.hbs b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
index c90e73e7a5..b203985056 100644
--- a/app/assets/javascripts/admin/templates/customize-themes-show.hbs
+++ b/app/assets/javascripts/admin/templates/customize-themes-show.hbs
@@ -99,23 +99,23 @@
         {{/if}}
 
         <span class='status-message'>
-            {{#if updatingRemote}}
-              {{i18n 'admin.customize.theme.updating'}}
-            {{else}}
-              {{#if model.remote_theme.commits_behind}}
-                {{i18n 'admin.customize.theme.commits_behind' count=model.remote_theme.commits_behind}}
-                {{#if model.remote_theme.github_diff_link}}
-                  <a href="{{model.remote_theme.github_diff_link}}">
-                    {{i18n 'admin.customize.theme.compare_commits'}}
-                  </a>
-                {{/if}}
-              {{else}}
-                {{#unless showRemoteError}}
-                  {{i18n 'admin.customize.theme.up_to_date'}} {{format-date model.remote_theme.updated_at leaveAgo="true"}}
-                {{/unless}}
+          {{#if updatingRemote}}
+            {{i18n 'admin.customize.theme.updating'}}
+          {{else}}
+            {{#if model.remote_theme.commits_behind}}
+              {{i18n 'admin.customize.theme.commits_behind' count=model.remote_theme.commits_behind}}
+              {{#if model.remote_theme.github_diff_link}}
+                <a href="{{model.remote_theme.github_diff_link}}">
+                  {{i18n 'admin.customize.theme.compare_commits'}}
+                </a>
               {{/if}}
+            {{else}}
+              {{#unless showRemoteError}}
+                {{i18n 'admin.customize.theme.up_to_date'}} {{format-date model.remote_theme.updated_at leaveAgo="true"}}
+              {{/unless}}
             {{/if}}
-          </span>
+          {{/if}}
+        </span>
       {{else}}
         <span class='status-message'>
           {{d-icon "info-circle"}} {{i18n "admin.customize.theme.imported_from_archive"}}
@@ -125,24 +125,29 @@
   {{/if}}
 
   {{#unless model.component}}
-    <div class="control-unit">
-      <div class="mini-title">{{i18n "admin.customize.theme.color_scheme"}}</div>
-      <div class="description">{{i18n "admin.customize.theme.color_scheme_select"}}</div>
-      <div class="control">
-        {{color-palettes
-          content=colorSchemes
-          filterable=true
-          forceEscape=true
-          value=colorSchemeId
-          icon="paint-brush"}}
+    {{#d-section class="form-horizontal theme settings"}}
+      <div class="row setting">

[... diff too long, it was truncated ...]

GitHub sha: bb69e894

2 Likes

@lis2 the new bufferedValues (and probably defaultValues) computed setting breaks some theme settings. The error I get in the console is Uncaught TypeError: bufferedValuesString.split is not a function.

Iā€™m getting the issue for a theme with a checkbox (boolean theme setting) and also on a theme setting with a number value, see Discourse Tab Bar for Mobile - theme - Discourse Meta.

1 Like

@pmusaraj thank you for finding this, I will take a look and make a fix right now

1 Like