update menu (#140)

* add toolbar

Co-Authored-By: LaviniaStiliadou <livia_16@live.de>

* fix export of policies

* update save as functionality

* remove unused file

* update file dialog logic

* fix review comments

---------

Co-authored-by: LaviniaStiliadou <livia_16@live.de>

components/bpmn-q/modeler-component/QuantumWorkflowModeler.js

@@ -13,6 +13,7 @@ import "./editor/resources/styling/bpmn-js-token-simulation.css";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import ButtonToolbar from "./editor/ui/ButtonToolbar";
+import Toolbar from "./editor/ui/Toolbar";
 import {
   createNewDiagram,
   loadDiagram,
@@ -87,6 +88,7 @@ export class QuantumWorkflowModeler extends HTMLElement {
   setInnerHtml() {
     this.innerHTML = `
             <div style="display: flex; flex-direction: column; height: 100%;" class="qwm">
+              <div id="toolbar-container" style="flex-shrink: 0;"></div>
               <div id="button-container" style="flex-shrink: 0;"></div>
               <hr class="qwm-toolbar-splitter" />
               <div id="main-div" style="display: flex; flex: 1; height: 100%">
@@ -294,6 +296,16 @@ export class QuantumWorkflowModeler extends HTMLElement {
     const transformationButtons = getTransformationButtons();
 
     // integrate the React ButtonToolbar into its DOM container
+    const toolbarRoot = createRoot(
+      document.getElementById("toolbar-container")
+    );
+    toolbarRoot.render(
+      <Toolbar
+        modeler={modeler}
+        pluginButtons={getPluginButtons()}
+        transformButtons={transformationButtons}
+      />
+    );
     const root = createRoot(document.getElementById("button-container"));
     root.render(
       <ButtonToolbar
@@ -313,6 +325,9 @@ export class QuantumWorkflowModeler extends HTMLElement {
           modeler.xml = result;
         });
     });
+    if (!modeler.config) {
+      modeler.config = {};
+    }
     if (this.workflowModel) {
       loadDiagram(this.workflowModel, getModeler()).then();
     } else {

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

@@ -8,6 +8,13 @@ export const pluginNames = {
   DATAFLOW: "dataflow",
 };
 
+// names of the editorTabs
+export const editorTabs = {
+  GENERAL: "general",
+  GITHUB: "github",
+  ...pluginNames,
+};
+
 // supported options to handle a transformed workflow
 export const transformedWorkflowHandlers = {
   NEW_TAB: "Open in new Tab",
@@ -30,8 +37,8 @@ export const autoSaveFile = {
 
 // supported save file options
 export const saveFileFormats = {
-  ALL: "all",
   BPMN: ".bpmn",
   PNG: ".png",
   SVG: ".svg",
+  ZIP: ".zip",
 };

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

@@ -9,9 +9,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from "react";
+import React, { useState } from "react";
 import Modal from "../ui/modal/Modal";
 import "./config-modal.css";
+import { getActivePlugins } from "../plugin/PluginHandler";
 
 // polyfill upcoming structural components
 const Title = Modal.Title || (({ children }) => <h2>{children}</h2>);
@@ -27,7 +28,10 @@ const Footer = Modal.Footer || (({ children }) => <div>{children}</div>);
  * @returns {JSX.Element} The modal as React component
  * @constructor
  */
-export default function ConfigModal({ onClose, configTabs }) {
+export default function ConfigModal({ onClose, configTabs, initialTab }) {
+  const [activeButtonIndex, setActiveButtonIndex] = useState(
+    configTabs.findIndex((tab) => tab.tabId === initialTab)
+  );
   // return the new values to the config plugin
   const onSubmit = () => {
     // call close callback
@@ -44,15 +48,35 @@ export default function ConfigModal({ onClose, configTabs }) {
 
   // method to enable button functionality by hiding and displaying different div elements
   function openTab(tabName, id) {
-    console.log(id);
     const elements = elementsRootRef.current.children;
 
     for (let i = 0; i < elements.length; i++) {
       elements[i].hidden = true;
     }
     elements[id].hidden = false;
+
+    setActiveButtonIndex(id);
   }
 
+  // Set the initial active tab when the component mounts
+  React.useEffect(() => {
+    const plugins = getActivePlugins();
+    let initialTabIndex = configTabs.findIndex((tab) =>
+      tab.tabId.toLowerCase().includes(initialTab)
+    );
+    for (let plugin of plugins) {
+      if (plugin.name.includes(initialTab)) {
+        let configTab = plugin.configTabs[0];
+        initialTabIndex = configTabs.findIndex((tab) =>
+          tab.tabTitle.includes(configTab.tabTitle)
+        );
+      }
+    }
+    if (initialTabIndex !== -1) {
+      openTab(initialTab, initialTabIndex);
+    }
+  }, [initialTab, configTabs]);
+
   return (
     <Modal onClose={onClose} openTab={openTab}>
       <Title>Modeler Configuration</Title>
@@ -64,8 +88,11 @@ export default function ConfigModal({ onClose, configTabs }) {
               {React.Children.toArray(
                 configTabs.map((tab, index) => (
                   <button
+                    key={index}
                     type="button"
-                    className="qwm-innerConfig qwm-btn-config-primary"
+                    className={`qwm-innerConfig qwm-btn-config-primary ${
+                      index === activeButtonIndex ? "active-tab" : ""
+                    }`}
                     onClick={() => openTab(tab.tabId, index)}
                   >
                     {tab.tabTitle}

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

@@ -13,6 +13,14 @@ const defaultConfig = {
   autoSaveFileOption: autoSaveFile.INTERVAL,
   fileFormat: saveFileFormats.BPMN,
   autoSaveIntervalSize: process.env.AUTOSAVE_INTERVAL,
+  githubToken: process.env.GITHUB_TOKEN,
+  githubRepositoryName: process.env.QRM_REPONAME,
+  githubUsername: process.env.QRM_USERNAME,
+  githubRepositoryPath: process.env.QRM_REPOPATH,
+  uploadGithubRepositoryName: process.env.UPLOAD_GITHUB_REPO,
+  uploadGithubRepositoryOwner: process.env.UPLOAD_GITHUB_USER,
+  uploadFileName: process.env.UPLOAD_FILE_NAME,
+  uploadBranchName: process.env.UPLOAD_BRANCH_NAME,
 };
 
 let config = {};
@@ -191,6 +199,190 @@ export function setAutoSaveIntervalSize(intervalSize) {
   }
 }
 
+/**
+ * Get the local path to the folder in the repository containing the QRMs
+ *
+ * @return {string} the specified repository path
+ */
+export function getQRMRepositoryPath() {
+  if (config.githubRepositoryPath === undefined) {
+    setQRMRepositoryPath(
+      getPluginConfig("editor").githubRepositoryPath ||
+        defaultConfig.githubRepositoryPath
+    );
+  }
+  return config.githubRepositoryPath;
+}
+
+/**
+ * Set the local path to the folder in the repository containing the QRMs
+ *
+ * @param repositoryPath the repository path
+ */
+export function setQRMRepositoryPath(repositoryPath) {
+  if (repositoryPath !== null && repositoryPath !== undefined) {
+    config.githubRepositoryPath = repositoryPath;
+  }
+}
+
+/**
+ * Get the repository name used to access the QRMs
+ *
+ * @return {string} the specified repository name
+ */
+export function getQRMRepositoryName() {
+  if (config.githubRepositoryName === undefined) {
+    setQRMRepositoryName(
+      getPluginConfig("editor").githubRepositoryName ||
+        defaultConfig.githubRepositoryName
+    );
+  }
+  return config.githubRepositoryName;
+}
+
+/**
+ * Set the repository name used to access the QRMs
+ *
+ * @param repositoryName the repository name
+ */
+export function setQRMRepositoryName(repositoryName) {
+  if (repositoryName !== null && repositoryName !== undefined) {
+    config.githubRepositoryName = repositoryName;
+  }
+}
+
+/**
+ * Get the username used to access the QRM repository
+ *
+ * @return {string} the specified username
+ */
+export function getQRMRepositoryUserName() {
+  if (config.githubUsername === undefined) {
+    setQRMUserName(
+      getPluginConfig("editor").githubUsername || defaultConfig.githubUsername
+    );
+  }
+  return config.githubUsername;
+}
+
+/**
+ * Set the username used to access the QRM repository
+ *
+ * @param userName the username
+ */
+export function setQRMUserName(userName) {
+  if (userName !== null && userName !== undefined) {
+    config.githubUsername = userName;
+  }
+}
+
+/**
+ * Get the GitHub token used to access the QRM repository
+ *
+ * @return {string} the specified username
+ */
+export function getGitHubToken() {
+  if (config.githubToken === undefined) {
+    setGitHubToken(
+      getPluginConfig("editor").githubToken || defaultConfig.githubToken
+    );
+  }
+  return config.githubToken;
+}
+
+/**
+ * Set the GitHub token used to access the QRM repository
+ *
+ * @param githubToken the username
+ */
+export function setGitHubToken(githubToken) {
+  if (githubToken !== null && githubToken !== undefined) {
+    config.githubToken = githubToken;
+  }
+}
+
+/**
+ * Get the upload Github Repository Name
+ */
+export function getUploadGithubRepositoryName() {
+  if (config.uploadGithubRepositoryName === undefined) {
+    setUploadGithubRepositoryName(defaultConfig.uploadGithubRepositoryName);
+  }
+  return config.uploadGithubRepositoryName;
+}
+
+/**
+ * Set the upload Github Repositoryname
+ */
+export function setUploadGithubRepositoryName(uploadGithubRepositoryName) {
+  if (
+    uploadGithubRepositoryName !== null &&
+    uploadGithubRepositoryName !== undefined
+  ) {
+    config.uploadGithubRepositoryName = uploadGithubRepositoryName;
+  }
+}
+
+/**
+ * Get the Upload Github Reposítory Owner
+ */
+export function getUploadGithubRepositoryOwner() {
+  if (config.uploadGithubRepositoryOwner === undefined) {
+    setUploadGithubRepositoryOwner(defaultConfig.uploadGithubRepositoryOwner);
+  }
+  return config.uploadGithubRepositoryOwner;
+}
+
+/**
+ * Set the Upload Github Repository User
+ */
+export function setUploadGithubRepositoryOwner(uploadGithubRepositoryOwner) {
+  if (
+    uploadGithubRepositoryOwner !== null &&
+    uploadGithubRepositoryOwner !== undefined
+  ) {
+    config.uploadGithubRepositoryOwner = uploadGithubRepositoryOwner;
+  }
+}
+
+/**
+ * Get the Upload File Name
+ */
+export function getUploadFileName() {
+  if (config.uploadFileName === undefined) {
+    setUploadFileName(defaultConfig.uploadFileName);
+  }
+  return config.uploadFileName;
+}
+
+/**
+ * Set the Upload File Name
+ */
+export function setUploadFileName(uploadFileName) {
+  if (uploadFileName !== null && uploadFileName !== undefined) {
+    config.uploadFileName = uploadFileName;
+  }
+}
+
+/**
+ * Get the Upload Branch Name
+ */
+export function getUploadBranchName() {
+  if (config.uploadBranchName === undefined) {
+    setUploadBranchName(defaultConfig.uploadBranchName);
+  }
+  return config.uploadBranchName;
+}
+
+/**
+ * Set the Upload Branch Name
+ */
+export function setUploadBranchName(uploadBranchName) {
+  if (uploadBranchName !== null && uploadBranchName !== undefined) {
+    config.uploadBranchName = uploadBranchName;
+  }
+}
+
 /**
  * Resets the current editor configs
  */

components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js → components/bpmn-q/modeler-component/editor/config/GitHubTab.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { getModeler } from "../../../editor/ModelerHandler";
-import * as config from "../framework-config/config-manager";
+import { getModeler } from "../ModelerHandler";
+import * as config from "./EditorConfigManager";
 
 /**
  * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change the

components/bpmn-q/modeler-component/editor/config/config-modal.css

@@ -49,3 +49,7 @@
   min-width: 120px;
   max-height: 263px;
 }
+
+.qwm-innerConfig.active-tab {
+  background-color: rgb(0, 81, 255);
+}

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

@@ -6,7 +6,7 @@ import PatternPlugin from "../../extensions/pattern/PatternPlugin";
 import OpenTOSCAPlugin from "../../extensions/opentosca/OpenTOSCAPlugin";
 import { getAllConfigs } from "./PluginConfigHandler";
 import GeneralTab from "../config/GeneralTab";
-import GitHubTab from "../../extensions/quantme/configTabs/GitHubTab";
+import GitHubTab from "../config/GitHubTab";
 import { pluginNames } from "../EditorConstants";
 
 /**
@@ -219,7 +219,7 @@ export function getConfigTabs() {
   // add default editor tab to configure editor configs
   let configTabs = [
     {
-      tabId: "EditorTab",
+      tabId: "GeneralTab",
       tabTitle: "General",
       configTab: GeneralTab,
     },

components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_buttons.css

@@ -55,7 +55,7 @@
 
 .qwm-btn-config-primary:hover {
   border: solid 1px var(--blue-darken-55);
-  background-color: var(--blue-darken-62);
+  background-color: rgb(0, 81, 255);
 }
 
 .qwm-btn-config-primary:active {