DevTools - partially de-angularize and move custom views out of top_n…

…av (#39341) (#39705)

* Sense settings modal

* Deleted comments

* DevTools help flyout

* Settings UI improvements

* Improve file naming

* Rename helpShowPanel

* Added TS to help

* React welcome flyout + removed it from top nav

* Move history tool outside of top nav
Improve it's behavior - now it will update when open, when a query is run.

* ts fix

* Code review fixes

* Code review fixes

* Fixed translations

* Code review changes - autoclose panels

* deleted unused useEffect

* fix z-order of components

* type check fixes

* Final code review fixes

src/legacy/core_plugins/console/public/console.js

@@ -27,9 +27,6 @@ require('ui/capabilities/route_setup');
 
 require('./src/controllers/sense_controller');
 require('./src/directives/sense_history');
-require('./src/directives/sense_settings');
-require('./src/directives/sense_help');
-require('./src/directives/sense_welcome');
 require('./src/directives/console_menu_directive');
 
 

src/legacy/core_plugins/console/public/index.html

@@ -1,4 +1,6 @@
+<kbn-top-nav name="console" config="topNavMenu"></kbn-top-nav>
 <kbn-dev-tools-app data-test-subj="console" top-nav-config="topNavController">
+  <sense-history ng-show="showHistory" is-shown="showHistory" history-dirty="lastRequestTimestamp"></sense-history>
   <div class="conApp">
     <div class="conApp__editor">
       <ul class="conApp__autoComplete" id="autocomplete"></ul>
@@ -32,3 +34,6 @@
     </div>
   </div>
 </kbn-dev-tools-app>
+<div id="consoleWelcomePanel"></div>
+<div id="consoleHelpPanel"></div>
+<div id="consoleSettingsModal"></div>

src/legacy/core_plugins/console/public/src/directives/sense_help.js → src/legacy/core_plugins/console/public/src/components/dev_tools_settings.ts

@@ -17,14 +17,14 @@
  * under the License.
  */
 
-require('./sense_help_example');
-import template from './help.html';
-
-require('ui/modules')
-  .get('app/sense')
-  .directive('senseHelp', function () {
-    return {
-      restrict: 'E',
-      template
-    };
-  });
+export interface DevToolsSettings {
+  fontSize: number;
+  wrapMode: boolean;
+  autocomplete: {
+    fields: boolean;
+    indices: boolean;
+    templates: boolean;
+  };
+  polling: boolean;
+  tripleQuotes: boolean;
+}

src/legacy/core_plugins/console/public/src/directives/sense_help_example.js → src/legacy/core_plugins/console/public/src/components/editor_example.tsx

@@ -17,25 +17,31 @@
  * under the License.
  */
 
-const SenseEditor = require('../sense_editor/editor');
+import React, { useEffect } from 'react';
+// @ts-ignore
 import exampleText from 'raw-loader!./helpExample.txt';
-import { applyResizeCheckerToEditors } from '../sense_editor_resize';
+import $ from 'jquery';
+// @ts-ignore
+import SenseEditor from '../sense_editor/editor';
 
-require('ui/modules')
-  .get('app/sense')
-  .directive('senseHelpExample', function () {
-    return {
-      restrict: 'E',
-      link: function ($scope, $el) {
-        $el.text(exampleText.trim());
-        $scope.editor = new SenseEditor($el);
-        applyResizeCheckerToEditors($scope, $el, $scope.editor);
-        $scope.editor.setReadOnly(true);
-        $scope.editor.$blockScrolling = Infinity;
+interface EditorExampleProps {
+  panel: string;
+}
 
-        $scope.$on('$destroy', function () {
-          if ($scope.editor) $scope.editor.destroy();
-        });
-      }
+export function EditorExample(props: EditorExampleProps) {
+  const elemId = `help-example-${props.panel}`;
+
+  useEffect(() => {
+    const el = $(`#${elemId}`);
+    el.text(exampleText.trim());
+    const editor = new SenseEditor(el);
+    editor.setReadOnly(true);
+    editor.$blockScrolling = Infinity;
+
+    return () => {
+      editor.destroy();
     };
-  });
+  }, []);
+
+  return <div id={elemId} className="conHelp__example" />;
+}

src/legacy/core_plugins/console/public/src/components/help_panel.tsx

@@ -0,0 +1,144 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiText,
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiTitle,
+  EuiSpacer,
+} from '@elastic/eui';
+import { EditorExample } from './editor_example';
+
+interface Props {
+  onClose: () => void;
+}
+
+export function HelpPanel(props: Props) {
+  return (
+    <EuiFlyout onClose={props.onClose} data-test-subj="helpFlyout" size="s">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>
+            <FormattedMessage id="console.helpPage.pageTitle" defaultMessage="Help" />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText>
+          <h3>
+            <FormattedMessage
+              defaultMessage="Request format"
+              id="console.helpPage.requestFormatTitle"
+            />
+          </h3>
+          <p>
+            <FormattedMessage
+              id="console.helpPage.requestFormatDescription"
+              defaultMessage="You can type one or more requests in the white editor. Console understands requests in a compact format:"
+            />
+          </p>
+          <EditorExample panel="help" />
+          <h3>
+            <FormattedMessage
+              id="console.helpPage.keyboardCommandsTitle"
+              defaultMessage="Keyboard commands"
+            />
+          </h3>
+          <EuiSpacer />
+          <dl>
+            <dt>Ctrl/Cmd + I</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.autoIndentDescription"
+                defaultMessage="Auto indent current request"
+              />
+            </dd>
+            <dt>Ctrl/Cmd + /</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.openDocumentationDescription"
+                defaultMessage="Open documentation for current request"
+              />
+            </dd>
+            <dt>Ctrl + Space</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.openAutoCompleteDescription"
+                defaultMessage="Open Auto complete (even if not typing)"
+              />
+            </dd>
+            <dt>Ctrl/Cmd + Enter</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.submitRequestDescription"
+                defaultMessage="Submit request"
+              />
+            </dd>
+            <dt>Ctrl/Cmd + Up/Down</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.jumpToPreviousNextRequestDescription"
+                defaultMessage="Jump to the previous/next request start or end."
+              />
+            </dd>
+            <dt>Ctrl/Cmd + Alt + L</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.collapseExpandCurrentScopeDescription"
+                defaultMessage="Collapse/expand current scope."
+              />
+            </dd>
+            <dt>Ctrl/Cmd + Option + 0</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.collapseAllScopesDescription"
+                defaultMessage="Collapse all scopes but the current one. Expand by adding a shift."
+              />
+            </dd>
+            <dt>Down arrow</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.switchFocusToAutoCompleteMenuDescription"
+                defaultMessage="Switch focus to auto-complete menu. Use arrows to further select a term"
+              />
+            </dd>
+            <dt>Enter/Tab</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.selectCurrentlySelectedInAutoCompleteMenuDescription"
+                defaultMessage="Select the currently selected or the top most term in auto-complete menu"
+              />
+            </dd>
+            <dt>Esc</dt>
+            <dd>
+              <FormattedMessage
+                id="console.helpPage.keyboardCommands.closeAutoCompleteMenuDescription"
+                defaultMessage="Close auto-complete menu"
+              />
+            </dd>
+          </dl>
+        </EuiText>
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+}