Sharing - Preserve Layout (#14707)

* Adding method to expose the dashboard app container size to reporting

* Adding a data-shared-items-container attribute to the viewport

* Making visualize tell us how large they are

* Removing the controller methods that returned the item size

* Moving the sharing attributes to be on the actual elements, so we can
figure out their dimensions

* Passing the savedObj to the Visualize elements adding the data- attrs

* Adding the title/description to the Dashboard

* Dispatching the initial title/description

* Reverting some accidental whitespace changes

* Fixing metadata selectors

* Adding newline at end of file...

* Putting the $emit('renderComplete') back

* Passing only the savedObj to the Visualize Editor Controller

* Setting the description on the $scope.vis so we don't have to pass the
SavedObj

* Reverting more TSVB title/description code

* Removing savedObj from scope

* Putting $scope.vis back to vis

docs/development/visualize/development-create-visualization.asciidoc

@@ -466,4 +466,4 @@ the field. The type can be either 'text' or 'html'.
 - *getValue(bucket)* : gets value for a specific bucket
 - *getField()* : gets the field used for this aggregation
 - *getFieldDisplayName()* : gets field display name
-- *getAggParams()* : gets the arguments to the aggregation
+- *getAggParams()* : gets the arguments to the aggregation

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

@@ -7,3 +7,8 @@ export {
   embeddableRenderError,
   destroyEmbeddable,
 } from './embeddables';
+
+export {
+  updateDescription,
+  updateTitle,
+} from './metadata';

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

@@ -0,0 +1,4 @@
+import { createAction } from 'redux-actions';
+
+export const updateDescription = createAction('UPDATE_DESCRIPTION');
+export const updateTitle = createAction('UPDATE_TITLE');

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

@@ -10,7 +10,9 @@ import {
   setPanels,
   updateUseMargins,
   updateIsFullScreenMode,
-  minimizePanel
+  minimizePanel,
+  updateTitle,
+  updateDescription,
 } from './actions';
 import { stateMonitorFactory } from 'ui/state_management/state_monitor_factory';
 import { createPanelState, getPersistedStateId } from './panel';
@@ -20,6 +22,8 @@ import {
   getFullScreenMode,
   getPanels,
   getPanel,
+  getTitle,
+  getDescription,
   getUseMargins,
 } from '../selectors';
 
@@ -82,6 +86,8 @@ export class DashboardStateManager {
     store.dispatch(updateViewMode(this.getViewMode()));
     store.dispatch(updateUseMargins(this.getUseMargins()));
     store.dispatch(updateIsFullScreenMode(this.getFullScreenMode()));
+    store.dispatch(updateTitle(this.getTitle()));
+    store.dispatch(updateDescription(this.getDescription()));
 
     this.changeListeners = [];
 
@@ -135,6 +141,14 @@ export class DashboardStateManager {
     if (getFullScreenMode(state) !== this.getFullScreenMode()) {
       store.dispatch(updateIsFullScreenMode(this.getFullScreenMode()));
     }
+
+    if (getTitle(state) !== this.getTitle()) {
+      store.dispatch(updateTitle(this.getTitle()));
+    }
+
+    if (getDescription(state) !== this.getDescription()) {
+      store.dispatch(updateDescription(this.getDescription()));
+    }
   }
 
   _handleStoreChanges() {

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

@@ -11,8 +11,13 @@ import {
   view,
 } from './view';
 
+import {
+  metadata,
+} from './metadata';
+
 export const dashboard = combineReducers({
   view,
   panels,
   embeddables,
+  metadata,
 });

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

@@ -0,0 +1,18 @@
+import { handleActions } from 'redux-actions';
+import { updateTitle, updateDescription } from '../actions';
+
+export const metadata = handleActions({
+  [updateTitle]: (state, { payload }) => ({
+    ...state,
+    title: payload
+  }),
+
+  [updateDescription]: (state, { payload }) => ({
+    ...state,
+    description: payload
+  }),
+
+}, {
+  title: '',
+  description: '',
+});

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

@@ -85,3 +85,18 @@ export const getFullScreenMode = dashboard => dashboard.view.isFullScreenMode;
  */
 export const getMaximizedPanelId = dashboard => dashboard.view.maximizedPanelId;
 
+/**
+ * @param dashboard {DashboardState}
+ * @return {MetadataState}
+ */
+export const getMetadata = dashboard => dashboard.metadata;
+/**
+ * @param dashboard {MetadataState}
+ * @return {string}
+ */
+export const getTitle = dashboard => dashboard.metadata.title;
+/**
+ * @param dashboard {MetadataState}
+ * @return {string}
+ */
+export const getDescription = dashboard => dashboard.metadata.description;

src/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport.js

@@ -7,11 +7,16 @@ export function DashboardViewport({
   maximizedPanelId,
   getEmbeddableFactory,
   panelCount,
+  title,
+  description,
   useMargins,
 }) {
   return (
     <div
       data-shared-items-count={panelCount}
+      data-shared-items-container
+      data-title={title}
+      data-description={description}
       className={useMargins ? 'dashboard-viewport-with-margins' : 'dashboard-viewport'}
     >
       <DashboardGrid
@@ -28,5 +33,7 @@ DashboardViewport.propTypes = {
   getEmbeddableFactory: PropTypes.func,
   maximizedPanelId: PropTypes.string,
   panelCount: PropTypes.number,
+  title: PropTypes.string,
+  description: PropTypes.string,
   useMargins: PropTypes.bool.isRequired,
 };

src/core_plugins/kibana/public/dashboard/viewport/dashboard_viewport_container.js

@@ -1,12 +1,14 @@
 import { connect } from 'react-redux';
 import { DashboardViewport } from './dashboard_viewport';
-import { getMaximizedPanelId, getPanels, getUseMargins } from '../selectors';
+import { getMaximizedPanelId, getPanels, getTitle, getDescription, getUseMargins } from '../selectors';
 
 const mapStateToProps = ({ dashboard }) => {
   const maximizedPanelId = getMaximizedPanelId(dashboard);
   return {
     maximizedPanelId,
     panelCount: Object.keys(getPanels(dashboard)).length,
+    description: getDescription(dashboard),
+    title: getTitle(dashboard),
     useMargins: getUseMargins(dashboard),
   };
 };

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

@@ -24,3 +24,6 @@ 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 getTitle = state => DashboardSelectors.getTitle(getDashboard(state));
+export const getDescription = state => DashboardSelectors.getDescription(getDashboard(state));

src/core_plugins/kibana/public/visualize/editor/editor.html

@@ -55,11 +55,9 @@
     ui-state="uiState"
     app-state="state"
     editor-mode="true"
-    data-shared-item
-    render-counter
-    data-title="{{savedVis.lastSavedTitle}}"
-    data-description="{{savedVis.description}}"
-    show-spy-panel="chrome.getVisible()">
+    show-spy-panel="chrome.getVisible()"
+    >
+
   </visualize>
 
 </visualize-app>

src/core_plugins/metrics/public/components/vis_editor.js

@@ -98,6 +98,8 @@ class VisEditor extends Component {
             onCommit={handleCommit}
             onToggleAutoApply={handleAutoApplyToggle}
             onChange={handleChange}
+            title={this.props.vis.title}
+            description={this.props.vis.description}
             dateFormat={this.props.config.get('dateFormat')}
           />
           <div className="vis-editor-hide-for-reporting">

src/core_plugins/metrics/public/components/vis_editor_visualization.js

@@ -98,6 +98,10 @@ class VisEditorVisualization extends Component {
           style={style}
           ref={(el) => this.visDiv = el}
           className="vis_editor__visualization"
+          data-shared-items-container
+          data-shared-item
+          data-title={this.props.title}
+          data-description={this.props.description}
         >
           <Visualization
             backgroundColor={visBackgroundColor}

src/ui/public/vis/editors/default/default.html

@@ -2,6 +2,13 @@
   <vis-editor-sidebar class="vis-editor-sidebar" />
 </div>
 
-<div class="vis-editor-canvas">
+<div
+  class="vis-editor-canvas"
+  data-shared-item
+  data-shared-items-container
+  render-counter
+  data-title="{{vis.title}}"
+  data-description="{{vis.description}}"
+>
   <visualization vis="vis" vis-data="visData" ui-state="uiState" search-source="searchSource" show-spy-panel="true" />
 </div>

src/ui/public/vis/editors/default/default.js

@@ -28,6 +28,7 @@ const defaultEditor = function ($rootScope, $compile) {
 
       const updateScope = () => {
         $scope.vis = this.vis;
+        $scope.savedObj = this.savedObj;
         $scope.visData = visData;
         $scope.uiState = this.vis.getUiState();
         $scope.searchSource = searchSource;

src/ui/public/visualize/visualization.js

@@ -119,9 +119,7 @@ uiModules
             .then(() => {
             // renderComplete
               $scope.$emit('renderComplete');
-              if (!$scope.vis.visualizeScope) {
-                $el.trigger('renderComplete');
-              }
+              $el.trigger('renderComplete');
             });
           $scope.$apply();
         }, 100);

src/ui/public/visualize/visualization_editor.js

@@ -13,7 +13,6 @@ uiModules
 
     return {
       restrict: 'E',
-      require: '?renderCounter',
       scope: {
         vis: '=',
         visData: '=',

src/ui/public/visualize/visualize.js

@@ -40,7 +40,7 @@ uiModules
         appState: '=?',
         uiState: '=?',
         savedId: '=?',
-        timeRange: '=?'
+        timeRange: '=?',
       },
       template: visualizeTemplate,
       link: async function ($scope, $el) {
@@ -52,6 +52,7 @@ uiModules
 
         $scope.vis = $scope.savedObj.vis;
         $scope.vis.visualizeScope = true;
+        $scope.vis.description = $scope.savedObj.description;
 
         if ($scope.timeRange) {
           $scope.vis.params.timeRange = {