DEV: Support translations for property labels in objects schema editor (#26362)

Why this change?

In cdba864598, we added support for adding
a description which will be displayed under the input of each property
on the client side.

Currently this convention in the locale file is followed:

```
en:
  theme_metadata:
    settings:
      objects_setting:
        description: <description> for the setting
        schema:
          properties:
            name: <description for the name property>
            links:
              name: <description for the name property in link>
              url: <description for the url property in link>
```

Since we now want to allow the label to be translated as well, we will
be changing the convention to the following:

```
en:
  theme_metadata:
    settings:
      objects_setting:
        description: <description> for the setting
        schema:
          properties:
            name:
              label: <label for the name property>
              description: <description for the name property>
            links:
              name:
                label: <label for the name property>
                description: <description for the name property in link>
              url:
		label: <label for the url property>
                description: <description for the url property in link>
```

If the locale file does not provide a `label` key under the property's
name, the client side will just display the property's name as the
label for the input field.

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

@@ -140,6 +140,7 @@ export default class SchemaThemeSettingEditor extends Component {
         spec,
         value: node.object[name],
         description: this.fieldDescription(name),
+        label: this.fieldLabel(name),
       });
     }
 
@@ -260,24 +261,38 @@ export default class SchemaThemeSettingEditor extends Component {
     };
   }
 
-  fieldDescription(fieldName) {
+  descriptions(fieldName, key) {
+    // The `property_descriptions` metadata is an object with keys in the following format as an example:
+    //
+    // {
+    //   some_property.description: <some description>,
+    //   some_property.label: <some label>,
+    //   some_objects_property.some_other_property.description: <some description>,
+    //   some_objects_property.some_other_property.label: <some label>,
+    // }
     const descriptions = this.args.setting.metadata?.property_descriptions;
 
     if (!descriptions) {
       return;
     }
 
-    let key;
-
     if (this.activeNode.parentTree.propertyName) {
-      key = `${this.activeNode.parentTree.propertyName}.${fieldName}`;
+      key = `${this.activeNode.parentTree.propertyName}.${fieldName}.${key}`;
     } else {
-      key = `${fieldName}`;
+      key = `${fieldName}.${key}`;
     }
 
     return descriptions[key];
   }
 
+  fieldLabel(fieldName) {
+    return this.descriptions(fieldName, "label") || fieldName;
+  }
+
+  fieldDescription(fieldName) {
+    return this.descriptions(fieldName, "description");
+  }
+
   defaultSchemaIdentifier(schemaName, index) {
     return `${schemaName} ${index + 1}`;
   }
@@ -439,6 +454,7 @@ export default class SchemaThemeSettingEditor extends Component {
             @onValueChange={{fn this.inputFieldChanged field}}
             @description={{field.description}}
             @setting={{@setting}}
+            @label={{field.label}}
           />
         {{/each}}
         {{#if (gt this.fields.length 0)}}

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

@@ -47,7 +47,7 @@ export default class SchemaThemeSettingField extends Component {
 
   <template>
     <div class="schema-field" data-name={{@name}}>
-      <label class="schema-field__label">{{@name}}{{if
+      <label class="schema-field__label">{{@label}}{{if
           @spec.required
           "*"
         }}</label>

spec/fixtures/theme_locales/objects_settings/en.yaml

@@ -5,7 +5,13 @@ en:
         description: "This is a description for objects setting"
         schema:
           properties:
-            name: "Section Name"
+            name:
+              label: Name
+              description: "Section Name"
             links:
-              name: "Name of the link"
+              name:
-              url: "URL of the link"
+                label: Name
+                description: "Name of the link"
+              url:
+                label: URL
+                description: "URL of the link"

spec/requests/admin/themes_controller_spec.rb

@@ -1384,9 +1384,12 @@ RSpec.describe Admin::ThemesController do
 
         expect(response.parsed_body["property_descriptions"]).to eq(
           {
-            "links.name" => "Name of the link",
+            "links.name.description" => "Name of the link",
-            "links.url" => "URL of the link",
+            "links.name.label" => "Name",
-            "name" => "Section Name",
+            "links.url.description" => "URL of the link",
+            "links.url.label" => "URL",
+            "name.description" => "Section Name",
+            "name.label" => "Name",
           },
         )
       end

spec/serializers/theme_objects_setting_metadata_serializer_spec.rb

@@ -30,9 +30,12 @@ RSpec.describe ThemeObjectsSettingMetadataSerializer do
 
       expect(payload[:property_descriptions]).to eq(
         {
-          "links.name" => "Name of the link",
+          "links.name.description" => "Name of the link",
-          "links.url" => "URL of the link",
+          "links.name.label" => "Name",
-          "name" => "Section Name",
+          "links.url.description" => "URL of the link",
+          "links.url.label" => "URL",
+          "name.description" => "Section Name",
+          "name.label" => "Name",
         },
       )
     end

spec/system/admin_editing_objects_typed_theme_setting_spec.rb

@@ -28,7 +28,7 @@ RSpec.describe "Admin editing objects type theme setting", type: :system do
   end
 
   describe "when editing a theme setting of objects type" do
-    it "should display description for each property if the description has been configured in a locale file" do
+    it "should display the right label and description for each property if the label and description has been configured in a locale file" do
       theme.set_field(
         target: :translations,
         name: "en",
@@ -44,6 +44,8 @@ RSpec.describe "Admin editing objects type theme setting", type: :system do
         "Section Name",
       )
 
+      expect(admin_objects_theme_setting_editor_page).to have_setting_field_label("name", "Name")
+
       admin_objects_theme_setting_editor_page.click_link("link 1")
 
       expect(admin_objects_theme_setting_editor_page).to have_setting_field_description(
@@ -51,10 +53,14 @@ RSpec.describe "Admin editing objects type theme setting", type: :system do
         "Name of the link",
       )
 
+      expect(admin_objects_theme_setting_editor_page).to have_setting_field_label("name", "Name")
+
       expect(admin_objects_theme_setting_editor_page).to have_setting_field_description(
         "url",
         "URL of the link",
       )
+
+      expect(admin_objects_theme_setting_editor_page).to have_setting_field_label("url", "URL")
     end
 
     it "should allow admin to edit the theme setting of objects type" do

spec/system/page_objects/pages/admin_objects_theme_setting_editor.rb

@@ -16,6 +16,10 @@ module PageObjects
         expect(input_field_description(field_name)).to have_text(description)
       end
 
+      def has_setting_field_label?(field_name, label)
+        expect(input_field_label(field_name)).to have_text(label)
+      end
+
       def click_link(name)
         find(
           ".schema-theme-setting-editor__navigation .schema-theme-setting-editor__tree-node.--child",
@@ -46,6 +50,10 @@ module PageObjects
         page.find(".schema-field[data-name=\"#{field_name}\"] .schema-field__input input")
       end
 
+      def input_field_label(field_name)
+        page.find(".schema-field[data-name=\"#{field_name}\"] .schema-field__label")
+      end
+
       def input_field_description(field_name)
         page.find(".schema-field[data-name=\"#{field_name}\"] .schema-field__input-description")
       end