@parallelworks/ui 0.37.0 → 0.39.0

package/dist/graph/JobSummary.d.ts

@@ -14,4 +14,7 @@ export declare function Joblist(inputs: JobHandlers & {
     jobNames: string[];
     growWidth?: boolean;
     preview?: boolean;
+    editable?: boolean;
+    /** Steps take edits where their jobs don't, as a matrix's runs show its one job's steps. */
+    editableSteps?: boolean;
 }): (import("react").JSX.Element | null)[];

package/dist/graph/JobSummary.js

@@ -3,8 +3,9 @@ import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
 import { PiArrowBendUpRightBold } from "../icons/pi/PiArrowBendUpRightBold.js";
 import { TOOLTIP_ID } from "../components/Tooltip.js";
 import { Indicator } from "../components/Indicator.js";
-import { Reveal } from "./Reveal.js";
 import { jobLabel } from "./util.js";
+import { AddStepButton, EditableJobRow, EditableStepRow } from "./editorRows.js";
+import { Reveal } from "./Reveal.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/JobSummary.tsx
@@ -35,36 +36,48 @@ function Joblist(inputs) {
 		if (inputs.jobs[jobName]?._matrixGroup) return null;
 		const job = inputs.jobs[jobName];
 		const jobStatus = job?.status;
+		const label = jobLabel(jobName, job);
+		const toggle = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": inputs.isStepsOpen(jobName),
+			onClick: () => inputs.onJobClick(jobName),
+			className: cx("flex items-center gap-x-1.5 w-full text-left", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
+			children: [!inputs.preview && /* @__PURE__ */ jsx(Indicator, { status: jobStatus }), /* @__PURE__ */ jsx("div", {
+				className: "font-medium",
+				children: label
+			})]
+		});
 		return /* @__PURE__ */ jsxs("div", {
 			className: "py-1 select-none",
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-expanded": inputs.isStepsOpen(jobName),
-				onClick: () => inputs.onJobClick(jobName),
-				className: cx("flex items-center gap-x-1.5 w-full text-left", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
-				children: [!inputs.preview && /* @__PURE__ */ jsx(Indicator, { status: jobStatus }), /* @__PURE__ */ jsx("div", {
-					className: "font-medium",
-					children: jobLabel(jobName, job)
-				})]
-			}), /* @__PURE__ */ jsx(Reveal, {
+			children: [inputs.editable ? /* @__PURE__ */ jsx(EditableJobRow, {
+				job: jobName,
+				label,
+				children: toggle
+			}) : toggle, /* @__PURE__ */ jsx(Reveal, {
 				open: inputs.isStepsOpen(jobName),
 				growWidth: inputs.growWidth ?? false,
-				children: /* @__PURE__ */ jsx("div", {
+				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-y-0.5 mt-0.5",
-					children: (job?.steps || []).map((step, i) => {
+					children: [(job?.steps || []).map((step, i) => {
 						const stepLabel = engine.stepLabel(step, i);
 						const stepKey = `${jobName}:${i}`;
 						const subJobs = step.subworkflow?.jobs;
 						const canExpand = !!subJobs && Object.keys(subJobs).length > 0;
+						const stepButton = /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => inputs.onStepClick(jobName, i),
+							className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
+							"data-testid": stepLabel,
+							children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(Indicator, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
+						});
 						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 							className: cx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
-							children: [/* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => inputs.onStepClick(jobName, i),
-								className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
-								"data-testid": stepLabel,
-								children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(Indicator, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
-							}), step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
+							children: [(inputs.editable || inputs.editableSteps) && !step.linkedStep ? /* @__PURE__ */ jsx(EditableStepRow, {
+								job: job?._matrix?.originaljob ?? jobName,
+								index: i,
+								label: stepLabel,
+								children: stepButton
+							}) : stepButton, step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
 								/* @__PURE__ */ jsx("button", {
 									type: "button",
 									"aria-label": jobActions.openSubworkflowLogs,
@@ -95,7 +108,7 @@ function Joblist(inputs) {
 								})
 							] })]
 						}), canExpand && inputs.renderSubworkflow(jobName, i)] }, stepKey);
-					})
+					}), inputs.editable && /* @__PURE__ */ jsx(AddStepButton, { job: jobName })]
 				})
 			})]
 		}, `job-${jobName}`);

package/dist/graph/MatrixGroup.d.ts

@@ -12,7 +12,7 @@ export declare function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded
     preview: boolean;
 }): import("react").JSX.Element;
 /** Matrix group node in the DAG visualization. */
-export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, rowsAbove, }: {
+export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, editable, rowsAbove, }: {
     matrixGroup: MatrixGroup;
     jobNames: string[];
     idPrefix: string;
@@ -27,6 +27,7 @@ export declare function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExp
     zBase: number;
     handlers: JobHandlers;
     preview: boolean;
+    editable?: boolean;
     /** Empty rows of its column above this node. */
     rowsAbove?: number;
 }): import("react").JSX.Element;

package/dist/graph/MatrixGroup.js

@@ -1,5 +1,6 @@
 import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Indicator } from "../components/Indicator.js";
+import { EditableJobRow } from "./editorRows.js";
 import { emptyRowsStyle } from "./gridSpacing.js";
 import { Reveal } from "./Reveal.js";
 import { Joblist } from "./JobSummary.js";
@@ -41,7 +42,7 @@ function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, job
 	});
 }
 /** Matrix group node in the DAG visualization. */
