UX tweaks for query builder

frontend/src/__generated/ve/components/Search/SearchForm/SearchForm.css.js

@@ -1,21 +1,20 @@
 // src/components/Search/SearchForm/SearchForm.css.ts
 var combobox = "_10xh0c23 mt0ih23s mt0ih24c mt0ih24w mt0ih25g";
-var comboboxGroup = "_10xh0c2i mt0ih23r mt0ih24b";
-var comboboxItem = "_10xh0c2g";
+var comboboxGroup = "_10xh0c2h mt0ih23r mt0ih24b";
+var comboboxItem = "_10xh0c2f";
 var comboboxNotEmpty = "_10xh0c24";
-var comboboxPopover = "_10xh0c2e";
-var comboboxResults = "_10xh0c2f _14ud0dc1";
+var comboboxPopover = "_10xh0c2d";
+var comboboxResults = "_10xh0c2e _14ud0dc1";
 var comboboxTag = "_10xh0c26";
-var comboboxTagActive = "_10xh0c2a";
-var comboboxTagClose = "_10xh0c2c";
-var comboboxTagError = "_10xh0c2b";
-var comboboxTagErrorIndicator = "_10xh0c2d";
+var comboboxTagActive = "_10xh0c29";
+var comboboxTagClose = "_10xh0c2b";
+var comboboxTagError = "_10xh0c2a";
+var comboboxTagErrorIndicator = "_10xh0c2c";
 var comboboxTagsContainer = "_10xh0c25";
-var errorToken = "_10xh0c29";
+var errorToken = "_10xh0c28";
 var searchIcon = "_10xh0c20";
 var searchIconWithActions = "_10xh0c21";
 var token = "_10xh0c27";
