EUIfy Console - partially de-angularize and move custom views out of top_nav

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

@@ -1,6 +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="historyDirty"></sense-history>
+  <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>
@@ -34,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/components/help_example.tsx → src/legacy/core_plugins/console/public/src/components/editor_example.tsx

@@ -23,9 +23,16 @@ import exampleText from 'raw-loader!./helpExample.txt';
 import $ from 'jquery';
 // @ts-ignore
 import SenseEditor from '../sense_editor/editor';
-export function EditorExample() {
+
+interface EditorExampleProps {
+  panel: string;
+}
+
+export function EditorExample(props: EditorExampleProps) {
+  const elemId = `help-example-${props.panel}`;
+
   useEffect(() => {
-    const el = $('#help-example');
+    const el = $(`#${elemId}`);
     el.text(exampleText.trim());
     const editor = new SenseEditor(el);
     editor.setReadOnly(true);
@@ -36,5 +43,5 @@ export function EditorExample() {
     };
   }, []);
 
-  return <div id="help-example" className="conHelp__example" />;
+  return <div id={elemId} className="conHelp__example" />;
 }

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

@@ -27,7 +27,7 @@ import {
   EuiTitle,
   EuiSpacer,
 } from '@elastic/eui';
-import { EditorExample } from './help_example';
+import { EditorExample } from './editor_example';
 
 interface Props {
   onClose: () => void;
@@ -57,7 +57,7 @@ export function HelpPanel(props: Props) {
               defaultMessage="You can type one or more requests in the white editor. Console understands requests in a compact format:"
             />
           </p>
-          <EditorExample />
+          <EditorExample panel="help" />
           <h3>
             <FormattedMessage
               id="console.helpPage.keyboardCommandsTitle"

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

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -27,14 +27,12 @@ import {
   EuiFieldNumber,
   EuiFormRow,
   EuiCheckboxGroup,
-  EuiFlexItem,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiSpacer,
   EuiSwitch,
 } from '@elastic/eui';
 import { DevToolsSettings } from './dev_tools_settings';
@@ -95,12 +93,6 @@ export function DevToolsSettingsModal(props: Props) {
     }
   };
 
-  useEffect(() => {
-    return () => {
-      // TODO
-    };
-  }, []);
-
   function saveSettings() {
     if (isLoading) {
       return;
@@ -123,11 +115,7 @@ export function DevToolsSettingsModal(props: Props) {
 
   return (
     <EuiOverlayMask>
-      <EuiModal
-        data-test-subj="devToolsSettingsModal"
-        className="devToolsSettingsModal"
-        onClose={props.onClose}
-      >
+      <EuiModal data-test-subj="devToolsSettingsModal" onClose={props.onClose}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
             <FormattedMessage
@@ -151,7 +139,7 @@ export function DevToolsSettingsModal(props: Props) {
               data-test-subj="setting-font-size-input"
               value={fontSize}
               onChange={e => {
-                setFontSize((e.target.value as unknown) as number);
+                setFontSize(parseInt(e.target.value, 10));
               }}
             />
           </EuiFormRow>
@@ -237,19 +225,16 @@ export function DevToolsSettingsModal(props: Props) {
             />
           </EuiFormRow>
 
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              data-test-subj="autocompletePolling"
-              id="autocompletePolling"
-              onClick={props.refreshAutocompleteSettings}
-            >
-              <FormattedMessage
-                defaultMessage="Refresh autocomplete suggestions"
-                id="console.settingsPage.refreshButtonLabel"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiSpacer />
+          <EuiButton
+            data-test-subj="autocompletePolling"
+            id="autocompletePolling"
+            onClick={props.refreshAutocompleteSettings}
+          >
+            <FormattedMessage
+              defaultMessage="Refresh autocomplete suggestions"
+              id="console.settingsPage.refreshButtonLabel"
+            />
+          </EuiButton>
         </EuiModalBody>
 
         <EuiModalFooter>
@@ -262,6 +247,7 @@ export function DevToolsSettingsModal(props: Props) {
             data-test-subj="settings-save-button"
             onClick={saveSettings}
             isLoading={isLoading}
+            disabled={isLoading}
           >
             <FormattedMessage id="console.settingsPage.saveButtonLabel" defaultMessage="Save" />
           </EuiButton>

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

@@ -30,7 +30,7 @@ import {
   EuiText,
   EuiFlyoutFooter,
 } from '@elastic/eui';
-import { EditorExample } from './help_example';
+import { EditorExample } from './editor_example';
 
 interface Props {
   onClose: () => void;
@@ -72,7 +72,7 @@ export function WelcomePanel(props: Props) {
               defaultMessage="Console understands requests in a compact format, similar to cURL:"
             />
           </p>
-          <EditorExample />
+          <EditorExample panel="welcome" />
           <p>
             <FormattedMessage
               id="console.welcomePage.supportedRequestFormatDescription"

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

@@ -40,16 +40,19 @@ module.run(function ($rootScope) {
   };
 });
 
-function showWelcomeMessageIfNeeded() {
-  if (true || storage.get('version_welcome_shown') !== '@@SENSE_REVISION') {
-    welcomeShowPanel();
+function showWelcomeMessageIfNeeded($scope) {
+  if (storage.get('version_welcome_shown') !== '@@SENSE_REVISION') {
+    const closeModal = welcomeShowPanel();
+    $scope.$on('$destroy', () => {
+      closeModal();
+    });
   }
 }
 
-module.controller('SenseController', function SenseController(Private, $scope, $timeout, $location, kbnUiAceKeyboardModeService) {
+module.controller('SenseController', function SenseController($scope, $timeout, $location, kbnUiAceKeyboardModeService) {
   docTitle.change('Console');
 
-  showWelcomeMessageIfNeeded();
+  showWelcomeMessageIfNeeded($scope);
 
   // Since we pass this callback via reactDirective into a react component, which has the function defined as required
   // in it's prop types, we should set this initially (before it's set in the $timeout below). Without this line
@@ -103,7 +106,7 @@ module.controller('SenseController', function SenseController(Private, $scope, $
     $scope.showHistory = !$scope.showHistory;
   };
 
-  $scope.topNavMenu = getTopNavConfig($scope.toggleHistory);
+  $scope.topNavMenu = getTopNavConfig($scope, $scope.toggleHistory);
 
   $scope.openDocumentation = () => {
     if (!$scope.documentation) {
@@ -115,7 +118,9 @@ module.controller('SenseController', function SenseController(Private, $scope, $
   $scope.sendSelected = () => {
     input.focus();
     input.sendCurrentRequestToES(() => {
-      $scope.historyDirty = new Date().getTime();
+      // History watches this value and will re-render itself when it changes, so that
+      // the list of requests stays up-to-date as new requests are sent.
+      $scope.lastRequestTimestamp = new Date().getTime();
     });
     return false;
   };

src/legacy/core_plugins/console/public/src/helpers/get_top_nav.ts

@@ -19,12 +19,13 @@
 
 import { i18n } from '@kbn/i18n';
 
+import { IScope } from 'angular';
 import { showSettingsModal } from './settings_show_modal';
 
 // help
-import { showHelpPanel } from '../components/help_show_panel';
+import { showHelpPanel } from './help_show_panel';
 
-export function getTopNavConfig(toggleHistory: () => void) {
+export function getTopNavConfig($scope: IScope, toggleHistory: () => {}) {
   return [
     {
       key: 'history',
@@ -61,7 +62,10 @@ export function getTopNavConfig(toggleHistory: () => void) {
         defaultMessage: 'Help',
       }),
       run: () => {
-        showHelpPanel();
+        const closeModal = showHelpPanel();
+        $scope.$on('$destroy', () => {
+          closeModal();
+        });
       },
       testId: 'consoleHelpButton',
     },

src/legacy/core_plugins/console/public/src/components/help_show_panel.tsx → src/legacy/core_plugins/console/public/src/helpers/help_show_panel.tsx

@@ -20,28 +20,29 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nContext } from 'ui/i18n';
-import { HelpPanel } from './help_panel';
+import { HelpPanel } from '../components/help_panel';
 
 let isOpen = false;
 
-export function showHelpPanel() {
-  if (isOpen) {
-    return;
-  }
-
-  isOpen = true;
-  const container = document.createElement('div');
+export function showHelpPanel(): () => void {
   const onClose = () => {
+    if (!container) return;
     ReactDOM.unmountComponentAtNode(container);
-    document.body.removeChild(container);
+    container.innerHTML = '';
     isOpen = false;
   };
 
-  document.body.appendChild(container);
-  const element = (
-    <I18nContext>
-      <HelpPanel onClose={onClose} />
-    </I18nContext>
-  );
-  ReactDOM.render(element, container);
+  const container = document.getElementById('consoleHelpPanel');
+
+  if (container && !isOpen) {
+    isOpen = true;
+    const element = (
+      <I18nContext>
+        <HelpPanel onClose={onClose} />
+      </I18nContext>
+    );
+    ReactDOM.render(element, container);
+  }
+
+  return onClose;
 }

src/legacy/core_plugins/console/public/src/helpers/settings_show_modal.tsx

@@ -29,16 +29,17 @@ import mappings from '../mappings';
 import { getCurrentSettings, updateSettings } from '../settings';
 
 export function showSettingsModal() {
-  const container = document.createElement('div');
+  const container = document.getElementById('consoleSettingsModal');
   const curSettings = getCurrentSettings();
 
   const refreshAutocompleteSettings = () => {
     mappings.retrieveAutoCompleteInfo();
   };
 
   const closeModal = () => {
+    if (!container) return;
     ReactDOM.unmountComponentAtNode(container);
-    document.body.removeChild(container);
+    container.innerHTML = '';
   };
 
   const getAutocompleteDiff = (newSettings: DevToolsSettings, prevSettings: DevToolsSettings) => {
@@ -71,7 +72,6 @@ export function showSettingsModal() {
     closeModal();
   };
 
-  document.body.appendChild(container);
   const element = (
     <I18nContext>
       <DevToolsSettingsModal

src/legacy/core_plugins/console/public/src/helpers/welcome_show_panel.tsx

@@ -26,16 +26,11 @@ import storage from '../storage';
 
 let isOpen = false;
 
-export function welcomeShowPanel() {
-  if (isOpen) {
-    return;
-  }
-
-  isOpen = true;
-  const container = document.createElement('div');
+export function welcomeShowPanel(): () => void {
   const onClose = () => {
+    if (!container) return;
     ReactDOM.unmountComponentAtNode(container);
-    document.body.removeChild(container);
+    container.innerHTML = '';
     isOpen = false;
   };
 
@@ -44,11 +39,16 @@ export function welcomeShowPanel() {
     onClose();
   };
 
-  document.body.appendChild(container);
-  const element = (
-    <I18nContext>
-      <WelcomePanel onClose={onClose} onDismiss={onDismiss} />
-    </I18nContext>
-  );
-  ReactDOM.render(element, container);
+  const container = document.getElementById('consoleWelcomePanel');
+  if (container && !isOpen) {
+    isOpen = true;
+    const element = (
+      <I18nContext>
+        <WelcomePanel onClose={onClose} onDismiss={onDismiss} />
+      </I18nContext>
+    );
+    ReactDOM.render(element, container);
+  }
+
+  return onClose;
 }