Use embeddable registry in add panel

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

@@ -478,7 +478,7 @@ app.directive('dashboardApp', function ($injector) {
           showNewVisModal(visTypes, { editorParams: [DashboardConstants.ADD_VISUALIZATION_TO_DASHBOARD_MODE_PARAM] });
         };
 
-        showAddPanel(dashboardStateManager.addNewPanel, addNewVis, visTypes);
+        showAddPanel(dashboardStateManager.addNewPanel, addNewVis, embeddableFactories);
       };
       navActions[TopNavIds.OPTIONS] = (menuItem, navController, anchorElement) => {
         showOptionsPopover({

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

@@ -23,39 +23,16 @@ exports[`render 1`] = `
         />
       </h1>
     </EuiTitle>
-    <EuiTabs
-      expand={false}
-      size="m"
-    >
-      <EuiTab
-        data-test-subj="addVisualizationTab"
-        disabled={false}
-        isSelected={true}
-        key="vis"
-        onClick={[Function]}
-      >
-        Visualization
-      </EuiTab>
-      <EuiTab
-        data-test-subj="addSavedSearchTab"
-        disabled={false}
-        isSelected={false}
-        key="search"
-        onClick={[Function]}
-      >
-        Saved Search
-      </EuiTab>
-    </EuiTabs>
     <EuiSpacer
       size="s"
     />
     <SavedObjectFinder
       callToActionButton={
-        <EuiButton
+        <EuiButtonEmpty
           color="primary"
           data-test-subj="addNewSavedObjectLink"
-          fill={false}
           iconSide="left"
+          iconType="plusInCircle"
           onClick={[Function]}
           type="button"
         >
@@ -64,13 +41,12 @@ exports[`render 1`] = `
             id="kbn.dashboard.topNav.addPanel.addNewVisualizationButtonLabel"
             values={Object {}}
           />
-        </EuiButton>
+        </EuiButtonEmpty>
       }
-      key="visSavedObjectFinder"
-      noItemsMessage="No matching visualizations found."
+      noItemsMessage="No matching objects found."
       onChoose={[Function]}
-      savedObjectType="visualization"
-      visTypes={Object {}}
+      savedObjectMetaData={Array []}
+      showFilter={true}
     />
   </EuiFlyoutBody>
 </EuiFlyout>

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

@@ -19,109 +19,21 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
 import { toastNotifications } from 'ui/notify';
 import { SavedObjectFinder } from 'ui/saved_objects/components/saved_object_finder';
 
 import {
   EuiFlyout,
   EuiFlyoutBody,
-  EuiButton,
-  EuiTabs,
-  EuiTab,
+  EuiButtonEmpty,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 
-const VIS_TAB_ID = 'vis';
-const SAVED_SEARCH_TAB_ID = 'search';
-
-class DashboardAddPanelUi extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const addNewVisBtn = (
-      <EuiButton
-        onClick={this.props.addNewVis}
-        data-test-subj="addNewSavedObjectLink"
-      >
-        <FormattedMessage
-          id="kbn.dashboard.topNav.addPanel.addNewVisualizationButtonLabel"
-          defaultMessage="Add new Visualization"
-        />
-      </EuiButton>
-    );
-
-    const tabs = [{
-      id: VIS_TAB_ID,
-      name: props.intl.formatMessage({
-        id: 'kbn.dashboard.topNav.addPanel.visualizationTabName',
-        defaultMessage: 'Visualization',
-      }),
-      dataTestSubj: 'addVisualizationTab',
-      toastDataTestSubj: 'addVisualizationToDashboardSuccess',
-      savedObjectFinder: (
-        <SavedObjectFinder
-          key="visSavedObjectFinder"
-          callToActionButton={addNewVisBtn}
-          onChoose={this.onAddPanel}
-          visTypes={this.props.visTypes}
-          noItemsMessage={props.intl.formatMessage({
-            id: 'kbn.dashboard.topNav.addPanel.visSavedObjectFinder.noMatchingVisualizationsMessage',
-            defaultMessage: 'No matching visualizations found.',
-          })}
-          savedObjectType="visualization"
-        />
-      )
-    }, {
-      id: SAVED_SEARCH_TAB_ID,
-      name: props.intl.formatMessage({
-        id: 'kbn.dashboard.topNav.addPanel.savedSearchTabName',
-        defaultMessage: 'Saved Search',
-      }),
-      dataTestSubj: 'addSavedSearchTab',
-      toastDataTestSubj: 'addSavedSearchToDashboardSuccess',
-      savedObjectFinder: (
-        <SavedObjectFinder
-          key="searchSavedObjectFinder"
-          onChoose={this.onAddPanel}
-          noItemsMessage={props.intl.formatMessage({
-            id: 'kbn.dashboard.topNav.addPanel.searchSavedObjectFinder.noMatchingVisualizationsMessage',
-            defaultMessage: 'No matching saved searches found.',
-          })}
-          savedObjectType="search"
-        />
-      )
-    }];
-
-    this.state = {
-      tabs: tabs,
-      selectedTab: tabs[0],
-    };
-  }
-
-  onSelectedTabChanged = tab => {
-    this.setState({
-      selectedTab: tab,
-    });
-  }
-
-  renderTabs() {
-    return this.state.tabs.map((tab) => {
-      return (
-        <EuiTab
-          onClick={() => this.onSelectedTabChanged(tab)}
-          isSelected={tab.id === this.state.selectedTab.id}
-          key={tab.id}
-          data-test-subj={tab.dataTestSubj}
-        >
-          {tab.name}
-        </EuiTab>
-      );
-    });
-  }
-
-  onAddPanel = (id, type) => {
+export class DashboardAddPanel extends React.Component {
+  onAddPanel = (id, type, name) => {
     this.props.addNewPanel(id, type);
 
     // To avoid the clutter of having toast messages cover flyout
@@ -131,25 +43,37 @@ class DashboardAddPanelUi extends React.Component {
     }
 
     this.lastToast = toastNotifications.addSuccess({
-      title: this.props.intl.formatMessage({
-        id: 'kbn.dashboard.topNav.addPanel.selectedTabAddedToDashboardSuccessMessageTitle',
-        defaultMessage: '{selectedTabName} was added to your dashboard',
-      }, {
-        selectedTabName: this.state.selectedTab.name,
-      }),
-      'data-test-subj': this.state.selectedTab.toastDataTestSubj,
+      title: i18n.translate(
+        'kbn.dashboard.topNav.addPanel.savedObjectAddedToDashboardSuccessMessageTitle',
+        {
+          defaultMessage: '{savedObjectName} was added to your dashboard',
+          values: {
+            savedObjectName: name,
+          },
+        }
+      ),
+      'data-test-subj': 'addObjectToDashboardSuccess',
     });
-  }
+  };
 
   render() {
-    return (
-      <EuiFlyout
-        ownFocus
-        onClose={this.props.onClose}
-        data-test-subj="dashboardAddPanel"
+    const addNewVisBtn = (
+      <EuiButtonEmpty
+        iconSide="left"
+        iconType="plusInCircle"
+        onClick={this.props.addNewVis}
+        data-test-subj="addNewSavedObjectLink"
       >
-        <EuiFlyoutBody>
+        <FormattedMessage
+          id="kbn.dashboard.topNav.addPanel.addNewVisualizationButtonLabel"
+          defaultMessage="Add new Visualization"
+        />
+      </EuiButtonEmpty>
+    );
 
+    return (
+      <EuiFlyout ownFocus onClose={this.props.onClose} data-test-subj="dashboardAddPanel">
+        <EuiFlyoutBody>
           <EuiTitle size="s">
             <h1>
               <FormattedMessage
@@ -159,25 +83,30 @@ class DashboardAddPanelUi extends React.Component {
             </h1>
           </EuiTitle>
 
-          <EuiTabs>
-            {this.renderTabs()}
-          </EuiTabs>
-
           <EuiSpacer size="s" />
 
-          {this.state.selectedTab.savedObjectFinder}
-
+          <SavedObjectFinder
+            onChoose={this.onAddPanel}
+            savedObjectMetaData={this.props.embeddableFactories
+              .filter(embeddableFactory => Boolean(embeddableFactory.savedObjectMetaData))
+              .map(({ savedObjectMetaData }) => savedObjectMetaData)}
+            showFilter={true}
+            callToActionButton={addNewVisBtn}
+            noItemsMessage={i18n.translate(
+              'kbn.dashboard.topNav.addPanel.noMatchingObjectsMessage',
+              {
+                defaultMessage: 'No matching objects found.',
+              }
+            )}
+          />
         </EuiFlyoutBody>
       </EuiFlyout>
     );
   }
 }
 
-DashboardAddPanelUi.propTypes = {
+DashboardAddPanel.propTypes = {
   onClose: PropTypes.func.isRequired,
-  visTypes: PropTypes.object.isRequired,
   addNewPanel: PropTypes.func.isRequired,
   addNewVis: PropTypes.func.isRequired,
 };
-
-export const DashboardAddPanel = injectI18n(DashboardAddPanelUi);

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

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import sinon from 'sinon';
-import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { shallow } from 'enzyme';
 
 import {
   DashboardAddPanel,
@@ -38,11 +38,12 @@ beforeEach(() => {
 });
 
 test('render', () => {
-  const component = shallowWithIntl(<DashboardAddPanel.WrappedComponent
+  const component = shallow(<DashboardAddPanel
     onClose={onClose}
     visTypes={{}}
     addNewPanel={() => {}}
     addNewVis={() => {}}
+    embeddableFactories={[]}
   />);
   expect(component).toMatchSnapshot();
 });

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

@@ -24,7 +24,7 @@ import ReactDOM from 'react-dom';
 
 let isOpen = false;
 
-export function showAddPanel(addNewPanel, addNewVis, visTypes) {
+export function showAddPanel(addNewPanel, addNewVis, embeddableFactories) {
   if (isOpen) {
     return;
   }
@@ -47,9 +47,9 @@ export function showAddPanel(addNewPanel, addNewVis, visTypes) {
     <I18nContext>
       <DashboardAddPanel
         onClose={onClose}
-        visTypes={visTypes}
         addNewPanel={addNewPanel}
         addNewVis={addNewVisWithCleanup}
+        embeddableFactories={embeddableFactories}
       />
     </I18nContext>
   );

src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.ts

@@ -19,6 +19,7 @@
 
 import 'ui/doc_table';
 
+import { i18n } from '@kbn/i18n';
 import { EmbeddableFactory } from 'ui/embeddable';
 import {
   EmbeddableInstanceConfiguration,
@@ -33,7 +34,17 @@ export class SearchEmbeddableFactory extends EmbeddableFactory {
     private $rootScope: ng.IRootScopeService,
     private searchLoader: SavedSearchLoader
   ) {
-    super({ name: 'search' });
+    super({
+      name: 'search',
+      savedObjectMetaData: {
+        name: i18n.translate('kbn.discover.savedSearch.savedObjectName', {
+          defaultMessage: 'Saved Search',
+        }),
+        type: 'search',
+        getIconForSavedObject: () => 'search',
+        showSavedObject: () => true,
+      },
+    });
   }
 
   public getEditPath(panelId: string) {

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

@@ -28,11 +28,11 @@ exports[`render 1`] = `
     />
     <SavedObjectFinder
       callToActionButton={
-        <EuiButton
+        <EuiButtonEmpty
           color="primary"
-          fill={false}
           href="#/management/kibana/objects?_a=(tab:search)"
           iconSide="left"
+          iconType="gear"
           onClick={[Function]}
           type="button"
         >
@@ -41,9 +41,8 @@ exports[`render 1`] = `
             id="kbn.discover.topNav.openSearchPanel.manageSearchesButtonLabel"
             values={Object {}}
           />
-        </EuiButton>
+        </EuiButtonEmpty>
       }
-      makeUrl={[Function]}
       noItemsMessage={
         <FormattedMessage
           defaultMessage="No matching searches found."
@@ -52,7 +51,16 @@ exports[`render 1`] = `
         />
       }
       onChoose={[Function]}
-      savedObjectType="search"
+      savedObjectMetaData={
+        Array [
+          Object {
+            "getIconForSavedObject": [Function],
+            "name": "Search",
+            "showSavedObject": [Function],
+            "type": "search",
+          },
+        ]
+      }
     />
   </EuiFlyoutBody>
 </EuiFlyout>