parent
e392d859b9
commit
c18c39d57f
|
@ -63,7 +63,7 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
|
|||
</EuiTitle>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiPageContent data-test-subj="expressionsActionsTest">
|
||||
<EuiPageContentBody>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
|
|
|
@ -0,0 +1,102 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* and the Server Side Public License, v 1; you may not use this file except in
|
||||
* compliance with, at your election, the Elastic License or the Server Side
|
||||
* Public License, v 1.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
EuiFlexItem,
|
||||
EuiFlexGroup,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPanel,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import {
|
||||
ExpressionsStart,
|
||||
ReactExpressionRenderer,
|
||||
ExpressionsInspectorAdapter,
|
||||
} from '../../../src/plugins/expressions/public';
|
||||
import { ExpressionEditor } from './editor/expression_editor';
|
||||
import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
|
||||
|
||||
interface Props {
|
||||
expressions: ExpressionsStart;
|
||||
actions: UiActionsStart;
|
||||
}
|
||||
|
||||
export function ActionsExpressionsExample2({ expressions, actions }: Props) {
|
||||
const [expression, updateExpression] = useState(
|
||||
'button name="click me" href="http://www.google.com" color={var color}'
|
||||
);
|
||||
|
||||
const [variables, updateVariables] = useState({
|
||||
color: 'blue',
|
||||
});
|
||||
|
||||
const expressionChanged = (value: string) => {
|
||||
updateExpression(value);
|
||||
};
|
||||
|
||||
const inspectorAdapters = {
|
||||
expression: new ExpressionsInspectorAdapter(),
|
||||
};
|
||||
|
||||
const handleEvents = (event: any) => {
|
||||
updateVariables({ color: event.value.href === 'http://www.google.com' ? 'red' : 'blue' });
|
||||
};
|
||||
|
||||
return (
|
||||
<EuiPageBody>
|
||||
<EuiPageHeader>
|
||||
<EuiPageHeaderSection>
|
||||
<EuiTitle size="l">
|
||||
<h1>Actions from expression renderers</h1>
|
||||
</EuiTitle>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiPageContentBody data-test-subj="expressionsVariablesTest">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
This example is similar to previous one, but clicking the button will rerender the
|
||||
expression with new set of variables.
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
||||
<EuiFlexGroup gutterSize="l">
|
||||
<EuiFlexItem>
|
||||
<EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
|
||||
<ExpressionEditor value={expression} onChange={expressionChanged} />
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel paddingSize="none" role="figure">
|
||||
<ReactExpressionRenderer
|
||||
data-test-subj="expressionsVariablesTestRenderer"
|
||||
expression={expression}
|
||||
debug={true}
|
||||
inspectorAdapters={inspectorAdapters}
|
||||
variables={variables}
|
||||
onEvent={handleEvents}
|
||||
renderError={(message: any) => {
|
||||
return <div>{message}</div>;
|
||||
}}
|
||||
/>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
);
|
||||
}
|
|
@ -25,6 +25,7 @@ import { RunExpressionsExample } from './run_expressions';
|
|||
import { RenderExpressionsExample } from './render_expressions';
|
||||
import { ActionsExpressionsExample } from './actions_and_expressions';
|
||||
import { UiActionsStart } from '../../../src/plugins/ui_actions/public';
|
||||
import { ActionsExpressionsExample2 } from './actions_and_expressions2';
|
||||
|
||||
interface Props {
|
||||
expressions: ExpressionsStart;
|
||||
|
@ -64,6 +65,10 @@ const ExpressionsExplorer = ({ expressions, inspector, actions }: Props) => {
|
|||
<EuiSpacer />
|
||||
|
||||
<ActionsExpressionsExample expressions={expressions} actions={actions} />
|
||||
|
||||
<EuiSpacer />
|
||||
|
||||
<ActionsExpressionsExample2 expressions={expressions} actions={actions} />
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
|
|
|
@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
|
|||
import { ExpressionFunctionDefinition } from '../../../../src/plugins/expressions/common';
|
||||
|
||||
interface Arguments {
|
||||
color: string;
|
||||
href: string;
|
||||
name: string;
|
||||
}
|
||||
|
@ -24,15 +25,20 @@ export type ExpressionFunctionButton = ExpressionFunctionDefinition<
|
|||
export const buttonFn: ExpressionFunctionButton = {
|
||||
name: 'button',
|
||||
args: {
|
||||
color: {
|
||||
help: i18n.translate('expressions.functions.button.args.color', {
|
||||
defaultMessage: 'Color of the button',
|
||||
}),
|
||||
},
|
||||
href: {
|
||||
help: i18n.translate('expressions.functions.font.args.href', {
|
||||
help: i18n.translate('expressions.functions.button.args.href', {
|
||||
defaultMessage: 'Link to which to navigate',
|
||||
}),
|
||||
types: ['string'],
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
help: i18n.translate('expressions.functions.font.args.name', {
|
||||
help: i18n.translate('expressions.functions.button.args.name', {
|
||||
defaultMessage: 'Name of the button',
|
||||
}),
|
||||
types: ['string'],
|
||||
|
|
|
@ -26,8 +26,17 @@ export const buttonRenderer: ExpressionRenderDefinition<any> = {
|
|||
};
|
||||
|
||||
const renderDebug = () => (
|
||||
<div style={{ width: domNode.offsetWidth, height: domNode.offsetHeight }}>
|
||||
<EuiButton data-test-subj="testExpressionButton" onClick={buttonClick}>
|
||||
<div
|
||||
style={{
|
||||
width: domNode.offsetWidth,
|
||||
height: domNode.offsetHeight,
|
||||
}}
|
||||
>
|
||||
<EuiButton
|
||||
data-test-subj="testExpressionButton"
|
||||
onClick={buttonClick}
|
||||
style={{ backgroundColor: config.color || 'white' }}
|
||||
>
|
||||
{config.name}
|
||||
</EuiButton>
|
||||
</div>
|
||||
|
|
|
@ -83,7 +83,7 @@ export class ExpressionRenderHandler {
|
|||
reload: () => {
|
||||
this.updateSubject.next(null);
|
||||
},
|
||||
update: (params) => {
|
||||
update: (params: UpdateValue) => {
|
||||
this.updateSubject.next(params);
|
||||
},
|
||||
event: (data) => {
|
||||
|
|
|
@ -7,13 +7,14 @@
|
|||
*/
|
||||
|
||||
import expect from '@kbn/expect';
|
||||
|
||||
import testSubjSelector from '@kbn/test-subj-selector';
|
||||
import { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
|
||||
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default function ({ getService }: PluginFunctionalProviderContext) {
|
||||
const testSubjects = getService('testSubjects');
|
||||
const retry = getService('retry');
|
||||
const find = getService('find');
|
||||
const browser = getService('browser');
|
||||
|
||||
describe('', () => {
|
||||
|
@ -33,8 +34,23 @@ export default function ({ getService }: PluginFunctionalProviderContext) {
|
|||
});
|
||||
});
|
||||
|
||||
it('updates the variable', async () => {
|
||||
const selector = `${testSubjSelector('expressionsVariablesTest')} ${testSubjSelector(
|
||||
'testExpressionButton'
|
||||
)}`;
|
||||
await find.clickByCssSelector(selector);
|
||||
await retry.try(async () => {
|
||||
const el = await find.byCssSelector(selector);
|
||||
const style = await el.getAttribute('style');
|
||||
expect(style).to.contain('red');
|
||||
});
|
||||
});
|
||||
|
||||
it('emits an action and navigates', async () => {
|
||||
await testSubjects.click('testExpressionButton');
|
||||
const selector = `${testSubjSelector('expressionsActionsTest')} ${testSubjSelector(
|
||||
'testExpressionButton'
|
||||
)}`;
|
||||
await find.clickByCssSelector(selector);
|
||||
await retry.try(async () => {
|
||||
const text = await browser.getCurrentUrl();
|
||||
expect(text).to.be('https://www.google.com/?gws_rd=ssl');
|
||||
|
|
Loading…
Reference in a new issue