Merge branch 'feature/messages' of github.com:sartography/bpmn-js-spiffworkflow into feature/messages

.eslintrc.js

@@ -0,0 +1,48 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'airbnb',
+    'plugin:prettier/recommended',
+    'plugin:sonarjs/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  rules: {
+    'jsx-a11y/no-autofocus': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'no-console': 'off',
+    'no-unused-vars': [
+      'error',
+      {
+        destructuredArrayIgnorePattern: '^_',
+        varsIgnorePattern: '_',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+
+    // We could try turning these on at some point but do not want to force it now
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+  },
+};

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  singleQuote: true,
+};

app/spiffworkflow/extensions/propertiesPanel/SpiffScriptGroup.js

@@ -1,49 +1,22 @@
-import { HeaderButton, TextAreaEntry, TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+import {
+  HeaderButton,
+  TextAreaEntry,
+  isTextFieldEntryEdited,
+} from '@bpmn-io/properties-panel';
 import { useService } from 'bpmn-js-properties-panel';
 
 export const SCRIPT_TYPE = {
   bpmn: 'bpmn:script',
   pre: 'spiffworkflow:preScript',
-  post: 'spiffworkflow:postScript'
+  post: 'spiffworkflow:postScript',
 };
 
-/**
- * Generates a python script.
- * @param element The elemment that should get the script task.
- * @param scriptType The type of script -- can be a preScript, postScript or a BPMN:Script for script tags
- * @param moddle For updating the underlying xml document when needed.
- * @returns {[{component: (function(*)), isEdited: *, id: string, element},{component: (function(*)), isEdited: *, id: string, element}]}
- */
-export default function(element, moddle, scriptType, label, description) {
-
-  return [
-    {
-      id: 'pythonScript_' + scriptType,
-      element,
-      targetTag: scriptType,
-      component: PythonScript,
-      isEdited: isTextFieldEntryEdited,
-      moddle: moddle,
-      label: label,
-      description: description
-    },
-    {
-      id: 'launchEditorButton' + scriptType,
-      target_tag: scriptType,
-      element,
-      component: LaunchEditorButton,
-      isEdited: isTextFieldEntryEdited,
-      moddle: moddle
-    },
-  ];
-}
-
 function PythonScript(props) {
   const { element, id } = props;
-  const type = props.targetTag;
-  const moddle = props.moddle;
-  const label = props.label;
-  const description = props.description;
+  const { type } = props;
+  const { moddle } = props;
+  const { label } = props;
+  const { description } = props;
 
   const translate = useService('translate');
   const debounce = useService('debounceInput');
@@ -72,31 +45,33 @@ function PythonScript(props) {
     }
     if (!bizObj.extensionElements) {
       return null;
-    } else {
-      return bizObj.extensionElements.get("values").filter(function(e) {
+    }
+    return bizObj.extensionElements
+      .get('values')
+      .filter(function getInstanceOfType(e) {
         return e.$instanceOf(type);
       })[0];
-    }
   };
 
   const getValue = () => {
-    const scriptObj = getScriptObject()
+    const scriptObj = getScriptObject();
     if (scriptObj) {
       return scriptObj.script;
-    } else {
-      return ""
     }
+    return '';
   };
 
-  const setValue = value => {
-    const businessObject = element.businessObject;
-    let scriptObj = getScriptObject()
+  const setValue = (value) => {
+    const { businessObject } = element;
+    let scriptObj = getScriptObject();
     // Create the script object if needed.
     if (!scriptObj) {
       scriptObj = moddle.create(type);
       if (type !== SCRIPT_TYPE.bpmn) {
         if (!businessObject.extensionElements) {
-          businessObject.extensionElements = moddle.create('bpmn:ExtensionElements');
+          businessObject.extensionElements = moddle.create(
+            'bpmn:ExtensionElements'
+          );
         }
         businessObject.extensionElements.get('values').push(scriptObj);
       }
@@ -104,26 +79,67 @@ function PythonScript(props) {
     scriptObj.script = value;
   };
 
-  return <TextAreaEntry
-    id={ id }
-    element={ element }
-    description={ translate(description) }
-    label={ translate(label) }
-    getValue={ getValue }
-    setValue={ setValue }
-    debounce={ debounce }
-  />;
+  return (
+    <TextAreaEntry
+      id={id}
+      element={element}
+      description={translate(description)}
+      label={translate(label)}
+      getValue={getValue}
+      setValue={setValue}
+      debounce={debounce}
+    />
+  );
 }
 
 function LaunchEditorButton(props) {
-  const { element, id, type } = props;
+  const { element, type } = props;
   const eventBus = useService('eventBus');
-  const modeling = useService('modeling');
   // fixme: add a call up date as a property
-  return <HeaderButton
-    className="spiffworkflow-properties-panel-button"
-    onClick={() => {
-      eventBus.fire('launch.script.editor', { element: element , type});
-    }}
-  >Launch Editor</HeaderButton>;
+  return (
+    <HeaderButton
+      className="spiffworkflow-properties-panel-button"
+      onClick={() => {
+        eventBus.fire('launch.script.editor', { element, type });
+      }}
+    >
+      Launch Editor
+    </HeaderButton>
+  );
+}
+
+/**
+ * Generates a python script.
+ * @param element The elemment that should get the script task.
+ * @param scriptType The type of script -- can be a preScript, postScript or a BPMN:Script for script tags
+ * @param moddle For updating the underlying xml document when needed.
+ * @returns {[{component: (function(*)), isEdited: *, id: string, element},{component: (function(*)), isEdited: *, id: string, element}]}
+ */
+export default function getEntries(
+  element,
+  moddle,
+  scriptType,
+  label,
+  description
+) {
+  return [
+    {
+      id: `pythonScript_${scriptType}`,
+      element,
+      type: scriptType,
+      component: PythonScript,
+      isEdited: isTextFieldEntryEdited,
+      moddle,
+      label,
+      description,
+    },
+    {
+      id: `launchEditorButton${scriptType}`,
+      type: scriptType,
+      element,
+      component: LaunchEditorButton,
+      isEdited: isTextFieldEntryEdited,
+      moddle,
+    },
+  ];
 }

app/spiffworkflow/index.js

@@ -7,20 +7,21 @@ import RulesModule from 'diagram-js/lib/features/rules';
 import DataObjectRenderer from './DataObject/DataObjectRenderer';
 import DataObjectPropertiesProvider from './DataObject/propertiesPanel/DataObjectPropertiesProvider';
 import ExtensionsPropertiesProvider from './extensions/propertiesPanel/ExtensionsPropertiesProvider';
+import MessagesPropertiesProvider from './messages/propertiesPanel/MessagesPropertiesProvider';
 
 export default {
   __depends__: [ RulesModule ],
   __init__: [
     'dataObjectInterceptor', 'dataObjectRules', 'dataObjectPropertiesProvider',
-    'extensionsPropertiesProvider',
+    'extensionsPropertiesProvider', 'messagesPropertiesProvider',
     'ioPalette', 'ioRules', 'ioInterceptor', 'dataObjectRenderer' ],
   dataObjectInterceptor: [ 'type', DataObjectInterceptor ],
   dataObjectRules:[ 'type', DataObjectRules ],
   dataObjectRenderer: [ 'type', DataObjectRenderer ],
   dataObjectPropertiesProvider: [ 'type', DataObjectPropertiesProvider ],
   extensionsPropertiesProvider: [ 'type', ExtensionsPropertiesProvider ],
+  messagesPropertiesProvider: [ 'type', MessagesPropertiesProvider ],
   ioPalette: [ 'type', IoPalette ],
   ioRules: [ 'type', IoRules ],
   ioInterceptor: [ 'type', IoInterceptor ],
 };
-

app/spiffworkflow/messages/propertiesPanel/MessagesPropertiesProvider.js

@@ -0,0 +1,88 @@
+import {
+  TextAreaEntry,
+  TextFieldEntry,
+  isTextFieldEntryEdited,
+} from '@bpmn-io/properties-panel';
+import { useService } from 'bpmn-js-properties-panel';
+import { is, isAny } from 'bpmn-js/lib/util/ModelUtil';
+
+// import { SpiffExtensionCalledDecision } from './SpiffExtensionCalledDecision';
+// import { SpiffExtensionTextInput } from './SpiffExtensionTextInput';
+const LOW_PRIORITY = 500;
+
+export default function MessagesPropertiesProvider(
+  propertiesPanel,
+  translate,
+  moddle,
+  commandStack,
+  elementRegistry
+) {
+  this.getGroups = function (element) {
+    return function (groups) {
+      if (is(element, 'bpmn:Collaboration')) {
+        groups.push(createCollaborationGroup(element, translate, moddle));
+      }
+
+      return groups;
+    };
+  };
+  propertiesPanel.registerProvider(LOW_PRIORITY, this);
+}
+
+MessagesPropertiesProvider.$inject = [
+  'propertiesPanel',
+  'translate',
+  'moddle',
+  'commandStack',
+  'elementRegistry',
+];
+
+function MessageCollaboration(props) {
+  const { element } = props;
+  const debounce = useService('debounceInput');
+  const getValue = () => {
+    return '';
+  };
+
+  const setValue = (value) => {};
+
+  return (
+    <TextAreaEntry
+      id="message_collaborations"
+      element={element}
+      description="description"
+      label="label"
+      getValue={getValue}
+      setValue={setValue}
+      debounce={debounce}
+    />
+  );
+}
+
+function messageCollaborationGroup(element, _moddle, _label, _description) {
+  return [
+    {
+      component: MessageCollaboration,
+      element,
+    },
+  ];
+}
+
+/**
+ * Adds a group to the properties panel for the script task that allows you
+ * to set the script.
+ * @param element
+ * @param translate
+ * @returns The components to add to the properties panel. */
+function createCollaborationGroup(element, translate, moddle, commandStack) {
+  return {
+    id: 'collaboration_id',
+    label: translate('Message Collaboration'),
+    entries: messageCollaborationGroup(
+      element,
+      moddle,
+      'Collab',
+      'More Collabor'
+    ),
+  };
+}

package.json

@@ -8,7 +8,8 @@
     "build:watch": "webpack --watch",
     "dev": "run-p build:watch serve",
     "serve": "sirv public --dev",
-    "lint": "eslint .",
+    "lint": "./node_modules/.bin/eslint src *.js",
+    "lint:fix": "./node_modules/.bin/eslint --fix src *.js",
     "start": "run-s build serve",
     "test": "karma start karma.conf.js"
   },
@@ -43,7 +44,14 @@
     "chai": "^4.3.6",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.18.0",
+    "eslint_d": "^12.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-bpmn-io": "^0.14.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-sonarjs": "^0.13.0",
     "file-saver": "^2.0.5",
     "karma": "^6.3.4",
     "karma-chrome-launcher": "^3.1.1",
@@ -55,6 +63,7 @@
     "mocha": "^10.0.0",
     "mocha-test-container-support": "^0.2.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
     "raw-loader": "^4.0.2",
     "sinon": "^14.0.0",
     "sinon-chai": "^3.7.0",
@@ -64,6 +73,7 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
+    "@bpmn-io/properties-panel": "^0.18.0",
     "bpmn-js": "^9.2.2",
     "bpmn-js-properties-panel": "^1.1.1",
     "diagram-js": "^8.5.0",

test/spec/MessagesSpec.js

@@ -29,7 +29,7 @@ describe('Messages should work', function() {
   it('should allow you to see the collaborations section', async function() {
 
     // THEN - a select Data Object section should appear in the properties panel
-    let entry = findEntry('edit_message_correlations', container);
+    let entry = findEntry('message_collaborations', container);
     expect(entry).to.exist;
   });