[Canvas] Fix expression updating bug (#54297) (#54604)

* Fix expression updating bug

* Add functional test for expression editor

* Add page object helper to open expression editor

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/canvas/public/components/expression/index.js

@@ -55,6 +55,17 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 };
 
 const expressionLifecycle = lifecycle({
+  componentDidUpdate({ expression }) {
+    if (
+      this.props.expression !== expression &&
+      this.props.expression !== this.props.formState.expression
+    ) {
+      this.props.setFormState({
+        expression: this.props.expression,
+        dirty: false,
+      });
+    }
+  },
   componentDidMount() {
     const { functionDefinitionsPromise, setFunctionDefinitions } = this.props;
     functionDefinitionsPromise.then(defs => setFunctionDefinitions(defs));

x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.tsx

@@ -97,7 +97,7 @@ export const Toolbar = (props: Props) => {
 
   const trays = {
     pageManager: <PageManager previousPage={previousPage} />,
-    expression: !elementIsSelected ? null : <Expression key={selectedElement.id} done={done} />,
+    expression: !elementIsSelected ? null : <Expression done={done} />,
   };
 
   return (
@@ -141,6 +141,7 @@ export const Toolbar = (props: Props) => {
                 color="text"
                 iconType="editorCodeBlock"
                 onClick={() => showHideTray(TrayType.expression)}
+                data-test-subj="canvasExpressionEditorButton"
               >
                 {strings.getEditorButtonLabel()}
               </EuiButtonEmpty>

x-pack/test/functional/apps/canvas/expression.ts

@@ -0,0 +1,70 @@
+/*
+ * 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 canvasExpressionTest({ getService, getPageObjects }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const testSubjects = getService('testSubjects');
+  // const browser = getService('browser');
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['canvas', 'common']);
+  const find = getService('find');
+
+  describe('expression editor', function() {
+    // there is an issue with FF not properly clicking on workpad elements
+    this.tags('skipFirefox');
+
+    before(async () => {
+      // init data
+      await esArchiver.loadIfNeeded('logstash_functional');
+      await esArchiver.load('canvas/default');
+
+      // load test workpad
+      await PageObjects.common.navigateToApp('canvas', {
+        hash: '/workpad/workpad-1705f884-6224-47de-ba49-ca224fe6ec31/page/1',
+      });
+    });
+
+    it('updates when element is changed via side bar', 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(4);
+      });
+
+      // find the first workpad element (a markdown element) and click it to select it
+      await testSubjects.click('canvasWorkpadPage > canvasWorkpadPageElementContent', 20000);
+
+      // open the expression editor
+      await PageObjects.canvas.openExpressionEditor();
+
+      // select markdown content and clear it
+      const mdBox = await find.byCssSelector('.canvasSidebar__panel .canvasTextArea__code');
+      const oldMd = await mdBox.getVisibleText();
+      await mdBox.clearValueWithKeyboard();
+
+      // type the new text
+      const newMd = `${oldMd} and this is a test`;
+      await mdBox.type(newMd);
+      await find.clickByCssSelector('.canvasArg--controls .euiButton');
+
+      // make sure the open expression editor also has the changes
+      const editor = await find.byCssSelector('.monaco-editor .view-lines');
+      const editorText = await editor.getVisibleText();
+      expect(editorText).to.contain('Orange: Timelion, Server function and this is a test');
+
+      // reset the markdown
+      await mdBox.clearValueWithKeyboard();
+      await mdBox.type(oldMd);
+      await find.clickByCssSelector('.canvasArg--controls .euiButton');
+    });
+  });
+}

x-pack/test/functional/apps/canvas/index.js

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

x-pack/test/functional/page_objects/canvas_page.ts

@@ -23,6 +23,10 @@ export function CanvasPageProvider({ getService }: FtrProviderContext) {
       await browser.pressKeys(browser.keys.ESCAPE);
     },
 
+    async openExpressionEditor() {
+      await testSubjects.click('canvasExpressionEditorButton');
+    },
+
     async waitForWorkpadElements() {
       await testSubjects.findAll('canvasWorkpadPage > canvasWorkpadPageElementContent');
     },