FIX: Display errors in single theme pages (#6449)

Currently the errors are not well handled. So it breaks the whole UI of admin themes list page.

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

@@ -9,6 +9,13 @@
     {{/if}}
   </div>
 
+  {{#each model.errors as |error|}}
+    <div class="alert alert-error">
+      <button class="close" data-dismiss="alert">×</button>
+      {{error}}
+    </div>
+  {{/each}}
+
   {{#if model.remote_theme}}
     <a class="url about-url" href="{{model.remote_theme.about_url}}">{{i18n "admin.customize.theme.about_theme"}}</a>
     {{#if model.remote_theme.license_url}}

app/serializers/theme_serializer.rb

@@ -61,7 +61,7 @@ class RemoteThemeSerializer < ApplicationSerializer
 end
 
 class ThemeSerializer < ChildThemeSerializer
-  attributes :color_scheme, :color_scheme_id, :user_selectable, :remote_theme_id, :settings
+  attributes :color_scheme, :color_scheme_id, :user_selectable, :remote_theme_id, :settings, :errors
 
   has_one :user, serializer: UserNameSerializer, embed: :object
 
@@ -69,17 +69,33 @@ class ThemeSerializer < ChildThemeSerializer
   has_many :child_themes, serializer: ChildThemeSerializer, embed: :objects
   has_one :remote_theme, serializer: RemoteThemeSerializer, embed: :objects
 
+  def initialize(theme, options = {})
+    super
+    @errors = []
+  end
+
   def child_themes
     object.child_themes.order(:name)
   end
 
   def settings
     object.settings.map { |setting| ThemeSettingsSerializer.new(setting, root: false) }
+  rescue ThemeSettingsParser::InvalidYaml => e
+    @errors << e.message
+    nil
   end
 
   def include_child_themes?
     !object.component?
   end
+
+  def errors
+    @errors
+  end
+
+  def include_errors?
+    @errors.present?
+  end
 end
 
 class ThemeFieldWithEmbeddedUploadsSerializer < ThemeFieldSerializer

spec/serializers/theme_serializer_spec.rb

@@ -0,0 +1,14 @@
+require 'rails_helper'
+
+RSpec.describe ThemeSerializer do
+  describe "load theme settings" do
+    it 'should add error message when having invalid format' do
+      theme = Fabricate(:theme)
+      Theme.any_instance.stubs(:settings).raises(ThemeSettingsParser::InvalidYaml, I18n.t("themes.settings_errors.invalid_yaml"))
+      serialized = ThemeSerializer.new(theme).as_json[:theme]
+      expect(serialized[:settings]).to be_nil
+      expect(serialized[:errors].count).to eq(1)
+      expect(serialized[:errors][0]).to eq(I18n.t("themes.settings_errors.invalid_yaml"))
+    end
+  end
+end