mockaton 10.2.1 → 10.3.1

package/package.json

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

package/src/Dashboard.css

@@ -285,13 +285,14 @@ header {
 	}
 }
 
-#Menu {
+.SettingsMenu {
 	position: absolute;
 	top: 62px;
 	right: 10px;
 	left: auto;
 	padding: 20px;
 	border: 1px solid var(--colorSecondaryActionBorder);
+	text-align: left;
 	color: var(--colorText);
 	border-radius: var(--radius);
 	box-shadow: var(--boxShadow1);
@@ -305,7 +306,7 @@ header {
 		display: flex;
 		align-items: center;
 		margin-bottom: 12px;
-		gap: 4px;
+		gap: 6px;
 	}
 }
 

package/src/Dashboard.js

@@ -1,4 +1,4 @@
-import { AUTOGENERATED_500_COMMENT, HEADER_FOR_502, DEFAULT_MOCK_COMMENT } from './ApiConstants.js'
+import { AUTOGENERATED_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
 import { parseFilename, extractComments } from './Filename.js'
 import { Commander } from './ApiCommander.js'
 
@@ -53,6 +53,7 @@ const CSS = {
 	ResetButton: null,
 	Resizer: null,
 	SaveProxiedCheckbox: null,
+	SettingsMenu: null,
 	StaticFilesList: null,
 
 	chosen: null,
@@ -132,7 +133,6 @@ function App() {
 	const { leftSideWidth } = state
 	return [
 		Header(),
-		Menu(),
 		r('main', null,
 			r('div', {
 					ref: leftSideRef,
@@ -162,36 +162,50 @@ function Header() {
 				BulkSelector(),
 				ProxyFallbackField(),
 				ResetButton()),
-			r('button', {
-				className: CSS.MenuTrigger,
-				popovertarget: 'Menu'
-			}, SettingsIcon())
-		))
+			SettingsMenu()))
 }
 
-function Menu() {
+function SettingsMenu() {
+	const id = '_SettingsMenu_'
+
+	function MenuContent() {
+		return (
+			r('menu', {
+					id,
+					popover: '',
+					className: CSS.SettingsMenu,
+					onToggle(event) {
+						if (event.newState === 'closed')
+							this.parentNode.removeChild(this)
+					}
+				},
+				r('label', className(CSS.GroupByMethod),
+					r('input', {
+						type: 'checkbox',
+						checked: state.groupByMethod,
+						onChange() {
+							state.toggleGroupByMethod()
+							updateState()
+						}
+					}),
+					r('span', null, Strings.group_by_method)),
+
+				r('a', {
+					href: 'https://github.com/ericfortis/mockaton',
+					target: '_blank',
+					rel: 'noopener noreferrer'
+				}, 'Documentation')))
+	}
+
 	return (
-		r('menu', {
-				id: 'Menu',
-				popover: ''
+		r('button', {
+			onClick() {
+				if (!this.querySelector('menu'))
+					this.appendChild(MenuContent())
 			},
-			r('label', className(CSS.GroupByMethod),
-				r('input', {
-					type: 'checkbox',
-					checked: state.groupByMethod,
-					onChange() {
-						state.toggleGroupByMethod()
-						updateState()
-					}
-				}),
-				r('span', null, Strings.group_by_method)),
-
-			r('a', {
-				href: 'https://github.com/ericfortis/mockaton',
-				target: '_blank',
-				rel: 'noopener noreferrer'
-			}, 'Documentation')
-		))
+			className: CSS.MenuTrigger,
+			popovertarget: id
+		}, SettingsIcon()))
 }
 
 function CookieSelector() {
@@ -228,24 +242,24 @@ function BulkSelector() {
 			.catch(onError)
 	}
 	const disabled = !comments.length
-	const list = disabled
-		? []
-		: [firstOption, ...comments].map(c => [
-			c,
-			c === AUTOGENERATED_500_COMMENT ? Strings.auto500 : c
-		])
 	return (
 		r('label', className(CSS.Field),
 			r('span', null, Strings.bulk_select),
 			r('select', {
-				className: CSS.BulkSelector,
-				'data-qaid': 'BulkSelector',
-				autocomplete: 'off',
-				disabled,
-				title: disabled ? Strings.bulk_select_disabled_title : '',
-				onChange
-			}, list.map(([value, name]) =>
-				r('option', { value }, name)))))
+					className: CSS.BulkSelector,
+					'data-qaid': 'BulkSelector',
+					autocomplete: 'off',
+					disabled,
+					title: disabled ? Strings.bulk_select_disabled_title : '',
+					onChange
+				},
+				r('option', { value: firstOption }, firstOption),
+				r('hr'),
+				comments.map(value =>
+					r('option', { value }, value)),
+				r('hr'),
+				r('option', { value: AUTOGENERATED_500_COMMENT }, Strings.auto500)
+			)))
 }
 
 function GlobalDelayField() {

package/src/mockBrokersCollection.js

@@ -6,6 +6,7 @@ import { MockBroker } from './MockBroker.js'
 import { listFilesRecursively } from './utils/fs.js'
 import { config, isFileAllowed } from './config.js'
 import { parseFilename, validateFilename } from './Filename.js'
+import { AUTOGENERATED_500_COMMENT } from './ApiConstants.js'
 
 
 /**
@@ -116,6 +117,7 @@ export function extractAllComments() {
 			comments.add(c)
 	})
 	return Array.from(comments)
+		.filter(c => c !== AUTOGENERATED_500_COMMENT)
 }
 
 export function setMocksMatchingComment(comment) {