[Canvas] Fix elements not being updated properly when filter is changed on workpad (#81863) (#82866)

* Update renderer handlers when element is changed

* Update handlers before render

* Add canvas functional test for filters

* Update snapshot and remove log

Co-authored-by: Kibana Machine <[email protected]>
# Conflicts:
#	x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx

Author: poffdeluxe

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot

@@ -62,7 +62,12 @@ export const DropdownFilter: FunctionComponent<Props> = ({
   return (
     <div className="canvasDropdownFilter">
       {/* eslint-disable-next-line jsx-a11y/no-onchange */}
-      <select className="canvasDropdownFilter__select" value={value} onChange={changeHandler}>
+      <select
+        className="canvasDropdownFilter__select"
+        value={value}
+        onChange={changeHandler}
+        data-test-subj="canvasDropdownFilter__select"
+      >
         {dropdownOptions}
       </select>
       <EuiIcon className="canvasDropdownFilter__icon" type="arrowDown" />

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.tsx

@@ -17,7 +17,9 @@ const LimitRows = (key: string, value: any) => {
 
 export const Debug = ({ payload }: any) => (
   <EuiCode className="canvasDebug">
-    <pre className="canvasDebug__content">{JSON.stringify(payload, LimitRows, 2)}</pre>
+    <pre className="canvasDebug__content" data-test-subj="canvasDebug__content">
+      {JSON.stringify(payload, LimitRows, 2)}
+    </pre>
   </EuiCode>
 );
 

x-pack/plugins/canvas/public/components/debug/__stories__/__snapshots__/debug.stories.storyshot

@@ -12,7 +12,6 @@ import { getType } from '@kbn/interpreter/common';
 import { Loading } from '../loading';
 import { RenderWithFn } from '../render_with_fn';
 import { ElementShareContainer } from '../element_share_container';
-import { assignHandlers } from '../../lib/create_handlers';
 import { InvalidExpression } from './invalid_expression';
 import { InvalidElementType } from './invalid_element_type';
 
@@ -48,15 +47,7 @@ export const ElementContent = compose(
   pure,
   ...branches
 )(({ renderable, renderFunction, width, height, handlers }) => {
-  const {
-    getFilter,
-    setFilter,
-    done,
-    onComplete,
-    onEmbeddableInputChange,
-    onEmbeddableDestroyed,
-    getElementId,
-  } = handlers;
+  const { onComplete } = handlers;
 
   return Style.it(
     renderable.css,
@@ -79,14 +70,7 @@ export const ElementContent = compose(
           css={renderable.css} // This is an actual CSS stylesheet string, it will be scoped by RenderElement
           width={width}
           height={height}
-          handlers={assignHandlers({
-            getFilter,
-            setFilter,
-            done,
-            onEmbeddableInputChange,
-            onEmbeddableDestroyed,
-            getElementId,
-          })}
+          handlers={handlers}
         />
       </ElementShareContainer>
     </div>

x-pack/plugins/canvas/public/components/debug/debug.tsx

@@ -6,6 +6,8 @@
 
 import React, { useState, useEffect, useRef, FC, useCallback } from 'react';
 
+import { isEqual } from 'lodash';
+
 import { useNotifyService } from '../../services';
 import { RenderToDom } from '../render_to_dom';
 import { ErrorStrings } from '../../../i18n';
@@ -82,8 +84,12 @@ export const RenderWithFn: FC<Props> = ({
   );
 
   const render = useCallback(() => {
+    if (!isEqual(handlers.current, incomingHandlers)) {
+      handlers.current = incomingHandlers;
+    }
+
     renderFn(renderTarget.current!, config, handlers.current);
-  }, [renderTarget, config, renderFn]);
+  }, [renderTarget, config, renderFn, incomingHandlers]);
 
   useEffect(() => {
     if (!domNode) {

x-pack/plugins/canvas/public/components/element_content/element_content.js

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function canvasFiltersTest({ getService, getPageObjects }: FtrProviderContext) {
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['canvas', 'common']);
+  const find = getService('find');
+  const esArchiver = getService('esArchiver');
+
+  describe('filters', function () {
+    // there is an issue with FF not properly clicking on workpad elements
+    this.tags('skipFirefox');
+
+    before(async () => {
+      await esArchiver.load('canvas/filter');
+      // load test workpad
+      await PageObjects.common.navigateToApp('canvas', {
+        hash: '/workpad/workpad-b5618217-56d2-47fa-b756-1be2306cda68/page/1',
+      });
+    });
+
+    it('filter updates when dropdown is changed', async () => {
+      // wait for all our elements to load up
+      await retry.try(async () => {
+        const elements = await testSubjects.findAll(
+          'canvasWorkpadPage > canvasWorkpadPageElementContent'
+        );
+        expect(elements).to.have.length(3);
+      });
+
+      // Double check that the filter has the correct time range and default filter value
+      const startingMatchFilters = await PageObjects.canvas.getMatchFiltersFromDebug();
+      expect(startingMatchFilters[0].value).to.equal('apm');
+      expect(startingMatchFilters[0].column).to.equal('project');
+
+      // Change dropdown value
+      await testSubjects.selectValue('canvasDropdownFilter__select', 'beats');
+
+      await retry.try(async () => {
+        const matchFilters = await PageObjects.canvas.getMatchFiltersFromDebug();
+        expect(matchFilters[0].value).to.equal('beats');
+        expect(matchFilters[0].column).to.equal('project');
+      });
+    });
+
+    it('filter updates when time range is changed', async () => {
+      // wait for all our elements to load up
+      await retry.try(async () => {
+        const elements = await testSubjects.findAll(
+          'canvasWorkpadPage > canvasWorkpadPageElementContent'
+        );
+        expect(elements).to.have.length(3);
+      });
+
+      const startingTimeFilters = await PageObjects.canvas.getTimeFiltersFromDebug();
+      expect(startingTimeFilters[0].column).to.equal('@timestamp');
+      expect(new Date(startingTimeFilters[0].from).toDateString()).to.equal('Sun Oct 18 2020');
+      expect(new Date(startingTimeFilters[0].to).toDateString()).to.equal('Sat Oct 24 2020');
+
+      await testSubjects.click('superDatePickerstartDatePopoverButton');
+      await find.clickByCssSelector('.react-datepicker [aria-label="day-19"]', 20000);
+
+      await retry.try(async () => {
+        const timeFilters = await PageObjects.canvas.getTimeFiltersFromDebug();
+        expect(timeFilters[0].column).to.equal('@timestamp');
+        expect(new Date(timeFilters[0].from).toDateString()).to.equal('Mon Oct 19 2020');
+        expect(new Date(timeFilters[0].to).toDateString()).to.equal('Sat Oct 24 2020');
+      });
+
+      await testSubjects.click('superDatePickerendDatePopoverButton');
+      await find.clickByCssSelector('.react-datepicker [aria-label="day-23"]', 20000);
+
+      await retry.try(async () => {
+        const timeFilters = await PageObjects.canvas.getTimeFiltersFromDebug();
+        expect(timeFilters[0].column).to.equal('@timestamp');
+        expect(new Date(timeFilters[0].from).toDateString()).to.equal('Mon Oct 19 2020');
+        expect(new Date(timeFilters[0].to).toDateString()).to.equal('Fri Oct 23 2020');
+      });
+    });
+  });
+}

x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx

@@ -22,6 +22,7 @@ export default function canvasApp({ loadTestFile, getService }) {
     this.tags('ciGroup2'); // CI requires tags ヽ(゜Q。)ノ？
     loadTestFile(require.resolve('./smoke_test'));
     loadTestFile(require.resolve('./expression'));
+    loadTestFile(require.resolve('./filters'));
     loadTestFile(require.resolve('./custom_elements'));
     loadTestFile(require.resolve('./feature_controls/canvas_security'));
     loadTestFile(require.resolve('./feature_controls/canvas_spaces'));