Typescriptify dashboard redux code (elastic#19857)

* Typescriptify dashboard redux code

* Address code review comments

* minor fixes

* move all type dependencies to dev

package.json

@@ -86,7 +86,6 @@
     "@kbn/pm": "link:packages/kbn-pm",
     "@kbn/test-subj-selector": "link:packages/kbn-test-subj-selector",
     "@kbn/ui-framework": "link:packages/kbn-ui-framework",
-    "@types/prop-types": "^15.5.3",
     "JSONStream": "1.1.1",
     "accept-language-parser": "1.2.0",
     "angular": "1.6.9",
@@ -231,10 +230,15 @@
     "@types/execa": "^0.9.0",
     "@types/getopts": "^2.0.0",
     "@types/glob": "^5.0.35",
+    "@types/jest": "^22.2.3",
     "@types/listr": "^0.13.0",
+    "@types/lodash": "^3.10.1",
     "@types/minimatch": "^2.0.29",
+    "@types/prop-types": "^15.5.3",
     "@types/react": "^16.3.14",
     "@types/react-dom": "^16.0.5",
+    "@types/redux": "^3.6.31",
+    "@types/redux-actions": "^2.2.1",
     "angular-mocks": "1.4.7",
     "babel-eslint": "8.1.2",
     "babel-jest": "^22.4.3",

src/core_plugins/kibana/public/dashboard/actions/embeddables.test.js → src/core_plugins/kibana/public/dashboard/actions/embeddables.test.ts

@@ -20,14 +20,12 @@
 import { store } from '../../store';
 import {
   clearStagedFilters,
-  setStagedFilter,
   embeddableIsInitialized,
   embeddableIsInitializing,
+  setStagedFilter,
 } from '../actions';
 
-import {
-  getStagedFilters,
-} from '../../selectors';
+import { getStagedFilters } from '../../selectors';
 
 beforeAll(() => {
   store.dispatch(embeddableIsInitializing('foo1'));
@@ -43,13 +41,17 @@ describe('staged filters', () => {
   });
 
   test('can set a staged filter', () => {
-    store.dispatch(setStagedFilter({ stagedFilter: ['imafilter'], panelId: 'foo1' }));
+    store.dispatch(
+      setStagedFilter({ stagedFilter: ['imafilter'], panelId: 'foo1' })
+    );
     const stagedFilters = getStagedFilters(store.getState());
     expect(stagedFilters.length).toBe(1);
   });
 
   test('getStagedFilters returns filters for all embeddables', () => {
-    store.dispatch(setStagedFilter({ stagedFilter: ['imafilter'], panelId: 'foo2' }));
+    store.dispatch(
+      setStagedFilter({ stagedFilter: ['imafilter'], panelId: 'foo2' })
+    );
     const stagedFilters = getStagedFilters(store.getState());
     expect(stagedFilters.length).toBe(2);
   });
@@ -60,4 +62,3 @@ describe('staged filters', () => {
     expect(stagedFilters.length).toBe(0);
   });
 });
-

src/core_plugins/kibana/public/dashboard/actions/embeddables.ts

@@ -0,0 +1,144 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import _ from 'lodash';
+import { Dispatch } from 'redux';
+import { createAction } from 'redux-actions';
+import {
+  CoreKibanaState,
+  getEmbeddableCustomization,
+  getPanel,
+} from '../../selectors';
+import { PanelId, PanelState } from '../selectors';
+import { updatePanel } from './panels';
+
+import { EmbeddableMetadata, EmbeddableState } from 'ui/embeddable';
+import { KibanaAction } from '../../selectors/types';
+
+export enum EmbeddableActionTypeKeys {
+  EMBEDDABLE_IS_INITIALIZING = 'EMBEDDABLE_IS_INITIALIZING',
+  EMBEDDABLE_IS_INITIALIZED = 'EMBEDDABLE_IS_INITIALIZED',
+  SET_STAGED_FILTER = 'SET_STAGED_FILTER',
+  CLEAR_STAGED_FILTERS = 'CLEAR_STAGED_FILTERS',
+  EMBEDDABLE_ERROR = 'EMBEDDABLE_ERROR',
+}
+
+export interface EmbeddableIsInitializingAction
+  extends KibanaAction<
+      EmbeddableActionTypeKeys.EMBEDDABLE_IS_INITIALIZING,
+      PanelId
+    > {}
+
+export interface EmbeddableIsInitializedActionPayload {
+  panelId: PanelId;
+  metadata: EmbeddableMetadata;
+}
+
+export interface EmbeddableIsInitializedAction
+  extends KibanaAction<
+      EmbeddableActionTypeKeys.EMBEDDABLE_IS_INITIALIZED,
+      EmbeddableIsInitializedActionPayload
+    > {}
+
+export interface SetStagedFilterActionPayload {
+  panelId: PanelId;
+  stagedFilter: object;
+}
+
+export interface SetStagedFilterAction
+  extends KibanaAction<
+      EmbeddableActionTypeKeys.SET_STAGED_FILTER,
+      SetStagedFilterActionPayload
+    > {}
+
+export interface ClearStagedFiltersAction
+  extends KibanaAction<
+      EmbeddableActionTypeKeys.CLEAR_STAGED_FILTERS,
+      undefined
+    > {}
+
+export interface EmbeddableErrorActionPayload {
+  error: string | object;
+  panelId: PanelId;
+}
+
+export interface EmbeddableErrorAction
+  extends KibanaAction<
+      EmbeddableActionTypeKeys.EMBEDDABLE_ERROR,
+      EmbeddableErrorActionPayload
+    > {}
+
+export type EmbeddableActions =
+  | EmbeddableIsInitializingAction
+  | EmbeddableIsInitializedAction
+  | ClearStagedFiltersAction
+  | SetStagedFilterAction
+  | EmbeddableErrorAction;
+
+export const embeddableIsInitializing = createAction<PanelId>(
+  EmbeddableActionTypeKeys.EMBEDDABLE_IS_INITIALIZING
+);
+export const embeddableIsInitialized = createAction<
+  EmbeddableIsInitializedActionPayload
+>(EmbeddableActionTypeKeys.EMBEDDABLE_IS_INITIALIZED);
+export const setStagedFilter = createAction<SetStagedFilterActionPayload>(
+  EmbeddableActionTypeKeys.SET_STAGED_FILTER
+);
+export const clearStagedFilters = createAction(
+  EmbeddableActionTypeKeys.CLEAR_STAGED_FILTERS
+);
+export const embeddableError = createAction<EmbeddableErrorActionPayload>(
+  EmbeddableActionTypeKeys.EMBEDDABLE_ERROR
+);
+
+/**
+ * The main point of communication from the embeddable to the dashboard. Any time state in the embeddable
+ * changes, this function will be called. The data is then extracted from EmbeddableState and stored in
+ * redux so the appropriate actions are taken and UI updated.
+ *
+ * @param changeData.panelId - the id of the panel whose state has changed.
+ * @param changeData.embeddableState - the new state of the embeddable.
+ */
+export function embeddableStateChanged(changeData: {
+  panelId: PanelId;
+  embeddableState: EmbeddableState;
+}) {
+  const { panelId, embeddableState } = changeData;
+  return (
+    dispatch: Dispatch<CoreKibanaState>,
+    getState: () => CoreKibanaState
+  ) => {
+    // Translate embeddableState to things redux cares about.
+    const customization = getEmbeddableCustomization(getState(), panelId);
+    if (!_.isEqual(embeddableState.customization, customization)) {
+      const originalPanelState = getPanel(getState(), panelId);
+      const newPanelState: PanelState = {
+        ...originalPanelState,
+        embeddableConfig: _.cloneDeep(embeddableState.customization),
+      };
+      dispatch(updatePanel(newPanelState));
+    }
+
+    if (embeddableState.stagedFilter) {
+      dispatch(
+        setStagedFilter({ stagedFilter: embeddableState.stagedFilter, panelId })
+      );
+    }
+  };
+}

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

@@ -20,8 +20,4 @@
 export * from './view';
 export * from './panels';
 export * from './embeddables';
-
-export {
-  updateDescription,
-  updateTitle,
-} from './metadata';
+export * from './metadata';

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

@@ -0,0 +1,51 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createAction } from 'redux-actions';
+import { KibanaAction } from '../../selectors/types';
+
+export enum MetadataActionTypeKeys {
+  UPDATE_DESCRIPTION = 'UPDATE_DESCRIPTION',
+  UPDATE_TITLE = 'UPDATE_TITLE',
+}
+
+export type UpdateTitleActionPayload = string;
+
+export interface UpdateTitleAction
+  extends KibanaAction<
+      MetadataActionTypeKeys.UPDATE_TITLE,
+      UpdateTitleActionPayload
+    > {}
+
+export type UpdateDescriptionActionPayload = string;
+
+export interface UpdateDescriptionAction
+  extends KibanaAction<
+      MetadataActionTypeKeys.UPDATE_DESCRIPTION,
+      UpdateDescriptionActionPayload
+    > {}
+
+export type MetadataActions = UpdateDescriptionAction | UpdateTitleAction;
+
+export const updateDescription = createAction<UpdateDescriptionAction>(
+  MetadataActionTypeKeys.UPDATE_DESCRIPTION
+);
+export const updateTitle = createAction<UpdateTitleAction>(
+  MetadataActionTypeKeys.UPDATE_TITLE
+);