From db3605e8ced18f4f833987760ead9ad4da043aa5 Mon Sep 17 00:00:00 2001 From: Liza Katz Date: Tue, 19 Mar 2019 18:15:51 +0200 Subject: [PATCH 1/6] Removed old dropdown code from dev tools consle --- .../core_plugins/console/public/console.js | 1 + .../core_plugins/console/public/index.html | 43 +---- .../console/public/src/console_menu.js | 157 ++++++++++++++++++ .../src/controllers/sense_controller.js | 3 + .../src/directives/console_menu_directive.js | 34 ++++ .../core_plugins/console/public/src/input.js | 32 ---- 6 files changed, 202 insertions(+), 68 deletions(-) create mode 100644 src/legacy/core_plugins/console/public/src/console_menu.js create mode 100644 src/legacy/core_plugins/console/public/src/directives/console_menu_directive.js diff --git a/src/legacy/core_plugins/console/public/console.js b/src/legacy/core_plugins/console/public/console.js index c16458c878d7d..461423ce4ebbb 100644 --- a/src/legacy/core_plugins/console/public/console.js +++ b/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', { diff --git a/src/legacy/core_plugins/console/public/index.html b/src/legacy/core_plugins/console/public/index.html index 30ebcf70b33be..71e7d6a044249 100644 --- a/src/legacy/core_plugins/console/public/index.html +++ b/src/legacy/core_plugins/console/public/index.html @@ -11,42 +11,13 @@ - - - - - + +
GET _search diff --git a/src/legacy/core_plugins/console/public/src/console_menu.js b/src/legacy/core_plugins/console/public/src/console_menu.js new file mode 100644 index 0000000000000..3ab05556f643e --- /dev/null +++ b/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 = ( + + } + /> + ); + + const items = [ + ( + { this.closePopover(); this.copyAsCurl(); }} + > + + + ), ( + { this.openDocs(); }} + > + + + ), ( + { this.closePopover(); this.props.autoIndent(event); }} + > + + + ) + ]; + + return ( + + + + + + ); + } +} + +ConsoleMenu.propTypes = { + getCurl: PropTypes.func.isRequired, + openDocumentation: PropTypes.func.isRequired, + getDocumentation: PropTypes.func.isRequired, + autoIndent: PropTypes.func.isRequired, +}; diff --git a/src/legacy/core_plugins/console/public/src/controllers/sense_controller.js b/src/legacy/core_plugins/console/public/src/controllers/sense_controller.js index 9f1c9be68f9cc..a77711dd74f87 100644 --- a/src/legacy/core_plugins/console/public/src/controllers/sense_controller.js +++ b/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(); + + // espose method for React Consumption + $scope.getRequestsAsCURL = input.getRequestsAsCURL; }); $scope.getDocumentation = () => { input.getRequestsInRange(function (requests) { diff --git a/src/legacy/core_plugins/console/public/src/directives/console_menu_directive.js b/src/legacy/core_plugins/console/public/src/directives/console_menu_directive.js new file mode 100644 index 0000000000000..bc37c8fdc474a --- /dev/null +++ b/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/timelion', ['react']); + +import { ConsoleMenu } from '../console_menu'; + +module.directive('consoleMenu', function (reactDirective) { + return reactDirective( + wrapInI18nContext(ConsoleMenu), + undefined, + { restrict: 'E' } + ); +}); diff --git a/src/legacy/core_plugins/console/public/src/input.js b/src/legacy/core_plugins/console/public/src/input.js index 68b54ab9ecda1..64cb27b51e7f7 100644 --- a/src/legacy/core_plugins/console/public/src/input.js +++ b/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 = $(`