Chore: Converts HelpModal from angular to react (#19474)

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, []);

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

-import coreModule from '../../core_module';
-import appEvents from 'app/core/app_events';
+import React from 'react';
+import { appEvents } from 'app/core/core';
 
-export class HelpCtrl {
-  tabIndex: any;
-  shortcuts: any;
-
-  /** @ngInject */
-  constructor() {
-    this.tabIndex = 0;
-    this.shortcuts = {
+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' },
@@ -38,32 +33,68 @@ export class HelpCtrl {
     'Time Range': [
       { keys: ['t', 'z'], description: 'Zoom out time range' },
       {
-          keys: ['t', '<i class="fa fa-long-arrow-left"></i>'],
+        keys: ['t', <i className="fa fa-long-arrow-left" />],
         description: 'Move time range back',
       },
       {
-          keys: ['t', '<i class="fa fa-long-arrow-right"></i>'],
+        keys: ['t', <i className="fa fa-long-arrow-right" />],
         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: {},
-  };
-}
+  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>
 
-coreModule.directive('helpModal', helpModal);
+        <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>
+    );
+  }
+}

public/app/core/components/help/help.html

-<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>

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,