[7.x] [Canvas][i18n] Keyboard Shortcuts and Help Menu (#45056)

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

@@ -5,6 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { CANVAS } from './constants';
 
 export const ComponentStrings = {
   AddEmbeddableFlyout: {
@@ -91,6 +92,42 @@ export const ComponentStrings = {
         },
       }),
   },
+  HelpMenu: {
+    getHelpMenuDescription: () =>
+      i18n.translate('xpack.canvas.helpMenu.description', {
+        defaultMessage: 'For {CANVAS} specific information',
+        values: {
+          CANVAS,
+        },
+      }),
+    getDocumentationLinkLabel: () =>
+      i18n.translate('xpack.canvas.helpMenu.documentationLinkLabel', {
+        defaultMessage: '{CANVAS} documentation',
+        values: {
+          CANVAS,
+        },
+      }),
+    getKeyboardShortcutsLinkLabel: () =>
+      i18n.translate('xpack.canvas.helpMenu.keyboardShortcutsLinkLabel', {
+        defaultMessage: 'Keyboard Shortcuts',
+      }),
+  },
+  KeyboardShortcutsDoc: {
+    getTitle: () =>
+      i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyoutHeaderTitle', {
+        defaultMessage: 'Keyboard Shortcuts',
+      }),
+    getShortcutSeparator: () =>
+      i18n.translate('xpack.canvas.keyboardShortcutsDoc.shortcutListSeparator', {
+        defaultMessage: 'or',
+        description:
+          'Separates which keyboard shortcuts can be used for a single action. Example: "{shortcut1} or {shortcut2} or {shortcut3}"',
+      }),
+    getFlyoutCloseButtonAriaLabel: () =>
+      i18n.translate('xpack.canvas.keyboardShortcutsDoc.flyout.closeButtonAriaLabel', {
+        defaultMessage: 'Closes keyboard shortcuts reference',
+      }),
+  },
   WorkpadHeader: {
     getAddElementBtnText: () =>
       i18n.translate('xpack.canvas.workpadHeader.addElementButtonText', {

x-pack/legacy/plugins/canvas/i18n/index.ts

@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 export * from './angular';
 export * from './constants';
 export * from './components';
+export * from './shortcuts';
 
 export const getAppDescription = () =>
   i18n.translate('xpack.canvas.appDescription', {

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

@@ -0,0 +1,174 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { ELEMENT_NUDGE_OFFSET, ELEMENT_SHIFT_OFFSET } from '../common/lib/constants';
+
+export const ShortcutStrings = {
+  getNamespaceDisplayNames: () => ({
+    ELEMENT: i18n.translate('xpack.canvas.keyboardShortcuts.namespace.elementDisplayName', {
+      defaultMessage: 'Element controls',
+    }),
+    EXPRESSION: i18n.translate('xpack.canvas.keyboardShortcuts.namespace.expressionDisplayName', {
+      defaultMessage: 'Expression controls',
+    }),
+    EDITOR: i18n.translate('xpack.canvas.keyboardShortcuts.namespace.editorDisplayName', {
+      defaultMessage: 'Editor controls',
+    }),
+    PRESENTATION: i18n.translate(
+      'xpack.canvas.keyboardShortcuts.namespace.presentationDisplayName',
+      {
+        defaultMessage: 'Presentation controls',
+      }
+    ),
+  }),
+  getShortcutHelp: () => ({
+    CUT: i18n.translate('xpack.canvas.keyboardShortcuts.cutShortcutHelpText', {
+      defaultMessage: 'Cut',
+    }),
+    COPY: i18n.translate('xpack.canvas.keyboardShortcuts.copyShortcutHelpText', {
+      defaultMessage: 'Copy',
+    }),
+    PASTE: i18n.translate('xpack.canvas.keyboardShortcuts.pasteShortcutHelpText', {
+      defaultMessage: 'Paste',
+    }),
+    CLONE: i18n.translate('xpack.canvas.keyboardShortcuts.cloneShortcutHelpText', {
+      defaultMessage: 'Clone',
+    }),
+    DELETE: i18n.translate('xpack.canvas.keyboardShortcuts.deleteShortcutHelpText', {
+      defaultMessage: 'Delete',
+    }),
+    BRING_FORWARD: i18n.translate('xpack.canvas.keyboardShortcuts.bringFowardShortcutHelpText', {
+      defaultMessage: 'Bring to front',
+    }),
+    BRING_TO_FRONT: i18n.translate('xpack.canvas.keyboardShortcuts.bringToFrontShortcutHelpText', {
+      defaultMessage: 'Bring forward',
+    }),
+    SEND_BACKWARD: i18n.translate('xpack.canvas.keyboardShortcuts.sendBackwardShortcutHelpText', {
+      defaultMessage: 'Send backward',
+    }),
+    SEND_TO_BACK: i18n.translate('xpack.canvas.keyboardShortcuts.sendToBackShortcutHelpText', {
+      defaultMessage: 'Send to back',
+    }),
+    GROUP: i18n.translate('xpack.canvas.keyboardShortcuts.groupShortcutHelpText', {
+      defaultMessage: 'Group',
+    }),
+    UNGROUP: i18n.translate('xpack.canvas.keyboardShortcuts.ungroupShortcutHelpText', {
+      defaultMessage: 'Ungroup',
+    }),
+    SHIFT_UP: i18n.translate('xpack.canvas.keyboardShortcuts.shiftUpShortcutHelpText', {
+      defaultMessage: 'Shift up by {ELEMENT_SHIFT_OFFSET}px',
+      values: {
+        ELEMENT_SHIFT_OFFSET,
+      },
+    }),
+    SHIFT_DOWN: i18n.translate('xpack.canvas.keyboardShortcuts.shiftDownShortcutHelpText', {
+      defaultMessage: 'Shift down by {ELEMENT_SHIFT_OFFSET}px',
+      values: {
+        ELEMENT_SHIFT_OFFSET,
+      },
+    }),
+    SHIFT_LEFT: i18n.translate('xpack.canvas.keyboardShortcuts.shiftLeftShortcutHelpText', {
+      defaultMessage: 'Shift left by {ELEMENT_SHIFT_OFFSET}px',
+      values: {
+        ELEMENT_SHIFT_OFFSET,
+      },
+    }),
+    SHIFT_RIGHT: i18n.translate('xpack.canvas.keyboardShortcuts.shiftRightShortcutHelpText', {
+      defaultMessage: 'Shift right by {ELEMENT_SHIFT_OFFSET}px',
+      values: {
+        ELEMENT_SHIFT_OFFSET,
+      },
+    }),
+    NUDGE_UP: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeUpShortcutHelpText', {
+      defaultMessage: 'Shift up by {ELEMENT_NUDGE_OFFSET}px',
+      values: {
+        ELEMENT_NUDGE_OFFSET,
+      },
+    }),
+    NUDGE_DOWN: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeDownShortcutHelpText', {
+      defaultMessage: 'Shift down by {ELEMENT_NUDGE_OFFSET}px',
+      values: {
+        ELEMENT_NUDGE_OFFSET,
+      },
+    }),
+    NUDGE_LEFT: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeLeftShortcutHelpText', {
+      defaultMessage: 'Shift left by {ELEMENT_NUDGE_OFFSET}px',
+      values: {
+        ELEMENT_NUDGE_OFFSET,
+      },
+    }),
+    NUDGE_RIGHT: i18n.translate('xpack.canvas.keyboardShortcuts.nudgeRightShortcutHelpText', {
+      defaultMessage: 'Shift right by {ELEMENT_NUDGE_OFFSET}px',
+      values: {
+        ELEMENT_NUDGE_OFFSET,
+      },
+    }),
+    RUN: i18n.translate('xpack.canvas.keyboardShortcuts.runShortcutHelpText', {
+      defaultMessage: 'Run whole expression',
+    }),
+    MULTISELECT: i18n.translate('xpack.canvas.keyboardShortcuts.multiselectShortcutHelpText', {
+      defaultMessage: 'Select multiple elements',
+    }),
+    RESIZE_FROM_CENTER: i18n.translate(
+      'xpack.canvas.keyboardShortcuts.resizeFromCenterShortcutHelpText',
+      {
+        defaultMessage: 'Resize from center',
+      }
+    ),
+    IGNORE_SNAP: i18n.translate('xpack.canvas.keyboardShortcuts.ignoreSnapShortcutHelpText', {
+      defaultMessage: 'Move, resize, and rotate without snapping',
+    }),
+    SELECT_BEHIND: i18n.translate('xpack.canvas.keyboardShortcuts.selectBehindShortcutHelpText', {
+      defaultMessage: 'Select element below',
+    }),
+    UNDO: i18n.translate('xpack.canvas.keyboardShortcuts.undoShortcutHelpText', {
+      defaultMessage: 'Undo last action',
+    }),
+    REDO: i18n.translate('xpack.canvas.keyboardShortcuts.redoShortcutHelpText', {
+      defaultMessage: 'Redo last action',
+    }),
+    PREV: i18n.translate('xpack.canvas.keyboardShortcuts.prevShortcutHelpText', {
+      defaultMessage: 'Go to previous page',
+    }),
+    NEXT: i18n.translate('xpack.canvas.keyboardShortcuts.nextShortcutHelpText', {
+      defaultMessage: 'Go to next page',
+    }),
+    EDITING: i18n.translate('xpack.canvas.keyboardShortcuts.editingShortcutHelpText', {
+      defaultMessage: 'Toggle edit mode',
+    }),
+    GRID: i18n.translate('xpack.canvas.keyboardShortcuts.gridShortcutHelpText', {
+      defaultMessage: 'Show grid',
+    }),
+    REFRESH: i18n.translate('xpack.canvas.keyboardShortcuts.ShortcutHelpText', {
+      defaultMessage: 'Refresh workpad',
+    }),
+    ZOOM_IN: i18n.translate('xpack.canvas.keyboardShortcuts.zoomInShortcutHelpText', {
+      defaultMessage: 'Zoom in',
+    }),
+    ZOOM_OUT: i18n.translate('xpack.canvas.keyboardShortcuts.zoomOutShortcutHelpText', {
+      defaultMessage: 'Zoom out',
+    }),
+    ZOOM_RESET: i18n.translate('xpack.canvas.keyboardShortcuts.zoomResetShortcutHelpText', {
+      defaultMessage: 'Reset zoom to 100%',
+    }),
+    FULLSCREEN: i18n.translate('xpack.canvas.keyboardShortcuts.fullscreenShortcutHelpText', {
+      defaultMessage: 'Enter presentation mode',
+    }),
+    FULLSCREEN_EXIT: i18n.translate(
+      'xpack.canvas.keyboardShortcuts.fullscreenExitShortcutHelpText',
+      {
+        defaultMessage: 'Exit presentation mode',
+      }
+    ),
+    PAGE_CYCLE_TOGGLE: i18n.translate(
+      'xpack.canvas.keyboardShortcuts.pageCycleToggleShortcutHelpText',
+      {
+        defaultMessage: 'Toggle page cycling',
+      }
+    ),
+  }),
+};

