[Dashboard Navigation] Make links panel available under technical preview

.buildkite/ftr_configs.yml

@@ -100,6 +100,7 @@ enabled:
   - test/functional/apps/dashboard_elements/controls/options_list/config.ts
   - test/functional/apps/dashboard_elements/image_embeddable/config.ts
   - test/functional/apps/dashboard_elements/input_control_vis/config.ts
+  - test/functional/apps/dashboard_elements/links/config.ts
   - test/functional/apps/dashboard_elements/markdown/config.ts
   - test/functional/apps/dashboard/group1/config.ts
   - test/functional/apps/dashboard/group2/config.ts

.github/CODEOWNERS

@@ -470,6 +470,7 @@ x-pack/plugins/lens @elastic/kibana-visualizations
 x-pack/plugins/license_api_guard @elastic/platform-deployment-management
 x-pack/plugins/license_management @elastic/platform-deployment-management
 x-pack/plugins/licensing @elastic/kibana-core
+src/plugins/links @elastic/kibana-presentation
 packages/kbn-lint-packages-cli @elastic/kibana-operations
 packages/kbn-lint-ts-projects-cli @elastic/kibana-operations
 x-pack/plugins/lists @elastic/security-detection-engine

.i18nrc.json

@@ -83,6 +83,7 @@
     ],
     "monaco": "packages/kbn-monaco/src",
     "navigation": "src/plugins/navigation",
+    "links": "src/plugins/links",
     "newsfeed": "src/plugins/newsfeed",
     "presentationUtil": "src/plugins/presentation_util",
     "randomSampling": "x-pack/packages/kbn-random-sampling",

docs/developer/plugin-list.asciidoc

@@ -238,6 +238,10 @@ in Kibana, e.g. visualizations. It has the form of a flyout panel.
 |Utilities for building Kibana plugins.
 
 
+|{kib-repo}blob/{branch}/src/plugins/links/README.md[links]
+|This plugin adds the Links panel which allows authors to create hard links to navigate on click and bring all context from the source dashboard to the destination dashboard.
+
+
 |{kib-repo}blob/{branch}/src/plugins/management/README.md[management]
 |This plugins contains the "Stack Management" page framework. It offers navigation and an API
 to link individual management section into it. This plugin does not contain any individual

package.json

@@ -496,6 +496,7 @@
     "@kbn/license-api-guard-plugin": "link:x-pack/plugins/license_api_guard",
     "@kbn/license-management-plugin": "link:x-pack/plugins/license_management",
     "@kbn/licensing-plugin": "link:x-pack/plugins/licensing",
+    "@kbn/links-plugin": "link:src/plugins/links",
     "@kbn/lists-plugin": "link:x-pack/plugins/lists",
     "@kbn/locator-examples-plugin": "link:examples/locator_examples",
     "@kbn/locator-explorer-plugin": "link:examples/locator_explorer",

packages/kbn-check-mappings-update-cli/current_mappings.json

@@ -1062,6 +1062,24 @@
       }
     }
   },
