Merge pull request #24 from catenax-ng/feature/TRACEFOSS-xxx-editor-config

Added editor config.

Author: ds-ext-dskrzypczak

.dockerignore

@@ -1,3 +1,3 @@
 **/node_modules/
 **/dist
-.git
+.git

.editorconfig

@@ -2,4 +2,4 @@ node_modules
 dist
 
 src/main.ts
-src/polyfills.ts
+src/polyfills.ts

.eslintignore

@@ -1,3 +1,3 @@
 {
   "*.(js|ts|json|md|css|scss|html)": ["npm run format", "npm run lint"]
-}
+}

.lintstagedrc

@@ -5,4 +5,4 @@
   "printWidth": 120,
   "tabWidth": 2,
   "arrowParens": "avoid"
-}
+}

.prettierrc

@@ -1,6 +1,6 @@
 # Community Code of Conduct
 
-**Version 1.2  
+**Version 1.2
 August 19, 2020**
 
 ## Our Pledge

CODE_OF_CONDUCT.md

@@ -25,8 +25,8 @@ This variable points to the desired api
 This variable is used to set the base path of the application. (Should be set if application runs as a subtopic)
 
 `CATENAX_PORTAL_BACKEND_DOMAIN`
-This variable is needed for security, to be more explicit, for the security headers of a request.  
-The domain of the corresponding backend should be used here.  
+This variable is needed for security, to be more explicit, for the security headers of a request.
+The domain of the corresponding backend should be used here.
 An example value could be: `catena-x.net`
 
 # Helm deployment
@@ -52,13 +52,13 @@ ingress:
     cert-manager.io/cluster-issuer: letsencrypt-prod
   hosts:
     - host: "${FE_HOST_URL}"
-      paths:
+    paths:
         - path: /
-          pathType: Prefix
+        pathType: Prefix
   tls:
     - hosts:
         - "${FE_HOST_URL}"
