Convert Discover open top nav to EUI flyout

src/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -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({

src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap

@@ -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"
@@ -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>

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.js

@@ -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,
@@ -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"
  />
@@ -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"
  />
@@ -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()}
@@ -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,
 };

src/core_plugins/kibana/public/dashboard/top_nav/add_panel.test.js

@@ -40,7 +40,7 @@ beforeEach(() => {
 test('render', () => {
  const component = shallow(<DashboardAddPanel
  onClose={onClose}
- find={() => {}}
+ visTypes={{}}
  addNewPanel={() => {}}
  addNewVis={() => {}}
  />);

src/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js

@@ -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;
  }
@@ -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();
@@ -65,7 +45,7 @@ export function showAddPanel(savedObjectsClient, addNewPanel, addNewVis, listing
  const element = (
  <DashboardAddPanel
  onClose={onClose}
- find={find}
+ visTypes={visTypes}
  addNewPanel={addNewPanel}
  addNewVis={addNewVisWithCleanup}
  />

src/core_plugins/kibana/public/discover/controllers/discover.js

@@ -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', [
@@ -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',

src/core_plugins/kibana/public/discover/top_nav/__snapshots__/open_search_panel.test.js.snap

@@ -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>
+`;

src/core_plugins/kibana/public/discover/top_nav/open_search_panel.js

@@ -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,
+};

src/core_plugins/kibana/public/discover/top_nav/open_search_panel.test.js

@@ -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();
+});