feature plugin dependency & auto save

components/bpmn-q/modeler-component/editor/EditorConstants.js

@@ -10,13 +10,18 @@ export const workflowEventTypes = {
     LOADED: 'quantum-workflow-loaded', // New Workflow loaded in modeler
     SAVED: 'quantum-workflow-saved', // Workflow saved
     TRANSFORMED: 'quantum-workflow-transformed', // Workflow transformed
-    DEPLOYED: 'quantum-workflow-deployed' // Workflow deployed to workflow engine
+    DEPLOYED: 'quantum-workflow-deployed', // Workflow deployed to workflow engine
 };
 
+export const autoSaveFile = {
+    INTERVAL: 'Interval',
+    ON_ACTION: 'On Action'
+}
+
 // supported save file options
 export const saveFileFormats = {
     ALL: 'all',
     BPMN: '.bpmn',
     PNG: '.png',
     SVG: '.svg'
-};
+};

components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js

@@ -1,11 +1,12 @@
 import { getPluginConfig } from '../plugin/PluginConfigHandler';
-import { saveFileFormats, transformedWorkflowHandlers } from '../EditorConstants';
+import { saveFileFormats, transformedWorkflowHandlers, autoSaveFile } from '../EditorConstants';
 
 // default configurations of the editor
 const defaultConfig = {
     camundaEndpoint: process.env.CAMUNDA_ENDPOINT,
     fileName: process.env.DOWNLOAD_FILE_NAME,
     transformedWorkflowHandler: transformedWorkflowHandlers.NEW_TAB,
+    autoSaveFileOption: autoSaveFile.INTERVAL,
     fileFormat: saveFileFormats.BPMN
 };
 
@@ -90,6 +91,32 @@ export function setTransformedWorkflowHandler(transformedWorkflowHandler) {
 }
 
 /**
+ * Get the id of the handler to handle auto save of files.
+ *
+ * @return {string} the currently specified handler id
+ */
+export function getAutoSaveFileOption() {
+    if (config.autoSaveFileOption === undefined) {
+        const autoSaveFileOption = autoSaveFile[getPluginConfig('editor').autoSaveFileOption];
+        setAutoSaveFileOption(autoSaveFileOption || defaultConfig.autoSaveFileOption);
+    }
+    return config.autoSaveFileOption;
+}
+
+/**
+ * Set the id of the handler to handle auto save of files
+ *
+ * @param autoSaveFileOption the id of the transformed workflow handler
+ */
+export function setAutoSaveFileOption(autoSaveFileOption) {
+    if (autoSaveFileOption !== null && autoSaveFileOption !== undefined
+        // check that the new value is a valid handler id
+        && Object.values(autoSaveFile).includes(autoSaveFileOption)) {
+
+        config.autoSaveFileOption = autoSaveFileOption;
+        }
+}
+/** 
  * Get the file format
  *
  * @return {string} the currently specified handler id

components/bpmn-q/modeler-component/editor/config/EditorTab.js → components/bpmn-q/modeler-component/editor/config/GeneralTab.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { getModeler } from "../ModelerHandler";
 import * as editorConfig from "./EditorConfigManager";
-import { transformedWorkflowHandlers, saveFileFormats } from '../EditorConstants';
+import { autoSaveFile, saveFileFormats, transformedWorkflowHandlers } from '../EditorConstants';
 
 /**
  * Tab for the ConfigModal. Used to allow the configurations of the editor configs, namely the camunda endpoint and the
@@ -14,6 +14,7 @@ export default function EditorTab() {
 
     const [camundaEndpoint, setCamundaEndpoint] = useState(editorConfig.getCamundaEndpoint());
     const [workflowHandler, setWorkflowHandler] = useState(editorConfig.getTransformedWorkflowHandler());
+    const [autoSaveFileOption, setAutoSaveFileOption] = useState(editorConfig.getAutoSaveFileOption());
     const [fileName, setFileName] = useState(editorConfig.getFileName());
     const [fileFormat, setFileFormat] = useState(editorConfig.getFileFormat());
 
@@ -45,6 +46,7 @@ export default function EditorTab() {
         modeler.config.fileName = fileName;
         editorConfig.setCamundaEndpoint(camundaEndpoint);
         editorConfig.setTransformedWorkflowHandler(workflowHandler);
+        editorConfig.setAutoSaveFileOption(autoSaveFileOption);
         editorConfig.setFileName(fileName);
         editorConfig.setFileFormat(fileFormat);
     };
@@ -118,6 +120,26 @@ export default function EditorTab() {
                 </tr>
             </tbody>
         </table>
+        <h3>Auto save file:</h3>
+        <table>
+            <tbody>
+            <tr className="spaceUnder">
+                <td align="right">Auto save file option:</td>
+                <td align="left">
+                    <select
+                        name="autoSaveFileOption"
+                        value={autoSaveFileOption}
+                        onChange={event => setAutoSaveFileOption(event.target.value)}>
+                        {Object.entries(autoSaveFile).map(([key, value]) => (
+                            <option key={value} value={value}>
+                                {value}
+                            </option>
+                        ))}
+                    </select>
+                </td>
+            </tr>
+            </tbody>
+        </table>
     </>);
 }
 

components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js

@@ -1,60 +1,76 @@
-import PlanQKPlugin from "../../extensions/planqk/PlanQKPlugin";
-import QuantMEPlugin from "../../extensions/quantme/QuantMEPlugin";
+import PlanQKPlugin from '../../extensions/planqk/PlanQKPlugin';
+import QuantMEPlugin from '../../extensions/quantme/QuantMEPlugin';
 import DataFlowPlugin from '../../extensions/data-extension/DataFlowPlugin';
 import QHAnaPlugin from '../../extensions/qhana/QHAnaPlugin';
-import {getAllConfigs} from "./PluginConfigHandler";
-import EditorTab from "../config/EditorTab";
+import { getAllConfigs } from './PluginConfigHandler';
+import GeneralTab from '../config/GeneralTab';
+import GitHubTab from '../../extensions/quantme/configTabs/GitHubTab';
 
 /**
  * Handler for plugins of the modeler. Controls active plugins and the properties they define. Central access point to
  * get the extensions the plugins define.
  */
 
 // list of plugins integrated in the modeler, register new plugins here
