Skip to content

Commit

Permalink
New platform dropdown (elastic#33520)
Browse files Browse the repository at this point in the history
* Removed old dropdown code from dev tools consle

* Removed old dropdown from vega tools

* Deleted dropdown directives from angular bootstrap

* Deleted ui.bootstrap.dropdown test (irrelevant, since directive was deleted)
  • Loading branch information
lizozom authored and Liza Katz committed Mar 21, 2019
1 parent a0a1b59 commit 3c383cd
Show file tree
Hide file tree
Showing 14 changed files with 494 additions and 338 deletions.
1 change: 1 addition & 0 deletions src/legacy/core_plugins/console/public/console.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down
43 changes: 7 additions & 36 deletions src/legacy/core_plugins/console/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
157 changes: 157 additions & 0 deletions src/legacy/core_plugins/console/public/src/console_menu.js
Original file line number Diff line number Diff line change
@@ -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,
};
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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' }
);
});
32 changes: 0 additions & 32 deletions src/legacy/core_plugins/console/public/src/input.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
* under the License.
*/

const $ = require('jquery');
require('brace');
require('brace/ext/searchbox');
import Autocomplete from './autocomplete';
Expand Down Expand Up @@ -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
*/
Expand Down
Loading

0 comments on commit 3c383cd

Please sign in to comment.