diff --git a/src/UI/Components/Diagram/Canvas.tsx b/src/UI/Components/Diagram/Canvas.tsx index e946e0c84..5cd52fe0d 100644 --- a/src/UI/Components/Diagram/Canvas.tsx +++ b/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 = ({ 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"), diff --git a/src/UI/Components/Diagram/Context/EventWrapper.tsx b/src/UI/Components/Diagram/Context/EventWrapper.tsx index db2a620e4..e198d89d2 100644 --- a/src/UI/Components/Diagram/Context/EventWrapper.tsx +++ b/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 = ({ 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; }); diff --git a/src/UI/Components/Diagram/actions.ts b/src/UI/Components/Diagram/actions.ts index afe81ff71..90d4acdc6 100644 --- a/src/UI/Components/Diagram/actions.ts +++ b/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; diff --git a/src/UI/Components/Diagram/components/RightSidebar.tsx b/src/UI/Components/Diagram/components/RightSidebar.tsx index a493a41d0..42a606ff8 100644 --- a/src/UI/Components/Diagram/components/RightSidebar.tsx +++ b/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 = ({ editable }) => { const stencilName = model.get("stencilName"); if (stencilName) { - changeStencilElementAvailability(stencilName, "enable"); + toggleDisabledStencil(stencilName, false); } }; diff --git a/src/UI/Components/Diagram/init.ts b/src/UI/Components/Diagram/init.ts index c8fa578ea..44edd2a9c 100644 --- a/src/UI/Components/Diagram/init.ts +++ b/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 } diff --git a/src/UI/Components/Diagram/stencil/helpers.test.ts b/src/UI/Components/Diagram/stencil/helpers.test.ts index d7b6b0d82..afa44e09f 100644 --- a/src/UI/Components/Diagram/stencil/helpers.test.ts +++ b/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"); diff --git a/src/UI/Components/Diagram/stencil/helpers.ts b/src/UI/Components/Diagram/stencil/helpers.ts index 58b7f776c..9cbda01b5 100644 --- a/src/UI/Components/Diagram/stencil/helpers.ts +++ b/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); } }); }; diff --git a/src/UI/Components/Diagram/stencil/inventoryStencil.ts b/src/UI/Components/Diagram/stencil/inventoryStencil.ts index 4169cc8d3..b6b984ec2 100644 --- a/src/UI/Components/Diagram/stencil/inventoryStencil.ts +++ b/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); } }); }