mockaton 10.6.2 → 10.6.4

package/package.json

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

package/src/Dashboard.js

@@ -69,6 +69,10 @@ const state = /** @type {State} */ {
 		return Boolean(state.proxyFallback)
 	},
 
+	fileFor(method, urlMask) {
+		return state.brokersByMethod[method]?.[urlMask]?.currentMock.file
+	},
+
 	leftSideWidth: window.innerWidth / 2,
 
 	groupByMethod: initPreference('groupByMethod'),
@@ -81,6 +85,9 @@ const state = /** @type {State} */ {
 	chosenLink: { method: '', urlMask: '' },
 	setChosenLink(method, urlMask) {
 		state.chosenLink = { method, urlMask }
+	},
+	get hasChosenLink() {
+		return state.chosenLink.method && state.chosenLink.urlMask
 	}
 }
 
@@ -95,7 +102,7 @@ async function updateState() {
 		const response = await mockaton.getState()
 		if (!response.ok)
 			throw response.status
-		
+
 		Object.assign(state, await response.json())
 
 		const focusedElem = selectorFor(document.activeElement)
@@ -103,10 +110,8 @@ async function updateState() {
 		if (focusedElem)
 			document.querySelector(focusedElem)?.focus()
 
-		const { method, urlMask } = state.chosenLink
-		if (method && urlMask)
-			await previewMock(method, urlMask)
-
+		if (state.hasChosenLink)
+			await previewMock(state.chosenLink.method, state.chosenLink.urlMask)
 	}
 	catch (error) {
 		onError(error)
@@ -335,6 +340,7 @@ function SaveProxiedCheckbox(ref) {
 
 function ResetButton() {
 	function onClick() {
+		state.setChosenLink('', '')
 		mockaton.reset()
 			.then(parseError)
 			.then(updateState)
@@ -702,31 +708,25 @@ function Resizer() {
 /** # Payload Preview */
 
 const payloadViewerTitleRef = useRef()
-const payloadViewerRef = useRef()
-const SPINNER_DELAY = 80
+const payloadViewerCodeRef = useRef()
 
 function PayloadViewer() {
+	const { hasChosenLink } = state
 	return (
 		r('div', className(CSS.PayloadViewer),
-			r('h2', { ref: payloadViewerTitleRef }, t`Preview`),
+			r('h2', { ref: payloadViewerTitleRef },
+				!hasChosenLink && t`Preview`),
 			r('pre', null,
-				r('code', { ref: payloadViewerRef }, t`Click a link to preview it`))))
-}
-
-function PayloadViewerProgressBar() {
-	return (
-		r('div', className(CSS.ProgressBar),
-			r('div', { style: { animationDuration: state.delay - SPINNER_DELAY + 'ms' } })))
+				r('code', { ref: payloadViewerCodeRef },
+					!hasChosenLink && t`Click a link to preview it`))))
 }
 
 function PayloadViewerTitle({ file, statusText }) {
-	const tokens = file.split('.')
-	const ext = tokens.pop()
-	const status = tokens.pop()
-	const urlAndMethod = tokens.join('.') + '.'
+	const { method, status, ext } = parseFilename(file)
+	const fileNameWithComments = file.split('.').slice(0, -3).join('.')
 	return (
 		r('span', null,
-			urlAndMethod,
+			fileNameWithComments + '.' + method + '.',
 			r('abbr', { title: statusText }, status),
 			'.' + ext))
 }
@@ -741,13 +741,20 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 			' ' + mime))
 }
 
