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/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
'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?
if (element.$type === 'bpmn:Definitions') {
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) {
const formalExpressions = []
if (element.messageRef){
const root = getRoot(element)
const formalExpressions = [];
if (element.messageRef) {
const root = getRoot(element);
if (root.$type === 'bpmn:Definitions') {
for (const child_element of root.rootElements) {
if (child_element.$type === 'bpmn:CorrelationProperty') {
let retrieval_expression = processCorrelationProperty(child_element, element.messageRef);
const retrieval_expression = processCorrelationProperty(
child_element,
element.messageRef
);
// todo: is there a better test for this than length === 1?
if (retrieval_expression.length === 1){
let formalExpression = {};
formalExpression['correlationId'] = child_element.id;
formalExpression['expression'] = retrieval_expression[0];
if (retrieval_expression.length === 1) {
const formalExpression = {};
formalExpression.correlationId = child_element.id;
formalExpression.expression = retrieval_expression[0];
formalExpressions.push(formalExpression);
}
}
}
}
}
return formalExpressions
return formalExpressions;
}
function processCorrelationProperty(correlationProperty, message) {
let expressions = []
for (let retrieval_expression of correlationProperty.correlationPropertyRetrievalExpression){
if ((retrieval_expression.$type === 'bpmn:CorrelationPropertyRetrievalExpression') &&
(retrieval_expression.messageRef) &&
(retrieval_expression.messageRef.id === message.id) &&
(retrieval_expression.messagePath.body)) {
expressions.push(retrieval_expression.messagePath.body)
const expressions = [];
for (const retrieval_expression of correlationProperty.correlationPropertyRetrievalExpression) {
if (
retrieval_expression.$type ===
'bpmn:CorrelationPropertyRetrievalExpression' &&
retrieval_expression.messageRef &&
retrieval_expression.messageRef.id === message.id &&
retrieval_expression.messagePath.body
) {
expressions.push(retrieval_expression.messagePath.body);
}
}
return expressions
return expressions;
}
export function findCorrelationProperties(element) {
@ -57,9 +62,8 @@ export function findCorrelationProperties(element) {
if (rootElement.$type === 'bpmn:CorrelationProperty') {
correlationProperties.push(rootElement);
}
}
return correlationProperties
return correlationProperties;
}
export function findCorrelationKeys(element) {
@ -68,26 +72,28 @@ export function findCorrelationKeys(element) {
for (const rootElement of root.rootElements) {
if (rootElement.$type === 'bpmn:Collaboration') {
const currentKeys = rootElement.correlationKeys;
for (let correlationKey in currentKeys) {
let correlationProperties = [];
for (const correlationKey in currentKeys) {
const correlationProperties = [];
const currentCorrelation = rootElement.correlationKeys[correlationKey];
let currentProperty = {}
const currentProperty = {};
currentProperty.name = currentCorrelation.name;
currentProperty.refs = [];
for (let correlationProperty in currentCorrelation.correlationPropertyRef) {
console.log("findCorrelationKeys: propertyRef", correlationProperty);
currentProperty.refs.push(currentCorrelation.correlationPropertyRef[correlationProperty]);
for (const correlationProperty in currentCorrelation.correlationPropertyRef) {
console.log('findCorrelationKeys: propertyRef', correlationProperty);
currentProperty.refs.push(
currentCorrelation.correlationPropertyRef[correlationProperty]
);
}
correlationKeys.push(currentProperty);
}
}
}
return correlationKeys
return correlationKeys;
}
export function findMessageModdleElements(element) {
const messages = [];
const root = getRoot(element)
const root = getRoot(element);
for (const rootElement of root.rootElements) {
if (rootElement.$type === 'bpmn:Message') {
messages.push(rootElement);

View File

@ -1,6 +1,7 @@
import { useService } from 'bpmn-js-properties-panel';
import {
isTextFieldEntryEdited, ListGroup,
isTextFieldEntryEdited,
ListGroup,
TextFieldEntry,
} from '@bpmn-io/properties-panel';
import { without } from 'min-dash';
@ -9,9 +10,11 @@ import {
findDataObjects,
findDataReferenceShapes,
} 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.
@ -27,16 +30,18 @@ export function CorrelationKeysArray(props) {
const correlationProperties = findCorrelationKeys(element.businessObject);
const items = correlationProperties.map((correlationProperty, index) => {
const id = `correlationGroup-${correlationProperty.name}`;
// console.log('correlationProperty.refs', correlationProperty.refs);
console.log('id', id);
return {
id,
correlationProperty,
label: correlationProperty.name,
entries: correlationProperty.refs,
// entries: correlationGroup({
// id,
// element,
// correlationProperty,
// }),
// entries: correlationProperty.refs,
entries: correlationGroup({
id,
element,
correlationProperty,
}),
autoFocusEntry: id,
// remove: removeFactory({ element, correlationProperty, commandStack, elementRegistry })
};
@ -50,7 +55,7 @@ export function CorrelationKeysArray(props) {
commandStack.execute('element.updateModdleProperties', {
element,
moddleElement: element.businessObject,
newElements: newCorrelationKey
newElements: newCorrelationKey,
});
}
@ -71,50 +76,101 @@ function removeFactory(props) {
});
// Also update the label of all the references
const references = findDataReferenceShapes(element, dataObject.id);
for (const ref of references) {
for (const cpRef of references) {
commandStack.execute('element.updateProperties', {
element: ref,
moddleElement: ref.businessObject,
element: cpRef,
moddleElement: cpRef.businessObject,
properties: {
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) {
const { element, correlationProperty } = props;
const id = `correlation-${correlationProperty.id}`;
return {
id,
label: correlationProperty.id,
entries: CorrelationKeyGroup({
id,
element,
const id = `correlation-${correlationProperty.name}`;
console.log('HELL1');
// return [
// {
// // id,
// // label: correlationProperty.name,
// // 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,
}),
autoFocusEntry: id,
};
cpRef,
// autoFocusEntry: id,
};
});
}
function CorrelationKeyGroup(props) {
const { idPrefix, correlationProperty } = props;
const { id, correlationProperty } = props;
console.log('HELLO');
return [
{
id: `${idPrefix}-group`,
const entries = correlationProperty.refs.map((cpRef, index) => {
// debugger;
// return CorrelationKeyTextField({
return {
id: `${id}-${cpRef.id}-group`,
component: CorrelationKeyTextField,
isEdited: isTextFieldEntryEdited,
idPrefix,
correlationProperty,
};
// })
});
// console.log('stuff', stuff);
console.log('entries', entries);
return [
{
id: `${id}-group`,
entries,
isEdited: isTextFieldEntryEdited,
correlationProperty,
},
];
}
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 debounce = useService('debounceInput');
@ -131,14 +187,14 @@ function CorrelationKeyTextField(props) {
// Also update the label of all the references
// const references = findDataReferenceShapes(element, correlationProperty.id);
const references = ['hello1', 'hello2'];
for (const ref of references) {
for (const cpRef of references) {
commandStack.execute('element.updateProperties', {
element: ref,
moddleElement: ref.businessObject,
element: cpRef,
moddleElement: cpRef.businessObject,
properties: {
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 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,
items: correlationProperty.refs,
id: `${idPrefix}-textField`,
label: 'Correlation Properties',
id: `${id}-textField`,
label: cpRef.id,
getValue,
setValue,
debounce,

View File

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

View File

@ -22,7 +22,7 @@ export function MessageSelect(props) {
const { businessObject } = shapeElement;
const messages = findMessageModdleElements(shapeElement.businessObject);
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', {
element: shapeElement,
moddleElement: businessObject,
@ -41,7 +41,7 @@ export function MessageSelect(props) {
}
};
const getOptions = (value) => {
const getOptions = (_value) => {
const messages = findMessageModdleElements(shapeElement.businessObject);
const options = [];
for (const message of messages) {

View File

@ -1,125 +1,136 @@
import TestContainer from 'mocha-test-container-support';
import { bootstrapPropertiesPanel, expectSelected, findEntry, findGroupEntry, findInput, findSelect, findTextarea, findButtonByClass, pressButton, findDivByClass } from './helpers';
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js-properties-panel';
import {
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 messages from '../../app/spiffworkflow/messages';
describe('Messages should work', function() {
let xml = require('./bpmn/collaboration.bpmn').default;
describe('Messages should work', function () {
const xml = require('./bpmn/collaboration.bpmn').default;
let container;
beforeEach(function() {
beforeEach(function () {
container = TestContainer.get(this);
});
beforeEach(bootstrapPropertiesPanel(xml, {
container,
debounceInput: false,
additionalModules: [
messages,
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
],
moddleExtensions: {
spiffworkflow: spiffModdleExtension
},
}));
it('should allow you to see the collaborations section', async function() {
beforeEach(
bootstrapPropertiesPanel(xml, {
container,
debounceInput: false,
additionalModules: [
messages,
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
],
moddleExtensions: {
spiffworkflow: spiffModdleExtension,
},
})
);
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 = findGroupEntry('correlation_keys', container);
const entry = findGroupEntry('correlation_keys', container);
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
const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist;
// THEN - a select Data Object section should appear in the properties panel
let entry = findGroupEntry('messages', container);
expect(entry, "Can't find the message group in the properties panel").to.exist;
const entry = findGroupEntry('messages', container);
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
const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist;
// 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;
// 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.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
const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist;
// 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;
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.value, "Can't find payload value").to.exist;
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
const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist;
// THEN - there are correlations.
let correlations = findGroupEntry('messageCorrelations', container);
const correlations = findGroupEntry('messageCorrelations', container);
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
const send_shape = await expectSelected('ActivitySendLetter');
expect(send_shape, "Can't find Send Task").to.exist;
const buttonClass = "bio-properties-panel-group-header-button bio-properties-panel-add-entry";
let button = findButtonByClass(buttonClass, container);
const buttonClass =
'bio-properties-panel-group-header-button bio-properties-panel-add-entry';
const button = findButtonByClass(buttonClass, container);
pressButton(button);
console.log(button);
});
it('should add a new Correlation Key when clicked', async function() {
const divClass = "bio-properties-panel-list";
it('should add a new Correlation Key when clicked', async function () {
const divClass = 'bio-properties-panel-list';
const divs = findDivByClass(divClass, container);
const buttonClass = "bio-properties-panel-group-header-button bio-properties-panel-add-entry";
let button = findButtonByClass(buttonClass, container);
const buttonClass =
'bio-properties-panel-group-header-button bio-properties-panel-add-entry';
const button = findButtonByClass(buttonClass, container);
pressButton(button);
// 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;
let divs2 = findDivByClass(divClass, container);
const divs2 = findDivByClass(divClass, container);
console.log(button);
});
});