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.
This commit is contained in:
Alan Guo Xiang Tan 2024-03-28 10:53:51 +08:00 committed by GitHub
parent 337edc2f21
commit 6dac187785
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 58 additions and 16 deletions

View File

@ -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)}}

View File

@ -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>

View File

@ -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"
url: "URL of the link"
name:
label: Name
description: "Name of the link"
url:
label: URL
description: "URL of the link"

View File

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

View File

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

View File

@ -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

View File

@ -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