Feat(Builder/tutorial): Updates to fix tutorial (#8655)

Feat(Builder/tutorial): Updates to fix tutorial

Author: Bentlybro

autogpt_platform/frontend/src/components/tutorial.ts

@@ -112,7 +112,7 @@ export const startTutorial = (
   function handleMouseUp(event: { target: any }) {
     const target = event.target;
     const validConnectionPoint = document.querySelector(
-      '[data-id="custom-node-2"] [data-handlepos="left"]',
+      '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
     );
 
     if (validConnectionPoint && !validConnectionPoint.contains(target)) {
@@ -394,7 +394,7 @@ export const startTutorial = (
     id: "copy-paste-block",
     title: "Copy and Paste the Block",
     text: "Let’s duplicate this block. Click and hold the block with your mouse, then press Ctrl+C (Cmd+C on Mac) to copy and Ctrl+V (Cmd+V on Mac) to paste.",
-    attachTo: { element: '[data-id^="custom-node-"]', on: "top" },
+    attachTo: { element: '[data-testid^="rf__node-"]', on: "top" },
     buttons: [
       {
         text: "Back",
@@ -404,7 +404,7 @@ export const startTutorial = (
     when: {
       show: () => {
         fitViewToScreen();
-        waitForElement('[data-id="custom-node-2"]').then(() => {
+        waitForElement('[data-testid^="rf__node-"]:nth-child(2)').then(() => {
           tour.next();
         });
       },
@@ -415,9 +415,9 @@ export const startTutorial = (
     id: "focus-second-block",
     title: "Focus on the New Block",
     text: "This is your copied Calculator Block. Now, let’s move it to the side of the first block.",
-    attachTo: { element: `[data-id^="custom-node-"][data-id$="2"]`, on: "top" },
+    attachTo: { element: '[data-testid^="rf__node-"]:nth-child(2)', on: "top" },
     beforeShowPromise: () =>
-      waitForElement('[data-id^="custom-node-"][data-id$="2"]'),
+      waitForElement('[data-testid^="rf__node-"]:nth-child(2)'),
     buttons: [
       {
         text: "Next",
@@ -432,7 +432,7 @@ export const startTutorial = (
     text: "Now, let's connect the output of the first Calculator Block to the input of the second Calculator Block. Drag from the output pin of the first block to the input pin (A) of the second block.",
     attachTo: {
       element:
-        '[data-id^="1-"][data-id$="-result-source"]:not([data-id="1-2-result-source"])',
+        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
       on: "bottom",
     },
 
@@ -444,24 +444,24 @@ export const startTutorial = (
     ],
     beforeShowPromise: () => {
       return waitForElement(
-        '[data-id^="1-"][data-id$="-result-source"]:not([data-id="1-2-result-source"])',
-      ).then(() => {});
+        '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
+      );
     },
     when: {
       show: () => {
         fitViewToScreen();
         resetConnectionState(); // Reset state when revisiting this step
         tour.modal.show();
         const outputPin = document.querySelector(
-          '[data-id^="1-"][data-id$="-result-source"]:not([data-id="1-2-result-source"])',
+          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
         );
         if (outputPin) {
           outputPin.addEventListener("mousedown", handleMouseDown);
         }
       },
       hide: () => {
         const outputPin = document.querySelector(
-          '[data-id^="1-"][data-id$="-result-source"]:not([data-id="1-2-result-source"])',
+          '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]',
         );
         if (outputPin) {
           outputPin.removeEventListener("mousedown", handleMouseDown);
@@ -475,12 +475,14 @@ export const startTutorial = (
     title: "Connect the Blocks: Input",
     text: "Now, connect the output to the input pin of the second block (A).",
     attachTo: {
-      element: '[data-id="1-2-a-target"]',
+      element: '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
       on: "top",
     },
     buttons: [],
     beforeShowPromise: () => {
-      return waitForElement('[data-id="1-2-a-target"]').then(() => {
+      return waitForElement(
+        '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]',
+      ).then(() => {
         detectConnection();
       });
     },