Create dashboard drilldown - select dashboard via filtering combo box and navigate to dashboarrd

x-pack/plugins/dashboard_enhanced/public/components/dashboard_drilldown_config/dashboard_drilldown_config.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { EuiFormRow, EuiSelect, EuiSwitch } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiComboBox } from '@elastic/eui';
 import { txtChooseDestinationDashboard } from './i18n';
 
 export interface DashboardItem {
@@ -21,6 +21,8 @@ export interface DashboardDrilldownConfigProps {
   onDashboardSelect: (dashboardId: string) => void;
   onCurrentFiltersToggle?: () => void;
   onKeepRangeToggle?: () => void;
+  onSearchChange: (searchString: string) => void;
+  isLoading: boolean;
 }
 
 export const DashboardDrilldownConfig: React.FC<DashboardDrilldownConfigProps> = ({
@@ -31,17 +33,26 @@ export const DashboardDrilldownConfig: React.FC<DashboardDrilldownConfigProps> =
   onDashboardSelect,
   onCurrentFiltersToggle,
   onKeepRangeToggle,
+  onSearchChange,
+  isLoading,
 }) => {
   // TODO: use i18n below.
+  // todo - don't assume selectedTitle is in set
+  const selectedTitle = dashboards.find(item => item.id === activeDashboardId)?.title || '';
   return (
     <>
-      <EuiFormRow label={txtChooseDestinationDashboard}>
-        <EuiSelect
-          name="selectDashboard"
-          hasNoInitialSelection={true}
-          options={dashboards.map(({ id, title }) => ({ value: id, text: title }))}
-          value={activeDashboardId}
-          onChange={e => onDashboardSelect(e.target.value)}
+      <EuiFormRow label={txtChooseDestinationDashboard} fullWidth>
+        <EuiComboBox<string>
+          async
+          selectedOptions={
+            activeDashboardId ? [{ label: selectedTitle, value: activeDashboardId }] : []
+          }
+          options={dashboards.map(({ id, title }) => ({ label: title, value: id }))}
+          onChange={([{ value = '' } = { value: '' }]) => onDashboardSelect(value)}
+          onSearchChange={onSearchChange}
+          isLoading={isLoading}
+          singleSelection={{ asPlainText: true }}
+          fullWidth
         />
       </EuiFormRow>
       {!!onCurrentFiltersToggle && (

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_drilldowns_services.ts

@@ -34,7 +34,8 @@ export class DashboardDrilldownsService {
   ) {
     const overlays = async () => (await core.getStartServices())[0].overlays;
     const drilldowns = async () => (await core.getStartServices())[1].drilldowns;
-    const savedObjects = async () => (await core.getStartServices())[0].savedObjects.client;
+    const getSavedObjectsClient = async () =>
+      (await core.getStartServices())[0].savedObjects.client;
 
     const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({ overlays, drilldowns });
     plugins.uiActions.registerAction(actionFlyoutCreateDrilldown);
@@ -45,7 +46,7 @@ export class DashboardDrilldownsService {
     plugins.uiActions.attachAction(CONTEXT_MENU_DRILLDOWNS_TRIGGER, actionFlyoutEditDrilldown);
 
     const dashboardToDashboardDrilldown = new DashboardToDashboardDrilldown({
-      savedObjects,
+      getSavedObjectsClient,
     });
     plugins.drilldowns.registerDrilldown(dashboardToDashboardDrilldown);
   }

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/collect_config.tsx

@@ -8,6 +8,7 @@ import React, { useState, useEffect } from 'react';
 import { CollectConfigProps } from './types';
 import { DashboardDrilldownConfig } from '../../../components/dashboard_drilldown_config';
 import { Params } from './drilldown';
+import { SimpleSavedObject } from '../../../../../../../src/core/public';
 
 export interface CollectConfigContainerProps extends CollectConfigProps {
   params: Params;
@@ -16,28 +17,48 @@ export interface CollectConfigContainerProps extends CollectConfigProps {
 export const CollectConfigContainer: React.FC<CollectConfigContainerProps> = ({
   config,
   onConfig,
-  params: { savedObjects },
+  params: { getSavedObjectsClient },
 }) => {
-  const [dashboards] = useState([
-    { id: 'dashboard1', title: 'Dashboard 1' },
-    { id: 'dashboard2', title: 'Dashboard 2' },
-    { id: 'dashboard3', title: 'Dashboard 3' },
-    { id: 'dashboard4', title: 'Dashboard 4' },
-  ]);
+  const [dashboards, setDashboards] = useState([]);
+  const [searchString, setSearchString] = useState();
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    // TODO: Load dashboards...
-  }, [savedObjects]);
+    setIsLoading(true);
+    getSavedObjectsClient().then(savedObjectsClient => {
+      savedObjectsClient
+        .find({
+          type: 'dashboard',
+          search: searchString ? `${searchString}*` : undefined,
+          // todo search by id
+          searchFields: ['title^3', 'description'],
+          defaultSearchOperator: 'AND',
+          perPage: 100,
+        })
+        .then(({ savedObjects }) => {
+          const dashboardList = savedObjects.map(
+            (savedObject: SimpleSavedObject<{ id: string; title: string }>) => ({
+              id: savedObject.id,
+              title: savedObject.attributes.title,
+            })
+          );
+          setDashboards(dashboardList);
+          setIsLoading(false);
+        });
+    });
+  }, [getSavedObjectsClient, searchString]);
 
   return (
     <DashboardDrilldownConfig
       activeDashboardId={config.dashboardId}
       dashboards={dashboards}
       currentFilters={config.useCurrentDashboardFilters}
       keepRange={config.useCurrentDashboardDataRange}
+      isLoading={isLoading}
       onDashboardSelect={dashboardId => {
         onConfig({ ...config, dashboardId });
       }}
+      onSearchChange={setSearchString}
       onCurrentFiltersToggle={() =>
         onConfig({
           ...config,

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/dashboard_to_dashboard_drilldown/drilldown.tsx

@@ -19,7 +19,7 @@ export const dashboards = [
 ];
 
 export interface Params {
-  savedObjects: () => Promise<CoreStart['savedObjects']['client']>;
+  getSavedObjectsClient: () => Promise<CoreStart['savedObjects']['client']>;
 }
 
 export class DashboardToDashboardDrilldown
@@ -43,7 +43,7 @@ export class DashboardToDashboardDrilldown
   public readonly CollectConfig = reactToUiComponent(this.ReactCollectConfig);
 
   public readonly createConfig = () => ({
-    dashboardId: '123',
+    dashboardId: '',
     useCurrentDashboardDataRange: true,
     useCurrentDashboardFilters: true,
   });