+// dependencies can be specified by the name of the corresponding plugins
 const PLUGINS = [
-    DataFlowPlugin,
-    QHAnaPlugin,
-    PlanQKPlugin,
-    QuantMEPlugin,
+    {
+        plugin: QuantMEPlugin,
+        dependencies: []
+    },
+    {
+        plugin: DataFlowPlugin,
+        dependencies: []
+    },
+    {
+        plugin: QHAnaPlugin,
+        dependencies: []
+    },
+    {
+        plugin: PlanQKPlugin,
+        dependencies: []
+    }
 ];
 
 // list of currently active plugins in the current running instance of the modeler, defined based on the plugin configuration
 let activePlugins = [];
 
-/**
- * Returns these plugins of PLUGINS which have an entry in the current plugin configuration of the modeler.
- *
- * @returns {*[]} Array of active plugins.
- */
 export function getActivePlugins() {
-
-    // return saved active plugins array
     if (activePlugins.length > 0) {
         return activePlugins;
-
-    // determine active plugins
     } else {
-
         activePlugins = [];
-
 
-        let plugin;
-
-        // add all plugins of PLUGINS to active plugins which have a config entry for them
-        for (let pluginConfig of getAllConfigs()) {
-
-            plugin = PLUGINS.find(plugin => plugin.name === pluginConfig.name && checkEnabledStatus(plugin.name));
+        const loadPlugin = (plugin) => {
+            if (!activePlugins.includes(plugin.plugin)) {
+                for (const dependency of plugin.dependencies) {
+                    const dependencyPlugin = PLUGINS.find((p) => p.plugin.name === dependency);
+                    if (dependencyPlugin && !activePlugins.includes(dependencyPlugin.plugin)) {
+                        activePlugins.push(dependencyPlugin.plugin);
+                        loadPlugin(dependencyPlugin);
+                    }
+                }
+                activePlugins.push(plugin.plugin);
+            }
+        };
 
+        for (const pluginConfig of getAllConfigs()) {
+            const plugin = PLUGINS.find(
+                (p) => p.plugin.name === pluginConfig.name && checkEnabledStatus(p.plugin.name)
+            );
             if (plugin) {
-                activePlugins.push(plugin);
+                loadPlugin(plugin);
             }
         }
+
         return activePlugins;
     }
 }
 
+
+
 export function checkEnabledStatus(pluginName) {
-    switch(pluginName) {
+    switch (pluginName) {
         case 'dataflow':
             return process.env.ENABLE_DATA_FLOW_PLUGIN;
         case 'planqk':
@@ -179,13 +195,17 @@ export function getConfigTabs() {
     // add default editor tab to configure editor configs
     let configTabs = [{
         tabId: 'EditorTab',
-        tabTitle: 'Editor',
-        configTab: EditorTab,
+        tabTitle: 'General',
+        configTab: GeneralTab,
+    }, {
+        tabId: 'GitHubTab',
+        tabTitle: 'GitHub',
+        configTab: GitHubTab,
     }];
 
     // load the config tabs of the active plugins into one array
     for (let plugin of getActivePlugins()) {
-        if (plugin.configTabs) {
+        if (plugin.configTabs && checkEnabledStatus(plugin.name)) {
             configTabs = configTabs.concat(plugin.configTabs);
         }
     }

components/bpmn-q/modeler-component/editor/util/IoUtilities.js

@@ -1,11 +1,11 @@
-import { file } from 'jszip';
-import { transformedWorkflowHandlers, workflowEventTypes, saveFileFormats } from '../EditorConstants';
-import { dispatchWorkflowEvent } from '../events/EditorEventHandler';
+import { autoSaveFile, saveFileFormats, transformedWorkflowHandlers, workflowEventTypes } from "../EditorConstants";
+import { getModeler } from "../ModelerHandler";
+import { dispatchWorkflowEvent } from "../events/EditorEventHandler";
+import fetch from "node-fetch";
 
 const editorConfig = require('../config/EditorConfigManager');
 
 let FormData = require('form-data');
-import fetch from 'node-fetch';
 
 // workflow with a start event to use as template for new workflows
 const NEW_DIAGRAM_XML = '<?xml version="1.0" encoding="UTF-8"?>\n' +
@@ -47,18 +47,19 @@ export async function saveXmlAsLocalFile(xml, fileName = editorConfig.getFileNam
  * @param fileName The name of the file.
  * @returns {Promise<void>}
  */
-export async function saveModelerAsLocalFile(modeler, fileName = editorConfig.getFileName(), fileFormat = editorConfig.getFileFormat()) {
+export async function saveModelerAsLocalFile(modeler, fileName = editorConfig.getFileName(), fileFormat = editorConfig.getFileFormat(), openWindow = true) {
     const xml = await getXml(modeler);
-
     if (fileFormat === saveFileFormats.BPMN || fileFormat === saveFileFormats.ALL) {
-        await openFileDialog(xml, fileName, saveFileFormats.BPMN);
+        if (openWindow) {
+            await openFileDialog(xml, fileName, saveFileFormats.BPMN);
+        } else {
+            await saveXmlAsLocalFile(xml, fileName);
+        }
     }
 
     if (fileFormat === saveFileFormats.ALL || fileFormat === saveFileFormats.SVG || fileFormat === saveFileFormats.PNG) {
         await saveWorkflowAsSVG(modeler, fileName, fileFormat);
     }
-
-    return;
 }
 
 /**
@@ -231,6 +232,39 @@ export function openInNewTab(workflowXml, fileName) {
     };
 }
 
+export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOption = editorConfig.getAutoSaveFileOption()) {
+    clearTimeout(autosaveTimeout);
+
+    if (autoSaveFileOption === autoSaveFile.INTERVAL) {
+        setTimeout(() => autosave(hasChanges), process.env.AUTOSAVE_INTERVAL);
+    } else {
+        const timestamp = getTimestamp();
+        saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`, saveFileFormats.BPMN, false);
+    }
+}
+
+function autosave(hasChanges) {
+    if (hasChanges) {
+        // extract the xml and save it to a file
+        getModeler().saveXML({ format: true }, function (err, xml) {
+            if (!err) {
+                // Save the XML
+                console.log('Autosaved:', xml);
+                const timestamp = getTimestamp();
+                saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`);
+            }
+        });
+    }
+
+    // Reset the timer after the autosave is completed
+    resetAutosaveTimeout();
+}
+
+function getTimestamp() {
+    const date = new Date();
+    return date.toISOString().replace(/:/g, '-');
+}
+
 export async function saveWorkflowAsSVG(modeler, fileName, fileFormat) {
     modeler.saveSVG({ format: true }, function (error, svg) {
         if (error) {
@@ -269,8 +303,8 @@ function downloadPng(pngDataUrl, fileName, fileFormat) {
 async function openFileDialog(content, fileName, fileFormat) {
     let suggestedName = fileName;
     if (suggestedName.includes('.bpmn')) {
-        suggestedName = fileName.split('.bpmn')[0]; 
-    } 
+        suggestedName = fileName.split('.bpmn')[0];
+    }
     let fileHandle = await window.showSaveFilePicker({
         startIn: 'downloads', suggestedName: suggestedName + fileFormat, types: [
             {
@@ -289,8 +323,8 @@ async function openFileDialog(content, fileName, fileFormat) {
 async function openFileUrlDialog(content, fileName, fileFormat) {
     let suggestedName = fileName;
     if (suggestedName.includes('.bpmn')) {
-        suggestedName = fileName.split('.bpmn')[0]; 
-    } 
+        suggestedName = fileName.split('.bpmn')[0];
+    }
     let fileHandle = await window.showSaveFilePicker({
         startIn: 'downloads', suggestedName: suggestedName + fileFormat, types: [
             {

components/bpmn-q/modeler-component/extensions/data-extension/DataFlowPlugin.js

@@ -25,7 +25,7 @@ export default {
     configTabs: [
         {
             tabId: 'DataEndpointsTab',
-            tabTitle: 'Data Endpoints',
+            tabTitle: 'Data Flow Plugin',
             configTab: TransformationTaskConfigurationsTab,
         },
     ],