maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Canvas] Fixes for expected prop-types, Shape Arg UI, and i18n strings (#68304)

Browse source 
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Clint Andrew Hall 2020-06-10 11:30:36 -05:00 committed by GitHub
parent 8d1a319472
commit 713f323447
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 70 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
View file

@ -41,8 +41,12 @@ ToggleArgInput.propTypes = {
onValueChange: PropTypes.func.isRequired,
argValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]).isRequired,
argId: PropTypes.string.isRequired,
labelValue: PropTypes.string,
showLabelValue: PropTypes.bool,
typeInstance: PropTypes.shape({
displayName: PropTypes.string.isRequired,
options: PropTypes.shape({
labelValue: PropTypes.string.isRequired,
}),
}).isRequired,
renderError: PropTypes.func.isRequired,
};

2
x-pack/plugins/canvas/canvas_plugin_src/uis/views/markdown.js
View file

@ -37,7 +37,7 @@ export const markdown = () => ({
argType: 'toggle',
default: false,
options: {
labelValue: 'Open all links in a new tab',
labelValue: strings.getOpenLinksInNewTabLabelName(),
},
},
],

3
x-pack/plugins/canvas/canvas_plugin_src/uis/views/pie.js
View file

@ -75,6 +75,9 @@ export const pie = () => ({
help: strings.getLabelsHelp(),
argType: 'toggle',
default: true,
options: {
labelValue: strings.getLabelsToggleSwitch(),
},
},
{
name: 'seriesStyle',

3
x-pack/plugins/canvas/canvas_plugin_src/uis/views/shape.js
View file

@ -46,6 +46,9 @@ export const shape = () => ({
displayName: strings.getMaintainAspectDisplayName(),
argType: 'toggle',
help: strings.getMaintainAspectHelp(),
options: {
labelValue: strings.getMaintainAspectLabelName(),
},
},
],
});

6
x-pack/plugins/canvas/canvas_plugin_src/uis/views/table.js
View file

@ -33,6 +33,9 @@ export const table = () => ({
help: strings.getPaginateHelp(),
argType: 'toggle',
default: true,
options: {
labelValue: strings.getPaginateToggleSwitch(),
},
},
{
name: 'showHeader',
@ -40,6 +43,9 @@ export const table = () => ({
help: strings.getShowHeaderHelp(),
argType: 'toggle',
default: true,
options: {
labelValue: strings.getShowHeaderToggleSwitch(),
},
},
],
});

22
x-pack/plugins/canvas/i18n/ui.ts
View file

