Merge branch 'master' of github.com:elastic/kibana into fix.apm.links

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

@@ -11,8 +11,7 @@ import { EuiButtonIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Popover } from '../popover';
 import { ArgAdd } from '../arg_add';
-// @ts-expect-error untyped local
-import { Arg } from '../../expression_types/arg';
+import type { Arg } from '../../expression_types/arg';
 
 const strings = {
   getAddAriaLabel: () =>
@@ -51,8 +50,8 @@ export const ArgAddPopover: FC<Props> = ({ options }) => {
         options.map((opt) => (
           <ArgAdd
             key={`${opt.arg.name}-add`}
-            displayName={opt.arg.displayName}
-            help={opt.arg.help}
+            displayName={opt.arg.displayName ?? ''}
+            help={opt.arg.help ?? ''}
             onValueAdd={() => {
               opt.onValueAdd();
               closePopover();

x-pack/plugins/canvas/public/components/datasource/__stories__/datasource_component.stories.tsx

@@ -12,7 +12,6 @@ import React from 'react';
 // @ts-expect-error untyped local
 import { DatasourceComponent } from '../datasource_component';
 import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
-// @ts-expect-error untyped local
 import { Datasource } from '../../../../public/expression_types/datasource';
 
 const TestDatasource = ({ args }: any) => (

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

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { FunctionFormComponent } from './function_form_component';
+import { FunctionUnknown } from './function_unknown';
+import { FunctionFormContextPending } from './function_form_context_pending';
+import { FunctionFormContextError } from './function_form_context_error';
+import { ExpressionContext } from '../../../types';
+import { RenderArgData, ExpressionType } from '../../expression_types/types';
+
+type FunctionFormProps = RenderArgData;
+
+// helper to check the state of the passed in expression type
+function is(
+  state: ExpressionContext['state'],
+  expressionType: ExpressionType,
+  context?: ExpressionContext
+) {
+  const matchState = !context || context.state === state;
+  return expressionType && expressionType.requiresContext && matchState;
+}
+
+export const FunctionForm: React.FunctionComponent<FunctionFormProps> = (props) => {
+  const { expressionType, context } = props;
+
+  if (!expressionType) {
+    return <FunctionUnknown argType={props.argType} />;
+  }
+
+  if (is('pending', expressionType, context)) {
+    return (
+      <FunctionFormContextPending
+        context={props.context}
+        expressionType={props.expressionType}
+        updateContext={props.updateContext}
+      />
+    );
+  }
+
+  if (is('error', expressionType, context)) {
+    return (
+      <FunctionFormContextError
+        context={
+          context ?? {
+            state: 'error',
+            error: 'Error occured',
+            value: expressionType,
+          }
+        }
+      />
+    );
+  }
+
+  return <FunctionFormComponent {...props} />;
+};

x-pack/plugins/canvas/public/components/function_form/function_form_component.js → x-pack/plugins/canvas/public/components/function_form/function_form_component.tsx

@@ -5,11 +5,14 @@
  * 2.0.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
+import { RenderArgData } from '../../expression_types/types';
 
-export const FunctionFormComponent = (props) => {
+type FunctionFormComponentProps = RenderArgData;
+
+export const FunctionFormComponent: FunctionComponent<FunctionFormComponentProps> = (props) => {
   const passedProps = {
+    name: props.name,
     argResolver: props.argResolver,
     args: props.args,
     argType: props.argType,
@@ -24,27 +27,8 @@ export const FunctionFormComponent = (props) => {
     onValueAdd: props.onValueAdd,
     onValueChange: props.onValueChange,
     onValueRemove: props.onValueRemove,
+    updateContext: props.updateContext,
   };
 
   return <div className="canvasFunctionForm">{props.expressionType.render(passedProps)}</div>;
 };
-
-FunctionFormComponent.propTypes = {
-  // props passed into expression type render functions
-  argResolver: PropTypes.func.isRequired,
-  args: PropTypes.object.isRequired,
-  argType: PropTypes.string.isRequired,
-  argTypeDef: PropTypes.object.isRequired,
-  filterGroups: PropTypes.array.isRequired,
-  context: PropTypes.object,
-  expressionIndex: PropTypes.number.isRequired,
-  expressionType: PropTypes.object.isRequired,
-  nextArgType: PropTypes.string,
-  nextExpressionType: PropTypes.object,
-  onAssetAdd: PropTypes.func.isRequired,
-  onValueAdd: PropTypes.func.isRequired,
-  onValueChange: PropTypes.func.isRequired,
-  onValueChange: PropTypes.func.isRequired,
-  onValueRemove: PropTypes.func.isRequired,
-  onValueRemove: PropTypes.func.isRequired,
-};

x-pack/plugins/canvas/public/components/function_form/function_form_context_error.tsx

@@ -6,30 +6,26 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
+import { ExpressionContext } from '../../../types';
 
 const strings = {
-  getContextErrorMessage: (errorMessage: string) =>
+  getContextErrorMessage: (errorMessage: string | null = '') =>
     i18n.translate('xpack.canvas.functionForm.contextError', {
       defaultMessage: 'ERROR: {errorMessage}',
       values: {
         errorMessage,
       },
     }),
 };
-interface Props {
-  context: {
-    error: string;
-  };
+interface FunctionFormContextErrorProps {
+  context: ExpressionContext;
 }
 
-export const FunctionFormContextError: FunctionComponent<Props> = ({ context }) => (
+export const FunctionFormContextError: FunctionComponent<FunctionFormContextErrorProps> = ({
+  context,
+}) => (
   <div className="canvasFunctionForm canvasFunctionForm--error">
     {strings.getContextErrorMessage(context.error)}
   </div>
 );
-
-FunctionFormContextError.propTypes = {
-  context: PropTypes.shape({ error: PropTypes.string }).isRequired,
-};

x-pack/plugins/canvas/public/components/function_form/function_form_context_pending.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useEffect } from 'react';
+import usePrevious from 'react-use/lib/usePrevious';
+import { Loading } from '../loading';
+import { CanvasElement, ExpressionContext } from '../../../types';
+import { ExpressionType } from '../../expression_types/types';
+
+interface FunctionFormContextPendingProps {
+  context?: ExpressionContext;
+  contextExpression?: string;
+  expressionType: ExpressionType;
+  updateContext: (element?: CanvasElement) => void;
+}
+
+export const FunctionFormContextPending: React.FunctionComponent<FunctionFormContextPendingProps> = (
+  props
+) => {
+  const { contextExpression, expressionType, context, updateContext } = props;
+  const prevContextExpression = usePrevious(contextExpression);
+  const fetchContext = useCallback(
+    (force = false) => {
+      // dispatch context update if none is provided
+      if (force || (context == null && expressionType.requiresContext)) {
+        updateContext();
+      }
+    },
+    [context, expressionType.requiresContext, updateContext]
+  );
+
+  useEffect(() => {
+    const forceUpdate =
+      expressionType.requiresContext && prevContextExpression !== contextExpression;
+    fetchContext(forceUpdate);
+  }, [contextExpression, expressionType, fetchContext, prevContextExpression]);
+
+  return (
+    <div className="canvasFunctionForm canvasFunctionForm--loading">
+      <Loading />
+    </div>
+  );
+};