some correlation keys are displaying in the collaboration prop panel w/ burnettk cullerton

This commit is contained in:
jasquat 2022-08-16 13:02:14 -04:00
parent ba41a41108
commit c31d85b81c
6 changed files with 229 additions and 149 deletions

View File

@ -45,5 +45,9 @@ module.exports = {
'react/prop-types': 'off', 'react/prop-types': 'off',
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
'no-use-before-define': 0, 'no-use-before-define': 0,
'func-names': 'off',
'react/destructuring-assignment': 'off',
'import/prefer-default-export': 'off',
'no-restricted-syntax': 'off',
}, },
}; };

View File

@ -6,48 +6,53 @@ export function getRoot(element) {
// todo: Do we want element to be a shape or moddle object? // todo: Do we want element to be a shape or moddle object?
if (element.$type === 'bpmn:Definitions') { if (element.$type === 'bpmn:Definitions') {
return element; return element;
} else if ( typeof element.$parent != 'undefined') {
return getRoot(element.$parent);
} else {
console.log('Cannot getRoot: ', element);
return element;
} }
if (typeof element.$parent !== 'undefined') {
return getRoot(element.$parent);
}
console.log('Cannot getRoot: ', element);
return element;
} }
export function findFormalExpressions(element) { export function findFormalExpressions(element) {
const formalExpressions = [] const formalExpressions = [];
if (element.messageRef){ if (element.messageRef) {
const root = getRoot(element) const root = getRoot(element);
if (root.$type === 'bpmn:Definitions') { if (root.$type === 'bpmn:Definitions') {
for (const child_element of root.rootElements) { for (const child_element of root.rootElements) {
if (child_element.$type === 'bpmn:CorrelationProperty') { if (child_element.$type === 'bpmn:CorrelationProperty') {
const retrieval_expression = processCorrelationProperty(
let retrieval_expression = processCorrelationProperty(child_element, element.messageRef); child_element,
element.messageRef
);
// todo: is there a better test for this than length === 1? // todo: is there a better test for this than length === 1?
if (retrieval_expression.length === 1){ if (retrieval_expression.length === 1) {
let formalExpression = {}; const formalExpression = {};
formalExpression['correlationId'] = child_element.id; formalExpression.correlationId = child_element.id;
formalExpression['expression'] = retrieval_expression[0]; formalExpression.expression = retrieval_expression[0];
formalExpressions.push(formalExpression); formalExpressions.push(formalExpression);
} }
} }
} }
} }
} }
return formalExpressions return formalExpressions;
} }
function processCorrelationProperty(correlationProperty, message) { function processCorrelationProperty(correlationProperty, message) {
let expressions = [] const expressions = [];
for (let retrieval_expression of correlationProperty.correlationPropertyRetrievalExpression){ for (const retrieval_expression of correlationProperty.correlationPropertyRetrievalExpression) {
if ((retrieval_expression.$type === 'bpmn:CorrelationPropertyRetrievalExpression') && if (
(retrieval_expression.messageRef) && retrieval_expression.$type ===
(retrieval_expression.messageRef.id === message.id) && 'bpmn:CorrelationPropertyRetrievalExpression' &&
(retrieval_expression.messagePath.body)) { retrieval_expression.messageRef &&
expressions.push(retrieval_expression.messagePath.body) retrieval_expression.messageRef.id === message.id &&
retrieval_expression.messagePath.body
) {
expressions.push(retrieval_expression.messagePath.body);
} }
} }
return expressions return expressions;
} }
export function findCorrelationProperties(element) { export function findCorrelationProperties(element) {
@ -57,9 +62,8 @@ export function findCorrelationProperties(element) {
if (rootElement.$type === 'bpmn:CorrelationProperty') { if (rootElement.$type === 'bpmn:CorrelationProperty') {
correlationProperties.push(rootElement); correlationProperties.push(rootElement);
} }
} }
return correlationProperties return correlationProperties;
} }
export function findCorrelationKeys(element) { export function findCorrelationKeys(element) {
@ -68,26 +72,28 @@ export function findCorrelationKeys(element) {
for (const rootElement of root.rootElements) { for (const rootElement of root.rootElements) {
if (rootElement.$type === 'bpmn:Collaboration') { if (rootElement.$type === 'bpmn:Collaboration') {
const currentKeys = rootElement.correlationKeys; const currentKeys = rootElement.correlationKeys;
for (let correlationKey in currentKeys) { for (const correlationKey in currentKeys) {
let correlationProperties = []; const correlationProperties = [];
const currentCorrelation = rootElement.correlationKeys[correlationKey]; const currentCorrelation = rootElement.correlationKeys[correlationKey];
let currentProperty = {} const currentProperty = {};
currentProperty.name = currentCorrelation.name; currentProperty.name = currentCorrelation.name;
currentProperty.refs = []; currentProperty.refs = [];
for (let correlationProperty in currentCorrelation.correlationPropertyRef) { for (const correlationProperty in currentCorrelation.correlationPropertyRef) {
console.log("findCorrelationKeys: propertyRef", correlationProperty); console.log('findCorrelationKeys: propertyRef', correlationProperty);
currentProperty.refs.push(currentCorrelation.correlationPropertyRef[correlationProperty]); currentProperty.refs.push(
currentCorrelation.correlationPropertyRef[correlationProperty]
);
} }
correlationKeys.push(currentProperty); correlationKeys.push(currentProperty);
} }
} }
} }
return correlationKeys return correlationKeys;
} }
export function findMessageModdleElements(element) { export function findMessageModdleElements(element) {
const messages = []; const messages = [];
const root = getRoot(element) const root = getRoot(element);
for (const rootElement of root.rootElements) { for (const rootElement of root.rootElements) {
if (rootElement.$type === 'bpmn:Message') { if (rootElement.$type === 'bpmn:Message') {
messages.push(rootElement); messages.push(rootElement);

View File

@ -1,6 +1,7 @@
import { useService } from 'bpmn-js-properties-panel'; import { useService } from 'bpmn-js-properties-panel';
import { import {
isTextFieldEntryEdited, ListGroup, isTextFieldEntryEdited,
ListGroup,
TextFieldEntry, TextFieldEntry,
} from '@bpmn-io/properties-panel'; } from '@bpmn-io/properties-panel';
import { without } from 'min-dash'; import { without } from 'min-dash';
@ -9,9 +10,11 @@ import {
findDataObjects, findDataObjects,
findDataReferenceShapes, findDataReferenceShapes,
} from '../../DataObject/DataObjectHelpers'; } from '../../DataObject/DataObjectHelpers';
import { findCorrelationProperties, findCorrelationKeys, getRoot } from '../MessageHelpers'; import {
findCorrelationProperties,
findCorrelationKeys,
getRoot,
} from '../MessageHelpers';
/** /**
* Provides a list of data objects, and allows you to add / remove data objects, and change their ids. * Provides a list of data objects, and allows you to add / remove data objects, and change their ids.
@ -27,16 +30,18 @@ export function CorrelationKeysArray(props) {
const correlationProperties = findCorrelationKeys(element.businessObject); const correlationProperties = findCorrelationKeys(element.businessObject);
const items = correlationProperties.map((correlationProperty, index) => { const items = correlationProperties.map((correlationProperty, index) => {
const id = `correlationGroup-${correlationProperty.name}`; const id = `correlationGroup-${correlationProperty.name}`;
// console.log('correlationProperty.refs', correlationProperty.refs);
console.log('id', id);
return { return {
id, id,
correlationProperty, correlationProperty,
label: correlationProperty.name, label: correlationProperty.name,
entries: correlationProperty.refs, // entries: correlationProperty.refs,
// entries: correlationGroup({ entries: correlationGroup({
// id, id,
// element, element,
// correlationProperty, correlationProperty,
// }), }),
autoFocusEntry: id, autoFocusEntry: id,
// remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry })
}; };
@ -50,7 +55,7 @@ export function CorrelationKeysArray(props) {
commandStack.execute('element.updateModdleProperties', { commandStack.execute('element.updateModdleProperties', {
element, element,
moddleElement: element.businessObject, moddleElement: element.businessObject,
newElements: newCorrelationKey newElements: newCorrelationKey,
}); });
} }
@ -71,50 +76,101 @@ function removeFactory(props) {
}); });
// Also update the label of all the references // Also update the label of all the references
const references = findDataReferenceShapes(element, dataObject.id); const references = findDataReferenceShapes(element, dataObject.id);
for (const ref of references) { for (const cpRef of references) {
commandStack.execute('element.updateProperties', { commandStack.execute('element.updateProperties', {
element: ref, element: cpRef,
moddleElement: ref.businessObject, moddleElement: cpRef.businessObject,
properties: { properties: {
name: '???', name: '???',
}, },
changed: [ref], // everything is already marked as changed, don't recalculate. changed: [cpRef], // everything is already marked as changed, don't recalculate.
}); });
} }
}; };
} }
// <bpmn:correlationKey name="lover"> <--- The CorrelationKeyGroup
// <bpmn:correlationPropertyRef>lover_name</bpmn:correlationPropertyRef>
// <bpmn:correlationPropertyRef>lover_instrument</bpmn:correlationPropertyRef>
// </bpmn:correlationKey>
// <bpmn:correlationKey name="singer" />
function correlationGroup(props) { function correlationGroup(props) {
const { element, correlationProperty } = props; const { element, correlationProperty } = props;
const id = `correlation-${correlationProperty.id}`; const id = `correlation-${correlationProperty.name}`;
return { console.log('HELL1');
id, // return [
label: correlationProperty.id, // {
entries: CorrelationKeyGroup({ // // id,
id, // // label: correlationProperty.name,
element, // // entries: [],
// // entries: CorrelationKeyGroup({
// // id,
// // element,
// // correlationProperty,
// // }),
// id: `${id}-hey-group`,
// // component: CorrelationKeyGroup,
// component: CorrelationKeyTextField,
// // isEdited: isTextFieldEntryEdited,
// correlationProperty,
// // autoFocusEntry: id,
// },
// ];
return correlationProperty.refs.map((cpRef, index) => {
console.log('ref1', cpRef);
return {
// id,
// label: correlationProperty.name,
// entries: [],
// entries: CorrelationKeyGroup({
// id,
// element,
// correlationProperty,
// }),
id: `${id}-${cpRef.id}-group`,
// component: CorrelationKeyGroup,
component: CorrelationKeyTextField,
// isEdited: isTextFieldEntryEdited,
correlationProperty, correlationProperty,
}), cpRef,
autoFocusEntry: id, // autoFocusEntry: id,
}; };
});
} }
function CorrelationKeyGroup(props) { function CorrelationKeyGroup(props) {
const { idPrefix, correlationProperty } = props; const { id, correlationProperty } = props;
console.log('HELLO');
return [ const entries = correlationProperty.refs.map((cpRef, index) => {
{ // debugger;
id: `${idPrefix}-group`, // return CorrelationKeyTextField({
return {
id: `${id}-${cpRef.id}-group`,
component: CorrelationKeyTextField, component: CorrelationKeyTextField,
isEdited: isTextFieldEntryEdited, isEdited: isTextFieldEntryEdited,
idPrefix, correlationProperty,
};
// })
});
// console.log('stuff', stuff);
console.log('entries', entries);
return [
{
id: `${id}-group`,
entries,
isEdited: isTextFieldEntryEdited,
correlationProperty, correlationProperty,
}, },
]; ];
} }
function CorrelationKeyTextField(props) { function CorrelationKeyTextField(props) {
const { idPrefix, element, parameter, correlationProperty } = props; console.log('WE IN TEXT');
console.log('props', props);
const { id, element, parameter, correlationProperty, cpRef } = props;
console.log('cpRef', cpRef);
const commandStack = useService('commandStack'); const commandStack = useService('commandStack');
const debounce = useService('debounceInput'); const debounce = useService('debounceInput');
@ -131,14 +187,14 @@ function CorrelationKeyTextField(props) {
// Also update the label of all the references // Also update the label of all the references
// const references = findDataReferenceShapes(element, correlationProperty.id); // const references = findDataReferenceShapes(element, correlationProperty.id);
const references = ['hello1', 'hello2']; const references = ['hello1', 'hello2'];
for (const ref of references) { for (const cpRef of references) {
commandStack.execute('element.updateProperties', { commandStack.execute('element.updateProperties', {
element: ref, element: cpRef,
moddleElement: ref.businessObject, moddleElement: cpRef.businessObject,
properties: { properties: {
name: value, name: value,
}, },
changed: [ref], // everything is already marked as changed, don't recalculate. changed: [cpRef], // everything is already marked as changed, don't recalculate.
}); });
} }
}; };
@ -147,11 +203,20 @@ function CorrelationKeyTextField(props) {
return correlationProperty.refs; return correlationProperty.refs;
}; };
return ListGroup({ // return ListGroup({
// element: parameter,
// items: correlationProperty.refs,
// id: `${idPrefix}-textField`,
// label: 'Correlation Properties',
// getValue,
// setValue,
// debounce,
// });
console.log('correlationProperty.id', correlationProperty.name);
return TextFieldEntry({
element: parameter, element: parameter,
items: correlationProperty.refs, id: `${id}-textField`,
id: `${idPrefix}-textField`, label: cpRef.id,
label: 'Correlation Properties',
getValue, getValue,
setValue, setValue,
debounce, debounce,

View File

@ -1,9 +1,17 @@
import { useService } from 'bpmn-js-properties-panel'; import { useService } from 'bpmn-js-properties-panel';
import { isTextFieldEntryEdited, ListGroup, TextAreaEntry, TextFieldEntry } from '@bpmn-io/properties-panel'; import {
import { findFormalExpressions, getRoot } from '../MessageHelpers'; isTextFieldEntryEdited,
import { findCorrelationKeys } from '../MessageHelpers'; ListGroup,
import { CorrelationKeysArray } from './CorrelationKeysArray'; TextAreaEntry,
TextFieldEntry,
} from '@bpmn-io/properties-panel';
import translate from 'diagram-js/lib/i18n/translate'; import translate from 'diagram-js/lib/i18n/translate';
import {
findFormalExpressions,
getRoot,
findCorrelationKeys,
} from '../MessageHelpers';
import { CorrelationKeysArray } from './CorrelationKeysArray';
import dataObject from '../../DataObject'; import dataObject from '../../DataObject';
/** /**
@ -21,11 +29,11 @@ export function MessageCorrelationsArray(props) {
const entries = MessageCorrelationGroup({ const entries = MessageCorrelationGroup({
idPrefix: id, idPrefix: id,
formalExpression, formalExpression,
}) });
return { return {
id, id,
label: formalExpression.correlationId, label: formalExpression.correlationId,
entries: entries, entries,
autoFocusEntry: id, autoFocusEntry: id,
// remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry }) // remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry })
}; };
@ -33,7 +41,9 @@ export function MessageCorrelationsArray(props) {
function add(event) { function add(event) {
event.stopPropagation(); event.stopPropagation();
const newRetrievalExpression = moddle.create('bpmn:CorrelationPropertyRetrievalExpression'); const newRetrievalExpression = moddle.create(
'bpmn:CorrelationPropertyRetrievalExpression'
);
const newElements = formalExpressions; const newElements = formalExpressions;
newRetrievalExpression.messageRef = element.businessObject.messageRef; newRetrievalExpression.messageRef = element.businessObject.messageRef;
newElements.push(newRetrievalExpression); newElements.push(newRetrievalExpression);
@ -42,25 +52,9 @@ export function MessageCorrelationsArray(props) {
element, element,
moddleElement: element.businessObject, moddleElement: element.businessObject,
}); });
} }
return { items, add } return { items, add };
}
function MessageKeyGroup(props) {
const { idPrefix, keys } = props;
return [
{
id: `${idPrefix}-group`,
component: MessageCorrelationGroup,
isEdited: isTextFieldEntryEdited,
idPrefix,
formalExpression: keys
}
]
} }
function MessageCorrelationGroup(props) { function MessageCorrelationGroup(props) {

View File

@ -22,7 +22,7 @@ export function MessageSelect(props) {
const { businessObject } = shapeElement; const { businessObject } = shapeElement;
const messages = findMessageModdleElements(shapeElement.businessObject); const messages = findMessageModdleElements(shapeElement.businessObject);
for (const message of messages) { for (const message of messages) {
if (businessObject.$type === 'bpmn:SendTask' && message.id == value) { if (businessObject.$type === 'bpmn:SendTask' && message.id === value) {
commandStack.execute('element.updateModdleProperties', { commandStack.execute('element.updateModdleProperties', {
element: shapeElement, element: shapeElement,
moddleElement: businessObject, moddleElement: businessObject,
@ -41,7 +41,7 @@ export function MessageSelect(props) {
} }
}; };
const getOptions = (value) => { const getOptions = (_value) => {
const messages = findMessageModdleElements(shapeElement.businessObject); const messages = findMessageModdleElements(shapeElement.businessObject);
const options = []; const options = [];
for (const message of messages) { for (const message of messages) {

View File

@ -1,125 +1,136 @@
import TestContainer from 'mocha-test-container-support'; import TestContainer from 'mocha-test-container-support';
import { bootstrapPropertiesPanel, expectSelected, findEntry, findGroupEntry, findInput, findSelect, findTextarea, findButtonByClass, pressButton, findDivByClass } from './helpers'; import {
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel'; BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
} from 'bpmn-js-properties-panel';
import {
bootstrapPropertiesPanel,
expectSelected,
findEntry,
findGroupEntry,
findInput,
findSelect,
findTextarea,
findButtonByClass,
pressButton,
findDivByClass,
} from './helpers';
import spiffModdleExtension from '../../app/spiffworkflow/moddle/spiffworkflow.json'; import spiffModdleExtension from '../../app/spiffworkflow/moddle/spiffworkflow.json';
import messages from '../../app/spiffworkflow/messages'; import messages from '../../app/spiffworkflow/messages';
describe('Messages should work', function () {
describe('Messages should work', function() { const xml = require('./bpmn/collaboration.bpmn').default;
let xml = require('./bpmn/collaboration.bpmn').default;
let container; let container;
beforeEach(function() { beforeEach(function () {
container = TestContainer.get(this); container = TestContainer.get(this);
}); });
beforeEach(bootstrapPropertiesPanel(xml, { beforeEach(
container, bootstrapPropertiesPanel(xml, {
debounceInput: false, container,
additionalModules: [ debounceInput: false,
messages, additionalModules: [
BpmnPropertiesPanelModule, messages,
BpmnPropertiesProviderModule, BpmnPropertiesPanelModule,
], BpmnPropertiesProviderModule,
moddleExtensions: { ],
spiffworkflow: spiffModdleExtension moddleExtensions: {
}, spiffworkflow: spiffModdleExtension,
})); },
})
it('should allow you to see the collaborations section', async function() { );
it('should allow you to see the collaborations section', async function () {
// THEN - a select Data Object section should appear in the properties panel // THEN - a select Data Object section should appear in the properties panel
let entry = findGroupEntry('correlation_keys', container); const entry = findGroupEntry('correlation_keys', container);
expect(entry).to.exist; expect(entry).to.exist;
}); });
it('should show a Message Properties group when a send task is selected',async function() { it.only('should show a Message Properties group when a send task is selected', async function () {
// Select the send Task // Select the send Task
const send_shape = await expectSelected('ActivitySendLetter'); const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist; expect(send_shape, "Can't find Send Task").to.exist;
// THEN - a select Data Object section should appear in the properties panel // THEN - a select Data Object section should appear in the properties panel
let entry = findGroupEntry('messages', container); const entry = findGroupEntry('messages', container);
expect(entry, "Can't find the message group in the properties panel").to.exist; expect(entry, "Can't find the message group in the properties panel").to
.exist;
}); });
it('should show a list of messages in a drop down inside the message group',async function() { it('should show a list of messages in a drop down inside the message group', async function () {
// Select the send Task // Select the send Task
const send_shape = await expectSelected('ActivitySendLetter'); const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist; expect(send_shape, "Can't find Send Task").to.exist;
// THEN - there are two options to choose from. // THEN - there are two options to choose from.
let entry = findEntry('selectMessage', container); const entry = findEntry('selectMessage', container);
expect(entry, "Can't find the message select list").to.exist; expect(entry, "Can't find the message select list").to.exist;
// AND - There should be two entries in it, one for each message. // AND - There should be two entries in it, one for each message.
let selector = findSelect(entry); const selector = findSelect(entry);
expect(selector).to.exist; expect(selector).to.exist;
expect(selector.length).to.equal(2); expect(selector.length).to.equal(2);
}); });
it('should show the payload inside the message group',async function() { it('should show the payload inside the message group', async function () {
// Select the second Task // Select the second Task
const send_shape = await expectSelected('ActivitySendLetter'); const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist; expect(send_shape, "Can't find Send Task").to.exist;
// THEN - there is a payload. // THEN - there is a payload.
let payload = findEntry('messagePayload', container); const payload = findEntry('messagePayload', container);
expect(payload, "Can't find the message payload").to.exist; expect(payload, "Can't find the message payload").to.exist;
let textArea = findTextarea('bio-properties-panel-messagePayload', payload); const textArea = findTextarea(
'bio-properties-panel-messagePayload',
payload
);
expect(textArea, "Can't find the payload textarea").to.exist; expect(textArea, "Can't find the payload textarea").to.exist;
expect(textArea.value, "Can't find payload value").to.exist; expect(textArea.value, "Can't find payload value").to.exist;
expect(textArea.value).to.include("'to': { 'name': my_lover_variable }"); expect(textArea.value).to.include("'to': { 'name': my_lover_variable }");
}); });
it('should show the correlations inside the message group',async function() { it('should show the correlations inside the message group', async function () {
// Select the second Task // Select the second Task
const send_shape = await expectSelected('ActivitySendLetter'); const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist; expect(send_shape, "Can't find Send Task").to.exist;
// THEN - there are correlations. // THEN - there are correlations.
let correlations = findGroupEntry('messageCorrelations', container); const correlations = findGroupEntry('messageCorrelations', container);
expect(correlations, "Can't find the message correlations").to.exist; expect(correlations, "Can't find the message correlations").to.exist;
console.log("Message Correlations: "); console.log('Message Correlations: ');
}); });
it('should add a new correlation when clicked', async function() { it('should add a new correlation when clicked', async function () {
// Select the second Task // Select the second Task
const send_shape = await expectSelected('ActivitySendLetter'); const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist; expect(send_shape, "Can't find Send Task").to.exist;
const buttonClass = "bio-properties-panel-group-header-button bio-properties-panel-add-entry"; const buttonClass =
let button = findButtonByClass(buttonClass, container); 'bio-properties-panel-group-header-button bio-properties-panel-add-entry';
const button = findButtonByClass(buttonClass, container);
pressButton(button); pressButton(button);
console.log(button); console.log(button);
}); });
it('should add a new Correlation Key when clicked', async function() { it('should add a new Correlation Key when clicked', async function () {
const divClass = "bio-properties-panel-list"; const divClass = 'bio-properties-panel-list';
const divs = findDivByClass(divClass, container); const divs = findDivByClass(divClass, container);
const buttonClass = "bio-properties-panel-group-header-button bio-properties-panel-add-entry"; const buttonClass =
let button = findButtonByClass(buttonClass, container); 'bio-properties-panel-group-header-button bio-properties-panel-add-entry';
const button = findButtonByClass(buttonClass, container);
pressButton(button); pressButton(button);
// THEN - a select Data Object section should appear in the properties panel // THEN - a select Data Object section should appear in the properties panel
let entry = findGroupEntry('correlation_keys', container); const entry = findGroupEntry('correlation_keys', container);
expect(entry).to.exist; expect(entry).to.exist;
let divs2 = findDivByClass(divClass, container); const divs2 = findDivByClass(divClass, container);
console.log(button); console.log(button);
}); });
}); });