@ -791,8 +791,12 @@ export const ViewStrings = {
i18n.translate('xpack.canvas.uis.views.pie.args.labelsTitle', {
defaultMessage: 'Labels',
}),
getLabelsHelp: () =>
getLabelsToggleSwitch: () =>
i18n.translate('xpack.canvas.uis.views.pie.args.labelsToggleSwitch', {
defaultMessage: 'Show labels',
}),
getLabelsHelp: () =>
i18n.translate('xpack.canvas.uis.views.pie.args.labelsLabel', {
defaultMessage: 'Show/hide labels',
}),
getLegendDisplayName: () =>
@ -1075,10 +1079,14 @@ export const ViewStrings = {
}),
getMaintainAspectDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectTitle', {
defaultMessage: 'Fixed ratio',
defaultMessage: 'Aspect ratio settings',
}),
getMaintainAspectLabelName: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectLabel', {
defaultMessage: 'Use a fixed ratio',
}),
getMaintainAspectHelp: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectLabel', {
i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectHelpLabel', {
defaultMessage: `Enable to maintain aspect ratio`,
}),
getShapeDisplayName: () =>
@ -1099,6 +1107,10 @@ export const ViewStrings = {
i18n.translate('xpack.canvas.uis.views.table.args.paginateTitle', {
defaultMessage: 'Pagination',
}),
getPaginateToggleSwitch: () =>
i18n.translate('xpack.canvas.uis.views.table.args.paginateToggleSwitch', {
defaultMessage: 'Show pagination controls',
}),
getPaginateHelp: () =>
i18n.translate('xpack.canvas.uis.views.table.args.paginateLabel', {
defaultMessage:
@ -1116,6 +1128,10 @@ export const ViewStrings = {
i18n.translate('xpack.canvas.uis.views.table.args.showHeaderTitle', {
defaultMessage: 'Header',
}),
getShowHeaderToggleSwitch: () =>
i18n.translate('xpack.canvas.uis.views.table.args.showHeaderToggleSwitch', {
defaultMessage: 'Show the header row',
}),
getShowHeaderHelp: () =>
i18n.translate('xpack.canvas.uis.views.table.args.showHeaderLabel', {
defaultMessage: 'Show or hide the header row with titles for each column',

4
x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx
View file

@ -84,7 +84,7 @@ export const SavedElementsModal: FunctionComponent<Props> = ({
const handleEdit = async (name: string, description: string, image: string) => {
if (elementToEdit) {
await updateCustomElement(elementToEdit.id, name, description, image);
updateCustomElement(elementToEdit.id, name, description, image);
}
hideEditModal();
};
@ -94,7 +94,7 @@ export const SavedElementsModal: FunctionComponent<Props> = ({
const handleDelete = async () => {
if (elementToDelete) {
await removeCustomElement(elementToDelete.id);
removeCustomElement(elementToDelete.id);
}
hideDeleteModal();
};

14
x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__examples__/edit_menu.examples.tsx
View file

@ -7,6 +7,7 @@ import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { EditMenu } from '../edit_menu';
import { PositionedElement } from '../../../../../types';
const handlers = {
cutNodes: action('cutNodes'),
@ -41,11 +42,16 @@ storiesOf('components/WorkpadHeader/EditMenu', module)
<EditMenu selectedNodes={[]} groupIsSelected={false} hasPasteData={true} {...handlers} />
))
.add('single element selected', () => (
<EditMenu selectedNodes={['foo']} groupIsSelected={false} hasPasteData={false} {...handlers} />
<EditMenu
selectedNodes={[{ id: 'foo' }] as PositionedElement[]}
groupIsSelected={false}
hasPasteData={false}
{...handlers}
/>
))
.add('single grouped element selected', () => (
<EditMenu
selectedNodes={['foo', 'bar']}
selectedNodes={[{ id: 'foo' }, { id: 'bar' }] as PositionedElement[]}
groupIsSelected={true}
hasPasteData={false}
{...handlers}
@ -53,7 +59,7 @@ storiesOf('components/WorkpadHeader/EditMenu', module)
))
.add('2 elements selected', () => (
<EditMenu
selectedNodes={['foo', 'bar']}
selectedNodes={[{ id: 'foo' }, { id: 'bar' }] as PositionedElement[]}
groupIsSelected={false}
hasPasteData={false}
{...handlers}
@ -61,7 +67,7 @@ storiesOf('components/WorkpadHeader/EditMenu', module)
))
.add('3+ elements selected', () => (
<EditMenu
selectedNodes={['foo', 'bar', 'fizz']}
selectedNodes={[{ id: 'foo' }, { id: 'bar' }, { id: 'fizz' }] as PositionedElement[]}
groupIsSelected={false}
hasPasteData={false}
{...handlers}

5
x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.tsx
View file

@ -13,6 +13,7 @@ import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
import { Popover, ClosePopoverFn } from '../../popover';
import { CustomElementModal } from '../../custom_element_modal';
import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib/constants';
import { PositionedElement } from '../../../../types';
const { WorkpadHeaderEditMenu: strings } = ComponentStrings;
const shortcutHelp = ShortcutStrings.getShortcutHelp();
@ -65,7 +66,7 @@ export interface Props {
/**
* only more than one selected element can be grouped
*/
selectedNodes: string[];
selectedNodes: PositionedElement[];
/**
* groups selected elements
*/
@ -441,7 +442,7 @@ EditMenu.propTypes = {
distributeHorizontally: PropTypes.func.isRequired,
distributeVertically: PropTypes.func.isRequired,
createCustomElement: PropTypes.func.isRequired,
selectedNodes: PropTypes.arrayOf(PropTypes.string).isRequired,
selectedNodes: PropTypes.arrayOf(PropTypes.object).isRequired,
groupIsSelected: PropTypes.bool.isRequired,
groupNodes: PropTypes.func.isRequired,
ungroupNodes: PropTypes.func.isRequired,

12
x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts
View file

@ -60,9 +60,11 @@ const mapStateToProps = (state: State) => {
const pageId = getSelectedPage(state);
const nodes = getNodes(state, pageId) as PositionedElement[];
const selectedToplevelNodes = getSelectedToplevelNodes(state);
const selectedPrimaryShapeObjects = selectedToplevelNodes
.map((id: string) => nodes.find((s: PositionedElement) => s.id === id))
.filter((shape?: PositionedElement) => shape) as PositionedElement[];
const selectedPersistentPrimaryNodes = flatten(
selectedPrimaryShapeObjects.map((shape: PositionedElement) =>
nodes.find((n: PositionedElement) => n.id === shape.id) // is it a leaf or a persisted group?
@ -70,12 +72,18 @@ const mapStateToProps = (state: State) => {
: nodes.filter((s: PositionedElement) => s.position.parent === shape.id).map((s) => s.id)
)
);
const selectedNodeIds = flatten(selectedPersistentPrimaryNodes.map(crawlTree(nodes)));
const selectedNodeIds: string[] = flatten(selectedPersistentPrimaryNodes.map(crawlTree(nodes)));
const selectedNodes = selectedNodeIds
.map((id: string) => nodes.find((s) => s.id === id))
.filter((node: PositionedElement | undefined): node is PositionedElement => {
return !!node;
});
return {
pageId,
selectedToplevelNodes,
selectedNodes: selectedNodeIds.map((id: string) => nodes.find((s) => s.id === id)),
selectedNodes,
state,
};
};

9
x-pack/plugins/canvas/public/lib/clone_subgraphs.js → x-pack/plugins/canvas/public/lib/clone_subgraphs.ts
View file

@ -4,16 +4,20 @@
* you may not use this file except in compliance with the Elastic License.
*/
// @ts-ignore Untyped local
import { arrayToMap } from './aeroelastic/functional';
import { getId } from './get_id';
import { PositionedElement } from '../../types';
export const cloneSubgraphs = (nodes) => {
export const cloneSubgraphs = (nodes: PositionedElement[]) => {
const idMap = arrayToMap(nodes.map((n) => n.id));
// We simultaneously provide unique id values for all elements (across all pages)
// AND ensure that parent-child relationships are retained (via matching id values within page)
Object.keys(idMap).forEach((key) => (idMap[key] = getId(key.split('-')[0]))); // new group names to which we can map
// must return elements in the same order, for several reasons
const newNodes = nodes.map((element) => ({
return nodes.map((element) => ({
...element,
id: idMap[element.id],
position: {
@ -21,5 +25,4 @@ export const cloneSubgraphs = (nodes) => {
parent: element.position.parent ? idMap[element.position.parent] : null,
},
}));
return newNodes;
};

2
x-pack/plugins/canvas/public/lib/element_handler_creators.ts
View file

@ -37,7 +37,7 @@ export interface Props {
/**
* selects elements on the page
*/
selectToplevelNodes: (elements: PositionedElement) => void;
selectToplevelNodes: (elements: PositionedElement[]) => void;
/**
* deletes elements from the page
*/