UX tweaks for query builder

[ccschmitz]

Summary

• Only shows errors after submitting a query.
• Allow empty spaces at the beginning of the query string. This required using a monospace font in order to get the leading space to expand the correct width. Discussed tradeoffs with @julian-highlight and decided to move forward with monospace font for the input + the typeahead results (screenshot below).
• Trigger submit when a user selects an EXISTS or NOT EXISTS.

How did you test this change?

• Enter a query that has an error and ensure it is not highlighted until you blur the input.
  • Ensure the state is reset if you fix the error and introduce a new one.
• Enter empty space at the beginning of the query string and ensure formatting looks correct.
• Select an EXISTS or NOT EXISTS value and ensure the form submits and behaves as expected.
• Enter a number of different queries and ensure the search form behaves as expected.

Are there any deployment considerations?

N/A - all client-side chahnges.

Does this work require review from our design team?

Yes, will need to review the font update w/ @julian-highlight. Might be something we don't want to do and just tolerate in order to use the font we want.

[linear]

HIG-4514 No suggestions come up when typing key that is not last in search

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1b1a1c2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "rrdom" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrdom-nodejs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-player" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-snapshot" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/types" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/web-extension" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrvideo" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[ccschmitz]

I talked through the font change on the query builder with @julian-highlight. He is going to look the preview over and update the mocks and massage things a bit after he gets a chance to play with the monospace font.