[Dashboard] [Collapsable Panels] Add embeddable support

examples/embeddable_examples/public/app/presentation_container_example/components/add_button.tsx

@@ -10,9 +10,8 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import { EuiButton, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
 import { ADD_PANEL_TRIGGER, UiActionsStart } from '@kbn/ui-actions-plugin/public';
-import { PageApi } from '../types';
 
-export function AddButton({ pageApi, uiActions }: { pageApi: PageApi; uiActions: UiActionsStart }) {
+export function AddButton({ pageApi, uiActions }: { pageApi: unknown; uiActions: UiActionsStart }) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [items, setItems] = useState<ReactElement[]>([]);
 
@@ -73,7 +72,7 @@ export function AddButton({ pageApi, uiActions }: { pageApi: PageApi; uiActions:
             setIsPopoverOpen(!isPopoverOpen);
           }}
         >
-          Add
+          Add panel
         </EuiButton>
       }
       isOpen={isPopoverOpen}

examples/embeddable_examples/public/index.ts

@@ -9,4 +9,6 @@
 
 import { EmbeddableExamplesPlugin } from './plugin';
 
+export { AddButton as AddEmbeddableButton } from './app/presentation_container_example/components/add_button';
+
 export const plugin = () => new EmbeddableExamplesPlugin();

examples/grid_example/kibana.jsonc

@@ -7,7 +7,7 @@
     "id": "gridExample",
     "server": false,
     "browser": true,
-    "requiredPlugins": ["developerExamples"],
+    "requiredPlugins": ["developerExamples", "embeddable", "uiActions", "embeddableExamples"],
     "requiredBundles": []
   }
 }

examples/grid_example/public/app.tsx

@@ -11,27 +11,28 @@ import deepEqual from 'fast-deep-equal';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { combineLatest, debounceTime } from 'rxjs';
-import { v4 as uuidv4 } from 'uuid';
 
 import {
   EuiBadge,
   EuiButton,
   EuiButtonEmpty,
+  EuiButtonGroup,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPageTemplate,
-  EuiProvider,
   EuiSpacer,
-  EuiButtonGroup,
-  EuiButtonIcon,
 } from '@elastic/eui';
 import { AppMountParameters } from '@kbn/core-application-browser';
 import { CoreStart } from '@kbn/core-lifecycle-browser';
-import { GridLayout, GridLayoutData, GridAccessMode } from '@kbn/grid-layout';
+import { AddEmbeddableButton } from '@kbn/embeddable-examples-plugin/public';
+import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public';
+import { GridLayout, GridLayoutData } from '@kbn/grid-layout';
 import { i18n } from '@kbn/i18n';
