[Dashboard Usability] Unified panel options pane (#148301)

docs/user/canvas.asciidoc

@@ -139,9 +139,7 @@ Add a panel that you saved in *Visualize Library* to your workpad.
 
 * *Edit Visualization* — Opens the visualization editor so that you can edit the panel.
 
-* *Edit panel title* — Allows you to change the panel title.
-
-* *Customize time range* — Allows you to change the time filter dedicated to the panel.
+* *Edit panel settings* — Allows you to change the title, description, and time range for the panel.
 
 * *Inspect* — Allows you to drill down into the panel data.
 

docs/user/dashboard/aggregation-based.asciidoc

@@ -238,9 +238,9 @@ To save the panel to the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 
 

docs/user/dashboard/dashboard.asciidoc

@@ -158,9 +158,9 @@ If you created the panel from the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 If you created the panel from the *Visualize Library*:
 
@@ -236,9 +236,9 @@ To save the panel to the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 [float]
 [[add-image]]
@@ -293,7 +293,7 @@ To make changes to the panel, use the panel menu options.
 +
 To make changes without changing the original version, open the panel menu, then click *More > Unlink from library*.
 
-* *Edit panel title* — Opens the *Customize panel* window to change the *Panel title*.
+* *Edit panel settings* — Opens the *Panel settings* window to change the *title*, *description*, and *time range*.
 
 * *More > Replace panel* — Opens the *Visualize Library* so you can select a new panel to replace the existing panel.
 
@@ -341,9 +341,11 @@ For more information about {kib} and {es} filters, refer to <<kibana-concepts-an
 
 To apply a panel-level time filter:
 
-. Open the panel menu, then select *More > Customize time range*.
+. Open the panel menu, then select *More > Edit panel settings*.
 
-. Enter the time range you want to view, then click *Add to panel*.
+. Toggle the switch labelled *Apply a custom time range*.
+
+. Enter the time range you want to view, then click *Save*.
 
 [float]
 [[apply-design-options]]

docs/user/dashboard/lens.asciidoc

@@ -380,9 +380,9 @@ To save the panel to the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 [float]
 [[lens-faq]]

docs/user/dashboard/timelion.asciidoc

@@ -271,9 +271,9 @@ To save the panel to the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 [float]
 [[timelion-tutorial-create-visualizations-with-mathematical-functions]]
@@ -406,9 +406,9 @@ To save the panel to the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 [float]
 [[timelion-tutorial-create-visualizations-withconditional-logic-and-tracking-trends]]
@@ -594,8 +594,8 @@ To save the panel to the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 For more information about *Timelion* conditions, refer to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].

docs/user/dashboard/tsvb.asciidoc

@@ -184,9 +184,9 @@ To save the panel to the dashboard:
 
 .. In the panel header, click *No Title*.
 
-.. On the *Customize panel* window, select *Show panel title*.
+.. On the *Panel settings* window, select *Show title*.
 
-.. Enter the *Panel title*, then click *Save*.
+.. Enter the *Title*, then click *Save*.
 
 [float]
 [[tsvb-faq]]
@@ -304,4 +304,4 @@ For other types of month over month calculations, use <<timelion, *Timelion*>> o
 
 Calculating the duration between the start and end of an event is unsupported in *TSVB* because *TSVB* requires correlation between different time periods. 
 *TSVB* requires that the duration is pre-calculated.
-====
+====

docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc

@@ -141,9 +141,9 @@ image::images/lens_lineChartMetricOverTimeBottomAxis_8.3.png[Bottom axis menu]
 
 Since you removed the axis labels, add a panel title:
 
-. Open the panel menu, then select *Edit panel title*.
+. Open the panel menu, then select *Edit panel settings*.
 
-. In the *Panel title* field, enter `Median of bytes`, then click *Save*.
+. In the *Title* field, enter `Median of bytes`, then click *Save*.
 +
 [role="screenshot"]
 image::images/lens_lineChartMetricOverTime_8.4.0.png[Line chart that displays metric data over time]
