Hide all panel titles option at the dashboard level (#15006) (#15080)

* Hide all panel titles option at the dashboard level

* Hide panel titles in edit mode too

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

@@ -5,3 +5,4 @@ export const maximizePanel = createAction('MAXIMIZE_PANEl');
 export const minimizePanel = createAction('MINIMIZE_PANEL');
 export const updateIsFullScreenMode = createAction('UPDATE_IS_FULL_SCREEN_MODE');
 export const updateUseMargins = createAction('UPDATE_USE_MARGINS');
+export const updateHidePanelTitles = createAction('HIDE_PANEL_TITLES');

src/core_plugins/kibana/public/dashboard/dashboard_app.js

@@ -91,6 +91,7 @@ app.directive('dashboardApp', function ($injector) {
         $scope.model = {
           query: dashboardStateManager.getQuery(),
           useMargins: dashboardStateManager.getUseMargins(),
+          hidePanelTitles: dashboardStateManager.getHidePanelTitles(),
           darkTheme: dashboardStateManager.getDarkTheme(),
           timeRestore: dashboardStateManager.getTimeRestore(),
           title: dashboardStateManager.getTitle(),
@@ -181,6 +182,9 @@ app.directive('dashboardApp', function ($injector) {
         dashboardStateManager.addNewPanel(hit.id, 'search');
         notify.info(`Search successfully added to your dashboard`);
       };
+      $scope.$watch('model.hidePanelTitles', () => {
+        dashboardStateManager.setHidePanelTitles($scope.model.hidePanelTitles);
+      });
       $scope.$watch('model.useMargins', () => {
         dashboardStateManager.setUseMargins($scope.model.useMargins);
       });

src/core_plugins/kibana/public/dashboard/dashboard_container_api.js

@@ -24,4 +24,7 @@ export class DashboardContainerAPI extends ContainerAPI {
     this.dashboardState.saveState();
   }
 
+  getHidePanelTitles() {
+    return this.dashboardState.getHidePanelTitles();
+  }
 }

src/core_plugins/kibana/public/dashboard/dashboard_state_manager.js

@@ -13,6 +13,7 @@ import {
   minimizePanel,
   updateTitle,
   updateDescription,
+  updateHidePanelTitles,
 } from './actions';
 import { stateMonitorFactory } from 'ui/state_management/state_monitor_factory';
 import { createPanelState, getPersistedStateId } from './panel';
@@ -25,6 +26,7 @@ import {
   getTitle,
   getDescription,
   getUseMargins,
+  getHidePanelTitles,
 } from '../selectors';
 
 /**
@@ -85,6 +87,7 @@ export class DashboardStateManager {
     store.dispatch(setPanels(this.getPanels()));
     store.dispatch(updateViewMode(this.getViewMode()));
     store.dispatch(updateUseMargins(this.getUseMargins()));
+    store.dispatch(updateHidePanelTitles(this.getHidePanelTitles()));
     store.dispatch(updateIsFullScreenMode(this.getFullScreenMode()));
     store.dispatch(updateTitle(this.getTitle()));
     store.dispatch(updateDescription(this.getDescription()));
@@ -138,6 +141,10 @@ export class DashboardStateManager {
       store.dispatch(updateUseMargins(this.getUseMargins()));
     }
 
+    if (getHidePanelTitles(state) !== this.getHidePanelTitles()) {
+      store.dispatch(updateHidePanelTitles(this.getHidePanelTitles()));
+    }
+
     if (getFullScreenMode(state) !== this.getFullScreenMode()) {
       store.dispatch(updateIsFullScreenMode(this.getFullScreenMode()));
     }
@@ -270,6 +277,15 @@ export class DashboardStateManager {
     this.saveState();
   }
 
+  getHidePanelTitles() {
+    return this.appState.options.hidePanelTitles;
+  }
+
+  setHidePanelTitles(hidePanelTitles) {
+    this.appState.options.hidePanelTitles = hidePanelTitles;
+    this.saveState();
+  }
+
   getDarkTheme() {
     return this.appState.options.darkTheme;
   }

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export function PanelHeader({ title, actions, isViewOnlyMode }) {
+export function PanelHeader({ title, actions, isViewOnlyMode, hidePanelTitles }) {
-  if (isViewOnlyMode && !title) {
+  if (isViewOnlyMode && (!title || hidePanelTitles)) {
     return (
       <div className="panel-heading-floater">
         <div className="kuiMicroButtonGroup">
@@ -20,7 +20,7 @@ export function PanelHeader({ title, actions, isViewOnlyMode }) {
         title={title}
         aria-label={`Dashboard panel: ${title}`}
       >
-        {title}
+        {hidePanelTitles ? '' : title}
       </span>
 
       <div className="kuiMicroButtonGroup">
@@ -34,4 +34,5 @@ PanelHeader.propTypes = {
   isViewOnlyMode: PropTypes.bool,
   title: PropTypes.string,
   actions: PropTypes.node,
+  hidePanelTitles: PropTypes.bool.isRequired,
 };

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

@@ -18,7 +18,8 @@ import {
   getPanel,
   getMaximizedPanelId,
   getFullScreenMode,
-  getViewMode
+  getViewMode,
+  getHidePanelTitles,
 } from '../../selectors';
 
 const mapStateToProps = ({ dashboard }, { panelId }) => {
@@ -29,6 +30,7 @@ const mapStateToProps = ({ dashboard }, { panelId }) => {
     title: panel.title === undefined ? embeddableTitle : panel.title,
     isExpanded: getMaximizedPanelId(dashboard) === panelId,
     isViewOnlyMode: getFullScreenMode(dashboard) || getViewMode(dashboard) === DashboardViewMode.VIEW,
+    hidePanelTitles: getHidePanelTitles(dashboard),
   };
 };
 
@@ -38,7 +40,7 @@ const mapDispatchToProps = (dispatch, { panelId }) => ({
 });
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { isExpanded, isViewOnlyMode, title } = stateProps;
+  const { isExpanded, isViewOnlyMode, title, hidePanelTitles } = stateProps;
   const { onMaximizePanel, onMinimizePanel } = dispatchProps;
   const { panelId, embeddableFactory } = ownProps;
   let actions;
@@ -60,6 +62,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     title,
     actions,
     isViewOnlyMode,
+    hidePanelTitles,
   };
 };
 

src/core_plugins/kibana/public/dashboard/reducers/view.js

@@ -4,6 +4,7 @@ import {
   maximizePanel,
   minimizePanel,
   updateUseMargins,
+  updateHidePanelTitles,
   updateIsFullScreenMode,
 } from '../actions';
 
@@ -20,6 +21,11 @@ export const view = handleActions({
     useMargins: payload
   }),
 
+  [updateHidePanelTitles]: (state, { payload }) => ({
+    ...state,
+    hidePanelTitles: payload
+  }),
+
   [combineActions(maximizePanel, minimizePanel)]: (state, { payload }) => ({
     ...state,
     maximizedPanelId: payload
@@ -34,4 +40,5 @@ export const view = handleActions({
   viewMode: DashboardViewMode.VIEW,
   maximizedPanelId: undefined,
   useMargins: true,
+  hidePanelTitles: false,
 });

src/core_plugins/kibana/public/dashboard/saved_dashboard/saved_dashboard.js

@@ -28,6 +28,7 @@ module.factory('SavedDashboard', function (courier, config) {
           darkTheme: config.get('dashboard:defaultDarkTheme'),
           // for BWC reasons we can't default dashboards that already exist without this setting to true.
           useMargins: id ? false : true,
+          hidePanelTitles: false,
         }),
         uiStateJSON: '{}',
         version: 1,

src/core_plugins/kibana/public/dashboard/selectors/index.js

@@ -79,6 +79,11 @@ export const getViewMode = dashboard => dashboard.view.viewMode;
  * @return {boolean}
  */
 export const getFullScreenMode = dashboard => dashboard.view.isFullScreenMode;
+/**
+ * @param dashboard {DashboardState}
+ * @return {boolean}
+ */
+export const getHidePanelTitles = dashboard => dashboard.view.hidePanelTitles;
 /**
  * @param dashboard {DashboardState}
  * @return {string|undefined}

src/core_plugins/kibana/public/dashboard/top_nav/options.html

@@ -29,5 +29,17 @@
         Use margins between panels
       </span>
     </label>
+    <label class="kuiCheckBoxLabel">
+      <input
+        class="kuiCheckBox"
+        type="checkbox"
+        ng-model="model.hidePanelTitles"
+        ng-checked="model.hidePanelTitles"
+        data-test-subj="dashboardPanelTitlesCheckbox"
+      >
+      <span class="kuiCheckBoxLabel__text">
+        Hide all panel titles
+      </span>
+    </label>
   </div>
 </form>

src/core_plugins/kibana/public/discover/embeddable/search_embeddable_factory.js

@@ -31,7 +31,9 @@ export class SearchEmbeddableFactory extends EmbeddableFactory {
     searchScope.editPath = this.getEditPath(panel.id);
     return this.searchLoader.get(panel.id)
       .then(savedObject => {
-        searchScope.sharedItemTitle = panel.title !== undefined ? panel.title : savedObject.title;
+        if (!container.getHidePanelTitles()) {
+          searchScope.sharedItemTitle = panel.title !== undefined ? panel.title : savedObject.title;
+        }
         searchScope.savedObj = savedObject;
         searchScope.panel = panel;
         container.registerPanelIndexPattern(panel.panelIndex, savedObject.searchSource.get('index'));

src/core_plugins/kibana/public/selectors/dashboard_selectors.js

@@ -24,6 +24,7 @@ export const getViewMode = state => DashboardSelectors.getViewMode(getDashboard(
 export const getFullScreenMode = state => DashboardSelectors.getFullScreenMode(getDashboard(state));
 export const getMaximizedPanelId = state => DashboardSelectors.getMaximizedPanelId(getDashboard(state));
 export const getUseMargins = state => DashboardSelectors.getUseMargins(getDashboard(state));
+export const getHidePanelTitles = state => DashboardSelectors.getHidePanelTitles(getDashboard(state));
 
 export const getTitle = state => DashboardSelectors.getTitle(getDashboard(state));
 export const getDescription = state => DashboardSelectors.getDescription(getDashboard(state));

src/core_plugins/kibana/public/visualize/embeddable/visualize_embeddable_factory.js

@@ -30,7 +30,9 @@ export class VisualizeEmbeddableFactory extends EmbeddableFactory {
     visualizeScope.editUrl = this.getEditPath(panel.id);
     return this.visualizeLoader.get(panel.id)
       .then(savedObject => {
-        visualizeScope.sharedItemTitle = panel.title !== undefined ? panel.title : savedObject.title;
+        if (!container.getHidePanelTitles()) {
+          visualizeScope.sharedItemTitle = panel.title !== undefined ? panel.title : savedObject.title;
+        }
         visualizeScope.savedObj = savedObject;
         visualizeScope.panel = panel;
 

src/ui/public/embeddable/container_api.js

@@ -48,4 +48,8 @@ export class ContainerAPI {
   updatePanel(/*paneIndex, panelAttributes */) {
     throw new Error('Must implement updatePanel.');
   }
+
+  getHidePanelTitles() {
+    return this.dashboardState.getHidePanelTitles();
+  }
 }