From a17d93d3b530f2ea4791c62fa00bcfb65935a000 Mon Sep 17 00:00:00 2001
From: Quynh Nguyen <quynh.nguyen@elastic.co>
Date: Wed, 16 Dec 2020 16:24:04 -0600
Subject: [PATCH] [ML] Add 'checked' marker to multi select comp

---
 .../multi_select_picker.tsx                   | 35 +++----
 .../services/ml/data_visualizer_table.ts      | 95 +++++++++++++------
 2 files changed, 87 insertions(+), 43 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx b/x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx
index c982b087a31b1..659c4a1005453 100644
--- a/x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx
+++ b/x-pack/plugins/ml/public/application/components/multi_select_picker/multi_select_picker.tsx
@@ -115,22 +115,25 @@ export const MultiSelectPicker: FC<{
         </EuiPopoverTitle>
         <div style={{ maxHeight: 250, overflow: 'auto' }}>
           {Array.isArray(items) && items.length > 0 ? (
-            items.map((item, index) => (
-              <EuiFilterSelectItem
-                checked={
-                  checkedOptions &&
-                  checkedOptions.findIndex((fieldValue) => fieldValue === item.value) > -1
-                    ? 'on'
-                    : undefined
-                }
-                key={index}
-                onClick={() => handleOnChange(index)}
-                style={{ flexDirection: 'row' }}
-                data-test-subj={`${dataTestSubj}-option-${item.value}`}
-              >
-                {item.name ?? item.value}
-              </EuiFilterSelectItem>
-            ))
+            items.map((item, index) => {
+              const checked =
+                checkedOptions &&
+                checkedOptions.findIndex((fieldValue) => fieldValue === item.value) > -1;
+
+              return (
+                <EuiFilterSelectItem
+                  checked={checked ? 'on' : undefined}
+                  key={index}
+                  onClick={() => handleOnChange(index)}
+                  style={{ flexDirection: 'row' }}
+                  data-test-subj={`${dataTestSubj}-option-${item.value}${
+                    checked ? '-checked' : ''
+                  }`}
+                >
+                  {item.name ?? item.value}
+                </EuiFilterSelectItem>
+              );
+            })
           ) : (
             <NoFilterItems />
           )}
diff --git a/x-pack/test/functional/services/ml/data_visualizer_table.ts b/x-pack/test/functional/services/ml/data_visualizer_table.ts
index 31b24e68ea1d3..f5f9770508235 100644
--- a/x-pack/test/functional/services/ml/data_visualizer_table.ts
+++ b/x-pack/test/functional/services/ml/data_visualizer_table.ts
@@ -6,7 +6,6 @@
 import expect from '@kbn/expect';
 import { ProvidedType } from '@kbn/test/types/ftr';
 import { FtrProviderContext } from '../../ftr_provider_context';
-import { asyncForEach } from '../../apps/ml/settings/common';
 import { ML_JOB_FIELD_TYPES } from '../../../../plugins/ml/common/constants/field_types';
 export type MlDataVisualizerTable = ProvidedType<typeof MachineLearningDataVisualizerTableProvider>;
 
@@ -170,52 +169,94 @@ export function MachineLearningDataVisualizerTableProvider({ getService }: FtrPr
       });
     }
 
