From 566a32ca98f76e0f658f07d19d9d0a9d5e04f7c9 Mon Sep 17 00:00:00 2001 From: Vovamzur Date: Thu, 21 Mar 2024 22:04:12 +0200 Subject: [PATCH 1/2] fix missing applying of the `translate` service --- .../ElementTemplatesPropertiesProvider.js | 7 +- .../properties/custom-properties/index.js | 16 ++--- src/components/PropertyDescription.js | 6 +- .../ElementTemplatesPropertiesProvider.js | 6 +- .../properties/CustomProperties.js | 31 ++++---- .../element-templates/i18n/Translate.bpmn | 22 ++++++ .../element-templates/i18n/Translate.spec.js | 70 +++++++++++++++++++ .../i18n/Translate.templates.json | 19 +++++ .../element-templates/i18n/customTranslate.js | 5 ++ 9 files changed, 151 insertions(+), 31 deletions(-) create mode 100644 test/spec/element-templates/i18n/Translate.bpmn create mode 100644 test/spec/element-templates/i18n/Translate.spec.js create mode 100644 test/spec/element-templates/i18n/Translate.templates.json create mode 100644 test/spec/element-templates/i18n/customTranslate.js diff --git a/src/cloud-element-templates/properties-panel/ElementTemplatesPropertiesProvider.js b/src/cloud-element-templates/properties-panel/ElementTemplatesPropertiesProvider.js index c3bd645..7e4b790 100644 --- a/src/cloud-element-templates/properties-panel/ElementTemplatesPropertiesProvider.js +++ b/src/cloud-element-templates/properties-panel/ElementTemplatesPropertiesProvider.js @@ -33,6 +33,7 @@ export default class ElementTemplatesPropertiesProvider { getGroups(element) { return (groups) => { + const injector = this._injector; updateMessageGroup(groups, element); @@ -40,13 +41,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({ getTemplateId }), @@ -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 diff --git a/src/cloud-element-templates/properties-panel/properties/custom-properties/index.js b/src/cloud-element-templates/properties-panel/properties/custom-properties/index.js index cbbe600..c1e9e5d 100644 --- a/src/cloud-element-templates/properties-panel/properties/custom-properties/index.js +++ b/src/cloud-element-templates/properties-panel/properties/custom-properties/index.js @@ -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 { @@ -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}`, @@ -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 diff --git a/src/components/PropertyDescription.js b/src/components/PropertyDescription.js index 3d1e142..45278ff 100644 --- a/src/components/PropertyDescription.js +++ b/src/components/PropertyDescription.js @@ -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 && ( ); } \ No newline at end of file diff --git a/src/element-templates/properties-panel/ElementTemplatesPropertiesProvider.js b/src/element-templates/properties-panel/ElementTemplatesPropertiesProvider.js index d1c06f8..fc8b03a 100644 --- a/src/element-templates/properties-panel/ElementTemplatesPropertiesProvider.js +++ b/src/element-templates/properties-panel/ElementTemplatesPropertiesProvider.js @@ -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 }) }; @@ -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 diff --git a/src/element-templates/properties-panel/properties/CustomProperties.js b/src/element-templates/properties-panel/properties/CustomProperties.js index 2e2b2eb..4c476e4 100644 --- a/src/element-templates/properties-panel/properties/CustomProperties.js +++ b/src/element-templates/properties-panel/properties/CustomProperties.js @@ -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 { @@ -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}` }); @@ -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 @@ -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 @@ -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 @@ -303,7 +302,7 @@ function DropdownProperty(props) { return choices.map(({ name, value }) => { return { - label: name, + label: translate(name), value }; }); @@ -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), @@ -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), @@ -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), diff --git a/test/spec/element-templates/i18n/Translate.bpmn b/test/spec/element-templates/i18n/Translate.bpmn new file mode 100644 index 0000000..81ab074 --- /dev/null +++ b/test/spec/element-templates/i18n/Translate.bpmn @@ -0,0 +1,22 @@ + + + + + + + foo + + + ${bar} + + + + + + + + + + + + diff --git a/test/spec/element-templates/i18n/Translate.spec.js b/test/spec/element-templates/i18n/Translate.spec.js new file mode 100644 index 0000000..2a08d91 --- /dev/null +++ b/test/spec/element-templates/i18n/Translate.spec.js @@ -0,0 +1,70 @@ +import TestContainer from 'mocha-test-container-support'; + +import { + query as domQuery, + queryAll as domQueryAll +} from 'min-dom'; + +import { + bootstrapModeler, + 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'; + +import customTranslate from './customTranslate'; + +describe('provider/element-templates - ElementTemplates', function() { + + let container; + + beforeEach(function() { + container = TestContainer.get(this); + }); + + beforeEach(bootstrapModeler(diagramXML, { + container, + modules: [ + BpmnPropertiesPanelModule, + coreModule, + elementTemplatesModule, + modelingModule, + { + translate: [ 'value', customTranslate ] + } + ], + moddleExtensions: { + camunda: camundaModdlePackage + }, + elementTemplates: templates + })); + + describe('translate', function() { + it('should translate', inject( + async function(elementRegistry, elementTemplates, selection) { + + const element = elementRegistry.get('ServiceTask_1'); + + await act(() => { + selection.select(element); + }); + + const groups = domQueryAll('[data-group-id]', container); + + console.log(groups.length); + } + )); + }); +}); diff --git a/test/spec/element-templates/i18n/Translate.templates.json b/test/spec/element-templates/i18n/Translate.templates.json new file mode 100644 index 0000000..be101f0 --- /dev/null +++ b/test/spec/element-templates/i18n/Translate.templates.json @@ -0,0 +1,19 @@ +[ + { + "id": "foo", + "name":"foo", + "appliesTo": [ "bpmn:ServiceTask" ], + "properties": [ + { + "id": "name", + "type": "String", + "label": "Name", + "value": "value", + "binding": { + "type": "property", + "name": "name" + } + } + ] + } +] diff --git a/test/spec/element-templates/i18n/customTranslate.js b/test/spec/element-templates/i18n/customTranslate.js new file mode 100644 index 0000000..9be6e10 --- /dev/null +++ b/test/spec/element-templates/i18n/customTranslate.js @@ -0,0 +1,5 @@ +export default function customTranslate(template, replacements) { + console.debug({ template, replacements }); + + return template; +} From 3c6a1f1c207b91854bf4a1f650072d5110e6240d Mon Sep 17 00:00:00 2001 From: Vovamzur Date: Mon, 25 Mar 2024 15:53:49 +0200 Subject: [PATCH 2/2] fix missing applying of the `translate` service --- .../element-templates/i18n/Translate.spec.js | 87 +++++++++++++++---- .../i18n/Translate.templates.json | 44 ++++++++-- .../element-templates/i18n/customTranslate.js | 5 -- 3 files changed, 108 insertions(+), 28 deletions(-) delete mode 100644 test/spec/element-templates/i18n/customTranslate.js diff --git a/test/spec/element-templates/i18n/Translate.spec.js b/test/spec/element-templates/i18n/Translate.spec.js index 2a08d91..8fe3334 100644 --- a/test/spec/element-templates/i18n/Translate.spec.js +++ b/test/spec/element-templates/i18n/Translate.spec.js @@ -6,12 +6,12 @@ import { } from 'min-dom'; import { - bootstrapModeler, + bootstrapPropertiesPanel, inject } from 'test/TestHelper'; import { - act, + act } from '@testing-library/preact'; import coreModule from 'bpmn-js/lib/core'; @@ -24,9 +24,7 @@ import diagramXML from './Translate.bpmn'; import templates from './Translate.templates'; -import customTranslate from './customTranslate'; - -describe('provider/element-templates - ElementTemplates', function() { +describe('provider/element-templates - Translate', function() { let container; @@ -34,7 +32,7 @@ describe('provider/element-templates - ElementTemplates', function() { container = TestContainer.get(this); }); - beforeEach(bootstrapModeler(diagramXML, { + beforeEach(bootstrapPropertiesPanel(diagramXML, { container, modules: [ BpmnPropertiesPanelModule, @@ -42,7 +40,12 @@ describe('provider/element-templates - ElementTemplates', function() { elementTemplatesModule, modelingModule, { - translate: [ 'value', customTranslate ] + translate: [ + 'value', + (template, replacements) => replacements + ? `${template}:translated:${JSON.stringify(replacements)}` + : `${template}:translated` + ] } ], moddleExtensions: { @@ -51,20 +54,68 @@ describe('provider/element-templates - ElementTemplates', function() { elementTemplates: templates })); - describe('translate', function() { - it('should translate', inject( - async function(elementRegistry, elementTemplates, selection) { + beforeEach(inject(async function(elementRegistry, selection) { + const element = elementRegistry.get('ServiceTask_1'); + await act(() => selection.select(element)); + })); - const element = elementRegistry.get('ServiceTask_1'); + 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); - await act(() => { - selection.select(element); - }); + expect(titleEl.textContent).to.equal('Template:translated'); + })); + }); - const groups = domQueryAll('[data-group-id]', container); + 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); - console.log(groups.length); - } - )); + 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'); + })); }); }); diff --git a/test/spec/element-templates/i18n/Translate.templates.json b/test/spec/element-templates/i18n/Translate.templates.json index be101f0..28eaf32 100644 --- a/test/spec/element-templates/i18n/Translate.templates.json +++ b/test/spec/element-templates/i18n/Translate.templates.json @@ -2,16 +2,50 @@ { "id": "foo", "name":"foo", - "appliesTo": [ "bpmn:ServiceTask" ], + "appliesTo": ["bpmn:ServiceTask"], "properties": [ { - "id": "name", + "type": "Boolean", + "label": "BooleanLabel", + "description": "BooleanDescription", + "value": "boolean", + "binding": { + "type": "property", + "name": "boolean" + } + }, + { + "type": "Dropdown", + "label": "DropdownLabel", + "description": "DropdownDescription", + "value": "dropdown", + "choices": [ + {"name": "Choice1", "value": "choice1"}, + {"name": "Choice2", "value": "choice2"} + ], + "binding": { + "type": "property", + "name": "dropdown" + } + }, + { "type": "String", - "label": "Name", - "value": "value", + "label": "StringLabel", + "description": "StringDescription", + "value": "string", + "binding": { + "type": "property", + "name": "string" + } + }, + { + "type": "Text", + "label": "TextLabel", + "description": "TextDescription", + "value": "text", "binding": { "type": "property", - "name": "name" + "name": "text" } } ] diff --git a/test/spec/element-templates/i18n/customTranslate.js b/test/spec/element-templates/i18n/customTranslate.js deleted file mode 100644 index 9be6e10..0000000 --- a/test/spec/element-templates/i18n/customTranslate.js +++ /dev/null @@ -1,5 +0,0 @@ -export default function customTranslate(template, replacements) { - console.debug({ template, replacements }); - - return template; -}