[Canvas] Adds edit menu (elastic#64738)

cqliu1 · Apr 30, 2020 · 1c52838 · 1c52838
1 parent 042f3f0
commit 1c52838
Show file tree

Hide file tree

Showing 20 changed files with 1,100 additions and 826 deletions.
diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts
@@ -804,17 +804,6 @@ export const ComponentStrings = {
       }),
   },
   SidebarHeader: {
-    getAlignmentMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.alignmentMenuItemLabel', {
-        defaultMessage: 'Alignment',
-        description:
-          'This refers to the vertical (i.e. left, center, right) and horizontal (i.e. top, middle, bottom) ' +
-          'alignment options of the selected elements',
-      }),
-    getBottomAlignMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.bottomAlignMenuItemLabel', {
-        defaultMessage: 'Bottom',
-      }),
     getBringForwardAriaLabel: () =>
       i18n.translate('xpack.canvas.sidebarHeader.bringForwardArialLabel', {
         defaultMessage: 'Move element up one layer',
@@ -823,56 +812,6 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.sidebarHeader.bringToFrontArialLabel', {
         defaultMessage: 'Move element to top layer',
       }),
-    getCenterAlignMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.centerAlignMenuItemLabel', {
-        defaultMessage: 'Center',
-        description: 'This refers to alignment centered horizontally.',
-      }),
-    getContextMenuTitle: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.contextMenuAriaLabel', {
-        defaultMessage: 'Element options',
-      }),
-    getCreateElementModalTitle: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.createElementModalTitle', {
-        defaultMessage: 'Create new element',
-      }),
-    getDistributionMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.distributionMenutItemLabel', {
-        defaultMessage: 'Distribution',
-        description:
-          'This refers to the options to evenly spacing the selected elements horizontall or vertically.',
-      }),
-    getGroupMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.groupMenuItemLabel', {
-        defaultMessage: 'Group',
-        description: 'This refers to grouping multiple selected elements.',
-      }),
-    getHorizontalDistributionMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.horizontalDistributionMenutItemLabel', {
-        defaultMessage: 'Horizontal',
-      }),
-    getLeftAlignMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.leftAlignMenuItemLabel', {
-        defaultMessage: 'Left',
-      }),
-    getMiddleAlignMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.middleAlignMenuItemLabel', {
-        defaultMessage: 'Middle',
-        description: 'This refers to alignment centered vertically.',
-      }),
-    getOrderMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.orderMenuItemLabel', {
-        defaultMessage: 'Order',
-        description: 'Refers to the order of the elements displayed on the page from front to back',
-      }),
-    getRightAlignMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.rightAlignMenuItemLabel', {
-        defaultMessage: 'Right',
-      }),
-    getSaveElementMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.savedElementMenuItemLabel', {
-        defaultMessage: 'Save as new element',
-      }),
     getSendBackwardAriaLabel: () =>
       i18n.translate('xpack.canvas.sidebarHeader.sendBackwardArialLabel', {
         defaultMessage: 'Move element down one layer',
@@ -881,19 +820,6 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.sidebarHeader.sendToBackArialLabel', {
         defaultMessage: 'Move element to bottom layer',
       }),
-    getTopAlignMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.topAlignMenuItemLabel', {
-        defaultMessage: 'Top',
-      }),
-    getUngroupMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.ungroupMenuItemLabel', {
-        defaultMessage: 'Ungroup',
-        description: 'This refers to ungrouping a grouped element',
-      }),
-    getVerticalDistributionMenuItemLabel: () =>
-      i18n.translate('xpack.canvas.sidebarHeader.verticalDistributionMenutItemLabel', {
-        defaultMessage: 'Vertical',
-      }),
   },
   TextStylePicker: {
     getAlignCenterOption: () =>
@@ -1105,6 +1031,94 @@ export const ComponentStrings = {
         defaultMessage: 'Set a custom interval',
       }),
   },