-    public async setFieldTypeFilter(fieldTypes: string[], expectedRowCount = 1) {
-      await this.assertFieldNameInputExists();
-      await testSubjects.clickWhenNotDisabled('mlDataVisualizerFieldTypeSelect-button');
-      await testSubjects.existOrFail('mlDataVisualizerFieldTypeSelect-popover');
-      await testSubjects.existOrFail('mlDataVisualizerFieldTypeSelect-searchInput');
-      const searchBarInput = await testSubjects.find(`mlDataVisualizerFieldTypeSelect-searchInput`);
+    public async setMultiSelectFilter(
+      testDataSubj: string,
+      fieldTypes: string[],
+      expectedRowCount = 1
+    ) {
+      await testSubjects.clickWhenNotDisabled(`${testDataSubj}-button`);
+      await testSubjects.existOrFail(`${testDataSubj}-popover`);
+      await testSubjects.existOrFail(`${testDataSubj}-searchInput`);
+      const searchBarInput = await testSubjects.find(`${testDataSubj}-searchInput`);
 
-      await asyncForEach(fieldTypes, async (fieldType) => {
+      for (const fieldType of fieldTypes) {
         await retry.tryForTime(5000, async () => {
           await searchBarInput.clearValueWithKeyboard();
           await searchBarInput.type(fieldType);
-          await testSubjects.existOrFail(`mlDataVisualizerFieldTypeSelect-option-${fieldType}`);
-          await testSubjects.click(`mlDataVisualizerFieldTypeSelect-option-${fieldType}`);
+          if (!(await testSubjects.exists(`${testDataSubj}-option-${fieldType}-checked`))) {
+            await testSubjects.existOrFail(`${testDataSubj}-option-${fieldType}`);
+            await testSubjects.click(`${testDataSubj}-option-${fieldType}`);
+            await testSubjects.existOrFail(`${testDataSubj}-option-${fieldType}-checked`);
+          }
         });
-      });
+      }
 
       // escape popover
       await browser.pressKeys(browser.keys.ESCAPE);
       await this.assertTableRowCount(expectedRowCount);
     }
 
-    async removeFieldTypeFilter(fieldTypes: string[], expectedRowCount = 1) {
-      await this.setFieldTypeFilter(fieldTypes, expectedRowCount);
-    }
-
-    public async setFieldNameFilter(fieldNames: string[], expectedRowCount = 1) {
-      await this.assertFieldNameInputExists();
-      await testSubjects.clickWhenNotDisabled('mlDataVisualizerFieldNameSelect-button');
-      await testSubjects.existOrFail('mlDataVisualizerFieldNameSelect-popover');
-      await testSubjects.existOrFail('mlDataVisualizerFieldNameSelect-searchInput');
-      const searchBarInput = await testSubjects.find(`mlDataVisualizerFieldNameSelect-searchInput`);
+    async removeMultiSelectFilter(
+      testDataSubj: string,
+      fieldTypes: string[],
+      expectedRowCount = 1
+    ) {
+      await testSubjects.clickWhenNotDisabled(`${testDataSubj}-button`);
+      await testSubjects.existOrFail(`${testDataSubj}-popover`);
+      await testSubjects.existOrFail(`${testDataSubj}-searchInput`);
+      const searchBarInput = await testSubjects.find(`${testDataSubj}-searchInput`);
 
-      await asyncForEach(fieldNames, async (filterString) => {
+      for (const fieldType of fieldTypes) {
         await retry.tryForTime(5000, async () => {
           await searchBarInput.clearValueWithKeyboard();
-          await searchBarInput.type(filterString);
-          await testSubjects.existOrFail(`mlDataVisualizerFieldNameSelect-option-${filterString}`);
-          await testSubjects.click(`mlDataVisualizerFieldNameSelect-option-${filterString}`);
+          await searchBarInput.type(fieldType);
+          if (!(await testSubjects.exists(`${testDataSubj}-option-${fieldType}`))) {
+            await testSubjects.existOrFail(`${testDataSubj}-option-${fieldType}-checked`);
+            await testSubjects.click(`${testDataSubj}-option-${fieldType}-checked`);
+            await testSubjects.existOrFail(`${testDataSubj}-option-${fieldType}`);
+          }
         });
-      });
+      }
+
+      // escape popover
       await browser.pressKeys(browser.keys.ESCAPE);
       await this.assertTableRowCount(expectedRowCount);
     }
 
+    public async setFieldTypeFilter(fieldTypes: string[], expectedRowCount = 1) {
+      await this.assertFieldTypeInputExists();
+      await this.setMultiSelectFilter(
+        'mlDataVisualizerFieldTypeSelect',
+        fieldTypes,
+        expectedRowCount
+      );
+    }
+
+    async removeFieldTypeFilter(fieldTypes: string[], expectedRowCount = 1) {
+      await this.assertFieldTypeInputExists();
+      await this.removeMultiSelectFilter(
+        'mlDataVisualizerFieldTypeSelect',
+        fieldTypes,
+        expectedRowCount
+      );
+    }
+
+    public async setFieldNameFilter(fieldNames: string[], expectedRowCount = 1) {
+      await this.assertFieldNameInputExists();
+      await this.setMultiSelectFilter(
+        'mlDataVisualizerFieldNameSelect',
+        fieldNames,
+        expectedRowCount
+      );
+    }
+
     public async removeFieldNameFilter(fieldNames: string[], expectedRowCount: number) {
-      await this.setFieldNameFilter(fieldNames, expectedRowCount);
+      await this.assertFieldNameInputExists();
+      await this.removeMultiSelectFilter(
+        'mlDataVisualizerFieldNameSelect',
+        fieldNames,
+        expectedRowCount
+      );
     }
 
     public async assertShowEmptyFieldsSwitchExists() {