@wular/coder 0.4.7 → 0.4.9

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/agents/[slug]/(tabs)/platforms/platform-actions.92ac7aa258e706a4.js

@@ -0,0 +1,574 @@
+"use client";
+import { useEffect, useRef, useState } from "../../../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { useRouter } from "../../../../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { client } from "../../../../../../../utils/client.d25e6dcc6704eb60.js";
+import { useAction } from "../../../../../../../utils/action.1a6356d5b722cafb.js";
+import { iAlert, iDots, iDown, iOut, iPlus, iSpark, iSteer, iUpload, iX } from "../../../../../../../comps/ui/icons.a34176f37808cd66.js";
+import { Modal } from "../../../../../../../comps/ui/modal.b5f74ebf59590fa6.js";
+import { reasonText } from "../../../../../../../utils/format.6a7d1beaf4d09d9c.js";
+import { ConfirmDialog } from "../../../../../../../comps/ui/confirm.53edc755945b0563.js";
+import { Badge } from "../../../../../../../comps/ui/badge.0851f234f300c694.js";
+import { Button } from "../../../../../../../comps/ui/button.983daea9e687fc5d.js";
+import { CopyButton, CopyLine } from "../../../../../../../comps/ui/copy.0b23d7dc05757df5.js";
+import { Field } from "../../../../../../../comps/ui/field.75588c33b72824a7.js";
+import { Icon } from "../../../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { Menu } from "../../../../../../../comps/ui/menu.a41edd5cde1c90cf.js";
+import { MenuItem } from "../../../../../../../comps/ui/menu-items.a8e580a0c90631ff.js";
+import { Segmented } from "../../../../../../../comps/ui/segmented.a08dc08338d080e9.js";
+import { showToast, toastError } from "../../../../../../../comps/frame/task-toasts.63f673632770924d.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** Who can install a new app, as the create link's `public`, with what owning it then means. */
+const WHO = {
+	private: {
+		text: "Private",
+		note: () => "Only the account that owns it can install it.",
+		owner: "Owns it and is the only place it installs. Leave empty for your personal account."
+	},
+	public: {
+		text: "Public",
+		note: (name) => `Any account can install it. ${name} asks where on each install.`,
+		owner: "Manages its settings; it still installs anywhere. Leave empty for your personal account."
+	}
+};
+/** Finishes a create with `fields` and goes where the server answers; a navigation, so the CSP's form-action never stops the trip to the platform. */
+const finishCreate = (integration, start, fields = {}) => start().then(({ tx }) => client.apps.finish(integration, {
+	...fields,
+	tx
+})).then(({ url }) => location.assign(url));
+/** Step text with the platform's UI names, marked **like this**, set apart. */
+const uiNames = (text) => text.split(/\*\*(.+?)\*\*/).map((part, index) => index % 2 ? /* @__PURE__ */ _jsx("span", {
+	class: "ui-name",
+	children: part
+}, index) : part);
+/** Posts the platform's own create form, such as GitHub's app manifest. */
+export function postTo({ url, fields }) {
+	const form = Object.assign(document.createElement("form"), {
+		method: "post",
+		action: url
+	});
+	for (const [name, value] of Object.entries(fields)) form.append(Object.assign(document.createElement("input"), {
+		type: "hidden",
+		name,
+		value
+	}));
+	document.body.append(form);
+	form.submit();
+}
+/** The create form for `state`; nothing once the platform's own form is posted. */
+export const createForm = (catalog, state, start) => catalog && !state.public ? Promise.resolve(catalog) : start().then(({ post, create }) => post ? void postTo(post) : create ?? catalog);
+/** The create link's state with owner and visibility. */
+const createState = (createUrl, owner = "", isPublic = false) => ({
+	...Object.fromEntries(new URL(createUrl, location.href).searchParams),
+	...owner ? { owner } : {},
+	...isPublic ? { public: "1" } : {}
+});
+/** Asks for a public address first; closes the dialog it sits in on the way. */
+function Unreachable() {
+	return /* @__PURE__ */ _jsxs("p", {
+		class: "flash err",
+		children: [
+			"This server is only reachable from this machine, so",
+			" ",
+			/* @__PURE__ */ _jsx("a", {
+				href: "#tunnel",
+				onClick: (event) => {
+					event.currentTarget.closest("dialog").close();
+					document.querySelector("#tunnel details")?.setAttribute("open", "");
+				},
+				children: "set a public address"
+			}),
+			" ",
+			"first."
+		]
+	});
+}
+/** Installs an app and comes back to this page. */
+function useInstall() {
+	const action = useAction({
+		toast: "Not installed",
+		leaves: true
+	});
+	const install = (app) => void action.run("install", async () => {
+		location.href = (await client.apps.install(app, location.pathname)).url;
+	});
+	return {
+		busy: Boolean(action.pending),
+		install
+	};
+}
+/** One install button, for the next steps of a flow's outcome. */
+export function InstallButton({ app, label }) {
+	const { busy, install } = useInstall();
+	return /* @__PURE__ */ _jsx(Button, {
+		loading: busy,
+		onClick: () => install(app),
+		children: label
+	});
+}
+/** Asks before Coder forgets `app`; the app itself stays on the platform until deleted there. */
+function RemoveDialog({ app, name, onClose }) {
+	const action = useAction({
+		toast: "Not removed",
+		refresh: true,
+		leaves: true
+	});
+	const remove = () => void action.run("remove", async () => {
+		await client.apps.remove(app.id);
+		// An outcome in the address belongs to the removed app.
+		history.replaceState(history.state, "", location.pathname);
+	});
+	return /* @__PURE__ */ _jsx(ConfirmDialog, {
+		open: true,
+		title: `Remove ${app.name}?`,
+		body: /* @__PURE__ */ _jsxs(_Fragment, { children: [
+			"Coder forgets this app and its installs here, and the agent stops answering through it on",
+			" ",
+			name,
+			".",
+			/* @__PURE__ */ _jsx("br", {}),
+			"Delete the app itself on ",
+			name,
+			app.settingsUrl ? /* @__PURE__ */ _jsxs(_Fragment, { children: [
+				" ",
+				"in",
+				" ",
+				/* @__PURE__ */ _jsx("a", {
+					class: "link",
+					href: app.settingsUrl,
+					target: "_blank",
+					rel: "noreferrer",
+					children: "its settings"
+				})
+			] }) : null,
+			"."
+		] }),
+		confirmLabel: "Remove",
+		busy: Boolean(action.pending),
+		onConfirm: remove,
+		onClose
+	});
+}
+/** An app's create step as a form; the transaction is taken on submit, so a slow trip to the platform never outlives it. */
+export function CreateDialog({ integration, step, start, unreachable, onClose }) {
+	const action = useAction({ leaves: true });
+	const busy = Boolean(action.pending);
+	const submit = (event) => {
+		event.preventDefault();
+		const form = event.currentTarget;
+		void action.run("create", () => finishCreate(integration, start, {
+			...step.hidden,
+			...Object.fromEntries(new FormData(form))
+		}));
+	};
+	return /* @__PURE__ */ _jsxs(Modal, {
+		class: "create-dialog",
+		title: step.submit,
+		dismiss: true,
+		busy,
+		onSubmit: submit,
+		onClose,
+		actions: /* @__PURE__ */ _jsx(Button, {
+			type: "submit",
+			rightIcon: iSteer,
+			loading: busy,
+			children: step.submit
+		}),
+		children: [
+			unreachable ? /* @__PURE__ */ _jsx(Unreachable, {}) : null,
+			/* @__PURE__ */ _jsx("p", {
+				class: "muted",
+				children: step.intro
+			}),
+			/* @__PURE__ */ _jsxs("div", {
+				class: "create-link",
+				children: [/* @__PURE__ */ _jsxs(Button, {
+					variant: "secondary",
+					class: "create-open",
+					href: step.link,
+					external: true,
+					children: ["Open ", new URL(step.link).host]
+				}), /* @__PURE__ */ _jsx(CopyButton, {
+					value: step.link,
+					label: "Copy link"
+				})]
+			}),
+			/* @__PURE__ */ _jsx("ol", {
+				class: "create-steps",
+				children: step.steps.map(({ text, link, copy = [] }) => /* @__PURE__ */ _jsxs("li", { children: [
+					/* @__PURE__ */ _jsx("p", { children: uiNames(text) }),
+					link && link !== step.link ? /* @__PURE__ */ _jsxs("div", {
+						class: "create-link",
+						children: [/* @__PURE__ */ _jsx("a", {
+							href: link,
+							target: "_blank",
+							rel: "noreferrer",
+							children: link.replace(/^https:\/\//, "")
+						}), /* @__PURE__ */ _jsx(CopyButton, {
+							value: link,
+							label: "Copy link"
+						})]
+					}) : null,
+					copy.map((value) => /* @__PURE__ */ _jsx(CopyLine, {
+						value,
+						label: "Copy"
+					}, value))
+				] }, text))
+			}),
+			step.notes?.length ? /* @__PURE__ */ _jsxs("details", {
+				class: "create-more",
+				children: [/* @__PURE__ */ _jsx("summary", { children: "Advanced" }), /* @__PURE__ */ _jsx("ul", { children: step.notes.map((note) => /* @__PURE__ */ _jsx("li", { children: uiNames(note) }, note)) })]
+			}) : null,
+			step.fields.map((field) => /* @__PURE__ */ _jsx(Field, {
+				label: field.label,
+				hint: field.hint ?? (field.required ? undefined : "optional"),
+				children: /* @__PURE__ */ _jsx("input", {
+					name: field.name,
+					placeholder: field.placeholder,
+					required: field.required,
+					autocomplete: "off",
+					spellcheck: false
+				})
+			}, field.name))
+		]
+	});
+}
+/** Who can install the new app and where it lives, asked before the trip to the platform. */
+function WhereDialog({ integration, name, publicApps, organizationApps, unreachable, onSubmit, onClose }) {
+	const [who, setWho] = useState("private");
+	const action = useAction({ leaves: true });
+	const busy = Boolean(action.pending);
+	const owner = useRef(null);
+	// The first organization the workspace already works in, preselected once read.
+	useEffect(() => {
+		if (!organizationApps) return;
+		void client.installations.list(undefined, {
+			limit: 200,
+			active: true
+		}).then((rows) => {
+			const [first] = rows.map((row) => row.value).filter((row) => row.integration === integration && row.account.type && row.account.type !== "User").map((row) => row.account.login).sort();
+			if (first && owner.current && !owner.current.value) owner.current.value = first;
+		}).catch((reason) => console.error("coder dashboard: installations", reason));
+	}, []);
+	const submit = (event) => {
+		event.preventDefault();
+		const form = new FormData(event.currentTarget);
+		void action.run("submit", () => onSubmit(String(form.get("owner") ?? "").trim(), who === "public"));
+	};
+	return /* @__PURE__ */ _jsxs(Modal, {
+		class: "create-dialog",
+		title: `Create ${name} app`,
+		dismiss: true,
+		busy,
+		onSubmit: submit,
+		onClose,
+		actions: /* @__PURE__ */ _jsxs(Button, {
+			type: "submit",
+			rightIcon: iOut,
+			loading: busy,
+			children: ["Continue to ", name]
+		}),
+		children: [
+			unreachable ? /* @__PURE__ */ _jsx(Unreachable, {}) : null,
+			publicApps ? /* @__PURE__ */ _jsxs(Field, {
+				label: "Who can install it",
+				group: true,
+				children: [/* @__PURE__ */ _jsx(Segmented, {
+					label: "Who can install it",
+					options: Object.entries(WHO).map(([key, { text }]) => [key, text]),
+					value: who,
+					onChange: (value) => setWho(value),
+					disabled: busy
+				}), /* @__PURE__ */ _jsx("small", {
+					class: "where-note",
+					children: WHO[who].note(name)
+				})]
+			}) : null,
+			organizationApps ? /* @__PURE__ */ _jsx(Field, {
+				label: "Owner",
+				hint: WHO[who].owner,
+				children: /* @__PURE__ */ _jsx("input", {
+					ref: owner,
+					name: "owner",
+					placeholder: "your-org",
+					autocomplete: "off",
+					spellcheck: false
+				})
+			}) : null
+		]
+	});
+}
+/** What to change on the platform for an app Coder cannot push; values confirmed by hand where the platform cannot be read. */
+function UpdateDialog({ app, name, check, onClose }) {
+	const action = useAction({
+		toast: `${name} app not updated`,
+		leaves: true
+	});
+	const busy = Boolean(action.pending);
+	const current = !check.changed;
+	const confirm = (event) => {
+		const dialog = event.currentTarget.closest("dialog");
+		void action.run("confirm", async () => {
+			await client.apps.update(app.id);
+			dialog.close();
+		});
+	};
+	return /* @__PURE__ */ _jsx(Modal, {
+		class: "create-dialog",
+		title: `Update ${app.name} on ${name}`,
+		busy,
+		cancel: current ? "Close" : "Cancel",
+		onClose,
+		actions: current && !check.confirm ? null : /* @__PURE__ */ _jsxs(_Fragment, { children: [check.confirm && !current ? /* @__PURE__ */ _jsx(Button, {
+			variant: "secondary",
+			loading: busy,
+			onClick: confirm,
+			children: "I updated it"
+		}) : null, /* @__PURE__ */ _jsx(Button, {
+			href: check.url,
+			external: true,
+			children: check.label
+		})] }),
+		children: check.confirm ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("p", {
+			class: "muted",
+			children: current ? `Up to date on ${name}. The app uses these values.` : `${name} cannot show Coder the app's settings. Enter the values marked changed in the app on ${name}, then confirm.`
+		}), /* @__PURE__ */ _jsx("ul", {
+			class: "create-steps update-values",
+			children: check.lines.map(({ text, copy, changed }) => /* @__PURE__ */ _jsxs("li", { children: [/* @__PURE__ */ _jsxs("p", { children: [
+				text,
+				" ",
+				changed ? /* @__PURE__ */ _jsx(Badge, {
+					tone: "warn",
+					children: "changed"
+				}) : null
+			] }), copy ? /* @__PURE__ */ _jsx(CopyLine, {
+				value: copy,
+				label: "Copy"
+			}) : null] }, `${text} ${copy}`))
+		})] }) : current ? /* @__PURE__ */ _jsxs("p", { children: [
+			"Up to date on ",
+			name,
+			"."
+		] }) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("p", {
+			class: "muted",
+			children: [
+				"The app on ",
+				name,
+				" differs from what the agent needs now. Make these changes in its settings and save them."
+			]
+		}), /* @__PURE__ */ _jsx("ol", {
+			class: "create-steps",
+			children: check.lines.map(({ text, copy }) => /* @__PURE__ */ _jsxs("li", { children: [/* @__PURE__ */ _jsx("p", { children: uiNames(text) }), copy ? /* @__PURE__ */ _jsx(CopyLine, {
+				value: copy,
+				label: "Copy"
+			}) : null] }, text))
+		})] })
+	});
+}
+/** The update dialog of each app a publish left needing changes on its platform, one at a time. */
+export function DriftQueue({ apps }) {
+	const nav = useRouter();
+	const [left, setLeft] = useState(apps);
+	const [check, setCheck] = useState();
+	const app = left[0];
+	const open = (rest) => {
+		setLeft(rest);
+		setCheck(undefined);
+		const [first] = rest;
+		// A reload must not open them again; the page refreshes once all are closed.
+		if (!first) {
+			history.replaceState(history.state, "", location.pathname);
+			nav.refresh();
+			return;
+		}
+		void client.apps.drift(first.id).then(setCheck).catch((reason) => {
+			toastError(`Not read from ${first.platform}`, reasonText(reason));
+			open(rest.slice(1));
+		});
+	};
+	useEffect(() => open(apps), []);
+	return app && check ? /* @__PURE__ */ _jsx(UpdateDialog, {
+		app,
+		name: app.platform,
+		check,
+		onClose: () => open(left.slice(1))
+	}) : null;
+}
+/** An unexpected setup failure, open on load: try again, or report it. */
+function FailedDialog({ name, issues, title = `Setting up ${name} failed`, text = "Coder ran into an unexpected error, so nothing was set up. Try again, and if it fails again, report it on GitHub.", onRetry }) {
+	const retry = (event) => {
+		event.currentTarget.closest("dialog").close();
+		onRetry();
+	};
+	return /* @__PURE__ */ _jsx(Modal, {
+		class: "outcome-dialog",
+		tone: "error",
+		title,
+		icon: iAlert,
+		cancel: "Close",
+		focus: "actions",
+		// A reload must not show it again.
+		onClose: () => history.replaceState(history.state, "", location.pathname),
+		actions: /* @__PURE__ */ _jsxs(_Fragment, { children: [issues ? /* @__PURE__ */ _jsx(Button, {
+			variant: "outline",
+			href: `${issues}?${new URLSearchParams({
+				title,
+				body: text
+			})}`,
+			external: true,
+			children: "Report issue"
+		}) : null, /* @__PURE__ */ _jsx(Button, {
+			autofocus: true,
+			onClick: retry,
+			children: "Try again"
+		})] }),
+		children: /* @__PURE__ */ _jsx("p", { children: text })
+	});
+}
+/** The one next step for a platform, and the rarer ones in its row menu. */
+export function PlatformActions({ integration, name, apps, installed, createUrl, create, unreachable, publicApps = false, organizationApps = false, shared = false, appUpdate, failed }) {
+	const nav = useRouter();
+	const { busy, install } = useInstall();
+	const [leaving, setLeaving] = useState(false);
+	const [creating, setCreating] = useState();
+	const [asking, setAsking] = useState(false);
+	const [removing, setRemoving] = useState();
+	const [updating, setUpdating] = useState();
+	const asks = publicApps || organizationApps;
+	// Creation on the platform: the browser posts the platform's own form, such as GitHub's manifest.
+	const createThere = (state) => {
+		setLeaving(true);
+		return client.apps.create(integration, state).then(({ post }) => post && postTo(post)).catch((reason) => {
+			setLeaving(false);
+			throw reason;
+		});
+	};
+	// A step with nothing to fill in, such as signing in through a shared client, finishes with no dialog.
+	const createNow = (state) => {
+		setLeaving(true);
+		return finishCreate(integration, () => client.apps.create(integration, state), create.hidden).catch((reason) => {
+			setLeaving(false);
+			throw reason;
+		});
+	};
+	// The create form, when there is one, takes over from the where dialog.
+	const begin = (state) => !create ? createThere(state) : create.fields.length ? createForm(create, state, () => client.apps.create(integration, state)).then((step) => {
+		if (!step) return;
+		setCreating({
+			state,
+			step
+		});
+		setAsking(false);
+	}) : createNow(state);
+	const start = () => asks ? setAsking(true) : void begin(createState(createUrl)).catch((reason) => toastError("App not created", reasonText(reason)));
+	const dialog = creating ? /* @__PURE__ */ _jsx(CreateDialog, {
+		integration,
+		step: creating.step,
+		start: () => client.apps.create(integration, creating.state),
+		unreachable,
+		onClose: () => setCreating(undefined)
+	}) : null;
+	const where = asking ? /* @__PURE__ */ _jsx(WhereDialog, {
+		integration,
+		name,
+		publicApps,
+		organizationApps,
+		unreachable,
+		onSubmit: (owner, isPublic) => begin(createState(createUrl, owner, isPublic)),
+		onClose: () => setAsking(false)
+	}) : null;
+	const update = (app) => appUpdate === "push" ? void client.apps.update(app.id).then(() => {
+		showToast(`${name} app updated`, `${app.name} now matches the agent.`, "success");
+		nav.refresh();
+	}).catch((reason) => toastError(`${name} app not updated`, reasonText(reason))) : void client.apps.drift(app.id).then((check) => setUpdating({
+		app,
+		check
+	})).catch((reason) => toastError(`Not read from ${name}`, reasonText(reason)));
+	// Gone once the refreshed list no longer holds the app.
+	const removal = removing && apps.some((app) => app.id === removing.id) ? /* @__PURE__ */ _jsx(RemoveDialog, {
+		app: removing,
+		name,
+		onClose: () => setRemoving(undefined)
+	}) : null;
+	const failure = failed ? /* @__PURE__ */ _jsx(FailedDialog, {
+		name: failed.name,
+		issues: failed.issues,
+		title: failed.title,
+		text: failed.text,
+		onRetry: () => apps.some((app) => app.id === failed.app) ? install(failed.app) : start()
+	}) : null;
+	if (!apps.length) return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		/* @__PURE__ */ _jsx(Button, {
+			size: "sm",
+			loading: leaving,
+			onClick: start,
+			children: create && !create.fields.length ? create.submit : "Create app"
+		}),
+		dialog,
+		where,
+		failure
+	] });
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		/* @__PURE__ */ _jsxs("span", {
+			class: "split",
+			children: [installed ? null : /* @__PURE__ */ _jsx(Button, {
+				size: "sm",
+				loading: busy,
+				onClick: () => install(apps[0].id),
+				children: "Install"
+			}), /* @__PURE__ */ _jsxs(Menu, {
+				button: installed ? "icon" : {
+					size: "sm",
+					class: "split-more"
+				},
+				label: `More for ${integration}`,
+				wide: true,
+				summary: /* @__PURE__ */ _jsx(Icon, { d: installed ? iDots : iDown }),
+				children: [
+					apps.map((app) => {
+						// The main button already installs the first app.
+						if (!installed && app === apps[0]) return null;
+						const named = apps.length > 1 ? ` ${app.name}` : "";
+						return /* @__PURE__ */ _jsx(MenuItem, {
+							icon: iPlus,
+							title: `Install${named}`,
+							sub: `On its owner's account, or any account if it is public on ${name}.`,
+							onClick: () => install(app.id)
+						}, app.id);
+					}),
+					shared ? null : /* @__PURE__ */ _jsx(MenuItem, {
+						icon: iSpark,
+						onClick: start,
+						title: `Create another ${name} app`,
+						sub: "A separate app with its own name."
+					}),
+					shared || !appUpdate ? null : apps.map((app) => /* @__PURE__ */ _jsx(MenuItem, {
+						icon: iUpload,
+						title: apps.length > 1 ? `Update ${app.name} on ${name}` : `Update on ${name}`,
+						sub: app.changed ? "Changed since last update" : undefined,
+						onClick: () => update(app)
+					}, `update ${app.id}`)),
+					shared ? null : apps.map((app) => /* @__PURE__ */ _jsx(MenuItem, {
+						icon: iX,
+						title: `Remove ${app.name}`,
+						danger: true,
+						onClick: () => setRemoving(app)
+					}, `remove ${app.id}`))
+				]
+			})]
+		}),
+		dialog,
+		where,
+		removal,
+		failure,
+		updating ? /* @__PURE__ */ _jsx(UpdateDialog, {
+			app: updating.app,
+			name,
+			check: updating.check,
+			// What the check stored shows in the row menu.
+			onClose: () => {
+				setUpdating(undefined);
+				nav.refresh();
+			}
+		}) : null
+	] });
+}