Add and apply linter (#66)

* Add linter script and fix errors

* Apply prettier

* Add workflow executing linters

* Add working directory for npm ci

* Remove unknown working-directory from linting action

* Update linting workflow

* Fix linting command

* Fix NOTICE file

* Fix licence years

* Fix name in Github workflow

* Enable unused variable linting rule

* Run prettier

* Enable unnecessary espace rule

* Add .eslintignore

* Adapt path to public folder

* Update ignore rules for linters

* Lint changes after merging master

* Start fixing Readme

* Lint changes from merge

* Lint master merge

* Lint changes after merge with origin/master

* Replace renderer with correct file

* Lint changes

* Lint changes

* Run linter

* Fix lint error

* Add badges to readme

* New diagram dialog (#89)

* dialog for new diagram, isExecutable to true

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

* fix lint

* adjust label for canceling dialog

---------

Co-authored-by: SharonNaemi <naemi_17@live.de>
Co-authored-by: mbeisel <beiselmn@gmail.com>

* Fix plugin handling (#87)

* fix plugin handling

* fix lint

* remove useEffect as it overwrites the transformed workflow after opening it

* Fix transformation bugs

* Fix linting errors

* Temporarily add OpenTOSCAUtils to QuantME plugin

* Fix codestyle

* fix open modal

---------

Co-authored-by: LaviniaStiliadou <livia_16@live.de>
Co-authored-by: SharonNaemi <naemi_17@live.de>
Co-authored-by: mbeisel <beiselmn@gmail.com>

.github/workflows/run-npm-linting.yml

@@ -0,0 +1,28 @@
+name: Check the code style of the Quantum Workflow Modeler
+
+on:
+  pull_request:
+    types: [ opened, synchronize ]
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install Node.js dependencies and run linters
+        run: |
+          npm ci
+          npm run lint
+        working-directory: ./components/bpmn-q

.github/workflows/run-npm-test.yml

@@ -1,4 +1,4 @@
-name: Run all test of the Quantum Workflow Modeler
+name: Run Tests
 
 on:
   pull_request:

NOTICE

@@ -1,16 +1,12 @@
-
 The source code of this project is licensed under the Apache 2.0 license, found in the LICENSE file in this directory.
 
-The code of the QuantME Plugin und certain utility functions of the editor are based on and using code from the
-QuantME Transformation Framework, licensed under the MIT license and available
-under https://github.com/UST-QuAntiL/QuantME-TransformationFramework.
+The code of the QuantME Plugin and certain utility functions of the editor are based on and using code from the QuantME Transformation Framework, licensed under the MIT license and available under https://github.com/UST-QuAntiL/QuantME-TransformationFramework.
 
 The code of the PlanQK Plugin is based on the code of the workflow modeler prototype of the PlanQK Platform.
 
-Certain components of the editor use and extend the code of the bpmn-js repository, the diagram-js repository and the camunda-modeler
-repository of Camunda. The bpmn-js repository is licensed under the bpmn.io license and available in the following GitHub
-repository https://github.com/bpmn-io/bpmn-js. The diagram-js repository is licensed under the MIT license, available under
-the following link: https://github.com/bpmn-io/diagram-js. The camunda-modeler is licensed under the MIT license and available
-under the following link: https://github.com/camunda/camunda-modeler.
+Certain components of the editor use and extend the code of the bpmn-js repository, the diagram-js repository and the camunda-modeler repository of Camunda.
+The bpmn-js repository is licensed under the bpmn.io license and available in the following GitHub repository https://github.com/bpmn-io/bpmn-js.
+The diagram-js repository is licensed under the MIT license, available under the following link: https://github.com/bpmn-io/diagram-js.
+The camunda-modeler is licensed under the MIT license and available under the following link: https://github.com/camunda/camunda-modeler.
 
 Find copies of the third party license in the THIRD_PARTY_LICENSE directory under this directory.

README.md

@@ -1,28 +1,31 @@
 # Quantum Workflow Modeler
-A web-based modelling tool for modelling BPMN 2.0-based quantum workflows. It uses and extends the 
-[bpmn-js Modeler](https://github.com/bpmn-io/bpmn-js/) of Camunda which is embedded in the User Interface (UI) of the 
-Quantum Workflow Modeler and handles the graphical modelling of workflows. 
 
-It contains several modelling extensions to the BPMN standard which enable the modeling of an explicit, executable data 
-flow and the modelling of quantum specific modelling elements. New model extensions can be integrated plugin-based into 
-the modeler. Read [this guide](doc/quantum-workflow-modeler/editor/plugin/plugin-integration.md) to learn how you can integrate 
-your own modelling extensions into the modeler.
+[![GitHub license](https://img.shields.io/github/license/PlanQK/workflow-modeler)](https://github.com/PlanQK/workflow-modeler/blob/master/LICENSE)
+[![Tests](https://github.com/PlanQK/workflow-modeler/actions/workflows/run-npm-test.yml/badge.svg)](https://github.com/PlanQK/workflow-modeler/actions/workflows/run-npm-test.yml)
+[![Release](https://img.shields.io/github/v/release/PlanQK/workflow-modeler)](https://img.shields.io/github/v/release/PlanQK/workflow-modeler)
 
-The modeler is implemented as an HTML web component and can be integrated in other web applications as a custom HMTL tag. 
-Read [this documentation](doc/integration-guide/integration-guide.md) to learn how you can 
-integrate the modeler in your application and which configuration options and interfaces you can use. 
+A web-based modeling tool for modeling BPMN 2.0-based quantum workflows. 
+It uses and extends the [bpmn-js Modeler](https://github.com/bpmn-io/bpmn-js/) of Camunda which is embedded in the User Interface (UI) of the Quantum Workflow Modeler and handles the graphical modeling of workflows. 
 
-The implementation of the modeler is located in the [bpmn-q folder](components/bpmn-q). Example Projects to integrate the 
-modeler in different UI frameworks can be found [here for a Vue.js app](components/bpmn-q-vue) 
-and [here for an Angular app](components/bpmn-q-angular). 
+It contains several modeling extensions to the BPMN standard which enable the modeling of quantum workflows. 
+New model extensions can be integrated plugin-based into the modeler.
+Read [this guide](doc/quantum-workflow-modeler/editor/plugin/plugin-integration.md) to learn how you can integrate your own modeling extensions into the modeler.
 
-The Quantum Workflow Modeler is a HTML web component.
-The UI components of the modeler are defined with React-js and written in JavaScript. To package the project, webpack is used.
+The modeler is implemented as an HTML web component and can be integrated into other web applications as a custom HTML tag. 
+Read [this documentation](doc/integration-guide/integration-guide.md) to learn how you can integrate the modeler into your application and which configuration options and interfaces you can use. 
+
+The implementation of the modeler is located in the [bpmn-q folder](components/bpmn-q).
+Example projects to integrate the modeler in different UI frameworks can be found [here for a Vue.js app](components/bpmn-q-vue) and [here for an Angular app](components/bpmn-q-angular). 
+
+The Quantum Workflow Modeler is an HTML web component.
+The UI components of the modeler are defined with React-js and written in JavaScript.
+To package the project, webpack is used.
 The tests of the project use mocha with chai for karma.
 
 Refer to the [documentation](doc/README.md) for further information.
 
 ## Node Version
+
 The project was created with npm 8.19.2 and node 18.12.1.
 
 ## Quickstart
@@ -54,18 +57,17 @@ docker run --name workflow-modeler -p 8080:8080 workflow-modeler
 
 ## How to use this Library
 
-To use the Quantum Workflow Modeler component in your application you have to install its npm package which is published 
-via GitHub packages. To access the package, you first [have to register the PlanQK namespace](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-a-package) 
-to your npm setup and then [authenticate to GitHub](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token). 
+To use the Quantum Workflow Modeler component in your application you have to install its npm package which is published via GitHub packages.
+To access the package, you first [have to register the PlanQK namespace](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#installing-a-package) to your npm setup and then [authenticate to GitHub](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token). 
 A more detailed description can be found [here](doc/integration-guide/integration-guide.md).
 
 Then install the npm package with
 ```
 $> npm install --save @planqk/quantum-workflow-modeler
 ```
 
-Register the Quantum Workflow Modeler component as a custom HTML tag in the UI framework you are using. The exact steps 
-depend on the specific framework, but here are guides how you can do that in [Angular](), [Vue.js]() and [plain HTML]().
+Register the Quantum Workflow Modeler component as a custom HTML tag in the UI framework you are using.
+The exact steps depend on the specific framework, but here are guides how you can do that in [Angular](), [Vue.js]() and [plain HTML]().
 
 Use the tag of the component, ```quantum-workflow-modeler``` directly in your HTML
 ```html
@@ -82,9 +84,9 @@ const modelerComponent = document.createElement('quantum-workflow-modeler');
 ```
 to integrate the modeler component into the UI of your application.
 
-Activate the plugins you want to use in your instance of the modeler by setting the pluginConfig attribute. You can only 
-set the pluginConfigs attribute if the modelerComponent is already available in the DOM. If you do not do that, the rendering
-will fail.
+Activate the plugins you want to use in your instance of the modeler by setting the pluginConfig attribute.
+You can only set the pluginConfigs attribute if the modelerComponent is already available in the DOM.
+If you do not do that, the rendering will fail.
 ```javascript
 modelerComponent.pluginConfigs = [
     {
@@ -102,23 +104,24 @@ modelerComponent.pluginConfigs = [
 ]
 ```
 
-You can configure the plugins like described [here](doc/quantum-workflow-modeler/editor/plugin/plugin-config.md). The structure 
-of the config is defined by the plugin and can be looked up in the documentation of the respective plugin. 
+You can configure the plugins as described [here](doc/quantum-workflow-modeler/editor/plugin/plugin-config.md).
+The structure of the config is defined by the plugin and can be looked up in the documentation of the respective plugin. 
 
 You can add listeners to custom events the Quantum Workflow Modeler triggers for changes in the currently loaded workflow, 
 like saving or loading a workflow. Read the [EventHandler documentation](doc/quantum-workflow-modeler/editor/events/event-handler-doc.md) to learn more about the events of the modeler. 
 
 ## Development Setup
 
-To set this project up for development clone the repository and open it in your favorite editor. The project code is under
-[./components](components) and is split in three parts: Under [bpmn-q](components/bpmn-q) is the actual code of the Quantum
-Workflow Modeler. Under [bpmn-q-angular](components/bpmn-q-angular) is an example project with Angular which integrates the
-modeler component. Under [bpmn-q-vue](components/bpmn-q-vue) is a simple Vue-js project which integrate the modeler. These 
-to projects do not contain code of the Quantum Workflow Modeler component. They are used for testing the integration of the 
-developed component to test and check its compatibility with other UI frameworks.
+To set this project up for development, clone the repository and open it in your favorite editor.
+The project code is under [./components](components) and is split in three parts:
+Under [bpmn-q](components/bpmn-q) is the actual code of the Quantum Workflow Modeler.
+Under [bpmn-q-angular](components/bpmn-q-angular) is an example project with Angular which integrates the modeler component.
+Under [bpmn-q-vue](components/bpmn-q-vue) is a simple Vue-js project which integrate the modeler.
+These to projects do not contain code of the Quantum Workflow Modeler component.
+They are used for testing the integration of the developed component to test and check its compatibility with other UI frameworks.
 
-The actual code for development is in [bpmn-q](components/bpmn-q). To set up the cloned project, execute the following 
-commands under the ./components/bpmn-q directory.
+The actual code for development is in [bpmn-q](components/bpmn-q).
+To set up the cloned project, execute the following commands under the ./components/bpmn-q directory.
 1. Install dependencies
     ```
     npm install
@@ -127,23 +130,23 @@ commands under the ./components/bpmn-q directory.
 2. Start the Modeler
 
     To execute the Quantum Workflow Modeler, a small test website can be run which only contains the modeler component. 
-    To start this website, execute
+    To start this website, execute:
     ```
     npm run dev
     ```
    This will start a webpack dev server which loads the website specified in the [index.html file](components/bpmn-q/public/index.html)
       
 3. Build the Modeler
     
-    To build the modeler execute
+    To build the modeler execute:
     ```
     npm run build
     ```
    This will build the modeler component with webpack into a single js file in the [public directory](components/bpmn-q/public).
 
 4. Run all Tests
     
-    To execute all tests run
+    To execute all tests run:
     ```
     npm test 
    ```
@@ -155,16 +158,10 @@ commands under the ./components/bpmn-q directory.
 
 ## Disclaimer of Warranty
 
-Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its 
-Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, 
-without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR 
-PURPOSE.
-You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks 
-associated with Your exercise of permissions under this License.
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE.
+You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
 
 ## Haftungsausschluss
 
 Dies ist ein Forschungsprototyp.
-Die Haftung für entgangenen Gewinn, Produktionsausfall, Betriebsunterbrechung, entgangene Nutzungen, Verlust von Daten 
-und Informationen, Finanzierungsaufwendungen sowie sonstige Vermögens- und Folgeschäden ist, außer in Fällen von grober 
-Fahrlässigkeit, Vorsatz und Personenschäden, ausgeschlossen.
+Die Haftung für entgangenen Gewinn, Produktionsausfall, Betriebsunterbrechung, entgangene Nutzungen, Verlust von Daten und Informationen, Finanzierungsaufwendungen sowie sonstige Vermögens- und Folgeschäden ist, außer in Fällen von grober Fahrlässigkeit, Vorsatz und Personenschäden, ausgeschlossen.

components/bpmn-q/.eslintignore

@@ -0,0 +1 @@
+public

components/bpmn-q/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "commonjs": true,
+    "node": true,
+    "mocha": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "semi": [2, "always"],
+    "react/prop-types": "off",
+    "no-prototype-builtins": "off",
+    "react/jsx-key": "off"
+  }
+}

components/bpmn-q/.prettierrc.json

@@ -0,0 +1 @@
+{}

components/bpmn-q/README.md

@@ -1,15 +1,19 @@
 # Quantum Workflow Modeler - HTML Web Component
-This project contains the HTML web component for the Quantum Workflow Modeler and its implementation. 
+
+This project contains the HTML web component for the Quantum Workflow Modeler and its implementation.
 
 ## Node Version
+
 The project was created with npm 8.19.2 and node 18.12.1.
 
 ## Development Setup
 
-To set this project up for development clone the repository and open it in your favorite editor. 
+To set this project up for development clone the repository and open it in your favorite editor.
 
 Execute the following commands under this directory:
+
 ### Install dependencies
+
 ```
 npm install
 ```
@@ -18,30 +22,37 @@ npm install
 
 To execute the Quantum Workflow Modeler, a small test website can be run which only contains the modeler component.
 To start this website, execute
+
 ```
 npm run dev
 ```
+
 This will start a webpack dev server which loads the website specified in the [index.html file](components/bpmn-q/public/index.html)
 
 ### Build the Modeler
 
 To build the modeler execute
+
 ```
 npm run build
 ```
+
 This will build the modeler component with webpack into a single js file in the [public directory](components/bpmn-q/public).
 
 ### Run all Tests
 
 To execute all tests run
+
 ```
-npm test 
+npm test
 ```
-   This will run all mocha test specified in [karma.conf.js](components/bpmn-q/karma.conf.js) with karma.
+
+This will run all mocha test specified in [karma.conf.js](components/bpmn-q/karma.conf.js) with karma.
 
 ### External Endpoints
-   Some components of the modeler component need external endpoints to work properly. Refer to [this guide](doc/devloper-setup/developer-setup.md)
-   for setting up all used endpoints.
+
+Some components of the modeler component need external endpoints to work properly. Refer to [this guide](doc/devloper-setup/developer-setup.md)
+for setting up all used endpoints.
 
 ## Disclaimer of Warranty
 
@@ -57,4 +68,4 @@ associated with Your exercise of permissions under this License.
 Dies ist ein Forschungsprototyp.
 Die Haftung für entgangenen Gewinn, Produktionsausfall, Betriebsunterbrechung, entgangene Nutzungen, Verlust von Daten
 und Informationen, Finanzierungsaufwendungen sowie sonstige Vermögens- und Folgeschäden ist, außer in Fällen von grober
-Fahrlässigkeit, Vorsatz und Personenschäden, ausgeschlossen.
+Fahrlässigkeit, Vorsatz und Personenschäden, ausgeschlossen.