i18n: Mark up HelpModal for translations (#73806)

* fix: i18n Help Modal

* fix: change translation modal to grafana-ui.modal

* fix: lint

* fix: by run yarn:i18n pseudo

public/app/core/components/help/HelpModal.tsx

@@ -3,57 +3,127 @@ import React, { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Modal, useStyles2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 import { getModKey } from 'app/core/utils/browser';
 
 const getShortcuts = (modKey: string) => {
-  return {
-    Global: [
-      { keys: ['g', 'h'], description: 'Go to Home Dashboard' },
-      { keys: ['g', 'd'], description: 'Go to Dashboards' },
-      { keys: ['g', 'e'], description: 'Go to Explore' },
-      { keys: ['g', 'p'], description: 'Go to Profile' },
-      { keys: [`${modKey} + k`], description: 'Open search' },
-      { keys: ['esc'], description: 'Exit edit/setting views' },
-      { keys: ['h'], description: 'Show all keyboard shortcuts' },
-      { keys: ['c', 't'], description: 'Change theme' },
-    ],
-    Dashboard: [
-      { keys: [`${modKey}+s`], description: 'Save dashboard' },
-      { keys: ['d', 'r'], description: 'Refresh all panels' },
-      { keys: ['d', 's'], description: 'Dashboard settings' },
-      { keys: ['d', 'v'], description: 'Toggle in-active / view mode' },
-      { keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)' },
-      { keys: ['d', 'E'], description: 'Expand all rows' },
-      { keys: ['d', 'C'], description: 'Collapse all rows' },
-      { keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' },
-      { keys: [`${modKey} + o`], description: 'Toggle shared graph crosshair' },
-      { keys: ['d', 'l'], description: 'Toggle all panel legends' },
-      { keys: ['d', 'x'], description: 'Toggle exemplars in all panel' },
-    ],
-    'Focused Panel': [
-      { keys: ['e'], description: 'Toggle panel edit view' },
-      { keys: ['v'], description: 'Toggle panel fullscreen view' },
-      { keys: ['p', 's'], description: 'Open Panel Share Modal' },
-      { keys: ['p', 'd'], description: 'Duplicate Panel' },
-      { keys: ['p', 'r'], description: 'Remove Panel' },
-      { keys: ['p', 'l'], description: 'Toggle panel legend' },
-    ],
-    'Time Range': [
-      { keys: ['t', 'z'], description: 'Zoom out time range' },
-      {
-        keys: ['t', '←'],
-        description: 'Move time range back',
-      },
-      {
-        keys: ['t', '→'],
-        description: 'Move time range forward',
-      },
-      {
-        keys: ['t', 'a'],
-        description: 'Make time range absolute/permanent',
-      },
-    ],
-  };
+  return [
+    {
+      category: t('help-modal.shortcuts-category.global', 'Global'),
+      shortcuts: [
+        {
+          keys: ['g', 'h'],
+          description: t('help-modal.shortcuts-description.go-to-home-dashboard', 'Go to Home Dashboard'),
+        },
+        {
+          keys: ['g', 'd'],
+          description: t('help-modal.shortcuts-description.go-to-dashboards', 'Go to Dashboards'),
+        },
+        { keys: ['g', 'e'], description: t('help-modal.shortcuts-description.go-to-explore', 'Go to Explore') },
+        { keys: ['g', 'p'], description: t('help-modal.shortcuts-description.go-to-profile', 'Go to Profile') },
+        { keys: [`${modKey} + k`], description: t('help-modal.shortcuts-description.open-search', 'Open search') },
+        {
+          keys: ['esc'],
+          description: t('help-modal.shortcuts-description.exit-edit/setting-views', 'Exit edit/setting views'),
+        },
+        {
+          keys: ['h'],
+          description: t('help-modal.shortcuts-description.show-all-shortcuts', 'Show all keyboard shortcuts'),
+        },
+        { keys: ['c', 't'], description: t('help-modal.shortcuts-description.change-theme', 'Change theme') },
+      ],
+    },
+    {
+      category: t('help-modal.shortcuts-category.dashboard', 'Dashboard'),
+      shortcuts: [
+        { keys: [`${modKey}+s`], description: t('help-modal.shortcuts-description.save-dashboard', 'Save dashboard') },
+        {
+          keys: ['d', 'r'],
+          description: t('help-modal.shortcuts-description.refresh-all-panels', 'Refresh all panels'),
+        },
+        {
+          keys: ['d', 's'],
+          description: t('help-modal.shortcuts-description.dashboard-settings', 'Dashboard settings'),
+        },
+        {
+          keys: ['d', 'v'],
+          description: t('help-modal.shortcuts-description.toggle-active-mode', 'Toggle in-active / view mode'),
+        },
+        {
+          keys: ['d', 'k'],
+          description: t('help-modal.shortcuts-description.toggle-kiosk', 'Toggle kiosk mode (hides top nav)'),
+        },
+        { keys: ['d', 'E'], description: t('help-modal.shortcuts-description.expand-all-rows', 'Expand all rows') },
+        { keys: ['d', 'C'], description: t('help-modal.shortcuts-description.collapse-all-rows', 'Collapse all rows') },
+        {
+          keys: ['d', 'a'],
+          description: t(
+            'help-modal.shortcuts-description.toggle-auto-fit',
+            'Toggle auto fit panels (experimental feature)'
+          ),
+        },
+        {
+          keys: [`${modKey} + o`],
+          description: t('help-modal.shortcuts-description.toggle-graph-crosshair', 'Toggle shared graph crosshair'),
+        },
+        {
+          keys: ['d', 'l'],
+          description: t('help-modal.shortcuts-description.toggle-all-panel-legends', 'Toggle all panel legends'),
+        },
+        {
+          keys: ['d', 'x'],
+          description: t('help-modal.shortcuts-description.toggle-exemplars', 'Toggle exemplars in all panel'),
+        },
+      ],
+    },
+    {
+      category: t('help-modal.shortcuts-category.focused-panel', 'Focused Panel'),
+      shortcuts: [
+        {
+          keys: ['e'],
+          description: t('help-modal.shortcuts-description.toggle-panel-edit', 'Toggle panel edit view'),
+        },
+        {
+          keys: ['v'],
+          description: t('help-modal.shortcuts-description.toggle-panel-fullscreen', 'Toggle panel fullscreen view'),
+        },
+        {
+          keys: ['p', 's'],
+          description: t('help-modal.shortcuts-description.open-shared-modal', 'Open Panel Share Modal'),
+        },
+        { keys: ['p', 'd'], description: t('help-modal.shortcuts-description.duplicate-panel', 'Duplicate Panel') },
+        { keys: ['p', 'r'], description: t('help-modal.shortcuts-description.remove-panel', 'Remove Panel') },
+        {
+          keys: ['p', 'l'],
+          description: t('help-modal.shortcuts-description.toggle-panel-legend', 'Toggle panel legend'),
+        },
+      ],
+    },
+    {
+      category: t('help-modal.shortcuts-category.time-range', 'Time Range'),
+      shortcuts: [
+        {
+          keys: ['t', 'z'],
+          description: t('help-modal.shortcuts-description.zoom-out-time-range', 'Zoom out time range'),
+        },
+        {
+          keys: ['t', '←'],
+          description: t('help-modal.shortcuts-description.move-time-range-back', 'Move time range back'),
+        },
+        {
+          keys: ['t', '→'],
+          description: t('help-modal.shortcuts-description.move-time-range-forward', 'Move time range forward'),
+        },
+        {
+          keys: ['t', 'a'],
+          description: t(
+            'help-modal.shortcuts-description.make-time-range-permanent',
+            'Make time range absolute/permanent'
+          ),
+        },
+      ],
+    },
+  ];
 };
 
 export interface HelpModalProps {
@@ -65,9 +135,9 @@ export const HelpModal = ({ onDismiss }: HelpModalProps): JSX.Element => {
   const modKey = useMemo(() => getModKey(), []);
   const shortcuts = useMemo(() => getShortcuts(modKey), [modKey]);
   return (
-    <Modal title="Shortcuts" isOpen onDismiss={onDismiss} onClickBackdrop={onDismiss}>
+    <Modal title={t('help-modal.title', 'Shortcuts')} isOpen onDismiss={onDismiss} onClickBackdrop={onDismiss}>
       <div className={styles.categories}>
-        {Object.entries(shortcuts).map(([category, shortcuts], i) => (
+        {Object.values(shortcuts).map(({ category, shortcuts }, i) => (
           <div className={styles.shortcutCategory} key={i}>
             <table className={styles.shortcutTable}>
               <tbody>