[6.4] Fix available fields option toggle (#21730) (#21758)

* Fix available fields option toggle (#21730)

a36b87a#diff-aff92ff718af4b68d02f030d8a438754 added an ng-if around the available fields button element. ng-if creates a child scope. The ng-click on the button directly modifies scope state. As a result, when the ng-if was added, that ng-click began modifying the ng-if's child scope instead of the parent scope.

The best solution would be to update the discFieldChooser directive to use the controllerAs property so its scope variables are namespaced. However, this is a bit risky because I'd need to make sure to update every single scope variable reference in the template, and it's a relatively large template. Since we'd like to backport this to 6.4 I've taken the less risky route of adding $parent to the scope reference inside the ng-if block.

* forgot I needed this one too

src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html

@@ -55,33 +55,34 @@
 
     <div class="euiFlexItem euiFlexItem--flexGrowZero">
       <button
-        ng-click="showFields = !showFields"
+        ng-click="$parent.showFields = !$parent.showFields"
         aria-hidden="true"
         class="kuiButton kuiButton--small visible-xs visible-sm pull-right field-collapse-toggle"
       >
         <span
           aria-hidden="true"
           class="kuiIcon"
-          ng-class="{ 'fa-chevron-right': !showFields, 'fa-chevron-down': showFields }"
+          ng-class="{ 'fa-chevron-right': !$parent.showFields, 'fa-chevron-down': $parent.showFields }"
         ></span>
       </button>
     </div>
     <div class="euiFlexItem euiFlexItem--flexGrowZero">
       <button
         type="button"
-        ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
+        ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !$parent.showFields, 'hidden-sm': !$parent.showFields }"
         class="kuiButton kuiButton--small pull-right discover-field-filter-toggle"
-        ng-click="showFilter = !showFilter"
-        aria-label="{{showFilter ? 'Hide' : 'Show'}} field settings"
-        aria-expanded="{{!!showFilter}}"
+        ng-click="$parent.showFilter = !$parent.showFilter"
+        aria-label="{{$parent.showFilter ? 'Hide' : 'Show'}} field settings"
+        aria-expanded="{{!!$parent.showFilter}}"
         aria-controls="discoverFieldFilter"
+        data-test-subj="toggleFieldFilterButton"
       >
         <span aria-hidden="true" class="kuiIcon fa-gear"></span>
       </button>
     </div>
   </div>
 
-  <div class="sidebar-item discover-field-details" ng-show="showFilter" id="discoverFieldFilter">
+  <div class="sidebar-item discover-field-details" ng-show="showFilter" id="discoverFieldFilter" data-test-subj="discoverFieldFilter">
     <form role="form">
       <div class="form-group">
         <label for="discoverFieldChooserFilterAggregatable">

test/functional/apps/discover/_sidebar.js

@@ -25,7 +25,7 @@ export default function ({ getService, getPageObjects }) {
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['common', 'discover', 'header']);
 
-  describe('discover tab', function describeIndexTests() {
+  describe('discover sidebar', function describeIndexTests() {
     before(async function () {
       const fromTime = '2015-09-19 06:31:44.000';
       const toTime = '2015-09-23 18:31:44.000';
@@ -49,6 +49,13 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.header.setAbsoluteRange(fromTime, toTime);
     });
 
+    describe('field filtering', function () {
+      it('should reveal and hide the filter form when the toggle is clicked', async function () {
+        await PageObjects.discover.openSidebarFieldFilter();
+        await PageObjects.discover.closeSidebarFieldFilter();
+      });
+    });
+
     describe('collapse expand', function () {
       it('should initially be expanded', async function () {
         const width = await PageObjects.discover.getSidebarWidth();

test/functional/apps/discover/index.js

@@ -34,7 +34,7 @@ export default function ({ getService, loadTestFile }) {
     loadTestFile(require.resolve('./_errors'));
     loadTestFile(require.resolve('./_field_data'));
     loadTestFile(require.resolve('./_shared_links'));
-    loadTestFile(require.resolve('./_collapse_expand'));
+    loadTestFile(require.resolve('./_sidebar'));
     loadTestFile(require.resolve('./_source_filters'));
     loadTestFile(require.resolve('./_large_string'));
   });

test/functional/page_objects/discover_page.js

@@ -313,6 +313,23 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
       await testSubjects.moveMouseTo(`docTableHeader-${name}`);
       await testSubjects.click(`docTableRemoveHeader-${name}`);
     }
+
+    async openSidebarFieldFilter() {
+      const fieldFilterFormExists = await testSubjects.exists('discoverFieldFilter');
+      if (!fieldFilterFormExists) {
+        await testSubjects.click('toggleFieldFilterButton');
+        await testSubjects.existOrFail('discoverFieldFilter');
+      }
+    }
+
+    async closeSidebarFieldFilter() {
+      const fieldFilterFormExists = await testSubjects.exists('discoverFieldFilter');
+      if (fieldFilterFormExists) {
+        await testSubjects.click('toggleFieldFilterButton');
+        await testSubjects.missingOrFail('discoverFieldFilter');
+      }
+    }
+
   }
 
   return new DiscoverPage();

test/functional/services/test_subjects.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import expect from 'expect.js';
 import testSubjSelector from '@kbn/test-subj-selector';
 import {
   filter as filterAsync,
@@ -37,6 +38,20 @@ export function TestSubjectsProvider({ getService }) {
       return await find.existsByDisplayedByCssSelector(testSubjSelector(selector), timeout);
     }
 
+    async existOrFail(selector, timeout = 1000) {
+      log.debug(`TestSubjects.existOrFail(${selector})`);
+      const doesExist = await this.exists(selector, timeout);
+      // Verify element exists, or else fail the test consuming this.
+      expect(doesExist).to.be(true);
+    }
+
+    async missingOrFail(selector, timeout = 1000) {
+      log.debug(`TestSubjects.missingOrFail(${selector})`);
+      const doesExist = await this.exists(selector, timeout);
+      // Verify element is missing, or else fail the test consuming this.
+      expect(doesExist).to.be(false);
+    }
+
     async append(selector, text) {
       return await retry.try(async () => {
         const input = await this.find(selector);