From 7f43875b4f91cca7d127abb78cbc8df0b5943f08 Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Tue, 28 May 2024 16:36:58 +0200 Subject: [PATCH] feat: support placeholders on String and Text properties Closes #92 deps: update to `@bpmn-io/properties-panel@3.19.0` deps: update to `@bpmn-io/element-templates-validator@2.1.0` --- package-lock.json | 60 +++++++-------- package.json | 4 +- .../custom-properties/FeelProperty.js | 2 + .../custom-properties/FeelTextAreaProperty.js | 2 + .../custom-properties/StringProperty.js | 2 + .../custom-properties/TextAreaProperty.js | 2 + .../CustomProperties.placeholder.bpmn | 14 ++++ .../CustomProperties.placeholder.json | 45 +++++++++++ .../properties/CustomProperties.spec.js | 77 +++++++++++++++++++ 9 files changed, 176 insertions(+), 32 deletions(-) create mode 100644 test/spec/cloud-element-templates/properties/CustomProperties.placeholder.bpmn create mode 100644 test/spec/cloud-element-templates/properties/CustomProperties.placeholder.json diff --git a/package-lock.json b/package-lock.json index 2ddb538..071c28e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.15.3", "license": "MIT", "dependencies": { - "@bpmn-io/element-templates-validator": "^2.0.1", + "@bpmn-io/element-templates-validator": "^2.1.0", "@bpmn-io/extract-process-variables": "^0.8.0", "bpmnlint": "^10.0.0", "classnames": "^2.3.1", @@ -25,7 +25,7 @@ "@babel/plugin-transform-react-jsx": "^7.23.4", "@bpmn-io/element-template-chooser": "^1.0.0", "@bpmn-io/element-template-icon-renderer": "^0.5.2", - "@bpmn-io/properties-panel": "^3.18.2", + "@bpmn-io/properties-panel": "^3.19.0", "@bpmn-io/variable-resolver": "^1.2.2", "@camunda/linting": "^3.12.0", "@rollup/plugin-alias": "^5.1.0", @@ -521,12 +521,12 @@ } }, "node_modules/@bpmn-io/element-templates-validator": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@bpmn-io/element-templates-validator/-/element-templates-validator-2.0.1.tgz", - "integrity": "sha512-vwQNh2K2qzQPhRF4N4SHsgVCGCo6jsYL0mhanaii7k5XH7gyT+R9822D+lHOyih+Q4ii/KIQusZKSxFfhlLaLQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/element-templates-validator/-/element-templates-validator-2.1.0.tgz", + "integrity": "sha512-e8oYLUaZbL1ZuJjwXFyhhStbg0YgMNosIlzhKWdY7ysPhCFVMJlJ6yNYdaxyqfpPATTKb05uXMAsIgcqTQpoLg==", "dependencies": { - "@camunda/element-templates-json-schema": "^0.17.2", - "@camunda/zeebe-element-templates-json-schema": "^0.19.2", + "@camunda/element-templates-json-schema": "^0.18.0", + "@camunda/zeebe-element-templates-json-schema": "^0.20.0", "json-source-map": "^0.6.1", "min-dash": "^4.1.1" } @@ -582,9 +582,9 @@ } }, "node_modules/@bpmn-io/properties-panel": { - "version": "3.18.2", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.18.2.tgz", - "integrity": "sha512-IQ6NUZ4McSmr6KLyptnhnKxBind5Oz+FSZ5u8MJX/s/10RRj+RIVYCBS2UnfCKHZCE9YMWTdCHdA7XQ4lIjuzw==", + "version": "3.19.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.19.0.tgz", + "integrity": "sha512-ZVr8LC8ZiMYRkh9Vf4EnuQ7hJIzjBLpLUoex+q5/tGj1I2B/iFAgDUaqnD/yOyBzkRDi1K9IedsUA01XaqG13w==", "dev": true, "dependencies": { "@bpmn-io/feel-editor": "^1.3.0", @@ -615,9 +615,9 @@ } }, "node_modules/@camunda/element-templates-json-schema": { - "version": "0.17.2", - "resolved": "https://registry.npmjs.org/@camunda/element-templates-json-schema/-/element-templates-json-schema-0.17.2.tgz", - "integrity": "sha512-ZNwvJ6UqhoWK/SZXV+m9c4feer09zt9DpM4Y3jooCKrnTUHNrCEqDF7V8cW7NG2KE8x1k7pCIAyNoy/9i+iwng==" + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/@camunda/element-templates-json-schema/-/element-templates-json-schema-0.18.0.tgz", + "integrity": "sha512-k2k+1Z7UiW1TSA1oAvDQamgFZljH3hkFjU9VSpjVXnPgcjVxJMLX0mrHjLVtXhEx2tw576FzYGqlfudw6OOMKg==" }, "node_modules/@camunda/linting": { "version": "3.12.0", @@ -692,9 +692,9 @@ } }, "node_modules/@camunda/zeebe-element-templates-json-schema": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/@camunda/zeebe-element-templates-json-schema/-/zeebe-element-templates-json-schema-0.19.2.tgz", - "integrity": "sha512-T0U6Ij3AS191KADumm5rXCVUYtKSFBiipexQL3lJHey1XmADmTGIqhAe8+iCyKqUaxixjv5Q/IkuFD2NqBoIpw==" + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@camunda/zeebe-element-templates-json-schema/-/zeebe-element-templates-json-schema-0.20.0.tgz", + "integrity": "sha512-7YRN32Nq73H8S1rCOy2/6cfx+fKiTnhveJYfP6aRaIi83ZSlhVomRJ5+pnPmlDJqdFeNcIx1qqQwVFAdgNPFhg==" }, "node_modules/@codemirror/autocomplete": { "version": "6.16.0", @@ -10121,12 +10121,12 @@ } }, "@bpmn-io/element-templates-validator": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@bpmn-io/element-templates-validator/-/element-templates-validator-2.0.1.tgz", - "integrity": "sha512-vwQNh2K2qzQPhRF4N4SHsgVCGCo6jsYL0mhanaii7k5XH7gyT+R9822D+lHOyih+Q4ii/KIQusZKSxFfhlLaLQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/element-templates-validator/-/element-templates-validator-2.1.0.tgz", + "integrity": "sha512-e8oYLUaZbL1ZuJjwXFyhhStbg0YgMNosIlzhKWdY7ysPhCFVMJlJ6yNYdaxyqfpPATTKb05uXMAsIgcqTQpoLg==", "requires": { - "@camunda/element-templates-json-schema": "^0.17.2", - "@camunda/zeebe-element-templates-json-schema": "^0.19.2", + "@camunda/element-templates-json-schema": "^0.18.0", + "@camunda/zeebe-element-templates-json-schema": "^0.20.0", "json-source-map": "^0.6.1", "min-dash": "^4.1.1" } @@ -10176,9 +10176,9 @@ } }, "@bpmn-io/properties-panel": { - "version": "3.18.2", - "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.18.2.tgz", - "integrity": "sha512-IQ6NUZ4McSmr6KLyptnhnKxBind5Oz+FSZ5u8MJX/s/10RRj+RIVYCBS2UnfCKHZCE9YMWTdCHdA7XQ4lIjuzw==", + "version": "3.19.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/properties-panel/-/properties-panel-3.19.0.tgz", + "integrity": "sha512-ZVr8LC8ZiMYRkh9Vf4EnuQ7hJIzjBLpLUoex+q5/tGj1I2B/iFAgDUaqnD/yOyBzkRDi1K9IedsUA01XaqG13w==", "dev": true, "requires": { "@bpmn-io/feel-editor": "^1.3.0", @@ -10203,9 +10203,9 @@ } }, "@camunda/element-templates-json-schema": { - "version": "0.17.2", - "resolved": "https://registry.npmjs.org/@camunda/element-templates-json-schema/-/element-templates-json-schema-0.17.2.tgz", - "integrity": "sha512-ZNwvJ6UqhoWK/SZXV+m9c4feer09zt9DpM4Y3jooCKrnTUHNrCEqDF7V8cW7NG2KE8x1k7pCIAyNoy/9i+iwng==" + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/@camunda/element-templates-json-schema/-/element-templates-json-schema-0.18.0.tgz", + "integrity": "sha512-k2k+1Z7UiW1TSA1oAvDQamgFZljH3hkFjU9VSpjVXnPgcjVxJMLX0mrHjLVtXhEx2tw576FzYGqlfudw6OOMKg==" }, "@camunda/linting": { "version": "3.12.0", @@ -10265,9 +10265,9 @@ } }, "@camunda/zeebe-element-templates-json-schema": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/@camunda/zeebe-element-templates-json-schema/-/zeebe-element-templates-json-schema-0.19.2.tgz", - "integrity": "sha512-T0U6Ij3AS191KADumm5rXCVUYtKSFBiipexQL3lJHey1XmADmTGIqhAe8+iCyKqUaxixjv5Q/IkuFD2NqBoIpw==" + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@camunda/zeebe-element-templates-json-schema/-/zeebe-element-templates-json-schema-0.20.0.tgz", + "integrity": "sha512-7YRN32Nq73H8S1rCOy2/6cfx+fKiTnhveJYfP6aRaIi83ZSlhVomRJ5+pnPmlDJqdFeNcIx1qqQwVFAdgNPFhg==" }, "@codemirror/autocomplete": { "version": "6.16.0", diff --git a/package.json b/package.json index 02b88cd..48493f0 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ ], "license": "MIT", "dependencies": { - "@bpmn-io/element-templates-validator": "^2.0.1", + "@bpmn-io/element-templates-validator": "^2.1.0", "@bpmn-io/extract-process-variables": "^0.8.0", "bpmnlint": "^10.0.0", "classnames": "^2.3.1", @@ -77,7 +77,7 @@ "@babel/plugin-transform-react-jsx": "^7.23.4", "@bpmn-io/element-template-chooser": "^1.0.0", "@bpmn-io/element-template-icon-renderer": "^0.5.2", - "@bpmn-io/properties-panel": "^3.18.2", + "@bpmn-io/properties-panel": "^3.19.0", "@bpmn-io/variable-resolver": "^1.2.2", "@camunda/linting": "^3.12.0", "@rollup/plugin-alias": "^5.1.0", diff --git a/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelProperty.js b/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelProperty.js index 558fe5e..ca0e8da 100644 --- a/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelProperty.js +++ b/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelProperty.js @@ -16,6 +16,7 @@ export function FeelProperty(props) { editable, label, feel, + placeholder, tooltip } = property; @@ -35,6 +36,7 @@ export function FeelProperty(props) { id, label, feel, + placeholder, description: PropertyDescription({ description }), setValue: propertySetter(bpmnFactory, commandStack, element, property), validate: propertyValidator(translate, property), diff --git a/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelTextAreaProperty.js b/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelTextAreaProperty.js index b3f7257..14749a3 100644 --- a/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelTextAreaProperty.js +++ b/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelTextAreaProperty.js @@ -19,6 +19,7 @@ export function FeelTextAreaProperty(props) { editable, label, feel, + placeholder, tooltip } = property; @@ -38,6 +39,7 @@ export function FeelTextAreaProperty(props) { id, label, feel, + placeholder, description: PropertyDescription({ description }), setValue: propertySetter(bpmnFactory, commandStack, element, property), validate: propertyValidator(translate, property), diff --git a/src/cloud-element-templates/properties-panel/properties/custom-properties/StringProperty.js b/src/cloud-element-templates/properties-panel/properties/custom-properties/StringProperty.js index a46e338..0a298ff 100644 --- a/src/cloud-element-templates/properties-panel/properties/custom-properties/StringProperty.js +++ b/src/cloud-element-templates/properties-panel/properties/custom-properties/StringProperty.js @@ -16,6 +16,7 @@ export function StringProperty(props) { editable, label, feel, + placeholder, tooltip } = property; @@ -31,6 +32,7 @@ export function StringProperty(props) { id, label, feel, + placeholder, description: PropertyDescription({ description }), setValue: propertySetter(bpmnFactory, commandStack, element, property), validate: propertyValidator(translate, property), diff --git a/src/cloud-element-templates/properties-panel/properties/custom-properties/TextAreaProperty.js b/src/cloud-element-templates/properties-panel/properties/custom-properties/TextAreaProperty.js index 13eb500..1c61455 100644 --- a/src/cloud-element-templates/properties-panel/properties/custom-properties/TextAreaProperty.js +++ b/src/cloud-element-templates/properties-panel/properties/custom-properties/TextAreaProperty.js @@ -21,6 +21,7 @@ export function TextAreaProperty(props) { label, feel, language, + placeholder, tooltip } = property; @@ -35,6 +36,7 @@ export function TextAreaProperty(props) { id, label, feel, + placeholder, monospace: !!language, autoResize: true, description: PropertyDescription({ description }), diff --git a/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.bpmn b/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.bpmn new file mode 100644 index 0000000..6cad2ed --- /dev/null +++ b/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.bpmn @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.json b/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.json new file mode 100644 index 0000000..5ed1396 --- /dev/null +++ b/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.json @@ -0,0 +1,45 @@ +[ + { + "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json", + "name": "Placeholder", + "id": "placeholder", + "appliesTo": [ + "bpmn:Task" + ], + "properties": [ + { + "binding": { + "type": "zeebe:input", + "name": "input-1-target" + }, + "placeholder": "Placeholder" + }, + { + "type": "Text", + "binding": { + "type": "zeebe:input", + "name": "input-2-target" + }, + "placeholder": "Placeholder" + }, + { + "type": "String", + "feel": "required", + "binding": { + "type": "zeebe:input", + "name": "input-1-target" + }, + "placeholder": "Placeholder" + }, + { + "type": "Text", + "feel": "required", + "binding": { + "type": "zeebe:input", + "name": "input-1-target" + }, + "placeholder": "Placeholder" + } + ] + } +] \ No newline at end of file diff --git a/test/spec/cloud-element-templates/properties/CustomProperties.spec.js b/test/spec/cloud-element-templates/properties/CustomProperties.spec.js index 7d429c2..5d29ef3 100644 --- a/test/spec/cloud-element-templates/properties/CustomProperties.spec.js +++ b/test/spec/cloud-element-templates/properties/CustomProperties.spec.js @@ -70,6 +70,9 @@ import groupsElementTemplates from './CustomProperties.groups.json'; import textLanguageDiagramXML from './CustomProperties.text-language.bpmn'; import textLanguageElementTemplates from './CustomProperties.text-language.json'; +import placeholderDiagramXML from './CustomProperties.placeholder.bpmn'; +import placeholderElementTemplates from './CustomProperties.placeholder.json'; + describe('provider/cloud-element-templates - CustomProperties', function() { @@ -2153,6 +2156,80 @@ describe('provider/cloud-element-templates - CustomProperties', function() { }); + + describe('placeholder', function() { + + beforeEach(bootstrapPropertiesPanel(placeholderDiagramXML, { + container, + debounceInput: false, + elementTemplates: placeholderElementTemplates, + moddleExtensions: { + zeebe: zeebeModdlePackage + }, + modules: [ + BpmnPropertiesPanel, + coreModule, + elementTemplatesModule, + modelingModule + ] + })); + + + it('should display placeholder (String)', async function() { + + // given + await expectSelected('Task_1'); + + // when + const entry = findEntry('custom-entry-placeholder-0', container), + input = findInput('text', entry); + + // then + expect(input.placeholder).to.eql('Placeholder'); + }); + + + it('should display placeholder (Text)', async function() { + + // given + await expectSelected('Task_1'); + + // when + const entry = findEntry('custom-entry-placeholder-1', container), + input = findTextarea(entry); + + // then + expect(input.placeholder).to.eql('Placeholder'); + }); + + + it('should display placeholder (FEEL, String)', async function() { + + // given + await expectSelected('Task_1'); + + // when + const entry = findEntry('custom-entry-placeholder-2', container), + input = domQuery('.bio-properties-panel-input', entry); + + // then + expect(input.textContent).to.eql('Placeholder'); + }); + + + it('should display placeholder (FEEL, Text)', async function() { + + // given + await expectSelected('Task_1'); + + // when + const entry = findEntry('custom-entry-placeholder-3', container), + input = domQuery('.bio-properties-panel-input', entry); + + // then + expect(input.textContent).to.eql('Placeholder'); + }); + }); });