[8.13] [dashboard] fix Inspect panel action displays untitled instead…

… of panel title (#177516) (#177610)

# Backport

This will backport the following commits from `main` to `8.13`:
- [[dashboard] fix Inspect panel action displays untitled instead of
panel title (#177516)](#177516)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-02-22T15:27:12Z","message":"[dashboard]
fix Inspect panel action displays untitled instead of panel title
(#177516)\n\nFixes
https://github.com/elastic/kibana/issues/176870\r\n\r\nPR provides a
utility method for fetching title that falls back to\r\ndefault title
when title is not
provided.","sha":"c747a3b35dc086bfa3b8a1cbe67e276558c9a1f4","branchLabelMapping":{"^v8.14.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Presentation","release_note:skip","Feature:Drilldowns","v8.13.0","project:embeddableRebuild","v8.14.0"],"title":"[dashboard]
fix Inspect panel action displays untitled instead of panel
title","number":177516,"url":"https://github.com/elastic/kibana/pull/177516","mergeCommit":{"message":"[dashboard]
fix Inspect panel action displays untitled instead of panel title
(#177516)\n\nFixes
https://github.com/elastic/kibana/issues/176870\r\n\r\nPR provides a
utility method for fetching title that falls back to\r\ndefault title
when title is not
provided.","sha":"c747a3b35dc086bfa3b8a1cbe67e276558c9a1f4"}},"sourceBranch":"main","suggestedTargetBranches":["8.13"],"targetPullRequestStates":[{"branch":"8.13","label":"v8.13.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.14.0","branchLabelMappingKey":"^v8.14.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/177516","number":177516,"mergeCommit":{"message":"[dashboard]
fix Inspect panel action displays untitled instead of panel title
(#177516)\n\nFixes
https://github.com/elastic/kibana/issues/176870\r\n\r\nPR provides a
utility method for fetching title that falls back to\r\ndefault title
when title is not
provided.","sha":"c747a3b35dc086bfa3b8a1cbe67e276558c9a1f4"}}]}]
BACKPORT-->

Co-authored-by: Nathan Reese <[email protected]>

packages/presentation/presentation_publishing/index.ts

@@ -74,6 +74,7 @@ export {
   type PublishesWritablePanelDescription,
 } from './interfaces/publishes_panel_description';
 export {
+  getPanelTitle,
   apiPublishesPanelTitle,
   apiPublishesWritablePanelTitle,
   useDefaultPanelTitle,

packages/presentation/presentation_publishing/interfaces/publishes_panel_title.test.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 { BehaviorSubject } from 'rxjs';
+import { getPanelTitle } from './publishes_panel_title';
+
+describe('getPanelTitle', () => {
+  test('should return default title when title is undefined', () => {
+    const api = {
+      panelTitle: new BehaviorSubject<string | undefined>(undefined),
+      defaultPanelTitle: new BehaviorSubject<string | undefined>('default title'),
+    };
+    expect(getPanelTitle(api)).toBe('default title');
+  });
+
+  test('should return default title when title is empty string', () => {
+    const api = {
+      panelTitle: new BehaviorSubject<string | undefined>(''),
+      defaultPanelTitle: new BehaviorSubject<string | undefined>('default title'),
+    };
+    expect(getPanelTitle(api)).toBe('default title');
+  });
+
+  test('should return title when title is provided', () => {
+    const api = {
+      panelTitle: new BehaviorSubject<string | undefined>('custom title'),
+      defaultPanelTitle: new BehaviorSubject<string | undefined>('default title'),
+    };
+    expect(getPanelTitle(api)).toBe('custom title');
+  });
+});

packages/presentation/presentation_publishing/interfaces/publishes_panel_title.ts

@@ -14,6 +14,10 @@ export interface PublishesPanelTitle {
   defaultPanelTitle?: PublishingSubject<string | undefined>;
 }
 
+export function getPanelTitle(api: Partial<PublishesPanelTitle>): string | undefined {
+  return api.panelTitle?.value || api.defaultPanelTitle?.value;
+}
+
 export type PublishesWritablePanelTitle = PublishesPanelTitle & {
   setPanelTitle: (newTitle: string | undefined) => void;
   setHidePanelTitle: (hide: boolean | undefined) => void;
@@ -44,8 +48,11 @@ export const apiPublishesWritablePanelTitle = (
 /**
  * A hook that gets this API's panel title as a reactive variable which will cause re-renders on change.
  */
-export const usePanelTitle = (api: Partial<PublishesPanelTitle> | undefined) =>
-  useStateFromPublishingSubject(api?.panelTitle);
+export const usePanelTitle = (api: Partial<PublishesPanelTitle> | undefined) => {
+  const title = useStateFromPublishingSubject(api?.panelTitle);
+  const defaultTitle = useStateFromPublishingSubject(api?.defaultPanelTitle);
+  return title || defaultTitle;
+};
 
 /**
  * A hook that gets this API's hide panel title setting as a reactive variable which will cause re-renders on change.

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

@@ -10,6 +10,7 @@ import { apiCanLinkToLibrary, CanLinkToLibrary } from '@kbn/presentation-library
 import {
   apiCanAccessViewMode,
   EmbeddableApiContext,
+  getPanelTitle,
   PublishesPanelTitle,
   CanAccessViewMode,
   getInheritedViewMode,
@@ -57,7 +58,7 @@ export class AddToLibraryAction implements Action<EmbeddableApiContext> {
 
   public async execute({ embeddable }: EmbeddableApiContext) {
     if (!isApiCompatible(embeddable)) throw new IncompatibleActionError();
-    const panelTitle = embeddable.panelTitle?.value ?? embeddable.defaultPanelTitle?.value;
+    const panelTitle = getPanelTitle(embeddable);
     try {
       await embeddable.linkToLibrary();
       this.toastsService.addSuccess({

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

@@ -17,7 +17,11 @@ import {
   HasInspectorAdapters,
   type Adapters,
 } from '@kbn/inspector-plugin/public';
-import { EmbeddableApiContext, PublishesPanelTitle } from '@kbn/presentation-publishing';
+import {
+  EmbeddableApiContext,
+  getPanelTitle,
+  PublishesPanelTitle,
+} from '@kbn/presentation-publishing';
 import { pluginServices } from '../services/plugin_services';
 import { dashboardExportCsvActionStrings } from './_dashboard_actions_strings';
 
@@ -98,7 +102,7 @@ export class ExportCSVAction implements Action<ExportContext> {
             const postFix = datatables.length > 1 ? `-${i + 1}` : '';
             const untitledFilename = dashboardExportCsvActionStrings.getUntitledFilename();
 
-            memo[`${embeddable.panelTitle?.value || untitledFilename}${postFix}.csv`] = {
+            memo[`${getPanelTitle(embeddable) || untitledFilename}${postFix}.csv`] = {
               content: exporters.datatableToCSV(datatable, {
                 csvSeparator: this.uiSettings.get('csv:separator', ','),
                 quoteValues: this.uiSettings.get('csv:quoteValues', true),

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

@@ -10,7 +10,7 @@ import { EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
 import React from 'react';
 
 import { Toast } from '@kbn/core/public';
-
+import { getPanelTitle } from '@kbn/presentation-publishing';
 import { pluginServices } from '../services/plugin_services';
 import { ReplacePanelActionApi } from './replace_panel_action';
 import { dashboardReplacePanelActionStrings } from './_dashboard_actions_strings';
@@ -83,9 +83,7 @@ export class ReplacePanelFlyout extends React.Component<Props> {
           <EuiTitle size="m">
             <h2>
               <span>
-                {dashboardReplacePanelActionStrings.getFlyoutHeader(
-                  this.props.api.panelTitle?.value ?? this.props.api.defaultPanelTitle?.value
-                )}
+                {dashboardReplacePanelActionStrings.getFlyoutHeader(getPanelTitle(this.props.api))}
               </span>
             </h2>
           </EuiTitle>

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

@@ -14,6 +14,7 @@ import {
   CanAccessViewMode,
   EmbeddableApiContext,
   getInheritedViewMode,
+  getPanelTitle,
   PublishesPanelTitle,
 } from '@kbn/presentation-publishing';
 import { pluginServices } from '../services/plugin_services';
@@ -60,7 +61,7 @@ export class UnlinkFromLibraryAction implements Action<EmbeddableApiContext> {
 
   public async execute({ embeddable }: EmbeddableApiContext) {
     if (!unlinkActionIsCompatible(embeddable)) throw new IncompatibleActionError();
-    const title = embeddable.panelTitle?.value ?? embeddable.defaultPanelTitle?.value;
+    const title = getPanelTitle(embeddable);
     try {
       await embeddable.unlinkFromLibrary();
       this.toastsService.addSuccess({

src/plugins/dashboard/public/dashboard_container/embeddable/api/duplicate_dashboard_panel.ts

@@ -11,7 +11,7 @@ import {
   PanelNotFoundError,
   reactEmbeddableRegistryHasKey,
 } from '@kbn/embeddable-plugin/public';
-import { apiPublishesPanelTitle } from '@kbn/presentation-publishing';
+import { apiPublishesPanelTitle, getPanelTitle } from '@kbn/presentation-publishing';
 import { filter, map, max } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import { DashboardPanelState } from '../../../../common';
@@ -59,9 +59,7 @@ const duplicateReactEmbeddableInput = async (
   const child = dashboard.reactEmbeddableChildren.value[idToDuplicate];
   if (!child) throw new PanelNotFoundError();
 
-  const lastTitle = apiPublishesPanelTitle(child)
-    ? child.panelTitle.value ?? child.defaultPanelTitle?.value ?? ''
-    : '';
+  const lastTitle = apiPublishesPanelTitle(child) ? getPanelTitle(child) ?? '' : '';
   const newTitle = await incrementPanelTitle(dashboard, lastTitle);
   const id = uuidv4();
   const serializedState = await child.serializeState();

src/plugins/dashboard/public/dashboard_container/embeddable/dashboard_container.tsx

@@ -10,6 +10,7 @@ import { METRIC_TYPE } from '@kbn/analytics';
 import { Reference } from '@kbn/content-management-utils';
 import type { ControlGroupContainer } from '@kbn/controls-plugin/public';
 import type { KibanaExecutionContext, OverlayRef } from '@kbn/core/public';
+import { getPanelTitle } from '@kbn/presentation-publishing';
 import { RefreshInterval } from '@kbn/data-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
@@ -664,10 +665,7 @@ export class DashboardContainer
     for (const [id, panel] of Object.entries(this.getInput().panels)) {
       const title = await (async () => {
         if (reactEmbeddableRegistryHasKey(panel.type)) {
-          return (
-            this.reactEmbeddableChildren.value[id]?.panelTitle?.value ??
-            this.reactEmbeddableChildren.value[id]?.defaultPanelTitle?.value
-          );
+          return getPanelTitle(this.reactEmbeddableChildren.value[id]);
         }
         await this.untilEmbeddableLoaded(id);
         const child: IEmbeddable<EmbeddableInput, EmbeddableOutput> = this.getChild(id);

src/plugins/presentation_panel/public/panel_actions/customize_panel_action/customize_panel_editor.tsx

@@ -29,7 +29,11 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
-import { apiPublishesLocalUnifiedSearch, getInheritedViewMode } from '@kbn/presentation-publishing';
+import {
+  apiPublishesLocalUnifiedSearch,
+  getInheritedViewMode,
+  getPanelTitle,
+} from '@kbn/presentation-publishing';
 
 import { core } from '../../kibana_services';
 import { CustomizePanelActionApi } from './customize_panel_action';
@@ -59,9 +63,7 @@ export const CustomizePanelEditor = ({
   const [panelDescription, setPanelDescription] = useState(
     api.panelDescription?.value ?? api.defaultPanelDescription?.value
   );
-  const [panelTitle, setPanelTitle] = useState(
-    api.panelTitle?.value ?? api.defaultPanelTitle?.value
-  );
+  const [panelTitle, setPanelTitle] = useState(getPanelTitle(api));
   const [localTimeRange, setLocalTimeRange] = useState(
     api.localTimeRange?.value ?? api?.getFallbackTimeRange?.()
   );

src/plugins/presentation_panel/public/panel_actions/inspect_panel_action/inspect_panel_action.ts

@@ -11,6 +11,7 @@ import { apiHasInspectorAdapters, HasInspectorAdapters } from '@kbn/inspector-pl
 import { tracksOverlays } from '@kbn/presentation-containers';
 import {
   EmbeddableApiContext,
+  getPanelTitle,
   PublishesPanelTitle,
   HasParentApi,
 } from '@kbn/presentation-publishing';
@@ -56,7 +57,7 @@ export class InspectPanelAction implements Action<EmbeddableApiContext> {
     }
 
     const panelTitle =
-      embeddable.panelTitle?.value ??
+      getPanelTitle(embeddable) ||
       i18n.translate('presentationPanel.action.inspectPanel.untitledEmbeddableFilename', {
         defaultMessage: 'untitled',
       });

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/drilldown_shared.ts

@@ -12,7 +12,8 @@ import {
   type PresentationContainer,
 } from '@kbn/presentation-containers';
 import {
-  PublishesPanelTitle,
+  getPanelTitle,
+  type PublishesPanelTitle,
   type HasUniqueId,
   type HasParentApi,
 } from '@kbn/presentation-publishing';
@@ -63,7 +64,7 @@ export const createDrilldownTemplatesFromSiblings = (
         id: event.eventId,
         name: event.action.name,
         icon: 'dashboardApp',
-        description: child.panelTitle?.value ?? child.uuid ?? '',
+        description: getPanelTitle(child) ?? child.uuid ?? '',
         config: event.action.config,
         factoryId: event.action.factoryId,
         triggers: event.triggers,

x-pack/plugins/drilldowns/url_drilldown/public/lib/variables/context_variables.ts

@@ -18,6 +18,7 @@ import type {
   PublishesLocalUnifiedSearch,
   PublishesDataViews,
 } from '@kbn/presentation-publishing';
+import { getPanelTitle } from '@kbn/presentation-publishing';
 import type { UrlTemplateEditorVariable } from '@kbn/kibana-react-plugin/public';
 import { txtValue } from './i18n';
 import { deleteUndefinedKeys } from './util';
@@ -78,7 +79,7 @@ export const getContextScopeValues = (context: Partial<EmbeddableApiContext>): C
   return {
     panel: deleteUndefinedKeys({
       id: api.uuid,
-      title: api.panelTitle?.value ?? api.defaultPanelTitle?.value,
+      title: getPanelTitle(api),
       savedObjectId: api.savedObjectId?.value,
       query: api.parentApi?.localQuery?.value,
       timeRange: api.localTimeRange?.value ?? api.parentApi?.localTimeRange?.value,

x-pack/plugins/drilldowns/url_drilldown/public/lib/variables/event_variables.ts

@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { monaco } from '@kbn/monaco';
-import type { PublishesPanelTitle } from '@kbn/presentation-publishing';
+import { getPanelTitle, type PublishesPanelTitle } from '@kbn/presentation-publishing';
 import {
   ChartActionContext,
   isRangeSelectTriggerContext,
@@ -103,9 +103,10 @@ const getEventScopeFromRowClickTriggerContext = (
   for (const columnId of columns) {
     const column = data.table.columns.find(({ id }) => id === columnId);
     if (!column) {
-      // This should never happe, but in case it does we log data necessary for debugging.
+      // This should never happen, but in case it does we log data necessary for debugging.
+      const title = getPanelTitle(api);
       // eslint-disable-next-line no-console
-      console.error(data, api?.panelTitle ? `Embeddable [${api.panelTitle.value}]` : null);
+      console.error(data, title ? `Embeddable [${title}]` : null);
       throw new Error('Could not find a datatable column.');
     }
     values.push(row[columnId]);