x-pack/legacy/plugins/canvas/public/components/help_menu/help_menu.js

@@ -8,6 +8,9 @@ import React, { Fragment, PureComponent } from 'react';
 import { EuiButton, EuiHorizontalRule, EuiText, EuiSpacer, EuiPortal } from '@elastic/eui';
 import { documentationLinks } from '../../lib/documentation_links';
 import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
+import { ComponentStrings } from '../../../i18n';
+
+const { HelpMenu: strings } = ComponentStrings;
 
 export class HelpMenu extends PureComponent {
   state = { isFlyoutVisible: false };
@@ -26,15 +29,15 @@ export class HelpMenu extends PureComponent {
         <EuiHorizontalRule margin="none" />
         <EuiSpacer />
         <EuiText size="s">
-          <p>For Canvas specific information</p>
+          <p>{strings.getHelpMenuDescription()}</p>
         </EuiText>
         <EuiSpacer />
         <EuiButton fill iconType="popout" href={documentationLinks.canvas} target="_blank">
-          Canvas documentation
+          {strings.getDocumentationLinkLabel()}
         </EuiButton>
         <EuiSpacer />
         <EuiButton onClick={this.showFlyout} target="_blank">
-          Keyboard shortcuts
+          {strings.getKeyboardShortcutsLinkLabel()}
         </EuiButton>
 
         {this.state.isFlyoutVisible && (

x-pack/legacy/plugins/canvas/public/components/keyboard_shortcuts_doc/keyboard_shortcuts_doc.tsx

@@ -21,6 +21,9 @@ import { ShortcutMap, ShortcutNameSpace } from '../../../types';
 import { getClientPlatform } from '../../lib/get_client_platform';
 import { getId } from '../../lib/get_id';
 import { getPrettyShortcut } from '../../lib/get_pretty_shortcut';
+import { ComponentStrings } from '../../../i18n';
+
+const { KeyboardShortcutsDoc: strings } = ComponentStrings;
 
 interface DescriptionListItem {
   title: string;
@@ -46,7 +49,7 @@ const getDescriptionListItems = (shortcuts: ShortcutMap[]): DescriptionListItem[
           // replace +'s with spaces so we can display the plus symbol for the plus key
           shortcut = shortcut.replace(/\+/g, ' ');
           if (i !== 0) {
-            acc.push(<span key={getId('span')}> or </span>);
+            acc.push(<span key={getId('span')}> {strings.getShortcutSeparator()} </span>);
           }
           acc.push(
             <span key={getId('span')}>
@@ -62,10 +65,14 @@ const getDescriptionListItems = (shortcuts: ShortcutMap[]): DescriptionListItem[
   );
 
 export const KeyboardShortcutsDoc: FunctionComponent<Props> = ({ onClose }) => (
-  <EuiFlyout closeButtonAriaLabel="Closes keyboard shortcuts reference" size="s" onClose={onClose}>
+  <EuiFlyout
+    closeButtonAriaLabel={strings.getFlyoutCloseButtonAriaLabel()}
+    size="s"
+    onClose={onClose}
+  >
     <EuiFlyoutHeader hasBorder>
       <EuiTitle size="s">
-        <h2>Keyboard Shortcuts</h2>
+        <h2>{strings.getTitle()}</h2>
       </EuiTitle>
     </EuiFlyoutHeader>
     <EuiFlyoutBody>