From e0a20975572e06e278151659941f6fae254b974d Mon Sep 17 00:00:00 2001
From: Mateusz Borowczyk <mateusz.borowczyk@inmanta.com>
Date: Wed, 4 Dec 2024 15:26:45 +0100
Subject: [PATCH] Resolve white spaces issue

---
 .../unreleased/6087-white-spaces-stencil.yml  |  4 ++++
 .../Diagram/stencil/helpers.test.ts           | 22 +++++++++----------
 src/UI/Components/Diagram/stencil/helpers.ts  | 12 +++++-----
 3 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 changelogs/unreleased/6087-white-spaces-stencil.yml

diff --git a/changelogs/unreleased/6087-white-spaces-stencil.yml b/changelogs/unreleased/6087-white-spaces-stencil.yml
new file mode 100644
index 000000000..d140f34d4
--- /dev/null
+++ b/changelogs/unreleased/6087-white-spaces-stencil.yml
@@ -0,0 +1,4 @@
+description: Change stencil names to aria-labels to avoid issue with class names not handling white spaces
+issue-nr: 6087
+change-type: patch
+destination-branches: [master]
diff --git a/src/UI/Components/Diagram/stencil/helpers.test.ts b/src/UI/Components/Diagram/stencil/helpers.test.ts
index d24f0f23e..27bb0e630 100644
--- a/src/UI/Components/Diagram/stencil/helpers.test.ts
+++ b/src/UI/Components/Diagram/stencil/helpers.test.ts
@@ -39,20 +39,20 @@ describe("createStencilElement", () => {
     expect(embeddedElementWithModel.attributes.attrs?.body?.fill).toEqual(
       "var(--pf-v5-global--palette--blue-400)",
     );
-    expect(embeddedElementWithModel.attributes.attrs?.body?.class).toEqual(
-      "body_default",
-    );
+    expect(
+      embeddedElementWithModel.attributes.attrs?.body?.["aria-labelledby"],
+    ).toEqual("body_default");
 
     expect(embeddedElementWithModel.attributes.attrs?.bodyTwo?.fill).toEqual(
       "var(--pf-v5-global--palette--white)",
     );
-    expect(embeddedElementWithModel.attributes.attrs?.bodyTwo?.class).toEqual(
-      "bodyTwo_default",
-    );
+    expect(
+      embeddedElementWithModel.attributes.attrs?.bodyTwo?.["aria-labelledby"],
+    ).toEqual("bodyTwo_default");
 
-    expect(embeddedElementWithModel.attributes.attrs?.label?.class).toEqual(
-      "text_default",
-    );
+    expect(
+      embeddedElementWithModel.attributes.attrs?.label?.["aria-labelledby"],
+    ).toEqual("text_default");
     expect(
       embeddedElementWithModel.attributes.attrs?.borderTop?.height,
     ).toEqual(1);
@@ -66,7 +66,7 @@ describe("createStencilElement", () => {
     expect(nonEmbedded.attributes.attrs?.body?.fill).toEqual(
       "var(--pf-v5-global--palette--purple-500)",
     );
-    expect(nonEmbedded.attributes.attrs?.body?.class).toEqual(
+    expect(nonEmbedded.attributes.attrs?.body?.["aria-labelledby"]).toEqual(
       "body_nonEmbedded",
     );
     expect(nonEmbedded.attributes.attrs?.borderTop?.height).toEqual(0);
@@ -128,8 +128,8 @@ describe("toggleDisabledStencil", () => {
     const elements = elementsInfo.map((element, index) => {
       const div = document.createElement("div");
 
-      div.classList.add(element[0]);
       div.setAttribute("data-testid", `${name}-${index}`);
+      div.setAttribute("aria-labelledby", element[0]);
 
       if (disabled) {
         div.classList.add(element[1]);
diff --git a/src/UI/Components/Diagram/stencil/helpers.ts b/src/UI/Components/Diagram/stencil/helpers.ts
index 97e8b1d60..e37ab91be 100644
--- a/src/UI/Components/Diagram/stencil/helpers.ts
+++ b/src/UI/Components/Diagram/stencil/helpers.ts
@@ -72,7 +72,7 @@ export const createStencilElement = (
     id,
     attrs: {
       body: {
-        class: "body_" + name,
+        "aria-labelledby": "body_" + name,
         width: 7,
         height: 40,
         x: 233,
@@ -80,14 +80,14 @@ export const createStencilElement = (
         stroke: "none",
       },
       bodyTwo: {
-        class: "bodyTwo_" + name,
+        "aria-labelledby": "bodyTwo_" + name,
         width: 240,
         height: 40,
         fill: global_palette_white.var,
         stroke: "none",
       },
       label: {
-        class: "text_" + name,
+        "aria-labelledby": "text_" + name,
         refX: undefined, // reset the default
         x: "10",
         textAnchor: "start",
@@ -154,15 +154,15 @@ export const toggleDisabledStencil = (
   //disable Inventory Stencil for inter-service relation instance
   const elements = [
     {
-      selector: `.body_${stencilName}`,
+      selector: `[aria-labelledby="body_${stencilName}"]`,
       className: "stencil_accent-disabled",
     },
     {
-      selector: `.bodyTwo_${stencilName}`,
+      selector: `[aria-labelledby="bodyTwo_${stencilName}"]`,
       className: "stencil_body-disabled",
     },
     {
-      selector: `.text_${stencilName}`,
+      selector: `[aria-labelledby="text_${stencilName}"]`,
       className: "stencil_text-disabled",
     },
   ];