From 61c6b2da434f1af42aca636834fc6bacd662867a Mon Sep 17 00:00:00 2001 From: Bentlybro Date: Thu, 14 Nov 2024 22:06:04 +0000 Subject: [PATCH 1/2] Feat(Builder/tutorial): Updates to fix tutorial --- .../frontend/src/components/tutorial.ts | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/autogpt_platform/frontend/src/components/tutorial.ts b/autogpt_platform/frontend/src/components/tutorial.ts index ddb527f22b4f..2e3d1fa8ce73 100644 --- a/autogpt_platform/frontend/src/components/tutorial.ts +++ b/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,8 +444,7 @@ 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: () => { @@ -453,7 +452,7 @@ export const startTutorial = ( 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); @@ -461,7 +460,7 @@ export const startTutorial = ( }, 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 +474,12 @@ 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(); }); }, From 89435a517a56bcf9bcb5b40780a2f5f30e66b25b Mon Sep 17 00:00:00 2001 From: Bentlybro Date: Thu, 14 Nov 2024 22:14:49 +0000 Subject: [PATCH 2/2] prettier --- .../frontend/src/components/tutorial.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/autogpt_platform/frontend/src/components/tutorial.ts b/autogpt_platform/frontend/src/components/tutorial.ts index 2e3d1fa8ce73..8b478e0a76db 100644 --- a/autogpt_platform/frontend/src/components/tutorial.ts +++ b/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-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]' + '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]', ); if (validConnectionPoint && !validConnectionPoint.contains(target)) { @@ -444,7 +444,8 @@ export const startTutorial = ( ], beforeShowPromise: () => { return waitForElement( - '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]'); + '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]', + ); }, when: { show: () => { @@ -452,7 +453,7 @@ export const startTutorial = ( resetConnectionState(); // Reset state when revisiting this step tour.modal.show(); const outputPin = document.querySelector( - '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]' + '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]', ); if (outputPin) { outputPin.addEventListener("mousedown", handleMouseDown); @@ -460,7 +461,7 @@ export const startTutorial = ( }, hide: () => { const outputPin = document.querySelector( - '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]' + '[data-testid^="rf__node-"]:first-child [data-id$="-result-source"]', ); if (outputPin) { outputPin.removeEventListener("mousedown", handleMouseDown); @@ -479,7 +480,9 @@ export const startTutorial = ( }, buttons: [], beforeShowPromise: () => { - return waitForElement('[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]').then(() => { + return waitForElement( + '[data-testid^="rf__node-"]:nth-child(2) [data-id$="-a-target"]', + ).then(() => { detectConnection(); }); },