diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 42bd5a92739..7d7fa8c7dba 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/public/app/core/angular_wrappers.ts
@@ -13,8 +13,10 @@ import { SearchField } from './components/search/SearchField';
 import { GraphContextMenu } from 'app/plugins/panel/graph/GraphContextMenu';
 import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper';
 import { LokiAnnotationsQueryEditor } from '../plugins/datasource/loki/components/AnnotationsQueryEditor';
+import { HelpModal } from './components/help/HelpModal';
 
 export function registerAngularDirectives() {
+  react2AngularDirective('helpModal', HelpModal, []);
   react2AngularDirective('sidemenu', SideMenu, []);
   react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']);
   react2AngularDirective('appNotificationsList', AppNotificationList, []);
diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx
new file mode 100644
index 00000000000..1c8bc30d2e9
--- /dev/null
+++ b/public/app/core/components/help/HelpModal.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { appEvents } from 'app/core/core';
+
+export class HelpModal extends React.PureComponent {
+  static tabIndex = 0;
+  static shortcuts = {
+    Global: [
+      { keys: ['g', 'h'], description: 'Go to Home Dashboard' },
+      { keys: ['g', 'p'], description: 'Go to Profile' },
+      { keys: ['s', 'o'], description: 'Open search' },
+      { keys: ['esc'], description: 'Exit edit/setting views' },
+    ],
+    Dashboard: [
+      { keys: ['mod+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: ['mod+o'], description: 'Toggle shared graph crosshair' },
+      { keys: ['d', 'l'], description: 'Toggle all panel legends' },
+    ],
+    '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', <i className="fa fa-long-arrow-left" />],
+        description: 'Move time range back',
+      },
+      {
+        keys: ['t', <i className="fa fa-long-arrow-right" />],
+        description: 'Move time range forward',
+      },
+    ],
+  };
+
+  dismiss() {
+    appEvents.emit('hide-modal');
+  }
+
+  render() {
+    return (
+      <div className="modal-body">
+        <div className="modal-header">
+          <h2 className="modal-header-title">
+            <i className="fa fa-keyboard-o" />
+            <span className="p-l-1">Shortcuts</span>
+          </h2>
+          <a className="modal-header-close" onClick={this.dismiss}>
+            <i className="fa fa-remove" />
+          </a>
+        </div>
+
+        <div className="modal-content help-modal">
+          <p className="small" style={{ position: 'absolute', top: '13px', right: '44px' }}>
+            <span className="shortcut-table-key">mod</span> =
+            <span className="muted"> CTRL on windows or linux and CMD key on Mac</span>
+          </p>
+
+          {Object.entries(HelpModal.shortcuts).map(([category, shortcuts], i) => (
+            <div className="shortcut-category" key={i}>
+              <table className="shortcut-table">
+                <tbody>
+                  <tr>
+                    <th className="shortcut-table-category-header" colSpan={2}>
+                      {category}
+                    </th>
+                  </tr>
+                  {shortcuts.map((shortcut, j) => (
+                    <tr key={`${i}-${j}`}>
+                      <td className="shortcut-table-keys">
+                        {shortcut.keys.map((key, k) => (
+                          <span className="shortcut-table-key" key={`${i}-${j}-${k}`}>
+                            {key}
+                          </span>
+                        ))}
+                      </td>
+                      <td className="shortcut-table-description">{shortcut.description}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ))}
+
+          <div className="clearfix" />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/public/app/core/components/help/help.html b/public/app/core/components/help/help.html
deleted file mode 100644
index 45faa560e40..00000000000
--- a/public/app/core/components/help/help.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<div class="modal-body">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-keyboard-o"></i>
-			<span class="p-l-1">Shortcuts</span>
-		</h2>
-		<a class="modal-header-close" ng-click="ctrl.dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content help-modal">
-
-		<p class="small" style="position: absolute; top: 13px; right: 44px">
-			<span class="shortcut-table-key">mod</span> =
-			<span class="muted">CTRL on windows or linux and CMD key on Mac</span>
-		</p>
-
-		<div ng-repeat="(category, shortcuts) in ctrl.shortcuts" class="shortcut-category">
-			<table class="shortcut-table">
-				<tbody>
-					<tr>
-						<th class="shortcut-table-category-header" colspan="2">{{category}}</th>
-					</tr>
-					<tr ng-repeat="shortcut in shortcuts">
-						<td class="shortcut-table-keys">
-              <span class="shortcut-table-key" ng-repeat="key in shortcut.keys track by $index" ng-bind-html="key">
-              </span>
-            </td>
-						<td class="shortcut-table-description">{{shortcut.description}}</td>
-					</tr>
-					<tbody>
-			</table>
-		</div>
-
-		<div class="clearfix"></div>
-	</div>
-
-</div>
diff --git a/public/app/core/components/help/help.ts b/public/app/core/components/help/help.ts
deleted file mode 100644
index 63be172a5de..00000000000
--- a/public/app/core/components/help/help.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import coreModule from '../../core_module';
-import appEvents from 'app/core/app_events';
-
-export class HelpCtrl {
-  tabIndex: any;
-  shortcuts: any;
-
-  /** @ngInject */
-  constructor() {
-    this.tabIndex = 0;
-    this.shortcuts = {
-      Global: [
-        { keys: ['g', 'h'], description: 'Go to Home Dashboard' },
-        { keys: ['g', 'p'], description: 'Go to Profile' },
-        { keys: ['s', 'o'], description: 'Open search' },
-        { keys: ['esc'], description: 'Exit edit/setting views' },
-      ],
-      Dashboard: [
-        { keys: ['mod+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: ['mod+o'], description: 'Toggle shared graph crosshair' },
-        { keys: ['d', 'l'], description: 'Toggle all panel legends' },
-      ],
-      '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', '<i class="fa fa-long-arrow-left"></i>'],
-          description: 'Move time range back',
-        },
-        {
-          keys: ['t', '<i class="fa fa-long-arrow-right"></i>'],
-          description: 'Move time range forward',
-        },
-      ],
-    };
-  }
-
-  dismiss() {
-    appEvents.emit('hide-modal');
-  }
-}
-
-export function helpModal() {
-  return {
-    restrict: 'E',
-    templateUrl: 'public/app/core/components/help/help.html',
-    controller: HelpCtrl,
-    bindToController: true,
-    transclude: true,
-    controllerAs: 'ctrl',
-    scope: {},
-  };
-}
-
-coreModule.directive('helpModal', helpModal);
diff --git a/public/app/core/core.ts b/public/app/core/core.ts
index 247c29d0d75..de9db0b4e2d 100644
--- a/public/app/core/core.ts
+++ b/public/app/core/core.ts
@@ -37,7 +37,6 @@ import appEvents from './app_events';
 import { assignModelProperties } from './utils/model_utils';
 import { contextSrv } from './services/context_srv';
 import { KeybindingSrv } from './services/keybindingSrv';
-import { helpModal } from './components/help/help';
 import { NavModelSrv } from './nav_model_srv';
 import { geminiScrollbar } from './components/scroll/scroll';
 import { orgSwitcher } from './components/org_switcher';
@@ -69,7 +68,6 @@ export {
   assignModelProperties,
   contextSrv,
   KeybindingSrv,
-  helpModal,
   JsonExplorer,
   NavModelSrv,
   NavModel,