[7.x] [Canvas] Update object-path-immutable; type AxisConfig and Con… (#41086)

x-pack/legacy/plugins/canvas/.storybook/storyshots.test.js

@@ -35,18 +35,18 @@ jest.mock('../canvas_plugin_src/renderers/shape/shapes', () => ({
 jest.mock('@elastic/datemath', () => {
   return {
     parse: (d, opts) => {
-      const dateMath = jest.requireActual('@elastic/datemath'); 
-      return dateMath.parse(d, {...opts, forceNow: new Date(Date.UTC(2019, 5, 1))}); // June 1 2019
-    }
-  }
+      const dateMath = jest.requireActual('@elastic/datemath');
+      return dateMath.parse(d, { ...opts, forceNow: new Date(Date.UTC(2019, 5, 1)) }); // June 1 2019
+    },
+  };
 });
 
 // Mock react-datepicker dep used by eui to avoid rendering the entire large component
 jest.mock('@elastic/eui/packages/react-datepicker', () => {
   return {
     __esModule: true,
     default: 'ReactDatePicker',
-  }
+  };
 });
 
 addSerializer(styleSheetSerializer);

x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/extended_template.examples.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { ExpressionAST } from '../../../../../types';
+
+import { ExtendedTemplate } from '../extended_template';
+
+const defaultExpression: ExpressionAST = {
+  type: 'expression',
+  chain: [
+    {
+      type: 'function',
+      function: 'axisConfig',
+      arguments: {},
+    },
+  ],
+};
+
+const defaultValues = {
+  argValue: defaultExpression,
+};
+
+class Interactive extends React.Component<{}, typeof defaultValues> {
+  public state = defaultValues;
+
+  _onValueChange: (argValue: ExpressionAST) => void = argValue => {
+    action('onValueChange')(argValue);
+    this.setState({ argValue });
+  };
+
+  public render() {
+    return (
+      <ExtendedTemplate
+        onValueChange={this._onValueChange}
+        argValue={this.state.argValue}
+        typeInstance={{ name: 'xaxis' }}
+      />
+    );
+  }
+}
+
+storiesOf('arguments/AxisConfig', module)
+  .addDecorator(story => (
+    <div style={{ width: '323px', padding: '16px', background: '#fff' }}>{story()}</div>
+  ))
+  .add('extended', () => <Interactive />);
+
+storiesOf('arguments/AxisConfig/components', module)
+  .addDecorator(story => (
+    <div style={{ width: '323px', padding: '16px', background: '#fff' }}>{story()}</div>
+  ))
+  .add('extended disabled', () => (
+    <ExtendedTemplate
+      onValueChange={action('onValueChange')}
+      argValue={false}
+      typeInstance={{ name: 'yaxis' }}
+    />
+  ))
+  .add('extended', () => (
+    <ExtendedTemplate
+      onValueChange={action('onValueChange')}
+      argValue={defaultExpression}
+      typeInstance={{ name: 'yaxis' }}
+    />
+  ));