mockaton 8.1.6 → 8.2.0

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.1.6",
+	"version": "8.2.0",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -10,7 +10,7 @@ import { DF, API } from './ApiConstants.js'
 import { parseJSON } from './utils/http-request.js'
 import { listFilesRecursively } from './utils/fs.js'
 import * as mockBrokersCollection from './mockBrokersCollection.js'
-import { sendOK, sendBadRequest, sendJSON, sendFile } from './utils/http-response.js'
+import { sendOK, sendBadRequest, sendJSON, sendFile, sendUnprocessableContent } from './utils/http-response.js'
 
 
 export const apiGetRequests = new Map([
@@ -24,6 +24,7 @@ export const apiGetRequests = new Map([
 	[API.mocks, listMockBrokers],
 	[API.cookies, listCookies],
 	[API.comments, listComments],
+	[API.fallback, getProxyFallback],
 	[API.cors, getIsCorsAllowed],
 	[API.static, listStaticFiles]
 ])
@@ -44,6 +45,7 @@ function serveDashboardAsset(req, response) { sendFile(response, join(import.met
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
 function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
 function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.getAll()) }
+function getProxyFallback(_, response) { sendJSON(response, Config.proxyFallback) }
 function getIsCorsAllowed(_, response) { sendJSON(response, Config.corsAllowed) }
 
 
@@ -101,8 +103,13 @@ async function setRouteIsDelayed(req, response) {
 
 async function updateProxyFallback(req, response) {
 	try {
-		Config.proxyFallback = await parseJSON(req)
-		sendOK(response)
+		const fallback = await parseJSON(req)
+		if (fallback && !URL.canParse(fallback)) // TESTME
+			sendUnprocessableContent(response)
+		else {
+			Config.proxyFallback = fallback
+			sendOK(response)
+		}
 	}
 	catch (error) {
 		sendBadRequest(response, error)

package/src/Commander.js

@@ -37,6 +37,9 @@ export class Commander {
 		return this.#get(API.comments)
 	}
 
+	getProxyFallback() {
+		return this.#get(API.fallback)
+	}
 	setProxyFallback(proxyAddr) {
 		return this.#patch(API.fallback, proxyAddr)
 	}

package/src/Dashboard.css

@@ -6,12 +6,12 @@
 	:root {
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0072d6;
-		--colorAccentAlt: #01873b;
+		--colorAccentAlt: #0e906c;
 		--colorBackground: #fff;
-		--colorHeaderBackground: #f4f4f4;
+		--colorHeaderBackground: #f7f7f7;
 		--colorComboBoxBackground: #fafafa;
 		--colorComboBoxHeaderBackground: #fff;
-		--colorDisabled: #555;
+		--colorDisabled: #444;
 		--colorHover: #dfefff;
 		--colorLabel: #666;
 		--colorLightRed: #ffe4ee;
@@ -61,7 +61,6 @@ select {
 	background: var(--colorComboBoxBackground);
 	color: var(--colorText);
 	cursor: pointer;
-	border-radius: 4px;
 	outline: 0;
 
 	&:enabled {
@@ -84,15 +83,16 @@ menu {
 	display: flex;
 	width: 100%;
 	align-items: flex-end;
-	padding: 20px 16px;
+	padding: 12px 16px;
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
-	gap: 16px;
+	box-shadow: var(--boxShadow1);
+	gap: 12px;
 
 	img {
 		width: 130px;
 		align-self: center;
-		margin-right: 85px;
+		margin-right: 18px;
 	}
 
 	label {
@@ -102,14 +102,23 @@ menu {
 			font-size: 11px;
 		}
 
+		input[type=url],
 		select {
+			height: 24px;
 			width: 150px;
-			padding: 4px;
+			padding: 4px 2px;
 			border-right: 3px solid transparent;
 			margin-top: 2px;
 			font-size: 11px;
 			background: var(--colorComboBoxHeaderBackground);
 		}
+
+		input[type=url] {
+			outline: 0;
+			padding: 0 6px;
+			box-shadow: var(--boxShadow1);
+			color: var(--colorText);
+		}
 	}
 
 	button {
@@ -139,7 +148,7 @@ menu {
 main {
 	display: flex;
 	align-items: flex-start;
-	margin-top: 64px;
+	margin-top: 48px;
 
 	> table {
 		border-collapse: collapse;
@@ -159,7 +168,7 @@ main {
 
 .PayloadViewer {
 	position: sticky;
-	top: 72px;
+	top: 62px;
 	width: 50%;
 	margin-left: 20px;
 
@@ -190,7 +199,7 @@ main {
 	display: inline-block;
 	width: 280px;
 	padding: 8px 6px;
-	border-radius: 4px;
+	border-radius: 0;
 	color: var(--colorAccent);
 	text-decoration: none;
 
@@ -205,10 +214,11 @@ main {
 
 .MockSelector {
 	width: 300px;
+	height: 30px;
 	padding: 8px 1px;
 	border: 0;
 	border-left: 3px solid transparent;
-	border-radius: 4px;
+	border-radius: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
@@ -218,6 +228,7 @@ main {
 		background: var(--color4xxBackground);
 	}
 	&:disabled {
+		padding-right: 4px;
 		appearance: none;
 		background: transparent;
 		cursor: default;
@@ -258,7 +269,7 @@ main {
 
 .InternalServerErrorToggler {
 	display: flex;
-	margin-left: 6px;
+	margin-left: 8px;
 	cursor: pointer;
 
 	> input {

package/src/Dashboard.js

@@ -12,6 +12,8 @@ const Strings = {
 	cookie_disabled_title: 'No cookies specified in Config.cookies',
 	delay: 'Delay',
 	empty_response_body: '/* Empty Response Body */',
+	fallback_server: 'Fallback Server',
+	fallback_server_placeholder: 'Type Server Address',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	reset: 'Reset',
@@ -46,6 +48,7 @@ function init() {
 		mockaton.listCookies(),
 		mockaton.listComments(),
 		mockaton.getCorsAllowed(),
+		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
 		.then(App)
@@ -59,13 +62,14 @@ function App(apiResponses) {
 		.render(DevPanel(apiResponses))
 }
 
-function DevPanel([brokersByMethod, cookies, comments, corsAllowed, staticFiles]) {
+function DevPanel([brokersByMethod, cookies, comments, corsAllowed, fallbackAddress, staticFiles]) {
 	return (
 		r('div', null,
 			r('menu', null,
 				r('img', { src: '/mockaton-logo.svg', width: 160, alt: Strings.title }),
 				r(CookieSelector, { list: cookies }),
 				r(BulkSelector, { comments }),
+				r(ProxyFallbackField, { fallbackAddress }),
 				r(CorsCheckbox, { corsAllowed }),
 				r(ResetButton)),
 			r('main', null,
@@ -124,6 +128,29 @@ function BulkSelector({ comments }) {
 }
 
 
+function ProxyFallbackField({ fallbackAddress = '' }) {
+	function onChange(event) {
+		const input = event.currentTarget
+		if (!input.validity.valid)
+			input.reportValidity()
+		else
+			mockaton.setProxyFallback(input.value)
+				.catch(console.error)
+	}
+
+	return (
+		r('label', null,
+			r('span', null, Strings.fallback_server),
+			r('input', {
+				type: 'url',
+				autocomplete: 'none',
+				placeholder: Strings.fallback_server_placeholder,
+				value: fallbackAddress,
+				onChange
+			})))
+}
+
+
 function CorsCheckbox({ corsAllowed }) {
 	function onChange(event) {
 		mockaton.setCorsAllowed(event.currentTarget.checked)

package/src/utils/http-response.js

@@ -64,6 +64,12 @@ export function sendNotFound(response) {
 	response.end()
 }
 
+export function sendUnprocessableContent(response, error) {
+	console.error(error)
+	response.statusCode = 422
+	response.end(error)
+}
+
 export function sendInternalServerError(response, error) {
 	console.error(error)
 	response.statusCode = 500