feat(alerts): full-page escalation chain editor

apps/web/src/lab/entries/escalation-editor.ts

@@ -0,0 +1,16 @@
+import { defineShellLab } from "../shell-lab"
+import { breadcrumbs, Flags, flags, init, Message, Model, update, view } from "../escalation-editor-lab"
+
+// `/lab/escalation-editor`: the escalation chain editor page over fixtures (`?state=`).
+
+export const lab = defineShellLab("Escalation chain editor", {
+	Model,
+	Message,
+	Flags,
+	flags,
+	init,
+	update,
+	view,
+	currentPath: "/lab/escalation-editor",
+	breadcrumbs,
+})

apps/web/src/lab/entries/escalation.ts

@@ -1,7 +1,7 @@
 import { defineShellLab } from "../shell-lab"
 import { breadcrumbs, Flags, flags, init, Message, Model, update, view } from "../escalation-lab"
 
-// `/lab/escalation`: escalation chains, their dialog, the rule tier picker and the incident rail (`?state=`).
+// `/lab/escalation`: escalation chains, the rule tier picker and the incident rail (`?state=`).
 
 export const lab = defineShellLab("Escalation chains", {
 	Model,

apps/web/src/lab/entries/kit/buttons.ts

@@ -31,6 +31,7 @@ const VARIANTS = [
 	"ghost",
 	"destructive",
 	"destructive-outline",
+	"destructive-ghost",
 	"link",
 	"dashed",
 ] as const
@@ -417,16 +418,27 @@ const actionBars = (h: HtmlBuilder<Message>): ReadonlyArray<Html> => [
 				statusDot(h, { tone: "live" }),
 				typography(h, { size: "sm", tone: "foreground" }, ["Unsaved changes"]),
 			],
-			actions: [button(h, { variant: "ghost", size: "sm" }, ["Discard"]), button(h, { size: "sm" }, ["Save"])],
+			actions: [
+				button(h, { variant: "ghost", size: "sm" }, ["Discard"]),
+				button(h, { size: "sm" }, ["Save"]),
+			],
 		}),
 	]),
 	kitRow(h, "Editor, with a notice", [
 		actionBar(h, {
 			label: "Rule actions",
 			className: "static w-full",
-			notice: [alert(h, { variant: "crit", size: "sm" }, [icon(h, "CircleXmarkIcon"), alertTitle(h, ["Couldn't save the rule"])])],
+			notice: [
+				alert(h, { variant: "crit", size: "sm" }, [
+					icon(h, "CircleXmarkIcon"),
+					alertTitle(h, ["Couldn't save the rule"]),
+				]),
+			],
 			leading: [typography(h, { size: "sm", tone: "muted" }, ["Drop health checks from api-gateway"])],
-			actions: [button(h, { variant: "outline", size: "sm" }, ["Cancel"]), button(h, { size: "sm" }, ["Save changes"])],
+			actions: [
+				button(h, { variant: "outline", size: "sm" }, ["Cancel"]),
+				button(h, { size: "sm" }, ["Save changes"]),
+			],
 		}),
 	]),
 	kitRow(h, "Step flow", [

apps/web/src/lab/escalation-editor-lab.ts

@@ -0,0 +1,202 @@
+import * as Policy from "@maple/domain/policy"
+import { OrgId } from "@maple/domain"
+import { OnCallScheduleId } from "@maple/domain/http"
+import { EscalationChainPublicId } from "@maple/domain/http/v2"
+import { Effect, Option, Result, Schema, Array as Arr, String as Str } from "effect"
+import { Command, type Update } from "foldkit"
+import type { Html, HtmlBuilder } from "foldkit/html"
+import { defineMessageUnion } from "foldkit/message"
+import { FocusChainElement } from "../page/alerts/escalation-chain/command"
+import * as ChainMessage from "../page/alerts/escalation-chain/message"
+import * as ChainModel from "../page/alerts/escalation-chain/model"
+import { init as chainInit, update as chainUpdate } from "../page/alerts/escalation-chain/update"
+import { chainTitle, view as chainView } from "../page/alerts/escalation-chain/view"
+import { routingTabHref } from "../page/alerts/shared/escalation-chains"
+import {
+	chainDestinations,
+	chainOf,
+	chainScheduleUuid,
+	populatedChains,
+} from "../page/alerts/shared/escalation-test-fixtures"
+import { memberId, oncallMembers, populatedSchedules } from "../page/alerts/shared/oncall-test-fixtures"
+import { ORG, ruleId, ruleRow } from "../page/alerts/shared/test-rows"
+import type { PageContext } from "../page/contract"
+import type { Resources } from "../platform/resources"
+import { keepLocal } from "./local-commands"
+
+// `/lab/escalation-editor`: the escalation chain editor page over fixtures. `?state=` picks one.
+
+export const LabState = Schema.Literals([
+	"new",
+	"populated",
+	"inserted",
+	"invalid",
+	"delete",
+	"leave",
+	"readonly",
+	"long",
+])
+export type LabState = typeof LabState.Type
+
+export const Flags = Schema.Struct({ state: LabState })
+export type Flags = typeof Flags.Type
+
+export const flags: Effect.Effect<Flags> = Effect.sync(() => ({
+	state: Option.getOrElse(
+		Schema.decodeUnknownOption(LabState)(new URLSearchParams(window.location.search).get("state")),
+		(): LabState => "populated",
+	),
+}))
+
+export const Model = Schema.Struct({ state: LabState, page: ChainModel.Model })
+export type Model = typeof Model.Type
+
+export const Message = defineMessageUnion({ GotPageMessage: { message: ChainMessage.Message } })
+export type Message = typeof Message.Type
+
+type Return = Update.Return<Model, Message, Resources>
+type PageCommands = ReadonlyArray<Command.Command<ChainMessage.Message, never, Resources>>
+
+const CONTEXT: PageContext = { orgId: Schema.decodeSync(OrgId)(ORG), pinnedNamespace: null, timeZone: "UTC" }
+const RULES = [
+	ruleRow(1, { name: "Checkout error rate" }),
+	ruleRow(2, { name: "Checkout p95 latency", enabled: false }),
+	ruleRow(3, { name: "Payments webhook failures" }),
+]
+const M = ChainMessage.Message
+
+/** The fixture destinations with the type their name says, so each draws its own mark. */
+const TYPES: ReadonlyArray<readonly [prefix: string, type: string, chatConnector?: string]> = [
+	["Slack", "chat", "slack"],
+	["PagerDuty", "pagerduty"],
+	["Email", "email"],
+	["Discord", "discord"],
+	["Microsoft Teams", "microsoft-teams"],
+]
+const DESTINATIONS = Arr.map(chainDestinations, (row) =>
+	Option.match(
+		Arr.findFirst(TYPES, ([prefix]) => Str.startsWith(prefix)(row.name)),
+		{
+			onNone: () => row,
+			onSome: ([, type, chatConnector]) => ({
+				...row,
+				type,
+				config_json: {
+					summary: row.name,
+					channelLabel: null,
+					...(chatConnector === undefined ? undefined : { chatConnector }),
+				},
+			}),
+		},
+	),
+)
+
+/** One schedule, under the id the fixture chains page. */
+const SCHEDULES = Arr.map(Arr.take(populatedSchedules(), 1), (schedule) => ({
+	...schedule,
+	id: Schema.decodeSync(OnCallScheduleId)(chainScheduleUuid(1)),
+}))
+
+/** The everyday chain, paging a schedule and a person beside its destinations. */
+const EVERYDAY = chainOf({
+	n: 1,
+	name: "Checkout on-call",
+	description: "Checkout team first, then the platform lead.",
+	steps: [
+		{ destinations: [1], schedules: [1], wait: 10 },
+		{ destinations: [2], wait: 15 },
+		{ destinations: [3], users: [memberId(0)], wait: 30 },
+	],
+	repeat: 2,
+	ruleIds: [ruleId(1), ruleId(2)],
+})
+const LONG = populatedChains([])[2]
+
+const NO_COMMANDS: PageCommands = []
+
+/** The page's local Commands: the kit's, and its own focus moves, which only touch the DOM. */
+const kept = (commands: PageCommands | undefined): PageCommands => [
+	...keepLocal(commands),
+	...Arr.filter(commands ?? [], (command) => command.name === FocusChainElement.name),
+]
+
+const run = (model: ChainModel.Model, messages: ReadonlyArray<ChainMessage.Message>) =>
+	Arr.reduce(messages, { model, commands: NO_COMMANDS }, (current, message) => {
+		const next = chainUpdate(current.model, message, CONTEXT)
+		return { model: next.model, commands: [...current.commands, ...kept(next.commands)] }
+	})
+
+const pageFor = (state: LabState) => {
+	const isNew = state === "new" || state === "invalid"
+	const chain = state === "long" ? (LONG ?? EVERYDAY) : EVERYDAY
+	const entered = chainInit(
+		isNew
+			? { _tag: "AlertsEscalationChainNew", search: {} }
+			: {
+					_tag: "AlertsEscalationChain",
+					chainId: Schema.encodeSync(EscalationChainPublicId)(chain.id),
+					search: {},
+				},
+		CONTEXT,
+	).model
+	const base = [
+		M.CompletedFetchSession({
+			orgId: ORG,
+			grants: Policy.grantsOf([state === "readonly" ? "org:member" : "org:engineer"]),
+		}),
+		M.CompletedFetchMembers({ result: Result.succeed(oncallMembers) }),
+		M.CompletedFetchSchedules({ result: Result.succeed(SCHEDULES) }),
+		M.UpdatedDestinations({ orgId: ORG, rows: DESTINATIONS }),
+		M.UpdatedRules({ orgId: ORG, rows: RULES }),
+	]
+	const loaded = isNew
+		? []
+		: [M.CompletedFetchExisting({ key: entered.existing.key ?? "", result: Result.succeed(chain) })]
+	const extra: ReadonlyArray<ChainMessage.Message> =
+		state === "invalid"
+			? [M.ChangedWait({ key: "s0", value: "2000" }), M.ClickedSave()]
+			: state === "inserted"
+				? [M.ClickedInsertStep({ index: 1 })]
+				: state === "delete"
+					? [M.ClickedDelete()]
+					: state === "leave"
+						? [M.ChangedWait({ key: "s0", value: "20" }), M.ClickedCancel()]
+						: []
+	return run(entered, [...base, ...loaded, ...extra])
+}
+
+export const init = (flags: Flags): Return => {
+	const page = pageFor(flags.state)
+	return {
+		model: { state: flags.state, page: page.model },
+		commands: Command.mapMessages(page.commands, (message) => Message.GotPageMessage({ message })),
+	}
+}
+
+export const update = (model: Model, message: Message): Return =>
+	Message.match<Return>(message, {
+		GotPageMessage: ({ message: child }) => {
+			const next = chainUpdate(model.page, child, CONTEXT)
+			return {
+				model: { ...model, page: next.model },
+				commands: Command.mapMessages(kept(next.commands), (inner) =>
+					Message.GotPageMessage({ message: inner }),
+				),
+			}
+		},
+	})
+
+export const breadcrumbs = (model: Model) => [
+	{ label: "Alerts", href: "/alerts" },
+	{ label: "Routing", href: routingTabHref() },
+	{ label: chainTitle(model.page) },
+]
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Html =>
+	h.submodel({
+		slotId: "lab-escalation-editor",
+		model: model.page,
+		view: chainView,
+		viewInputs: { context: CONTEXT },
+		toParentMessage: (message: ChainMessage.Message) => Message.GotPageMessage({ message }),
+	})

apps/web/src/lab/escalation-lab.ts

@@ -1,13 +1,10 @@
 import * as Policy from "@maple/domain/policy"
 import { OrgId } from "@maple/domain"
-import type { LoadFailure } from "@maple/views/data/load-failure"
 import { Effect, Option, Result, Schema, Array as Arr, String as Str } from "effect"
 import { Command, type Update } from "foldkit"
 import type { Html, HtmlBuilder } from "foldkit/html"
 import { defineMessageUnion } from "foldkit/message"
-import * as Menu from "@maple/views/ui/menu"
 import * as Select from "@maple/views/ui/select"
-import * as ChainDialog from "../page/alerts/escalation-dialog/dialog"
 import * as EditorMessage from "../page/alerts/editor/message"
 import * as EditorModel from "../page/alerts/editor/model"
 import { init as editorInit } from "../page/alerts/editor/init"
@@ -33,16 +30,12 @@ import type { PageContext } from "../page/contract"
 import type { Resources } from "../platform/resources"
 import { keepLocal } from "./local-commands"
 
-// `/lab/escalation`: escalation chains in the Routing tab, their dialog, a rule tier's chain picker
+// `/lab/escalation`: escalation chains in the Routing tab, a rule tier's chain picker
 // and the incident rail, over fixtures. `?state=` picks one.
 
 export const LabState = Schema.Literals([
 	"chains-empty",
 	"chains",
-	"dialog-new",
-	"dialog-edit",
-	"dialog-invalid",
-	"dialog-error",
 	"rule-picker",
 	"incident-escalating",
 	"incident-paused",
@@ -99,18 +92,6 @@ const fold = <PM, PS>(
 
 const hubStep = (model: HubModel.Model, message: HubMessage.Message) =>
 	HubUpdate.update(model, message, CONTEXT)
-const dialog = (message: ChainDialog.Message) => HubMessage.Message.GotChainDialogMessage({ message })
-
-const SAVE_FAILURE: LoadFailure = {
-	_tag: "@maple/http/errors/AlertValidationError",
-	type: "invalid_request_error",
-	code: "invalid_request",
-	title: "Invalid request",
-	message: "Step 2 names a destination that no longer exists.",
-	retryable: false,
-	recovery: "fix_request",
-}
-
 const hubFor = (state: LabState): Step<HubModel.Model, HubMessage.Message> => {
 	const entered = HubUpdate.init(hubAt({ tab: "routing" }), CONTEXT).model
 	const chains = state === "chains-empty" ? [] : populatedChains([ruleId(1), ruleId(2), ruleId(3)])
@@ -128,45 +109,7 @@ const hubFor = (state: LabState): Step<HubModel.Model, HubMessage.Message> => {
 			result: Result.succeed(chains),
 		}),
 	]
-	const firstStepKey = "s0"
-	const extra: ReadonlyArray<HubMessage.Message> =
-		state === "dialog-new"
-			? [HubMessage.Message.ClickedNewChain()]
-			: state === "dialog-invalid"
-				? [
-						HubMessage.Message.ClickedNewChain(),
-						dialog(ChainDialog.Message.ChangedWait({ key: firstStepKey, value: "2000" })),
-						dialog(ChainDialog.Message.ClickedSave()),
-					]
-				: state === "dialog-error"
-					? [
-							HubMessage.Message.GotRowMenuMessage({
-								menuId: `chain:${chainUuid(1)}`,
-								message: Menu.Message.ClickedItem({
-									index: 0,
-									item: { kind: "Item", value: "edit" },
-								}),
-							}),
-							dialog(ChainDialog.Message.ClickedSave()),
-							dialog(
-								ChainDialog.Message.CompletedSave({
-									openCount: 1,
-									result: Result.fail(SAVE_FAILURE),
-								}),
-							),
-						]
-					: state === "dialog-edit"
-						? [
-								HubMessage.Message.GotRowMenuMessage({
-									menuId: `chain:${chainUuid(3)}`,
-									message: Menu.Message.ClickedItem({
-										index: 0,
-										item: { kind: "Item", value: "edit" },
-									}),
-								}),
-							]
-						: []
-	return fold({ model: entered }, [...base, ...extra], hubStep)
+	return fold({ model: entered }, base, hubStep)
 }
 
 const editorStep = (model: EditorModel.Model, message: EditorMessage.Message) =>
@@ -250,8 +193,7 @@ const incidentFor = (state: LabState): Step<IncidentModel.Model, IncidentMessage
 	return settled
 }
 
-const isHub = (state: LabState) =>
-	state === "chains" || state === "chains-empty" || Str.startsWith("dialog-")(state)
+const isHub = (state: LabState) => state === "chains" || state === "chains-empty"
 const isIncident = (state: LabState) => Str.startsWith("incident-")(state)
 
 export const init = (flags: Flags): Return => {

apps/web/src/lab/registry.ts

@@ -89,7 +89,15 @@ export const LAB_ENTRIES: ReadonlyArray<LabEntry> = [
 		path: "/lab/escalation",
 		title: "Escalation chains",
 		description:
-			"The Routing tab's escalation chains empty and populated, the chain dialog new, editing, invalid and failing, a rule tier's chain picker, and the incident rail escalating, paused or finished (`?state=`).",
+			"The Routing tab's escalation chains empty and populated, a rule tier's chain picker, and the incident rail escalating, paused or finished (`?state=`).",
+		kind: "lab",
+		session: "none",
+	},
+	{
+		path: "/lab/escalation-editor",
+		title: "Escalation chain editor",
+		description:
+			"The escalation chain editor page new, populated, with a step inserted, invalid, asking to delete or to leave, read-only and with a long chain (`?state=`).",
 		kind: "lab",
 		session: "none",
 	},