Change information in the Composer's Form Modal to be more adequate w…

…hen 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

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}}"

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",

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>
         )}

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);
     },

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,

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) =>