[Canvas] Fixes for expected prop-types, Shape Arg UI, and i18n strings (#68304)
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
8d1a319472
commit
713f323447
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@ export const markdown = () => ({
|
|||
argType: 'toggle',
|
||||
default: false,
|
||||
options: {
|
||||
labelValue: 'Open all links in a new tab',
|
||||
labelValue: strings.getOpenLinksInNewTabLabelName(),
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
@ -75,6 +75,9 @@ export const pie = () => ({
|
|||
help: strings.getLabelsHelp(),
|
||||
argType: 'toggle',
|
||||
default: true,
|
||||
options: {
|
||||
labelValue: strings.getLabelsToggleSwitch(),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'seriesStyle',
|
||||
|
|
|
@ -46,6 +46,9 @@ export const shape = () => ({
|
|||
displayName: strings.getMaintainAspectDisplayName(),
|
||||
argType: 'toggle',
|
||||
help: strings.getMaintainAspectHelp(),
|
||||
options: {
|
||||
labelValue: strings.getMaintainAspectLabelName(),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
@ -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(),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
};
|
|
@ -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
|
||||
*/
|
||||
|
|
Loading…
Reference in a new issue