From f97c50c5f851ad08296a1052c36be2979fe05d33 Mon Sep 17 00:00:00 2001
From: Mateusz Borowczyk <mateusz.borowczyk@inmanta.com>
Date: Tue, 30 Apr 2024 09:54:09 +0200
Subject: [PATCH] Change information in the Composer's Form Modal to be more
 adequate when no instance is chosen, Make expand/collapse button action area
 bigger in the Instances on the Instance Composer Canvas. (Issue #5691, PR
 #5707)

# Description

* Short description here *

closes #5690 #5691

# Self Check:

Strike through any lines that are not applicable (`~~line~~`) then check the box

- [ ] Attached issue to pull request
- [ ] Changelog entry
- [ ] Code is clear and sufficiently documented
- [ ] Sufficient test cases (reproduces the bug/tests the requested feature)
- [ ] Correct, in line with design
- [ ] End user documentation is included or an issue is created for end-user documentation (add ref to issue here: )

https://github.com/inmanta/web-console/assets/113331659/e0a1b3df-d5a9-4198-aac5-5d0a97b91bdf
---
 .../unreleased/5691-composer-improvements.yml      |  6 ++++++
 package.json                                       |  3 +++
 src/UI/Components/Diagram/components/FormModal.tsx |  6 +++++-
 src/UI/Components/Diagram/init.ts                  |  1 +
 src/UI/Components/Diagram/shapes.ts                | 14 +++++++++++++-
 src/UI/words.tsx                                   |  2 ++
 6 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/unreleased/5691-composer-improvements.yml

diff --git a/changelogs/unreleased/5691-composer-improvements.yml b/changelogs/unreleased/5691-composer-improvements.yml
new file mode 100644
index 000000000..887db49ef
--- /dev/null
+++ b/changelogs/unreleased/5691-composer-improvements.yml
@@ -0,0 +1,6 @@
+description: "Change information in the Composer's Form Modal to be more adequate when no instance is chosen, Make expand/collapse button action area bigger in the Instances on the Instance Composer Canvas."
+issue-nr: 5691
+change-type: patch
+destination-branches: [master, iso7]
+sections:
+  minor-improvement: "{{description}}"
diff --git a/package.json b/package.json
index 2bb7da71b..430a4238e 100644
--- a/package.json
+++ b/package.json
@@ -132,6 +132,9 @@
     "webpack-merge": "^5.10.0",
     "webpack-version-file": "^0.1.7"
   },
+  "browser": {
+    "crypto": false
+  },
   "dependencies": {
     "@inmanta/rappid": "^4.0.0",
     "@joint/layout-directed-graph": "^4.0.1",
diff --git a/src/UI/Components/Diagram/components/FormModal.tsx b/src/UI/Components/Diagram/components/FormModal.tsx
index 56f3027e1..a8e9b2e71 100644
--- a/src/UI/Components/Diagram/components/FormModal.tsx
+++ b/src/UI/Components/Diagram/components/FormModal.tsx
@@ -287,7 +287,11 @@ const FormModal = ({
             <Alert
               variant="info"
               isInline
-              title={words("inventory.editInstance.noAttributes")}
+              title={
+                cellView
+                  ? words("inventory.editInstance.noAttributes")
+                  : words("inventory.addInstance.unselectedEntity")
+              }
             />
           </FlexItem>
         )}
diff --git a/src/UI/Components/Diagram/init.ts b/src/UI/Components/Diagram/init.ts
index f37915bbf..3c314a4a5 100644
--- a/src/UI/Components/Diagram/init.ts
+++ b/src/UI/Components/Diagram/init.ts
@@ -159,6 +159,7 @@ export default function diagramInit(
       const bbox = elementAsShape.getBBox();
       elementAsShape.attr("toggleButton/y", bbox.height - 24);
       elementAsShape.attr("spacer/y", bbox.height - 33);
+      elementAsShape.attr("buttonBody/y", bbox.height - 32);
 
       elementAsShape.set("isCollapsed", !isCollapsed);
     },
diff --git a/src/UI/Components/Diagram/shapes.ts b/src/UI/Components/Diagram/shapes.ts
index 5a8c43dc6..700eef684 100644
--- a/src/UI/Components/Diagram/shapes.ts
+++ b/src/UI/Components/Diagram/shapes.ts
@@ -196,6 +196,10 @@ export class ServiceEntityBlock extends shapes.standard.HeaderedRecord {
         tagName: "rect",
         selector: "spacer",
       },
+      {
+        tagName: "rect",
+        selector: "buttonBody",
+      },
       {
         tagName: "image",
         selector: "toggleButton",
@@ -309,7 +313,15 @@ export class ServiceEntityBlock extends shapes.standard.HeaderedRecord {
       height: 1,
       cursor: "default",
     });
-
+    this.attr("buttonBody", {
+      event: "element:toggleButton:pointerdown",
+      preserveAspectRatio: "none",
+      cursor: "pointer",
+      opacity: 0,
+      y: bbox.height - 32,
+      width: 264,
+      height: 32,
+    });
     this.attr("toggleButton", {
       event: "element:toggleButton:pointerdown",
       "xlink:href": expandButton,
diff --git a/src/UI/words.tsx b/src/UI/words.tsx
index 37e0dae65..d692227e9 100644
--- a/src/UI/words.tsx
+++ b/src/UI/words.tsx
@@ -145,6 +145,8 @@ const dict = {
   "inventory.editInstance.failed": "Editing instance failed",
   "inventory.editInstance.noAttributes":
     "There are no attributes to edit. Click confirm to move into the update state",
+  "inventory.addInstance.unselectedEntity":
+    "Please select an entity to fill attributes values",
   "inventory.editInstance.header": (instanceId: string) =>
     `Change attributes of instance ${instanceId}`,
   "inventory.duplicateInstance.header": (instanceId: string) =>