+import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 
-import { getPanelId } from './get_panel_id';
 import {
   clearSerializedDashboardState,
   getSerializedDashboardState,
@@ -45,82 +46,69 @@ const DASHBOARD_MARGIN_SIZE = 8;
 const DASHBOARD_GRID_HEIGHT = 20;
 const DASHBOARD_GRID_COLUMN_COUNT = 48;
 
-export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
+export const GridExample = ({
+  coreStart,
+  uiActions,
+}: {
+  coreStart: CoreStart;
+  uiActions: UiActionsStart;
+}) => {
   const savedState = useRef<MockSerializedDashboardState>(getSerializedDashboardState());
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
-  const [expandedPanelId, setExpandedPanelId] = useState<string | undefined>();
-  const [accessMode, setAccessMode] = useState<GridAccessMode>('EDIT');
   const [currentLayout, setCurrentLayout] = useState<GridLayoutData>(
     dashboardInputToGridLayout(savedState.current)
   );
 
   const mockDashboardApi = useMockDashboardApi({ savedState: savedState.current });
+  const [viewMode, expandedPanelId] = useBatchedPublishingSubjects(
+    mockDashboardApi.viewMode,
+    mockDashboardApi.expandedPanelId
+  );
 
   useEffect(() => {
     combineLatest([mockDashboardApi.panels$, mockDashboardApi.rows$])
       .pipe(debounceTime(0)) // debounce to avoid subscribe being called twice when both panels$ and rows$ publish
       .subscribe(([panels, rows]) => {
         const hasChanges = !(
-          deepEqual(panels, savedState.current.panels) && deepEqual(rows, savedState.current.rows)
+          deepEqual(
+            Object.values(panels).map(({ gridData }) => ({ row: 0, ...gridData })),
+            Object.values(savedState.current.panels).map(({ gridData }) => ({
+              row: 0, // if row is undefined, then default to 0
+              ...gridData,
+            }))
+          ) && deepEqual(rows, savedState.current.rows)
         );
         setHasUnsavedChanges(hasChanges);
         setCurrentLayout(dashboardInputToGridLayout({ panels, rows }));
       });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const renderBasicPanel = useCallback(
-    (id: string) => {
+  const renderPanelContents = useCallback(
+    (id: string, setDragHandles?: (refs: Array<HTMLElement | null>) => void) => {
+      const currentPanels = mockDashboardApi.panels$.getValue();
+
       return (
-        <>
-          <div style={{ padding: 8 }}>{id}</div>
-          <EuiButtonEmpty
-            onClick={() => {
-              setExpandedPanelId(undefined);
-              mockDashboardApi.removePanel(id);
-            }}
-          >
-            {i18n.translate('examples.gridExample.deletePanelButton', {
-              defaultMessage: 'Delete panel',
-            })}
-          </EuiButtonEmpty>
-          <EuiButtonEmpty
-            onClick={async () => {
-              setExpandedPanelId(undefined);
-              const newPanelId = await getPanelId({
-                coreStart,
-                suggestion: id,
-              });
-              if (newPanelId) mockDashboardApi.replacePanel(id, newPanelId);
-            }}
-          >
-            {i18n.translate('examples.gridExample.replacePanelButton', {
-              defaultMessage: 'Replace panel',
-            })}
-          </EuiButtonEmpty>
-          <EuiButtonIcon
-            iconType={expandedPanelId ? 'minimize' : 'expand'}
-            onClick={() => setExpandedPanelId((expandedId) => (expandedId ? undefined : id))}
-            aria-label={
-              expandedPanelId
-                ? i18n.translate('examples.gridExample.minimizePanel', {
-                    defaultMessage: 'Minimize panel {id}',
-                    values: { id },
-                  })
-                : i18n.translate('examples.gridExample.maximizePanel', {
-                    defaultMessage: 'Maximize panel {id}',
-                    values: { id },
-                  })
-            }
-          />
-        </>
+        <ReactEmbeddableRenderer
+          key={id}
+          maybeId={id}
+          type={currentPanels[id].type}
+          getParentApi={() => mockDashboardApi}
+          panelProps={{
+            showBadges: true,
+            showBorder: true,
+            showNotifications: true,
+            showShadow: false,
+            setDragHandles,
+          }}
+        />
       );
     },
-    [coreStart, mockDashboardApi, setExpandedPanelId, expandedPanelId]
+    [mockDashboardApi]
   );
 
   return (
-    <EuiProvider>
+    <KibanaRenderContextProvider {...coreStart}>
       <EuiPageTemplate grow={false} offset={0} restrictWidth={false}>
         <EuiPageTemplate.Header
           iconType={'dashboardApp'}
@@ -131,7 +119,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
         <EuiPageTemplate.Section
           color="subdued"
           contentProps={{
-            css: { display: 'flex', flexFlow: 'column nowrap', flexGrow: 1 },
+            css: { flexGrow: 1 },
           }}
         >
           <EuiCallOut
@@ -156,20 +144,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
           <EuiSpacer size="m" />
           <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
             <EuiFlexItem grow={false}>
-              <EuiButton
-                onClick={async () => {
-                  setExpandedPanelId(undefined);
-                  const panelId = await getPanelId({
-                    coreStart,
-                    suggestion: uuidv4(),
-                  });
-                  if (panelId) mockDashboardApi.addNewPanel({ id: panelId });
-                }}
-              >
-                {i18n.translate('examples.gridExample.addPanelButton', {
-                  defaultMessage: 'Add a panel',
-                })}
-              </EuiButton>
+              <AddEmbeddableButton pageApi={mockDashboardApi} uiActions={uiActions} />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiFlexGroup gutterSize="xs" alignItems="center">
@@ -180,24 +155,24 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
                     })}
                     options={[
                       {
-                        id: 'VIEW',
+                        id: 'view',
                         label: i18n.translate('examples.gridExample.viewOption', {
                           defaultMessage: 'View',
                         }),
                         toolTipContent:
                           'The layout adjusts when the window is resized. Panel interactivity, such as moving and resizing within the grid, is disabled.',
                       },
                       {
-                        id: 'EDIT',
+                        id: 'edit',
                         label: i18n.translate('examples.gridExample.editOption', {
                           defaultMessage: 'Edit',
                         }),
                         toolTipContent: 'The layout does not adjust when the window is resized.',
                       },
                     ]}
-                    idSelected={accessMode}
+                    idSelected={viewMode}
                     onChange={(id) => {
-                      setAccessMode(id as GridAccessMode);
+                      mockDashboardApi.viewMode.next(id);
                     }}
                   />
                 </EuiFlexItem>
@@ -245,32 +220,35 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
           </EuiFlexGroup>
           <EuiSpacer size="m" />
           <GridLayout
-            accessMode={accessMode}
+            accessMode={viewMode === 'view' ? 'VIEW' : 'EDIT'}
             expandedPanelId={expandedPanelId}
             layout={currentLayout}
             gridSettings={{
               gutterSize: DASHBOARD_MARGIN_SIZE,
               rowHeight: DASHBOARD_GRID_HEIGHT,
               columnCount: DASHBOARD_GRID_COLUMN_COUNT,
             }}
-            renderPanelContents={renderBasicPanel}
+            renderPanelContents={renderPanelContents}
             onLayoutChange={(newLayout) => {
-              const { panels, rows } = gridLayoutToDashboardPanelMap(newLayout);
+              const { panels, rows } = gridLayoutToDashboardPanelMap(
+                mockDashboardApi.panels$.getValue(),
+                newLayout
+              );
               mockDashboardApi.panels$.next(panels);
               mockDashboardApi.rows$.next(rows);
             }}
           />
         </EuiPageTemplate.Section>
       </EuiPageTemplate>
-    </EuiProvider>
+    </KibanaRenderContextProvider>
   );
 };
 
 export const renderGridExampleApp = (
   element: AppMountParameters['element'],
-  coreStart: CoreStart
+  deps: { uiActions: UiActionsStart; coreStart: CoreStart }
 ) => {
-  ReactDOM.render(<GridExample coreStart={coreStart} />, element);
+  ReactDOM.render(<GridExample {...deps} />, element);
 
   return () => ReactDOM.unmountComponentAtNode(element);
 };