Add swals + Remove incompatible saves + add new tests

.eslintrc.cjs

@@ -32,6 +32,7 @@ module.exports = {
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': 'error',
     '@typescript-eslint/ban-types': ['error'],
+    '@typescript-eslint/no-floating-promises': 'off', // disabled cuz troublesome for SweetAlert since they never reject
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
     'react-hooks/exhaustive-deps': 'warn' // Checks effect dependencies
   }

package.json

@@ -18,7 +18,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-svg-pan-zoom": "^3.11.0",
-    "react-window": "^1.8.7"
+    "react-window": "^1.8.7",
+    "sweetalert2": "^11.4.28",
+    "sweetalert2-react-content": "^5.0.3"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.16.1",

pnpm-lock.yaml

@@ -32,6 +32,8 @@ specifiers:
   react-svg-pan-zoom: ^3.11.0
   react-window: ^1.8.7
   sass: ^1.54.0
+  sweetalert2: ^11.4.28
+  sweetalert2-react-content: ^5.0.3
   tailwindcss: ^3.1.7
   typescript: ^4.6.4
   vite: ^3.0.0
@@ -44,6 +46,8 @@ dependencies:
   react-dom: 18.2.0_react@18.2.0
   react-svg-pan-zoom: 3.11.0_react@18.2.0
   react-window: 1.8.7_biqbaboplfbrettd7655fr4n2y
+  sweetalert2: 11.4.28
+  sweetalert2-react-content: 5.0.3_m2nzudmh75bb5iwknw4em6omxi
 
 devDependencies:
   '@testing-library/dom': 8.16.1
