As an editor I want to be able to limit the number of results in my query in order to ensure it can be executed without hitting the query service time-out limit.
**Problem:**
The query service can not execute arbitrarily complex queries and stops a query if it takes longer than 60s to execute. One popular way to optimize queries is to limit the number of results in the result set. We need to allow people to do this in the query builder.
**[[ https://www.figma.com/file/hZpaYX0xNNhK0L7kBvN6WK/Query-Builder?node-id=2787%3A30222 | mockups ]]:**
{F33983727}
[[ https://www.figma.com/file/hZpaYX0xNNhK0L7kBvN6WK/Query-Builder?node-id=2787%3A30421 | mock with error ]]
[[ https://www.figma.com/file/hZpaYX0xNNhK0L7kBvN6WK/Query-Builder?node-id=2788%3A4 | mock with placeholder (when field empty) ]]
**BDD**
GIVEN a visual query
WHEN the option to limit the results is checked
AND a result size of X is specified
THEN the result set only contains max. X results
**Acceptance criteria:**
[ ] queries take into account the limit set by the person building the query
[ ] when entering anything else other than a number, the field shows an error message (=> validation will probably not be implemented, as most likely a number input component or more advanced input will replace the current implementation. [[ https://phabricator.wikimedia.org/T270179 | More info ]] This ticket should be moved to "Blocked" at this point)
[ ] when removing the number, the placeholder appears ("enter a number")
**Notes:**
* We default to limiting the queries so the checkbox is checked by default
* We default to 100 results in the result set but people can change it as needed in the input field
* Since the label of the number input is hidden, it should have an aria-label (copy: "Maximum number of results")
**Needed components:**
* checkbox