Update DataStoreRefLabel on selecting data store (#67)

app/app.js

@@ -182,8 +182,8 @@ bpmnModeler.on('spiff.dmn_files.requested', (event) => {
 bpmnModeler.on('spiff.data_stores.requested', (event) => {
   event.eventBus.fire('spiff.data_stores.returned', {
     options: [
-      { id: 'countriesID', type: 'json', name: 'countries', clz: 'JSONDataStore' },
-      { id: 'foodsID', type: 'kkv', name: 'foods', clz: 'JSONDataStore' }
+      { id: 'countriesID', type: 'json', name: 'Countries', clz: 'JSONDataStore' },
+      { id: 'foodsID', type: 'kkv', name: 'Foods', clz: 'JSONDataStore' }
     ],
   });
 });

app/spiffworkflow/DataStoreReference/propertiesPanel/DataStorePropertiesProvider.js

@@ -48,12 +48,22 @@ function createCustomDataStoreGroup(
   commandStack,
   bpmnFactory
 ) {
+
+  const { businessObject } = element;
+
   const group = {
     label: translate('Custom Data Store Properties'),
     id: 'custom-datastore-properties',
     entries: [],
   };
 
+  let description = translate('Select a datasource from the list');
+  if(businessObject.dataStoreRef){
+    const dataStoreId = businessObject.dataStoreRef.id;
+    const type = businessObject.get('type');
+    description = `The selected data store is of type: ${type}`;
+  }
+
   // other custom properties as needed
   group.entries.push({
     id: 'selectDataStore',
@@ -65,7 +75,7 @@ function createCustomDataStoreGroup(
     translate,
     name: 'dataStoreRef',
     label: translate('Select DataSource'),
-    description: translate('Select a datasource from the list'),
+    description,
     modeling,
     bpmnFactory,
   });

app/spiffworkflow/DataStoreReference/propertiesPanel/DataStoreSelect.js

@@ -23,29 +23,45 @@ export function DataStoreSelect(props) {
   const getValue = () => {
     const dtRef = element.businessObject.dataStoreRef;
     return dtRef
-      ? `${dtRef.id}___${dtRef.name}`
+      ? dtRef.id
       : '';
   };
 
   const setValue = (value) => {
 
-    const splitValue = value.split('___');
-    const valId = splitValue[0]
-    const valClz = splitValue[1]
+    const { businessObject } = element;
 
-    if (!valId || valId == '') {
-      modeling.updateProperties(element, {
-        dataStoreRef: null,
-      });
-      return;
-    }
-
-    // Add DataStore to the BPMN model
-    const process = element.businessObject.$parent;
+    const process = businessObject.$parent;
+    
     const definitions = process.$parent;
     if (!definitions.get('rootElements')) {
       definitions.set('rootElements', []);
     }
+    
+    const valId = value
+
+    if (!valId || valId == '') {
+      const oldDataStoreId = businessObject.dataStoreRef.id;
+      modeling.updateProperties(element, {
+        name: '',
+        dataStoreRef: null,
+        type: ''
+      });
+      // If previous datastore is not used, delete it
+      if (!isDataStoreReferenced(process, oldDataStoreId)) {
+        const rootElements = definitions.get('rootElements');
+        const oldMessageIndex = rootElements.findIndex(element => element.$type === 'bpmn:DataStore' && element.id === oldDataStoreId);
+        if (oldMessageIndex !== -1) {
+          rootElements.splice(oldMessageIndex, 1);
+          definitions.rootElements = rootElements;
+        }
+      }
+      return;
+    }
+
+    const valClz = GetDataStoreAttrById('clz', value);
+    const valName = GetDataStoreAttrById('name', value);
+    const valType = GetDataStoreAttrById('type', value);
 
     // Persist Current DataStore Ref
     const currentDataStoreRef = element.businessObject.dataStoreRef;
@@ -65,8 +81,9 @@ export function DataStoreSelect(props) {
     }
 
     modeling.updateProperties(element, {
-      name: `Data Store (${valId})`,
+      name: valName,
       dataStoreRef: dataStore,
+      type: valType
     });
 
     // Remove the old DataStore if it's no longer referenced
@@ -96,7 +113,7 @@ export function DataStoreSelect(props) {
       spiffExtensionOptions[optionType].forEach((opt) => {
         optionList.push({
           label: opt.name,
-          value: `${opt.id}___${opt.clz}`,
+          value: opt.id,
         });
       });
     }
@@ -120,4 +137,11 @@ function requestOptions(eventBus, element, commandStack, optionType) {
     spiffExtensionOptions[optionType] = event.options;
   });
   eventBus.fire(`spiff.${optionType}.requested`, { eventBus });
-}
+}
+
+function GetDataStoreAttrById(prop, id) {
+  const arr = spiffExtensionOptions['data_stores'];
+  const item = arr.find(obj => obj.id === id);
+  return item ? item[prop] : null;
+}
+

test/spec/DataStoreReferenceSpec.js

@@ -83,8 +83,8 @@ describe('Data Source Reference Test cases', function () {
         // Verification if the dataStoreRef attribute is updated
         let selector = findSelect(entry);
         expect(selector.length).to.equal(3);
-        expect(selector[1].value === 'foodsID___JSONDataStore');
-        expect(selector[2].value === 'countriesID___JSONDataStore');
+        expect(selector[1].value === 'foodsID');
+        expect(selector[2].value === 'countriesID');
     });
 
     it('should update dataStoreRef after a select event && should add new DataStore in the level of process definition - DataStoreReference element', async function () {
@@ -104,7 +104,7 @@ describe('Data Source Reference Test cases', function () {
 
         // Verification if the dataStoreRef attribute is updated
         let selector = findSelect(entry);
-        changeInput(selector, 'foodsID___JSONDataStore');
+        changeInput(selector, 'foodsID');
         const nwbusinessObject = getBusinessObject(shapeElement);
         expect(nwbusinessObject.get('dataStoreRef').id).to.equal('foodsID');
 
@@ -133,11 +133,11 @@ describe('Data Source Reference Test cases', function () {
 
         // Verification if the dataStoreRef attribute is updated
         let selector = findSelect(entry);
-        changeInput(selector, 'foodsID___JSONDataStore');
+        changeInput(selector, 'foodsID');
         let nwbusinessObject = getBusinessObject(shapeElement);
         expect(nwbusinessObject.get('dataStoreRef').id).to.equal('foodsID');
         // Then choose new dataStore
-        changeInput(selector, 'countriesID___JSONDataStore');
+        changeInput(selector, 'countriesID');
         nwbusinessObject = getBusinessObject(shapeElement);
         expect(nwbusinessObject.get('dataStoreRef').id).to.equal('countriesID');