* Use embeddable registry in add panel

* Use EuiListGroup instead of table
elastic · Feb 18, 2019 · 445b172 · 445b172
1 parent a4958e7
commit 445b172
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 143 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
@@ -474,7 +474,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, visTypes, embeddableFactories);
       };
       navActions[TopNavIds.OPTIONS] = (menuItem, navController, anchorElement) => {
         showOptionsPopover({

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
@@ -27,94 +27,68 @@ import {
   EuiFlyout,
   EuiFlyoutBody,
   EuiButton,
-  EuiTabs,
   EuiTab,
   EuiSpacer,
   EuiTitle,
+  EuiIcon,
 } 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"
-        />
-      )
-    }];
+    // const tabs = props.embeddableFactories
+    //   .filter(embeddableFactory => Boolean(embeddableFactory.savedObjectMetaData))
+    //   .map(({ name, savedObjectMetaData: { type, icon } }) => ({
+    //     icon,
+    //     id: type,
+    //     name: props.intl.formatMessage({
+    //       // TODO find a way to do this dynamically (embeddableFactory.savedObjectsMetaInformation maybe?)
+    //       id: 'kbn.dashboard.topNav.addPanel.visualizationTabName',
+    //       defaultMessage: type
+    //     }),
+    //     dataTestSubj: `add${type}Tab`,
+    //     toastDataTestSubj: `add${type}ToDashboardSuccess`,
+    //     savedObjectFinder: (
+    //       <SavedObjectFinder
+    //         key={`${type}SavedObjectFinder`}
+    //         // TODO special case for vis, generalize later
+    //         callToActionButton={name === 'visualization' ? addNewVisBtn : undefined}
+    //         onChoose={this.onAddPanel}
+    //         // TODO special case for vis, generalize later
+    //         visTypes={name === 'visualization' ? this.props.visTypes : undefined}
+    //         noItemsMessage={props.intl.formatMessage({
+    //           // TODO find a way to do this dynamically (embeddableFactory.savedObjectsMetaInformation maybe?)
+    //           id: 'kbn.dashboard.topNav.addPanel.visSavedObjectFinder.noMatchingVisualizationsMessage',
+    //           defaultMessage: `No matching ${type} found.`,
+    //         })}
+    //         savedObjectType={type}
+    //       />
+    //     )
+    //   }));
 
     this.state = {
-      tabs: tabs,
-      selectedTab: tabs[0],
+      tabs: [],
+      selectedTab: {},
     };
   }
 
   onSelectedTabChanged = tab => {
     this.setState({
       selectedTab: tab,
     });
-  }
+  };
 
   renderTabs() {
-    return this.state.tabs.map((tab) => {
+    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}
         >
+          <EuiIcon type={tab.icon} size="s" />
           {tab.name}
         </EuiTab>
       );
@@ -131,25 +105,32 @@ 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,
-      }),
+      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,
     });
-  }
+  };
 
   render() {
+    const addNewVisBtn = (
+      <EuiButton onClick={this.props.addNewVis} data-test-subj="addNewSavedObjectLink">
+        <FormattedMessage
+          id="kbn.dashboard.topNav.addPanel.addNewVisualizationButtonLabel"
+          defaultMessage="Add new Visualization"
+        />
+      </EuiButton>
+    );
+
     return (
-      <EuiFlyout
-        ownFocus
-        onClose={this.props.onClose}
-        data-test-subj="dashboardAddPanel"
-      >
+      <EuiFlyout ownFocus onClose={this.props.onClose} data-test-subj="dashboardAddPanel">
         <EuiFlyoutBody>
-
           <EuiTitle size="s">
             <h1>
               <FormattedMessage
@@ -159,14 +140,28 @@ class DashboardAddPanelUi extends React.Component {
             </h1>
           </EuiTitle>
 
-          <EuiTabs>
+          {/* <EuiTabs>
             {this.renderTabs()}
-          </EuiTabs>
+          </EuiTabs> */}
+          <SavedObjectFinder
+            // TODO special case for vis, generalize later
+            callToActionButton={addNewVisBtn}
+            onChoose={this.onAddPanel}
+            // TODO special case for vis, generalize later
+            visTypes={this.props.visTypes}
+            noItemsMessage={this.props.intl.formatMessage({
+              // TODO find a way to do this dynamically (embeddableFactory.savedObjectsMetaInformation maybe?)
+              id: 'kbn.dashboard.topNav.addPanel.savedObjectFinder.noMatchingObjectsMessage',
+              defaultMessage: `No matching objects found.`,
+            })}
+            savedObjectMetaData={this.props.embeddableFactories
+              .filter(embeddableFactory => Boolean(embeddableFactory.savedObjectMetaData))
+              .map(({ savedObjectMetaData }) => savedObjectMetaData)}
+          />
 
           <EuiSpacer size="s" />
 
           {this.state.selectedTab.savedObjectFinder}
-
         </EuiFlyoutBody>
       </EuiFlyout>
     );

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, visTypes, embeddableFactories) {
   if (isOpen) {
     return;
   }
@@ -50,6 +50,7 @@ export function showAddPanel(addNewPanel, addNewVis, visTypes) {
         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
@@ -33,7 +33,10 @@ export class SearchEmbeddableFactory extends EmbeddableFactory {
     private $rootScope: ng.IRootScopeService,
     private searchLoader: SavedSearchLoader
   ) {
-    super({ name: 'search' });
+    super({
+      name: 'search',
+      savedObjectMetaData: { type: 'search', icon: 'search' },
+    });
   }
 
   public getEditPath(panelId: string) {

diff --git a/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.ts b/src/legacy/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.ts
@@ -35,7 +35,10 @@ export class VisualizeEmbeddableFactory extends EmbeddableFactory {
   private config: Legacy.KibanaConfig;
 
   constructor(savedVisualizations: SavedVisualizations, config: Legacy.KibanaConfig) {
-    super({ name: 'visualization' });
+    super({
+      name: 'visualization',
+      savedObjectMetaData: { type: 'visualization', icon: 'visualizeApp' },
+    });
     this.config = config;
     this.savedVisualizations = savedVisualizations;
   }

diff --git a/src/legacy/ui/public/embeddable/embeddable_factory.ts b/src/legacy/ui/public/embeddable/embeddable_factory.ts
@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { ICON_TYPES } from '@elastic/eui';
+
 import { Embeddable } from './embeddable';
 import { EmbeddableState } from './types';
 export interface EmbeddableInstanceConfiguration {
@@ -25,19 +27,32 @@ export interface EmbeddableInstanceConfiguration {
 
 export type OnEmbeddableStateChanged = (embeddableStateChanges: EmbeddableState) => void;
 
+export interface SavedObjectMetaData {
+  type: string;
+  icon: ICON_TYPES[0];
+}
+
 /**
  * The EmbeddableFactory creates and initializes an embeddable instance
  */
 export abstract class EmbeddableFactory {
   public readonly name: string;
+  public readonly savedObjectMetaData?: SavedObjectMetaData;
 
   /**
    *
    * @param name - a unique identified for this factory, which will be used to map an embeddable spec to
    * a factory that can generate an instance of it.
    */
-  constructor({ name }: { name: string }) {
+  constructor({
+    name,
+    savedObjectMetaData,
+  }: {
+    name: string;
+    savedObjectMetaData?: SavedObjectMetaData;
+  }) {
     this.name = name;
+    this.savedObjectMetaData = savedObjectMetaData;
   }
 
   /**