Introduce redux state management for react portion of dashboard

package.json

@@ -184,8 +184,9 @@
     "react-test-renderer": "15.6.1",
     "react-toggle": "3.0.1",
     "reactcss": "1.0.7",
-    "redux": "3.0.0",
-    "redux-thunk": "0.1.0",
+    "redux": "3.7.2",
+    "redux-actions": "2.2.1",
+    "redux-thunk": "2.2.0",
     "request": "2.61.0",
     "resize-observer-polyfill": "1.2.1",
     "rimraf": "2.4.3",

src/core_plugins/kibana/public/dashboard/__tests__/dashboard_state.js

@@ -1,7 +1,7 @@
 import ngMock from 'ng_mock';
 import expect from 'expect.js';
 
-import { DashboardState } from '../dashboard_state';
+import { DashboardStateManager } from '../dashboard_state_manager';
 
 describe('DashboardState', function () {
   let AppState;
@@ -14,7 +14,7 @@ describe('DashboardState', function () {
   const mockIndexPattern = { id: 'index1' };
 
   function initDashboardState() {
-    dashboardState = new DashboardState(savedDashboard, AppState, dashboardConfig);
+    dashboardState = new DashboardStateManager(savedDashboard, AppState, dashboardConfig);
   }
 
   beforeEach(ngMock.module('kibana'));
@@ -82,20 +82,20 @@ describe('DashboardState', function () {
 
   describe('panelIndexPatternMapping', function () {
     it('registers index pattern', function () {
-      const state = new DashboardState(savedDashboard, AppState, dashboardConfig);
+      const state = new DashboardStateManager(savedDashboard, AppState, dashboardConfig);
       state.registerPanelIndexPatternMap('panel1', mockIndexPattern);
       expect(state.getPanelIndexPatterns().length).to.equal(1);
     });
 
     it('registers unique index patterns', function () {
-      const state = new DashboardState(savedDashboard, AppState, dashboardConfig);
+      const state = new DashboardStateManager(savedDashboard, AppState, dashboardConfig);
       state.registerPanelIndexPatternMap('panel1', mockIndexPattern);
       state.registerPanelIndexPatternMap('panel2', mockIndexPattern);
       expect(state.getPanelIndexPatterns().length).to.equal(1);
     });
 
     it('does not register undefined index pattern for panels with no index pattern', function () {
-      const state = new DashboardState(savedDashboard, AppState, dashboardConfig);
+      const state = new DashboardStateManager(savedDashboard, AppState, dashboardConfig);
       state.registerPanelIndexPatternMap('markdownPanel1', undefined);
       expect(state.getPanelIndexPatterns().length).to.equal(0);
     });

src/core_plugins/kibana/public/dashboard/__tests__/get_container_api_mock.js

@@ -0,0 +1,10 @@
+export function getContainerApiMock(config = {}) {
+  const containerApiMockDefaults = {
+    addFilter: () => {},
+    getAppState: () => {},
+    createChildUistate: () => {},
+    registerPanelIndexPattern: () => {},
+    updatePanel: () => {}
+  };
+  return Object.assign(containerApiMockDefaults, config);
+}

src/core_plugins/kibana/public/dashboard/__tests__/get_embeddable_handlers_mock.js

@@ -0,0 +1,8 @@
+export function getEmbeddableHandlerMock(config) {
+  const embeddableHandlerMockDefaults = {
+    getEditPath: () => {},
+    getTitleFor: () => {},
+    render: jest.fn()
+  };
+  return Object.assign(embeddableHandlerMockDefaults, config);
+}

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

@@ -0,0 +1,15 @@
+export {
+  updateViewMode,
+  updateIsFullScreenMode,
+  minimizePanel,
+  maximizePanel
+} from './view';
+
+export {
+  updatePanel,
+  updatePanels,
+  renderEmbeddable,
+  embeddableRenderFinished,
+  embeddableRenderError,
+  deletePanel,
+} from './panels';

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

@@ -0,0 +1,51 @@
+import { createAction } from 'redux-actions';
+
+export const deletePanel = createAction('DELETE_PANEL', panelId => panelId);
+
+export const embeddableRenderFinished =
+  createAction('EMBEDDABLE_RENDER_FINISHED', (panelId, embeddable) => ({ embeddable, panelId }));
+
+export const embeddableRenderError =
+  createAction('EMBEDDABLE_RENDER_ERROR', (panelId, error) => ({ panelId, error }));
+
+export const updatePanel = createAction('UPDATE_PANEL', panel => panel);
+
+/**
+ * @param panels {Array<PanelState>}
+ * @return {Object}
+ */
+export const updatePanels = createAction('UPDATE_PANELS', panels => {
+  const panelsMap = {};
+  panels.forEach(panel => {
+    panelsMap[panel.panelIndex] = panel;
+  });
+  return panelsMap;
+});
+
+/**
+ *
+ * @param embeddableHandler {EmbeddableHandler}
+ * @param panelElement {Node}
+ * @param panelId {string}
+ * @param containerApi {ContainerAPI}
+ * @return {function(*, *)}
+ */
+export function renderEmbeddable(embeddableHandler, panelElement, panelId, containerApi) {
+  return (dispatch, getState) => {
+    const { dashboardState } = getState();
+    const panelState = dashboardState.panels[panelId];
+
+    if (!embeddableHandler) {
+      dispatch(embeddableRenderError(panelId, new Error(`Invalid embeddable type "${panelState.type}"`)));
+      return;
+    }
+
+    return embeddableHandler.render(panelElement, panelState, containerApi)
+      .then(embeddable => {
+        return dispatch(embeddableRenderFinished(panelId, embeddable));
+      })
+      .catch(error => {
+        dispatch(embeddableRenderError(panelId, error));
+      });
+  };
+}

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

@@ -0,0 +1,6 @@
+import { createAction } from 'redux-actions';
+
+export const updateViewMode = createAction('UPDATE_VIEW_MODE', viewMode => viewMode);
+export const maximizePanel = createAction('MAXIMIZE_PANEl', maximizedPanelId => maximizedPanelId);
+export const minimizePanel = createAction('MINIMIZE_PANEL', () => {});
+export const updateIsFullScreenMode = createAction('UPDATE_IS_FULL_SCREEN_MODE', isFullScreenMode => isFullScreenMode);

src/core_plugins/kibana/public/dashboard/dashboard.html → src/core_plugins/kibana/public/dashboard/dashboard_app.html

@@ -77,26 +77,10 @@ <h2 class="kuiTitle kuiVerticalRhythm">
     </p>
   </div>
 
-  <dashboard-grid
-    ng-show="!hasExpandedPanel()"
-    panels="panels"
-    is-full-screen-mode="!chrome.getVisible()"
-    dashboard-view-mode="dashboardViewMode"
-    get-embeddable-handler="getEmbeddableHandler"
+  <dashboard-viewport-provider
     get-container-api="getContainerApi"
-    expand-panel="expandPanel"
-    data-shared-items-count="{{panels.length}}"
-    on-panel-removed="onPanelRemoved"
-  ></dashboard-grid>
-
-  <dashboard-panel
-    ng-if="hasExpandedPanel()"
-    panel="expandedPanel"
-    is-full-screen-mode="!chrome.getVisible()"
-    is-expanded="true"
-    dashboard-view-mode="dashboardViewMode"
     get-embeddable-handler="getEmbeddableHandler"
-    get-container-api="getContainerApi"
-    on-toggle-expanded="minimizeExpandedPanel"
-  ></dashboard-panel>
+  >
+  </dashboard-viewport-provider>
+
 </dashboard-app>