From d59e7f05a0d20d5fc94c04998f62b224ecf912b5 Mon Sep 17 00:00:00 2001
From: Spencer Amarantides <Spencer22309@gmail.com>
Date: Fri, 10 May 2024 19:57:30 -0400
Subject: [PATCH] Wrap operators in quotes (#8527)

## Summary
- Wrap the contains and match operators in `"` to support the usage of
reserved chars within it.
- Align the error/X with the bottom row


https://www.loom.com/share/d0d0b4d4acb74a139a91bfcd4cf91fb6?sid=441c1a9d-74f0-4b0a-b5a4-0de1f27988f4

## How did you test this change?
1) Load the sessions page
2) Use the contains operator
- [ ] The * are wrapped in "
3) Select a value that breaks to a new line
- [ ] X aligned on bottom row
- [ ] Any error aligned on bottom row

## Are there any deployment considerations?
N/A

## Does this work require review from our design team?
N/A
---
 frontend/src/__generated/index.css                 |  8 ++++----
 .../components/Search/SearchForm/SearchForm.css.ts |  8 ++++----
 .../components/Search/SearchForm/SearchForm.tsx    | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/__generated/index.css b/frontend/src/__generated/index.css
index 8d95214e009..97c370a0fc5 100644
--- a/frontend/src/__generated/index.css
+++ b/frontend/src/__generated/index.css
@@ -5933,25 +5933,25 @@ body {
 ._10xh0c2c {
   background-color: #ffffff;
   border-radius: 999px;
+  bottom: 8px;
   color: var(--_1pyqka9b);
   cursor: pointer;
+  margin-left: -6px;
   position: absolute;
   pointer-events: auto;
   opacity: 0;
-  right: -8px;
-  top: -8px;
   z-index: 1;
 }
 ._10xh0c2d {
   background-color: #ffffff;
   border-radius: 999px;
+  bottom: 8px;
   color: var(--_1pyqka9g);
   font-weight: bold;
+  margin-left: -6px;
   opacity: 1;
   position: absolute;
   pointer-events: auto;
-  right: -8px;
-  top: -8px;
   z-index: 1;
 }
 ._10xh0c2a._10xh0c26 {
diff --git a/frontend/src/components/Search/SearchForm/SearchForm.css.ts b/frontend/src/components/Search/SearchForm/SearchForm.css.ts
index 2ec86f98a92..8c0c558f0a4 100644
--- a/frontend/src/components/Search/SearchForm/SearchForm.css.ts
+++ b/frontend/src/components/Search/SearchForm/SearchForm.css.ts
@@ -100,26 +100,26 @@ export const comboboxTagError = style({})
 export const comboboxTagClose = style({
 	backgroundColor: vars.color.white,
 	borderRadius: vars.borderRadius.round,
+	bottom: 8,
 	color: themeVars.static.content.default,
 	cursor: 'pointer',
+	marginLeft: -6,
 	position: 'absolute',
 	pointerEvents: 'auto',
 	opacity: 0,
-	right: -8,
-	top: -8,
 	zIndex: 1,
 })
 
 export const comboboxTagErrorIndicator = style({
 	backgroundColor: vars.color.white,
 	borderRadius: vars.borderRadius.round,
+	bottom: 8,
 	color: themeVars.static.content.sentiment.bad,
 	fontWeight: 'bold',
+	marginLeft: -6,
 	opacity: 1,
 	position: 'absolute',
 	pointerEvents: 'auto',
-	right: -8,
-	top: -8,
 	zIndex: 1,
 })
 
diff --git a/frontend/src/components/Search/SearchForm/SearchForm.tsx b/frontend/src/components/Search/SearchForm/SearchForm.tsx
index 91299c2d00e..f1f338559d2 100644
--- a/frontend/src/components/Search/SearchForm/SearchForm.tsx
+++ b/frontend/src/components/Search/SearchForm/SearchForm.tsx
@@ -68,8 +68,8 @@ const EXISTS_OPERATORS = ['EXISTS', 'NOT EXISTS'] as const
 const NUMERIC_OPERATORS = ['>', '>=', '<', '<='] as const
 const EQUAL_OPERATOR = ['='] as const
 const BOOLEAN_OPERATORS = ['=', '!='] as const
-const CONTAINS_OPERATOR = ['=**', '!=**'] as const
-const MATCHES_OPERATOR = ['=//', '!=//'] as const
+const CONTAINS_OPERATOR = ['="**"', '!="**"'] as const
+const MATCHES_OPERATOR = ['="//"', '!="//"'] as const
 export const SEARCH_OPERATORS = [
 	...BOOLEAN_OPERATORS,
 	...NUMERIC_OPERATORS,
@@ -537,7 +537,7 @@ export const Search: React.FC<{
 				...MATCHES_OPERATOR,
 			].find((o) => o === item.name)
 			if (isContainsOrMatches) {
-				cursorShift = -1
+				cursorShift = -2
 			}
 
 			const key =
@@ -1016,13 +1016,13 @@ const getSearchResultBadgeText = (key: SearchResult) => {
 				return 'exists'
 			case 'NOT EXISTS':
 				return 'does not exist'
-			case '=**':
+			case '="**"':
 				return 'contains'
-			case '!=**':
+			case '!="**"':
 				return 'does not contain'
-			case '=//':
+			case '="//"':
 				return 'matches'
-			case '!=//':
+			case '!="//"':
 				return 'does not match'
 		}
 	} else if (key.type === 'Value') {