Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Nov 14, 2024
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
61c6b2d
Feat(Builder/tutorial): Updates to fix tutorial
Bentlybro Nov 14, 2024
89435a5
prettier
Bentlybro Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 14 additions & 12 deletions autogpt_platform/frontend/src/components/tutorial.ts
View file
Open in desktop
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
Loading