diff --git a/app/app.js b/app/app.js index a96012e..783a5c6 100644 --- a/app/app.js +++ b/app/app.js @@ -160,8 +160,8 @@ bpmnModeler.on('spiff.dmn.edit', (newEvent) => { * Also handy to get a list of available files that can be used in a given * context, say json files for a form, or a DMN file for a BusinessRuleTask */ -bpmnModeler.on('spiff.json_files.requested', (event) => { - event.eventBus.fire('spiff.json_files.returned', { +bpmnModeler.on('spiff.json_schema_files.requested', (event) => { + event.eventBus.fire('spiff.json_schema_files.returned', { options: [ { label: 'pizza_form.json', value: 'pizza_form.json' }, { label: 'credit_card_form.json', value: 'credit_card_form.json' }, diff --git a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js index 544c204..8aeb7c2 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js +++ b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js @@ -9,13 +9,14 @@ import { ServiceTaskParameterArray, ServiceTaskOperatorSelect, ServiceTaskResultTextInput, } from './SpiffExtensionServiceProperties'; -import {OPTION_TYPE, SpiffExtensionSelect} from './SpiffExtensionSelect'; +import {OPTION_TYPE, spiffExtensionOptions, SpiffExtensionSelect} from './SpiffExtensionSelect'; import {SpiffExtensionLaunchButton} from './SpiffExtensionLaunchButton'; import {SpiffExtensionTextArea} from './SpiffExtensionTextArea'; import {SpiffExtensionTextInput} from './SpiffExtensionTextInput'; import {SpiffExtensionCheckboxEntry} from './SpiffExtensionCheckboxEntry'; import {hasEventDefinition} from 'bpmn-js/lib/util/DiUtil'; import { PropertyDescription } from 'bpmn-js-properties-panel/'; +import {setExtensionValue} from "../extensionHelpers"; const LOW_PRIORITY = 500; @@ -203,6 +204,17 @@ function ScriptValenceCheckbox(props) { * @returns entries */ function createUserGroup(element, translate, moddle, commandStack) { + + const updateExtensionProperties = (element, name, value, moddle, commandStack) => { + const uiName = value.replace('schema\.json', 'uischema\.json') + setExtensionValue(element, 'formJsonSchemaFilename', value, moddle, commandStack); + setExtensionValue(element, 'formUiSchemaFilename', uiName, moddle, commandStack); + const matches = spiffExtensionOptions[OPTION_TYPE.json_schema_files].filter((opt) => opt.value === value); + if (matches.length === 0) { + spiffExtensionOptions[OPTION_TYPE.json_schema_files].push({label: value, value: value}); + } + } + return { id: 'user_task_properties', label: translate('Web Form (with Json Schemas)'), @@ -212,7 +224,7 @@ function createUserGroup(element, translate, moddle, commandStack) { moddle, commandStack, component: SpiffExtensionSelect, - optionType: OPTION_TYPE.json_files, + optionType: OPTION_TYPE.json_schema_files, name: 'formJsonSchemaFilename', label: translate('JSON Schema Filename'), description: translate('Form Description (RSJF)'), @@ -220,29 +232,14 @@ function createUserGroup(element, translate, moddle, commandStack) { { component: SpiffExtensionLaunchButton, element, + moddle, + commandStack, name: 'formJsonSchemaFilename', label: translate('Launch Editor'), event: 'spiff.file.edit', - description: translate('Edit the form description'), - }, - { - element, - moddle, - commandStack, - component: SpiffExtensionSelect, - optionType: OPTION_TYPE.json_files, - label: translate('UI Schema Filename'), - event: 'spiff.file.edit', - description: translate('Rules for displaying the form. (RSJF Schema)'), - name: 'formUiSchemaFilename', - }, - { - component: SpiffExtensionLaunchButton, - element, - name: 'formUiSchemaFilename', - label: translate('Launch Editor'), - event: 'spiff.file.edit', - description: translate('Edit the form schema'), + listenEvent: 'spiff.jsonSchema.update', + listenFunction: updateExtensionProperties, + description: translate('Edit the form schema') }, ], }; diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchButton.js b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchButton.js index 7f7d5f5..16f3cf8 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchButton.js +++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchButton.js @@ -8,7 +8,7 @@ import {getExtensionValue, setExtensionValue} from '../extensionHelpers'; * update the value and send it back. */ export function SpiffExtensionLaunchButton(props) { - const { element, name, event, listenEvent } = props; + const { element, name, event, listenEvent, listenFunction } = props; const eventBus = useService('eventBus'); return HeaderButton({ className: 'spiffworkflow-properties-panel-button', @@ -28,7 +28,11 @@ export function SpiffExtensionLaunchButton(props) { const { commandStack, moddle } = props; // Listen for a response, to update the script. eventBus.once(listenEvent, (response) => { - setExtensionValue(element, name, response.value, moddle, commandStack); + if(listenFunction) { + listenFunction(element, name, response.value, moddle, commandStack); + } else { + setExtensionValue(element, name, response.value, moddle, commandStack); + } }); } diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js index e2307cf..77f513c 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js +++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js @@ -5,10 +5,10 @@ import { setExtensionValue, } from '../extensionHelpers'; -const spiffExtensionOptions = {}; +export const spiffExtensionOptions = {}; export const OPTION_TYPE = { - json_files: 'json_files', + json_schema_files: 'json_schema_files', dmn_files: 'dmn_files', }; @@ -52,6 +52,10 @@ export function SpiffExtensionSelect(props) { } const getOptions = () => { const optionList = []; + optionList.push({ + label: '', + value: '', + }); if ( optionType in spiffExtensionOptions && spiffExtensionOptions[optionType] !== null @@ -81,7 +85,7 @@ export function SpiffExtensionSelect(props) { function requestOptions(eventBus, element, commandStack, optionType) { // Little backwards, but you want to assure you are ready to catch, before you throw // or you risk a race condition. - eventBus.once(`spiff.${optionType}.returned`, (event) => { + eventBus.on(`spiff.${optionType}.returned`, (event) => { spiffExtensionOptions[optionType] = event.options; }); eventBus.fire(`spiff.${optionType}.requested`, { eventBus }); diff --git a/test/spec/UserTaskPropsSpec.js b/test/spec/UserTaskPropsSpec.js index ebbcea8..aeeb023 100644 --- a/test/spec/UserTaskPropsSpec.js +++ b/test/spec/UserTaskPropsSpec.js @@ -18,7 +18,7 @@ import { } from './helpers'; import extensions from '../../app/spiffworkflow/extensions'; import {query as domQuery} from 'min-dom'; -import {default as diagram_xml} from './bpmn/diagram.bpmn'; + describe('Properties Panel for User Tasks', function () { const user_form_xml = require('./bpmn/user_form.bpmn').default; @@ -30,8 +30,8 @@ describe('Properties Panel for User Tasks', function () { }); function addOptionsToEventBus(bpmnModeler) { - bpmnModeler.on('spiff.json_files.requested', (event) => { - event.eventBus.fire('spiff.json_files.returned', { + bpmnModeler.on('spiff.json_schema_files.requested', (event) => { + event.eventBus.fire('spiff.json_schema_files.returned', { options: [ { label: 'pizza_form.json', value: 'pizza_form.json' }, { label: 'credit_card_form.json', value: 'credit_card_form.json' }, @@ -79,9 +79,10 @@ describe('Properties Panel for User Tasks', function () { const entry = findEntry('extension_formJsonSchemaFilename', group); const selectList = findSelect(entry); expect(selectList).to.exist; - expect(selectList.options.length).to.equal(4); - expect(selectList.options[0].label).to.equal('pizza_form.json'); - expect(selectList.options[1].label).to.equal('credit_card_form.json'); + expect(selectList.options.length).to.equal(5); // including the empty option + expect(selectList.options[0].label).to.equal(''); + expect(selectList.options[1].label).to.equal('pizza_form.json'); + expect(selectList.options[2].label).to.equal('credit_card_form.json'); changeInput(selectList, 'pizza_form.json'); @@ -106,9 +107,35 @@ describe('Properties Panel for User Tasks', function () { const formJsonSchemaFilenameEntry = findEntry('extension_formJsonSchemaFilename', group); const formJsonSchemaFilenameInput = findSelect(formJsonSchemaFilenameEntry); expect(formJsonSchemaFilenameInput.value).to.equal('give_me_a_number_form.json'); - const formUiSchemaFilenameEntry = findEntry('extension_formUiSchemaFilename', group); - const formUiSchemaFilenameInput = findSelect(formUiSchemaFilenameEntry); - expect(formUiSchemaFilenameInput.value).to.equal('number_form_schema.json'); + }); + + it('should update both the json and ui extensions if the json file is set', async function () { + await preparePropertiesPanelWithXml(diagram_xml)(); + const modeler = getBpmnJS(); + + addOptionsToEventBus(modeler); + const userElement = await expectSelected('task_confirm'); + const group = findGroupEntry('user_task_properties', container); + const button = findButton( + 'launch_editor_button_formJsonSchemaFilename', + group + ); + expect(button).to.exist; + let launchEvent; + let eventBus = modeler.get('eventBus'); + eventBus.on('spiff.file.edit', function (event) { + launchEvent = event; + }); + await pressButton(button); + expect(launchEvent.value).to.exist; + eventBus.fire('spiff.jsonSchema.update', { + value: 'new-schema.json', + }); + const jsonFile = getExtensionValue(userElement, 'formJsonSchemaFilename'); + const uiFile = getExtensionValue(userElement, 'formUiSchemaFilename'); + expect(jsonFile).to.equal('new-schema.json'); + expect(uiFile).to.equal('new-uischema.json'); + }); it('should allow you to change the instructions to the end user', async function () {