DEV: Show warning message when using ember css selectors (#12036)

* DEV: Show warning message when using ember css selectors

When editing the theme css via the admin UI a warning message
will be displayed if it detects that the `#emberXXX` or `.ember-view`
css selectors are being used. These are dynamic selectors that ember
generates, but they can change so they should not be used.

* Update error message text to be more helpful

* Display a warning instead of erroring out

This allows the theme to still be saved, but a warning is displayed.

Updated the tests to check for the error message.

Updated the pre tags css so that it wraps for long messages.

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

@@ -89,6 +89,7 @@
     margin-bottom: 10px;
     background-color: var(--quaternary-low);
     padding: 5px;
+    white-space: pre-wrap;
   }
 
   .admin-container {

app/models/theme_field.rb

@@ -50,6 +50,10 @@ class ThemeField < ActiveRecord::Base
     @theme_var_type_ids ||= [2]
   end
 
+  def self.css_theme_type_ids
+    @css_theme_type_ids ||= [0, 1]
+  end
+
   def self.force_recompilation!
     find_each do |field|
       field.compiler_version = 0
@@ -372,6 +376,8 @@ class ThemeField < ActiveRecord::Base
       result = compile_scss
       if contains_optimized_link?(self.value)
         self.error = I18n.t("themes.errors.optimized_link")
+      elsif contains_ember_css_selector?(self.value)
+        self.error = I18n.t("themes.ember_selector_error")
       else
         self.error = nil unless error.nil?
       end
@@ -390,6 +396,10 @@ class ThemeField < ActiveRecord::Base
     OptimizedImage::URL_REGEX.match?(text)
   end
 
+  def contains_ember_css_selector?(text)
+    text.match(/#ember\d+|[.]ember-view/)
+  end
+
   class ThemeFileMatcher
     OPTIONS = %i{name type target}
     # regex: used to match file names to fields (import).

config/locales/server.en.yml

@@ -65,6 +65,7 @@ en:
   themes:
     bad_color_scheme: "Can not update theme, invalid color palette"
     other_error: "Something went wrong updating theme"
+    ember_selector_error: "Sorry – using #ember or .ember-view CSS selectors is not permitted, because these names are dynamically generated at runtime and will change over time, eventually resulting in broken CSS. Try a different selector."
     compile_error:
       unrecognized_extension: "Unrecognized file extension: %{extension}"
     import_error:

spec/requests/admin/themes_controller_spec.rb

@@ -370,6 +370,45 @@ describe Admin::ThemesController do
       expect(UserHistory.where(action: UserHistory.actions[:change_theme]).count).to eq(1)
     end
 
+    it 'prevents theme update when using ember css selectors' do
+      child_theme = Fabricate(:theme, component: true)
+
+      put "/admin/themes/#{theme.id}.json", params: {
+        theme: {
+          child_theme_ids: [child_theme.id],
+          name: 'my test name',
+          theme_fields: [
+            { name: 'scss', target: 'common', value: '' },
+            { name: 'scss', target: 'desktop', value: '.ember-view{color: blue;}' },
+          ]
+        }
+      }
+
+      expect(response.status).to eq(200)
+
+      json = response.parsed_body
+
+      fields = json["theme"]["theme_fields"].sort { |a, b| a["value"] <=> b["value"] }
+      expect(fields[0]["error"]).to eq(I18n.t("themes.ember_selector_error"))
+
+      put "/admin/themes/#{theme.id}.json", params: {
+        theme: {
+          child_theme_ids: [child_theme.id],
+          name: 'my test name',
+          theme_fields: [
+            { name: 'scss', target: 'common', value: '' },
+            { name: 'scss', target: 'desktop', value: '#ember392{color: blue;}' },
+          ]
+        }
+      }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+
+      fields = json["theme"]["theme_fields"].sort { |a, b| a["value"] <=> b["value"] }
+      expect(fields[0]["error"]).to eq(I18n.t("themes.ember_selector_error"))
+    end
+
     it 'blocks remote theme fields from being locally edited' do
       r = RemoteTheme.create!(remote_url: "https://magic.com/repo.git")
       theme.update!(remote_theme_id: r.id)