[Portable Dashboards] Export Dashboard Listing Table (#154295)

export the Dashboard Listing Page component lazily. This component is a wrapper around the TableListView and can be used as-is.

examples/portable_dashboards_example/public/app.tsx

@@ -6,11 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
 import ReactDOM from 'react-dom';
+import React, { useMemo } from 'react';
+import { useAsync } from 'react-use/lib';
+import { Router, Redirect, Switch } from 'react-router-dom';
 
-import { EuiSpacer } from '@elastic/eui';
+import { Route } from '@kbn/shared-ux-router';
 import { AppMountParameters } from '@kbn/core/public';
+import { EuiButton, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { DashboardListingTable } from '@kbn/dashboard-plugin/public';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 
 import { DualReduxExample } from './dual_redux_example';
@@ -20,17 +24,70 @@ import { StaticByReferenceExample } from './static_by_reference_example';
 import { DynamicByReferenceExample } from './dynamically_add_panels_example';
 import { DashboardWithControlsExample } from './dashboard_with_controls_example';
 
+const DASHBOARD_DEMO_PATH = '/dashboardDemo';
+const DASHBOARD_LIST_PATH = '/listingDemo';
+
 export const renderApp = async (
   { data, dashboard }: PortableDashboardsExampleStartDeps,
-  { element }: AppMountParameters
+  { element, history }: AppMountParameters
 ) => {
-  const dataViews = await data.dataViews.find('kibana_sample_data_logs');
-  const findDashboardsService = await dashboard.findDashboardsService();
-  const logsSampleDashboardId = (await findDashboardsService?.findByTitle('[Logs] Web Traffic'))
-    ?.id;
+  ReactDOM.render(
+    <PortableDashboardsDemos data={data} history={history} dashboard={dashboard} />,
+    element
+  );
+  return () => ReactDOM.unmountComponentAtNode(element);
+};
 
-  const examples =
-    dataViews.length > 0 ? (
+const PortableDashboardsDemos = ({
+  data,
+  dashboard,
+  history,
+}: {
+  data: PortableDashboardsExampleStartDeps['data'];
+  dashboard: PortableDashboardsExampleStartDeps['dashboard'];
+  history: AppMountParameters['history'];
+}) => {
+  return (
+    <Router history={history}>
+      <Switch>
+        <Route exact path="/">
+          <Redirect to={DASHBOARD_DEMO_PATH} />
+        </Route>
+        <Route path={DASHBOARD_LIST_PATH}>
+          <PortableDashboardListingDemo history={history} />
+        </Route>
+        <Route path={DASHBOARD_DEMO_PATH}>
+          <DashboardsDemo data={data} dashboard={dashboard} history={history} />
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+const DashboardsDemo = ({
+  data,
+  history,
+  dashboard,
+}: {
+  history: AppMountParameters['history'];
+  data: PortableDashboardsExampleStartDeps['data'];
+  dashboard: PortableDashboardsExampleStartDeps['dashboard'];
+}) => {
+  const { loading, value: dataviewResults } = useAsync(async () => {
+    const dataViews = await data.dataViews.find('kibana_sample_data_logs');
+    const findDashboardsService = await dashboard.findDashboardsService();
+    const logsSampleDashboardId = (await findDashboardsService?.findByTitle('[Logs] Web Traffic'))
+      ?.id;
+    return { dataViews, logsSampleDashboardId };
+  }, []);
+
+  const usageDemos = useMemo(() => {
+    if (loading || !dataviewResults) return null;
+    if (dataviewResults?.dataViews.length === 0) {
+      <div>{'Install web logs sample data to run the embeddable dashboard examples.'}</div>;
+    }
+    const { dataViews, logsSampleDashboardId } = dataviewResults;
+    return (
       <>
         <DashboardWithControlsExample dataView={dataViews[0]} />
         <EuiSpacer size="xl" />
@@ -42,16 +99,37 @@ export const renderApp = async (
         <EuiSpacer size="xl" />
         <StaticByValueExample />
       </>
-    ) : (
-      <div>{'Install web logs sample data to run the embeddable dashboard examples.'}</div>
     );
+  }, [dataviewResults, loading]);
 
-  ReactDOM.render(
+  return (
     <KibanaPageTemplate>
-      <KibanaPageTemplate.Header pageTitle="Portable Dashboards" />
-      <KibanaPageTemplate.Section>{examples}</KibanaPageTemplate.Section>
-    </KibanaPageTemplate>,
-    element
+      <KibanaPageTemplate.Header pageTitle="Portable dashboards usage" />
+      <KibanaPageTemplate.Section>
+        <EuiButton onClick={() => history.push(DASHBOARD_LIST_PATH)}>
+          View portable dashboard listing page
+        </EuiButton>
+        <EuiSpacer size="xl" />
+        {usageDemos}
+      </KibanaPageTemplate.Section>
+    </KibanaPageTemplate>
+  );
+};
+
+const PortableDashboardListingDemo = ({ history }: { history: AppMountParameters['history'] }) => {
+  return (
+    <DashboardListingTable
+      goToDashboard={(dashboardId) =>
+        alert(`Here's where I would redirect you to ${dashboardId ?? 'a new Dashboard'}`)
+      }
+      getDashboardUrl={() => 'https://www.elastic.co/'}
+    >
+      <EuiButton onClick={() => history.push(DASHBOARD_DEMO_PATH)}>
+        Go back to usage demos
+      </EuiButton>
+      <EuiSpacer size="xl" />
+      <EuiCallOut title="You can render something cool here" iconType="search" />
+      <EuiSpacer size="xl" />
+    </DashboardListingTable>
   );
-  return () => ReactDOM.unmountComponentAtNode(element);
 };

examples/portable_dashboards_example/tsconfig.json

@@ -25,6 +25,7 @@
     "@kbn/embeddable-examples-plugin",
     "@kbn/shared-ux-page-kibana-template",
     "@kbn/shared-ux-utility",
-    "@kbn/controls-plugin"
+    "@kbn/controls-plugin",
+    "@kbn/shared-ux-router"
   ]
 }