+  WorkpadHeaderEditMenu: {
+    getAlignmentMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.alignmentMenuItemLabel', {
+        defaultMessage: 'Alignment',
+        description:
+          'This refers to the vertical (i.e. left, center, right) and horizontal (i.e. top, middle, bottom) ' +
+          'alignment options of the selected elements',
+      }),
+    getBottomAlignMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.bottomAlignMenuItemLabel', {
+        defaultMessage: 'Bottom',
+      }),
+    getCenterAlignMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.centerAlignMenuItemLabel', {
+        defaultMessage: 'Center',
+        description: 'This refers to alignment centered horizontally.',
+      }),
+    getCreateElementModalTitle: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.createElementModalTitle', {
+        defaultMessage: 'Create new element',
+      }),
+    getDistributionMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.distributionMenutItemLabel', {
+        defaultMessage: 'Distribution',
+        description:
+          'This refers to the options to evenly spacing the selected elements horizontall or vertically.',
+      }),
+    getEditMenuButtonLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.editMenuButtonLabel', {
+        defaultMessage: 'Edit',
+      }),
+    getEditMenuLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.editMenuLabel', {
+        defaultMessage: 'Edit options',
+      }),
+    getGroupMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.groupMenuItemLabel', {
+        defaultMessage: 'Group',
+        description: 'This refers to grouping multiple selected elements.',
+      }),
+    getHorizontalDistributionMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.horizontalDistributionMenutItemLabel', {
+        defaultMessage: 'Horizontal',
+      }),
+    getLeftAlignMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.leftAlignMenuItemLabel', {
+        defaultMessage: 'Left',
+      }),
+    getMiddleAlignMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.middleAlignMenuItemLabel', {
+        defaultMessage: 'Middle',
+        description: 'This refers to alignment centered vertically.',
+      }),
+    getOrderMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.orderMenuItemLabel', {
+        defaultMessage: 'Order',
+        description: 'Refers to the order of the elements displayed on the page from front to back',
+      }),
+    getRedoMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.redoMenuItemLabel', {
+        defaultMessage: 'Redo',
+      }),
+    getRightAlignMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.rightAlignMenuItemLabel', {
+        defaultMessage: 'Right',
+      }),
+    getSaveElementMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.savedElementMenuItemLabel', {
+        defaultMessage: 'Save as new element',
+      }),
+    getTopAlignMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.topAlignMenuItemLabel', {
+        defaultMessage: 'Top',
+      }),
+    getUndoMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.undoMenuItemLabel', {
+        defaultMessage: 'Undo',
+      }),
+    getUngroupMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.ungroupMenuItemLabel', {
+        defaultMessage: 'Ungroup',
+        description: 'This refers to ungrouping a grouped element',
+      }),
+    getVerticalDistributionMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderEditMenu.verticalDistributionMenutItemLabel', {
+        defaultMessage: 'Vertical',
+      }),
+  },
   WorkpadHeaderElementMenu: {
     getAssetsMenuItemLabel: () =>
       i18n.translate('xpack.canvas.workpadHeaderElementMenu.manageAssetsMenuItemLabel', {

diff --git a/x-pack/legacy/plugins/canvas/i18n/shortcuts.ts b/x-pack/legacy/plugins/canvas/i18n/shortcuts.ts
@@ -42,10 +42,10 @@ export const ShortcutStrings = {
       defaultMessage: 'Delete',
     }),
     BRING_FORWARD: i18n.translate('xpack.canvas.keyboardShortcuts.bringFowardShortcutHelpText', {
-      defaultMessage: 'Bring to front',
+      defaultMessage: 'Bring forward',
     }),
     BRING_TO_FRONT: i18n.translate('xpack.canvas.keyboardShortcuts.bringToFrontShortcutHelpText', {
-      defaultMessage: 'Bring forward',
+      defaultMessage: 'Bring to front',
     }),
     SEND_BACKWARD: i18n.translate('xpack.canvas.keyboardShortcuts.sendBackwardShortcutHelpText', {
       defaultMessage: 'Send backward',

diff --git a/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.js b/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.js
@@ -43,7 +43,7 @@ export class WorkpadApp extends React.PureComponent {
           <div className="canvasLayout__cols">
             <div className="canvasLayout__stage">
               <div className="canvasLayout__stageHeader">
-                <WorkpadHeader />
+                <WorkpadHeader commit={this.interactivePageLayout || (() => {})} />
               </div>
 
               <div
@@ -66,7 +66,7 @@ export class WorkpadApp extends React.PureComponent {
 
             {isWriteable && (
               <div className="canvasLayout__sidebar hide-for-sharing">
-                <Sidebar commit={this.interactivePageLayout || (() => {})} />
+                <Sidebar />
               </div>
             )}
           </div>

diff --git a/...eyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot b/...eyboard_shortcuts_doc/__examples__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_content.js b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_content.js
@@ -10,7 +10,6 @@ import { compose, branch, renderComponent } from 'recompose';
 import { EuiSpacer } from '@elastic/eui';
 import { getSelectedToplevelNodes, getSelectedElementId } from '../../state/selectors/workpad';
 import { SidebarHeader } from '../sidebar_header';
-import { globalStateUpdater } from '../workpad_page/integration_utils';
 import { ComponentStrings } from '../../../i18n';
 import { MultiElementSettings } from './multi_element_settings';
 import { GroupSettings } from './group_settings';
@@ -22,45 +21,19 @@ const { SidebarContent: strings } = ComponentStrings;
 const mapStateToProps = state => ({
   selectedToplevelNodes: getSelectedToplevelNodes(state),
   selectedElementId: getSelectedElementId(state),
-  state,
 });
 
-const mergeProps = (
-  { state, ...restStateProps },
-  { dispatch, ...restDispatchProps },
-  ownProps
-) => ({
-  ...ownProps,
-  ...restDispatchProps,
-  ...restStateProps,
-  updateGlobalState: globalStateUpdater(dispatch, state),
-});
-
-const withGlobalState = (commit, updateGlobalState) => (type, payload) => {
-  const newLayoutState = commit(type, payload);
-  if (newLayoutState.currentScene.gestureEnd) {
-    updateGlobalState(newLayoutState);
-  }
-};
-
-const MultiElementSidebar = ({ commit, updateGlobalState }) => (
+const MultiElementSidebar = () => (
   <Fragment>
-    <SidebarHeader
-      title={strings.getMultiElementSidebarTitle()}
-      commit={withGlobalState(commit, updateGlobalState)}
-    />
+    <SidebarHeader title={strings.getMultiElementSidebarTitle()} />
     <EuiSpacer />
     <MultiElementSettings />
   </Fragment>
 );
 
-const GroupedElementSidebar = ({ commit, updateGlobalState }) => (
+const GroupedElementSidebar = () => (
   <Fragment>
-    <SidebarHeader
-      title={strings.getGroupedElementSidebarTitle()}
-      commit={withGlobalState(commit, updateGlobalState)}
-      groupIsSelected
-    />
+    <SidebarHeader title={strings.getGroupedElementSidebarTitle()} groupIsSelected />
     <EuiSpacer />
     <GroupSettings />
   </Fragment>
@@ -92,7 +65,4 @@ const branches = [
   ),
 ];
 
-export const SidebarContent = compose(
-  connect(mapStateToProps, null, mergeProps),
-  ...branches
-)(GlobalConfig);
+export const SidebarContent = compose(connect(mapStateToProps), ...branches)(GlobalConfig);