From e30f24b072678d8e8c9f56ce491a623dd57c0c94 Mon Sep 17 00:00:00 2001
From: Basit <1305718+mabaasit@users.noreply.github.com>
Date: Tue, 31 Oct 2023 15:27:50 +0100
Subject: [PATCH] fix(stage-wizard): ux fixes for $search wizard (#5037)

---
 .../search/text-search.spec.tsx               | 24 +++++------
 .../search/text-search.tsx                    | 41 ++++++-------------
 .../src/components/stage-wizard/index.tsx     |  4 +-
 .../compass-aggregations/test/form-helper.ts  |  4 +-
 4 files changed, 29 insertions(+), 44 deletions(-)

diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.spec.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.spec.tsx
index 1ddd9f857e2..8b95d76407a 100644
--- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.spec.tsx
+++ b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.spec.tsx
@@ -60,7 +60,7 @@ describe('TextSearch', function () {
 
   context('calls onChange', function () {
     it('for text search with fields', () => {
-      setSelectValue(/select search type/i, 'text-search');
+      setSelectValue(/select search type/i, 'text search');
       setSelectValue(/select search path/i, 'field names');
       setMultiSelectComboboxValues(new RegExp(MULTI_SELECT_LABEL, 'i'), [
         'a',
@@ -81,10 +81,9 @@ describe('TextSearch', function () {
       expect(onChangeSpy.lastCall.lastArg).to.be.null;
     });
 
-    it('for text search with wildcard', () => {
-      setSelectValue(/select search type/i, 'text-search');
-      setSelectValue(/select search path/i, 'wildcard');
-      setInputElementValue(/Wildcard/i, 'path.*');
+    it('for text search with any fields', () => {
+      setSelectValue(/select search type/i, 'text search');
+      setSelectValue(/select search path/i, 'any fields');
 
       setInputElementValue(/text/i, 'abc');
       setComboboxValue(/select or type a search index/i, 'index1');
@@ -95,7 +94,7 @@ describe('TextSearch', function () {
           text: {
             query: 'abc',
             path: {
-              wildcard: 'path.*',
+              wildcard: '*',
             },
           },
         })
@@ -104,7 +103,7 @@ describe('TextSearch', function () {
     });
 
     it('for fuzzy search with fields', () => {
-      setSelectValue(/select search type/i, 'fuzzy-search');
+      setSelectValue(/select search type/i, 'fuzzy search');
       setInputElementValue(/maxEdits/i, '1');
 
       setSelectValue(/select search path/i, 'field names');
@@ -131,12 +130,11 @@ describe('TextSearch', function () {
       expect(onChangeSpy.lastCall.lastArg).to.be.null;
     });
 
-    it('for fuzzy search with wildcard', () => {
-      setSelectValue(/select search type/i, 'fuzzy-search');
+    it('for fuzzy search with any fields', () => {
+      setSelectValue(/select search type/i, 'fuzzy search');
       setInputElementValue(/maxEdits/i, '2');
 
-      setSelectValue(/select search path/i, 'wildcard');
-      setInputElementValue(/wildcard/i, 'path.*');
+      setSelectValue(/select search path/i, 'any fields');
 
       setInputElementValue(/text/i, 'xyz');
       setComboboxValue(/select or type a search index/i, 'index2');
@@ -147,7 +145,7 @@ describe('TextSearch', function () {
           text: {
             query: 'xyz',
             path: {
-              wildcard: 'path.*',
+              wildcard: '*',
             },
             fuzzy: {
               maxEdits: 2,
@@ -161,7 +159,7 @@ describe('TextSearch', function () {
 
   context('validation', function () {
     it('should validate maxEdits', function () {
-      setSelectValue(/select search type/i, 'fuzzy-search');
+      setSelectValue(/select search type/i, 'fuzzy search');
       {
         setInputElementValue(/maxEdits/i, '0');
         expect(onChangeSpy.lastCall.lastArg).to.be.an.instanceOf(Error);
diff --git a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx
index 3573c87a840..98756aeb06b 100644
--- a/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx
+++ b/packages/compass-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx
@@ -29,7 +29,6 @@ type TextSearchState = {
   path: SearchPath;
   maxEdits?: number;
   fields?: string[];
-  wildcard?: string;
   text: string;
   indexName: string;
 };
@@ -64,10 +63,7 @@ const mapTextSearchDataToStageValue = (formData: TextSearchState): Document => {
     index: formData.indexName || 'default',
     text: {
       query: formData.text,
-      path:
-        formData.path === 'wildcard'
-          ? { wildcard: formData.wildcard || '*' }
-          : formData.fields,
+      path: formData.path === 'wildcard' ? { wildcard: '*' } : formData.fields,
       ...(formData.type === 'fuzzy'
         ? { fuzzy: { maxEdits: formData.maxEdits } }
         : {}),
@@ -111,14 +107,13 @@ export const TextSearch = ({
     type: 'text',
     path: 'fields',
     maxEdits: 2,
-    wildcard: '*',
     text: '',
     indexName: '',
   });
 
   useEffect(() => {
     onFetchIndexes();
-  }, []);
+  }, [onFetchIndexes]);
 
   const onSetFormData = (data: TextSearchState) => {
     const stageValue = mapTextSearchDataToStageValue(data);
@@ -149,8 +144,8 @@ export const TextSearch = ({
           value={formData.type}
           onChange={(value) => onChangeProperty('type', value as SearchType)}
         >
-          <Option value="text">text-search</Option>
-          <Option value="fuzzy">fuzzy-search</Option>
+          <Option value="text">text search</Option>
+          <Option value="fuzzy">fuzzy search</Option>
         </Select>
         <div className={inputWithLabelStyles}>
           <Body>with maxEdits</Body>
@@ -180,26 +175,16 @@ export const TextSearch = ({
           onChange={(value) => onChangeProperty('path', value as SearchPath)}
         >
           <Option value="fields">field names</Option>
-          <Option value="wildcard">wildcard</Option>
+          <Option value="wildcard">any fields</Option>
         </Select>
-        {formData.path === 'fields' && (
-          <FieldCombobox
-            className={inputStyles}
-            value={formData.fields}
-            onChange={(val: string[]) => onChangeProperty('fields', val)}
-            fields={fields}
-            multiselect={true}
-          />
-        )}
-        {formData.path === 'wildcard' && (
-          <TextInput
-            placeholder={'*'}
-            aria-label={'Wildcard'}
-            value={formData.wildcard}
-            className={inputStyles}
-            onChange={(e) => onChangeProperty('wildcard', e.target.value)}
-          />
-        )}
+        <FieldCombobox
+          className={inputStyles}
+          value={formData.fields}
+          onChange={(val: string[]) => onChangeProperty('fields', val)}
+          fields={fields}
+          multiselect={true}
+          disabled={formData.path === 'wildcard'}
+        />
       </div>
       <div className={rowStyles}>
         <Body className={labelStyles}>contains</Body>
diff --git a/packages/compass-aggregations/src/components/stage-wizard/index.tsx b/packages/compass-aggregations/src/components/stage-wizard/index.tsx
index 9c34858fbfd..e7dbc034e81 100644
--- a/packages/compass-aggregations/src/components/stage-wizard/index.tsx
+++ b/packages/compass-aggregations/src/components/stage-wizard/index.tsx
@@ -12,7 +12,7 @@ import {
   KeylineCard,
   Link,
   spacing,
-  Disclaimer,
+  Badge,
   WarningSummary,
 } from '@mongodb-js/compass-components';
 
@@ -212,7 +212,7 @@ export const StageWizard = ({
                 {useCase.stageOperator}
               </Link>
             </div>
-            {useCase.isAtlasOnly && <Disclaimer>Atlas-only</Disclaimer>}
+            {useCase.isAtlasOnly && <Badge>Atlas only</Badge>}
           </div>
         </div>
         <div ref={focusContainerRef}>
diff --git a/packages/compass-aggregations/test/form-helper.ts b/packages/compass-aggregations/test/form-helper.ts
index 2849c899fe2..f5a0bde4bbc 100644
--- a/packages/compass-aggregations/test/form-helper.ts
+++ b/packages/compass-aggregations/test/form-helper.ts
@@ -82,5 +82,7 @@ export const setInputElementValue = (
     selector: 'input',
   });
   userEvent.clear(input);
-  userEvent.type(input, value);
+  if (value !== '') {
+    userEvent.type(input, value);
+  }
 };