TypeScriptify visualization components

src/ui/public/visualize/components/index.js → src/ui/public/persisted_state/index.d.ts

@@ -17,6 +17,4 @@
  * under the License.
  */
 
-export * from './visualization';
-export * from './visualization_chart';
-export * from './visualization_noresults';
+export { PersistedState } from './persisted_state';

src/ui/public/persisted_state/persisted_state.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+// It's currenty hard to properly type PersistedState, since it dynamically
+// inherits the class passed into the constructor.
+export type PersistedState = any;

src/ui/public/vis/index.d.ts

@@ -19,3 +19,4 @@
 
 export { AggConfig } from './agg_config';
 export { Vis, VisProvider } from './vis';
+export { VisualizationController, VisType } from './vis_types/vis_type';

src/ui/public/vis/update_status.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { PersistedState } from '../persisted_state';
 import { calculateObjectHash } from './lib/calculate_object_hash';
 import { Vis } from './vis';
 
@@ -57,7 +58,7 @@ function hasSizeChanged(size: Size, oldSize?: Size): boolean {
 function getUpdateStatus<T extends Status>(
   requiresUpdateStatus: T[] = [],
   obj: any,
-  param: { vis: Vis; visData: any; uiState: any }
+  param: { vis: Vis; visData: any; uiState: PersistedState }
 ): { [reqStats in T]: boolean } {
   const status = {} as { [reqStats in T]: boolean };
 

src/ui/public/vis/vis.d.ts

@@ -17,6 +17,16 @@
  * under the License.
  */
 
-export type Vis = any;
+import { VisType } from './vis_types/vis_type';
+
+export interface Vis {
+  type: VisType;
+
+  // Since we haven't typed everything here yet, we basically "any" the rest
+  // of that interface. This should be removed as soon as this type definition
+  // has been completed. But that way we at least have typing for a couple of
+  // properties on that type.
+  [key: string]: any;
+}
 
 export type VisProvider = (...dependencies: any[]) => Vis;

src/ui/public/vis/vis_types/vis_type.d.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { Vis } from '..';
+import { Status } from '../update_status';
+
+export class VisualizationController {
+  constructor(element: HTMLElement, vis: Vis);
+  public render(visData: any, update: { [key in Status]: boolean }): Promise<void>;
+  public destroy(): void;
+  public isLoaded?(): Promise<void> | void;
+}
+
+export interface VisType {
+  title: string;
+  visualization: typeof VisualizationController;
+  isAccessible?: boolean;
+
+  // Since we haven't typed everything here yet, we basically "any" the rest
+  // of that interface. This should be removed as soon as this type definition
+  // has been completed. But that way we at least have typing for a couple of
+  // properties on that type.
+  [key: string]: any;
+}

src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VisualizationNoResults should render according to snapshot 1`] = `
+<div
+  class="text-center visualize-error visualize-chart"
+>
+  <div
+    class="item top"
+  />
+  <div
+    class="item"
+  >
+    <h2
+      aria-hidden="true"
+    >
+      <i
+        aria-hidden="true"
+        class="fa fa-meh-o"
+      />
+    </h2>
+    <h4>
+      No results found
+    </h4>
+  </div>
+  <div
+    class="item bottom"
+  />
+</div>
+`;

src/ui/public/visualize/components/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { Visualization } from './visualization';

src/ui/public/visualize/components/visualization.test.js

@@ -40,24 +40,7 @@ class VisualizationStub {
   }
 }
 
-describe('Visualization', () => {
-  const vis = {
-    _setUiState: function (uiState) {
-      this.uiState = uiState;
-    },
-    getUiState: function () {
-      return this.uiState;
-    },
-    params: {
-
-    },
-    type: {
-      title: 'new vis',
-      requiresSearch: true,
-      handleNoResults: true,
-      visualization: VisualizationStub
-    }
-  };
+describe('<Visualization/>', () => {
 
   const visData = {
     hits: { total: 1 }
@@ -69,6 +52,28 @@ describe('Visualization', () => {
     set: () => {}
   };
 
+  let vis;
+
+  beforeEach(() => {
+    vis = {
+      _setUiState: function (uiState) {
+        this.uiState = uiState;
+      },
+      getUiState: function () {
+        return this.uiState;
+      },
+      params: {
+
+      },
+      type: {
+        title: 'new vis',
+        requiresSearch: true,
+        handleNoResults: true,
+        visualization: VisualizationStub
+      }
+    };
+  });
+
   it('should display no result message when length of data is 0', () => {
     const data = { hits: { total: 0 } };
     const wrapper = render(<Visualization vis={vis} visData={data} listenOnChange={true} uiState={uiState} />);
@@ -80,9 +85,18 @@ describe('Visualization', () => {
     expect(wrapper.text()).not.toBe('No results found');
   });
 
-  it('should not allow to change listenOnChange', () => {
-    const wrapper = mount(<Visualization vis={vis} visData={visData} uiState={uiState} listenOnChange={true} />);
-    const error = 'Changing listenOnChange or uiState props is not allowed!';
-    expect(() => wrapper.setProps({ listenOnChange: false })).toThrow(error);
+  it('should call onInit when rendering no data', () => {
+    const spy = jest.fn();
+    const noData = { hits: { total: 0 } };
+    mount(
+      <Visualization
+        vis={vis}
+        visData={noData}
+        uiState={uiState}
+        listenOnChange={false}
+        onInit={spy}
+      />
+    );
+    expect(spy).toHaveBeenCalled();
   });
 });