diff --git a/src/routes/v2/pages/Editor/components/ArgumentRow/ArgumentRow.tsx b/src/routes/v2/pages/Editor/components/ArgumentRow/ArgumentRow.tsx
index c51524aaf..52b9de2f5 100644
--- a/src/routes/v2/pages/Editor/components/ArgumentRow/ArgumentRow.tsx
+++ b/src/routes/v2/pages/Editor/components/ArgumentRow/ArgumentRow.tsx
@@ -165,7 +165,12 @@ export const ArgumentRow = observer(function ArgumentRow({
const typeLabel = typeSpecToString(inputSpec.type);
return (
-
+
{
+ if (!isOpen) return undefined;
+ if (!libraryDragAllow) return undefined;
+ const allow = libraryDragAllow.toLowerCase();
+ const handleDragStart = (event: DragEvent) => {
+ const target = event.target as Element | null;
+ if (!target?.closest('[data-dock-window-content="component-library"]')) {
+ return;
+ }
+ const item =
+ target.querySelector("[data-component-name]") ??
+ target.closest("[data-component-name]");
+ if (!item) return;
+ const name = (
+ item.getAttribute("data-component-name") ?? ""
+ ).toLowerCase();
+ if (!name.includes(allow)) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ };
+ document.addEventListener("dragstart", handleDragStart, true);
+ return () => {
+ document.removeEventListener("dragstart", handleDragStart, true);
+ };
+ }, [isOpen, libraryDragAllow]);
+
+ // Steps that bring the user back to the component library after a search
+ // can flip a flag to clear the search input so folder navigation works
+ // again. We update the input via the native setter so React's onChange
+ // handler picks up the change and the parent's filter state resets.
+ //
+ // The search component debounces its state by ~200ms, and reactour's
+ // mutationObservables only check direct mutation.addedNodes — when the
+ // folder tree remounts as a unit, the wrapper is added but its descendant
+ // [data-folder-name] items aren't seen as added nodes. So after the reset
+ // we poll for the folder tree to come back, then bump reactour via
+ // setSteps to force a re-render and a fresh querySelector on step.selector.
+ const stepSelector = step?.selector;
+ useEffect(() => {
+ if (!isOpen) return;
+ if (!resetLibrarySearchFlag) return;
+
+ const input = document.querySelector(
+ '[data-testid="search-input"]',
+ );
+ if (input?.value) {
+ const setter = Object.getOwnPropertyDescriptor(
+ window.HTMLInputElement.prototype,
+ "value",
+ )?.set;
+ if (setter) {
+ setter.call(input, "");
+ input.dispatchEvent(new Event("input", { bubbles: true }));
+ }
+ }
+
+ let cancelled = false;
+ const start = Date.now();
+ const wantSelector = typeof stepSelector === "string" ? stepSelector : null;
+ const tryRefresh = () => {
+ if (cancelled) return;
+ const found = wantSelector
+ ? document.querySelector(wantSelector)
+ : document.querySelector("[data-folder-name]");
+ if (found || Date.now() - start > 1500) {
+ // Force a re-render in reactour so step.selector is re-queried.
+ setSteps?.((prev) => [...prev]);
+ return;
+ }
+ window.setTimeout(tryRefresh, 50);
+ };
+ window.setTimeout(tryRefresh, 50);
+
+ return () => {
+ cancelled = true;
+ };
+ }, [isOpen, currentStep, resetLibrarySearchFlag, setSteps, stepSelector]);
+
+ // Per-element ring overlay. Reactour merges highlightedSelectors into a
+ // single union rect, so an inner narrow ring is impossible through that
+ // mechanism. We apply a CSS class to matching elements and refresh it on
+ // any DOM mutation so late-arriving elements (e.g. search results) get
+ // ringed too.
+ useEffect(() => {
+ if (!isOpen) return undefined;
+ if (!ringSelectors?.length) return undefined;
+
+ const ringed = new Set();
+
+ const update = () => {
+ const current = new Set();
+ for (const sel of ringSelectors) {
+ document.querySelectorAll(sel).forEach((el) => current.add(el));
+ }
+ for (const el of ringed) {
+ if (!current.has(el)) el.classList.remove("tour-ring");
+ }
+ for (const el of current) {
+ el.classList.add("tour-ring");
+ ringed.add(el);
+ }
+ for (const el of ringed) {
+ if (!current.has(el)) ringed.delete(el);
+ }
+ };
+
+ update();
+ const observer = new MutationObserver(update);
+ observer.observe(document.body, { childList: true, subtree: true });
+
+ return () => {
+ observer.disconnect();
+ for (const el of ringed) el.classList.remove("tour-ring");
+ };
+ }, [isOpen, ringSelectors]);
useEffect(() => {
if (!isOpen) return undefined;
@@ -168,11 +330,18 @@ export function EditorTourBridge() {
}
if (interaction === "select-task") {
+ const targetName = step?.targetTaskName?.toLowerCase();
const handleClick = (event: MouseEvent) => {
const target = event.target as Element | null;
- if (target?.closest('[data-tour-node="task"]')) {
- advance();
+ const node = target?.closest('[data-tour-node="task"]');
+ if (!node) return;
+ if (targetName) {
+ const name = (
+ node.getAttribute("data-task-name") ?? ""
+ ).toLowerCase();
+ if (!name.includes(targetName)) return;
}
+ advance();
};
document.addEventListener("click", handleClick);
return () => {
@@ -181,6 +350,220 @@ export function EditorTourBridge() {
};
}
+ if (interaction === "expand-folder") {
+ const targetFolderName = step?.targetFolderName;
+ if (!targetFolderName) return stopFollow;
+
+ const expandedSelector = `[data-folder-name="${targetFolderName}"] [aria-expanded="true"]`;
+ const isExpanded = () => !!document.querySelector(expandedSelector);
+
+ if (isExpanded()) {
+ advance();
+ return stopFollow;
+ }
+
+ const observer = new MutationObserver(() => {
+ if (isExpanded()) advance();
+ });
+ observer.observe(document.body, {
+ attributes: true,
+ attributeFilter: ["aria-expanded"],
+ subtree: true,
+ });
+
+ return () => {
+ stopFollow();
+ observer.disconnect();
+ };
+ }
+
+ if (interaction === "library-search") {
+ const sel = '[data-testid="search-input"]';
+ const targetTerm = step?.targetSearchTerm?.toLowerCase();
+ const matches = () => {
+ const el = document.querySelector(sel);
+ if (!el) return false;
+ const value = el.value.trim().toLowerCase();
+ if (targetTerm) return value.includes(targetTerm);
+ return value.length > 0;
+ };
+
+ // Search is debounced and results render asynchronously, so give the
+ // result list a beat to settle. Otherwise the next step flashes in its
+ // fallback position before its selector lands in the DOM.
+ let advanceTimer: ReturnType | null = null;
+ const scheduleAdvance = () => {
+ if (advanceTimer !== null) return;
+ advanceTimer = setTimeout(() => {
+ advanceTimer = null;
+ advance();
+ }, 600);
+ };
+
+ if (matches()) {
+ scheduleAdvance();
+ }
+
+ const handleInput = (event: Event) => {
+ const target = event.target as Element | null;
+ if (target?.matches(sel) && matches()) scheduleAdvance();
+ };
+ document.addEventListener("input", handleInput, true);
+
+ return () => {
+ stopFollow();
+ document.removeEventListener("input", handleInput, true);
+ if (advanceTimer !== null) clearTimeout(advanceTimer);
+ };
+ }
+
+ if (interaction === "set-argument") {
+ const targetArgumentName = step?.targetArgumentName;
+ if (!targetArgumentName) return stopFollow;
+
+ const hasArgumentValue = () => {
+ const spec = navigation.activeSpec;
+ if (!spec) return false;
+ return spec.tasks.some((task) =>
+ task.arguments.some(
+ (arg) =>
+ arg.name === targetArgumentName &&
+ typeof arg.value === "string" &&
+ arg.value.trim() !== "",
+ ),
+ );
+ };
+
+ if (hasArgumentValue()) {
+ advance();
+ return stopFollow;
+ }
+
+ const dispose = reaction(
+ () => hasArgumentValue(),
+ (matches) => {
+ if (matches) {
+ dispose();
+ advance();
+ }
+ },
+ );
+
+ return () => {
+ stopFollow();
+ dispose();
+ };
+ }
+
+ if (interaction === "connect-edge" && step?.targetEdge) {
+ // Gate advancement on the SPECIFIC edge described by targetEdge. Any
+ // other connection the user makes is allowed but won't advance the
+ // step; only the prescribed source→target binding does. When only the
+ // source is given, any new binding from that source counts — used when
+ // wiring into IO nodes whose entity ids aren't predictable from JSON.
+ const target = step.targetEdge;
+ const hasTargetEdge = () => {
+ const spec = navigation.activeSpec;
+ if (!spec) return false;
+ const sourceTask = spec.tasks.find(
+ (t) => t.name === target.sourceTaskName,
+ );
+ if (!sourceTask) return false;
+
+ if (!target.targetTaskName) {
+ return spec.bindings.some(
+ (b) =>
+ b.sourceEntityId === sourceTask.$id &&
+ b.sourcePortName === target.sourcePortName,
+ );
+ }
+
+ const targetTask = spec.tasks.find(
+ (t) => t.name === target.targetTaskName,
+ );
+ if (!targetTask) return false;
+ return spec.bindings.some(
+ (b) =>
+ b.sourceEntityId === sourceTask.$id &&
+ b.targetEntityId === targetTask.$id &&
+ b.sourcePortName === target.sourcePortName &&
+ b.targetPortName === target.targetPortName,
+ );
+ };
+
+ if (hasTargetEdge()) {
+ advance();
+ return stopFollow;
+ }
+
+ const dispose = reaction(
+ () => hasTargetEdge(),
+ (matches) => {
+ if (matches) {
+ dispose();
+ advance();
+ }
+ },
+ );
+
+ return () => {
+ stopFollow();
+ dispose();
+ };
+ }
+
+ if (interaction === "add-task" && step?.targetTaskName) {
+ // Specific-task variant: advance only when a task whose name matches
+ // (case-insensitive substring) is added. The drag-block is handled by
+ // the standalone effect above keyed on targetTaskName / targetComponentName.
+ const targetName = step.targetTaskName.toLowerCase();
+
+ const countMatches = () => {
+ const spec = navigation.activeSpec;
+ if (!spec) return 0;
+ return spec.tasks.filter((t) =>
+ t.name.toLowerCase().includes(targetName),
+ ).length;
+ };
+ const baseline = countMatches();
+
+ const dispose = reaction(
+ () => countMatches(),
+ (current) => {
+ if (current > baseline) {
+ dispose();
+ advance();
+ }
+ },
+ );
+
+ return () => {
+ stopFollow();
+ dispose();
+ };
+ }
+
+ if (isCountInteraction(interaction)) {
+ // Snapshot baseline so each step gates on "do one more of X", not on
+ // absolute count — works for the first edge and the third edge alike.
+ const baseline = countForInteraction(navigation.activeSpec, interaction);
+
+ const dispose = reaction(
+ () => countForInteraction(navigation.activeSpec, interaction),
+ (current) => {
+ if (current > baseline) {
+ dispose();
+ advance();
+ }
+ },
+ );
+
+ return () => {
+ stopFollow();
+ dispose();
+ };
+ }
+
return stopFollow;
}, [
isOpen,
@@ -191,6 +574,7 @@ export function EditorTourBridge() {
step,
steps,
windows,
+ navigation,
]);
return null;
diff --git a/src/routes/v2/pages/Editor/store/autoSaveStore.ts b/src/routes/v2/pages/Editor/store/autoSaveStore.ts
index 871a43a34..885f5f15a 100644
--- a/src/routes/v2/pages/Editor/store/autoSaveStore.ts
+++ b/src/routes/v2/pages/Editor/store/autoSaveStore.ts
@@ -14,6 +14,12 @@ import type { UndoStore } from "./undoStore";
const AUTOSAVE_MIN_SAVING_INDICATOR_MS = 600;
+// Pipelines with this prefix are ephemeral (guided tours). Their owning route
+// deletes them on unmount; a flush-on-dispose write here runs in the same
+// unmount chain and would rewrite the IndexedDB row right after that delete,
+// leaving an orphan file in the user's pipelines list.
+const EPHEMERAL_PIPELINE_PREFIX = "__tour__";
+
export class AutoSaveStore {
@observable accessor isSaving = false;
@observable accessor lastSavedAt: Date | null = null;
@@ -48,9 +54,20 @@ export class AutoSaveStore {
}
@action dispose() {
+ // Flush any pending change before tearing down. cancel() alone drops it,
+ // so an edit within the debounce window (e.g. a drag immediately followed
+ // by a refresh or navigation) wouldn't get persisted. Skip for ephemeral
+ // tour pipelines — their owning route deletes the file in the same
+ // unmount chain and a flush here would resurrect it.
+ const yaml = this.serializeSpec();
+ const file = this.pipelineFileStore.activePipelineFile;
+ const isEphemeral = file?.storageKey.startsWith(EPHEMERAL_PIPELINE_PREFIX);
+ if (yaml && file && !isEphemeral) {
+ void file.write(yaml);
+ }
+ this.debouncedSave.cancel();
this.disposeReaction?.();
this.disposeReaction = null;
- this.debouncedSave.cancel();
this.spec = null;
this.pipelineName = null;
}
diff --git a/src/routes/v2/shared/nodes/IONode/inputManifestBase.ts b/src/routes/v2/shared/nodes/IONode/inputManifestBase.ts
index af5fb77df..5ded8f9cb 100644
--- a/src/routes/v2/shared/nodes/IONode/inputManifestBase.ts
+++ b/src/routes/v2/shared/nodes/IONode/inputManifestBase.ts
@@ -73,7 +73,7 @@ export const inputManifestBase: ManifestPartial = {
ioType: "input",
name: input.name,
} satisfies IONodeData,
- { "data-task-name": input.name },
+ { "data-task-name": input.name, "data-tour-node": "input" },
),
);
},
diff --git a/src/routes/v2/shared/nodes/IONode/outputManifestBase.ts b/src/routes/v2/shared/nodes/IONode/outputManifestBase.ts
index a544d8740..6e2a5c53e 100644
--- a/src/routes/v2/shared/nodes/IONode/outputManifestBase.ts
+++ b/src/routes/v2/shared/nodes/IONode/outputManifestBase.ts
@@ -68,7 +68,7 @@ export const outputManifestBase: ManifestPartial = {
ioType: "output",
name: output.name,
} satisfies IONodeData,
- { "data-task-name": output.name },
+ { "data-task-name": output.name, "data-tour-node": "output" },
),
);
},
diff --git a/src/styles/editor.css b/src/styles/editor.css
index d0b04745a..4464b2fd2 100644
--- a/src/styles/editor.css
+++ b/src/styles/editor.css
@@ -1,3 +1,14 @@
+/* Tour step ring: reactour merges highlightedSelectors into one bounding rect,
+ so per-element rings need their own mechanism. EditorTourBridge applies
+ this class to elements matching a step's ringSelectors. */
+.tour-ring {
+ outline: 2px solid #60a5fa;
+ outline-offset: 2px;
+ border-radius: 6px;
+ position: relative;
+ z-index: 1;
+}
+
/* Use the proper box layout model by default, but allow elements to override */
html {
box-sizing: border-box;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index fadffff9c..1ed15666f 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -33,7 +33,7 @@ export const ENABLE_GOOGLE_CLOUD_SUBMITTER =
export const USER_PIPELINES_LIST_NAME = "user_pipelines";
export const defaultPipelineYamlWithName = (name: string) => `
-name: ${name}
+name: ${JSON.stringify(name)}
metadata:
annotations:
sdk: https://cloud-pipelines.net/pipeline-editor/