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:
parent
337edc2f21
commit
6dac187785
|
@ -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)}}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue