Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix missing applying of the translate service #77

Merged
merged 2 commits into from
Apr 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,23 @@ export default class ElementTemplatesPropertiesProvider {

getGroups(element) {
return (groups) => {
const injector = this._injector;

updateMessageGroup(groups, element);

if (!this._shouldShowTemplateProperties(element)) {
return groups;
}

const translate = injector.get('translate');

// (0) Copy provided groups
groups = groups.slice();

const templatesGroup = {
element,
id: 'ElementTemplates__Template',
label: 'Template',
label: translate('Template'),
component: createElementTemplatesGroup({
getTemplateId
}),
Expand All @@ -62,7 +65,7 @@ export default class ElementTemplatesPropertiesProvider {
elementTemplate = applyConditions(element, elementTemplate, getPropertyValue);

const templateSpecificGroups = [].concat(
CustomProperties({ element, elementTemplate })
CustomProperties({ element, elementTemplate, injector })
);

// (2) add template-specific properties groups
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,15 @@ import { BooleanProperty } from './BooleanProperty';
import { NumberProperty } from './NumberProperty';


const DEFAULT_CUSTOM_GROUP = {
id: 'ElementTemplates__CustomProperties',
label: 'Custom properties'
};


export function CustomProperties(props) {
const {
element,
elementTemplate
elementTemplate,
injector
} = props;

const translate = injector.get('translate');

const groups = [];

const {
Expand All @@ -68,7 +65,7 @@ export function CustomProperties(props) {
addCustomGroup(groups, {
element,
id: `ElementTemplates__CustomProperties-${groupId}`,
label: group.label,
label: translate(group.label),
openByDefault: group.openByDefault,
properties: properties,
templateId: `${id}-${groupId}`,
Expand All @@ -79,7 +76,8 @@ export function CustomProperties(props) {
// (2) add default custom props
if (defaultProps.length) {
addCustomGroup(groups, {
...DEFAULT_CUSTOM_GROUP,
id: 'ElementTemplates__CustomProperties',
label: translate('Custom properties'),
element,
properties: defaultProps,
templateId: id
Expand Down
6 changes: 4 additions & 2 deletions src/components/PropertyDescription.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import Markup from 'preact-markup';
import { useService } from 'bpmn-js-properties-panel';

import { sanitizeHTML } from '../utils/sanitize';

export function PropertyDescription(props) {

const {
description
} = props;

const translate = useService('translate');

return description && (
<Markup
markup={ sanitizeHTML(description) }
markup={ sanitizeHTML(translate(description)) }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exactly in the required order. We want to sanitize the translation result :)

trim={ false } />
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,15 @@ export default class ElementTemplatesPropertiesProvider {
return groups;
}

const translate = injector.get('translate');

// (0) Copy provided groups
groups = groups.slice();

const templatesGroup = {
element,
id: 'ElementTemplates__Template',
label: 'Template',
label: translate('Template'),
component: createElementTemplatesGroup(),
entries: TemplateProps({ element, elementTemplates: this._elementTemplates })
};
Expand All @@ -65,7 +67,7 @@ export default class ElementTemplatesPropertiesProvider {
createInputGroup(element, elementTemplate, injector, groups) || [],
createOutputGroup(element, elementTemplate, injector, groups) || [],
createErrorGroup(element, elementTemplate, injector, groups) || [],
CustomProperties({ element, elementTemplate })
CustomProperties({ element, elementTemplate, injector })
);

// (2) add template-specific properties groups
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,15 @@ const PRIMITIVE_MODDLE_TYPES = [
'String'
];

const DEFAULT_CUSTOM_GROUP = {
id: 'ElementTemplates__CustomProperties',
label: 'Custom properties'
};


export function CustomProperties(props) {
const {
element,
elementTemplate
elementTemplate,
injector
} = props;

const translate = injector.get('translate');

const groups = [];

const {
Expand All @@ -106,7 +103,7 @@ export function CustomProperties(props) {
addCustomGroup(groups, {
element,
id: `ElementTemplates__CustomProperties-${groupId}`,
label: group.label,
label: translate(group.label),
properties: properties,
templateId: `${id}-${groupId}`
});
Expand All @@ -115,7 +112,8 @@ export function CustomProperties(props) {
// (2) add default custom props
if (defaultProps.length) {
addCustomGroup(groups, {
...DEFAULT_CUSTOM_GROUP,
id: 'ElementTemplates__CustomProperties',
label: translate('Custom properties'),
element,
properties: defaultProps,
templateId: id
Expand All @@ -135,7 +133,7 @@ export function CustomProperties(props) {
addCustomGroup(groups, {
element,
id: `ElementTemplates__CustomGroup-${ id }`,
label: `Custom properties for scope <${ type }>`,
label: translate(`Custom properties for scope <${ type }>`),
properties,
templateId: id,
scope
Expand Down Expand Up @@ -267,13 +265,14 @@ function BooleanProperty(props) {
} = property;

const bpmnFactory = useService('bpmnFactory'),
commandStack = useService('commandStack');
commandStack = useService('commandStack'),
translate = useService('translate');

return CheckboxEntry({
element,
getValue: propertyGetter(element, property, scope),
id,
label,
label: label ? translate(label) : label,
description: PropertyDescription({ description }),
setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
disabled: editable === false
Expand Down Expand Up @@ -303,7 +302,7 @@ function DropdownProperty(props) {

return choices.map(({ name, value }) => {
return {
label: name,
label: translate(name),
value
};
});
Expand All @@ -312,7 +311,7 @@ function DropdownProperty(props) {
return SelectEntry({
element,
id,
label,
label: label ? translate(label) : label,
getOptions,
description: PropertyDescription({ description }),
getValue: propertyGetter(element, property, scope),
Expand Down Expand Up @@ -346,7 +345,7 @@ function StringProperty(props) {
element,
getValue: propertyGetter(element, property, scope),
id,
label,
label: label ? translate(label) : label,
description: PropertyDescription({ description }),
setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
validate: propertyValidator(translate, property),
Expand Down Expand Up @@ -377,7 +376,7 @@ function TextAreaProperty(props) {
debounce,
element,
id,
label,
label: label ? translate(label) : label,
description: PropertyDescription({ description }),
getValue: propertyGetter(element, property, scope),
setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
Expand Down
22 changes: 22 additions & 0 deletions test/spec/element-templates/i18n/Translate.bpmn
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_1yh3zpj" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="4.4.0">
<bpmn:process id="Process_1" isExecutable="true">
<bpmn:serviceTask id="ServiceTask_1" name="name" camunda:modelerTemplate="foo">
<bpmn:extensionElements>
<camunda:field name="foo">
<camunda:string>foo</camunda:string>
</camunda:field>
<camunda:field name="bar">
<camunda:expression>${bar}</camunda:expression>
</camunda:field>
</bpmn:extensionElements>
</bpmn:serviceTask>
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="ServiceTask_1_di" bpmnElement="ServiceTask_1">
<dc:Bounds x="0" y="0" width="100" height="80" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>
121 changes: 121 additions & 0 deletions test/spec/element-templates/i18n/Translate.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import TestContainer from 'mocha-test-container-support';

import {
query as domQuery,
queryAll as domQueryAll
} from 'min-dom';

import {
bootstrapPropertiesPanel,
inject
} from 'test/TestHelper';

import {
act
} from '@testing-library/preact';

import coreModule from 'bpmn-js/lib/core';
import elementTemplatesModule from 'src/element-templates';
import modelingModule from 'bpmn-js/lib/features/modeling';
import { BpmnPropertiesPanelModule } from 'bpmn-js-properties-panel';
import camundaModdlePackage from 'camunda-bpmn-moddle/resources/camunda';

import diagramXML from './Translate.bpmn';

import templates from './Translate.templates';

describe('provider/element-templates - Translate', function() {

let container;

beforeEach(function() {
container = TestContainer.get(this);
});

beforeEach(bootstrapPropertiesPanel(diagramXML, {
container,
modules: [
BpmnPropertiesPanelModule,
coreModule,
elementTemplatesModule,
modelingModule,
{
translate: [
'value',
(template, replacements) => replacements
? `${template}:translated:${JSON.stringify(replacements)}`
: `${template}:translated`
]
}
],
moddleExtensions: {
camunda: camundaModdlePackage
},
elementTemplates: templates
}));

beforeEach(inject(async function(elementRegistry, selection) {
const element = elementRegistry.get('ServiceTask_1');
await act(() => selection.select(element));
}));

describe('Template group', function() {
it('should apply the `translate` service for the Template group title', inject(function() {
const titleEl = domQuery('[data-group-id="group-ElementTemplates__Template"] .bio-properties-panel-group-header-title', container);

expect(titleEl.textContent).to.equal('Template:translated');
}));
});

describe('Custom Properties group', function() {
it('should apply the `translate` service for the Custom Properties group title', inject(function() {
const titleEl = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] .bio-properties-panel-group-header-title', container);

expect(titleEl.textContent).to.equal('Custom properties:translated');
}));

it('should apply the `translate` service for a Boolean entry', inject(function() {
const booleanEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-0"]', container);

const labelEl = domQuery('.bio-properties-panel-label', booleanEntry);
expect(labelEl.textContent).to.equal('BooleanLabel:translated');

const descriptionEl = domQuery('.bio-properties-panel-description', booleanEntry);
expect(descriptionEl.textContent).to.equal('BooleanDescription:translated');
}));

it('should apply the `translate` service for a Dropdown entry', inject(function() {
const dropdownEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-1"]', container);

const labelEl = domQuery('.bio-properties-panel-label', dropdownEntry);
expect(labelEl.textContent).to.equal('DropdownLabel:translated');

const descriptionEl = domQuery('.bio-properties-panel-description', dropdownEntry);
expect(descriptionEl.textContent).to.equal('DropdownDescription:translated');

const options = domQueryAll('option', dropdownEntry);
expect(options[0].textContent).to.equal('Choice1:translated');
expect(options[1].textContent).to.equal('Choice2:translated');
}));

it('should apply the `translate` service for a String entry', inject(function() {
const stringEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-2"]', container);

const labelEl = domQuery('.bio-properties-panel-label', stringEntry);
expect(labelEl.textContent).to.equal('StringLabel:translated');

const descriptionEl = domQuery('.bio-properties-panel-description', stringEntry);
expect(descriptionEl.textContent).to.equal('StringDescription:translated');
}));

it('should apply the `translate` service for a Text entry', inject(function() {
const textEntry = domQuery('[data-group-id="group-ElementTemplates__CustomProperties"] [data-entry-id="custom-entry-foo-3"]', container);

const labelEl = domQuery('.bio-properties-panel-label', textEntry);
expect(labelEl.textContent).to.equal('TextLabel:translated');

const descriptionEl = domQuery('.bio-properties-panel-description', textEntry);
expect(descriptionEl.textContent).to.equal('TextDescription:translated');
}));
});
});
Loading