Add bpmn:dataStore in the level of process definition

app/spiffworkflow/DataStoreReference/index.js

@@ -1,10 +1,10 @@
 import RulesModule from 'diagram-js/lib/features/rules';
-import CustomDataStorePropertiesProvider from './propertiesPanel/CustomDataStorePropertiesProvider';
+import DataStorePropertiesProvider from './propertiesPanel/DataStorePropertiesProvider';
 
 export default {
   __depends__: [
     RulesModule
   ],
   __init__: [ 'dataSourcePropertiesProvider' ],
-  dataSourcePropertiesProvider: [ 'type', CustomDataStorePropertiesProvider ]
+  dataSourcePropertiesProvider: [ 'type', DataStorePropertiesProvider ]
 };

app/spiffworkflow/DataStoreReference/propertiesPanel/DataStorePropertiesProvider.js

@@ -3,14 +3,13 @@ import { DataStoreSelect, OPTION_TYPE } from './DataStoreSelect';
 
 const LOW_PRIORITY = 500;
 
-export default function CustomDataStorePropertiesProvider(
+export default function DataStorePropertiesProvider(
     modeling,
     propertiesPanel,
     translate,
     moddle,
     commandStack,
     bpmnFactory,
-    elementRegistry
 ) {
     this.getGroups = function (element) {
         return function (groups) {
@@ -25,14 +24,13 @@ export default function CustomDataStorePropertiesProvider(
     propertiesPanel.registerProvider(LOW_PRIORITY, this);
 }
 
-CustomDataStorePropertiesProvider.$inject = [
+DataStorePropertiesProvider.$inject = [
     'modeling',
     'propertiesPanel',
     'translate',
     'moddle',
     'commandStack',
     'bpmnFactory',
-    'elementRegistry'
 ];
 
 function createCustomDataStoreGroup(modeling, element, translate, moddle, commandStack, bpmnFactory) {
@@ -56,7 +54,7 @@ function createCustomDataStoreGroup(modeling, element, translate, moddle, comman
         label: translate('Select DataSource'),
         description: translate('Select a datasource from the list'),
         modeling,
-        bpmnFactory
+        bpmnFactory,
     })
 
     return group;

app/spiffworkflow/DataStoreReference/propertiesPanel/DataStoreSelect.js

@@ -1,5 +1,6 @@
 import { useService } from 'bpmn-js-properties-panel';
 import { SelectEntry } from '@bpmn-io/properties-panel';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
 
 export const OPTION_TYPE = {
   data_stores: 'data_stores',
@@ -8,13 +9,18 @@ export const OPTION_TYPE = {
 export const spiffExtensionOptions = {};
 
 export function DataStoreSelect(props) {
+
+  const { id, label, description, optionType } = props;
+
   const { element } = props;
   const { commandStack } = props;
-  const { modeling, bpmnFactory } = props;
-  const { id, label, description, optionType } = props;
+  const { modeling } = props;
+  const { moddle } = props;
+  // const { bpmnFactory } = props;
 
   const debounce = useService('debounceInput');
   const eventBus = useService('eventBus');
+  const bpmnFactory = useService('bpmnFactory');
 
   const getValue = () => {
     const value = (element.businessObject.dataStoreRef) ? element.businessObject.dataStoreRef.id : '';
@@ -22,16 +28,34 @@ export function DataStoreSelect(props) {
   };
 
   const setValue = (value) => {
-    if(!value || value == ''){
+    if (!value || value == '') {
       modeling.updateProperties(element, {
         dataStoreRef: null
       });
       return;
     }
-    const dataStore = bpmnFactory.create('bpmn:DataStore', {
-      id: value,
-      name: 'DataStore_' + value
-    });
+
+    // Add DataStore to the BPMN model
+    const process = element.businessObject.$parent;
+    const definitions = process.$parent;
+    if (!definitions.get('rootElements')) {
+      definitions.set('rootElements', []);
+    }
+
+    // Create DataStore
+    let dataStore = definitions.get('rootElements').find(element =>
+      element.$type === 'bpmn:DataStore' && element.id === value
+    );
+
+    // If the DataStore doesn't exist, create new one
+    if (!dataStore) {
+      dataStore = bpmnFactory.create('bpmn:DataStore', {
+        id: value,
+        name: 'DataStore_' + value
+      });
+      definitions.get('rootElements').push(dataStore);
+    }
+
     modeling.updateProperties(element, {
       dataStoreRef: dataStore
     });
@@ -64,7 +88,7 @@ export function DataStoreSelect(props) {
     }
     return optionList;
   };
-  
+
   return SelectEntry({
     id,
     element,

app/spiffworkflow/index.js

@@ -6,7 +6,7 @@ import DataObjectInterceptor from './DataObject/DataObjectInterceptor';
 import DataObjectRules from './DataObject/DataObjectRules';
 import DataObjectRenderer from './DataObject/DataObjectRenderer';
 import DataObjectPropertiesProvider from './DataObject/propertiesPanel/DataObjectPropertiesProvider';
-import CustomDataStorePropertiesProvider from './DataStoreReference/propertiesPanel/CustomDataStorePropertiesProvider';
+import DataStorePropertiesProvider from './DataStoreReference/propertiesPanel/DataStorePropertiesProvider';
 import ConditionsPropertiesProvider from './conditions/propertiesPanel/ConditionsPropertiesProvider';
 import ExtensionsPropertiesProvider from './extensions/propertiesPanel/ExtensionsPropertiesProvider';
 import MessagesPropertiesProvider from './messages/propertiesPanel/MessagesPropertiesProvider';
@@ -42,7 +42,7 @@ export default {
   dataObjectRules: ['type', DataObjectRules],
   dataObjectRenderer: ['type', DataObjectRenderer],
   dataObjectPropertiesProvider: ['type', DataObjectPropertiesProvider],
-  dataSourcePropertiesProvider: ['type', CustomDataStorePropertiesProvider],
+  dataSourcePropertiesProvider: ['type', DataStorePropertiesProvider],
   conditionsPropertiesProvider: ['type', ConditionsPropertiesProvider],
   extensionsPropertiesProvider: ['type', ExtensionsPropertiesProvider],
   signalPropertiesProvider: ['type', SignalPropertiesProvider],

test/spec/DataStoreReferenceSpec.js

@@ -86,7 +86,7 @@ describe('Data Source Reference Test cases', function () {
         expect(selector[2].value === 'foods');
     });
 
-    it('should update dataStoreRef after a select event - DataStoreReference element', async function () {
+    it('should update dataStoreRef after a select event && should add new DataState in the level of process definition - DataStoreReference element', async function () {
         const modeler = getBpmnJS();
         modeler.get('eventBus').once('spiff.data_stores.requested', return_datastores);
 
@@ -106,6 +106,14 @@ describe('Data Source Reference Test cases', function () {
         changeInput(selector, 'foods');
         const nwbusinessObject = getBusinessObject(shapeElement);
         expect(nwbusinessObject.get('dataStoreRef').id).to.equal('foods');
+
+        // Check if the DataStore is added at the root level
+        const definitions = modeler.getDefinitions();
+        const dataStoreExists = definitions.get('rootElements').some(element =>
+            element.$type === 'bpmn:DataStore' && element.id === 'foods'
+        );
+        expect(dataStoreExists, "DataStore 'foods' should be added at the root level").to.be.true;
+
     });
 
 });