mockaton 8.7.1 → 8.7.2

package/README.md

@@ -5,27 +5,27 @@
 
 ## Mock your APIs, Enhance your Development Workflow
 
-Welcome to developer experience tooling! Mockaton is here to help
-make your frontend development and testing easier—and a lot more fun.
+Mockaton is an HTTP mock server with the goal of making
+your frontend development and testing easier—and a lot more fun.
 
-With Mockaton you don’t need to write code for wiring your mocks. Instead, just
-place your mocks in a directory and let Mockaton do the rest. It will automatically
-scan the directory for filenames that follow a convention similar to the URL paths.
+With Mockaton you don’t need to write code for wiring your mocks.
+Instead, just place your mocks in a directory, and it will scan it
+for filenames that follow a convention similar to the URL paths.
 
 For example, for this route `/api/user/1234`, the mock filename would be:
 ```
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
-And hey, no need to mock everything. Mockaton can fallback to your real
-backend on routes you don’t have mocks for. Just type your backend
-address in the **Fallback Backend** field. Check **Save Mocks** so you
-can collect those responses that hit your fallback server. The mocks will
-be saved to your `config.mocksDir` following the filename convention.
+## Scrapping Mocks from you Backend
+
+Mockaton can fallback to your real backend on routes you don’t have mocks for. That’s
+done by typing your backend address in the **Fallback Backend** field. And if you
+check **Save Mocks**, you can collect those responses that hit your backend.
+Those mocks will be saved to your `config.mocksDir` following the filename convention.
 
 
 ## Multiple Mock Variants
-Here’s how you can create multiple mocks for a particular route: 
 
 ### Adding comments in filenames
 Want to mock a locked-out user or an invalid login attempt? You

package/package.json

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

package/src/Dashboard.css

@@ -153,6 +153,11 @@ select {
 		}
 	}
 
+	.BulkSelector {
+		appearance: none;
+		text-align: center;
+	}
+
 	.ResetButton {
 		padding: 4px 12px;
 		border: 1px solid var(--colorRed);

package/src/Dashboard.js

@@ -16,13 +16,14 @@ const Strings = {
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
+	pick: 'Pick…',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
-	select_one: 'Select One',
 	static: 'Static'
 }
 
 const CSS = {
+	BulkSelector: 'BulkSelector',
 	DelayToggler: 'DelayToggler',
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
@@ -115,19 +116,24 @@ function CookieSelector({ cookies }) {
 }
 
 function BulkSelector({ comments }) {
+	// UX wise this should be a menu instead of this `select`.
+	// But this way is easier to implement, with a few hacks.
 	function onChange() {
-		mockaton.bulkSelectByComment(this.value)
+		const value = this.value
+		this.value = Strings.pick // Hack 
+		mockaton.bulkSelectByComment(value)
 			.then(init)
 			.catch(onError)
 	}
 	const disabled = !comments.length
 	const list = disabled
 		? []
-		: [Strings.select_one].concat(comments)
+		: [Strings.pick].concat(comments)
 	return (
 		r('label', { className: CSS.Field },
 			r('span', null, Strings.bulk_select_by_comment),
 			r('select', {
+				className: CSS.BulkSelector,
 				'data-qaid': 'BulkSelector',
 				autocomplete: 'off',
 				disabled,