-      secretName: "${FE_HOST_URL}-tls"
+    secretName: "${FE_HOST_URL}-tls"
 
 ```
 
@@ -129,5 +129,5 @@ The operator can set any environment variable in the container by using one or m
 
 #### `${dockerImage}`
 
-While not strictly a means of identifying a container, you can specify a version of an image you’d like to run the container with by adding `image[:tag]` to the command. For example, `docker run 002b3c518f5852f7fd5e9e46c0ea1ab4d76b697d33d5022af1a69e1a909645ea`.  
+While not strictly a means of identifying a container, you can specify a version of an image you’d like to run the container with by adding `image[:tag]` to the command. For example, `docker run 002b3c518f5852f7fd5e9e46c0ea1ab4d76b697d33d5022af1a69e1a909645ea`.
 Images can be pulled [here](https://github.com/eclipse-tractusx/traceability-foss-frontend/pkgs/container/traceability-foss-frontend).

INSTALL.md

@@ -1,6 +1,6 @@
 <div style="display: flex; align-items: center;justify-content: center;align-content: center;">
-   <img src="src/assets/images/logo.svg" alt="Trace-X - Product Traceability FOSS Frontend (TRACE-FOSS)" style="width:200px;"/>
-   <h1 style="margin: 10px 0 0 10px">Traceability FOSS Frontend</h1>
+    <img src="src/assets/images/logo.svg" alt="Trace-X - Product Traceability FOSS Frontend (TRACE-FOSS)" style="width:200px;"/>
+    <h1 style="margin: 10px 0 0 10px">Traceability FOSS Frontend</h1>
 </div>
 
 [![Apache 2 License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://github.com/eclipse-tractusx/traceability-foss-frontend/LICENSE)
@@ -18,21 +18,21 @@ This saves costs by seamlessly tracking parts and creates trust through clearly
 
 This application serves as a user entry point to the Catena-X network.
 
-It's written in Typescript based on the `Angular` framework.  
-We decided on using Angular because of two important aspects.  
-Firstly, Angular comes with `strict guidelines`, which makes it harder to start working on for new developers, but for established developers it is `easy to start working with`.  
-Secondly, Angular `scales` perfectly in the long run. Because of the restricted possibilities and stricted guidelines it is hard to implement multiple solutions for the same problem. e.g. Storing data or routing.  
+It's written in Typescript based on the `Angular` framework.
+We decided on using Angular because of two important aspects.
+Firstly, Angular comes with `strict guidelines`, which makes it harder to start working on for new developers, but for established developers it is `easy to start working with`.
+Secondly, Angular `scales` perfectly in the long run. Because of the restricted possibilities and stricted guidelines it is hard to implement multiple solutions for the same problem. e.g. Storing data or routing.
 With that in mind it made sense it chose Angular for an `open source` project.
 
 Source files are exposed statically through the NGINX web server.
 TRACE-FOSS product composes of the backend and frontend repositories, backend repository can be found under [GitHub repository](https://github.com/catenax-ng/tx-traceability-foss-backend).
 
 ### Challenges and solutions
 
-"Visualisation of traceability" is one of our most important feature, but once was one of our biggest problems.  
-We wanted to achieve something that is `visually pleasing`, is `easy to use` and `performs` very good in a `browser application`.  
-Our first approach was to use HTML canvas. But it turned out it is hard to perform accurate actions inside a canvas. That is why we decided on using the [D3 library](https://d3js.org/).  
-D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.  
+"Visualisation of traceability" is one of our most important feature, but once was one of our biggest problems.
+We wanted to achieve something that is `visually pleasing`, is `easy to use` and `performs` very good in a `browser application`.
+Our first approach was to use HTML canvas. But it turned out it is hard to perform accurate actions inside a canvas. That is why we decided on using the [D3 library](https://d3js.org/).
+D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.
 Because it uses SVGs, we knew it will perform great. And we are able to have pinpoint accuracy when it comes to user actions.
 
 ## Getting started
@@ -59,7 +59,7 @@ Find [here](docs/configuration.md) documentation to support you during the devel
 
 ### Setup changelog generation
 
-Follow these instructions: [GIT-CHGLOG](https://github.com/git-chglog/git-chglog#installation)  
+Follow these instructions: [GIT-CHGLOG](https://github.com/git-chglog/git-chglog#installation)
 You can generate a changelog when running `git-chglog -o CHANGELOG.md`
 
 ## Application authentication
@@ -185,16 +185,16 @@ All done!
 
 ## How to contribute
 
-TBD  
+TBD
 For now, we are following the angular guidelines which can be found here: [Angulars how to contribute](https://github.com/angular/angular-cli/blob/main/CONTRIBUTING.md)
 
 ## Branching system and release workflow
 
 We are using the [GitHub Flow](https://docs.github.com/en/get-started/quickstart/github-flow) for our branching system.
 
-The general idea behind this approach is that you keep the main code in a constant deployable state.  
-You start off with the main branch, then a developer creates a feature branch directly from main.  
-After the feature is developed the code is reviewed and tested on the branch.  
+The general idea behind this approach is that you keep the main code in a constant deployable state.
+You start off with the main branch, then a developer creates a feature branch directly from main.
+After the feature is developed the code is reviewed and tested on the branch.
 Only after the code is stable it can be merged to main.
 
 <img src="docs/images/github-flow-branching-model.jpeg" height="60%" width="60%"/>

README.md

@@ -61,7 +61,7 @@ describe('NotificationsInboxComponent', () => {
     const menuActionsConfig = [];
 
     return renderComponent(
-      `<app-notification 
+      `<app-notification
           [queuedAndRequestedNotifications$]='queuedAndRequestedNotifications$'
           [receivedNotifications$]='receivedNotifications$'
           [translationContext]="'commonInvestigation'"

src/app/modules/shared/modules/notification/presentation/notification.component.spec.ts

@@ -8,13 +8,13 @@
 
 <h2>This Module is responsible for the visualisation of relations between assets.</h2>
 <h4>"A high level of transparency across the supplier network" -> This module tackles the channels to provide an
-intuitive and clear visualisation for exactly that.  
+intuitive and clear visualisation for exactly that.
 The visualisation is done in a tree-like structure. By visualising the relations between assets like this,
 it is easy to understand and follow.
 
 ## Structure
 
-The module can be found in this location: `src/app/modules/page/parts/relations`.  
+The module can be found in this location: `src/app/modules/page/parts/relations`.
 Relations is a submodule of parts because it is only available within parts and has no separate access point.
 
 "Relations" is set up like every other module.
@@ -25,10 +25,10 @@ Relations is a submodule of parts because it is only available within parts and
 
 ## Architecture
 
-The diagram is built with [d3.js](https://github.com/d3/d3). It uses SVGs to render any shape or form.  
+The diagram is built with [d3.js](https://github.com/d3/d3). It uses SVGs to render any shape or form.
 The implementation of `d3` and the custom implementation for displaying the tree can be found in `d3.tree.ts`.
 The class `RelationTree` expects a config. This config should provide all necessary event handlers, properties and the
-main element.  
+main element.
 The main element should be a `figure` element. The result of the tree is displayed there as an SVG.
 
 There are two important state variables you should keep track of. These are `openElements` and `loadedElements`.
@@ -44,10 +44,10 @@ With this one-dimensional approach, it is easy to detect and handle changes.
 
 ### loadedElements
 
-Loaded elements has a similar structure to open Elements. But with one exception,  
+Loaded elements has a similar structure to open Elements. But with one exception,
 the value is `not a list of ids`, it contains `detailed information about an `already downloaded` asset.
 
-With this approach, we can reduce the load on the network.  
+With this approach, we can reduce the load on the network.
 In addition to that, we are preloading the children of an opened asset. By doing that we provide nearly a seamless
 navigation.