Fix "is one of" filter editor (#13771)

* Keep params so phrases editor works after closing and opening

* Add functional test

src/ui/public/filter_bar/filter_bar.html

@@ -13,6 +13,7 @@
         <button
           class="kuiButton kuiButton--hollow"
           ng-click="clearFilterBar();"
+          data-test-subj="addFilter"
         >
           Cancel
         </button>

src/ui/public/filter_bar/filter_bar.js

@@ -84,7 +84,7 @@ module.directive('filterBar', function (Private, Promise, getAppState) {
       };
 
       $scope.saveEdit = (filter, newFilter, isPinned) => {
-        if (!filter.isNew) $scope.removeFilter(filter);
+        if (!filter.meta.isNew) $scope.removeFilter(filter);
         delete $scope.editingFilter;
         $scope.addFilters([newFilter], isPinned);
       };

src/ui/public/filter_bar/filter_pill/filter_pill.html

@@ -66,6 +66,7 @@
       ng-focus="pill.activateActions()"
       ng-blur="pill.deactivateActions()"
       aria-label="Edit filter"
+      data-test-subj="editFilter"
     >
       <i class="fa fa-fw fa-edit"></i>
     </button>

src/ui/public/filter_bar/lib/map_phrases.js

@@ -1,10 +1,10 @@
 export function FilterBarLibMapPhrasesProvider(Promise) {
   return function (filter) {
-    const { type, key, value } = filter.meta;
+    const { type, key, value, params } = filter.meta;
     if (type !== 'phrases') {
       return Promise.reject(filter);
     } else {
-      return Promise.resolve({ type, key, value });
+      return Promise.resolve({ type, key, value, params });
     }
   };
 }

src/ui/public/filter_editor/filter_editor.html

@@ -134,6 +134,7 @@
         class="kuiButton kuiButton--primary"
         ng-disabled="!filterEditor.isValid()"
         ng-click="filterEditor.save()"
+        data-test-subj="saveFilter"
       >
         Save
       </button>

src/ui/public/filter_editor/params_editor/filter_params_phrases_editor.html

@@ -10,6 +10,7 @@
     class="uiSelectMatch--restrictToParent"
   >
     <span
+      data-test-subj="filterEditorPhrases"
       class="uiSelectMatch--pillWithTooltip"
       tooltip="{{$item}}"
     >

test/functional/apps/discover/_discover.js

@@ -232,6 +232,20 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
+    describe('filter editor', function () {
+      it('should add a phrases filter', async function () {
+        await filterBar.addFilter('extension.raw', 'is one of', 'jpg');
+        expect(await filterBar.hasFilter('extension.raw', 'jpg')).to.be(true);
+      });
+
+      it('should show the phrases if you re-open a phrases filter', async function () {
+        await filterBar.clickEditFilter('extension.raw', 'jpg');
+        const phrases = await filterBar.getFilterEditorPhrases();
+        expect(phrases.length).to.be(1);
+        expect(phrases[0]).to.be('jpg');
+      });
+    });
+
     describe('query language switching', function () {
 
       after(async function () {

test/functional/services/filter_bar.js

@@ -1,6 +1,7 @@
 export function FilterBarProvider({ getService }) {
   const remote = getService('remote');
   const testSubjects = getService('testSubjects');
+  const find = getService('find');
 
   class FilterBar {
     hasFilter(key, value, enabled = true) {
@@ -15,6 +16,31 @@ export function FilterBarProvider({ getService }) {
       await remote.moveMouseTo(filterElement);
       await testSubjects.click(`filter & filter-key-${key} disableFilter-${key}`);
     }
+
+    async addFilter(field, operator, value) {
+      await testSubjects.click('addFilter');
+      let input = await find.byCssSelector(`filter-field-select input.ui-select-search`);
+      await input.type(field);
+      await remote.pressKeys('\uE006');
+      input = await find.byCssSelector(`filter-operator-select input.ui-select-search`);
+      await input.type(operator);
+      await remote.pressKeys('\uE006');
+      input = await find.byCssSelector(`filter-params-editor input.ui-select-search`);
+      await input.type(value);
+      await remote.pressKeys('\uE006');
+      await testSubjects.click('saveFilter');
+    }
+
+    async clickEditFilter(key, value) {
+      const pill = await testSubjects.find(`filter & filter-key-${key} & filter-value-${value}`);
+      await remote.moveMouseTo(pill);
+      await testSubjects.click('editFilter');
+    }
+
+    async getFilterEditorPhrases() {
+      const spans = await testSubjects.findAll('filterEditorPhrases');
+      return await Promise.all(spans.map(el => el.getVisibleText()));
+    }
   }
 
   return new FilterBar();