mockaton 13.11.0 → 13.11.2

package/src/client/app-mock-list.css

@@ -0,0 +1,340 @@
+.SubToolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding-right: 14px;
+	padding-left: 16px;
+	border-bottom: 1px solid var(--colorBorder);
+	background: var(--colorBgHeader);
+}
+
+.GroupByMethod {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	cursor: pointer;
+}
+
+.BulkSelector {
+	span {
+		color: var(--colorLabel);
+	}
+	select {
+		width: 110px;
+		padding: 6px 8px;
+		margin-left: 4px;
+		background-image: none;
+		text-align-last: center;
+		color: var(--colorText);
+		font-size: 11px;
+		background-color: var(--colorBgHeaderField);
+		border-radius: var(--radius);
+		box-shadow: var(--boxShadowRimDrop);
+		transition: background-color ease-in-out 120ms;
+
+		&:hover {
+			background-color: var(--colorBgFieldHover);
+		}
+	}
+}
+
+.Table {
+	height: 100%;
+	padding: 16px 16px 64px 15px;
+	user-select: none;
+	overflow-y: auto;
+
+	.TableHeading {
+		padding-bottom: 4px;
+		padding-left: 1px;
+		border-top: 24px solid transparent;
+		margin-left: 94px;
+		font-weight: bold;
+		text-align: left;
+
+		&:first-of-type {
+			border-top: 0;
+		}
+
+		&.canProxy {
+			margin-left: 124px;
+		}
+	}
+
+	.TableRow {
+		display: flex;
+		margin-left: 24px;
+
+		&.animIn {
+			opacity: 0;
+			transform: scaleY(0);
+			animation: _kfRowIn 180ms ease-in-out forwards;
+		}
+	}
+
+	.FolderGroup {
+		position: relative;
+		border-radius: var(--radius);
+
+		> summary {
+			left: 0;
+			display: flex;
+			overflow: hidden;
+			align-items: center;
+			padding: 5px 0;
+			font-weight: 500;
+			font-size: 12px;
+			list-style: none;
+			cursor: pointer;
+			user-select: none;
+			color: var(--colorLabel);
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			border-radius: var(--radius);
+
+			&:active {
+				cursor: grabbing;
+			}
+
+			&::-webkit-details-marker,
+			&::marker {
+				display: none;
+			}
+
+			&:hover {
+				background: var(--colorHover);
+			}
+
+			.FolderName {
+				margin-left: 125px;
+				&.canProxy {
+					margin-left: 155px;
+				}
+
+				&.groupedByMethod {
+					margin-left: 79px;
+					&.canProxy {
+						margin-left: 109px;
+					}
+				}
+			}
+
+			.FolderChevron {
+				display: flex;
+				width: 16px;
+				height: 16px;
+				flex-shrink: 0;
+				align-items: center;
+				justify-content: center;
+				opacity: .7;
+				transition: transform cubic-bezier(.2, .7, .8, 1.4) 400ms;
+				transform: rotate(-90deg);
+
+				svg {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+		&[open] {
+			&:has(summary:hover):not(:has(details:hover)) {
+				background: linear-gradient(90deg, var(--colorHover), var(--colorBg));
+			}
+
+			> summary {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 16px;
+
+				.FolderChevron {
+					transform: rotate(0deg);
+				}
+				.FolderName {
+					display: none;
+				}
+			}
+		}
+	}
+}
+
+@keyframes _kfRowIn {
+	to {
+		opacity: 1;
+		transform: scaleY(1);
+	}
+}
+
+.Method {
+	overflow: hidden;
+	min-width: 38px;
+	padding: 4px 0;
+	margin-top: 3px;
+	margin-right: 8px;
+	color: var(--colorLabel);
+	font-size: 11px;
+	text-align: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.PreviewLink {
+	position: relative;
+	left: -8px;
+	display: inline-block;
+	width: auto;
+	min-width: 140px;
+	flex-grow: 1;
+	padding: 6px 8px;
+	margin-right: -2px;
+	margin-left: 4px;
+	font-weight: 500;
+	border-radius: var(--radius);
+	word-break: break-word;
+
+	&:hover {
+		background: var(--colorHover);
+	}
+	&.chosen {
+		color: white;
+		background: var(--colorAccent);
+	}
+	.dittoDir {
+		opacity: 0.8;
+		filter: saturate(0.1);
+	}
+}
+
+
+.MockSelector {
+	min-width: 58px;
+	height: 24px;
+	padding-right: 20px;
+	padding-left: 8px;
+	text-overflow: ellipsis;
+	text-align: right;
+
+	&:enabled {
+		box-shadow: var(--boxShadowRimDrop);
+		&:hover {
+			background-color: var(--colorBgFieldHover);
+		}
+	}
+
+	&.nonDefault {
+		font-weight: bold;
+		font-size: 11px;
+	}
+	&.status4xx {
+		background: var(--colorBg4xx);
+	}
+	&:disabled {
+		padding-right: 4px;
+		padding-left: 0;
+		border-color: transparent;
+		appearance: none;
+		background: transparent;
+		cursor: default;
+		color: var(--colorLabel);
+		opacity: 0.8;
+	}
+}
+
+
+.Toggler {
+	display: flex;
+	margin-top: 2px;
+
+	input {
+		/* For click drag target */
+		position: absolute;
+		width: 22px;
+		height: 22px;
+		opacity: 0;
+
+		&:focus-visible {
+			outline: 0;
+			& + .checkboxBody {
+				outline: 2px solid var(--colorAccent);
+			}
+		}
+
+		&:disabled + .checkboxBody {
+			cursor: not-allowed;
+			opacity: 0.7;
+		}
+
+		&:checked + .checkboxBody {
+			border-color: var(--colorAccent);
+			fill: var(--colorAccent);
+			background: var(--colorAccent);
+			stroke: var(--colorBg);
+		}
+
+		&:enabled:hover:not(:checked) + .checkboxBody {
+			border-color: var(--colorHover);
+			background: var(--colorHover);
+			stroke: var(--colorText);
+		}
+	}
+
+	.checkboxBody {
+		display: flex;
+		width: 22px;
+		height: 21px;
+		align-items: center;
+		justify-content: center;
+		fill: none;
+		stroke: var(--colorLabel);
+		stroke-width: 2.5px;
+		border-radius: 50%;
+		box-shadow: var(--boxShadowRimDrop);
+		background-color: var(--colorBgHeaderField);
+	}
+
+	&.canProxy {
+		margin-left: 30px;
+	}
+}
+
+.DelayToggler {
+}
+
+.ProxyToggler {
+	margin-right: 8px;
+
+	.checkboxBody {
+		svg {
+			width: 15px;
+		}
+	}
+}
+
+.StatusCodeToggler {
+	margin-right: 10px;
+	margin-left: 8px;
+
+	input {
+		width: 26px;
+
+		&:not(:checked):enabled:hover + .checkboxBody {
+			border-color: var(--colorRed);
+			color: var(--colorRed);
+			background: transparent;
+		}
+		&:checked + .checkboxBody {
+			border-color: var(--colorRed);
+			color: white;
+			background: var(--colorRed);
+		}
+	}
+
+	.checkboxBody {
+		width: 27px;
+		padding: 4px;
+		font-size: 10px;
+		font-weight: bold;
+		color: var(--colorLabel);
+	}
+}

package/src/client/app-mock-list.js

@@ -0,0 +1,370 @@
+import { createElement as r, t, Fragment } from './utils/dom.js'
+
+import { store } from './app-store.js'
+import { previewMock } from './app-payload-viewer.js'
+import { classNames, adoptSheet } from './utils/css.js'
+import { TimerIcon, CloudIcon, ChevronDownIcon } from './graphics.js'
+
+import CSS from './app-mock-list.css' with { type: 'css' }
+adoptSheet(CSS, './app-mock-list.css')
+
+
+export function MockList() {
+	return Fragment(
+		r('div', { className: CSS.SubToolbar },
+			GroupByMethod(),
+			BulkSelector()),
+		Table())
+}
+
+
+function GroupByMethod() {
+	return (
+		r('label', { className: CSS.GroupByMethod },
+			r('input', {
+				type: 'checkbox',
+				checked: store.groupByMethod,
+				onChange: store.toggleGroupByMethod
+			}),
+			r('span', { className: CSS.checkboxBody }, t`Group by Method`)))
+}
+
+
+function BulkSelector() {
+	const { comments } = store
+	const firstOption = t`Pick Comment…`
+	function onChange() {
+		const value = this.value
+		this.value = firstOption // hack so it’s always selected
+		store.bulkSelectByComment(value)
+	}
+	const disabled = !comments.length
+	return (
+		r('label', { className: CSS.BulkSelector },
+			r('span', null, t`Bulk Select`),
+			r('select', {
+					disabled,
+					autocomplete: 'off',
+					title: disabled
+						? t`No mock files have comments which are anything within parentheses on the filename.`
+						: undefined,
+					onChange
+				},
+				r('option', { value: firstOption }, firstOption),
+				r('hr'),
+				comments.map(value => r('option', { value }, value)))))
+}
+
+function Table() {
+	return (
+		r('div', {
+				ref: Table.ref,
+				className: CSS.Table
+			},
+			TableContent()))
+}
+Table.ref = { width: undefined }
+Table.$ = selector => Table.ref.elem.querySelector(selector)
+Table.$$ = selector => Table.ref.elem.querySelectorAll(selector)
+
+
+
+
+function TableContent() {
+	if (!Object.keys(store.brokersByMethod).length)
+		return r('div', null, t`No mocks found`)
+
+	if (store.groupByMethod)
+		return Object.keys(store.brokersByMethod).map(method => Fragment(
+			r('div', {
+				className: classNames(CSS.TableHeading, store.canProxy && CSS.canProxy)
+			}, method),
+			FolderGroups(store.folderGroupsByMethod(method))))
+
+	return FolderGroups(store.folderGroupsByMethod('*'))
+}
+
+
+function FolderGroups(brokersTree) {
+	const res = []
+	for (const b of brokersTree) {
+		if (!b.children.length)
+			res.push(Row(b))
+		else
+			res.push(FolderGroup(b))
+	}
+	return res
+}
+
+function FolderGroup(broker) {
+	const folder = broker.urlMask
+	const children = broker.children
+	return (
+		r('details', {
+				className: CSS.FolderGroup,
+				open: !store.collapsedFolders.has(folder),
+				onToggle() {
+					store.setFolderCollapsed(folder, !this.open)
+				}
+			},
+			r('summary', null,
+				r('span', { className: CSS.FolderChevron }, ChevronDownIcon()),
+				r('span', {
+						className: classNames(
+							CSS.FolderName,
+							store.groupByMethod && CSS.groupedByMethod,
+							store.canProxy && CSS.canProxy)
+					},
+					folder + '…')),
+			Row(broker),
+			children.map(c => c.children.length
+				? FolderGroup(c)
+				: Row(c))))
+}
+
+/** @param {BrokerRowModel} row */
+function Row(row) {
+	const { method, urlMask } = row
+	return (
+		r('div', {
+				key: row.key,
+				className: classNames(CSS.TableRow, store.mounted && row.isNew && CSS.animIn)
+			},
+
+			store.canProxy && ClickDragToggler({
+				className: CSS.ProxyToggler,
+				title: t`Proxy Toggler`,
+				body: CloudIcon(),
+				checked: row.proxied,
+				commit(checked) {
+					store.setProxied(method, urlMask, checked)
+				}
+			}),
+
+			ClickDragToggler({
+				className: CSS.DelayToggler,
+				title: t`Delay`,
+				body: TimerIcon(),
+				checked: row.delayed,
+				commit(checked) {
+					store.setDelayed(method, urlMask, checked)
+				}
+			}),
+
+			ClickDragToggler(
+				row.isStatic
+					? {
+						className: CSS.StatusCodeToggler,
+						title: t`Not Found`,
+						body: t`404`,
+						disabled: row.opts.length === 1 && row.status === 404,
+						checked: !row.proxied && row.status === 404,
+						commit() { store.toggleStatus(method, urlMask, 404) }
+					}
+					: {
+						className: CSS.StatusCodeToggler,
+						title: t`Internal Server Error`,
+						body: t`500`,
+						disabled: row.opts.length === 1 && row.status === 500,
+						checked: !row.proxied && row.status === 500,
+						commit() { store.toggleStatus(method, urlMask, 500) }
+					}),
+
+			!store.groupByMethod && r('span', { className: CSS.Method }, method),
+
+			PreviewLink(method, urlMask, row.urlMaskDittoed),
+
+			MockSelector(row)))
+}
+
+
+export function renderRow(method, urlMask) {
+	unChooseOld()
+	const row = store.brokerAsRow(method, urlMask)
+	const tr = Table.$(`.${CSS.TableRow}[key="${row.key}"]`)
+	mergeTableRow(tr, Row(row))
+	previewMock()
+
+	function unChooseOld() {
+		return Table.$(`a.${CSS.chosen}`)
+			?.classList.remove(CSS.chosen)
+	}
+
+	function mergeTableRow(oldRow, newRow) {
+		for (let i = 0; i < newRow.children.length; i++) {
+			const oldEl = oldRow.children[i]
+			const newEl = newRow.children[i]
+			switch (newEl.tagName) {
+				case 'LABEL': {
+					const oldInput = oldEl.querySelector('[type="checkbox"]')
+					const newInput = newEl.querySelector('[type="checkbox"]')
+					oldInput.checked = newInput.checked
+					oldInput.disabled = newInput.disabled
+					break
+				}
+				case 'A':
+					oldEl.className = newEl.className
+					break
+				case 'SELECT':
+					oldEl.replaceChildren(...newEl.cloneNode(true).children)
+					oldEl.className = newEl.className
+					oldEl.disabled = newEl.disabled
+					oldEl.value = newEl.value
+					break
+			}
+		}
+	}
+}
+
+
+function PreviewLink(method, urlMask, urlMaskDittoed) {
+	function onClick(event) {
+		event.preventDefault()
+		store.previewLink(method, urlMask)
+	}
+	const isChosen = store.chosenLink.method === method && store.chosenLink.urlMask === urlMask
+	const [ditto, tail] = urlMaskDittoed
+	return (
+		r('a', {
+			className: classNames(CSS.PreviewLink, isChosen && CSS.chosen),
+			href: urlMask,
+			onClick
+		}, ditto
+			? [r('span', { className: CSS.dittoDir }, ditto), tail]
+			: tail))
+}
+
+
+/** @param {BrokerRowModel} row */
+function MockSelector(row) {
+	return (
+		r('select', {
+			onChange() {
+				store.selectFile(this.value)
+			},
+			onKeyDown(event) {
+				if (event.key === 'ArrowRight' || event.key === 'ArrowLeft')
+					event.preventDefault()
+				// Because in Firefox they change the select.option, and 
+				// we use those keys for spreadsheet-like navigation.
+			},
+			'aria-label': t`Mock Selector`,
+			disabled: row.opts.length < 2,
+			className: classNames(
+				CSS.MockSelector,
+				row.selectedIdx > 0 && CSS.nonDefault,
+				row.selectedFileIs4xx && CSS.status4xx)
+		}, row.opts.map(([value, label, selected]) =>
+			r('option', { value, selected }, label))))
+}
+
+
+function ClickDragToggler({ checked, commit, className, title, body }) {
+	function onPointerEnter(event) {
+		if (event.buttons === 1)
+			onPointerDown.call(this, event)
+	}
+
+	function onPointerDown(event) {
+		if (event.altKey) {
+			onExclusiveClick.call(this)
+			return
+		}
+		this.checked = !this.checked
+		this.focus()
+		commit(this.checked)
+	}
+
+	function onExclusiveClick() {
+		const selector = selectorForColumnOf(this)
+		if (!selector)
+			return
+
+		// Uncheck all other in the column. 
+		for (const elem of Table.$$(selector))
+			if (elem !== this && elem.checked && !elem.disabled) {
+				elem.checked = false
+				elem.dispatchEvent(new Event('change'))
+			}
+
+		if (!this.checked) {
+			this.checked = true
+			this.dispatchEvent(new Event('change'))
+		}
+		this.focus()
+	}
+
+	function onClick(event) {
+		if (event.pointerType === 'mouse')
+			event.preventDefault()
+	}
+	function onChange() {
+		commit(this.checked)
+	}
+	return (
+		r('label', { className: classNames(CSS.Toggler, className), title },
+			r('input', {
+				type: 'checkbox',
+				checked,
+				onPointerEnter,
+				onPointerDown,
+				onClick,
+				onChange
+			}),
+			r('span', { className: CSS.checkboxBody }, body)))
+}
+
+
+
+function selectorForColumnOf(elem) {
+	return columnSelectors().find(s => elem?.matches(s))
+}
+
+function columnSelectors() {
+	return [
+		`.${CSS.TableRow} .${CSS.ProxyToggler} input`,
+		`.${CSS.TableRow} .${CSS.DelayToggler} input`,
+		`.${CSS.TableRow} .${CSS.StatusCodeToggler} input`,
+		`.${CSS.TableRow} .${CSS.PreviewLink}`,
+		// No .MockSelector because down/up arrows have native behavior on them
+	]
+}
+
+export function initKeyboardNavigation() {
+	const rowSelectors = [
+		...columnSelectors(),
+		`.${CSS.TableRow} .${CSS.MockSelector}:enabled`,
+	]
+
+	addEventListener('keydown', function ({ key }) {
+		switch (key) {
+			case 'ArrowDown':
+			case 'ArrowUp': {
+				const pivot = document.activeElement
+				const sel = selectorForColumnOf(pivot)
+				if (sel) {
+					const offset = key === 'ArrowDown' ? +1 : -1
+					const siblings = Table.$$(sel)
+					circularAdjacent(offset, siblings, pivot).focus()
+				}
+				break
+			}
+			case 'ArrowRight':
+			case 'ArrowLeft': {
+				const pivot = document.activeElement
+				const sel = rowSelectors.find(s => pivot?.matches(s))
+				if (sel) {
+					const offset = key === 'ArrowRight' ? +1 : -1
+					const siblings = pivot.closest(`.${CSS.TableRow}`).querySelectorAll(rowSelectors.join(','))
+					circularAdjacent(offset, siblings, pivot).focus()
+				}
+				break
+			}
+		}
+	})
+
+	function circularAdjacent(step, siblings, pivot) {
+		const arr = Array.from(siblings)
+		return arr[(arr.indexOf(pivot) + step + arr.length) % arr.length]
+	}
+}