Per bug list we went over today, fixing a deep irritation with data object renaming, hopefully this feels better.

This commit is contained in:
Dan 2022-11-17 14:58:28 -05:00
parent e92f48da7c
commit 05660e95a1
6 changed files with 19 additions and 8 deletions

View File

@ -46,3 +46,12 @@ export function findDataReferenceShapes(processShape, id) {
} }
return refs; return refs;
} }
export function idToHumanReadableName(id) {
const words = id.match(/[A-Za-z][a-z]*/g) || [];
return words.map(capitalize).join(' ');
function capitalize(word) {
return word.charAt(0).toUpperCase() + word.substring(1);
}
}

View File

@ -1,6 +1,6 @@
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor'; import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
import {getDi, is} from 'bpmn-js/lib/util/ModelUtil'; import {getDi, is} from 'bpmn-js/lib/util/ModelUtil';
import {findDataObjects, findDataReferenceShapes} from './DataObjectHelpers'; import {findDataObjects, findDataReferenceShapes, idToHumanReadableName} from './DataObjectHelpers';
var HIGH_PRIORITY = 1500; var HIGH_PRIORITY = 1500;
import { import {
remove as collectionRemove, remove as collectionRemove,
@ -49,7 +49,7 @@ export default class DataObjectInterceptor extends CommandInterceptor {
} }
// Update the name of the reference to match the data object's id. // Update the name of the reference to match the data object's id.
shape.businessObject.name = dataObject.id; shape.businessObject.name = idToHumanReadableName(dataObject.id);
// set the reference to the DataObject // set the reference to the DataObject
shape.businessObject.dataObjectRef = dataObject; shape.businessObject.dataObjectRef = dataObject;

View File

@ -5,7 +5,7 @@ import {
} from '@bpmn-io/properties-panel'; } from '@bpmn-io/properties-panel';
import { without } from 'min-dash'; import { without } from 'min-dash';
import { is } from 'bpmn-js/lib/util/ModelUtil'; import { is } from 'bpmn-js/lib/util/ModelUtil';
import { findDataObjects, findDataReferenceShapes } from '../DataObjectHelpers'; import {findDataObjects, findDataReferenceShapes, idToHumanReadableName} from '../DataObjectHelpers';
/** /**
* 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.
@ -129,7 +129,7 @@ function DataObjectTextField(props) {
element: ref, element: ref,
moddleElement: ref.businessObject, moddleElement: ref.businessObject,
properties: { properties: {
name: value, name: idToHumanReadableName(value),
}, },
changed: [ref], // everything is already marked as changed, don't recalculate. changed: [ref], // everything is already marked as changed, don't recalculate.
}); });

View File

@ -1,5 +1,6 @@
import {useService } from 'bpmn-js-properties-panel'; import {useService } from 'bpmn-js-properties-panel';
import { SelectEntry } from '@bpmn-io/properties-panel'; import { SelectEntry } from '@bpmn-io/properties-panel';
import {idToHumanReadableName} from '../DataObjectHelpers';
/** /**
* Finds the value of the given type within the extensionElements * Finds the value of the given type within the extensionElements
@ -43,7 +44,7 @@ export function DataObjectSelect(props) {
element, element,
moddleElement: businessObject, moddleElement: businessObject,
properties: { properties: {
'name': flowElem.id 'name': idToHumanReadableName(flowElem.id)
} }
}); });
} }

View File

@ -4,7 +4,7 @@ import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule } from 'bpmn-js
import { import {
inject, inject,
} from 'bpmn-js/test/helper'; } from 'bpmn-js/test/helper';
import { findDataObjects } from '../../app/spiffworkflow/DataObject/DataObjectHelpers'; import {findDataObjects, idToHumanReadableName} from '../../app/spiffworkflow/DataObject/DataObjectHelpers';
describe('DataObject Interceptor', function() { describe('DataObject Interceptor', function() {
@ -93,7 +93,8 @@ describe('DataObject Interceptor', function() {
{ x: 220, y: 220 }, rootShape); { x: 220, y: 220 }, rootShape);
const dataObjects = findDataObjects(rootShape.businessObject); const dataObjects = findDataObjects(rootShape.businessObject);
expect(dataObjectRefShape1.businessObject.name).to.equal(dataObjects[0].id); const human_readable_name = idToHumanReadableName(dataObjects[0].id)
expect(dataObjectRefShape1.businessObject.name).to.equal(human_readable_name);
})); }));
it('should allow you to add a data object to a subprocess', inject(function(canvas, modeling, elementRegistry) { it('should allow you to add a data object to a subprocess', inject(function(canvas, modeling, elementRegistry) {

View File

@ -75,7 +75,7 @@ describe('Properties Panel for Data Objects', function() {
// THEN - both the data object itself, and the label of any references are updated. // THEN - both the data object itself, and the label of any references are updated.
expect(my_data_ref_1.businessObject.dataObjectRef.id).to.equal('my_nifty_new_name'); expect(my_data_ref_1.businessObject.dataObjectRef.id).to.equal('my_nifty_new_name');
expect(my_data_ref_1.businessObject.name).to.equal('my_nifty_new_name'); expect(my_data_ref_1.businessObject.name).to.equal('My Nifty New Name');
}); });
}); });