[Links] Panel Placement

packages/kbn-optimizer/limits.yml

@@ -95,7 +95,7 @@ pageLoadAssetSize:
   ml: 82187
   monitoring: 80000
   navigation: 37269
-  navigationEmbeddable: 17892
+  navigationEmbeddable: 44490
   newsfeed: 42228
   noDataPage: 5000
   observability: 115443

src/plugins/controls/public/control_group/embeddable/control_group_container.tsx

@@ -222,22 +222,22 @@ export class ControlGroupContainer extends Container<
 
   public async addDataControlFromField(controlProps: AddDataControlProps) {
     const panelState = await getDataControlPanelState(this.getInput(), controlProps);
-    return this.createAndSaveEmbeddable(panelState.type, panelState);
+    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
   }
 
   public addOptionsListControl(controlProps: AddOptionsListControlProps) {
     const panelState = getOptionsListPanelState(this.getInput(), controlProps);
-    return this.createAndSaveEmbeddable(panelState.type, panelState);
+    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
   }
 
   public addRangeSliderControl(controlProps: AddRangeSliderControlProps) {
     const panelState = getRangeSliderPanelState(this.getInput(), controlProps);
-    return this.createAndSaveEmbeddable(panelState.type, panelState);
+    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
   }
 
   public addTimeSliderControl() {
     const panelState = getTimeSliderPanelState(this.getInput());
-    return this.createAndSaveEmbeddable(panelState.type, panelState);
+    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
   }
 
   public openAddDataControlFlyout = openAddDataControlFlyout;
