Merge remote-tracking branch 'origin/master' into feature/merge-code

Author: zfy0701

package.json

@@ -112,6 +112,7 @@
     "@kbn/ui-framework": "1.0.0",
     "@types/json-stable-stringify": "^1.0.32",
     "@types/lodash.clonedeep": "^4.5.4",
+    "@types/react-grid-layout": "^0.16.7",
     "@types/recompose": "^0.30.5",
     "JSONStream": "1.1.1",
     "abortcontroller-polyfill": "^1.1.9",

src/legacy/core_plugins/kibana/public/dashboard/dashboard_strings.js renamed to src/legacy/core_plugins/kibana/public/dashboard/dashboard_strings.ts

@@ -27,9 +27,13 @@ import { DashboardViewMode } from './dashboard_view_mode';
  * end of the title.
  * @returns {string} A title to display to the user based on the above parameters.
  */
-export function getDashboardTitle(title, viewMode, isDirty) {
+export function getDashboardTitle(
+  title: string,
+  viewMode: DashboardViewMode,
+  isDirty: boolean
+): string {
   const isEditMode = viewMode === DashboardViewMode.EDIT;
-  let displayTitle;
+  let displayTitle: string;
 
   if (isEditMode && isDirty) {
     displayTitle = i18n.translate('kbn.dashboard.strings.dashboardUnsavedEditTitle', {

src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid.test.js

@@ -88,6 +88,6 @@ test('adjusts z-index of focused panel to be higher than siblings', () => {
   const panelElements = component.find('Connect(InjectIntl(DashboardPanelUi))');
   panelElements.first().prop('onPanelFocused')('1');
   const [gridItem1, gridItem2] = component.update().findWhere(el => el.key() === '1' || el.key() === '2');
-  expect(gridItem1.props.style.zIndex).toEqual('2');
+  expect(gridItem1.props.style.zIndex).toEqual(2);
   expect(gridItem2.props.style.zIndex).toEqual('auto');
 });

src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid.js renamed to src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid.tsx

@@ -17,35 +17,37 @@
  * under the License.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import { injectI18n } from '@kbn/i18n/react';
-import _ from 'lodash';
-import ReactGridLayout from 'react-grid-layout';
 import classNames from 'classnames';
+import _ from 'lodash';
+import React from 'react';
+import ReactGridLayout, { Layout } from 'react-grid-layout';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-import { PanelUtils } from '../panel/panel_utils';
-import { DashboardViewMode } from '../dashboard_view_mode';
-import { DashboardPanel } from '../panel';
+// @ts-ignore
+import sizeMe from 'react-sizeme';
+import { EmbeddableFactory } from 'ui/embeddable';
 import { toastNotifications } from 'ui/notify';
 import {
-  DashboardConstants,
   DASHBOARD_GRID_COLUMN_COUNT,
   DASHBOARD_GRID_HEIGHT,
+  DashboardConstants,
 } from '../dashboard_constants';
-import sizeMe from 'react-sizeme';
+import { DashboardViewMode } from '../dashboard_view_mode';
+import { DashboardPanel } from '../panel';
+import { PanelUtils } from '../panel/panel_utils';
+import { PanelState, PanelStateMap, Pre61PanelState } from '../selectors/types';
+import { GridData } from '../types';
 
-const config = { monitorWidth: true };
 let lastValidGridSize = 0;
 
 /**
  * This is a fix for a bug that stopped the browser window from automatically scrolling down when panels were made
  * taller than the current grid.
  * see https://github.com/elastic/kibana/issues/14710.
  */
-function ensureWindowScrollsToBottom(layout, oldResizeItem, l, placeholder, event) {
+function ensureWindowScrollsToBottom(event: { clientY: number; pageY: number }) {
   // The buffer is to handle the case where the browser is maximized and it's impossible for the mouse to move below
   // the screen, out of the window.  see https://github.com/elastic/kibana/issues/14737
   const WINDOW_BUFFER = 10;
@@ -62,6 +64,14 @@ function ResponsiveGrid({
   children,
   maximizedPanelId,
   useMargins,
+}: {
+  size: { width: number };
+  isViewMode: boolean;
+  layout: Layout[];
+  onLayoutChange: () => void;
+  children: JSX.Element[];
+  maximizedPanelId: string;
+  useMargins: boolean;
 }) {
   // This is to prevent a bug where view mode changes when the panel is expanded.  View mode changes will trigger
   // the grid to re-render, but when a panel is expanded, the size will be 0. Minimizing the panel won't cause the
@@ -94,8 +104,7 @@ function ResponsiveGrid({
       draggableHandle={isViewMode ? '.doesnt-exist' : '.dshPanel__dragger'}
       layout={layout}
       onLayoutChange={onLayoutChange}
-      measureBeforeMount={false}
-      onResize={ensureWindowScrollsToBottom}
+      onResize={({}, {}, {}, {}, event) => ensureWindowScrollsToBottom(event)}
     >
       {children}
     </ReactGridLayout>
@@ -104,15 +113,43 @@ function ResponsiveGrid({
 
 // Using sizeMe sets up the grid to be re-rendered automatically not only when the window size changes, but also
 // when the container size changes, so it works for Full Screen mode switches.
+const config = { monitorWidth: true };
 const ResponsiveSizedGrid = sizeMe(config)(ResponsiveGrid);
 
+interface Props extends ReactIntl.InjectedIntlProps {
+  panels: PanelStateMap;
+  getEmbeddableFactory: (panelType: string) => EmbeddableFactory;
+  dashboardViewMode: DashboardViewMode.EDIT | DashboardViewMode.VIEW;
+  onPanelsUpdated: (updatedPanels: PanelStateMap) => void;
+  maximizedPanelId?: string;
+  useMargins: boolean;
+}
 
-class DashboardGridUi extends React.Component {
-  constructor(props) {
+interface State {
+  focusedPanelIndex?: string;
+  isLayoutInvalid: boolean;
+  layout?: GridData[];
+}
+
+interface PanelLayout extends Layout {
+  i: string;
+}
+
+class DashboardGridUi extends React.Component<Props, State> {
+  // A mapping of panelIndexes to grid items so we can set the zIndex appropriately on the last focused
+  // item.
+  private gridItems = {} as { [key: string]: HTMLDivElement | null };
+
+  // A mapping of panel type to embeddable handlers. Because this function reaches out of react and into angular,
+  // if done in the render method, it appears to be triggering a scope.apply, which appears to be trigging a setState
+  // call inside TSVB visualizations.  Moving the function out of render appears to fix the issue.  See
+  // https://github.com/elastic/kibana/issues/14802 for more info.
+  // This is probably a better implementation anyway so the handlers are cached.
+  // @type {Object.<string, EmbeddableFactory>}
+  private embeddableFactoryMap: { [s: string]: EmbeddableFactory } = {};
+
+  constructor(props: Props) {
     super(props);
-    // A mapping of panelIndexes to grid items so we can set the zIndex appropriately on the last focused
-    // item.
-    this.gridItems = {};
 
     let isLayoutInvalid = false;
     let layout;
@@ -127,88 +164,83 @@ class DashboardGridUi extends React.Component {
         }),
         text: error.message,
       });
-      window.location = `#${DashboardConstants.LANDING_PAGE_PATH}`;
+      window.location.hash = DashboardConstants.LANDING_PAGE_PATH;
     }
     this.state = {
       focusedPanelIndex: undefined,
       layout,
       isLayoutInvalid,
     };
-
-    // A mapping of panel type to embeddable handlers. Because this function reaches out of react and into angular,
-    // if done in the render method, it appears to be triggering a scope.apply, which appears to be trigging a setState
-    // call inside TSVB visualizations.  Moving the function out of render appears to fix the issue.  See
-    // https://github.com/elastic/kibana/issues/14802 for more info.
-    // This is probably a better implementation anyway so the handlers are cached.
-    // @type {Object.<string, EmbeddableFactory>}
-    this.embeddableFactoryMap = {};
   }
 
-  buildLayoutFromPanels() {
+  public buildLayoutFromPanels(): GridData[] {
     return _.map(this.props.panels, panel => {
       // panel version numbers added in 6.1. Any panel without version number is assumed to be 6.0.0
-      const panelVersion = panel.version ? PanelUtils.parseVersion(panel.version) : PanelUtils.parseVersion('6.0.0');
+      const panelVersion =
+        'version' in panel
+          ? PanelUtils.parseVersion(panel.version)
+          : PanelUtils.parseVersion('6.0.0');
 
       if (panelVersion.major < 6 || (panelVersion.major === 6 && panelVersion.minor < 1)) {
-        PanelUtils.convertPanelDataPre_6_1(panel);
+        panel = PanelUtils.convertPanelDataPre_6_1(panel as Pre61PanelState);
       }
 
       if (panelVersion.major < 6 || (panelVersion.major === 6 && panelVersion.minor < 3)) {
-        PanelUtils.convertPanelDataPre_6_3(panel, this.props.useMargins);
+        PanelUtils.convertPanelDataPre_6_3(panel as PanelState, this.props.useMargins);
       }
 
-      return panel.gridData;
+      return (panel as PanelState).gridData;
     });
   }
 
-  createEmbeddableFactoriesMap(panels) {
+  public createEmbeddableFactoriesMap(panels: PanelStateMap) {
     Object.values(panels).map(panel => {
       if (!this.embeddableFactoryMap[panel.type]) {
         this.embeddableFactoryMap[panel.type] = this.props.getEmbeddableFactory(panel.type);
       }
     });
   }
 
-  componentWillMount() {
+  public componentWillMount() {
     this.createEmbeddableFactoriesMap(this.props.panels);
   }
 
-  componentWillReceiveProps(nextProps) {
+  public componentWillReceiveProps(nextProps: Props) {
     this.createEmbeddableFactoriesMap(nextProps.panels);
   }
 
-  onLayoutChange = (layout) => {
+  public onLayoutChange = (layout: PanelLayout[]) => {
     const { onPanelsUpdated, panels } = this.props;
-    const updatedPanels = layout.reduce((updatedPanelsAcc, panelLayout) => {
-      updatedPanelsAcc[panelLayout.i] = {
-        ...panels[panelLayout.i],
-        panelIndex: panelLayout.i,
-        gridData: _.pick(panelLayout, ['x', 'y', 'w', 'h', 'i'])
-      };
-      return updatedPanelsAcc;
-    }, []);
+    const updatedPanels = layout.reduce(
+      (updatedPanelsAcc, panelLayout) => {
+        updatedPanelsAcc[panelLayout.i] = {
+          ...panels[panelLayout.i],
+          panelIndex: panelLayout.i,
+          gridData: _.pick(panelLayout, ['x', 'y', 'w', 'h', 'i']),
+        };
+        return updatedPanelsAcc;
+      },
+      {} as PanelStateMap
+    );
     onPanelsUpdated(updatedPanels);
   };
 
-  onPanelFocused = focusedPanelIndex => {
+  public onPanelFocused = (focusedPanelIndex: string): void => {
     this.setState({ focusedPanelIndex });
   };
 
-  onPanelBlurred = blurredPanelIndex => {
+  public onPanelBlurred = (blurredPanelIndex: string): void => {
     if (this.state.focusedPanelIndex === blurredPanelIndex) {
       this.setState({ focusedPanelIndex: undefined });
     }
   };
 
-  renderDOM() {
-    const {
-      panels,
-      maximizedPanelId
-    } = this.props;
+  public renderDOM() {
+    const { panels, maximizedPanelId } = this.props;
     const { focusedPanelIndex } = this.state;
 
     // Part of our unofficial API - need to render in a consistent order for plugins.
-    const panelsInOrder = Object.keys(panels).map(key => panels[key]);
+    const panelsInOrder = Object.keys(panels).map((key: string) => panels[key] as PanelState);
     panelsInOrder.sort((panelA, panelB) => {
       if (panelA.gridData.y === panelB.gridData.y) {
         return panelA.gridData.x - panelB.gridData.x;
@@ -226,10 +258,12 @@ class DashboardGridUi extends React.Component {
       });
       return (
         <div
-          style={{ zIndex: focusedPanelIndex === panel.panelIndex ? '2' : 'auto' }}
+          style={{ zIndex: focusedPanelIndex === panel.panelIndex ? 2 : 'auto' }}
           className={classes}
           key={panel.panelIndex}
-          ref={reactGridItem => { this.gridItems[panel.panelIndex] = reactGridItem; }}
+          ref={reactGridItem => {
+            this.gridItems[panel.panelIndex] = reactGridItem;
+          }}
         >
           <DashboardPanel
             panelId={panel.panelIndex}
@@ -242,7 +276,7 @@ class DashboardGridUi extends React.Component {
     });
   }
 
-  render() {
+  public render() {
     if (this.state.isLayoutInvalid) {
       return null;
     }
@@ -263,13 +297,4 @@ class DashboardGridUi extends React.Component {
   }
 }
 
-DashboardGridUi.propTypes = {
-  panels: PropTypes.object.isRequired,
-  getEmbeddableFactory: PropTypes.func.isRequired,
-  dashboardViewMode: PropTypes.oneOf([DashboardViewMode.EDIT, DashboardViewMode.VIEW]).isRequired,
-  onPanelsUpdated: PropTypes.func.isRequired,
-  maximizedPanelId: PropTypes.string,
-  useMargins: PropTypes.bool.isRequired,
-};
-
 export const DashboardGrid = injectI18n(DashboardGridUi);

src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid_container.js renamed to src/legacy/core_plugins/kibana/public/dashboard/grid/dashboard_grid_container.ts

@@ -18,26 +18,36 @@
  */
 
 import { connect } from 'react-redux';
-import { DashboardGrid } from './dashboard_grid';
+import { Dispatch } from 'redux';
 import { updatePanels } from '../actions';
-import {
-  getPanels,
-  getViewMode,
-  getUseMargins,
-} from '../selectors';
+import { getPanels, getUseMargins, getViewMode } from '../selectors';
+import { DashboardViewMode, PanelStateMap } from '../selectors/types';
+import { DashboardGrid } from './dashboard_grid';
+
+interface DashboardGridContainerStateProps {
+  panels: PanelStateMap;
+  dashboardViewMode: DashboardViewMode;
+  useMargins: boolean;
+}
 
-const mapStateToProps = ({ dashboard }) => ({
+interface DashboardGridContainerDispatchProps {
+  onPanelsUpdated(updatedPanels: PanelStateMap): void;
+}
+
+const mapStateToProps = ({ dashboard }: any): any => ({
   panels: getPanels(dashboard),
   dashboardViewMode: getViewMode(dashboard),
   useMargins: getUseMargins(dashboard),
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  onPanelsUpdated: updatedPanels => dispatch(updatePanels(updatedPanels)),
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onPanelsUpdated: (updatedPanels: PanelStateMap) => dispatch(updatePanels(updatedPanels)),
 });
 
-export const DashboardGridContainer = connect(
+export const DashboardGridContainer = connect<
+  DashboardGridContainerStateProps,
+  DashboardGridContainerDispatchProps
+>(
   mapStateToProps,
   mapDispatchToProps
 )(DashboardGrid);
-

src/legacy/core_plugins/kibana/public/dashboard/grid/index.js renamed to src/legacy/core_plugins/kibana/public/dashboard/grid/index.ts

@@ -36,8 +36,8 @@ import { PanelHeader } from './panel_header';
 
 export interface DashboardPanelProps {
   viewOnlyMode: boolean;
-  onPanelFocused?: (panelIndex: PanelId) => {};
-  onPanelBlurred?: (panelIndex: PanelId) => {};
+  onPanelFocused?: (panelIndex: PanelId) => void;
+  onPanelBlurred?: (panelIndex: PanelId) => void;
   error?: string | object;
   destroy: () => void;
   containerState: ContainerState;