Skip to content

Commit

Permalink
Removed extraneous JSX
Browse files Browse the repository at this point in the history
  • Loading branch information
@cqliu1
cqliu1 committed Mar 24, 2020
1 parent e5b1444 commit 13f7e45
Show file tree
Hide file tree
Showing 12 changed files with 587 additions and 19 deletions.
28 changes: 16 additions & 12 deletions x-pack/legacy/plugins/canvas/i18n/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const ComponentStrings = {
}),
getTitleText: () =>
i18n.translate('xpack.canvas.embedObject.titleText', {
defaultMessage: 'Embed Object',
defaultMessage: 'Add from Visualize library',
}),
},
AdvancedFilter: {
Expand Down Expand Up @@ -336,56 +336,60 @@ export const ComponentStrings = {
description: 'This tab contains the settings for how data is displayed in a Canvas element',
}),
},
ElementTypes: {
SavedElementsModal: {
getSavedElementsModalCloseButtonLabel: () =>
i18n.translate('xpack.canvas.workpadHeader.addElementModalCloseButtonLabel', {
defaultMessage: 'Close',
}),
getEditElementTitle: () =>
i18n.translate('xpack.canvas.elementTypes.editElementTitle', {
i18n.translate('xpack.canvas.savedElementsModal.editElementTitle', {
defaultMessage: 'Edit element',
}),
getDeleteElementTitle: (elementName: string) =>
i18n.translate('xpack.canvas.elementTypes.deleteElementTitle', {
i18n.translate('xpack.canvas.savedElementsModal.deleteElementTitle', {
defaultMessage: `Delete element '{elementName}'?`,
values: {
elementName,
},
}),
getDeleteElementDescription: () =>
i18n.translate('xpack.canvas.elementTypes.deleteElementDescription', {
i18n.translate('xpack.canvas.savedElementsModal.deleteElementDescription', {
defaultMessage: 'Are you sure you want to delete this element?',
}),
getCancelButtonLabel: () =>
i18n.translate('xpack.canvas.elementTypes.cancelButtonLabel', {
i18n.translate('xpack.canvas.savedElementsModal.cancelButtonLabel', {
defaultMessage: 'Cancel',
}),
getDeleteButtonLabel: () =>
i18n.translate('xpack.canvas.elementTypes.deleteButtonLabel', {
i18n.translate('xpack.canvas.savedElementsModal.deleteButtonLabel', {
defaultMessage: 'Delete',
}),
getAddNewElementTitle: () =>
i18n.translate('xpack.canvas.elementTypes.addNewElementTitle', {
i18n.translate('xpack.canvas.savedElementsModal.addNewElementTitle', {
defaultMessage: 'Add new elements',
}),
getAddNewElementDescription: () =>
i18n.translate('xpack.canvas.elementTypes.addNewElementDescription', {
i18n.translate('xpack.canvas.savedElementsModal.addNewElementDescription', {
defaultMessage: 'Group and save workpad elements to create new elements',
}),
getFindElementPlaceholder: () =>
i18n.translate('xpack.canvas.elementTypes.findElementPlaceholder', {
i18n.translate('xpack.canvas.savedElementsModal.findElementPlaceholder', {
defaultMessage: 'Find element',
}),
getElementsTitle: () =>
i18n.translate('xpack.canvas.elementTypes.elementsTitle', {
i18n.translate('xpack.canvas.savedElementsModal.elementsTitle', {
defaultMessage: 'Elements',
description: 'Title for the "Elements" tab when adding a new element',
}),
getMyElementsTitle: () =>
i18n.translate('xpack.canvas.elementTypes.myElementsTitle', {
i18n.translate('xpack.canvas.savedElementsModal.myElementsTitle', {
defaultMessage: 'My elements',
description: 'Title for the "My elements" tab when adding a new element',
}),
getModalTitle: () =>
i18n.translate('xpack.canvas.savedElementsModal.modalTitle', {
defaultMessage: 'My elements',
}),
},
Error: {
getDescription: () =>
Expand Down
24 changes: 24 additions & 0 deletions ...s/canvas/public/components/saved_elements_modal/__examples__/element_controls.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*
* 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 React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ElementControls } from '../element_controls';

storiesOf('components/Elements/ElementControls', module)
.addDecorator(story => (
<div
style={{
width: '50px',
}}
>
{story()}
</div>
))
.add('has two buttons', () => (
<ElementControls onDelete={action('onDelete')} onEdit={action('onEdit')} />
));
58 changes: 58 additions & 0 deletions ...ugins/canvas/public/components/saved_elements_modal/__examples__/element_grid.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*
* 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 React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ElementGrid } from '../element_grid';
import { testElements, testCustomElements } from './fixtures/test_elements';

storiesOf('components/Elements/ElementGrid', module)
.addDecorator(story => (
<div
style={{
width: '1000px',
}}
>
{story()}
</div>
))
.add('without controls', () => (
<ElementGrid elements={testElements} handleClick={action('addElement')} />
))
.add('with controls', () => (
<ElementGrid
elements={testCustomElements}
handleClick={action('addCustomElement')}
showControls
onDelete={action('onDelete')}
onEdit={action('onEdit')}
/>
))
.add('with text filter', () => (
<ElementGrid
elements={testElements}
handleClick={action('addCustomElement')}
filterText="table"
/>
))
.add('with tags filter', () => (
<ElementGrid
elements={testElements}
handleClick={action('addCustomElement')}
filterTags={['graphic']}
/>
))
.add('with controls and filter', () => (
<ElementGrid
elements={testCustomElements}
handleClick={action('addCustomElement')}
filterText="Lorem"
showControls
onDelete={action('onDelete')}
onEdit={action('onEdit')}
/>
));
70 changes: 70 additions & 0 deletions ...ins/canvas/public/components/saved_elements_modal/__examples__/fixtures/test_elements.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 { elasticLogo } from '../../../../lib/elastic_logo';

export const testElements = [
{
name: 'areaChart',
displayName: 'Area chart',
help: 'A line chart with a filled body',
type: 'chart',
image: elasticLogo,
expression: `filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle lines=1 fill=1}
| render`,
},
{
name: 'image',
displayName: 'Image',
help: 'A static image',
tags: ['graphic'],
image: elasticLogo,
expression: `image dataurl=null mode="contain"
| render`,
},
{
name: 'table',
displayName: 'Data table',
type: 'text',
help: 'A scrollable grid for displaying data in a tabular format',
image: elasticLogo,
expression: `filters
| demodata
| table
| render`,
},
];

export const testCustomElements = [
{
id: 'custom-element-10d625f5-1342-47c9-8f19-d174ea6b65d5',
name: 'customElement1',
displayName: 'Custom Element 1',
help: 'sample description',
image: elasticLogo,
content: `{\"selectedNodes\":[{\"id\":\"element-3383b40a-de5d-4efb-8719-f4d8cffbfa74\",\"position\":{\"left\":142,\"top\":146,\"width\":700,\"height\":300,\"angle\":0,\"parent\":null,\"type\":\"element\"},\"expression\":\"filters\\n| demodata\\n| pointseries x=\\\"project\\\" y=\\\"sum(price)\\\" color=\\\"state\\\" size=\\\"size(username)\\\"\\n| plot defaultStyle={seriesStyle points=5 fill=1}\\n| render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"filters\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"demodata\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"pointseries\",\"arguments\":{\"x\":[\"project\"],\"y\":[\"sum(price)\"],\"color\":[\"state\"],\"size\":[\"size(username)\"]}},{\"type\":\"function\",\"function\":\"plot\",\"arguments\":{\"defaultStyle\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"seriesStyle\",\"arguments\":{\"points\":[5],\"fill\":[1]}}]}]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}}]}`,
},
{
id: 'custom-element-b22d8d10-6116-46fb-9b46-c3f3340d3aaa',
name: 'customElement2',
displayName: 'Custom Element 2',
help: 'Aenean eu justo auctor, placerat felis non, scelerisque dolor. ',
image: elasticLogo,
content: `{\"selectedNodes\":[{\"id\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"position\":{\"left\":250,\"top\":119,\"width\":340,\"height\":517,\"angle\":0,\"parent\":null,\"type\":\"group\"},\"expression\":\"shape fill=\\\"rgba(255,255,255,0)\\\" | render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"shape\",\"arguments\":{\"fill\":[\"rgba(255,255,255,0)\"]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}},{\"id\":\"element-e2c658ee-7614-4d92-a46e-2b1a81a24485\",\"position\":{\"left\":250,\"top\":405,\"width\":340,\"height\":75,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"filters\\n| demodata\\n| markdown \\\"## Jane Doe\\\" \\n font={font family=\\\"'Open Sans', Helvetica, Arial, sans-serif\\\" size=14 align=\\\"center\\\" color=\\\"#000000\\\" weight=\\\"normal\\\" underline=false italic=false}\\n| render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"filters\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"demodata\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"markdown\",\"arguments\":{\"_\":[\"## Jane Doe\"],\"font\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"font\",\"arguments\":{\"family\":[\"'Open Sans', Helvetica, Arial, sans-serif\"],\"size\":[14],\"align\":[\"center\"],\"color\":[\"#000000\"],\"weight\":[\"normal\"],\"underline\":[false],\"italic\":[false]}}]}]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}},{\"id\":\"element-3d16765e-5251-4954-8e2a-6c64ed465b73\",\"position\":{\"left\":250,\"top\":480,\"width\":340,\"height\":75,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"filters\\n| demodata\\n| markdown \\\"### Developer\\\" \\n font={font family=\\\"'Open Sans', Helvetica, Arial, sans-serif\\\" size=14 align=\\\"center\\\" color=\\\"#000000\\\" weight=\\\"normal\\\" underline=false italic=false}\\n| render css=\\\".canvasRenderEl h3 {\\ncolor: #444444;\\n}\\\"\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"filters\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"demodata\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"markdown\",\"arguments\":{\"_\":[\"### Developer\"],\"font\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"font\",\"arguments\":{\"family\":[\"'Open Sans', Helvetica, Arial, sans-serif\"],\"size\":[14],\"align\":[\"center\"],\"color\":[\"#000000\"],\"weight\":[\"normal\"],\"underline\":[false],\"italic\":[false]}}]}]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{\"css\":[\".canvasRenderEl h3 {\\ncolor: #444444;\\n}\"]}}]}},{\"id\":\"element-624675cf-46e9-4545-b86a-5409bbe53ac1\",\"position\":{\"left\":250,\"top\":555,\"width\":340,\"height\":81,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"filters\\n| demodata\\n| markdown \\n \\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sollicitudin mauris, ut scelerisque urna. \\\" \\n font={font family=\\\"'Open Sans', Helvetica, Arial, sans-serif\\\" size=14 align=\\\"center\\\" color=\\\"#000000\\\" weight=\\\"normal\\\" underline=false italic=false}\\n| render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"filters\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"demodata\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"markdown\",\"arguments\":{\"_\":[\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sollicitudin mauris, ut scelerisque urna. \"],\"font\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"font\",\"arguments\":{\"family\":[\"'Open Sans', Helvetica, Arial, sans-serif\"],\"size\":[14],\"align\":[\"center\"],\"color\":[\"#000000\"],\"weight\":[\"normal\"],\"underline\":[false],\"italic\":[false]}}]}]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}},{\"id\":\"element-c2916246-26dd-4c65-91c6-d1ad3f1791ee\",\"position\":{\"left\":293,\"top\":119,\"width\":254,\"height\":252,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"image dataurl={asset \\\"asset-0c6f377f-771e-432e-8e2e-15c3e9142ad6\\\"} mode=\\\"contain\\\"\\n| render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"image\",\"arguments\":{\"dataurl\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"asset\",\"arguments\":{\"_\":[\"asset-0c6f377f-771e-432e-8e2e-15c3e9142ad6\"]}}]}],\"mode\":[\"contain\"]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}}]}`,
},
{
id: 'custom-element-',
name: 'customElement3',
displayName: 'Custom Element 3',
help:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis aliquet arcu ut turpis duis.',
image: elasticLogo,
content: `{\"selectedNodes\":[{\"id\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"position\":{\"left\":250,\"top\":119,\"width\":340,\"height\":517,\"angle\":0,\"parent\":null,\"type\":\"group\"},\"expression\":\"shape fill=\\\"rgba(255,255,255,0)\\\" | render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"shape\",\"arguments\":{\"fill\":[\"rgba(255,255,255,0)\"]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}},{\"id\":\"element-e2c658ee-7614-4d92-a46e-2b1a81a24485\",\"position\":{\"left\":250,\"top\":405,\"width\":340,\"height\":75,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"filters\\n| demodata\\n| markdown \\\"## Jane Doe\\\" \\n font={font family=\\\"'Open Sans', Helvetica, Arial, sans-serif\\\" size=14 align=\\\"center\\\" color=\\\"#000000\\\" weight=\\\"normal\\\" underline=false italic=false}\\n| render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"filters\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"demodata\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"markdown\",\"arguments\":{\"_\":[\"## Jane Doe\"],\"font\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"font\",\"arguments\":{\"family\":[\"'Open Sans', Helvetica, Arial, sans-serif\"],\"size\":[14],\"align\":[\"center\"],\"color\":[\"#000000\"],\"weight\":[\"normal\"],\"underline\":[false],\"italic\":[false]}}]}]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}},{\"id\":\"element-3d16765e-5251-4954-8e2a-6c64ed465b73\",\"position\":{\"left\":250,\"top\":480,\"width\":340,\"height\":75,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"filters\\n| demodata\\n| markdown \\\"### Developer\\\" \\n font={font family=\\\"'Open Sans', Helvetica, Arial, sans-serif\\\" size=14 align=\\\"center\\\" color=\\\"#000000\\\" weight=\\\"normal\\\" underline=false italic=false}\\n| render css=\\\".canvasRenderEl h3 {\\ncolor: #444444;\\n}\\\"\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"filters\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"demodata\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"markdown\",\"arguments\":{\"_\":[\"### Developer\"],\"font\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"font\",\"arguments\":{\"family\":[\"'Open Sans', Helvetica, Arial, sans-serif\"],\"size\":[14],\"align\":[\"center\"],\"color\":[\"#000000\"],\"weight\":[\"normal\"],\"underline\":[false],\"italic\":[false]}}]}]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{\"css\":[\".canvasRenderEl h3 {\\ncolor: #444444;\\n}\"]}}]}},{\"id\":\"element-624675cf-46e9-4545-b86a-5409bbe53ac1\",\"position\":{\"left\":250,\"top\":555,\"width\":340,\"height\":81,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"filters\\n| demodata\\n| markdown \\n \\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sollicitudin mauris, ut scelerisque urna. \\\" \\n font={font family=\\\"'Open Sans', Helvetica, Arial, sans-serif\\\" size=14 align=\\\"center\\\" color=\\\"#000000\\\" weight=\\\"normal\\\" underline=false italic=false}\\n| render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"filters\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"demodata\",\"arguments\":{}},{\"type\":\"function\",\"function\":\"markdown\",\"arguments\":{\"_\":[\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sollicitudin mauris, ut scelerisque urna. \"],\"font\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"font\",\"arguments\":{\"family\":[\"'Open Sans', Helvetica, Arial, sans-serif\"],\"size\":[14],\"align\":[\"center\"],\"color\":[\"#000000\"],\"weight\":[\"normal\"],\"underline\":[false],\"italic\":[false]}}]}]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}},{\"id\":\"element-c2916246-26dd-4c65-91c6-d1ad3f1791ee\",\"position\":{\"left\":293,\"top\":119,\"width\":254,\"height\":252,\"angle\":0,\"parent\":\"group-dccf4ed7-1593-49a0-9902-caf4d4a4b7f5\",\"type\":\"element\"},\"expression\":\"image dataurl={asset \\\"asset-0c6f377f-771e-432e-8e2e-15c3e9142ad6\\\"} mode=\\\"contain\\\"\\n| render\",\"ast\":{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"image\",\"arguments\":{\"dataurl\":[{\"type\":\"expression\",\"chain\":[{\"type\":\"function\",\"function\":\"asset\",\"arguments\":{\"_\":[\"asset-0c6f377f-771e-432e-8e2e-15c3e9142ad6\"]}}]}],\"mode\":[\"contain\"]}},{\"type\":\"function\",\"function\":\"render\",\"arguments\":{}}]}}]}`,
},
];
52 changes: 52 additions & 0 deletions x-pack/legacy/plugins/canvas/public/components/saved_elements_modal/element_controls.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/*
* 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 React, { FunctionComponent, MouseEvent } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n/components';

const { ElementControls: strings } = ComponentStrings;

interface Props {
/**
* A click handler for the delete button
*/
onDelete: (event: MouseEvent) => void;
/**
* A click handler for the edit button
*/
onEdit: (event: MouseEvent) => void;
}

export const ElementControls: FunctionComponent<Props> = ({ onDelete, onEdit }) => (
<EuiFlexGroup
className="canvasElementCard__controls"
gutterSize="xs"
justifyContent="spaceBetween"
>
<EuiFlexItem grow={false}>
<EuiToolTip content={strings.getEditTooltip()}>
<EuiButtonIcon iconType="pencil" aria-label={strings.getEditAriaLabel()} onClick={onEdit} />
</EuiToolTip>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiToolTip content={strings.getDeleteTooltip()}>
<EuiButtonIcon
color="danger"
iconType="trash"
aria-label={strings.getDeleteAriaLabel()}
onClick={onDelete}
/>
</EuiToolTip>
</EuiFlexItem>
</EuiFlexGroup>
);

ElementControls.propTypes = {
onDelete: PropTypes.func.isRequired,
onEdit: PropTypes.func.isRequired,
};
Loading

0 comments on commit 13f7e45

Please sign in to comment.