@@ -3198,6 +3202,22 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /sweetalert2-react-content/5.0.3_m2nzudmh75bb5iwknw4em6omxi:
+    resolution: {integrity: sha512-DQXblZn0LHTvmaZquNQncZIE3Ljox85sAKKbXjYlDyFejyOibHwprAVvtQQpAUG3bgvyDUeAOE/BDFcVx6KUow==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+      sweetalert2: ^11.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+      sweetalert2: 11.4.28
+    dev: false
+
+  /sweetalert2/11.4.28:
+    resolution: {integrity: sha512-leCf8Kc/o+R0LNWmLjWXI7l0roMchEHg6X+XibmfTYaOMvOoHXmoxmegHl0it+8vvvZlPIjzyfM6bYBOKTFnRg==}
+    dev: false
+
   /symbol-tree/3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true

src/Components/Editor/Behaviors/RigidBodyBehaviors.ts

@@ -6,6 +6,7 @@
  * If the contraints fails, an error message will be returned
  */
 
+import Swal from 'sweetalert2';
 import { IContainerModel } from '../../../Interfaces/IContainerModel';
 import { ISizePointer } from '../../../Interfaces/ISizePointer';
 
@@ -126,8 +127,13 @@ export function constraintBodyInsideUnallocatedWidth(
 
   // Check if there is still some space
   if (availableWidths.length === 0) {
+    Swal.fire({
+      icon: 'error',
+      title: 'Not enough space!',
+      text: 'Try to free the parent a little bit!'
+    });
     throw new Error(
-      'No available space found on the parent container. Try to free the parent a little before placing it inside.'
+      'No available space found on the parent container. Try to free the parent a bit.'
     );
   }
 
@@ -169,6 +175,14 @@ export function constraintBodyInsideUnallocatedWidth(
 
     if (availableWidth === undefined) {
       console.warn(`Container ${container.properties.id} cannot fit in any space due to its minimum width being to large. Consequently, its rigid body property is disabled.`);
+      Swal.fire({
+        position: 'top-end',
+        title: `Container ${container.properties.id} cannot fit!`,
+        text: 'Its rigid body property is now disabled. Change its the minimum width or free the parent container.',
+        timerProgressBar: true,
+        showConfirmButton: false,
+        timer: 5000
+      });
       container.properties.isRigidBody = false;
       return container;
     }

src/Components/Editor/ContainerOperations.ts

@@ -233,7 +233,7 @@ export function AddContainer(
 
   // Update the state
   history.push({
-    LastAction: `Add ${type} in ${parentClone.properties.id}`,
+    LastAction: `Add ${newContainer.properties.id} in ${parentClone.properties.id}`,
     MainContainer: clone,
     SelectedContainer: parentClone,
     SelectedContainerId: parentClone.properties.id,

src/tests/resources/state.json

@@ -1,182 +0,0 @@
-{
-    "isSidebarOpen": true,
-    "isElementsSidebarOpen": false,
-    "isHistoryOpen": false,
-    "configuration": {
-        "AvailableContainers": [
-            {
-                "Type": "Chassis",
-                "Width": 500,
-                "Style": {
-                    "fillOpacity": 0,
-                    "borderWidth": 2,
-                    "stroke": "red"
-                }
-            },
-            {
-                "Type": "Trou",
-                "Width": 300,
-                "Style": {
-                    "fillOpacity": 0,
-                    "borderWidth": 2,
-                    "stroke": "green"
-                }
-            },
-            {
-                "Type": "Montant",
-                "Width": 100,
-                "Style": {
-                    "fillOpacity": 0,
-                    "borderWidth": 2,
-                    "stroke": "blue",
-                    "transform": "translateX(-50%)",
-                    "transformOrigin": "center",
-                    "transformBox": "fill-box"
-                }
-            }
-        ],
-        "AvailableSymbols": [
-            {
-                "Height": 0,
-                "Image": {
-                    "Base64Image": null,
-                    "Name": null,
-                    "Svg": null,
-                    "Url": "https://www.manutan.fr/img/S/GRP/ST/AIG3930272.jpg"
-                },
-                "Name": "Poteau structure",
-                "Width": 0,
-                "XPositionReference": 1
-            },
-            {
-                "Height": 0,
-                "Image": {
-                    "Base64Image": null,
-                    "Name": null,
-                    "Svg": null,
-                    "Url": "https://e7.pngegg.com/pngimages/647/127/png-clipart-svg-working-group-information-world-wide-web-internet-structure.png"
-                },
-                "Name": "Joint de structure",
-                "Width": 0,
-                "XPositionReference": 0
-            }
-        ],
-        "MainContainer": {
-            "Height": 200,
-            "Width": 1000
-        }
-    },
-    "history": [
-        {
-            "MainContainer": {
-                "children": [],
-                "properties": {
-                    "id": "main",
-                    "parentId": "null",
-                    "x": 0,
-                    "y": 0,
-                    "width": 1000,
-                    "height": 200,
-                    "fillOpacity": 0,
-                    "stroke": "black"
-                },
-                "userData": {}
-            },
-            "TypeCounters": {}
-        },
-        {
-            "MainContainer": {
-                "children": [
-                    {
-                        "children": [],
-                        "properties": {
-                            "id": "Chassis-0",
-                            "parentId": "main",
-                            "x": 0,
-                            "y": 0,
-                            "width": 500,
-                            "height": 200,
-                            "fillOpacity": 0,
-                            "borderWidth": 2,
-                            "stroke": "red"
-                        },
-                        "userData": {
-                            "type": "Chassis"
-                        }
-                    }
-                ],
-                "properties": {
-                    "id": "main",
-                    "parentId": "null",
-                    "x": 0,
-                    "y": 0,
-                    "width": 1000,
-                    "height": 200,
-                    "fillOpacity": 0,
-                    "stroke": "black"
-                },
-                "userData": {}
-            },
-            "TypeCounters": {
-                "Chassis": 0
-            },
-            "SelectedContainerId": "main"
-        },
-        {
-            "MainContainer": {
-                "children": [
-                    {
-                        "children": [],
-                        "properties": {
-                            "id": "Chassis-0",
-                            "parentId": "main",
-                            "x": 0,
-                            "y": 0,
-                            "width": 500,
-                            "height": 200,
-                            "fillOpacity": 0,
-                            "borderWidth": 2,
-                            "stroke": "red"
-                        },
-                        "userData": {
-                            "type": "Chassis"
-                        }
-                    },
-                    {
-                        "children": [],
-                        "properties": {
-                            "id": "Chassis-1",
-                            "parentId": "main",
-                            "x": 500,
-                            "y": 0,
-                            "width": 500,
-                            "height": 200,
-                            "fillOpacity": 0,
-                            "borderWidth": 2,
-                            "stroke": "red"
-                        },
-                        "userData": {
-                            "type": "Chassis"
-                        }
-                    }
-                ],
-                "properties": {
-                    "id": "main",
-                    "parentId": "null",
-                    "x": 0,
-                    "y": 0,
-                    "width": 1000,
-                    "height": 200,
-                    "fillOpacity": 0,
-                    "stroke": "black"
-                },
-                "userData": {}
-            },
-            "TypeCounters": {
-                "Chassis": 1
-            },
-            "SelectedContainerId": "main"
-        }
-    ],
-    "historyCurrentStep": 2
-}