Setting up Presentation Util; Create Service Abstraction API

docs/developer/plugin-list.asciidoc

@@ -150,8 +150,8 @@ It also provides a stateful version of it on the start contract.
 Content is fetched from the remote (https://feeds.elastic.co and https://feeds-staging.elastic.co in dev mode) once a day, with periodic checks if the content needs to be refreshed. All newsfeed content is hosted remotely.
 
 
-|{kib-repo}blob/{branch}/src/plugins/presentation_util/README.md[presentationUtil]
-|Utilities and components used by the presentation-related plugins
+|{kib-repo}blob/{branch}/src/plugins/presentation_util/README.mdx[presentationUtil]
+|The Presentation Utility Plugin is a set of common, shared components and toolkits for solutions within the Presentation space, (e.g. Dashboards, Canvas).
 
 
 |{kib-repo}blob/{branch}/src/plugins/region_map/README.md[regionMap]

package.json

@@ -392,6 +392,7 @@
     "@storybook/addon-essentials": "^6.0.26",
     "@storybook/addon-knobs": "^6.0.26",
     "@storybook/addon-storyshots": "^6.0.26",
+    "@storybook/addon-docs": "^6.0.26",
     "@storybook/components": "^6.0.26",
     "@storybook/core": "^6.0.26",
     "@storybook/core-events": "^6.0.26",

src/dev/storybook/aliases.ts

@@ -18,4 +18,5 @@ export const storybookAliases = {
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
   observability: 'x-pack/plugins/observability/.storybook',
+  presentation: 'src/plugins/presentation_util/storybook',
 };

src/plugins/presentation_util/README.mdx

@@ -0,0 +1,11 @@
+---
+id: presentationUtilPlugin
+slug: /kibana-dev-docs/presentationPlugin
+title: Introduction
+summary: Introduction to the Presentation Utility Plugin.
+date: 2020-01-12
+tags: ['kibana', 'presentation', 'services']
+related: []
+---
+
+The Presentation Utility Plugin is a set of common, shared components and toolkits for solutions within the Presentation space, (e.g. Dashboards, Canvas).

src/plugins/presentation_util/public/components/dashboard_picker.stories.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
+ */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { DashboardPicker } from './dashboard_picker';
+
+export default {
+  component: DashboardPicker,
+  title: 'Dashboard Picker',
+  argTypes: {
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+};
+
+export const Example = ({ isDisabled }: { isDisabled: boolean }) => (
+  <DashboardPicker onChange={action('onChange')} isDisabled={isDisabled} />
+);

src/plugins/presentation_util/public/components/dashboard_picker.tsx

@@ -6,18 +6,16 @@
  * Public License, v 1.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
 import { EuiComboBox } from '@elastic/eui';
-import { SavedObjectsClientContract } from '../../../../core/public';
-import { DashboardSavedObject } from '../../../../plugins/dashboard/public';
+import { pluginServices } from '../services';
 
 export interface DashboardPickerProps {
   onChange: (dashboard: { name: string; id: string } | null) => void;
   isDisabled: boolean;
-  savedObjectsClient: SavedObjectsClientContract;
 }
 
 interface DashboardOption {
@@ -26,42 +24,51 @@ interface DashboardOption {
 }
 
 export function DashboardPicker(props: DashboardPickerProps) {
-  const [dashboards, setDashboards] = useState<DashboardOption[]>([]);
+  const [dashboardOptions, setDashboardOptions] = useState<DashboardOption[]>([]);
   const [isLoadingDashboards, setIsLoadingDashboards] = useState(true);
   const [selectedDashboard, setSelectedDashboard] = useState<DashboardOption | null>(null);
+  const [query, setQuery] = useState('');
 
-  const { savedObjectsClient, isDisabled, onChange } = props;
+  const { isDisabled, onChange } = props;
+  const { dashboards } = pluginServices.getHooks();
+  const { findDashboardsByTitle } = dashboards.useService();
 
-  const fetchDashboards = useCallback(
-    async (query) => {
+  useEffect(() => {
+    // We don't want to manipulate the React state if the component has been unmounted
+    // while we wait for the saved objects to return.
+    let cleanedUp = false;
+
+    const fetchDashboards = async () => {
       setIsLoadingDashboards(true);
-      setDashboards([]);
-
-      const { savedObjects } = await savedObjectsClient.find<DashboardSavedObject>({
-        type: 'dashboard',
-        search: query ? `${query}*` : '',
-        searchFields: ['title'],
-      });
-      if (savedObjects) {
-        setDashboards(savedObjects.map((d) => ({ value: d.id, label: d.attributes.title })));
+      setDashboardOptions([]);
+
+      const objects = await findDashboardsByTitle(query ? `${query}*` : '');
+
+      if (cleanedUp) {
+        return;
+      }
+
+      if (objects) {
+        setDashboardOptions(objects.map((d) => ({ value: d.id, label: d.attributes.title })));
       }
+
       setIsLoadingDashboards(false);
-    },
-    [savedObjectsClient]
-  );
+    };
 
-  // Initial dashboard load
-  useEffect(() => {
-    fetchDashboards('');
-  }, [fetchDashboards]);
+    fetchDashboards();
+
+    return () => {
+      cleanedUp = true;
+    };
+  }, [findDashboardsByTitle, query]);
 
   return (
     <EuiComboBox
       placeholder={i18n.translate('presentationUtil.dashboardPicker.searchDashboardPlaceholder', {
         defaultMessage: 'Search dashboards...',
       })}
       singleSelection={{ asPlainText: true }}
-      options={dashboards || []}
+      options={dashboardOptions || []}
       selectedOptions={!!selectedDashboard ? [selectedDashboard] : undefined}
       onChange={(e) => {
         if (e.length) {
@@ -72,7 +79,7 @@ export function DashboardPicker(props: DashboardPickerProps) {
           onChange(null);
         }
       }}
-      onSearchChange={fetchDashboards}
+      onSearchChange={setQuery}
       isDisabled={isDisabled}
       isLoading={isLoadingDashboards}
       compressed={true}