Add a feature for custom panel titles

src/core_plugins/kibana/public/dashboard/actions/panels.js

@@ -3,6 +3,15 @@ import { createAction } from 'redux-actions';
 export const deletePanel = createAction('DELETE_PANEL');
 
 export const updatePanel = createAction('UPDATE_PANEL');
+export const resetPanelTitle = createAction('RESET_PANEl_TITLE');
+export const setPanelTitle = createAction('SET_PANEl_TITLE',
+  /**
+   * @param title {string}
+   * @param panelIndex {string}
+   */
+  (title, panelIndex) => ({ title, panelIndex })
+);
+
 
 function panelArrayToMap(panels) {
   const panelsMap = {};

src/core_plugins/kibana/public/dashboard/panel/__snapshots__/dashboard_panel.test.js.snap

@@ -21,7 +21,7 @@ exports[`DashboardPanel matches snapshot 1`] = `
         class="kuiMicroButtonGroup"
       >
         <div
-          class="kuiPopover kuiPopover--anchorRight dashboardPanelPopOver"
+          class="kuiPopover kuiPopover--anchorRight dashboardPanelPopOver kuiPopover--withTitle"
         >
           <span
             aria-label="Panel options"

src/core_plugins/kibana/public/dashboard/panel/dashboard_panel.test.js

@@ -5,7 +5,10 @@ import { DashboardPanel } from './dashboard_panel';
 import { DashboardViewMode } from '../dashboard_view_mode';
 import { PanelError } from '../panel/panel_error';
 import { store } from '../../store';
-import { updateViewMode } from '../actions';
+import {
+  updateViewMode,
+  setPanels,
+} from '../actions';
 import { Provider } from 'react-redux';
 import { getEmbeddableFactoryMock } from '../__tests__/get_embeddable_factories_mock';
 
@@ -26,6 +29,7 @@ function getProps(props = {}) {
 
 beforeAll(() => {
   store.dispatch(updateViewMode(DashboardViewMode.EDIT));
+  store.dispatch(setPanels([{ panelIndex: 'foo1' }]));
 });
 
 test('DashboardPanel matches snapshot', () => {

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header.js

@@ -1,7 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function PanelHeader({ title, actions }) {
+export function PanelHeader({ title, actions, isViewOnlyMode }) {
+  if (isViewOnlyMode && !title) {
+    return (
+      <div className="panel-heading-floater">
+        <div className="kuiMicroButtonGroup">
+          {actions}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="panel-heading">
       <span
@@ -21,6 +31,7 @@ export function PanelHeader({ title, actions }) {
 }
 
 PanelHeader.propTypes = {
+  isViewOnlyMode: PropTypes.bool,
   title: PropTypes.string,
   actions: PropTypes.node,
 };

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.js

@@ -15,16 +15,18 @@ import {
 
 import {
   getEmbeddable,
-  getEmbeddableTitle,
+  getPanel,
   getMaximizedPanelId,
   getFullScreenMode,
   getViewMode
 } from '../../selectors';
 
 const mapStateToProps = ({ dashboard }, { panelId }) => {
   const embeddable = getEmbeddable(dashboard, panelId);
+  const panel = getPanel(dashboard, panelId);
+  const embeddableTitle = embeddable ? embeddable.title : '';
   return {
-    title: embeddable ? getEmbeddableTitle(dashboard, panelId) : '',
+    title: panel.title === undefined ? embeddableTitle : panel.title,
     isExpanded: getMaximizedPanelId(dashboard) === panelId,
     isViewOnlyMode: getFullScreenMode(dashboard) || getViewMode(dashboard) === DashboardViewMode.VIEW,
   };
@@ -57,6 +59,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   return {
     title,
     actions,
+    isViewOnlyMode,
   };
 };
 

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_header_container.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import _ from 'lodash';
+import { mount } from 'enzyme';
+
+import { PanelHeaderContainer } from './panel_header_container';
+import { DashboardViewMode } from '../../dashboard_view_mode';
+import { store } from '../../../store';
+import {
+  updateViewMode,
+  setPanels,
+  setPanelTitle,
+  resetPanelTitle,
+  embeddableRenderFinished,
+} from '../../actions';
+import { getEmbeddableFactoryMock } from '../../__tests__/get_embeddable_factories_mock';
+import {
+  TestSubjects,
+} from 'ui_framework/src/test';
+
+function getProps(props = {}) {
+  const defaultTestProps = {
+    panelId: 'foo1',
+    embeddableFactory: getEmbeddableFactoryMock(),
+  };
+  return _.defaultsDeep(props, defaultTestProps);
+}
+
+let component;
+
+beforeAll(() => {
+  store.dispatch(updateViewMode(DashboardViewMode.EDIT));
+  store.dispatch(setPanels([{ panelIndex: 'foo1' }]));
+  store.dispatch(embeddableRenderFinished('foo1', { title: 'my embeddable title', editUrl: 'editme' }));
+});
+
+afterAll(() => {
+  component.unmount();
+});
+
+test('Panel header shows embeddable title when nothing is set on the panel', () => {
+  component = mount(<Provider store={store}><PanelHeaderContainer {...getProps()} /></Provider>);
+  expect(TestSubjects.getText(component, 'dashboardPanelTitle')).toBe('my embeddable title');
+});
+
+test('Panel header shows panel title when it is set on the panel', () => {
+  store.dispatch(setPanelTitle('my custom panel title', 'foo1'));
+  expect(TestSubjects.getText(component, 'dashboardPanelTitle')).toBe('my custom panel title');
+});
+
+test('Panel header shows no panel title when it is set to an empty string on the panel', () => {
+  store.dispatch(setPanelTitle('', 'foo1'));
+  expect(TestSubjects.getText(component, 'dashboardPanelTitle')).toBe('');
+});
+
+test('Panel header shows embeddable title when the panel title is reset', () => {
+  store.dispatch(resetPanelTitle('foo1'));
+  expect(TestSubjects.getText(component, 'dashboardPanelTitle')).toBe('my embeddable title');
+});

src/core_plugins/kibana/public/dashboard/panel/panel_header/panel_options_menu.js

@@ -2,13 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   KuiPopover,
-  KuiContextMenuPanel,
+  KuiContextMenu,
   KuiKeyboardAccessible,
 } from 'ui_framework/components';
 
-import { EditMenuItem } from './edit_menu_item';
-import { DeleteMenuItem } from './delete_menu_item';
-import { ExpandOrCollapseMenuItem } from './expand_or_collapse_menu_item';
+import { PanelOptionsMenuForm } from './panel_options_menu_form';
 
 export class PanelOptionsMenu extends React.Component {
   state = {
@@ -35,23 +33,74 @@ export class PanelOptionsMenu extends React.Component {
     this.props.toggleExpandedPanel();
   };
 
-  renderItems() {
-    const items = [
-      <EditMenuItem
-        key="0"
-        onEditPanel={this.onEditPanel}
-      />,
-      <ExpandOrCollapseMenuItem
-        key="2"
-        onToggleExpand={this.onToggleExpandPanel}
-        isExpanded={this.props.isExpanded}
-      />
+  buildMainMenuPanel() {
+    const { isExpanded } = this.props;
+    const mainPanelMenuItems = [
+      {
+        name: 'Edit visualization',
+        'data-test-subj': 'dashboardPanelEditLink',
+        icon: <span
+          aria-hidden="true"
+          className="kuiButton__icon kuiIcon fa-edit"
+        />,
+        onClick: this.onEditPanel,
+      },
+      {
+        name: 'Customize panel',
+        'data-test-subj': 'dashboardPanelOptionsSubMenuLink',
+        icon: <span
+          aria-hidden="true"
+          className="kuiButton__icon kuiIcon fa-edit"
+        />,
+        panel: 'panelSubOptionsMenu',
+      },
+      {
+        name: isExpanded ? 'Minimize' : 'Full screen',
+        'data-test-subj': 'dashboardPanelExpandIcon',
+        icon: <span
+          aria-hidden="true"
+          className={`kuiButton__icon kuiIcon ${isExpanded ? 'fa-compress' : 'fa-expand'}`}
+        />,
+        onClick: this.onToggleExpandPanel,
+      }
     ];
     if (!this.props.isExpanded) {
-      items.push(<DeleteMenuItem key="3" onDeletePanel={this.onDeletePanel} />);
+      mainPanelMenuItems.push({
+        name: 'Delete from dashboard',
+        'data-test-subj': 'dashboardPanelRemoveIcon',
+        icon: <span
+          aria-hidden="true"
+          className="kuiButton__icon kuiIcon fa-trash"
+        />,
+        onClick: this.onDeletePanel,
+      });
     }
 
-    return items;
+    return {
+      title: 'Options',
+      id: 'mainMenu',
+      items: mainPanelMenuItems,
+    };
+  }
+
+  buildPanelOptionsSubMenu() {
+    return {
+      title: 'Customize panel',
+      id: 'panelSubOptionsMenu',
+      content: <PanelOptionsMenuForm
+        onReset={this.props.onResetPanelTitle}
+        onUpdatePanelTitle={this.props.onUpdatePanelTitle}
+        title={this.props.panelTitle}
+        onClose={this.closePopover}
+      />,
+    };
+  }
+
+  renderPanels() {
+    return [
+      this.buildMainMenuPanel(),
+      this.buildPanelOptionsSubMenu(),
+    ];
   }
 
   render() {
@@ -74,17 +123,21 @@ export class PanelOptionsMenu extends React.Component {
         closePopover={this.closePopover}
         panelPaddingSize="none"
         anchorPosition="right"
+        withTitle
       >
-        <KuiContextMenuPanel
-          onClose={this.closePopover}
-          items={this.renderItems()}
+        <KuiContextMenu
+          initialPanelId="mainMenu"
+          panels={this.renderPanels()}
         />
       </KuiPopover>
     );
   }
 }
 
 PanelOptionsMenu.propTypes = {
+  panelTitle: PropTypes.string,
+  onUpdatePanelTitle: PropTypes.func.isRequired,
+  onResetPanelTitle: PropTypes.func.isRequired,
   editUrl: PropTypes.string.isRequired,
   toggleExpandedPanel: PropTypes.func.isRequired,
   isExpanded: PropTypes.bool.isRequired,