From 285753211da3b18946efde34cae75c4475617991 Mon Sep 17 00:00:00 2001
From: "Ricardo M." <lordrip@gmail.com>
Date: Mon, 22 Jul 2024 20:47:04 +0000
Subject: [PATCH] fix(test): Update broken tests

---
 .../Form/dataFormat/DataFormatEditor.test.tsx |   6 +-
 .../loadBalancer/LoadBalancerEditor.test.tsx  |   6 +-
 .../Visualization/Canvas/CanvasForm.test.tsx  |   8 +-
 .../Canvas/__snapshots__/Canvas.test.tsx.snap | 606 +++++++++---------
 4 files changed, 325 insertions(+), 301 deletions(-)

diff --git a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx
index 92382ade0..95a84bfe3 100644
--- a/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx
+++ b/packages/ui/src/components/Form/dataFormat/DataFormatEditor.test.tsx
@@ -47,7 +47,7 @@ describe('DataFormatEditor', () => {
 
   it('should render', async () => {
     render(<DataFormatEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -59,7 +59,7 @@ describe('DataFormatEditor', () => {
 
   it('should filter candidates with a text input', async () => {
     render(<DataFormatEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -75,7 +75,7 @@ describe('DataFormatEditor', () => {
 
   it('should clear filter and close the dropdown with close button', async () => {
     render(<DataFormatEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
diff --git a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx
index 179d8a4d6..0f353dc22 100644
--- a/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx
+++ b/packages/ui/src/components/Form/loadBalancer/LoadBalancerEditor.test.tsx
@@ -48,7 +48,7 @@ describe('LoadBalancerEditor', () => {
 
   it('should render', async () => {
     render(<LoadBalancerEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -62,7 +62,7 @@ describe('LoadBalancerEditor', () => {
 
   it('should filter candidates with a text input', async () => {
     render(<LoadBalancerEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
@@ -78,7 +78,7 @@ describe('LoadBalancerEditor', () => {
 
   it('should clear filter and close the dropdown with close button', async () => {
     render(<LoadBalancerEditor selectedNode={mockNode} />);
-    const buttons = screen.getAllByRole('button', { name: 'Menu toggle' });
+    const buttons = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
     await act(async () => {
       fireEvent.click(buttons[0]);
     });
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx
index ea30cc14c..20f36e30d 100644
--- a/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/CanvasForm.test.tsx
@@ -440,7 +440,7 @@ describe('CanvasForm', () => {
           </VisibleFlowsProvider>
         </EntitiesContext.Provider>,
       );
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });
@@ -497,7 +497,7 @@ describe('CanvasForm', () => {
       expect(camelRoute.from.steps[0].marshal!.avro).toBeUndefined();
       expect(camelRoute.from.steps[0].marshal!.id).toEqual('modified');
 
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });
@@ -546,7 +546,7 @@ describe('CanvasForm', () => {
           </VisibleFlowsProvider>
         </EntitiesContext.Provider>,
       );
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });
@@ -603,7 +603,7 @@ describe('CanvasForm', () => {
       expect(camelRoute.from.steps[0].loadBalance!.weighted).toBeUndefined();
       expect(camelRoute.from.steps[0].loadBalance!.id).toEqual('modified');
 
-      const button = screen.getAllByRole('button', { name: 'Menu toggle' });
+      const button = screen.getAllByRole('button', { name: 'Typeahead menu toggle' });
       await act(async () => {
         fireEvent.click(button[0]);
       });
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
index 5c1baf688..9ea86a136 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
+++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -747,6 +747,103 @@ exports[`Canvas should render correctly 1`] = `
                                 y="-60"
                               />
                             </g>
+                            <g>
+                              <g
+                                class="pf-topology__group__label"
+                                transform="translate(NaN, 159)"
+                              >
+                                <rect
+                                  class="pf-topology__node__label__background"
+                                  height="NaN"
+                                  rx="4"
+                                  ry="4"
+                                  width="NaN"
+                                  x="0"
+                                  y="0"
+                                />
+                                <text
+                                  dy="0.35em"
+                                  x="8"
+                                  y="NaN"
+                                >
+                                  route-8888
+                                </text>
+                                <line
+                                  class="pf-topology__node__separator"
+                                  shape-rendering="crispEdges"
+                                  x1="NaN"
+                                  x2="NaN"
+                                  y1="0"
+                                  y2="NaN"
+                                />
+                                <g
+                                  class="pf-topology__node__action-icon"
+                                >
+                                  <rect
+                                    class="pf-topology__node__action-icon__background"
+                                    height="NaN"
+                                    width="16"
+                                    x="NaN"
+                                    y="0"
+                                  />
+                                  <g
+                                    class="pf-topology__node__action-icon__icon"
+                                    transform="translate(NaN, NaN)"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="pf-v5-svg"
+                                      fill="currentColor"
+                                      height="1em"
+                                      role="img"
+                                      viewBox="0 0 448 512"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"
+                                      />
+                                    </svg>
+                                  </g>
+                                </g>
+                                <line
+                                  class="pf-topology__node__separator"
+                                  shape-rendering="crispEdges"
+                                  x1="NaN"
+                                  x2="NaN"
+                                  y1="0"
+                                  y2="NaN"
+                                />
+                                <g
+                                  class="pf-topology__node__action-icon"
+                                >
+                                  <rect
+                                    class="pf-topology__node__action-icon__background"
+                                    height="NaN"
+                                    width="16"
+                                    x="NaN"
+                                    y="0"
+                                  />
+                                  <g
+                                    class="pf-topology__node__action-icon__icon"
+                                    transform="translate(NaN, NaN)"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="pf-v5-svg"
+                                      fill="currentColor"
+                                      height="1em"
+                                      role="img"
+                                      viewBox="0 0 192 512"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                      />
+                                    </svg>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
                           </g>
                         </g>
                         <g
@@ -756,6 +853,7 @@ exports[`Canvas should render correctly 1`] = `
                             data-id="timer-1234-to-set-header-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -788,6 +886,7 @@ exports[`Canvas should render correctly 1`] = `
                             data-id="set-header-1234-to-choice-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -820,6 +919,7 @@ exports[`Canvas should render correctly 1`] = `
                             data-id="choice-1234-to-when-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -852,6 +952,7 @@ exports[`Canvas should render correctly 1`] = `
                             data-id="when-1234-to-log-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -884,6 +985,7 @@ exports[`Canvas should render correctly 1`] = `
                             data-id="choice-1234-to-otherwise-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -916,6 +1018,7 @@ exports[`Canvas should render correctly 1`] = `
                             data-id="otherwise-1234-to-amqp-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -948,6 +1051,7 @@ exports[`Canvas should render correctly 1`] = `
                             data-id="log-1234-to-direct-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -984,103 +1088,7 @@ exports[`Canvas should render correctly 1`] = `
                             <g>
                               <g
                                 class="pf-topology__group"
-                              >
-                                <g
-                                  class="pf-topology__group__label"
-                                  transform="translate(NaN, 159)"
-                                >
-                                  <rect
-                                    class="pf-topology__node__label__background"
-                                    height="NaN"
-                                    rx="4"
-                                    ry="4"
-                                    width="NaN"
-                                    x="0"
-                                    y="0"
-                                  />
-                                  <text
-                                    dy="0.35em"
-                                    x="8"
-                                    y="NaN"
-                                  >
-                                    route-8888
-                                  </text>
-                                  <line
-                                    class="pf-topology__node__separator"
-                                    shape-rendering="crispEdges"
-                                    x1="NaN"
-                                    x2="NaN"
-                                    y1="0"
-                                    y2="NaN"
-                                  />
-                                  <g
-                                    class="pf-topology__node__action-icon"
-                                  >
-                                    <rect
-                                      class="pf-topology__node__action-icon__background"
-                                      height="NaN"
-                                      width="16"
-                                      x="NaN"
-                                      y="0"
-                                    />
-                                    <g
-                                      class="pf-topology__node__action-icon__icon"
-                                      transform="translate(NaN, NaN)"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="pf-v5-svg"
-                                        fill="currentColor"
-                                        height="1em"
-                                        role="img"
-                                        viewBox="0 0 448 512"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"
-                                        />
-                                      </svg>
-                                    </g>
-                                  </g>
-                                  <line
-                                    class="pf-topology__node__separator"
-                                    shape-rendering="crispEdges"
-                                    x1="NaN"
-                                    x2="NaN"
-                                    y1="0"
-                                    y2="NaN"
-                                  />
-                                  <g
-                                    class="pf-topology__node__action-icon"
-                                  >
-                                    <rect
-                                      class="pf-topology__node__action-icon__background"
-                                      height="NaN"
-                                      width="16"
-                                      x="NaN"
-                                      y="0"
-                                    />
-                                    <g
-                                      class="pf-topology__node__action-icon__icon"
-                                      transform="translate(NaN, NaN)"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="pf-v5-svg"
-                                        fill="currentColor"
-                                        height="1em"
-                                        role="img"
-                                        viewBox="0 0 192 512"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                        />
-                                      </svg>
-                                    </g>
-                                  </g>
-                                </g>
-                              </g>
+                              />
                             </g>
                             <g
                               data-id="timer-1234"
@@ -1448,6 +1456,103 @@ exports[`Canvas should render correctly with more routes  1`] = `
                                 y="-60"
                               />
                             </g>
+                            <g>
+                              <g
+                                class="pf-topology__group__label"
+                                transform="translate(NaN, 159)"
+                              >
+                                <rect
+                                  class="pf-topology__node__label__background"
+                                  height="NaN"
+                                  rx="4"
+                                  ry="4"
+                                  width="NaN"
+                                  x="0"
+                                  y="0"
+                                />
+                                <text
+                                  dy="0.35em"
+                                  x="8"
+                                  y="NaN"
+                                >
+                                  route-8888
+                                </text>
+                                <line
+                                  class="pf-topology__node__separator"
+                                  shape-rendering="crispEdges"
+                                  x1="NaN"
+                                  x2="NaN"
+                                  y1="0"
+                                  y2="NaN"
+                                />
+                                <g
+                                  class="pf-topology__node__action-icon"
+                                >
+                                  <rect
+                                    class="pf-topology__node__action-icon__background"
+                                    height="NaN"
+                                    width="16"
+                                    x="NaN"
+                                    y="0"
+                                  />
+                                  <g
+                                    class="pf-topology__node__action-icon__icon"
+                                    transform="translate(NaN, NaN)"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="pf-v5-svg"
+                                      fill="currentColor"
+                                      height="1em"
+                                      role="img"
+                                      viewBox="0 0 448 512"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"
+                                      />
+                                    </svg>
+                                  </g>
+                                </g>
+                                <line
+                                  class="pf-topology__node__separator"
+                                  shape-rendering="crispEdges"
+                                  x1="NaN"
+                                  x2="NaN"
+                                  y1="0"
+                                  y2="NaN"
+                                />
+                                <g
+                                  class="pf-topology__node__action-icon"
+                                >
+                                  <rect
+                                    class="pf-topology__node__action-icon__background"
+                                    height="NaN"
+                                    width="16"
+                                    x="NaN"
+                                    y="0"
+                                  />
+                                  <g
+                                    class="pf-topology__node__action-icon__icon"
+                                    transform="translate(NaN, NaN)"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="pf-v5-svg"
+                                      fill="currentColor"
+                                      height="1em"
+                                      role="img"
+                                      viewBox="0 0 192 512"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                      />
+                                    </svg>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
                           </g>
                         </g>
                         <g
@@ -1457,6 +1562,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             data-id="timer-1234-to-set-header-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -1489,6 +1595,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             data-id="set-header-1234-to-choice-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -1521,6 +1628,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             data-id="choice-1234-to-when-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -1553,6 +1661,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             data-id="when-1234-to-log-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -1585,6 +1694,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             data-id="choice-1234-to-otherwise-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -1617,6 +1727,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             data-id="otherwise-1234-to-amqp-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -1649,6 +1760,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             data-id="log-1234-to-direct-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -1685,103 +1797,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             <g>
                               <g
                                 class="pf-topology__group"
-                              >
-                                <g
-                                  class="pf-topology__group__label"
-                                  transform="translate(NaN, 159)"
-                                >
-                                  <rect
-                                    class="pf-topology__node__label__background"
-                                    height="NaN"
-                                    rx="4"
-                                    ry="4"
-                                    width="NaN"
-                                    x="0"
-                                    y="0"
-                                  />
-                                  <text
-                                    dy="0.35em"
-                                    x="8"
-                                    y="NaN"
-                                  >
-                                    route-8888
-                                  </text>
-                                  <line
-                                    class="pf-topology__node__separator"
-                                    shape-rendering="crispEdges"
-                                    x1="NaN"
-                                    x2="NaN"
-                                    y1="0"
-                                    y2="NaN"
-                                  />
-                                  <g
-                                    class="pf-topology__node__action-icon"
-                                  >
-                                    <rect
-                                      class="pf-topology__node__action-icon__background"
-                                      height="NaN"
-                                      width="16"
-                                      x="NaN"
-                                      y="0"
-                                    />
-                                    <g
-                                      class="pf-topology__node__action-icon__icon"
-                                      transform="translate(NaN, NaN)"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="pf-v5-svg"
-                                        fill="currentColor"
-                                        height="1em"
-                                        role="img"
-                                        viewBox="0 0 448 512"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"
-                                        />
-                                      </svg>
-                                    </g>
-                                  </g>
-                                  <line
-                                    class="pf-topology__node__separator"
-                                    shape-rendering="crispEdges"
-                                    x1="NaN"
-                                    x2="NaN"
-                                    y1="0"
-                                    y2="NaN"
-                                  />
-                                  <g
-                                    class="pf-topology__node__action-icon"
-                                  >
-                                    <rect
-                                      class="pf-topology__node__action-icon__background"
-                                      height="NaN"
-                                      width="16"
-                                      x="NaN"
-                                      y="0"
-                                    />
-                                    <g
-                                      class="pf-topology__node__action-icon__icon"
-                                      transform="translate(NaN, NaN)"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="pf-v5-svg"
-                                        fill="currentColor"
-                                        height="1em"
-                                        role="img"
-                                        viewBox="0 0 192 512"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                        />
-                                      </svg>
-                                    </g>
-                                  </g>
-                                </g>
-                              </g>
+                              />
                             </g>
                             <g
                               data-id="timer-1234"
@@ -2149,6 +2165,103 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                                 y="-60"
                               />
                             </g>
+                            <g>
+                              <g
+                                class="pf-topology__group__label"
+                                transform="translate(NaN, 159)"
+                              >
+                                <rect
+                                  class="pf-topology__node__label__background"
+                                  height="NaN"
+                                  rx="4"
+                                  ry="4"
+                                  width="NaN"
+                                  x="0"
+                                  y="0"
+                                />
+                                <text
+                                  dy="0.35em"
+                                  x="8"
+                                  y="NaN"
+                                >
+                                  route-8888
+                                </text>
+                                <line
+                                  class="pf-topology__node__separator"
+                                  shape-rendering="crispEdges"
+                                  x1="NaN"
+                                  x2="NaN"
+                                  y1="0"
+                                  y2="NaN"
+                                />
+                                <g
+                                  class="pf-topology__node__action-icon"
+                                >
+                                  <rect
+                                    class="pf-topology__node__action-icon__background"
+                                    height="NaN"
+                                    width="16"
+                                    x="NaN"
+                                    y="0"
+                                  />
+                                  <g
+                                    class="pf-topology__node__action-icon__icon"
+                                    transform="translate(NaN, NaN)"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="pf-v5-svg"
+                                      fill="currentColor"
+                                      height="1em"
+                                      role="img"
+                                      viewBox="0 0 448 512"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"
+                                      />
+                                    </svg>
+                                  </g>
+                                </g>
+                                <line
+                                  class="pf-topology__node__separator"
+                                  shape-rendering="crispEdges"
+                                  x1="NaN"
+                                  x2="NaN"
+                                  y1="0"
+                                  y2="NaN"
+                                />
+                                <g
+                                  class="pf-topology__node__action-icon"
+                                >
+                                  <rect
+                                    class="pf-topology__node__action-icon__background"
+                                    height="NaN"
+                                    width="16"
+                                    x="NaN"
+                                    y="0"
+                                  />
+                                  <g
+                                    class="pf-topology__node__action-icon__icon"
+                                    transform="translate(NaN, NaN)"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="pf-v5-svg"
+                                      fill="currentColor"
+                                      height="1em"
+                                      role="img"
+                                      viewBox="0 0 192 512"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                      />
+                                    </svg>
+                                  </g>
+                                </g>
+                              </g>
+                            </g>
                           </g>
                         </g>
                         <g
@@ -2158,6 +2271,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             data-id="timer-1234-to-set-header-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -2190,6 +2304,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             data-id="set-header-1234-to-choice-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -2222,6 +2337,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             data-id="choice-1234-to-when-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -2254,6 +2370,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             data-id="when-1234-to-log-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -2286,6 +2403,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             data-id="choice-1234-to-otherwise-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -2318,6 +2436,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             data-id="otherwise-1234-to-amqp-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -2350,6 +2469,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             data-id="log-1234-to-direct-1234"
                             data-kind="edge"
                             data-type="edge"
+                            style="z-index: 0;"
                           >
                             <g
                               class="pf-topology__edge"
@@ -2386,103 +2506,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             <g>
                               <g
                                 class="pf-topology__group"
-                              >
-                                <g
-                                  class="pf-topology__group__label"
-                                  transform="translate(NaN, 159)"
-                                >
-                                  <rect
-                                    class="pf-topology__node__label__background"
-                                    height="NaN"
-                                    rx="4"
-                                    ry="4"
-                                    width="NaN"
-                                    x="0"
-                                    y="0"
-                                  />
-                                  <text
-                                    dy="0.35em"
-                                    x="8"
-                                    y="NaN"
-                                  >
-                                    route-8888
-                                  </text>
-                                  <line
-                                    class="pf-topology__node__separator"
-                                    shape-rendering="crispEdges"
-                                    x1="NaN"
-                                    x2="NaN"
-                                    y1="0"
-                                    y2="NaN"
-                                  />
-                                  <g
-                                    class="pf-topology__node__action-icon"
-                                  >
-                                    <rect
-                                      class="pf-topology__node__action-icon__background"
-                                      height="NaN"
-                                      width="16"
-                                      x="NaN"
-                                      y="0"
-                                    />
-                                    <g
-                                      class="pf-topology__node__action-icon__icon"
-                                      transform="translate(NaN, NaN)"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="pf-v5-svg"
-                                        fill="currentColor"
-                                        height="1em"
-                                        role="img"
-                                        viewBox="0 0 448 512"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M4.686 427.314L104 328l-32.922-31.029C55.958 281.851 66.666 256 88.048 256h112C213.303 256 224 266.745 224 280v112c0 21.382-25.803 32.09-40.922 16.971L152 376l-99.314 99.314c-6.248 6.248-16.379 6.248-22.627 0L4.686 449.941c-6.248-6.248-6.248-16.379 0-22.627zM443.314 84.686L344 184l32.922 31.029c15.12 15.12 4.412 40.971-16.97 40.971h-112C234.697 256 224 245.255 224 232V120c0-21.382 25.803-32.09 40.922-16.971L296 136l99.314-99.314c6.248-6.248 16.379-6.248 22.627 0l25.373 25.373c6.248 6.248 6.248 16.379 0 22.627z"
-                                        />
-                                      </svg>
-                                    </g>
-                                  </g>
-                                  <line
-                                    class="pf-topology__node__separator"
-                                    shape-rendering="crispEdges"
-                                    x1="NaN"
-                                    x2="NaN"
-                                    y1="0"
-                                    y2="NaN"
-                                  />
-                                  <g
-                                    class="pf-topology__node__action-icon"
-                                  >
-                                    <rect
-                                      class="pf-topology__node__action-icon__background"
-                                      height="NaN"
-                                      width="16"
-                                      x="NaN"
-                                      y="0"
-                                    />
-                                    <g
-                                      class="pf-topology__node__action-icon__icon"
-                                      transform="translate(NaN, NaN)"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="pf-v5-svg"
-                                        fill="currentColor"
-                                        height="1em"
-                                        role="img"
-                                        viewBox="0 0 192 512"
-                                        width="1em"
-                                      >
-                                        <path
-                                          d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                        />
-                                      </svg>
-                                    </g>
-                                  </g>
-                                </g>
-                              </g>
+                              />
                             </g>
                             <g
                               data-id="timer-1234"