[Lens] Inline editing of lens panels on a dashboard or canvas

src/plugins/embeddable/public/embeddable_panel/panel_actions/edit_panel_action/edit_panel_action.ts

@@ -75,6 +75,7 @@ export class EditPanelAction implements Action<ActionContext> {
     const canEditEmbeddable = Boolean(
       embeddable &&
         embeddable.getOutput().editable &&
+        !embeddable.getOutput().inlineEditable &&
         (embeddable.getOutput().editUrl ||
           (embeddable.getOutput().editApp && embeddable.getOutput().editPath) ||
           embeddable.getOutput().editableWithExplicitInput)

src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts

@@ -30,6 +30,8 @@ export interface EmbeddableOutput {
   title?: string;
   description?: string;
   editable?: boolean;
+  // set this to true if the embeddable allows inline editing
+  inlineEditable?: boolean;
   // Whether the embeddable can be edited inline by re-requesting the explicit input from the user
   editableWithExplicitInput?: boolean;
   savedObjectId?: string;

src/plugins/unified_histogram/public/__mocks__/lens_adapters.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { UnifiedHistogramChartLoadEvent } from '../types';
+
+export const lensAdaptersMock = {
+  tables: {
+    tables: {
+      default: {
+        columns: [
+          {
+            id: 'col-0-1',
+            meta: {
+              dimensionName: 'Slice size',
+              type: 'number',
+            },
+            name: 'Field 1',
+          },
+          {
+            id: 'col-0-2',
+            meta: {
+              dimensionName: 'Slice',
+              type: 'number',
+            },
+            name: 'Field 2',
+          },
+        ],
+        rows: [
+          {
+            'col-0-1': 0,
+            'col-0-2': 0,
+            'col-0-3': 0,
+            'col-0-4': 0,
+          },
+        ],
+        type: 'datatable',
+      },
+    },
+  },
+} as unknown as UnifiedHistogramChartLoadEvent['adapters'];

src/plugins/unified_histogram/public/chart/chart.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { ReactElement, useMemo, useState, useEffect, useCallback, memo } from 'react';
+import type { Observable } from 'rxjs';
 import {
   EuiButtonIcon,
   EuiContextMenu,
@@ -17,8 +18,11 @@ import {
   EuiProgress,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import type { EmbeddableComponentProps, Suggestion } from '@kbn/lens-plugin/public';
-import type { Datatable } from '@kbn/expressions-plugin/common';
+import type {
+  EmbeddableComponentProps,
+  Suggestion,
+  LensEmbeddableOutput,
+} from '@kbn/lens-plugin/public';
 import { DataView, DataViewField, DataViewType } from '@kbn/data-views-plugin/public';
 import type { LensEmbeddableInput } from '@kbn/lens-plugin/public';
 import type { AggregateQuery, Filter, Query, TimeRange } from '@kbn/es-query';
@@ -69,7 +73,8 @@ export interface ChartProps {
   disableTriggers?: LensEmbeddableInput['disableTriggers'];
   disabledActions?: LensEmbeddableInput['disabledActions'];
   input$?: UnifiedHistogramInput$;
-  lensTablesAdapter?: Record<string, Datatable>;
+  lensAdapters?: UnifiedHistogramChartLoadEvent['adapters'];
+  lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>;
   isOnHistogramMode?: boolean;
   isChartLoading?: boolean;
   onResetChartHeight?: () => void;
@@ -78,7 +83,10 @@ export interface ChartProps {
   onBreakdownFieldChange?: (breakdownField: DataViewField | undefined) => void;
   onSuggestionChange?: (suggestion: Suggestion | undefined) => void;
   onTotalHitsChange?: (status: UnifiedHistogramFetchStatus, result?: number | Error) => void;
-  onChartLoad?: (event: UnifiedHistogramChartLoadEvent) => void;
+  onChartLoad?: (
+    event: UnifiedHistogramChartLoadEvent,
+    lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>
+  ) => void;
   onFilter?: LensEmbeddableInput['onFilter'];
   onBrushEnd?: LensEmbeddableInput['onBrushEnd'];
   withDefaultActions: EmbeddableComponentProps['withDefaultActions'];
@@ -107,7 +115,8 @@ export function Chart({
   disableTriggers,
   disabledActions,
   input$: originalInput$,
-  lensTablesAdapter,
+  lensAdapters,
+  lensEmbeddableOutput$,
   isOnHistogramMode,
   isChartLoading,
   onResetChartHeight,
@@ -463,8 +472,8 @@ export function Chart({
           {...{
             services,
             lensAttributesContext,
-            dataView,
-            lensTablesAdapter,
+            lensAdapters,
+            lensEmbeddableOutput$,
             currentSuggestion,
             isFlyoutVisible,
             setIsFlyoutVisible,

src/plugins/unified_histogram/public/chart/chart_config_panel.test.tsx

@@ -13,7 +13,7 @@ import { act } from 'react-dom/test-utils';
 import { setTimeout } from 'timers/promises';
 import { dataViewWithTimefieldMock } from '../__mocks__/data_view_with_timefield';
 import { unifiedHistogramServicesMock } from '../__mocks__/services';
-import { lensTablesAdapterMock } from '../__mocks__/lens_table_adapter';
+import { lensAdaptersMock } from '../__mocks__/lens_adapters';
 import { ChartConfigPanel } from './chart_config_panel';
 import type { LensAttributesContext } from './utils/get_lens_attributes';
 
@@ -34,7 +34,7 @@ describe('ChartConfigPanel', () => {
           isFlyoutVisible: true,
           setIsFlyoutVisible: jest.fn(),
           isPlainRecord: true,
-          lensTablesAdapter: lensTablesAdapterMock,
+          lensAdapters: lensAdaptersMock,
           query: {
             esql: 'from test',
           },

src/plugins/unified_histogram/public/chart/chart_config_panel.tsx

@@ -6,20 +6,20 @@
  * Side Public License, v 1.
  */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { Observable } from 'rxjs';
 import type { AggregateQuery, Query } from '@kbn/es-query';
 import { isEqual } from 'lodash';
-import type { Suggestion } from '@kbn/lens-plugin/public';
-import type { DataView } from '@kbn/data-views-plugin/public';
+import type { LensEmbeddableOutput, Suggestion } from '@kbn/lens-plugin/public';
 import type { Datatable } from '@kbn/expressions-plugin/common';
 
-import type { UnifiedHistogramServices } from '../types';
+import type { UnifiedHistogramServices, UnifiedHistogramChartLoadEvent } from '../types';
 import type { LensAttributesContext } from './utils/get_lens_attributes';
 
 export function ChartConfigPanel({
   services,
   lensAttributesContext,
-  dataView,
-  lensTablesAdapter,
+  lensAdapters,
+  lensEmbeddableOutput$,
   currentSuggestion,
   isFlyoutVisible,
   setIsFlyoutVisible,
@@ -29,10 +29,10 @@ export function ChartConfigPanel({
 }: {
   services: UnifiedHistogramServices;
   lensAttributesContext: LensAttributesContext;
-  dataView: DataView;
   isFlyoutVisible: boolean;
   setIsFlyoutVisible: (flag: boolean) => void;
-  lensTablesAdapter?: Record<string, Datatable>;
+  lensAdapters?: UnifiedHistogramChartLoadEvent['adapters'];
+  lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>;
   currentSuggestion?: Suggestion;
   isPlainRecord?: boolean;
   query?: Query | AggregateQuery;
@@ -49,26 +49,25 @@ export function ChartConfigPanel({
         ...(datasourceState && { datasourceState }),
         ...(visualizationState && { visualizationState }),
       } as Suggestion;
-      if (!isEqual(updatedSuggestion, currentSuggestion)) {
-        onSuggestionChange?.(updatedSuggestion);
-      }
+      onSuggestionChange?.(updatedSuggestion);
     },
     [currentSuggestion, onSuggestionChange]
   );
 
   useEffect(() => {
+    const tablesAdapters = lensAdapters?.tables?.tables;
     const dataHasChanged =
-      Boolean(lensTablesAdapter) &&
-      !isEqual(previousAdapters.current, lensTablesAdapter) &&
+      Boolean(tablesAdapters) &&
+      !isEqual(previousAdapters.current, tablesAdapters) &&
       query !== previousQuery?.current;
     async function fetchLensConfigComponent() {
       const Component = await services.lens.EditLensConfigPanelApi();
       const panel = (
         <Component
           attributes={lensAttributesContext.attributes}
-          dataView={dataView}
-          adaptersTables={lensTablesAdapter}
-          updateAll={updateSuggestion}
+          updatePanelState={updateSuggestion}
+          lensAdapters={lensAdapters}
+          output$={lensEmbeddableOutput$}
           closeFlyout={() => {
             setIsFlyoutVisible(false);
           }}
@@ -78,7 +77,7 @@ export function ChartConfigPanel({
       );
       setEditLensConfigPanel(panel);
       previousSuggestion.current = currentSuggestion;
-      previousAdapters.current = lensTablesAdapter;
+      previousAdapters.current = tablesAdapters;
       if (dataHasChanged) {
         previousQuery.current = query;
       }
@@ -92,14 +91,14 @@ export function ChartConfigPanel({
   }, [
     lensAttributesContext.attributes,
     services.lens,
-    dataView,
     updateSuggestion,
     isPlainRecord,
     currentSuggestion,
     query,
     isFlyoutVisible,
-    lensTablesAdapter,
     setIsFlyoutVisible,
+    lensAdapters,
+    lensEmbeddableOutput$,
   ]);
 
   return isPlainRecord ? editLensConfigPanel : null;

src/plugins/unified_histogram/public/chart/histogram.test.tsx

@@ -8,6 +8,7 @@
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { Histogram } from './histogram';
 import React from 'react';
+import { of } from 'rxjs';
 import { unifiedHistogramServicesMock } from '../__mocks__/services';
 import { dataViewWithTimefieldMock } from '../__mocks__/data_view_with_timefield';
 import { createDefaultInspectorAdapters } from '@kbn/expressions-plugin/common';
@@ -166,24 +167,25 @@ describe('Histogram', () => {
     jest
       .spyOn(adapters.requests, 'getRequests')
       .mockReturnValue([{ response: { json: { rawResponse } } } as any]);
-    onLoad(true, undefined);
+    const embeddableOutput$ = jest.fn().mockReturnValue(of('output$'));
+    onLoad(true, undefined, embeddableOutput$);
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.loading,
       undefined
     );
-    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters: {} });
+    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters: {} }, embeddableOutput$);
     expect(buildBucketInterval.buildBucketInterval).not.toHaveBeenCalled();
     expect(useTimeRange.useTimeRange).toHaveBeenLastCalledWith(
       expect.objectContaining({ bucketInterval: undefined })
     );
     act(() => {
-      onLoad(false, adapters);
+      onLoad(false, adapters, embeddableOutput$);
     });
     expect(props.onTotalHitsChange).toHaveBeenLastCalledWith(
       UnifiedHistogramFetchStatus.complete,
       100
     );
-    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters });
+    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters }, embeddableOutput$);
     expect(buildBucketInterval.buildBucketInterval).toHaveBeenCalled();
     expect(useTimeRange.useTimeRange).toHaveBeenLastCalledWith(
       expect.objectContaining({ bucketInterval: mockBucketInterval })
@@ -236,7 +238,7 @@ describe('Histogram', () => {
       UnifiedHistogramFetchStatus.complete,
       100
     );
-    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters });
+    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters }, undefined);
   });
 
   it('should execute onLoad correctly for textbased language and no Lens suggestions', async () => {
@@ -272,7 +274,7 @@ describe('Histogram', () => {
       UnifiedHistogramFetchStatus.complete,
       20
     );
-    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters });
+    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters }, undefined);
   });
 
   it('should execute onLoad correctly for textbased language and Lens suggestions', async () => {
@@ -308,6 +310,6 @@ describe('Histogram', () => {
       UnifiedHistogramFetchStatus.complete,
       2
     );
-    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters });
+    expect(props.onChartLoad).toHaveBeenLastCalledWith({ adapters }, undefined);
   });
 });

src/plugins/unified_histogram/public/chart/histogram.tsx

@@ -14,7 +14,11 @@ import type { DefaultInspectorAdapters, Datatable } from '@kbn/expressions-plugi
 import type { IKibanaSearchResponse } from '@kbn/data-plugin/public';
 import type { estypes } from '@elastic/elasticsearch';
 import type { TimeRange } from '@kbn/es-query';
-import type { EmbeddableComponentProps, LensEmbeddableInput } from '@kbn/lens-plugin/public';
+import type {
+  EmbeddableComponentProps,
+  LensEmbeddableInput,
+  LensEmbeddableOutput,
+} from '@kbn/lens-plugin/public';
 import { RequestStatus } from '@kbn/inspector-plugin/public';
 import type { Observable } from 'rxjs';
 import {
@@ -47,7 +51,10 @@ export interface HistogramProps {
   disableTriggers?: LensEmbeddableInput['disableTriggers'];
   disabledActions?: LensEmbeddableInput['disabledActions'];
   onTotalHitsChange?: (status: UnifiedHistogramFetchStatus, result?: number | Error) => void;
-  onChartLoad?: (event: UnifiedHistogramChartLoadEvent) => void;
+  onChartLoad?: (
+    event: UnifiedHistogramChartLoadEvent,
+    lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>
+  ) => void;
   onFilter?: LensEmbeddableInput['onFilter'];
   onBrushEnd?: LensEmbeddableInput['onBrushEnd'];
   withDefaultActions: EmbeddableComponentProps['withDefaultActions'];
@@ -118,7 +125,11 @@ export function Histogram({
   }, [attributes, containerHeight, containerWidth]);
 
   const onLoad = useStableCallback(
-    (isLoading: boolean, adapters: Partial<DefaultInspectorAdapters> | undefined) => {
+    (
+      isLoading: boolean,
+      adapters: Partial<DefaultInspectorAdapters> | undefined,
+      lensEmbeddableOutput$?: Observable<LensEmbeddableOutput>
+    ) => {
       const lensRequest = adapters?.requests?.getRequests()[0];
       const requestFailed = lensRequest?.status === RequestStatus.ERROR;
       const json = lensRequest?.response?.json as
@@ -155,7 +166,7 @@ export function Histogram({
         setBucketInterval(newBucketInterval);
       }
 
-      onChartLoad?.({ adapters: adapters ?? {} });
+      onChartLoad?.({ adapters: adapters ?? {} }, lensEmbeddableOutput$);
     }
   );