[Dashboard Usability] Unified panel options pane

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 panel title, panel description, and panel time range.
 
 * *Inspect* — Allows you to drill down into the panel data.
 

docs/user/dashboard/dashboard.asciidoc

@@ -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 *Edit panel settings* window to change the *Panel title*, *Panel description*, and *Panel 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/tutorial-create-a-dashboard-of-lens-panels.asciidoc

@@ -141,7 +141,7 @@ 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*.
 +
@@ -245,7 +245,7 @@ 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*.
 
@@ -278,7 +278,7 @@ 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*.
 
@@ -342,7 +342,7 @@ 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*.
 
@@ -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/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

@@ -21,6 +21,13 @@ import { genericEmbeddableInputIsEqual, omitGenericEmbeddableInput } from './dif
 function getPanelTitle(input: EmbeddableInput, output: EmbeddableOutput) {
   return input.hidePanelTitles ? '' : input.title === undefined ? output.defaultTitle : input.title;
 }
+function getPanelDescription(input: EmbeddableInput, output: EmbeddableOutput) {
+  return input.hidePanelTitles
+    ? ''
+    : input.description === undefined
+    ? output.defaultDescription
+    : input.description;
+}
 export abstract class Embeddable<
   TEmbeddableInput extends EmbeddableInput = EmbeddableInput,
   TEmbeddableOutput extends EmbeddableOutput = EmbeddableOutput,