@@ -245,9 +245,9 @@ image::images/lens_pieChartCompareSubsetOfDocs_7.16.png[Pie chart that compares
 
 Add a panel title:
 
-. Open the panel menu, then select *Edit panel title*.
+. Open the panel menu, then select *Edit panel settings*.
 
-. In the *Panel title* field, enter `Sum of bytes from large requests`, then click *Save*.
+. In the *Title* field, enter `Sum of bytes from large requests`, then click *Save*.
 
 [discrete]
 [[histogram]]
@@ -278,9 +278,9 @@ image::images/lens_barChartDistributionOfNumberField_7.16.png[Bar chart that dis
 
 Add a panel title:
 
-. Open the panel menu, then select *Edit panel title*.
+. Open the panel menu, then select *Edit panel settings*.
 
-. In the *Panel title* field, enter `Website traffic`, then click *Save*.
+. In the *Title* field, enter `Website traffic`, then click *Save*.
 
 [discrete]
 [[treemap]]
@@ -342,9 +342,9 @@ image::images/lens_treemapMultiLevelChart_7.16.png[Treemap visualization]
 
 Add a panel title:
 
-. Open the panel menu, then select *Edit panel title*.
+. Open the panel menu, then select *Edit panel settings*.
 
-. In the *Panel title* field, enter `Page views by location and referrer`, then click *Save*.
+. In the *Title* field, enter `Page views by location and referrer`, then click *Save*.
 
 [float]
 [[arrange-the-lens-panels]]
@@ -376,4 +376,4 @@ Now that you have a complete overview of your web server data, save the dashboar
 
 . Select *Store time with dashboard*.
 
-. Click *Save*.
+. Click *Save*.

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

@@ -156,7 +156,10 @@ export const useDashboardMenuItems = ({
         iconType: 'pencil',
         testId: 'dashboardEditMode',
         className: 'eui-hideFor--s eui-hideFor--xs', // hide for small screens - editing doesn't work in mobile mode.
-        run: () => dispatch(setViewMode(ViewMode.EDIT)),
+        run: () => {
+          dashboardContainer.clearOverlays();
+          dispatch(setViewMode(ViewMode.EDIT));
+        },
       } as TopNavMenuData,
 
       quickSave: {

src/plugins/discover/public/embeddable/saved_search_embeddable.tsx

@@ -131,6 +131,7 @@ export class SavedSearchEmbeddable
       initialInput,
       {
         defaultTitle: savedSearch.title,
+        defaultDescription: savedSearch.description,
         editUrl,
         editPath,
         editApp: 'discover',
@@ -595,10 +596,6 @@ export class SavedSearchEmbeddable
     return this.inspectorAdapters;
   }
 
-  public getDescription() {
-    return this.savedSearch.description;
-  }
-
   /**
    * @returns Local/panel-level array of filters for Saved Search embeddable
    */

src/plugins/embeddable/common/types.ts

@@ -24,6 +24,7 @@ export enum ViewMode {
 export type EmbeddableInput = {
   viewMode?: ViewMode;
   title?: string;
+  description?: string;
   /**
    * Note this is not a saved object id. It is used to uniquely identify this
    * Embeddable instance from others (e.g. inside a container).  It's possible to

src/plugins/embeddable/kibana.json

@@ -8,7 +8,7 @@
     "githubTeam": "kibana-app-services"
   },
   "description": "Adds embeddables service to Kibana",
-  "requiredPlugins": ["inspector", "uiActions"],
+  "requiredPlugins": ["data", "inspector", "uiActions"],
   "extraPublicDirs": ["common"],
   "requiredBundles": ["savedObjects", "kibanaReact", "kibanaUtils"]
 }

src/plugins/embeddable/public/lib/embeddables/embeddable.tsx

@@ -19,8 +19,14 @@ import { EmbeddableInput, ViewMode } from '../../../common/types';
 import { genericEmbeddableInputIsEqual, omitGenericEmbeddableInput } from './diff_embeddable_input';
 
 function getPanelTitle(input: EmbeddableInput, output: EmbeddableOutput) {
-  return input.hidePanelTitles ? '' : input.title === undefined ? output.defaultTitle : input.title;
+  if (input.hidePanelTitles) return '';
+  return input.title ?? output.defaultTitle;
 }
+function getPanelDescription(input: EmbeddableInput, output: EmbeddableOutput) {
+  if (input.hidePanelTitles) return '';
+  return input.description ?? output.defaultDescription;
+}
+
 export abstract class Embeddable<
   TEmbeddableInput extends EmbeddableInput = EmbeddableInput,
   TEmbeddableOutput extends EmbeddableOutput = EmbeddableOutput,
@@ -61,6 +67,7 @@ export abstract class Embeddable<
 
     this.output = {
       title: getPanelTitle(input, output),
+      description: getPanelDescription(input, output),
       ...(this.reportsEmbeddableLoad()
         ? {}
         : {
@@ -184,7 +191,11 @@ export abstract class Embeddable<
   }
 
   public getTitle(): string {
-    return this.output.title || '';
+    return this.output.title ?? '';
+  }
+
+  public getDescription(): string {
+    return this.output.description ?? '';
   }
 
   /**
@@ -283,6 +294,7 @@ export abstract class Embeddable<
       this.inputSubject.next(newInput);
       this.updateOutput({
         title: getPanelTitle(this.input, this.output),
+        description: getPanelDescription(this.input, this.output),
       } as Partial<TEmbeddableOutput>);
       if (oldLastReloadRequestTime !== newInput.lastReloadRequestTime) {
         this.reload();

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

@@ -26,7 +26,9 @@ export interface EmbeddableOutput {
   editApp?: string;
   editPath?: string;
   defaultTitle?: string;
+  defaultDescription?: string;
   title?: string;
+  description?: string;
   editable?: boolean;
   // Whether the embeddable can be edited inline by re-requesting the explicit input from the user
   editableWithExplicitInput?: boolean;
@@ -166,6 +168,11 @@ export interface IEmbeddable<
    */
   getTitle(): string | undefined;
 
+  /**
+   * Returns the description of this embeddable.
+   */
+  getDescription(): string | undefined;
+
   /**
    * Returns the top most parent embeddable, or itself if this embeddable
    * is not within a parent.

src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx

@@ -525,7 +525,7 @@ test('Runs customize panel action on title click when in edit mode', async () =>
     ...s,
     universalActions: {
       ...s.universalActions,
-      customizePanelTitle: { execute: titleExecute, isCompatible: jest.fn() },
+      customizePanel: { execute: titleExecute, isCompatible: jest.fn() },
     },
   }));