Skip to content

Commit

Permalink
Feat(Builder/tutorial): Updates to fix tutorial (#8655)
Browse files Browse the repository at this point in the history
Feat(Builder/tutorial): Updates to fix tutorial
  • Loading branch information
Bentlybro authored Nov 14, 2024
1 parent dd0081a commit e140873
Showing 1 changed file with 14 additions and 12 deletions.
26 changes: 14 additions & 12 deletions autogpt_platform/frontend/src/components/tutorial.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -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",
Expand All @@ -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();
});
},
Expand All @@ -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",
Expand All @@ -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",
},

Expand All @@ -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);
Expand All @@ -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();
});
},
Expand Down

0 comments on commit e140873

Please sign in to comment.