Migrate test plugins ⇒ NP (kbn_tp_custom_visualizations)

test/plugin_functional/plugins/kbn_tp_custom_visualizations/kibana.json

@@ -0,0 +1,10 @@
+{
+  "id": "kbn_tp_custom_visualizations",
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "requiredPlugins": [
+    "visualizations"
+  ],
+  "server": false,
+  "ui": true
+}

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -1,6 +1,7 @@
 {
   "name": "kbn_tp_custom_visualizations",
   "version": "1.0.0",
+  "main": "target/test/plugin_functional/plugins/kbn_tp_custom_visualizations",
   "kibana": {
     "version": "kibana",
     "templateVersion": "1.0.0"
@@ -9,5 +10,13 @@
   "dependencies": {
     "@elastic/eui": "21.0.1",
     "react": "^16.12.0"
+  },
+  "scripts": {
+    "kbn": "node ../../../../scripts/kbn.js",
+    "build": "rm -rf './target' && tsc"
+  },
+  "devDependencies": {
+    "@kbn/plugin-helpers": "9.0.2",
+    "typescript": "3.7.2"
   }
 }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/index.js → test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/index.ts

@@ -17,10 +17,14 @@
  * under the License.
  */
 
-export default function(kibana) {
-  return new kibana.Plugin({
-    uiExports: {
-      hacks: ['plugins/kbn_tp_custom_visualizations/self_changing_vis/self_changing_vis'],
-    },
-  });
-}
+import { PluginInitializer } from 'kibana/public';
+import {
+  CustomVisualizationsPublicPlugin,
+  CustomVisualizationsSetup,
+  CustomVisualizationsStart,
+} from './plugin';
+
+export { CustomVisualizationsPublicPlugin as Plugin };
+
+export const plugin: PluginInitializer<CustomVisualizationsSetup, CustomVisualizationsStart> = () =>
+  new CustomVisualizationsPublicPlugin();

test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/plugin.ts

@@ -0,0 +1,61 @@
+/*
+ * 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 { CoreSetup, Plugin } from 'kibana/public';
+import { VisualizationsSetup } from '../../../../../src/plugins/visualizations/public';
+import { SelfChangingEditor } from './self_changing_vis/self_changing_editor';
+import { SelfChangingComponent } from './self_changing_vis/self_changing_components';
+
+export interface SetupDependencies {
+  visualizations: VisualizationsSetup;
+}
+
+export class CustomVisualizationsPublicPlugin
+  implements Plugin<CustomVisualizationsSetup, CustomVisualizationsStart> {
+  public setup(core: CoreSetup, setupDeps: SetupDependencies) {
+    setupDeps.visualizations.createReactVisualization({
+      name: 'self_changing_vis',
+      title: 'Self Changing Vis',
+      icon: 'controlsHorizontal',
+      description:
+        'This visualization is able to change its own settings, that you could also set in the editor.',
+      visConfig: {
+        component: SelfChangingComponent,
+        defaults: {
+          counter: 0,
+        },
+      },
+      editorConfig: {
+        optionTabs: [
+          {
+            name: 'options',
+            title: 'Options',
+            editor: SelfChangingEditor,
+          },
+        ],
+      },
+      requestHandler: 'none',
+    });
+  }
+
+  public start() {}
+  public stop() {}
+}
+
+export type CustomVisualizationsSetup = ReturnType<CustomVisualizationsPublicPlugin['setup']>;
+export type CustomVisualizationsStart = ReturnType<CustomVisualizationsPublicPlugin['start']>;

test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_components.js → test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_components.tsx

@@ -17,36 +17,32 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { EuiBadge } from '@elastic/eui';
 
-export class SelfChangingComponent extends React.Component {
-  onClick = () => {
-    this.props.vis.params.counter++;
-    this.props.vis.updateState();
+interface SelfChangingComponentProps {
+  renderComplete: () => {};
+  visParams: {
+    counter: number;
   };
+}
 
-  render() {
-    return (
-      <div>
-        <EuiBadge
-          data-test-subj="counter"
-          onClick={this.onClick}
-          onClickAriaLabel="Increase counter"
-          color="primary"
-        >
-          {this.props.vis.params.counter}
-        </EuiBadge>
-      </div>
-    );
-  }
-
-  componentDidMount() {
-    this.props.renderComplete();
-  }
+export function SelfChangingComponent(props: SelfChangingComponentProps) {
+  useEffect(() => {
+    props.renderComplete();
+  });
 
-  componentDidUpdate() {
-    this.props.renderComplete();
-  }
+  return (
+    <div>
+      <EuiBadge
+        onClick={() => {}}
+        data-test-subj="counter"
+        onClickAriaLabel="Increase counter"
+        color="primary"
+      >
+        {props.visParams.counter}
+      </EuiBadge>
+    </div>
+  );
 }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_editor.js → test/plugin_functional/plugins/kbn_tp_custom_visualizations/public/self_changing_vis/self_changing_editor.tsx

@@ -20,10 +20,15 @@
 import React from 'react';
 
 import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
+import { VisOptionsProps } from '../../../../../../src/legacy/core_plugins/vis_default_editor/public/vis_options_props';
 
-export class SelfChangingEditor extends React.Component {
-  onCounterChange = ev => {
-    this.props.setValue('counter', parseInt(ev.target.value));
+interface CounterParams {
+  counter: number;
+}
+
+export class SelfChangingEditor extends React.Component<VisOptionsProps<CounterParams>> {
+  onCounterChange = (ev: any) => {
+    this.props.setValue('counter', parseInt(ev.target.value, 10));
   };
 
   render() {

test/plugin_functional/plugins/kbn_tp_custom_visualizations/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./target",
+    "skipLibCheck": true,
+    "types": [
+      "node",
+      "jest",
+      "react"
+    ]
+  },
+  "include": [
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "../../../../typings/**/*",
+  ],
+  "exclude": []
+}

test/plugin_functional/test_suites/custom_visualizations/self_changing_vis.js

@@ -28,11 +28,7 @@ export default function({ getService, getPageObjects }) {
     return await testSubjects.getVisibleText('counter');
   }
 
-  async function getEditorValue() {
-    return await testSubjects.getAttribute('counterEditor', 'value');
-  }
-
-  describe.skip('self changing vis', function describeIndexTests() {
+  describe('self changing vis', function describeIndexTests() {
     before(async () => {
       await PageObjects.visualize.navigateToNewVisualization();
       await PageObjects.visualize.clickVisType('self_changing_vis');
@@ -45,16 +41,17 @@ export default function({ getService, getPageObjects }) {
       const isApplyEnabled = await PageObjects.visEditor.isApplyEnabled();
       expect(isApplyEnabled).to.be(true);
       await PageObjects.visEditor.clickGo();
+      await renderable.waitForRender();
       const counter = await getCounterValue();
       expect(counter).to.be('10');
     });
 
-    it('should allow changing params from within the vis', async () => {
+    it.skip('should allow changing params from within the vis', async () => {
       await testSubjects.click('counter');
       await renderable.waitForRender();
       const visValue = await getCounterValue();
       expect(visValue).to.be('11');
-      const editorValue = await getEditorValue();
+      const editorValue = await testSubjects.getAttribute('counterEditor', 'value');
       expect(editorValue).to.be('11');
       // If changing a param from within the vis it should immediately apply and not bring editor in an unchanged state
       const isApplyEnabled = await PageObjects.visEditor.isApplyEnabled();