mockaton 10.3.3 → 10.3.5

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "10.3.3",
+	"version": "10.3.5",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/ApiConstants.js

@@ -28,8 +28,11 @@ export const DF = { // Dashboard Fields (XHR)
 	syncVersion: 'last_received_sync_version'
 }
 
+// TODO @ThinkAbout these affecting partial matches when bulk-selecting
+// e.g. 'ton' would match 
 export const AUTOGENERATED_500_COMMENT = '(Mockaton 500)'
 export const DEFAULT_MOCK_COMMENT = '(default)'
+
 export const EXT_FOR_UNKNOWN_MIME = 'unknown'
 export const LONG_POLL_SERVER_TIMEOUT = 8_000
 

package/src/Dashboard.css

@@ -102,10 +102,6 @@ select, a, input, button {
 
 a {
 	text-decoration: none;
-
-	&:hover {
-		text-decoration: underline;
-	}
 }
 
 a,
@@ -141,6 +137,7 @@ select {
 	}
 	&:disabled {
 		cursor: not-allowed;
+		opacity: 0.5;
 	}
 }
 
@@ -151,22 +148,38 @@ header {
 	border-bottom: 1px solid var(--colorSecondaryActionBorder);
 	background: var(--colorHeaderBackground);
 
+	> img {
+		width: 120px;
+		align-self: end;
+		margin-right: 22px;
+		margin-bottom: 5px;
+	}
+
 	> div {
 		display: flex;
+		width: 100%;
 		flex-wrap: wrap;
 		align-items: flex-end;
 		gap: 16px 8px;
+	}
 
-		@media (max-width: 760px) {
-			max-width: 400px;
+	@media (max-width: 760px) {
+		> img {
+			width: 100px;
+			align-self: center;
+		}
+		
+		> div {
+			width: 400px;
+			.MenuTrigger {
+				margin-left: unset;
+			}
 		}
 	}
-
-	img {
-		width: 120px;
-		align-self: end;
-		margin-right: 22px;
-		margin-bottom: 5px;
+	@media (max-width: 424px) {
+		> img {
+			display: none;
+		}
 	}
 
 	.Field {
@@ -253,7 +266,9 @@ header {
 	.ResetButton {
 		padding: 6px 12px;
 		border: 1px solid var(--colorRed);
+		margin-right: 8px;
 		margin-left: 4px;
+		outline-offset: 1px;
 		background: transparent;
 		color: var(--colorRed);
 		border-radius: 50px;
@@ -269,6 +284,7 @@ header {
 		height: 24px;
 		flex-shrink: 0;
 		align-self: end;
+		margin-bottom: 2px;
 		margin-left: auto;
 		fill: var(--colorSecondaryAction);
 		background: transparent;
@@ -278,6 +294,7 @@ header {
 			fill: var(--colorAccent);
 		}
 	}
+
 }
 
 .SettingsMenu {
@@ -362,10 +379,6 @@ main {
 table {
 	border-collapse: collapse;
 
-	tr {
-		border-top: 3px solid transparent;
-	}
-
 	th {
 		padding-bottom: 2px;
 		padding-left: 4px;
@@ -395,7 +408,6 @@ table {
 
 	&:hover {
 		background: var(--colorHover);
-		text-decoration: none;
 	}
 	&.chosen {
 		color: white;
@@ -404,7 +416,7 @@ table {
 }
 
 .MockSelector {
-	height: 26px;
+	height: 24px;
 	padding-right: 20px;
 	padding-left: 8px;
 	text-overflow: ellipsis;

package/src/Dashboard.js

@@ -20,7 +20,9 @@ const Strings = {
 	got: 'Got',
 	group_by_method: 'Group by Method',
 	internal_server_error: 'Internal Server Error',
+	mock_selector: 'Mock Selector',
 	no_mocks_found: 'No mocks found',
+	none: 'None',
 	not_found: 'Not Found',
 	pick_comment: 'Pick Comment…',
 	preview: 'Preview',
@@ -28,6 +30,7 @@ const Strings = {
 	proxy_toggler: 'Proxy Toggler',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
+	settings: 'Settings',
 	static_get: 'Static GET',
 	title: 'Mockaton'
 }
@@ -158,11 +161,11 @@ function Header() {
 			}),
 			r('div', null,
 				GlobalDelayField(),
-				CookieSelector(),
 				BulkSelector(),
+				CookieSelector(),
 				ProxyFallbackField(),
-				ResetButton()),
-			SettingsMenu()))
+				ResetButton(),
+				SettingsMenu())))
 }
 
 function SettingsMenu() {
@@ -199,6 +202,7 @@ function SettingsMenu() {
 
 	return (
 		r('button', {
+			title: Strings.settings,
 			onClick() {
 				if (!this.querySelector('menu'))
 					this.appendChild(MenuContent())
@@ -216,6 +220,7 @@ function CookieSelector() {
 			.catch(onError)
 	}
 	const disabled = cookies.length <= 1
+	const list = cookies.length ? cookies : [[Strings.none, true]]
 	return (
 		r('label', className(CSS.Field, CSS.CookieSelector),
 			r('span', null, Strings.cookie),
@@ -224,7 +229,7 @@ function CookieSelector() {
 				disabled,
 				title: disabled ? Strings.cookie_disabled_title : '',
 				onChange
-			}, cookies.map(([value, selected]) =>
+			}, list.map(([value, selected]) =>
 				r('option', { value, selected }, value)))))
 }
 
@@ -239,6 +244,7 @@ function BulkSelector() {
 		mockaton.bulkSelectByComment(value)
 			.then(parseError)
 			.then(updateState)
+			.then(() => focus(`.${CSS.BulkSelector}`))
 			.catch(onError)
 	}
 	const disabled = !comments.length
@@ -247,7 +253,6 @@ function BulkSelector() {
 			r('span', null, Strings.bulk_select),
 			r('select', {
 					className: CSS.BulkSelector,
-					'data-qaid': 'BulkSelector',
 					autocomplete: 'off',
 					disabled,
 					title: disabled ? Strings.bulk_select_disabled_title : '',
@@ -295,6 +300,7 @@ function ProxyFallbackField() {
 			mockaton.setProxyFallback(this.value.trim())
 				.then(parseError)
 				.then(updateState)
+				.then(() => focus(`.${CSS.FallbackBackend} input`))
 				.catch(onError)
 	}
 	return (
@@ -334,6 +340,7 @@ function ResetButton() {
 		mockaton.reset()
 			.then(parseError)
 			.then(updateState)
+			.then(() => focus(`.${CSS.ResetButton}`))
 			.catch(onError)
 	}
 	return (
@@ -466,7 +473,7 @@ function MockSelector(broker) {
 		r('select', {
 			onChange,
 			autocomplete: 'off',
-			'data-qaid': urlMask,
+			'aria-label': Strings.mock_selector,
 			disabled: files.length <= 1,
 			...className(
 				CSS.MockSelector,
@@ -666,7 +673,7 @@ Resizer.panelWidth = 0
 Resizer.onPointerDown = function (event) {
 	Resizer.initialX = event.clientX
 	Resizer.panelWidth = leftSideRef.current.clientWidth
-	addEventListener('pointerup', Resizer.onUp)
+	addEventListener('pointerup', Resizer.onUp, { once: true })
 	addEventListener('pointermove', Resizer.onMove)
 	document.body.style.userSelect = 'none'
 	document.body.style.cursor = 'col-resize'
@@ -681,7 +688,6 @@ Resizer.onMove = function (event) {
 }
 Resizer.onUp = function () {
 	removeEventListener('pointermove', Resizer.onMove)
-	removeEventListener('pointerup', Resizer.onUp)
 	cancelAnimationFrame(Resizer.raf)
 	Resizer.raf = 0
 	document.body.style.userSelect = 'auto'
@@ -712,7 +718,7 @@ function PayloadViewerTitle({ file, statusText }) {
 	const tokens = file.split('.')
 	const ext = tokens.pop()
 	const status = tokens.pop()
-	const urlAndMethod = '/' + tokens.join('.') + '.'
+	const urlAndMethod = tokens.join('.') + '.'
 	return (
 		r('span', null,
 			urlAndMethod,
@@ -800,6 +806,9 @@ function mockSelectorFor(method, urlMask) {
 	return trFor(method, urlMask)?.querySelector(`select.${CSS.MockSelector}`)
 }
 
+function focus(selector) {
+	document.querySelector(selector)?.focus()
+}
 
 /** # Misc */
 

package/src/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { join } from 'node:path'
+import { resolve } from 'node:path'
 import { parseArgs } from 'node:util'
 
 import { isFile } from './utils/fs.js'
@@ -68,7 +68,7 @@ else if (args.config && !isFile(args.config)) {
 	process.exitCode = 1
 }
 else {
-	const userConf = join(process.cwd(), args.config ?? 'mockaton.config.js')
+	const userConf = resolve(args.config ?? 'mockaton.config.js')
 	const opts = isFile(userConf)
 		? (await import(userConf)).default ?? {}
 		: {}

package/src/config.js

@@ -1,4 +1,4 @@
-import { join, isAbsolute } from 'node:path'
+import { resolve } from 'node:path'
 
 import { logger } from './utils/logger.js'
 import { isDirectory } from './utils/fs.js'
@@ -16,8 +16,8 @@ import { validateCorsAllowedMethods, validateCorsAllowedOrigins } from './utils/
  * 	]
  * }} */
 const schema = {
-	mocksDir: [join(process.cwd(), 'mockaton-mocks'), isDirectory],
-	staticDir: [join(process.cwd(), 'mockaton-static-mocks'), optional(isDirectory)],
+	mocksDir: [resolve('mockaton-mocks'), isDirectory],
+	staticDir: [resolve('mockaton-static-mocks'), optional(isDirectory)],
 	ignore: [/(\.DS_Store|~)$/, is(RegExp)], // TODO think about .well-known/appspecific/com.chrome.devtools
 
 	host: ['127.0.0.1', is(String)],
@@ -69,13 +69,12 @@ export const ConfigValidator = Object.freeze(validators)
 
 /** @param {Partial<Config>} options */
 export function setup(options) {
-	if (options.mocksDir && !isAbsolute(options.mocksDir))
-		options.mocksDir = join(process.cwd(), options.mocksDir)
+	if (options.mocksDir)
+		options.mocksDir = resolve(options.mocksDir)
 
-	if (options.staticDir && !isAbsolute(options.staticDir))
-		options.staticDir = join(process.cwd(), options.staticDir)
-
-	if (!options.staticDir && !isDirectory(defaults.staticDir))
+	if (options.staticDir)
+		options.staticDir = resolve(options.staticDir)
+	else if (!isDirectory(defaults.staticDir))
 		options.staticDir = ''
 
 	Object.assign(config, options)