✨ Add in parens to logic category

Author: nsdeschenes

static/app/components/searchQueryBuilder/hooks/useQueryBuilderState.tsx

@@ -204,7 +204,7 @@ type UpdateAggregateArgsAction = {
 };
 
 type UpdateLogicOperatorAction = {
-  token: TokenResult<Token.LOGIC_BOOLEAN>;
+  token: TokenResult<Token.LOGIC_BOOLEAN | Token.L_PAREN | Token.R_PAREN>;
   type: 'UPDATE_LOGIC_OPERATOR';
   value: string;
 };

static/app/components/searchQueryBuilder/index.spec.tsx

@@ -716,30 +716,26 @@ describe('SearchQueryBuilder', () => {
       });
     });
 
-    describe('conditionals category', () => {
-      it('does not render conditionals category when on first input', async () => {
+    describe('logic category', () => {
+      it('does not render logic category when on first input', async () => {
         render(<SearchQueryBuilder {...defaultProps} initialQuery="" />, {
           organization: {features: ['search-query-builder-conditionals-combobox-menus']},
         });
 
         await userEvent.click(getLastInput());
         expect(await screen.findByRole('button', {name: 'All'})).toBeInTheDocument();
 
-        expect(
-          screen.queryByRole('button', {name: 'Conditionals'})
-        ).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Logic'})).not.toBeInTheDocument();
       });
 
-      it('renders conditionals category when not on first input', async () => {
+      it('renders logic category when not on first input', async () => {
         render(<SearchQueryBuilder {...defaultProps} initialQuery="span.op:test" />, {
           organization: {features: ['search-query-builder-conditionals-combobox-menus']},
         });
 
         await userEvent.click(getLastInput());
         // Should show conditionals button
-        expect(
-          await screen.findByRole('button', {name: 'Conditionals'})
-        ).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: 'Logic'})).toBeInTheDocument();
       });
     });
   });

static/app/components/searchQueryBuilder/tokens/boolean.tsx

@@ -91,6 +91,8 @@ function FilterDelete({token, state, item}: SearchQueryBuilderBooleanProps) {
 const LOGIC_OPERATOR_OPTIONS = [
   {value: 'AND', label: 'AND'},
   {value: 'OR', label: 'OR'},
+  {value: '(', label: '('},
+  {value: ')', label: ')'},
 ];
 
 function SearchQueryBuilderBooleanSelect({

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/types.tsx

@@ -60,7 +60,7 @@ export interface AskSeerConsentItem extends SelectOptionWithKey<string> {
 
 export interface LogicFilterItem extends SelectOptionWithKey<string> {
   type: 'logic-filter';
-  value: 'AND' | 'OR';
+  value: 'AND' | 'OR' | '(' | ')';
 }
 
 export type SearchKeyItem =

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/useFilterKeyListBox.tsx

@@ -203,6 +203,8 @@ function useFilterKeySections({
 const conditionalFilterItems = [
   createLogicFilterItem({value: 'AND'}),
   createLogicFilterItem({value: 'OR'}),
+  createLogicFilterItem({value: '('}),
+  createLogicFilterItem({value: ')'}),
 ];
 
 interface UseFilterKeyListBoxArgs {

static/app/components/searchQueryBuilder/tokens/filterKeyListBox/utils.tsx

@@ -249,7 +249,11 @@ export function createAskSeerConsentItem(): AskSeerConsentItem {
   };
 }
 
-export function createLogicFilterItem({value}: {value: 'AND' | 'OR'}): LogicFilterItem {
+export function createLogicFilterItem({
+  value,
+}: {
+  value: 'AND' | 'OR' | '(' | ')';
+}): LogicFilterItem {
   return {
     key: getEscapedKey(value),
     type: 'logic-filter' as const,