remarks + test improvement

src/UI/Components/Diagram/Canvas.tsx

@@ -8,6 +8,7 @@ import { DictModal, RightSidebar } from "./components";
 import { Validation } from "./components/Validation";
 import { createConnectionRules, createStencilState } from "./helpers";
 import { diagramInit } from "./init";
+import { ActionEnum } from "./interfaces";
 import { StencilSidebar } from "./stencil";
 import { CanvasWrapper } from "./styles";
 import { ZoomHandlerService } from "./zoomHandler";
@@ -132,7 +133,7 @@ export const Canvas: React.FC<Props> = ({ editable }) => {
           instance_id: cell.id,
           service_entity: cell.get("entityName"),
           config: {},
-          action: instance ? null : "create",
+          action: instance ? null : ActionEnum.CREATE,
           attributes: cell.get("instanceAttributes"),
           embeddedTo: cell.get("embeddedTo"),
           relatedTo: cell.get("relatedTo"),

src/UI/Components/Diagram/Context/EventWrapper.tsx

@@ -6,6 +6,7 @@ import {
   RelationCounterForCell,
 } from "../interfaces";
 import { ServiceEntityBlock } from "../shapes";
+import { toggleDisabledStencil } from "../stencil/helpers";
 import { CanvasContext } from "./Context";
 
 /**
@@ -144,25 +145,12 @@ export const EventWrapper: React.FC<React.PropsWithChildren> = ({
           break;
       }
 
-      const elements = [
-        { selector: `.body_${name}`, className: "stencil_accent-disabled" },
-        { selector: `.bodyTwo_${name}`, className: "stencil_body-disabled" },
-        { selector: `.text_${name}`, className: "stencil_text-disabled" },
-      ];
-
       const shouldDisable =
         stencil.max !== null &&
         stencil.max !== undefined &&
         stencil.current >= stencil.max;
 
-      // As in the docstrings mentioned, If the current count of the instances created from given stencil is more than or equal to the max count, disable the stencil of given embedded entity
-      elements.forEach(({ selector, className }) => {
-        const element = document.querySelector(selector);
-
-        if (element) {
-          element.classList.toggle(className, shouldDisable);
-        }
-      });
+      toggleDisabledStencil(name, shouldDisable);
 
       return stencilStateCopy;
     });

src/UI/Components/Diagram/actions.ts

@@ -23,7 +23,7 @@ import {
   relationId,
 } from "./interfaces";
 import { Link, ServiceEntityBlock } from "./shapes";
-import { changeStencilElementAvailability } from "./stencil/helpers";
+import { toggleDisabledStencil } from "./stencil/helpers";
 
 /**
  * Function that creates, appends and returns created Entity
@@ -217,10 +217,7 @@ export function appendInstance(
           isBlockedFromEditing,
         );
 
-        changeStencilElementAvailability(
-          appendedInstances[0].get("stencilName"),
-          "disable",
-        );
+        toggleDisabledStencil(appendedInstances[0].get("stencilName"), true);
       } else {
         //If cell is already in the graph, we need to check if it got in its inter-service relations the one with id that corresponds with created instanceAsTable
         let isConnected = false;

src/UI/Components/Diagram/components/RightSidebar.tsx

@@ -13,7 +13,7 @@ import { words } from "@/UI/words";
 import { CanvasContext, InstanceComposerContext } from "../Context/Context";
 import { updateServiceOrderItems } from "../helpers";
 import { ActionEnum, EventActionEnum } from "../interfaces";
-import { changeStencilElementAvailability } from "../stencil/helpers";
+import { toggleDisabledStencil } from "../stencil/helpers";
 import { EntityForm } from "./EntityForm";
 
 interface Props {
@@ -105,7 +105,7 @@ export const RightSidebar: React.FC<Props> = ({ editable }) => {
     const stencilName = model.get("stencilName");
 
     if (stencilName) {
-      changeStencilElementAvailability(stencilName, "enable");
+      toggleDisabledStencil(stencilName, false);
     }
   };
 

src/UI/Components/Diagram/init.ts

@@ -20,7 +20,7 @@ import {
 } from "./interfaces";
 import { ComposerPaper } from "./paper";
 import { ServiceEntityBlock } from "./shapes";
-import { changeStencilElementAvailability } from "./stencil/helpers";
+import { toggleDisabledStencil } from "./stencil/helpers";
 
 /**
  * Initializes the diagram.
@@ -134,7 +134,7 @@ export function diagramInit(
           }
 
           if (stencilName) {
-            changeStencilElementAvailability(stencilName, "disable");
+            toggleDisabledStencil(stencilName, true);
           }
           cell.set("items", copy.items); // converted cells lacks "items" attribute
         }

src/UI/Components/Diagram/stencil/helpers.test.ts

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
 import { containerModel, testApiInstanceModel } from "../Mocks";
 import {
-  changeStencilElementAvailability,
+  toggleDisabledStencil,
   createStencilElement,
   transformEmbeddedToStencilElements,
 } from "./helpers";
@@ -12,6 +12,7 @@ describe("createStencilElement", () => {
       "default",
       containerModel.embedded_entities[0],
       {
+        id: "123",
         attrOne: "test_value",
         attrTwo: "other_test_value",
       },
@@ -31,6 +32,7 @@ describe("createStencilElement", () => {
     ).toStrictEqual({
       attrOne: "test_value",
       attrTwo: "other_test_value",
+      id: "123",
     });
     expect(embeddedElementWithModel.attributes.attrs?.body).toStrictEqual({
       width: 7,
@@ -61,6 +63,23 @@ describe("createStencilElement", () => {
       textVerticalAnchor: "middle",
       fill: "#333333",
     });
+
+    //check difference with body fill for non-embedded
+    const nonEmbedded = createStencilElement("nonEmbedded", containerModel, {
+      attrOne: "test_value",
+      attrTwo: "other_test_value",
+    });
+
+    expect(nonEmbedded.attributes.attrs?.body).toStrictEqual({
+      width: 7,
+      height: 40,
+      x: 233,
+      d: "M 0 0 H calc(w) V calc(h) H 0 Z",
+      strokeWidth: 2,
+      fill: "var(--pf-v5-global--palette--purple-500)",
+      stroke: "none",
+      class: "body_nonEmbedded",
+    });
   });
 });
 
@@ -108,7 +127,7 @@ describe("transformEmbeddedToStencilElements", () => {
   });
 });
 
-describe("changeStencilElementAvailability", () => {
+describe("toggleDisabledStencil", () => {
   const setup = (name: string, disabled: boolean) => {
     const elementsInfo = [
       [`body_${name}`, "stencil_accent-disabled"],
@@ -136,7 +155,39 @@ describe("changeStencilElementAvailability", () => {
     document.body.innerHTML = "";
   });
 
-  it("disables the stencil elements", () => {
+  it("without force set it toggles the stencil elements", () => {
+    setup("test", false);
+
+    expect(screen.getByTestId("test-0")).not.toHaveClass(
+      "stencil_accent-disabled",
+    );
+    expect(screen.getByTestId("test-1")).not.toHaveClass(
+      "stencil_body-disabled",
+    );
+    expect(screen.getByTestId("test-2")).not.toHaveClass(
+      "stencil_text-disabled",
+    );
+
+    toggleDisabledStencil("test");
+
+    expect(screen.getByTestId("test-0")).toHaveClass("stencil_accent-disabled");
+    expect(screen.getByTestId("test-1")).toHaveClass("stencil_body-disabled");
+    expect(screen.getByTestId("test-2")).toHaveClass("stencil_text-disabled");
+
+    toggleDisabledStencil("test");
+
+    expect(screen.getByTestId("test-0")).not.toHaveClass(
+      "stencil_accent-disabled",
+    );
+    expect(screen.getByTestId("test-1")).not.toHaveClass(
+      "stencil_body-disabled",
+    );
+    expect(screen.getByTestId("test-2")).not.toHaveClass(
+      "stencil_text-disabled",
+    );
+  });
+
+  it("with force set to false it disables the stencil elements", () => {
     setup("test", false);
 
     expect(screen.getByTestId("test-0")).not.toHaveClass(
@@ -149,21 +200,21 @@ describe("changeStencilElementAvailability", () => {
       "stencil_text-disabled",
     );
 
-    changeStencilElementAvailability("test", "disable");
+    toggleDisabledStencil("test", true);
 
     expect(screen.getByTestId("test-0")).toHaveClass("stencil_accent-disabled");
     expect(screen.getByTestId("test-1")).toHaveClass("stencil_body-disabled");
     expect(screen.getByTestId("test-2")).toHaveClass("stencil_text-disabled");
   });
 
-  it("enables the stencil elements", () => {
+  it("with force set to true it enables the stencil elements", () => {
     setup("test", true);
 
     expect(screen.getByTestId("test-0")).toHaveClass("stencil_accent-disabled");
     expect(screen.getByTestId("test-1")).toHaveClass("stencil_body-disabled");
     expect(screen.getByTestId("test-2")).toHaveClass("stencil_text-disabled");
 
-    changeStencilElementAvailability("test", "enable");
+    toggleDisabledStencil("test", false);
 
     expect(screen.getByTestId("test-0")).not.toHaveClass(
       "stencil_accent-disabled",
@@ -176,7 +227,7 @@ describe("changeStencilElementAvailability", () => {
     );
   });
 
-  it("if we try to enable the enabled stencil elements nothing happens", () => {
+  it("with force set to false if we try to enable the enabled stencil elements nothing happens", () => {
     setup("test", false);
 
     expect(screen.getByTestId("test-0")).not.toHaveClass(
@@ -189,7 +240,7 @@ describe("changeStencilElementAvailability", () => {
       "stencil_text-disabled",
     );
 
-    changeStencilElementAvailability("test", "enable");
+    toggleDisabledStencil("test", false);
 
     expect(screen.getByTestId("test-0")).not.toHaveClass(
       "stencil_accent-disabled",
@@ -202,14 +253,14 @@ describe("changeStencilElementAvailability", () => {
     );
   });
 
-  it("if we try to disable the disabled stencil elements nothing happens", () => {
+  it("with force set to true if we try to disable the disabled stencil elements nothing happens", () => {
     setup("test", true);
 
     expect(screen.getByTestId("test-0")).toHaveClass("stencil_accent-disabled");
     expect(screen.getByTestId("test-1")).toHaveClass("stencil_body-disabled");
     expect(screen.getByTestId("test-2")).toHaveClass("stencil_text-disabled");
 
-    changeStencilElementAvailability("test", "disable");
+    toggleDisabledStencil("test", true);
 
     expect(screen.getByTestId("test-0")).toHaveClass("stencil_accent-disabled");
     expect(screen.getByTestId("test-1")).toHaveClass("stencil_body-disabled");

src/UI/Components/Diagram/stencil/helpers.ts

@@ -114,13 +114,13 @@ export const createStencilElement = (
  * This function enables or disables stencil elements for an inter-service relation instance by toggling specific CSS classes.
  *
  * @param {string} stencilName - The name of the stencil.
- * @param {"enable" | "disable"} action - The action to perform, either "enable" or "disable".
+ * @param {boolean} force - if force is true, adds the disabled className . If force is false, removes disabled className
  *
  * @returns {void}
  */
-export const changeStencilElementAvailability = (
+export const toggleDisabledStencil = (
   stencilName: string,
-  action: "enable" | "disable",
+  force?: boolean,
 ): void => {
   //disable Inventory Stencil for inter-service relation instance
   const elements = [
@@ -142,7 +142,7 @@ export const changeStencilElementAvailability = (
     const element = document.querySelector(selector);
 
     if (element) {
-      element.classList.toggle(className, action === "disable");
+      element.classList.toggle(className, force);
     }
   });
 };

src/UI/Components/Diagram/stencil/inventoryStencil.ts

@@ -3,10 +3,7 @@ import { global_palette_white } from "@patternfly/react-tokens";
 import { ServiceModel } from "@/Core";
 import { Inventories } from "@/Data/Managers/V2/GETTERS/GetInventoryList";
 import { createComposerEntity } from "../actions";
-import {
-  changeStencilElementAvailability,
-  createStencilElement,
-} from "./helpers";
+import { toggleDisabledStencil, createStencilElement } from "./helpers";
 
 const GRID_SIZE = 8;
 const PADDING_S = GRID_SIZE;
@@ -126,7 +123,7 @@ export class InventoryStencilTab {
       const stencilName = elementView.model.get("stencilName");
 
       if (stencilName) {
-        changeStencilElementAvailability(stencilName, "disable");
+        toggleDisabledStencil(stencilName, true);
       }
     });
   }