+const SPINNER_DELAY = 80
+function PayloadViewerProgressBar() {
+	return (
+		r('div', className(CSS.ProgressBar),
+			r('div', { style: { animationDuration: state.delay - SPINNER_DELAY + 'ms' } })))
+}
+
 async function previewMock(method, urlMask) {
 	previewMock.controller?.abort()
 	previewMock.controller = new AbortController
 
 	const spinnerTimer = setTimeout(() => {
 		payloadViewerTitleRef.current.replaceChildren(t`Fetching…`)
-		payloadViewerRef.current.replaceChildren(PayloadViewerProgressBar())
+		payloadViewerCodeRef.current.replaceChildren(PayloadViewerProgressBar())
 	}, SPINNER_DELAY)
 
 	try {
@@ -756,48 +763,48 @@ async function previewMock(method, urlMask) {
 			signal: previewMock.controller.signal
 		})
 		clearTimeout(spinnerTimer)
-		await updatePayloadViewer(method, urlMask, response)
+		const file = state.fileFor(method, urlMask)
+		if (file === '')
+			await updatePayloadViewer(STR_PROXIED, response)
+		else if (file)
+			await updatePayloadViewer(file, response)
+		else {/* e.g. selected was deleted */}
 	}
 	catch (err) {
 		onError(err)
-		payloadViewerRef.current.replaceChildren()
+		payloadViewerCodeRef.current.replaceChildren()
 	}
 }
 
-
-async function updatePayloadViewer(method, urlMask, response) {
+async function updatePayloadViewer(file, response) {
 	const mime = response.headers.get('content-type') || ''
 
-	const file = mockSelectorFor(method, urlMask)?.value
-	if (!file)
-		return // e.g. selected was deleted
-	if (file === STR_PROXIED)
-		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitleWhenProxied({
-			status: response.status,
-			statusText: response.statusText,
-			mime,
-			gatewayIsBad: response.headers.get(HEADER_FOR_502)
-		}))
-	else
-		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitle({
-			statusText: response.statusText,
-			file
-		}))
+	payloadViewerTitleRef.current.replaceChildren(
+		file === STR_PROXIED
+			? PayloadViewerTitleWhenProxied({
+				mime,
+				status: response.status,
+				statusText: response.statusText,
+				gatewayIsBad: response.headers.get(HEADER_FOR_502)
+			})
+			: PayloadViewerTitle({
+				file,
+				statusText: response.statusText
+			}))
 
-	if (mime.startsWith('image/')) { // Naively assumes GET.200
-		payloadViewerRef.current.replaceChildren(
+	if (mime.startsWith('image/'))  // Naively assumes GET.200
+		payloadViewerCodeRef.current.replaceChildren(
 			r('img', {
 				src: URL.createObjectURL(await response.blob())
 			}))
-	}
 	else {
 		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
-			payloadViewerRef.current.replaceChildren(r('span', className(CSS.json), syntaxJSON(body)))
+			payloadViewerCodeRef.current.replaceChildren(r('span', className(CSS.json), syntaxJSON(body)))
 		else if (isXML(mime))
-			payloadViewerRef.current.replaceChildren(syntaxXML(body))
+			payloadViewerCodeRef.current.replaceChildren(syntaxXML(body))
 		else
-			payloadViewerRef.current.textContent = body
+			payloadViewerCodeRef.current.textContent = body
 	}
 }
 
@@ -807,12 +814,6 @@ function isXML(mime) {
 }
 
 
-function mockSelectorFor(method, urlMask) {
-	const tr = document.querySelector(`tr[key="${method}::${urlMask}"]`)
-	return tr?.querySelector(`.${CSS.MockSelector}`)
-}
-
-
 function initKeyboardNavigation() {
 	addEventListener('keydown', onKeyDown)
 
@@ -1013,19 +1014,19 @@ function selectorFor(elem) {
 
 	const path = []
 	while (elem) {
-		let mod = ''
+		let qualifier = ''
 		if (elem.hasAttribute('key'))
-			mod = `[key="${elem.getAttribute('key')}"]`
+			qualifier = `[key="${elem.getAttribute('key')}"]`
 		else {
 			let i = 0
 			let sib = elem
 			while ((sib = sib.previousElementSibling))
-				if (sib.nodeName === elem.nodeName)
+				if (sib.tagName === elem.tagName)
 					i++
 			if (i)
-				mod = `:nth-of-type(${i + 1})`
+				qualifier = `:nth-of-type(${i + 1})`
 		}
-		path.push(elem.nodeName + mod)
+		path.push(elem.tagName + qualifier)
 		elem = elem.parentElement
 	}
 	return path.reverse().join('>')