-function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, rowsAbove = 0 }) {
+function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, handlers, preview, editable = false, rowsAbove = 0 }) {
 	const { dag: t } = useStrings();
 	const matrixName = matrixGroup.originaljob;
 	const first = jobNames[0] ?? "";
@@ -78,7 +79,12 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 				opacity: hoveredRelated && !hoveredRelated.has(first) ? .5 : 1,
 				transition: `opacity ${animT}s`
 			},
-			children: [header, /* @__PURE__ */ jsx(Reveal, {
+			children: [editable ? /* @__PURE__ */ jsx(EditableJobRow, {
+				job: matrixName,
+				label: t.matrixOf(matrixName),
+				badge: false,
+				children: header
+			}) : header, /* @__PURE__ */ jsx(Reveal, {
 				open: isExpanded,
 				growWidth: true,
 				children: /* @__PURE__ */ jsx("div", {
@@ -88,7 +94,8 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 						jobNames: matrixMembers,
 						...handlers,
 						growWidth: true,
-						preview
+						preview,
+						editableSteps: editable
 					})
 				})
 			})]

package/dist/graph/ShortcutsButton.js

@@ -0,0 +1,56 @@
+import { LuKeyboard } from "../icons/lu/LuKeyboard.js";
+import { IconButton } from "../components/IconButton.js";
+import { useGraphEditorStrings } from "./editorStrings.js";
+import { ToolbarPopover } from "./ToolbarPopover.js";
+import { Fragment, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/ShortcutsButton.tsx
+var MOD_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl";
+var ALT_KEY = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌥" : "Alt";
+/** A toolbar button that opens the list of gestures and keys a pane takes. */
+function ShortcutsButton({ groups }) {
+	const t = useGraphEditorStrings();
+	const [open, setOpen] = useState(false);
+	const button = useRef(null);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
+		ref: button,
+		icon: /* @__PURE__ */ jsx(LuKeyboard, { className: "h-4 w-4" }),
+		label: t.shortcuts,
+		size: "sm",
+		variant: "ghost",
+		"aria-expanded": open,
+		showTooltip: !open,
+		onClick: () => setOpen((current) => !current)
+	}), open && /* @__PURE__ */ jsxs(ToolbarPopover, {
+		anchor: button,
+		label: t.shortcuts,
+		onClose: () => setOpen(false),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-[0.8125rem] font-semibold",
+			children: t.shortcuts
+		}), groups.map((group) => /* @__PURE__ */ jsxs("section", {
+			className: "mt-3",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "mb-1.5 text-xs font-semibold theme-muted-text",
+				children: group.title
+			}), /* @__PURE__ */ jsx("dl", {
+				className: "grid grid-cols-[8.5rem_1fr] items-baseline gap-x-3 gap-y-1.5",
+				children: group.shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+					className: "flex flex-wrap items-center gap-1",
+					children: shortcut.combos.map((keys, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: "/"
+					}), keys.map((key) => /* @__PURE__ */ jsx("kbd", {
+						className: "rounded border theme-border px-1 py-px text-[11px]",
+						children: key
+					}, key))] }, keys.join("+")))
+				}), /* @__PURE__ */ jsx("dd", {
+					className: "theme-muted-text",
+					children: shortcut.does
+				})] }, shortcut.does))
+			})]
+		}, group.title))]
+	})] });
+}
+//#endregion
+export { ALT_KEY, MOD_KEY, ShortcutsButton };

package/dist/graph/SuggestionInput.js

@@ -0,0 +1,29 @@
+import Dropdown from "../components/Dropdown.js";
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/graph/SuggestionInput.tsx
+function suggestionOptions(suggestions) {
+	return suggestions.map(({ value, label }) => label ? {
+		label,
+		value,
+		description: value
+	} : value);
+}
+var FIELD_TEXT_BOX = "py-3 pl-4 rounded-lg text-sm !bg-[var(--theme-muted-panel-bg)]";
+/**
+* The dropdown for a field that takes any typed value as well as the ones it offers. Any of
+* the dropdown's own props can still be passed, such as `allowCustomValue={false}`.
+*/
+function SuggestionInput({ value, onChange, suggestions, allowCustomValue = true, ...props }) {
+	return /* @__PURE__ */ jsx(Dropdown, {
+		showCaret: suggestions.length > 0,
+		...props,
+		textBoxClassName: cx(FIELD_TEXT_BOX, props.textBoxClassName),
+		allowCustomValue,
+		value,
+		options: suggestionOptions(suggestions),
+		onChange: (next) => onChange(next === void 0 ? "" : String(next))
+	});
+}
+//#endregion
+export { FIELD_TEXT_BOX, SuggestionInput, suggestionOptions };

package/dist/graph/WorkflowSettingsDialog.d.ts

@@ -0,0 +1,21 @@
+import type { GraphEdit } from '../editing.js';
+import { type Json } from './editorFields.js';
+import type { SettingsView } from './settingsViews.js';
+/** What this dialog writes; the schema coverage test holds these to the workflow schema. */
+export declare const WORKFLOW_FIELDS: readonly ['env', 'timeout', 'permissions', 'sessions', 'links', 'needs'];
+export declare const SESSION_FIELDS: string[];
+export declare const LINK_FIELDS: string[];
+export declare const NEEDS_FIELDS: string[];
+export declare const INPUT_FORM_FIELDS: string[];
+interface SettingsDialogProps {
+    workflow: Json;
+    onEdit: (edit: GraphEdit) => void;
+    onClose: () => void;
+}
+/** The workflow's own settings in a form, or as YAML; switching carries the edits across. */
+export declare function WorkflowSettingsDialog(props: SettingsDialogProps & {
+    source?: string | undefined;
+    view?: SettingsView | undefined;
+    onViewChange?: ((view: SettingsView) => void) | undefined;
+}): import("react").JSX.Element;
+export {};