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

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")) {

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("|")
+      );
     }
   }
 });

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() {

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>

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">
+        <div class="setting-label">
+          {{i18n "admin.customize.theme.color_scheme"}}
+        </div>
+        <div class="setting-value">
+          {{color-palettes
+            content=colorSchemes
+            filterable=true
+            forceEscape=true
+            value=colorSchemeId
+            icon="paint-brush"}}
 
-         {{#if colorSchemeChanged}}
-            {{d-button action=(action "changeScheme") class="btn-primary submit-edit" icon="check"}}
-            {{d-button action=(action "cancelChangeScheme") class="btn-default cancel-edit" icon="times"}}
-         {{/if}}
+          <div class="desc">{{i18n "admin.customize.theme.color_scheme_select"}}</div>
+        </div>
+        <div class="setting-controls">
+          {{#if colorSchemeChanged}}
+            {{d-button action=(action "changeScheme") class="ok submit-edit" icon="check"}}
+            {{d-button action=(action "cancelChangeScheme") class="cancel cancel-edit" icon="times"}}
+          {{/if}}
+        </div>
       </div>
-      {{#link-to 'adminCustomize.colors' class="btn btn-default edit"}}{{i18n 'admin.customize.colors.edit'}}{{/link-to}}
-    </div>
+    {{/d-section}}
   {{/unless}}
 
   {{#if parentThemes}}
@@ -156,15 +161,18 @@
     </div>
   {{/if}}
 
-  {{#if model.component }}
-    <div class="control-unit">
-      <div class="mini-title">{{i18n "admin.customize.theme.title"}}</div>
-      {{#d-section class="form-horizontal theme settings"}}
-        <div class="row setting">
-          {{theme-setting-relatives-selector setting=relativesSelectorSettings model=model class="theme-setting"}}
-        </div>
-      {{/d-section}}
-    </div>
+  {{#if model.component}}
+    {{#d-section class="form-horizontal theme settings"}}
+      <div class="row setting">
+        {{theme-setting-relatives-selector setting=relativesSelectorSettingsForComponent model=model class="theme-setting"}}
+      </div>
+    {{/d-section}}
+  {{else}}
+    {{#d-section class="form-horizontal theme settings"}}
+      <div class="row setting">
+        {{theme-setting-relatives-selector setting=relativesSelectorSettingsForTheme model=model class="theme-setting"}}
+      </div>
+    {{/d-section}}
   {{/if}}
 
   <div class="control-unit">
@@ -193,12 +201,12 @@
     {{#if model.uploads}}
       <ul class='removable-list'>
         {{#each model.uploads as |upload|}}
-        <li>
-          <span class='col'>${{upload.name}}: <a href={{upload.url}} target='_blank'>{{upload.filename}}</a></span>
-          <span class='col'>
-            {{d-button action=(action "removeUpload") actionParam=upload class="second btn-default btn-default cancel-edit" icon="times"}}
-          </span>
-        </li>
+          <li>
+            <span class='col'>${{upload.name}}: <a href={{upload.url}} target='_blank'>{{upload.filename}}</a></span>
+            <span class='col'>
+              {{d-button action=(action "removeUpload") actionParam=upload class="second btn-default btn-default cancel-edit" icon="times"}}
+            </span>
+          </li>
         {{/each}}
       </ul>
     {{else}}
@@ -229,34 +237,6 @@
     </div>
   {{/if}}
 
-  {{#if availableChildThemes}}
-    <div class="control-unit">
-      <div class="mini-title">
-        {{d-icon "puzzle-piece"}}
-        {{i18n "admin.customize.theme.theme_components"}}
-      </div>
-      {{#if model.childThemes.length}}
-        <ul class='removable-list'>
-          {{#each model.childThemes as |child|}}
-            <li class={{unless child.enabled "disabled-child"}}>
-              {{#link-to 'adminCustomizeThemes.show' child replace=true class='col child-link'}}
-                {{child.name}}
-              {{/link-to}}
-
-              {{d-button action=(action "removeChildTheme") actionParam=child class="btn-default cancel-edit col" icon="times"}}
-            </li>
-          {{/each}}
-        </ul>
-      {{/if}}
-      {{#if selectableChildThemes}}
-        <div class="description">
-          {{combo-box forceEscape=true filterable=true content=selectableChildThemes value=selectedChildThemeId none="admin.customize.theme.select_component"}}
-          {{#d-button action=(action "addChildTheme") icon="plus" disabled=addButtonDisabled class="btn-default add-component-button"}}{{i18n "admin.customize.theme.add"}}{{/d-button}}
-        </div>
-      {{/if}}
-    </div>
-  {{/if}}
-
   <a href='{{previewUrl}}' title="{{i18n 'admin.customize.explain_preview'}}" target='_blank' class='btn btn-default'>{{d-icon 'desktop'}}{{i18n 'admin.customize.theme.preview'}}</a>
   <a class="btn btn-default export" target="_blank" href={{downloadUrl}}>{{d-icon "download"}} {{i18n 'admin.export_json.button_text'}}</a>
 
@@ -275,8 +255,8 @@
         action=(action "enableComponent")
         icon="check"
         label="admin.customize.theme.enable"}}
+      {{/if}}
     {{/if}}
-  {{/if}}
 
-  {{d-button action=(action "destroy") label="admin.customize.delete" icon="trash-alt" class="btn-danger"}}
+    {{d-button action=(action "destroy") label="admin.customize.delete" icon="trash-alt" class="btn-danger"}}
 </div>

app/assets/stylesheets/common/admin/customize.scss

@@ -319,7 +319,9 @@
   }
 
   .theme.settings {
-    .theme-setting,
+    .theme-setting {
+      min-height: 35px;
+    }
     .theme-translation {
       padding-bottom: 0;
       margin-top: 18px;

config/locales/client.en.yml

@@ -3624,6 +3624,8 @@ en:
           edit_css_html_help: "You have not edited any CSS or HTML"
           delete_upload_confirm: "Delete this upload? (Theme CSS may stop working!)"
           component_on_themes: "Include component on these themes"
+          included_components: "Included components"
+          add_all: "Add all"
           import_web_tip: "Repository containing theme"
           import_web_advanced: "Advanced..."
           import_file_tip: ".tar.gz, .zip, or .dcstyle.json file containing theme"