Skip to content

Commit

Permalink
Convert Discover open top nav to EUI flyout (#22971) (#23376)
Browse files Browse the repository at this point in the history
* move find logic to SavedObjectFinder component since savedObjectClient is no longer coupled to angular

* implement flyout open saved searches

* remove old open stuff

* add jest test for OpenSearchPanel and simplify panel title

* fix functional tests

* fix _lab_mode functional test
  • Loading branch information
nreese authored Sep 20, 2018
1 parent 2971d76 commit f750ab7
Show file tree
Hide file tree
Showing 15 changed files with 297 additions and 92 deletions.
5 changes: 1 addition & 4 deletions src/core_plugins/kibana/public/dashboard/dashboard_app.js
Original file line number Diff line number Diff line change
Expand Up @@ -372,10 +372,7 @@ app.directive('dashboardApp', function ($injector) {
$scope.$apply();
};

const isLabsEnabled = config.get('visualize:enableLabs');
const listingLimit = config.get('savedObjects:listingLimit');

showAddPanel(chrome.getSavedObjectsClient(), dashboardStateManager.addNewPanel, addNewVis, listingLimit, isLabsEnabled, visTypes);
showAddPanel(dashboardStateManager.addNewPanel, addNewVis, visTypes);
};
navActions[TopNavIds.OPTIONS] = (menuItem, navController, anchorElement) => {
showOptionsPopover({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,13 @@ exports[`render 1`] = `
size="s"
>
<EuiFlyoutBody>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="flexStart"
responsive={true}
wrap={false}
<EuiTitle
size="s"
>
<EuiFlexItem
component="div"
grow={true}
>
<EuiTitle
size="m"
>
<h2>
Add Panels
</h2>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
<h1>
Add Panels
</h1>
</EuiTitle>
<EuiTabs
expand={false}
size="m"
Expand Down Expand Up @@ -72,11 +57,11 @@ exports[`render 1`] = `
Add new Visualization
</EuiButton>
}
find={[Function]}
key="visSavedObjectFinder"
noItemsMessage="No matching visualizations found."
onChoose={[Function]}
savedObjectType="visualization"
visTypes={Object {}}
/>
</EuiFlyoutBody>
</EuiFlyout>
Expand Down
17 changes: 5 additions & 12 deletions src/core_plugins/kibana/public/dashboard/top_nav/add_panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ import { toastNotifications } from 'ui/notify';
import { SavedObjectFinder } from 'ui/saved_objects/components/saved_object_finder';

import {
EuiFlexGroup,
EuiFlexItem,
EuiFlyout,
EuiFlyoutBody,
EuiButton,
Expand Down Expand Up @@ -60,7 +58,7 @@ export class DashboardAddPanel extends React.Component {
key="visSavedObjectFinder"
callToActionButton={addNewVisBtn}
onChoose={this.onAddPanel}
find={this.props.find}
visTypes={this.props.visTypes}
noItemsMessage="No matching visualizations found."
savedObjectType="visualization"
/>
Expand All @@ -74,7 +72,6 @@ export class DashboardAddPanel extends React.Component {
<SavedObjectFinder
key="searchSavedObjectFinder"
onChoose={this.onAddPanel}
find={this.props.find}
noItemsMessage="No matching saved searches found."
savedObjectType="search"
/>
Expand Down Expand Up @@ -133,13 +130,9 @@ export class DashboardAddPanel extends React.Component {
>
<EuiFlyoutBody>

<EuiFlexGroup>
<EuiFlexItem>
<EuiTitle>
<h2>Add Panels</h2>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
<EuiTitle size="s">
<h1>Add Panels</h1>
</EuiTitle>

<EuiTabs>
{this.renderTabs()}
Expand All @@ -157,7 +150,7 @@ export class DashboardAddPanel extends React.Component {

DashboardAddPanel.propTypes = {
onClose: PropTypes.func.isRequired,
find: PropTypes.func.isRequired,
visTypes: PropTypes.object.isRequired,
addNewPanel: PropTypes.func.isRequired,
addNewVis: PropTypes.func.isRequired,
};
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ beforeEach(() => {
test('render', () => {
const component = shallow(<DashboardAddPanel
onClose={onClose}
find={() => {}}
visTypes={{}}
addNewPanel={() => {}}
addNewVis={() => {}}
/>);
Expand Down
24 changes: 2 additions & 22 deletions src/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import ReactDOM from 'react-dom';

let isOpen = false;

export function showAddPanel(savedObjectsClient, addNewPanel, addNewVis, listingLimit, isLabsEnabled, visTypes) {
export function showAddPanel(addNewPanel, addNewVis, visTypes) {
if (isOpen) {
return;
}
Expand All @@ -35,26 +35,6 @@ export function showAddPanel(savedObjectsClient, addNewPanel, addNewVis, listing
document.body.removeChild(container);
isOpen = false;
};
const find = async (type, search) => {
const resp = await savedObjectsClient.find({
type: type,
fields: ['title', 'visState'],
search: search ? `${search}*` : undefined,
page: 1,
perPage: listingLimit,
searchFields: ['title^3', 'description']
});

if (type === 'visualization' && !isLabsEnabled) {
resp.savedObjects = resp.savedObjects.filter(savedObject => {
const typeName = JSON.parse(savedObject.attributes.visState).type;
const visType = visTypes.byName[typeName];
return visType.stage !== 'lab';
});
}

return resp;
};

const addNewVisWithCleanup = () => {
onClose();
Expand All @@ -65,7 +45,7 @@ export function showAddPanel(savedObjectsClient, addNewPanel, addNewVis, listing
const element = (
<DashboardAddPanel
onClose={onClose}
find={find}
visTypes={visTypes}
addNewPanel={addNewPanel}
addNewVis={addNewVisWithCleanup}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import { getUnhashableStatesProvider } from 'ui/state_management/state_hashing';
import { Inspector } from 'ui/inspector';
import { RequestAdapter } from 'ui/inspector/adapters';
import { getRequestInspectorStats, getResponseInspectorStats } from 'ui/courier/utils/courier_inspector_utils';
import { showOpenSearchPanel } from '../top_nav/show_open_search_panel';
import { tabifyAggResponse } from 'ui/agg_response/tabify';

const app = uiModules.get('apps/discover', [
Expand Down Expand Up @@ -198,8 +199,14 @@ function discoverController(
}, {
key: 'open',
description: 'Open Saved Search',
template: require('plugins/kibana/discover/partials/load_search.html'),
testId: 'discoverOpenButton',
run: () => {
showOpenSearchPanel({
makeUrl: (searchId) => {
return kbnUrl.eval('#/discover/{{id}}', { id: searchId });
}
});
}
}, {
key: 'share',
description: 'Share Search',
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`render 1`] = `
<EuiFlyout
closeButtonAriaLabel="Closes this dialog"
data-test-subj="loadSearchForm"
hideCloseButton={false}
maxWidth={false}
onClose={[Function]}
ownFocus={true}
size="m"
>
<EuiFlyoutBody>
<EuiTitle
size="s"
>
<h1>
Open Search
</h1>
</EuiTitle>
<EuiSpacer
size="m"
/>
<SavedObjectFinder
callToActionButton={
<EuiButton
color="primary"
fill={false}
href="#/management/kibana/objects?_a=(tab:search)"
iconSide="left"
onClick={[Function]}
type="button"
>
Manage searches
</EuiButton>
}
makeUrl={[Function]}
noItemsMessage="No matching searches found."
onChoose={[Function]}
savedObjectType="search"
/>
</EuiFlyoutBody>
</EuiFlyout>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*
* 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 PropTypes from 'prop-types';
import { SavedObjectFinder } from 'ui/saved_objects/components/saved_object_finder';
import rison from 'rison-node';

import {
EuiSpacer,
EuiFlyout,
EuiFlyoutBody,
EuiTitle,
EuiButton,
} from '@elastic/eui';

const SEARCH_OBJECT_TYPE = 'search';

export class OpenSearchPanel extends React.Component {

renderMangageSearchesButton() {
return (
<EuiButton
onClick={this.props.onClose}
href={`#/management/kibana/objects?_a=${rison.encode({ tab: SEARCH_OBJECT_TYPE })}`}
>
Manage searches
</EuiButton>
);
}

render() {
return (
<EuiFlyout
ownFocus
onClose={this.props.onClose}
data-test-subj="loadSearchForm"
>
<EuiFlyoutBody>

<EuiTitle size="s">
<h1>Open Search</h1>
</EuiTitle>

<EuiSpacer size="m" />

<SavedObjectFinder
noItemsMessage="No matching searches found."
savedObjectType={SEARCH_OBJECT_TYPE}
makeUrl={this.props.makeUrl}
onChoose={this.props.onClose}
callToActionButton={this.renderMangageSearchesButton()}
/>

</EuiFlyoutBody>
</EuiFlyout>
);
}
}

OpenSearchPanel.propTypes = {
onClose: PropTypes.func.isRequired,
makeUrl: PropTypes.func.isRequired,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
* 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 { shallow } from 'enzyme';

import {
OpenSearchPanel,
} from './open_search_panel';

test('render', () => {
const component = shallow(<OpenSearchPanel
onClose={() => {}}
makeUrl={() => {}}
/>);
expect(component).toMatchSnapshot();
});
Loading

0 comments on commit f750ab7

Please sign in to comment.