FEATURE: List unused theme components (#6924)

app/assets/javascripts/admin/adapters/theme.js.es6

@@ -14,6 +14,10 @@ export default RestAdapter.extend({
       let mapped = theme.get("child_themes") || [];
       mapped = mapped.map(t => map[t.id]);
       theme.set("childThemes", mapped);
+
+      let mappedParents = theme.get("parent_themes") || [];
+      mappedParents = mappedParents.map(t => map[t.id]);
+      theme.set("parentThemes", mappedParents);
     });
     return results;
   },

app/assets/javascripts/admin/components/themes-list.js.es6

@@ -8,7 +8,7 @@ export default Ember.Component.extend({
   classNames: ["themes-list"],
 
   hasThemes: Ember.computed.gt("themesList.length", 0),
-  hasUserThemes: Ember.computed.gt("userThemes.length", 0),
+  hasActiveThemes: Ember.computed.gt("activeThemes.length", 0),
   hasInactiveThemes: Ember.computed.gt("inactiveThemes.length", 0),
 
   themesTabActive: Ember.computed.equal("currentTab", THEMES),
@@ -31,7 +31,7 @@ export default Ember.Component.extend({
   )
   inactiveThemes(themes) {
     if (this.get("componentsTabActive")) {
-      return [];
+      return themes.filter(theme => theme.get("parentThemes.length") <= 0);
     }
     return themes.filter(
       theme => !theme.get("user_selectable") && !theme.get("default")
@@ -44,20 +44,21 @@ export default Ember.Component.extend({
     "themesList.@each.user_selectable",
     "themesList.@each.default"
   )
-  userThemes(themes) {
+  activeThemes(themes) {
     if (this.get("componentsTabActive")) {
-      return [];
+      return themes.filter(theme => theme.get("parentThemes.length") > 0);
+    } else {
+      themes = themes.filter(
+        theme => theme.get("user_selectable") || theme.get("default")
+      );
+      return _.sortBy(themes, t => {
+        return [
+          !t.get("default"),
+          !t.get("user_selectable"),
+          t.get("name").toLowerCase()
+        ];
+      });
     }
-    themes = themes.filter(
-      theme => theme.get("user_selectable") || theme.get("default")
-    );
-    return _.sortBy(themes, t => {
-      return [
-        !t.get("default"),
-        !t.get("user_selectable"),
-        t.get("name").toLowerCase()
-      ];
-    });
   },
 
   didRender() {

app/assets/javascripts/admin/controllers/admin-customize-themes-show.js.es6

@@ -13,17 +13,6 @@ export default Ember.Controller.extend({
   addButtonDisabled: Ember.computed.empty("selectedChildThemeId"),
   editRouteName: "adminCustomizeThemes.edit",
 
-  @computed("model", "allThemes", "model.component")
-  parentThemes(model, allThemes) {
-    if (!model.get("component")) {
-      return null;
-    }
-    const parents = allThemes.filter(theme =>
-      _.contains(theme.get("childThemes"), model)
-    );
-    return parents.length === 0 ? null : parents;
-  },
-
   @computed("model.editedFields")
   editedFieldsFormatted() {
     const descriptions = [];

app/assets/javascripts/admin/templates/components/themes-list.hbs

@@ -9,32 +9,32 @@
 
 <div class="themes-list-container">
   {{#if hasThemes}}
-    {{#if componentsTabActive}}
+    {{#if hasActiveThemes}}
-      {{#each themesList as |theme|}}
+      {{#each activeThemes as |theme|}}
         {{themes-list-item theme=theme navigateToTheme=(action "navigateToTheme" theme)}}
       {{/each}}
-    {{else}}
-      {{#if hasUserThemes}}
-        {{#each userThemes as |theme|}}
-          {{themes-list-item theme=theme navigateToTheme=(action "navigateToTheme" theme)}}
-        {{/each}}
-
-        {{#if hasInactiveThemes}}
-          <div class="themes-list-item inactive-indicator">
-            <span class="empty">{{I18n "admin.customize.theme.inactive_themes"}}</span>
-          </div>
-        {{/if}}
-      {{/if}}
 
       {{#if hasInactiveThemes}}
-        {{#each inactiveThemes as |theme|}}
+        <div class="themes-list-item inactive-indicator">
-          {{themes-list-item theme=theme navigateToTheme=(action "navigateToTheme" theme)}}
+          <span class="empty">
-        {{/each}}
+            {{#if themesTabActive}}
+              {{I18n "admin.customize.theme.inactive_themes"}}
+            {{else}}
+              {{I18n "admin.customize.theme.inactive_components"}}
+            {{/if}}
+          </span>
+        </div>
       {{/if}}
     {{/if}}
+
+    {{#if hasInactiveThemes}}
+      {{#each inactiveThemes as |theme|}}
+        {{themes-list-item theme=theme navigateToTheme=(action "navigateToTheme" theme)}}
+      {{/each}}
+    {{/if}}
   {{else}}
     <div class="themes-list-item">
       <span class="empty">{{I18n "admin.customize.theme.empty"}}</span>
     </div>
   {{/if}}
-</div>
+</div>

app/assets/javascripts/admin/templates/customize-themes-show.hbs

@@ -26,11 +26,11 @@
     {{/if}}
   {{/if}}
 
-  {{#if parentThemes}}
+  {{#if model.parentThemes}}
     <div class="control-unit">
       <div class="mini-title">{{i18n "admin.customize.theme.component_of"}}</div>
       <ul>
-        {{#each parentThemes as |theme|}}
+        {{#each model.parentThemes as |theme|}}
           <li>{{#link-to 'adminCustomizeThemes.show' theme replace=true}}{{theme.name}}{{/link-to}}</li>
         {{/each}}
       </ul>

app/controllers/admin/themes_controller.rb

@@ -97,6 +97,7 @@ class Admin::ThemesController < Admin::AdminController
 
   def index
     @themes = Theme.order(:name).includes(:child_themes,
+                                          :parent_themes,
                                           :remote_theme,
                                           :theme_settings,
                                           :settings_field,

app/models/theme.rb

@@ -19,7 +19,9 @@ class Theme < ActiveRecord::Base
   has_many :theme_settings, dependent: :destroy
   has_many :theme_translation_overrides, dependent: :destroy
   has_many :child_theme_relation, class_name: 'ChildTheme', foreign_key: 'parent_theme_id', dependent: :destroy
+  has_many :parent_theme_relation, class_name: 'ChildTheme', foreign_key: 'child_theme_id', dependent: :destroy
   has_many :child_themes, -> { order(:name) }, through: :child_theme_relation, source: :child_theme
+  has_many :parent_themes, -> { order(:name) }, through: :parent_theme_relation, source: :parent_theme
   has_many :color_schemes
   belongs_to :remote_theme
 

app/serializers/theme_serializer.rb

@@ -32,7 +32,7 @@ class ThemeFieldSerializer < ApplicationSerializer
   end
 end
 
-class ChildThemeSerializer < ApplicationSerializer
+class BasicThemeSerializer < ApplicationSerializer
   attributes :id, :name, :created_at, :updated_at, :default, :component
 
   def include_default?
@@ -60,13 +60,14 @@ class RemoteThemeSerializer < ApplicationSerializer
   end
 end
 
-class ThemeSerializer < ChildThemeSerializer
+class ThemeSerializer < BasicThemeSerializer
   attributes :color_scheme, :color_scheme_id, :user_selectable, :remote_theme_id, :settings, :errors
 
   has_one :user, serializer: UserNameSerializer, embed: :object
 
   has_many :theme_fields, serializer: ThemeFieldSerializer, embed: :objects
-  has_many :child_themes, serializer: ChildThemeSerializer, embed: :objects
+  has_many :child_themes, serializer: BasicThemeSerializer, embed: :objects
+  has_many :parent_themes, serializer: BasicThemeSerializer, embed: :objects
   has_one :remote_theme, serializer: RemoteThemeSerializer, embed: :objects
   has_many :translations, serializer: ThemeTranslationSerializer, embed: :objects
 
@@ -79,6 +80,10 @@ class ThemeSerializer < ChildThemeSerializer
     object.child_themes
   end
 
+  def parent_themes
+    object.parent_themes
+  end
+
   def settings
     object.settings.map { |setting| ThemeSettingsSerializer.new(setting, root: false) }
   rescue ThemeSettingsParser::InvalidYaml => e

config/locales/client.en.yml

@@ -3356,6 +3356,7 @@ en:
           convert_theme_alert: "Are you sure you want to convert this theme to component? It will be removed as a parent from %{relatives}."
           convert_theme_tooltip: "Convert this theme to component"
           inactive_themes: "Inactive themes:"
+          inactive_components: "Unused components:"
           broken_theme_tooltip: "This theme has errors in its CSS, HTML or YAML"
           default_theme_tooltip: "This theme is the site's default theme"
           updates_available_tooltip: "Updates are available for this theme"

test/javascripts/admin/components/themes-list-test.js.es6

@@ -7,7 +7,11 @@ const themes = [1, 2, 3, 4, 5].map(num =>
   Theme.create({ name: `Theme ${num}` })
 );
 const components = [1, 2, 3, 4, 5].map(num =>
-  Theme.create({ name: `Child ${num}`, component: true })
+  Theme.create({
+    name: `Child ${num}`,
+    component: true,
+    parentThemes: [themes[num - 1]]
+  })
 );
 
 componentTest("current tab is themes", {