-var whitespaceToken = "_10xh0c28";
 export {
  combobox,
  comboboxGroup,
@@ -32,6 +31,5 @@ export {
  errorToken,
  searchIcon,
  searchIconWithActions,
- token,
- whitespaceToken
+ token
 };

frontend/src/components/Search/SearchForm/QueryPart.tsx

@@ -1,5 +1,4 @@
 import {
- Ariakit,
  Box,
  IconSolidExclamationCircle,
  IconSolidXCircle,
@@ -15,21 +14,22 @@ import { SearchToken } from '@/components/Search/utils'
 import * as styles from './SearchForm.css'
 
 export const QueryPart: React.FC<{
- comboboxStore: Ariakit.ComboboxStore
+ typeaheadOpen: boolean
  cursorIndex: number
  index: number
  tokenGroup: TokenGroup
  showValues: boolean
- onRemoveItem: (index: number) => void
+ showErrors: boolean
+ onRemoveItem?: (index: number) => void
 }> = ({
- comboboxStore,
+ typeaheadOpen,
  cursorIndex,
  index,
  tokenGroup,
  showValues,
+ showErrors,
  onRemoveItem,
 }) => {
- const typeaheadOpen = comboboxStore.useState('open')
  const active =
  typeaheadOpen &&
  cursorIndex >= tokenGroup.start &&
@@ -40,6 +40,7 @@ export const QueryPart: React.FC<{
  const error = errorToken
  ? errorMessageForToken(errorToken, showValues)
  : undefined
+ const showError = showErrors && error
  const isExpression = tokenGroup.type === 'expression'
 
  if (
@@ -54,7 +55,11 @@ export const QueryPart: React.FC<{
  <>
  {tokenGroup.tokens.map((token, index) => {
  return (
- <Token key={`${token.text}-${index}`} token={token} />
+ <Token
+ key={`${token.text}-${index}`}
+ token={token}
+ showErrors={showErrors}
+ />
  )
  })}
  </>
@@ -65,7 +70,7 @@ export const QueryPart: React.FC<{
  <>
  <Tooltip
  placement="top-start"
- open={active && !!error}
+ open={active && !!showError}
  style={{ display: 'inline', wordBreak: 'break-word' }}
  maxWidth={600}
  shift={-3}
@@ -75,7 +80,7 @@ export const QueryPart: React.FC<{
  cssClass={clsx({
  [styles.comboboxTag]: isExpression,
  [styles.comboboxTagActive]: active && isExpression,
- [styles.comboboxTagError]: !!error,
+ [styles.comboboxTagError]: !!showError,
  })}
  position="relative"
  display="inline-flex"
@@ -89,17 +94,20 @@ export const QueryPart: React.FC<{
  <Token
  key={`${token.text}-${index}`}
  token={token}
+ showErrors={showErrors}
  />
  )
  })}
- <IconSolidXCircle
- className={styles.comboboxTagClose}
- size={13}
- onClick={() => onRemoveItem(index)}
- style={{ cursor: 'pointer' }}
- />
+ {onRemoveItem && (
+ <IconSolidXCircle
+ className={styles.comboboxTagClose}
+ size={13}
+ onClick={() => onRemoveItem(index)}
+ style={{ cursor: 'pointer' }}
+ />
+ )}
 
- {error && (
+ {showError && (
  <IconSolidExclamationCircle
  className={styles.comboboxTagErrorIndicator}
  size={13}
@@ -109,7 +117,7 @@ export const QueryPart: React.FC<{
  </Box>
  }
  >
- {error ? <ErrorRenderer error={error} /> : null}
+ {showError ? <ErrorRenderer error={error} /> : null}
  </Tooltip>
  </>
  )
@@ -119,15 +127,22 @@ export const SEPARATORS = SearchGrammarParser.literalNames.map((name) =>
  name?.replaceAll("'", ''),
 )
 
-export const Token = ({ token }: { token: SearchToken }): JSX.Element => {
+export const Token = ({
+ showErrors,
+ token,
+}: {
+ showErrors?: boolean
+ token: SearchToken
+}): JSX.Element => {
  const { errorMessage, text } = token
+ const showError = showErrors && errorMessage
 
  if (SEPARATORS.includes(text.toUpperCase())) {
  return (
  <Box
  as="span"
  cssClass={clsx(styles.token, {
- [styles.errorToken]: !!errorMessage,
+ [styles.errorToken]: !!showError,
  })}
  style={{ color: '#E93D82', zIndex: 1 }}
  >
@@ -136,13 +151,7 @@ export const Token = ({ token }: { token: SearchToken }): JSX.Element => {
  )
  } else {
  return (
- <Box
- as="span"
- style={{ zIndex: 1 }}
- cssClass={clsx(styles.token, {
- [styles.whitespaceToken]: text.trim() === '',
- })}
- >
+ <Box as="span" style={{ zIndex: 1 }} cssClass={clsx(styles.token)}>
  {text.split('').map((char, index) =>
  char === '*' ? (
  <span key={index} style={{ color: '#E93D82' }}>

frontend/src/components/Search/SearchForm/SearchForm.css.ts

@@ -17,13 +17,11 @@ export const searchIconWithActions = style({
  top: 12,
 })
 
-const WORD_SPACING = 4
-
 export const combobox = style([
  sprinkles({
  p: '6',
  }),
- typographyStyles.family.body,
+ typographyStyles.family.monospace,
  typographyStyles.size.small,
  {
  background: 'transparent',
@@ -34,7 +32,6 @@ export const combobox = style([
  fontWeight: '500 !important',
  pointerEvents: 'auto',
  width: '100%',
- wordSpacing: WORD_SPACING,
  selectors: {
  '&:focus': {
  outline: 0,
@@ -54,7 +51,7 @@ export const comboboxNotEmpty = style({
 })
 
 export const comboboxTagsContainer = style([
- typographyStyles.family.body,
+ typographyStyles.family.monospace,
  typographyStyles.size.small,
  {
  display: 'block',
@@ -79,16 +76,12 @@ export const comboboxTag = style({
  height: 20,
 })
 
-export const token = style({
- height: 20,
- letterSpacing: 0,
- wordSpacing: WORD_SPACING,
-})
-
-export const whitespaceToken = style({
- letterSpacing: WORD_SPACING,
- wordSpacing: 0,
-})
+export const token = style([
+ typographyStyles.family.monospace,
+ {
+ height: 20,
+ },
+])
 
 export const errorToken = style({
  backgroundColor: 'rgba(255, 9, 87, 0.1)',