From ecb175d7276cb11e48f76249f9f1597dccf1a8fa Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 1 Nov 2022 10:35:07 -0400 Subject: [PATCH] Add Launch Editor buttons for Json files. (fires 'file.editor.launch', with a fileName) --- app/app.js | 17 ++++++++++++-- .../extensions/extensionHelpers.js | 13 +++++++++++ .../ExtensionsPropertiesProvider.js | 19 +++++++++++++-- .../SpiffExtensionLaunchFileEditor.js | 23 +++++++++++++++++++ .../propertiesPanel/SpiffExtensionSelect.js | 8 ++----- .../SpiffExtensionTextInput.js | 11 ++------- 6 files changed, 72 insertions(+), 19 deletions(-) create mode 100644 app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchFileEditor.js diff --git a/app/app.js b/app/app.js index d54a680..36b8f5f 100644 --- a/app/app.js +++ b/app/app.js @@ -127,9 +127,9 @@ saveMarkdownBtn.addEventListener('click', (_event) => { }); /** - * Also can be good to launch an editor for a call activity. + * Also can be good to launch an editor for a call activity, or file * Not implemented here but imagine opening up a new browser tab - * and showing a different process. + * and showing a different process or completly different file editor. */ bpmnModeler.on('callactivity.editor.launch', (newEvent) => { console.log( @@ -138,6 +138,19 @@ bpmnModeler.on('callactivity.editor.launch', (newEvent) => { ); }); +/** + * Also can be good to launch an editor for a call activity. + * Not implemented here but imagine opening up a new browser tab + * and showing a different process. + */ +bpmnModeler.on('file.editor.launch', (newEvent) => { + console.log( + 'Open new window to edit file: ', + newEvent.fileName + ); +}); + + /** * 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 diff --git a/app/spiffworkflow/extensions/extensionHelpers.js b/app/spiffworkflow/extensions/extensionHelpers.js index fa697f8..cfb45b2 100644 --- a/app/spiffworkflow/extensions/extensionHelpers.js +++ b/app/spiffworkflow/extensions/extensionHelpers.js @@ -27,6 +27,19 @@ export function getExtensionProperty(element, name) { return null; } +/** + * Returns the string value of the extension properties value attribute, or "" + * @param element + * @param name + */ +export function getExtensionValue(element, name) { + const property = getExtensionProperty(element, name); + if (property) { + return property.value; + } + return ''; +} + export function setExtensionProperty(element, name, value, moddle, commandStack) { let properties = getExtensionProperties(element); let property = getExtensionProperty(element, name); diff --git a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js index 4791053..8292c2e 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js +++ b/app/spiffworkflow/extensions/propertiesPanel/ExtensionsPropertiesProvider.js @@ -9,6 +9,7 @@ import { ServiceTaskOperatorSelect, ServiceTaskResultTextInput, } from './SpiffExtensionServiceProperties'; import {OPTION_TYPE, SpiffExtensionSelect} from './SpiffExtensionSelect'; +import {SpiffExtensionLaunchFileEditor} from './SpiffExtensionLaunchFileEditor'; const LOW_PRIORITY = 500; @@ -144,9 +145,16 @@ function createUserGroup(element, translate, moddle, commandStack) { component: SpiffExtensionSelect, optionType: OPTION_TYPE.json, label: translate('JSON Schema Filename'), - description: translate('RJSF Json Data Structure Filename'), + description: translate('Form Description (RSJF)'), name: 'formJsonSchemaFilename', }, + { + component: SpiffExtensionLaunchFileEditor, + element, + name: 'formJsonSchemaFilename', + label: translate('Launch Editor'), + description: translate('Edit the form description'), + }, { element, moddle, @@ -154,9 +162,16 @@ function createUserGroup(element, translate, moddle, commandStack) { component: SpiffExtensionSelect, optionType: OPTION_TYPE.json, label: translate('UI Schema Filename'), - description: translate('RJSF User Interface Filename'), + description: translate('Rules for displaying the form. (RSJF Schema)'), name: 'formUiSchemaFilename', }, + { + component: SpiffExtensionLaunchFileEditor, + element, + name: 'formUiSchemaFilename', + label: translate('Launch Editor'), + description: translate('Edit the form schema'), + }, ], }; } diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchFileEditor.js b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchFileEditor.js new file mode 100644 index 0000000..8dd8992 --- /dev/null +++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionLaunchFileEditor.js @@ -0,0 +1,23 @@ +import { HeaderButton } from '@bpmn-io/properties-panel'; +import { useService } from 'bpmn-js-properties-panel'; +import { getExtensionValue } from '../extensionHelpers'; + +/** + * Sends a notification to the host application saying the user + * would like to edit an external file. Hosting application + * would need to handle saving the file. + */ +export function SpiffExtensionLaunchFileEditor(props) { + const { element, name } = props; + const eventBus = useService('eventBus'); + return HeaderButton({ + className: 'spiffworkflow-properties-panel-button', + onClick: () => { + const fileName = getExtensionValue(element, name); + eventBus.fire('file.editor.launch', { + fileName, + }); + }, + children: 'Launch Editor', + }); +} diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js index 9a980cd..ac8d252 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js +++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionSelect.js @@ -1,7 +1,7 @@ import { SelectEntry } from '@bpmn-io/properties-panel'; import { useService } from 'bpmn-js-properties-panel'; import { - getExtensionProperty, + getExtensionValue, setExtensionProperty, } from '../extensionHelpers'; @@ -40,11 +40,7 @@ export function SpiffExtensionSelect(props) { const eventBus = useService('eventBus'); const getValue = () => { - const property = getExtensionProperty(element, name); - if (property) { - return property.value; - } - return ''; + return getExtensionValue(element, name); }; const setValue = (value) => { diff --git a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.js b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.js index c8445f5..8d6a1b5 100644 --- a/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.js +++ b/app/spiffworkflow/extensions/propertiesPanel/SpiffExtensionTextInput.js @@ -1,10 +1,7 @@ import {useService } from 'bpmn-js-properties-panel'; import { TextFieldEntry } from '@bpmn-io/properties-panel'; import { - addOrUpdateExtensionProperty, - getExtensionProperties, - getExtensionPropertiesObject, - getExtensionProperty, setExtensionProperty + getExtensionValue, setExtensionProperty } from '../extensionHelpers'; @@ -30,11 +27,7 @@ export function SpiffExtensionTextInput(props) { const debounce = useService('debounceInput'); const getValue = () => { - const property = getExtensionProperty(element, name) - if (property) { - return property.value; - } - return "" + return getExtensionValue(element, name) } const setValue = value => {