UX: Improve validation error message when saving theme objects setting (#26455)

Why this change?

Before this change, the validation error message shown to the user when
saving a theme objects setting is very cryptic. This commit changes the
validation error messages to be displayed on top of the editor instead.

Note that I don't think this way of displaying is the ideal state we
want to get to but given the time we have this will do for now.

app/assets/javascripts/admin/addon/components/schema-theme-setting/editor.gjs

@@ -19,6 +19,7 @@ export default class SchemaThemeSettingNewEditor extends Component {
   @tracked activeDataPaths = [];
   @tracked activeSchemaPaths = [];
   @tracked saveButtonDisabled = false;
+  @tracked validationErrorMessage;
   inputFieldObserver = new Map();
 
   data = cloneJSON(this.args.setting.value);
@@ -230,12 +231,27 @@ export default class SchemaThemeSettingNewEditor extends Component {
           this.args.themeId
         );
       })
-      .catch(popupAjaxError)
+      .catch((e) => {
+        if (e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors) {
+          this.validationErrorMessage = e.jqXHR.responseJSON.errors[0];
+        } else {
+          popupAjaxError(e);
+        }
+      })
       .finally(() => (this.saveButtonDisabled = false));
   }
 
   <template>
     <div class="schema-theme-setting-editor">
+      {{#if this.validationErrorMessage}}
+        <div class="schema-theme-setting-editor__errors">
+          <div class="alert alert-error">
+            {{this.validationErrorMessage}}
+          </div>
+        </div>
+      {{/if}}
+
+      <div class="schema-theme-setting-editor__wrapper">
         <div class="schema-theme-setting-editor__navigation">
           <Tree
             @data={{this.activeData}}
@@ -284,5 +300,6 @@ export default class SchemaThemeSettingNewEditor extends Component {
           {{/if}}
         </div>
       </div>
+    </div>
   </template>
 }

app/assets/javascripts/admin/addon/components/schema-theme-setting/types/models.gjs

@@ -5,7 +5,6 @@ import { isBlank } from "@ember/utils";
 import I18n from "discourse-i18n";
 
 export default class SchemaThemeSettingTypeModels extends Component {
-  @tracked touched = false;
   @tracked value = this.args.value;
 
   required = this.args.spec.required;
@@ -15,7 +14,6 @@ export default class SchemaThemeSettingTypeModels extends Component {
 
   @action
   onInput(newValue) {
-    this.touched = true;
     this.value = newValue;
     this.args.onChange(this.onChange(newValue));
   }
@@ -25,10 +23,6 @@ export default class SchemaThemeSettingTypeModels extends Component {
   }
 
   get validationErrorMessage() {
-    if (!this.touched) {
-      return;
-    }
-
     const isValueBlank = isBlank(this.value);
 
     if (!this.required && isValueBlank) {
@@ -36,7 +30,7 @@ export default class SchemaThemeSettingTypeModels extends Component {
     }
 
     if (
-      (this.min && this.value.length < this.min) ||
+      (this.min && this.value && this.value.length < this.min) ||
       (this.required && isValueBlank)
     ) {
       return I18n.t(

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

@@ -1,4 +1,5 @@
 .schema-theme-setting-editor {
+  .schema-theme-setting-editor__wrapper {
     --schema-space: 0.5em;
     display: grid;
     grid-template-columns: minmax(10em, 0.3fr) 1fr;
@@ -9,7 +10,7 @@
       gap: 0 1em;
     }
 
-  &__navigation {
+    .schema-theme-setting-editor__navigation {
       overflow: hidden;
       align-self: start;
 
@@ -155,4 +156,5 @@
         }
       }
     }
+  }
 }

app/controllers/admin/themes_controller.rb

@@ -338,7 +338,13 @@ class Admin::ThemesController < Admin::AdminController
     new_value = params[:value] || nil
 
     previous_value = @theme.cached_settings[setting_name]
+
+    begin
       @theme.update_setting(setting_name, new_value)
+    rescue Discourse::InvalidParameters => e
+      return render_json_error e.message
+    end
+
     @theme.save
 
     log_theme_setting_change(setting_name, previous_value, new_value)

spec/requests/admin/themes_controller_spec.rb

@@ -1063,6 +1063,33 @@ RSpec.describe Admin::ThemesController do
         expect(user_history.action).to eq(UserHistory.actions[:change_theme_setting])
       end
 
+      it "should return the right error when value used to update a theme setting of `objects` typed is invalid" do
+        SiteSetting.experimental_objects_type_for_theme_settings = true
+
+        field =
+          theme.set_field(
+            target: :settings,
+            name: "yaml",
+            value: File.read("#{Rails.root}/spec/fixtures/theme_settings/objects_settings.yaml"),
+          )
+
+        theme.save!
+
+        put "/admin/themes/#{theme.id}/setting.json",
+            params: {
+              name: "objects_setting",
+              value: [
+                { name: "new_section", links: [{ name: "a" * 21, url: "https://some.url.com" }] },
+              ].to_json,
+            }
+
+        expect(response.status).to eq(422)
+
+        expect(response.parsed_body["errors"]).to eq(
+          ["The property at JSON Pointer '/0/links/0/name' must be at most 20 characters long."],
+        )
+      end
+
       it "should be able to update a theme setting of `objects` typed" do
         SiteSetting.experimental_objects_type_for_theme_settings = true
 

spec/system/admin_editing_objects_typed_theme_setting_spec.rb

@@ -46,7 +46,7 @@ RSpec.describe "Admin editing objects type theme setting", type: :system do
 
       expect(admin_objects_theme_setting_editor_page).to have_setting_field_label("name", "Name")
 
-      admin_objects_theme_setting_editor_page.click_link("link 1")
+      admin_objects_theme_setting_editor_page.click_child_link("link 1")
 
       expect(admin_objects_theme_setting_editor_page).to have_setting_field_description(
         "name",
@@ -99,6 +99,25 @@ RSpec.describe "Admin editing objects type theme setting", type: :system do
       expect(admin_objects_theme_setting_editor).to have_setting_field("name", "section 1")
     end
 
+    it "displays the validation errors when an admin tries to save the settting with an invalid value" do
+      visit("/admin/customize/themes/#{theme.id}")
+
+      admin_objects_theme_setting_editor =
+        admin_customize_themes_page.click_edit_objects_theme_setting_button("objects_setting")
+
+      admin_objects_theme_setting_editor
+        .fill_in_field("name", "")
+        .click_link("section 2")
+        .fill_in_field("name", "")
+        .click_child_link("link 1")
+        .fill_in_field("name", "")
+        .save
+
+      expect(find(".schema-theme-setting-editor__errors")).to have_text(
+        "The property at JSON Pointer '/0/name' must be present. The property at JSON Pointer '/1/name' must be present. The property at JSON Pointer '/1/links/0/name' must be present.",
+      )
+    end
+
     it "allows an admin to edit a theme setting of objects type via the settings editor" do
       visit "/admin/customize/themes/#{theme.id}"
 

spec/system/page_objects/pages/admin_objects_theme_setting_editor.rb

@@ -20,15 +20,19 @@ module PageObjects
         expect(input_field_label(field_name)).to have_text(label)
       end
 
-      def click_link(name)
+      def click_link(name, child: false)
         find(
-          ".schema-theme-setting-editor__navigation .schema-theme-setting-editor__tree-node.--child",
+          ".schema-theme-setting-editor__navigation .schema-theme-setting-editor__tree-node#{child ? ".--child" : ".--parent"}",
           text: name,
         ).click
 
         self
       end
 
+      def click_child_link(name)
+        click_link(name, child: true)
+      end
+
       def fill_in_field(field_name, value)
         input_field(field_name).fill_in(with: value)
         self