@@ -61,6 +68,7 @@ export abstract class Embeddable<
 
     this.output = {
       title: getPanelTitle(input, output),
+      description: getPanelDescription(input, output),
       ...(this.reportsEmbeddableLoad()
         ? {}
         : {
@@ -187,6 +195,10 @@ export abstract class Embeddable<
     return this.output.title || '';
   }
 
+  public getDescription(): string {
+    return this.output.description || '';
+  }
+
   /**
    * Returns the top most parent embeddable, or itself if this embeddable
    * is not within a parent.
@@ -283,6 +295,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() },
     },
   }));
 

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

@@ -17,8 +17,7 @@ import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import { Subscription } from 'rxjs';
 import deepEqual from 'fast-deep-equal';
-import { CoreStart, OverlayStart, ThemeServiceStart } from '@kbn/core/public';
-import { toMountPoint } from '@kbn/kibana-react-plugin/public';
+import { CoreStart, ThemeServiceStart } from '@kbn/core/public';
 import { isPromise } from '@kbn/std';
 import { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
 import { MaybePromise } from '@kbn/utility-types';
@@ -43,13 +42,12 @@ import { ViewMode } from '../types';
 import { EmbeddablePanelError } from './embeddable_panel_error';
 import { RemovePanelAction } from './panel_header/panel_actions';
 import { AddPanelAction } from './panel_header/panel_actions/add_panel/add_panel_action';
-import { CustomizePanelTitleAction } from './panel_header/panel_actions/customize_title/customize_panel_action';
+import { CustomizePanelAction } from './panel_header/panel_actions/customize_panel/customize_panel_action';
 import { PanelHeader } from './panel_header/panel_header';
 import { InspectPanelAction } from './panel_header/panel_actions/inspect_panel_action';
 import { EditPanelAction } from '../actions';
-import { CustomizePanelModal } from './panel_header/panel_actions/customize_title/customize_panel_modal';
 import { EmbeddableStart } from '../../plugin';
-import { EmbeddableStateTransfer, isSelfStyledEmbeddable } from '..';
+import { EmbeddableStateTransfer, isSelfStyledEmbeddable, CommonlyUsedRange } from '..';
 
 const sortByOrderField = (
   { order: orderA }: { order?: number },
@@ -85,6 +83,8 @@ interface Props {
   getActions?: UiActionsService['getTriggerCompatibleActions'];
   getEmbeddableFactory?: EmbeddableStart['getEmbeddableFactory'];
   getAllEmbeddableFactories?: EmbeddableStart['getEmbeddableFactories'];
+  dateFormat?: string;
+  commonlyUsedRanges?: CommonlyUsedRange[];
   overlays?: CoreStart['overlays'];
   notifications?: CoreStart['notifications'];
   application?: CoreStart['application'];
@@ -121,7 +121,7 @@ interface InspectorPanelAction {
 }
 
 interface BasePanelActions {
-  customizePanelTitle: CustomizePanelTitleAction;
+  customizePanel: CustomizePanelAction;
   addPanel: AddPanelAction;
   inspectPanel: InspectPanelAction;
   removePanel: RemovePanelAction;
@@ -281,6 +281,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     if (this.state.error) contentAttrs['data-error'] = true;
 
     const title = this.props.embeddable.getTitle();
+    const description = this.props.embeddable.getDescription();
     const headerId = this.generateId();
 
     const selfStyledOptions = isSelfStyledEmbeddable(this.props.embeddable)
@@ -302,13 +303,14 @@ export class EmbeddablePanel extends React.Component<Props, State> {
             getActionContextMenuPanel={this.getActionContextMenuPanel}
             hidePanelTitle={this.state.hidePanelTitle || !!selfStyledOptions?.hideTitle}
             isViewMode={viewOnlyMode}
-            customizeTitle={
-              'customizePanelTitle' in this.state.universalActions
-                ? this.state.universalActions.customizePanelTitle
+            customizePanel={
+              'customizePanel' in this.state.universalActions
+                ? this.state.universalActions.customizePanel
                 : undefined
             }
             closeContextMenu={this.state.closeContextMenu}
             title={title}
+            description={description}
             index={this.props.index}
             badges={this.state.badges}
             notifications={this.state.notifications}
@@ -397,34 +399,16 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     ) {
       return actions;
     }
-    const createGetUserData = (overlays: OverlayStart, theme: ThemeServiceStart) =>
-      async function getUserData(context: { embeddable: IEmbeddable }) {
-        return new Promise<{ title: string | undefined; hideTitle?: boolean }>((resolve) => {
-          const session = overlays.openModal(
-            toMountPoint(
-              <CustomizePanelModal
-                embeddable={context.embeddable}
-                updateTitle={(title, hideTitle) => {
-                  session.close();
-                  resolve({ title, hideTitle });
-                }}
-                cancel={() => session.close()}
-              />,
-              { theme$: theme.theme$ }
-            ),
-            {
-              'data-test-subj': 'customizePanel',
-            }
-          );
-        });
-      };
 
     // Universal actions are exposed on the context menu for every embeddable, they bypass the trigger
     // registry.
     return {
       ...actions,
-      customizePanelTitle: new CustomizePanelTitleAction(
-        createGetUserData(this.props.overlays, this.props.theme)
+      customizePanel: new CustomizePanelAction(
+        this.props.overlays,
+        this.props.theme,
+        this.props.commonlyUsedRanges,
+        this.props.dateFormat
       ),
       addPanel: new AddPanelAction(
         this.props.getEmbeddableFactory,

src/plugins/ui_actions_enhanced/public/can_inherit_time_range.test.ts → src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/can_inherit_time_range.test.ts

@@ -7,9 +7,12 @@
  */
 
 import { canInheritTimeRange } from './can_inherit_time_range';
-import { HelloWorldContainer } from '@kbn/embeddable-plugin/public/lib/test_samples';
-import { HelloWorldEmbeddable } from '@kbn/embeddable-plugin/public/tests/fixtures';
-import { TimeRangeEmbeddable, TimeRangeContainer } from './test_helpers';
+import {
+  HelloWorldContainer,
+  TimeRangeContainer,
+  TimeRangeEmbeddable,
+} from '../../../../test_samples';
+import { HelloWorldEmbeddable } from '../../../../../tests/fixtures';
 
 test('canInheritTimeRange returns false if embeddable is inside container without a time range', () => {
   const embeddable = new TimeRangeEmbeddable(

src/plugins/ui_actions_enhanced/public/can_inherit_time_range.ts → src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_panel/can_inherit_time_range.ts

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { Embeddable, IContainer, ContainerInput } from '@kbn/embeddable-plugin/public';
 import type { TimeRange } from '@kbn/es-query';
-import { TimeRangeInput } from './custom_time_range_action';
+import { Embeddable, IContainer, ContainerInput } from '../../../../..';
+import { TimeRangeInput } from './customize_panel_action';
 
 interface ContainerTimeRangeInput extends ContainerInput<TimeRangeInput> {
   timeRange: TimeRange;