[7.x] [Inspector] Use "untitled" filename for panels with no title in…

… dashboard (#86333) (#87974)

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>

src/plugins/data/public/utils/table_inspector_view/components/data_view.tsx

@@ -38,6 +38,7 @@ interface DataViewComponentProps extends InspectorViewProps {
   uiActions: UiActionsStart;
   fieldFormats: FieldFormatsStart;
   isFilterable: (column: DatatableColumn) => boolean;
+  options: { fileName?: string };
 }
 
 class DataViewComponent extends Component<DataViewComponentProps, DataViewComponentState> {
@@ -122,7 +123,7 @@ class DataViewComponent extends Component<DataViewComponentProps, DataViewCompon
     return (
       <DataTableFormat
         data={this.state.datatable}
-        exportTitle={this.props.title}
+        exportTitle={this.props.options?.fileName || this.props.title}
         uiSettings={this.props.uiSettings}
         fieldFormats={this.props.fieldFormats}
         uiActions={this.props.uiActions}

src/plugins/data/public/utils/table_inspector_view/components/data_view_wrapper.tsx

@@ -41,6 +41,7 @@ export const getDataViewComponentWrapper = (
         fieldFormats={getStartServices().fieldFormats}
         uiActions={getStartServices().uiActions}
         isFilterable={getStartServices().isFilterable}
+        options={props.options}
       />
     );
   };

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts

@@ -55,9 +55,18 @@ export class InspectPanelAction implements Action<ActionContext> {
     if (!(await this.isCompatible({ embeddable })) || adapters === undefined) {
       throw new Error('Action not compatible with context');
     }
-
     const session = this.inspector.open(adapters, {
       title: embeddable.getTitle(),
+      options: {
+        fileName:
+          embeddable.getTitle() || // pick the visible title
+          embeddable.getInput().title || // or the custom title if used, but currently hidden
+          embeddable.getOutput().defaultTitle || // or the saved title
+          // in the very last resort use "untitled"
+          i18n.translate('embeddableApi.panel.inspectPanel.untitledEmbeddableFilename', {
+            defaultMessage: 'untitled',
+          }),
+      },
     });
     // Overwrite the embeddables.destroy() function to close the inspector
     // before calling the original destroy method

src/plugins/inspector/public/plugin.tsx

@@ -105,6 +105,7 @@ export class InspectorPublicPlugin implements Plugin<Setup, Start> {
             views={views}
             adapters={adapters}
             title={options.title}
+            options={options.options}
             dependencies={{ uiSettings: core.uiSettings }}
           />
         ),

src/plugins/inspector/public/types.ts

@@ -33,6 +33,10 @@ export interface InspectorViewProps<TAdapters extends Adapters = Adapters> {
    * The title that the inspector is currently using e.g. a visualization name.
    */
   title: string;
+  /**
+   * A set of specific options for each view.
+   */
+  options?: unknown;
 }
 
 /**
@@ -61,9 +65,11 @@ export interface InspectorViewDescription {
  * Options that can be specified when opening the inspector.
  * @property {string} title - An optional title, that will be shown in the header
  *    of the inspector. Can be used to give more context about what is being inspected.
+ * @property {unknown} options - A set of specific payload to be passed to inspector views
  */
 export interface InspectorOptions {
   title?: string;
+  options?: unknown;
 }
 
 export type InspectorSession = OverlayRef;

src/plugins/inspector/public/ui/inspector_panel.tsx

@@ -49,6 +49,7 @@ const inspectorTitle = i18n.translate('inspector.title', {
 interface InspectorPanelProps {
   adapters: Adapters;
   title?: string;
+  options?: unknown;
   views: InspectorViewDescription[];
   dependencies: {
     uiSettings: IUiSettingsClient;
@@ -76,6 +77,7 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
       }
     },
     title: PropTypes.string,
+    options: PropTypes.object,
   };
 
   state: InspectorPanelState = {
@@ -111,6 +113,7 @@ export class InspectorPanel extends Component<InspectorPanelProps, InspectorPane
         <this.state.selectedView.component
           adapters={this.props.adapters}
           title={this.props.title || ''}
+          options={this.props.options}
         />
       </Suspense>
     );