Skip to content

Commit 43c692d

Browse files
cqliu1cqliu1
authored
[7.x] [Canvas] Adds edit menu (#64738) (#64973)
1 parent 2f59c6c commit 43c692d

File tree

20 files changed

+1100
-826
lines changed

20 files changed

+1100
-826
lines changed

‎x-pack/legacy/plugins/canvas/i18n/components.ts‎

Lines changed: 88 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -804,17 +804,6 @@ export const ComponentStrings = {
804804
}),
805805
},
806806
SidebarHeader: {
807-
getAlignmentMenuItemLabel: () =>
808-
i18n.translate('xpack.canvas.sidebarHeader.alignmentMenuItemLabel', {
809-
defaultMessage: 'Alignment',
810-
description:
811-
'This refers to the vertical (i.e. left, center, right) and horizontal (i.e. top, middle, bottom) ' +
812-
'alignment options of the selected elements',
813-
}),
814-
getBottomAlignMenuItemLabel: () =>
815-
i18n.translate('xpack.canvas.sidebarHeader.bottomAlignMenuItemLabel', {
816-
defaultMessage: 'Bottom',
817-
}),
818807
getBringForwardAriaLabel: () =>
819808
i18n.translate('xpack.canvas.sidebarHeader.bringForwardArialLabel', {
820809
defaultMessage: 'Move element up one layer',
@@ -823,56 +812,6 @@ export const ComponentStrings = {
823812
i18n.translate('xpack.canvas.sidebarHeader.bringToFrontArialLabel', {
824813
defaultMessage: 'Move element to top layer',
825814
}),
826-
getCenterAlignMenuItemLabel: () =>
827-
i18n.translate('xpack.canvas.sidebarHeader.centerAlignMenuItemLabel', {
828-
defaultMessage: 'Center',
829-
description: 'This refers to alignment centered horizontally.',
830-
}),
831-
getContextMenuTitle: () =>
832-
i18n.translate('xpack.canvas.sidebarHeader.contextMenuAriaLabel', {
833-
defaultMessage: 'Element options',
834-
}),
835-
getCreateElementModalTitle: () =>
836-
i18n.translate('xpack.canvas.sidebarHeader.createElementModalTitle', {
837-
defaultMessage: 'Create new element',
838-
}),
839-
getDistributionMenuItemLabel: () =>
840-
i18n.translate('xpack.canvas.sidebarHeader.distributionMenutItemLabel', {
841-
defaultMessage: 'Distribution',
842-
description:
843-
'This refers to the options to evenly spacing the selected elements horizontall or vertically.',
844-
}),
845-
getGroupMenuItemLabel: () =>
846-
i18n.translate('xpack.canvas.sidebarHeader.groupMenuItemLabel', {
847-
defaultMessage: 'Group',
848-
description: 'This refers to grouping multiple selected elements.',
849-
}),
850-
getHorizontalDistributionMenuItemLabel: () =>
851-
i18n.translate('xpack.canvas.sidebarHeader.horizontalDistributionMenutItemLabel', {
852-
defaultMessage: 'Horizontal',
853-
}),
854-
getLeftAlignMenuItemLabel: () =>
855-
i18n.translate('xpack.canvas.sidebarHeader.leftAlignMenuItemLabel', {
856-
defaultMessage: 'Left',
857-
}),
858-
getMiddleAlignMenuItemLabel: () =>
859-
i18n.translate('xpack.canvas.sidebarHeader.middleAlignMenuItemLabel', {
860-
defaultMessage: 'Middle',
861-
description: 'This refers to alignment centered vertically.',
862-
}),
863-
getOrderMenuItemLabel: () =>
864-
i18n.translate('xpack.canvas.sidebarHeader.orderMenuItemLabel', {
865-
defaultMessage: 'Order',
866-
description: 'Refers to the order of the elements displayed on the page from front to back',
867-
}),
868-
getRightAlignMenuItemLabel: () =>
869-
i18n.translate('xpack.canvas.sidebarHeader.rightAlignMenuItemLabel', {
870-
defaultMessage: 'Right',
871-
}),
872-
getSaveElementMenuItemLabel: () =>
873-
i18n.translate('xpack.canvas.sidebarHeader.savedElementMenuItemLabel', {
874-
defaultMessage: 'Save as new element',
875-
}),
876815
getSendBackwardAriaLabel: () =>
877816
i18n.translate('xpack.canvas.sidebarHeader.sendBackwardArialLabel', {
878817
defaultMessage: 'Move element down one layer',
@@ -881,19 +820,6 @@ export const ComponentStrings = {
881820
i18n.translate('xpack.canvas.sidebarHeader.sendToBackArialLabel', {
882821
defaultMessage: 'Move element to bottom layer',
883822
}),
884-
getTopAlignMenuItemLabel: () =>
885-
i18n.translate('xpack.canvas.sidebarHeader.topAlignMenuItemLabel', {
886-
defaultMessage: 'Top',
887-
}),
888-
getUngroupMenuItemLabel: () =>
889-
i18n.translate('xpack.canvas.sidebarHeader.ungroupMenuItemLabel', {
890-
defaultMessage: 'Ungroup',
891-
description: 'This refers to ungrouping a grouped element',
892-
}),
893-
getVerticalDistributionMenuItemLabel: () =>
894-
i18n.translate('xpack.canvas.sidebarHeader.verticalDistributionMenutItemLabel', {
895-
defaultMessage: 'Vertical',
896-
}),
897823
},
898824
TextStylePicker: {
899825
getAlignCenterOption: () =>
@@ -1105,6 +1031,94 @@ export const ComponentStrings = {
11051031
defaultMessage: 'Set a custom interval',
11061032
}),
11071033
},
1034+
WorkpadHeaderEditMenu: {
1035+
getAlignmentMenuItemLabel: () =>
1036+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.alignmentMenuItemLabel', {
1037+
defaultMessage: 'Alignment',
1038+
description:
1039+
'This refers to the vertical (i.e. left, center, right) and horizontal (i.e. top, middle, bottom) ' +
1040+
'alignment options of the selected elements',
1041+
}),
1042+
getBottomAlignMenuItemLabel: () =>
1043+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.bottomAlignMenuItemLabel', {
1044+
defaultMessage: 'Bottom',
1045+
}),
1046+
getCenterAlignMenuItemLabel: () =>
1047+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.centerAlignMenuItemLabel', {
1048+
defaultMessage: 'Center',
1049+
description: 'This refers to alignment centered horizontally.',
1050+
}),
1051+
getCreateElementModalTitle: () =>
1052+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.createElementModalTitle', {
1053+
defaultMessage: 'Create new element',
1054+
}),
1055+
getDistributionMenuItemLabel: () =>
1056+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.distributionMenutItemLabel', {
1057+
defaultMessage: 'Distribution',
1058+
description:
1059+
'This refers to the options to evenly spacing the selected elements horizontall or vertically.',
1060+
}),
1061+
getEditMenuButtonLabel: () =>
1062+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.editMenuButtonLabel', {
1063+
defaultMessage: 'Edit',
1064+
}),
1065+
getEditMenuLabel: () =>
1066+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.editMenuLabel', {
1067+
defaultMessage: 'Edit options',
1068+
}),
1069+
getGroupMenuItemLabel: () =>
1070+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.groupMenuItemLabel', {
1071+
defaultMessage: 'Group',
1072+
description: 'This refers to grouping multiple selected elements.',
1073+
}),
1074+
getHorizontalDistributionMenuItemLabel: () =>
1075+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.horizontalDistributionMenutItemLabel', {
1076+
defaultMessage: 'Horizontal',
1077+
}),
1078+
getLeftAlignMenuItemLabel: () =>
1079+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.leftAlignMenuItemLabel', {
1080+
defaultMessage: 'Left',
1081+
}),
1082+
getMiddleAlignMenuItemLabel: () =>
1083+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.middleAlignMenuItemLabel', {
1084+
defaultMessage: 'Middle',
1085+
description: 'This refers to alignment centered vertically.',
1086+
}),
1087+
getOrderMenuItemLabel: () =>
1088+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.orderMenuItemLabel', {
1089+
defaultMessage: 'Order',
1090+
description: 'Refers to the order of the elements displayed on the page from front to back',
1091+
}),
1092+
getRedoMenuItemLabel: () =>
1093+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.redoMenuItemLabel', {
1094+
defaultMessage: 'Redo',
1095+
}),
1096+
getRightAlignMenuItemLabel: () =>
1097+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.rightAlignMenuItemLabel', {
1098+
defaultMessage: 'Right',
1099+
}),
1100+
getSaveElementMenuItemLabel: () =>
1101+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.savedElementMenuItemLabel', {
1102+
defaultMessage: 'Save as new element',
1103+
}),
1104+
getTopAlignMenuItemLabel: () =>
1105+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.topAlignMenuItemLabel', {
1106+
defaultMessage: 'Top',
1107+
}),
1108+
getUndoMenuItemLabel: () =>
1109+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.undoMenuItemLabel', {
1110+
defaultMessage: 'Undo',
1111+
}),
1112+
getUngroupMenuItemLabel: () =>
1113+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.ungroupMenuItemLabel', {
1114+
defaultMessage: 'Ungroup',
1115+
description: 'This refers to ungrouping a grouped element',
1116+
}),
1117+
getVerticalDistributionMenuItemLabel: () =>
1118+
i18n.translate('xpack.canvas.workpadHeaderEditMenu.verticalDistributionMenutItemLabel', {
1119+
defaultMessage: 'Vertical',
1120+
}),
1121+
},
11081122
WorkpadHeaderElementMenu: {
11091123
getAssetsMenuItemLabel: () =>
11101124
i18n.translate('xpack.canvas.workpadHeaderElementMenu.manageAssetsMenuItemLabel', {

‎x-pack/legacy/plugins/canvas/i18n/shortcuts.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ export const ShortcutStrings = {
4242
defaultMessage: 'Delete',
4343
}),
4444
BRING_FORWARD: i18n.translate('xpack.canvas.keyboardShortcuts.bringFowardShortcutHelpText', {
45-
defaultMessage: 'Bring to front',
45+
defaultMessage: 'Bring forward',
4646
}),
4747
BRING_TO_FRONT: i18n.translate('xpack.canvas.keyboardShortcuts.bringToFrontShortcutHelpText', {
48-
defaultMessage: 'Bring forward',
48+
defaultMessage: 'Bring to front',
4949
}),
5050
SEND_BACKWARD: i18n.translate('xpack.canvas.keyboardShortcuts.sendBackwardShortcutHelpText', {
5151
defaultMessage: 'Send backward',

‎x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export class WorkpadApp extends React.PureComponent {
4343
<div className="canvasLayout__cols">
4444
<div className="canvasLayout__stage">
4545
<div className="canvasLayout__stageHeader">
46-
<WorkpadHeader />
46+
<WorkpadHeader commit={this.interactivePageLayout || (() => {})} />
4747
</div>
4848

4949
<div
@@ -66,7 +66,7 @@ export class WorkpadApp extends React.PureComponent {
6666

6767
{isWriteable && (
6868
<div className="canvasLayout__sidebar hide-for-sharing">
69-
<Sidebar commit={this.interactivePageLayout || (() => {})} />
69+
<Sidebar />
7070
</div>
7171
)}
7272
</div>

‎x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_content.js‎

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { compose, branch, renderComponent } from 'recompose';
1010
import { EuiSpacer } from '@elastic/eui';
1111
import { getSelectedToplevelNodes, getSelectedElementId } from '../../state/selectors/workpad';
1212
import { SidebarHeader } from '../sidebar_header';
13-
import { globalStateUpdater } from '../workpad_page/integration_utils';
1413
import { ComponentStrings } from '../../../i18n';
1514
import { MultiElementSettings } from './multi_element_settings';
1615
import { GroupSettings } from './group_settings';
@@ -22,45 +21,19 @@ const { SidebarContent: strings } = ComponentStrings;
2221
const mapStateToProps = state => ({
2322
selectedToplevelNodes: getSelectedToplevelNodes(state),
2423
selectedElementId: getSelectedElementId(state),
25-
state,
2624
});
2725

28-
const mergeProps = (
29-
{ state, ...restStateProps },
30-
{ dispatch, ...restDispatchProps },
31-
ownProps
32-
) => ({
33-
...ownProps,
34-
...restDispatchProps,
35-
...restStateProps,
36-
updateGlobalState: globalStateUpdater(dispatch, state),
37-
});
38-
39-
const withGlobalState = (commit, updateGlobalState) => (type, payload) => {
40-
const newLayoutState = commit(type, payload);
41-
if (newLayoutState.currentScene.gestureEnd) {
42-
updateGlobalState(newLayoutState);
43-
}
44-
};
45-
46-
const MultiElementSidebar = ({ commit, updateGlobalState }) => (
26+
const MultiElementSidebar = () => (
4727
<Fragment>
48-
<SidebarHeader
49-
title={strings.getMultiElementSidebarTitle()}
50-
commit={withGlobalState(commit, updateGlobalState)}
51-
/>
28+
<SidebarHeader title={strings.getMultiElementSidebarTitle()} />
5229
<EuiSpacer />
5330
<MultiElementSettings />
5431
</Fragment>
5532
);
5633

57-
const GroupedElementSidebar = ({ commit, updateGlobalState }) => (
34+
const GroupedElementSidebar = () => (
5835
<Fragment>
59-
<SidebarHeader
60-
title={strings.getGroupedElementSidebarTitle()}
61-
commit={withGlobalState(commit, updateGlobalState)}
62-
groupIsSelected
63-
/>
36+
<SidebarHeader title={strings.getGroupedElementSidebarTitle()} groupIsSelected />
6437
<EuiSpacer />
6538
<GroupSettings />
6639
</Fragment>
@@ -92,7 +65,4 @@ const branches = [
9265
),
9366
];
9467

95-
export const SidebarContent = compose(
96-
connect(mapStateToProps, null, mergeProps),
97-
...branches
98-
)(GlobalConfig);
68+
export const SidebarContent = compose(connect(mapStateToProps), ...branches)(GlobalConfig);

0 commit comments

Comments
 (0)