+  "links": {
+    "dynamic": false,
+    "properties": {
+      "id": {
+        "type": "text"
+      },
+      "title": {
+        "type": "text"
+      },
+      "description": {
+        "type": "text"
+      },
+      "links": {
+        "dynamic": false,
+        "properties": {}
+      }
+    }
+  },
   "lens": {
     "properties": {
       "title": {

packages/kbn-optimizer/limits.yml

@@ -87,6 +87,7 @@ pageLoadAssetSize:
   lens: 38000
   licenseManagement: 41817
   licensing: 29004
+  links: 44490
   lists: 22900
   logExplorer: 39045
   logsShared: 281060

packages/kbn-test/src/kbn_client/kbn_client_saved_objects.ts

@@ -96,6 +96,7 @@ const STANDARD_LIST_TYPES = [
   'dashboard',
   'search',
   'lens',
+  'links',
   'map',
   'cases',
   // synthetics based objects

src/core/server/integration_tests/saved_objects/migrations/group2/check_registered_types.test.ts

@@ -113,6 +113,7 @@ describe('checking migration metadata changes on all registered SO types', () =>
         "legacy-url-alias": "9b8cca3fbb2da46fd12823d3cd38fdf1c9f24bc8",
         "lens": "5cfa2c52b979b4f8df56dd13c477e152183468b9",
         "lens-ui-telemetry": "8c47a9e393861f76e268345ecbadfc8a5fb1e0bd",
+        "links": "39117a08966e9082d0f47b0b2e7e508499fc1e6d",
         "maintenance-window": "d893544460abad56ff7a0e25b78f78776dfe10d1",
         "map": "76c71023bd198fb6b1163b31bafd926fe2ceb9da",
         "metrics-data-source": "81b69dc9830699d9ead5ac8dcb9264612e2a3c89",

src/core/server/integration_tests/saved_objects/migrations/group3/type_registrations.test.ts

@@ -81,6 +81,7 @@ const previouslyRegisteredTypes = [
   'legacy-url-alias',
   'lens',
   'lens-ui-telemetry',
+  'links',
   'maintenance-window',
   'map',
   'maps-telemetry',

src/core/server/integration_tests/saved_objects/migrations/group5/dot_kibana_split.test.ts

@@ -438,6 +438,7 @@ describe('split .kibana index into multiple system indices', () => {
             "legacy-url-alias",
             "lens",
             "lens-ui-telemetry",
+            "links",
             "maintenance-window",
             "map",
             "metrics-data-source",

src/plugins/controls/public/control_group/actions/edit_control_flyout.tsx

@@ -92,7 +92,11 @@ export const EditControlFlyout = ({
     }
 
     closeFlyout();
-    await controlGroup.replaceEmbeddable(embeddable.id, inputToReturn, type);
+    if (panel.type === type) {
+      controlGroup.updateInputForChild(embeddable.id, inputToReturn);
+    } else {
+      await controlGroup.replaceEmbeddable(embeddable.id, inputToReturn, type);
+    }
   };
 
   return (

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/jest_setup.ts

@@ -6,7 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { pluginServices } from './public/services/plugin_services';
-import { registry } from './public/services/plugin_services.stub';
+import { setStubDashboardServices } from './public/services/mocks';
 
-pluginServices.setRegistry(registry.start({}));
+/**
+ * CAUTION: Be very mindful of the things you import in to this `jest_setup` file - anything that is imported
+ * here (either directly or implicitly through dependencies) will be **unable** to be mocked elsewhere!
+ *
+ * Refer to the "Caution" section here:
+ *   https://jestjs.io/docs/jest-object#jestmockmodulename-factory-options
+ */
+setStubDashboardServices();

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

@@ -47,11 +47,13 @@ beforeEach(async () => {
     .fn()
     .mockReturnValue(mockEmbeddableFactory);
   container = buildMockDashboard({
-    panels: {
-      '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
-        explicitInput: { firstName: 'Kibanana', id: '123' },
-        type: CONTACT_CARD_EMBEDDABLE,
-      }),
+    overrides: {
+      panels: {
+        '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
+          explicitInput: { firstName: 'Kibanana', id: '123' },
+          type: CONTACT_CARD_EMBEDDABLE,
+        }),
+      },
     },
   });
 

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_actions/expand_panel_action.test.tsx

@@ -31,11 +31,13 @@ pluginServices.getServices().embeddable.getEmbeddableFactory = jest
 
 beforeEach(async () => {
   container = buildMockDashboard({
-    panels: {
-      '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
-        explicitInput: { firstName: 'Sam', id: '123' },
-        type: CONTACT_CARD_EMBEDDABLE,
-      }),
+    overrides: {
+      panels: {
+        '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
+          explicitInput: { firstName: 'Sam', id: '123' },
+          type: CONTACT_CARD_EMBEDDABLE,
+        }),
+      },
     },
   });
 

src/plugins/dashboard/public/dashboard_actions/export_csv_action.test.tsx

@@ -46,11 +46,13 @@ describe('Export CSV action', () => {
     };
 
     container = buildMockDashboard({
-      panels: {
-        '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
-          explicitInput: { firstName: 'Kibanana', id: '123' },
-          type: CONTACT_CARD_EXPORTABLE_EMBEDDABLE,
-        }),
+      overrides: {
+        panels: {
+          '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
+            explicitInput: { firstName: 'Kibanana', id: '123' },
+            type: CONTACT_CARD_EXPORTABLE_EMBEDDABLE,
+          }),
+        },
       },
     });
 

src/plugins/dashboard/public/dashboard_actions/replace_panel_action.test.tsx

@@ -29,11 +29,13 @@ let container: DashboardContainer;
 let embeddable: ContactCardEmbeddable;
 beforeEach(async () => {
   container = buildMockDashboard({
-    panels: {
-      '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
-        explicitInput: { firstName: 'Sam', id: '123' },
-        type: CONTACT_CARD_EMBEDDABLE,
-      }),
+    overrides: {
+      panels: {
+        '123': getSampleDashboardPanel<ContactCardEmbeddableInput>({
+          explicitInput: { firstName: 'Sam', id: '123' },
+          type: CONTACT_CARD_EMBEDDABLE,
+        }),
+      },
     },
   });
 

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

@@ -18,7 +18,6 @@ import {
 } from '@kbn/embeddable-plugin/public';
 import { Toast } from '@kbn/core/public';
 
-import { DashboardPanelState } from '../../common';
 import { pluginServices } from '../services/plugin_services';
 import { dashboardReplacePanelActionStrings } from './_dashboard_actions_strings';
 import { DashboardContainer } from '../dashboard_container';
@@ -58,30 +57,15 @@ export class ReplacePanelFlyout extends React.Component<Props> {
 
   public onReplacePanel = async (savedObjectId: string, type: string, name: string) => {
     const { panelToRemove, container } = this.props;
-    const { w, h, x, y } = (container.getInput().panels[panelToRemove.id] as DashboardPanelState)
-      .gridData;
 
-    const { id } = await container.addNewEmbeddable<SavedObjectEmbeddableInput>(type, {
-      savedObjectId,
-    });
-
-    const { [panelToRemove.id]: omit, ...panels } = container.getInput().panels;
-
-    container.updateInput({
-      panels: {
-        ...panels,
-        [id]: {
-          ...panels[id],
-          gridData: {
-            ...(panels[id] as DashboardPanelState).gridData,
-            w,
-            h,
-            x,
-            y,
-          },
-        } as DashboardPanelState,
+    const id = await container.replaceEmbeddable<SavedObjectEmbeddableInput>(
+      panelToRemove.id,
+      {
+        savedObjectId,
       },
-    });
+      type,
+      true
+    );
 
     (container as DashboardContainer).setHighlightPanelId(id);
     this.showToast(name);