@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/stepWith.js

@@ -0,0 +1,536 @@
+import { useRepoSuggestions, useWorkflowActions, useWorkflowEditing, useWorkflowJsonResolver } from "../components/Provider.js";
+import { IoMdClose } from "../icons/io/IoMdClose.js";
+import { IconButton } from "../components/IconButton.js";
+import { Input, Textarea } from "../components/Input.js";
+import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
+import { asRecord } from "./records.js";
+import { loadUsesInputs, splitAtRef } from "./usesInputs.js";
+import { FixButtons, LintScope, useFieldLint, useFieldProblems } from "./fieldProblems.js";
+import { SuggestionInput } from "./SuggestionInput.js";
+import { ChoiceButtons, EXPRESSION, FieldError, FieldLabel, KeyValueEditor, LabelledField, StringListEditor, SuggestedInput, ToggleField, isScalar, labelled, parseJson, parseScalar, rowsError, rowsFrom, rowsTo, sameValue } from "./editorFields.js";
+import { ValueOrInputField, refSuggestions } from "./inputRefs.js";
+import { DynamicForm } from "../form/Form.js";
+import { useEffect, useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/stepWith.tsx
+var REPO_INPUTS = [{
+	key: "$yaml",
+	kind: "text",
+	label: "$yaml",
+	description: ""
+}, {
+	key: "$thumbnail",
+	kind: "text",
+	label: "$thumbnail",
+	description: ""
+}];
+var GITLAB_INPUTS = [...REPO_INPUTS, {
+	key: "$host",
+	kind: "text",
+	label: "$host",
+	description: ""
+}];
+var allSpecs = (actions) => [...Object.values(actions).flatMap((action) => action.inputs), ...GITLAB_INPUTS];
+/** Every `with` key the step dialog writes for `actions`, for a schema coverage test. */
+function withFields(actions) {
+	return [...new Set(allSpecs(actions).flatMap((spec) => [spec.key, ...(spec.fields ?? []).map((field) => `${spec.key}.${field.key}`)]))];
+}
+var INPUT_KEY = /^[a-zA-Z0-9_-]+$/;
+function usesKind(uses, actions) {
+	if (Object.hasOwn(actions, uses)) return "action";
+	if (uses.startsWith("github/")) return "github";
+	if (uses.startsWith("gitlab/")) return "gitlab";
+	return /^(marketplace|workflow)\//.test(uses) ? "subworkflow" : "other";
+}
+/** Named inputs for `uses`: an action's own, or a repository form's `$` keys. */
+function specsFor(uses, actions) {
+	const kind = usesKind(uses, actions);
+	return kind === "action" ? actions[uses]?.inputs ?? [] : kind === "github" ? REPO_INPUTS : kind === "gitlab" ? GITLAB_INPUTS : [];
+}
+function textDraft(value) {
+	if (value === void 0 || value === null) return "";
+	return isScalar(value) ? String(value) : JSON.stringify(value);
+}
+function draftFor(spec, value) {
+	switch (spec.kind) {
+		case "list": return Array.isArray(value) ? value.map(textDraft) : [];
+		case "bool": return typeof value === "boolean" ? value : void 0;
+		case "flags": return rowsFrom(value);
+		case "target": {
+			const target = asRecord(value);
+			return Object.fromEntries((spec.fields ?? []).map((field) => [field.key, textDraft(target[field.key])]));
+		}
+		default: return textDraft(value);
+	}
+}
+function withDraftFrom(value, actions) {
+	const original = asRecord(value);
+	const values = {};
+	for (const spec of allSpecs(actions)) values[`${spec.kind}:${spec.key}`] = draftFor(spec, original[spec.key]);
+	return {
+		values,
+		rows: rowsFrom(Object.fromEntries(Object.entries(original).filter(([key]) => !key.startsWith("$")))),
+		removed: []
+	};
+}
+var slot = (spec) => `${spec.kind}:${spec.key}`;
+function valueFor(spec, draft) {
+	switch (spec.kind) {
+		case "list": {
+			const items = draft.map((item) => item.trim()).filter(Boolean);
+			return items.length > 0 ? items : void 0;
+		}
+		case "bool": return draft;
+		case "flags": return rowsTo(draft, parseScalar);
+		case "target": {
+			const entries = Object.entries(draft).map(([key, item]) => [key, item.trim()]).filter(([, item]) => item);
+			return entries.length > 0 ? Object.fromEntries(entries) : void 0;
+		}
+		case "number":
+		case "any": {
+			const raw = String(draft).trim();
+			return raw ? parseScalar(raw) : void 0;
+		}
+		case "textarea": return String(draft) ? String(draft) : void 0;
+		default: {
+			const raw = String(draft).trim();
+			return raw ? raw : void 0;
+		}
+	}
+}
+/** Keys the step already has that `uses` doesn't take: any for an action, `$` ones otherwise. */
+function extraKeys(uses, actions, original, draft) {
+	const kind = usesKind(uses, actions);
+	if (kind === "other") return [];
+	const known = new Set(specsFor(uses, actions).map((spec) => spec.key));
+	return Object.keys(asRecord(original)).filter((key) => !known.has(key) && !draft.removed.includes(key) && (kind === "action" || key.startsWith("$")));
+}
+/** The step's `with` for `uses`, or its original when nothing changed. */
+function withValue(uses, actions, draft, initial, originalUses, original) {
+	if (uses === originalUses && sameValue(draft, initial)) return original;
+	const kind = usesKind(uses, actions);
+	const out = {};
+	for (const spec of specsFor(uses, actions)) {
+		const value = valueFor(spec, draft.values[slot(spec)]);
+		if (value !== void 0) out[spec.key] = value;
+	}
+	if (kind !== "action") Object.assign(out, rowsTo(draft.rows, parseScalar));
+	const kept = asRecord(original);
+	for (const key of extraKeys(uses, actions, original, draft)) out[key] = kept[key];
+	return Object.keys(out).length > 0 ? out : void 0;
+}
+function withError(uses, actions, draft, original, t) {
+	const kind = usesKind(uses, actions);
+	if (extraKeys(uses, actions, original, draft).length > 0) return t.notActionInput;
+	for (const spec of specsFor(uses, actions)) {
+		const value = valueFor(spec, draft.values[slot(spec)]);
+		if (spec.required && value === void 0) return t.missingInput(spec.key);
+		if (spec.kind === "number" && value !== void 0 && typeof value !== "number") return t.invalidNumberInput;
+		if (spec.kind === "choice" && typeof value === "string" && !spec.choices?.includes(value) && !(spec.expression && EXPRESSION.test(value))) return t.invalidChoice(spec.key);
+		if (spec.kind === "flags") {
+			const error = rowsError(draft.values[slot(spec)], INPUT_KEY, t.invalidKey, t);
+			if (error) return error;
+		}
+	}
+	return kind === "action" ? void 0 : rowsError(draft.rows, kind === "other" ? /^\$?[a-zA-Z0-9_-]+$/ : INPUT_KEY, t.invalidKey, t);
+}
+function SpecField({ spec, draft, onChange, references, source }) {
+	const t = useGraphEditorStrings();
+	const { description, label } = spec;
+	if (spec.refTypes) return /* @__PURE__ */ jsx(ValueOrInputField, {
+		label,
+		yamlKey: spec.key,
+		description,
+		value: String(draft),
+		onChange,
+		source,
+		types: spec.refTypes,
+		...spec.suffix ? { suffix: spec.suffix } : {},
+		suggestions: spec.choices ?? []
+	});
+	switch (spec.kind) {
+		case "list": return /* @__PURE__ */ jsx(LabelledField, {
+			label,
+			yamlKey: spec.key,
+			description,
+			children: /* @__PURE__ */ jsx(StringListEditor, {
+				label,
+				values: draft,
+				onChange,
+				addLabel: t.addRow
+			})
+		});
+		case "bool": return /* @__PURE__ */ jsx(ToggleField, {
+			label,
+			yamlKey: spec.key,
+			description,
+			checked: typeof draft === "boolean" ? draft : spec.fallback ?? false,
+			onChange: (on) => onChange(on === (spec.fallback ?? false) ? void 0 : on)
+		});
+		case "flags": return /* @__PURE__ */ jsx(LabelledField, {
+			label,
+			yamlKey: spec.key,
+			description,
+			children: /* @__PURE__ */ jsx(KeyValueEditor, {
+				rows: draft,
+				onChange,
+				error: void 0,
+				valueSuggestions: references
+			})
+		});
+		case "target": {
+			const target = draft;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(FieldLabel, {
+					label,
+					yamlKey: spec.key,
+					description
+				}), (spec.fields ?? []).map((field) => /* @__PURE__ */ jsx(Input, {
+					mono: true,
+					...labelled(field.label, field.key),
+					description: field.description,
+					value: target[field.key] ?? "",
+					onChange: (e) => onChange({
+						...target,
+						[field.key]: e.target.value
+					})
+				}, field.key))]
+			});
+		}
+		case "textarea": return /* @__PURE__ */ jsx(Textarea, {
+			mono: true,
+			...labelled(label, spec.key),
+			description,
+			rows: 4,
+			value: String(draft),
+			onChange: (e) => onChange(e.target.value)
+		});
+		default: return /* @__PURE__ */ jsx(SuggestedInput, {
+			label,
+			yamlKey: spec.key,
+			description,
+			value: String(draft),
+			onChange,
+			suggestions: spec.choices ?? references
+		});
+	}
+}
+/** Where a repository `uses` reads its workflow from, for the repository fields. */
+function repositoryOf(uses, host) {
+	if (!uses.startsWith("github/") && !uses.startsWith("gitlab/")) return {
+		repo: "",
+		branch: ""
+	};
+	const [path, ref] = splitAtRef(uses.slice(uses.indexOf("/") + 1));
+	const server = uses.startsWith("github/") ? "github.com" : host || "gitlab.com";
+	return {
+		repo: path ? `https://${server}/${path}` : "",
+		branch: ref
+	};
+}
+/** The `uses` for a repository URL and branch, plus the $host a self-hosted server needs. */
+function usesOfRepository(repo, branch) {
+	let url;
+	try {
+		url = new URL(repo.includes("://") ? repo : `https://${repo}`);
+	} catch {
+		return null;
+	}
+	const path = url.pathname.replace(/^\/+|\/+$/g, "").replace(/\.git$/, "");
+	if (!path) return null;
+	const ref = branch.trim() ? `@${branch.trim()}` : "";
+	return url.host === "github.com" ? {
+		uses: `github/${path}${ref}`,
+		host: ""
+	} : {
+		uses: `gitlab/${path}${ref}`,
+		host: url.host === "gitlab.com" ? "" : url.host
+	};
+}
+/** The repository fields the workflow import form uses, so branches and files come from the repository's host. */
+function RepositoryForm({ uses, draft, onUses, onDraft }) {
+	const { readme: _readme, ...fields } = useWorkflowEditing().WORKFLOW_FORMS.github;
+	const host = String(draft.values["text:$host"] ?? "");
+	const [initial] = useState(() => ({
+		...repositoryOf(uses, host),
+		yaml: String(draft.values["text:$yaml"] ?? "") || "workflow.yaml",
+		thumbnail: String(draft.values["text:$thumbnail"] ?? "")
+	}));
+	return /* @__PURE__ */ jsx(DynamicForm, {
+		formJSONs: fields,
+		initialValues: initial,
+		labelPosition: "top",
+		workflowForm: true,
+		setValues: (values) => {
+			if ([
+				"repo",
+				"branch",
+				"yaml",
+				"thumbnail"
+			].every((key) => String(values[key] ?? "") === initial[key])) return;
+			const next = usesOfRepository(String(values["repo"] ?? ""), String(values["branch"] ?? ""));
+			if (next) onUses(next.uses);
+			onDraft({
+				...draft,
+				values: {
+					...draft.values,
+					"text:$yaml": values["yaml"] === "workflow.yaml" ? "" : String(values["yaml"] ?? ""),
+					"text:$thumbnail": String(values["thumbnail"] ?? ""),
+					"text:$host": next?.host ?? host
+				}
+			});
+		}
+	});
+}
+function usesMode(uses, actions) {
+	const kind = usesKind(uses, actions);
+	if (kind === "action") return "action";
+	if (kind === "github" || kind === "gitlab") return "repository";
+	return uses.startsWith("marketplace/") ? "marketplace" : "workflow";
+}
+/** What a step uses: a built-in action, a workflow of yours, one from the marketplace, or one in a repository. */
+function UsesPicker({ uses, onUses, choices, draft, onDraft, error }) {
+	const t = useGraphEditorStrings();
+	const actions = useWorkflowActions();
+	const id = useId();
+	const lint = useFieldLint("uses", id, uses, onUses);
+	const [mode, setMode] = useState(() => usesMode(uses, actions));
+	const options = (prefix) => choices.filter((choice) => choice.startsWith(prefix));
+	const select = (values, placeholder, labels) => /* @__PURE__ */ jsx(SuggestionInput, {
+		id,
+		ariaLabel: t.fields.uses,
+		value: uses,
+		placeholder,
+		suggestions: values.map((value) => ({
+			value,
+			label: labels?.(value)
+		})),
+		onChange: onUses
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsx(FieldLabel, {
+				label: t.fields.uses,
+				yamlKey: "uses",
+				description: t.help.uses
+			}),
+			/* @__PURE__ */ jsx(ChoiceButtons, {
+				options: [
+					{
+						value: "action",
+						label: t.usesAction
+					},
+					{
+						value: "workflow",
+						label: t.usesWorkflow
+					},
+					{
+						value: "marketplace",
+						label: t.usesMarketplace
+					},
+					{
+						value: "repository",
+						label: t.usesRepository
+					}
+				],
+				value: mode,
+				onChange: (next) => {
+					setMode(next);
+					if (next !== usesMode(uses, actions)) onUses("");
+				}
+			}),
+			mode === "action" ? select(Object.keys(actions), t.chooseAction, (value) => actions[value]?.description) : mode === "workflow" ? select(options("workflow/"), t.chooseWorkflow) : mode === "marketplace" ? select(options("marketplace/"), t.chooseMarketplace) : /* @__PURE__ */ jsx(RepositoryForm, {
+				uses,
+				draft,
+				onUses,
+				onDraft
+			}),
+			/* @__PURE__ */ jsx(FieldError, { message: error ?? lint.message })
+		]
+	});
+}
+/** The inputs of the workflow a step uses, fetched the way the YAML editor's completions are. */
+function useSubworkflowInputs(uses, draft) {
+	const editing = useWorkflowEditing();
+	const resolve = useWorkflowJsonResolver();
+	const repos = useRepoSuggestions();
+	const [inputs, setInputs] = useState(null);
+	const yamlPath = String(draft.values["text:$yaml"] ?? "") || "workflow.yaml";
+	const host = String(draft.values["text:$host"] ?? "") || "gitlab.com";
+	useEffect(() => {
+		let live = true;
+		setInputs(null);
+		const timer = window.setTimeout(() => {
+			loadUsesInputs(editing, uses, {
+				yamlPath,
+				host
+			}, {
+				resolve,
+				repos
+			}).then((loaded) => {
+				if (live) setInputs(loaded);
+			}).catch(() => {
+				if (live) setInputs(null);
+			});
+		}, 300);
+		return () => {
+			live = false;
+			window.clearTimeout(timer);
+		};
+	}, [
+		editing,
+		uses,
+		resolve,
+		repos,
+		yamlPath,
+		host
+	]);
+	return inputs;
+}
+/** The step's `with`: an action's own inputs, or a subworkflow's by name. */
+function WithEditor({ uses, draft, original, onChange, error, source }) {
+	const t = useGraphEditorStrings();
+	const inputsEditor = useInputsEditorStrings();
+	const actions = useWorkflowActions();
+	const typeNames = inputsEditor.types;
+	const kind = usesKind(uses, actions);
+	const extras = extraKeys(uses, actions, original, draft);
+	const references = refSuggestions(source);
+	const subworkflow = useSubworkflowInputs(uses, draft);
+	const known = subworkflow ? Object.entries(subworkflow).filter(([key]) => key !== "$meta") : [];
+	const knownKeys = new Set(known.map(([key]) => key));
+	const setRow = (key, value) => {
+		const nested = /^[[{]/.test(value.trim()) && parseJson(value).ok;
+		const rows = value === "" ? draft.rows.filter((row) => row.key !== key) : draft.rows.some((row) => row.key === key) ? draft.rows.map((row) => row.key === key ? {
+			...row,
+			value,
+			nested
+		} : row) : [...draft.rows, {
+			key,
+			value,
+			nested
+		}];
+		onChange({
+			...draft,
+			rows
+		});
+	};
+	return /* @__PURE__ */ jsx(LintScope, {
+		at: "with",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [
+				/* @__PURE__ */ jsx(FieldLabel, {
+					label: t.fields.with,
+					yamlKey: "with",
+					description: t.help.with
+				}),
+				kind === "action" && specsFor(uses, actions).map((spec) => /* @__PURE__ */ jsx(SpecField, {
+					spec,
+					draft: draft.values[slot(spec)],
+					references,
+					source,
+					onChange: (value) => onChange({
+						...draft,
+						values: {
+							...draft.values,
+							[slot(spec)]: value
+						}
+					})
+				}, slot(spec))),
+				extras.map((key) => /* @__PURE__ */ jsx(ExtraKey, {
+					name: key,
+					uses,
+					draft,
+					original,
+					onChange
+				}, key)),
+				kind !== "action" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					known.map(([key, raw]) => {
+						const definition = asRecord(raw);
+						const label = String(definition["label"] ?? "");
+						const about = String(definition["description"] ?? "");
+						const type = String(definition["type"] ?? "");
+						return /* @__PURE__ */ jsx(SuggestedInput, {
+							label: label || key,
+							yamlKey: key,
+							description: about || (typeNames[type] ?? type),
+							value: draft.rows.find((row) => row.key === key)?.value ?? "",
+							suggestions: references,
+							onChange: (value) => setRow(key, value)
+						}, key);
+					}),
+					known.length > 0 && /* @__PURE__ */ jsx(FieldLabel, {
+						label: t.otherInputs,
+						description: t.help.withInputs
+					}),
+					/* @__PURE__ */ jsx(KeyValueEditor, {
+						rows: draft.rows.filter((row) => !knownKeys.has(row.key)),
+						onChange: (rows) => onChange({
+							...draft,
+							rows: [...draft.rows.filter((row) => knownKeys.has(row.key)), ...rows]
+						}),
+						error: void 0,
+						valueSuggestions: references,
+						lint: true
+					})
+				] }),
+				/* @__PURE__ */ jsx(FieldError, { message: error })
+			]
+		})
+	});
+}
+/** A key an action doesn't take, with the input it was likely meant as when the linter knows. */
+function ExtraKey({ name, uses, draft, original, onChange }) {
+	const t = useGraphEditorStrings();
+	const actions = useWorkflowActions();
+	const id = useId();
+	const fixes = useFieldProblems(name, id).flatMap(({ fix }) => fix?.key && fix.find === name ? [fix] : []);
+	const remove = () => onChange({
+		...draft,
+		removed: [...draft.removed, name]
+	});
+	const rename = (fix) => {
+		const spec = specsFor(uses, actions).find((spec) => spec.key === fix.replace);
+		if (spec) onChange({
+			...draft,
+			values: {
+				...draft.values,
+				[slot(spec)]: draftFor(spec, asRecord(original)[name])
+			},
+			removed: [...draft.removed, name]
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		tabIndex: -1,
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-sm",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-mono",
+					children: name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-xs text-(--theme-error)",
+					children: t.notActionInput
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					icon: /* @__PURE__ */ jsx(IoMdClose, { className: "h-4 w-4" }),
+					label: t.removeRow,
+					variant: "ghost",
+					size: "sm",
+					onClick: remove
+				})
+			]
+		}), /* @__PURE__ */ jsx(FixButtons, {
+			fixes,
+			onFix: rename
+		})]
+	});
+}
+//#endregion
+export { UsesPicker, WithEditor, usesKind, withDraftFrom, withError, withFields, withValue };