@@ -283,15 +283,19 @@ export class ControlGroupContainer extends Container<
 
   protected createNewPanelState<TEmbeddableInput extends ControlInput = ControlInput>(
     factory: EmbeddableFactory<ControlInput, ControlOutput, ControlEmbeddable>,
-    partial: Partial<TEmbeddableInput> = {}
-  ): ControlPanelState<TEmbeddableInput> {
-    const panelState = super.createNewPanelState(factory, partial);
+    partial: Partial<TEmbeddableInput> = {},
+    otherPanels: ControlGroupInput['panels']
+  ) {
+    const { newPanel } = super.createNewPanelState(factory, partial);
     return {
-      order: getNextPanelOrder(this.getInput().panels),
-      width: this.getInput().defaultControlWidth,
-      grow: this.getInput().defaultControlGrow,
-      ...panelState,
-    } as ControlPanelState<TEmbeddableInput>;
+      newPanel: {
+        order: getNextPanelOrder(this.getInput().panels),
+        width: this.getInput().defaultControlWidth,
+        grow: this.getInput().defaultControlGrow,
+        ...newPanel,
+      } as ControlPanelState<TEmbeddableInput>,
+      otherPanels,
+    };
   }
 
   protected onRemoveEmbeddable(idToRemove: string) {

src/plugins/dashboard/public/dashboard_actions/clone_panel_action.tsx

@@ -22,10 +22,9 @@ import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
 
 import { type DashboardPanelState } from '../../common';
 import { pluginServices } from '../services/plugin_services';
-import { createPanelState } from '../dashboard_container/component/panel';
 import { dashboardClonePanelActionStrings } from './_dashboard_actions_strings';
+import { placeClonePanel } from '../dashboard_container/component/panel_placement';
 import { DASHBOARD_CONTAINER_TYPE, type DashboardContainer } from '../dashboard_container';
-import { placePanelBeside } from '../dashboard_container/component/panel/dashboard_panel_placement';
 
 export const ACTION_CLONE_PANEL = 'clonePanel';
 
@@ -82,6 +81,7 @@ export class ClonePanelAction implements Action<ClonePanelActionContext> {
       throw new PanelNotFoundError();
     }
 
+    // Clone panel input
     const clonedPanelState: PanelState<EmbeddableInput> = await (async () => {
       const newTitle = await this.getCloneTitle(embeddable, embeddable.getTitle() || '');
       const id = uuidv4();
@@ -110,18 +110,20 @@ export class ClonePanelAction implements Action<ClonePanelActionContext> {
       'data-test-subj': 'addObjectToContainerSuccess',
     });
 
-    const { otherPanels, newPanel } = createPanelState(
-      clonedPanelState,
-      dashboard.getInput().panels,
-      placePanelBeside,
-      {
-        width: panelToClone.gridData.w,
-        height: panelToClone.gridData.h,
-        currentPanels: dashboard.getInput().panels,
-        placeBesideId: panelToClone.explicitInput.id,
-        scrollToPanel: true,
-      }
-    );
+    const { newPanelPlacement, otherPanels } = placeClonePanel({
+      width: panelToClone.gridData.w,
+      height: panelToClone.gridData.h,
+      currentPanels: dashboard.getInput().panels,
+      placeBesideId: panelToClone.explicitInput.id,
+    });
+
+    const newPanel = {
+      ...clonedPanelState,
+      gridData: {
+        ...newPanelPlacement,
+        i: clonedPanelState.explicitInput.id,
+      },
+    };
 
     dashboard.updateInput({
       panels: {

src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_editing_toolbar.tsx

@@ -12,8 +12,9 @@ import { METRIC_TYPE } from '@kbn/analytics';
 import { useEuiTheme } from '@elastic/eui';
 
 import { AddFromLibraryButton, Toolbar, ToolbarButton } from '@kbn/shared-ux-button-toolbar';
-import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
+import { EmbeddableFactory, EmbeddableInput } from '@kbn/embeddable-plugin/public';
 import { BaseVisType, VisTypeAlias } from '@kbn/visualizations-plugin/public';
+import { isExplicitInputWithAttributes } from '@kbn/embeddable-plugin/public';
 
 import { getCreateVisualizationButtonTitle } from '../_dashboard_app_strings';
 import { EditorMenu } from './editor_menu';
@@ -83,15 +84,26 @@ export function DashboardEditingToolbar() {
         trackUiMetric(METRIC_TYPE.CLICK, embeddableFactory.type);
       }
 
-      let explicitInput: Awaited<ReturnType<typeof embeddableFactory.getExplicitInput>>;
+      let explicitInput: Partial<EmbeddableInput>;
+      let attributes: unknown;
       try {
-        explicitInput = await embeddableFactory.getExplicitInput(undefined, dashboard);
+        const explicitInputReturn = await embeddableFactory.getExplicitInput(undefined, dashboard);
+        if (isExplicitInputWithAttributes(explicitInputReturn)) {
+          explicitInput = explicitInputReturn.newInput;
+          attributes = explicitInputReturn.attributes;
+        } else {
+          explicitInput = explicitInputReturn;
+        }
       } catch (e) {
         // error likely means user canceled embeddable creation
         return;
       }
 
-      const newEmbeddable = await dashboard.addNewEmbeddable(embeddableFactory.type, explicitInput);
+      const newEmbeddable = await dashboard.addNewEmbeddable(
+        embeddableFactory.type,
+        explicitInput,
+        attributes
+      );
 
       if (newEmbeddable) {
         dashboard.setScrollToPanelId(newEmbeddable.id);

src/plugins/dashboard/public/dashboard_container/_dashboard_container.scss

@@ -1,7 +1,6 @@
 @import '../../../embeddable/public/variables';
 
 @import './component/grid/index';
-@import './component/panel/index';
 @import './component/viewport/index';
 
 .dashboardContainer, .dashboardViewport {

src/plugins/dashboard/public/dashboard_container/component/grid/_index.scss

@@ -1 +1,2 @@
 @import './dashboard_grid';
+@import './dashboard_panel';

src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid.tsx

@@ -125,8 +125,7 @@ export const DashboardGrid = ({ viewportWidth }: { viewportWidth: number }) => {
       className={classes}
       width={viewportWidth}
       breakpoints={breakpoints}
-      onDragStop={onLayoutChange}
-      onResizeStop={onLayoutChange}
+      onLayoutChange={onLayoutChange}
       isResizable={!expandedPanelId}
       isDraggable={!expandedPanelId}
       rowHeight={DASHBOARD_GRID_HEIGHT}

src/plugins/dashboard/public/dashboard_container/component/panel/index.ts → src/plugins/dashboard/public/dashboard_container/component/panel_placement/index.ts

@@ -6,4 +6,6 @@
  * Side Public License, v 1.
  */
 
-export { createPanelState } from './create_panel_state';
+export { placePanel } from './place_panel';
+
+export { placeClonePanel } from './place_clone_panel_strategy';