From 5f312b9ff7ebdce21366611f02db42aa7c26ef62 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Wed, 3 Aug 2022 22:43:42 +0200
Subject: [PATCH 1/4] Add text to container

---
 src/Components/SVG/Elements/Container.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx
index 907b4af..d5671e2 100644
--- a/src/Components/SVG/Elements/Container.tsx
+++ b/src/Components/SVG/Elements/Container.tsx
@@ -57,12 +57,17 @@ export class Container extends React.Component<IContainerProps> {
 
   public render(): React.ReactNode {
     const containersElements = this.props.children.map(child => child.render());
+    const xText = (this.props.properties.x * 2 + Number(this.props.properties.width)) / 2;
+    const yText = (this.props.properties.y * 2 + Number(this.props.properties.height)) / 2;
+
+    // g style
     const defaultStyle = {
       transitionProperty: 'all',
       transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       transitionDuration: '150ms'
     } as React.CSSProperties;
 
+    // Rect style
     const style = Object.assign(
       JSON.parse(JSON.stringify(defaultStyle)),
       this.props.properties
@@ -72,6 +77,7 @@ export class Container extends React.Component<IContainerProps> {
     delete style.height;
     delete style.width;
 
+    // Dimension props
     const id = `dim-${this.props.properties.id}`;
     const xStart: number = 0;
     const xEnd = Number(this.props.properties.width);
@@ -99,6 +105,12 @@ export class Container extends React.Component<IContainerProps> {
           style={style}
         >
         </rect>
+        <text
+          x={xText}
+          y={yText}
+        >
+          {this.props.properties.id}
+        </text>
         { containersElements }
       </g>
     );

From 23de954c6f5dbf34d5de31fbdb8a9f63a5df22a6 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Wed, 3 Aug 2022 22:46:05 +0200
Subject: [PATCH 2/4] Changed index.css to scss

---
 src/{index.css => index.scss} | 0
 src/main.tsx                  | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/{index.css => index.scss} (100%)

diff --git a/src/index.css b/src/index.scss
similarity index 100%
rename from src/index.css
rename to src/index.scss
diff --git a/src/main.tsx b/src/main.tsx
index a2bf01b..95b3daf 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './index.css';
+import './index.scss';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

From ff059626a3a9794c61586b234788687b0fb73104 Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Wed, 3 Aug 2022 22:52:39 +0200
Subject: [PATCH 3/4] Change text style

---
 src/App.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index ac9c791..c41aeab 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -4,4 +4,16 @@ body,
 svg {
   height: 100%;
   width: 100%;
+}
+
+text {
+  font-size: 18px;
+  font-weight: 800;
+  fill: none;
+  fill-opacity: 0;
+  stroke: #000000;
+  stroke-width: 1px;
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  stroke-opacity: 1;
 }
\ No newline at end of file

From 42cd768cf4cff6b81c56776d0c13be042f029e7b Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Wed, 3 Aug 2022 23:00:03 +0200
Subject: [PATCH 4/4] Change menu buttons

---
 src/App.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index da989ac..a9066fb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -218,7 +218,7 @@ class App extends React.Component<IAppProps> {
           onClick={() => this.ToggleSidebar()}
           buttonOnClick={(type: string) => this.AddContainer(type)}
         />
-        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
+        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Components</button>
         <ElementsSidebar
           MainContainer={this.state.MainContainer}
           SelectedContainer={this.state.SelectedContainer}
@@ -227,7 +227,7 @@ class App extends React.Component<IAppProps> {
           onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
           selectContainer={(container: Container) => this.SelectContainer(container)}
         />
-        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleElementsSidebar()}>&#9776; Menu</button>
+        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleElementsSidebar()}>&#9776; Elements</button>
         <SVG>
           { this.state.MainContainer }
         </SVG>
@@ -243,6 +243,8 @@ class App extends React.Component<IAppProps> {
 export async function fetchConfiguration(): Promise<Configuration> {
   const url = `${import.meta.env.VITE_API_URL}`;
 
+  // The test library cannot use the Fetch API
+  // @ts-ignore
   if (window.fetch) {
     return await fetch(url, {
       method: 'POST'