Use embeddable registry in add panel (elastic#31400) (elastic#32885)

* Prepare control flow to use embeddable factories in add panel * Rewrite saved object finder and add tests * Fix usages of new saved object finder * fix test failures * fix some functional tests and re-introduce makeUrl * fix tests * remove direct hrefs in saved_object_lists * PR review fixes * update snapshot * overwrite width of viz dialog * Update src/legacy/core_plugins/kibana/public/dashboard/top_nav/add_panel.js Co-Authored-By: flash1293 <[email protected]> * Update src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.ts Co-Authored-By: flash1293 <[email protected]> * Update src/legacy/core_plugins/kibana/public/discover/top_nav/open_search_panel.js Co-Authored-By: flash1293 <[email protected]> * Update src/legacy/core_plugins/kibana/public/visualize/wizard/search_selection/search_selection.tsx Co-Authored-By: flash1293 <[email protected]> * Update src/legacy/core_plugins/kibana/public/visualize/wizard/search_selection/search_selection.tsx Co-Authored-By: flash1293 <[email protected]> * Update src/legacy/core_plugins/kibana/public/visualize/wizard/search_selection/search_selection.tsx Co-Authored-By: flash1293 <[email protected]> * fix tests * review fixes #1 * review fixes #2 * dont use classname in functional test * remove call to action button prop * align buttons correctly * fix tests * remove debugging statement * Update src/legacy/core_plugins/kibana/public/dashboard/top_nav/add_panel.js Co-Authored-By: flash1293 <[email protected]> * Update src/legacy/core_plugins/kibana/public/discover/top_nav/open_search_panel.js Co-Authored-By: flash1293 <[email protected]> * review fixes #3 * improve filter behavior and enable it for search wizard * adjust functional tests for new filter behavior * Change translation id due to string change * Update Jest snapshot
timroes · Mar 11, 2019 · 358ab0d · 358ab0d
1 parent d3d76ce
commit 358ab0d
Show file tree

Hide file tree

Showing 28 changed files with 1,164 additions and 553 deletions.
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/dashboard_app.js b/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({

diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap
@@ -10,68 +10,60 @@ exports[`render 1`] = `
   ownFocus={true}
   size="m"
 >
-  <EuiFlyoutBody>
+  <EuiFlyoutHeader
+    hasBorder={true}
+  >
     <EuiTitle
-      size="s"
+      size="m"
       textTransform="none"
     >
-      <h1>
+      <h2>
         <FormattedMessage
-          defaultMessage="Add Panels"
+          defaultMessage="Add panels"
           id="kbn.dashboard.topNav.addPanelsTitle"
           values={Object {}}
         />
-      </h1>
+      </h2>
     </EuiTitle>
-    <EuiTabs
-      expand={false}
-      size="m"
+  </EuiFlyoutHeader>
+  <EuiFlyoutBody>
+    <SavedObjectFinder
+      noItemsMessage="No matching objects found."
+      onChoose={[Function]}
+      savedObjectMetaData={Array []}
+      showFilter={true}
+    />
+  </EuiFlyoutBody>
+  <EuiFlyoutFooter>
+    <EuiFlexGroup
+      alignItems="stretch"
+      component="div"
+      direction="row"
+      gutterSize="l"
+      justifyContent="flexEnd"
+      responsive={true}
+      wrap={false}
     >
-      <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]}
+      <EuiFlexItem
+        component="div"
+        grow={false}
       >
-        Saved Search
-      </EuiTab>
-    </EuiTabs>
-    <EuiSpacer
-      size="s"
-    />
-    <SavedObjectFinder
-      callToActionButton={
         <EuiButton
           color="primary"
           data-test-subj="addNewSavedObjectLink"
-          fill={false}
+          fill={true}
           iconSide="left"
           onClick={[Function]}
           type="button"
         >
           <FormattedMessage
-            defaultMessage="Add new Visualization"
-            id="kbn.dashboard.topNav.addPanel.addNewVisualizationButtonLabel"
+            defaultMessage="Create new visualization"
+            id="kbn.dashboard.topNav.addPanel.createNewVisualizationButtonLabel"
             values={Object {}}
           />
         </EuiButton>
-      }
-      key="visSavedObjectFinder"
-      noItemsMessage="No matching visualizations found."
-      onChoose={[Function]}
-      savedObjectType="visualization"
-      visTypes={Object {}}
-    />
-  </EuiFlyoutBody>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlyoutFooter>
 </EuiFlyout>
 `;
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/add_panel.js b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/add_panel.js
@@ -19,109 +19,24 @@
 
 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutFooter,
   EuiFlyoutBody,
   EuiButton,
-  EuiTabs,
-  EuiTab,
-  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,53 +46,66 @@ 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"
-      >
-        <EuiFlyoutBody>
-
-          <EuiTitle size="s">
-            <h1>
+      <EuiFlyout ownFocus onClose={this.props.onClose} data-test-subj="dashboardAddPanel">
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2>
               <FormattedMessage
                 id="kbn.dashboard.topNav.addPanelsTitle"
-                defaultMessage="Add Panels"
+                defaultMessage="Add panels"
               />
-            </h1>
+            </h2>
           </EuiTitle>
-
-          <EuiTabs>
-            {this.renderTabs()}
-          </EuiTabs>
-
-          <EuiSpacer size="s" />
-
-          {this.state.selectedTab.savedObjectFinder}
-
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <SavedObjectFinder
+            onChoose={this.onAddPanel}
+            savedObjectMetaData={this.props.embeddableFactories
+              .filter(embeddableFactory => Boolean(embeddableFactory.savedObjectMetaData))
+              .map(({ savedObjectMetaData }) => savedObjectMetaData)}
+            showFilter={true}
+            noItemsMessage={i18n.translate(
+              'kbn.dashboard.topNav.addPanel.noMatchingObjectsMessage',
+              {
+                defaultMessage: 'No matching objects found.',
+              }
+            )}
+          />
         </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButton fill onClick={this.props.addNewVis} data-test-subj="addNewSavedObjectLink">
+                <FormattedMessage
+                  id="kbn.dashboard.topNav.addPanel.createNewVisualizationButtonLabel"
+                  defaultMessage="Create new visualization"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
       </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);
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/add_panel.test.js b/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();
 });
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/show_add_panel.js b/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>
   );

diff --git a/src/legacy/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.ts b/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,16 @@ 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',
+      },
+    });
   }
 
   public getEditPath(panelId: string) {