1 files changed, 31 insertions, 22 deletions

diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js b/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
index 69e68402..c19ef94b 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/composition/CompositionView.js
@@ -24,13 +24,14 @@ import PropTypes from 'prop-types';
 import CompositionButtons from './components/CompositionButtonsPanel';
 import { setElementInputsOutputs } from './bpmnUtils.js';
 import { I18n } from 'react-redux-i18n';
-
+import { PROCESS_DEFAULT_ID } from './compositionConstants';
 class CompositionView extends Component {
     static propTypes = {
         compositionUpdate: PropTypes.func,
         showErrorModal: PropTypes.func,
         composition: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
         name: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+        versionName: PropTypes.string,
         inputOutput: PropTypes.object,
         activities: PropTypes.array
     };
@@ -39,6 +40,7 @@ class CompositionView extends Component {
         super();
         this.generatedId = 'bpmn-container' + Date.now();
         this.fileInput = React.createRef();
+        this.bpmnContainer = React.createRef();
         this.selectedElement = false;
         this.state = {
             diagram: false
@@ -61,7 +63,7 @@ class CompositionView extends Component {
             },
             workflow: {
                 activities: activities,
-                onChange: this.onActivityChanged,
+                getActivityInputsOutputs: this.getActivityInputsOutputs,
                 workflowInputOutput: inputOutput
             }
         });
@@ -69,33 +71,21 @@ class CompositionView extends Component {
         this.modeler.attachTo('#' + this.generatedId);
         this.setDiagramToBPMN(composition ? composition : newDiagramXML);
         this.modeler.on('element.out', () => this.exportDiagramToStore());
+        this.bpmnContainer.current.click();
     }
 
-    componentDidUpdate(prevProps) {
-        if (prevProps.composition !== this.props.composition) {
-            this.setDiagramToBPMN(this.props.composition);
-        }
-    }
-    onActivityChanged = async (bo, selectedValue) => {
+    getActivityInputsOutputs = selectedValue => {
         const selectedActivity = this.props.activities.find(
             el => el.name === selectedValue
         );
-        const config = this.modeler.get('config');
 
         if (selectedActivity) {
             const inputsOutputs = {
                 inputs: selectedActivity.inputs,
                 outputs: selectedActivity.outputs
             };
-            config.workflow.selectedActivityInputs = inputsOutputs;
-            this.modeler.config = config;
-            setElementInputsOutputs(
-                bo,
-                inputsOutputs,
-                this.modeler.get('moddle'),
-                true
-            );
-        }
+            return inputsOutputs;
+        } else return { inputs: [], outputs: [] };
     };
 
     setDiagramToBPMN = diagram => {
@@ -108,14 +98,26 @@ class CompositionView extends Component {
             }
             let canvas = modeler.get('canvas');
             canvas.zoom('fit-viewport');
+            let { businessObject } = canvas._rootElement;
+
+            this.setDefaultIdAndName(businessObject);
             setElementInputsOutputs(
-                canvas._rootElement.businessObject,
+                businessObject,
                 this.props.inputOutput,
                 this.modeler.get('moddle')
             );
         });
     };
+    setDefaultIdAndName = businessObject => {
+        const { name } = this.props;
+        if (!businessObject.name) {
+            businessObject.name = name;
+        }
 
+        if (businessObject.id === PROCESS_DEFAULT_ID) {
+            businessObject.id = name.toLowerCase().replace(/\s/g, '_');
+        }
+    };
     exportDiagramToStore = () => {
         this.modeler.saveXML({ format: true }, (err, xml) => {
             if (err) {
@@ -128,7 +130,7 @@ class CompositionView extends Component {
     };
 
     exportDiagram = () => {
-        const { name, showErrorModal } = this.props;
+        const { name, showErrorModal, versionName } = this.props;
         this.modeler.saveXML({ format: true }, (err, xml) => {
             if (err) {
                 return showErrorModal(
@@ -136,7 +138,10 @@ class CompositionView extends Component {
                 );
             }
             const blob = new Blob([xml], { type: 'text/html;charset=utf-8' });
-            fileSaver.saveAs(blob, `${name}-diagram.bpmn`);
+            fileSaver.saveAs(
+                blob,
+                `${name.replace(/\s/g, '').toLowerCase()}-${versionName}.bpmn`
+            );
         });
     };
 
@@ -171,7 +176,11 @@ class CompositionView extends Component {
                     name="file-input"
                     style={{ display: 'none' }}
                 />
-                <div className="bpmn-container" id={this.generatedId} />
+                <div
+                    ref={this.bpmnContainer}
+                    className="bpmn-container"
+                    id={this.generatedId}
+                />
                 <div className="bpmn-sidebar">
                     <div
                         className="properties-panel"