[7.x] New platform dropdown (#33520)

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

@@ -32,6 +32,7 @@ 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');
 
 
 uiRoutes.when('/dev_tools/console', {

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

@@ -11,42 +11,13 @@
             <i class="fa fa-play"></i>
           </button>
         </kbn-tooltip>
-        <span dropdown>
-          <button
-            id="consoleRequestOptions"
-            class="conApp__editorActionButton"
-            dropdown-toggle
-            ng-click="getDocumentation()"
-            aria-label="{{:: 'console.requestOptionsButtonAriaLabel' | i18n: { defaultMessage: 'Request options' } }}"
-          >
-            <span class="kuiIcon fa-wrench"></span>
-          </button>
-
-          <ul
-            class="dropdown-menu"
-            role="menu"
-            aria-labelledby="consoleRequestOptions"
-          >
-            <li role="menuitem">
-              <button
-                id="ConCopyAsCurl"
-                i18n-id="console.requestOptions.copyAsUrlButtonLabel"
-                i18n-default-message="Copy as cURL"></button>
-            </li>
-            <li role="menuitem" ng-if="documentation">
-              <button
-                ng-click="openDocumentation(documentation)"
-                i18n-id="console.requestOptions.openDocumentationButtonLabel"
-                i18n-default-message="Open documentation"></button>
-            </li>
-            <li role="menuitem">
-              <button
-                ng-click="autoIndent($event)"
-                i18n-id="console.requestOptions.autoIndentButtonLabel"
-                i18n-default-message="Auto indent"></button>
-            </li>
-          </ul>
-        </span>
+        <console-menu
+          auto-indent="autoIndent"
+          get-documentation="getDocumentation"
+          open-documentation="openDocumentation"
+          get-curl="getRequestsAsCURL"
+        >
+        </console-menu>
       </div>
 
       <div class="conApp__editorContent" id="ConAppEditor" data-test-subj="request-editor">GET _search

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

@@ -0,0 +1,157 @@
+/*
+ * 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 PropTypes from 'prop-types';
+
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiButtonIcon,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiPopover,
+} from '@elastic/eui';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export class ConsoleMenu extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      curlCode: '',
+      isPopoverOpen: false,
+    };
+  }
+
+  mouseEnter = () => {
+    if (this.state.isPopoverOpen) return;
+    this.props.getCurl(text => {
+      this.setState({ curlCode: text });
+    });
+  }
+
+  copyAsCurl() {
+    this.copyText(this.state.curlCode);
+  }
+
+  copyText(text) {
+    const textField = document.createElement('textarea');
+    textField.innerText = text;
+    document.body.appendChild(textField);
+    textField.select();
+    document.execCommand('copy');
+    textField.remove();
+  }
+
+  onButtonClick = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  openDocs = () => {
+    this.closePopover();
+    this.props.getDocumentation();
+    this.props.openDocumentation();
+  }
+
+  render() {
+    const button = (
+      <EuiButtonIcon
+        iconType="wrench"
+        onClick={this.onButtonClick}
+        aria-label={
+          <FormattedMessage
+            id="console.requestOptionsButtonAriaLabel"
+            defaultMessage="Request options"
+          />
+        }
+      />
+    );
+
+    const items = [
+      (
+        <EuiContextMenuItem
+          key="Copy as cURL"
+          id="ConCopyAsCurl"
+          disabled={!document.queryCommandSupported('copy')}
+          onClick={() => { this.closePopover(); this.copyAsCurl(); }}
+        >
+          <FormattedMessage
+            id="console.requestOptions.copyAsUrlButtonLabel"
+            defaultMessage="Copy as cURL"
+          />
+        </EuiContextMenuItem>
+      ), (
+        <EuiContextMenuItem
+          key="Open documentation"
+          onClick={() => { this.openDocs(); }}
+        >
+          <FormattedMessage
+            id="console.requestOptions.openDocumentationButtonLabel"
+            defaultMessage="Open documentation"
+          />
+        </EuiContextMenuItem>
+      ), (
+        <EuiContextMenuItem
+          key="Auto indent"
+          onClick={(event) => { this.closePopover(); this.props.autoIndent(event); }}
+        >
+          <FormattedMessage
+            id="console.requestOptions.autoIndentButtonLabel"
+            defaultMessage="Auto indent"
+          />
+        </EuiContextMenuItem>
+      )
+    ];
+
+    return (
+      <span onMouseEnter={this.mouseEnter}>
+        <EuiPopover
+          id="contextMenu"
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover}
+          panelPaddingSize="none"
+          anchorPosition="downLeft"
+        >
+          <EuiContextMenuPanel
+            items={items}
+          />
+        </EuiPopover>
+      </span>
+    );
+  }
+}
+
+ConsoleMenu.propTypes = {
+  getCurl: PropTypes.func.isRequired,
+  openDocumentation: PropTypes.func.isRequired,
+  getDocumentation: PropTypes.func.isRequired,
+  autoIndent: PropTypes.func.isRequired,
+};

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

@@ -53,6 +53,9 @@ module.controller('SenseController', function SenseController(Private, $scope, $
       $scope.getDocumentation();
     });
     $scope.getDocumentation();
+
+    // expose method for React Consumption
+    $scope.getRequestsAsCURL = input.getRequestsAsCURL;
   });
   $scope.getDocumentation = () => {
     input.getRequestsInRange(function (requests) {

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

@@ -0,0 +1,34 @@
+/*
+ * 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 'ngreact';
+
+import { wrapInI18nContext } from 'ui/i18n';
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/sense', ['react']);
+
+import { ConsoleMenu } from '../console_menu';
+
+module.directive('consoleMenu', function (reactDirective) {
+  return reactDirective(
+    wrapInI18nContext(ConsoleMenu),
+    undefined,
+    { restrict: 'E' }
+  );
+});

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

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-const $ = require('jquery');
 require('brace');
 require('brace/ext/searchbox');
 import  Autocomplete from './autocomplete';
@@ -66,37 +65,6 @@ export function initializeInput($el, $actionsEl, $copyAsCurlEl, output, openDocu
     }
   });
 
-
-  /**
-   * COPY AS CURL
-   */
-  (function setupClipboard() {
-    function copyText(text) {
-      const node = $(`<textarea style="height:1px"></textarea`)
-        .val(text)
-        .appendTo(document.body)
-        .select();
-      document.execCommand('copy');
-      node.remove();
-    }
-
-    if (!document.queryCommandSupported('copy')) {
-      $copyAsCurlEl.hide();
-      return;
-    }
-
-    $copyAsCurlEl.click(() => {
-      copyText($copyAsCurlEl.attr('data-clipboard-text'));
-    });
-
-    input.$actions.on('mouseenter', function () {
-      if ($(this).hasClass('open')) return;
-      input.getRequestsAsCURL(text => {
-        $copyAsCurlEl.attr('data-clipboard-text', text);
-      });
-    });
-  }());
-
   /**
    * Setup the "send" shortcut
    */