Add Launch Editor buttons for Json files. (fires 'file.editor.launch', with a fileName)

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

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);

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'),
+      },
     ],
   };
 }

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',
+  });
+}

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) => {

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 => {