[NP] Visualize (#62294) (#63833)

* Move visualize plugin to np

* Refactor plugin services

* Clean up

* Remove legacy style usage

* Fix style imports

* Fix timelion_options context provider

* Fix translations

* Change codeowners for visualize

* Import styles in legacy for BWC in Browser tests

* Get rid of embeddable dependency

Co-authored-by: Elastic Machine <[email protected]>
# Conflicts:
#	.github/CODEOWNERS
#	x-pack/plugins/translations/translations/ja-JP.json
#	x-pack/plugins/translations/translations/zh-CN.json

.i18nrc.json

@@ -54,7 +54,8 @@
     "visTypeVega": "src/legacy/core_plugins/vis_type_vega",
     "visTypeVislib": "src/legacy/core_plugins/vis_type_vislib",
     "visTypeXy": "src/legacy/core_plugins/vis_type_xy",
-    "visualizations": "src/plugins/visualizations"
+    "visualizations": "src/plugins/visualizations",
+    "visualize": "src/plugins/visualize"
   },
   "exclude": [
     "src/legacy/ui/ui_render/ui_render_mixin.js"

src/legacy/core_plugins/kibana/index.js

@@ -54,11 +54,7 @@ export default function(kibana) {
     },
 
     uiExports: {
-      hacks: [
-        'plugins/kibana/discover/legacy',
-        'plugins/kibana/dev_tools',
-        'plugins/kibana/visualize/legacy',
-      ],
+      hacks: ['plugins/kibana/discover/legacy', 'plugins/kibana/dev_tools'],
       app: {
         id: 'kibana',
         title: 'Kibana',

src/legacy/core_plugins/kibana/public/index.scss

@@ -13,8 +13,10 @@
 // Discover styles
 @import 'discover/index';
 
-// Visualize styles
-@import './visualize/index';
+// Visualization styles are imported here for running karma Browser tests
+// should be somehow included through the "visualizations" plugin initialization
+@import '../../../../plugins/visualizations/public/index';
+
 // Has to come after visualize because of some
 // bad cascading in the Editor layout
 @import '../../../../plugins/maps_legacy/public/index';

src/legacy/core_plugins/kibana/public/kibana.js

@@ -43,7 +43,6 @@ import 'uiExports/interpreter';
 
 import 'ui/autoload/all';
 import './discover/legacy';
-import './visualize/legacy';
 import './management';
 import './dev_tools';
 import { showAppRedirectNotification } from '../../../../plugins/kibana_legacy/public';

src/legacy/core_plugins/vis_type_timelion/public/timelion_options.tsx

@@ -24,7 +24,9 @@ import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { VisParams } from './timelion_vis_fn';
 import { TimelionInterval, TimelionExpressionInput } from './components';
 
-function TimelionOptions({ stateParams, setValue, setValidity }: VisOptionsProps<VisParams>) {
+export type TimelionOptionsProps = VisOptionsProps<VisParams>;
+
+function TimelionOptions({ stateParams, setValue, setValidity }: TimelionOptionsProps) {
   const setInterval = useCallback((value: VisParams['interval']) => setValue('interval', value), [
     setValue,
   ]);

src/legacy/core_plugins/vis_type_timelion/public/timelion_vis_type.tsx

@@ -24,7 +24,7 @@ import { KibanaContextProvider } from '../../../../plugins/kibana_react/public';
 import { DefaultEditorSize } from '../../../../plugins/vis_default_editor/public';
 import { getTimelionRequestHandler } from './helpers/timelion_request_handler';
 import { TimelionVisComponent, TimelionVisComponentProp } from './components';
-import { TimelionOptions } from './timelion_options';
+import { TimelionOptions, TimelionOptionsProps } from './timelion_options';
 import { TimelionVisDependencies } from './plugin';
 
 export const TIMELION_VIS_NAME = 'timelion';
@@ -53,7 +53,11 @@ export function getTimelionVisDefinition(dependencies: TimelionVisDependencies)
       ),
     },
     editorConfig: {
-      optionsTemplate: TimelionOptions,
+      optionsTemplate: (props: TimelionOptionsProps) => (
+        <KibanaContextProvider services={{ ...dependencies }}>
+          <TimelionOptions {...props} />
+        </KibanaContextProvider>
+      ),
       defaultSize: DefaultEditorSize.MEDIUM,
     },
     requestHandler: timelionRequestHandler,

src/legacy/ui/public/_index.scss

@@ -17,9 +17,3 @@
 @import './field_editor/index';
 @import './style_compile/index';
 @import '../../../plugins/management/public/components/index';
-
-// The following are prefixed with "vis"
-
-// Can't import vis folder here because of cascading issues, it's imported in core_plugins/kibana
-// @import './vis/index';
-@import './visualize/index';

src/plugins/vis_default_editor/public/default_editor.tsx

@@ -19,7 +19,7 @@
 
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 
-import { EditorRenderProps } from 'src/legacy/core_plugins/kibana/public/visualize/np_ready/types';
+import { EditorRenderProps } from 'src/plugins/visualize/public';
 import { PanelsContainer, Panel } from '../../kibana_react/public';
 
 import './vis_type_agg_filter';

src/plugins/vis_default_editor/public/default_editor_controller.tsx

@@ -22,7 +22,7 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { EventEmitter } from 'events';
 
-import { EditorRenderProps } from 'src/legacy/core_plugins/kibana/public/visualize/np_ready/types';
+import { EditorRenderProps } from 'src/plugins/visualize/public';
 import { Vis, VisualizeEmbeddableContract } from 'src/plugins/visualizations/public';
 import { Storage } from '../../kibana_utils/public';
 import { KibanaContextProvider } from '../../kibana_react/public';

src/plugins/visualizations/public/index.scss

@@ -1,2 +1,3 @@
 @import 'wizard/index';
 @import 'embeddable/index';
+@import 'components/index';

src/plugins/visualize/kibana.json

@@ -0,0 +1,17 @@
+{
+  "id": "visualize",
+  "version": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": [
+    "data",
+    "kibanaLegacy",
+    "navigation",
+    "savedObjects",
+    "visualizations"
+  ],
+  "optionalPlugins": [
+    "home",
+    "share"
+  ]
+}

src/legacy/core_plugins/kibana/public/visualize/np_ready/application.ts → src/plugins/visualize/public/application/application.ts

@@ -17,16 +17,18 @@
  * under the License.
  */
 
+import './index.scss';
+
 import angular, { IModule } from 'angular';
 import { i18nDirective, i18nFilter, I18nProvider } from '@kbn/i18n/angular';
 
 import { AppMountContext } from 'kibana/public';
-import { configureAppAngularModule } from '../legacy_imports';
-import { NavigationPublicPluginStart as NavigationStart } from '../../../../../../plugins/navigation/public';
+import { NavigationPublicPluginStart as NavigationStart } from 'src/plugins/navigation/public';
 import {
+  configureAppAngularModule,
   createTopNavDirective,
   createTopNavHelper,
-} from '../../../../../../plugins/kibana_legacy/public';
+} from '../../../kibana_legacy/public';
 
 // @ts-ignore
 import { initVisualizeApp } from './legacy_app';

src/legacy/core_plugins/kibana/public/visualize/np_ready/breadcrumbs.ts → src/plugins/visualize/public/application/breadcrumbs.ts

@@ -24,7 +24,7 @@ import { VisualizeConstants } from './visualize_constants';
 export function getLandingBreadcrumbs() {
   return [
     {
-      text: i18n.translate('kbn.visualize.listing.breadcrumb', {
+      text: i18n.translate('visualize.listing.breadcrumb', {
         defaultMessage: 'Visualize',
       }),
       href: `#${VisualizeConstants.LANDING_PAGE_PATH}`,
@@ -36,7 +36,7 @@ export function getWizardStep1Breadcrumbs() {
   return [
     ...getLandingBreadcrumbs(),
     {
-      text: i18n.translate('kbn.visualize.wizard.step1Breadcrumb', {
+      text: i18n.translate('visualize.wizard.step1Breadcrumb', {
         defaultMessage: 'Create',
       }),
     },
@@ -47,7 +47,7 @@ export function getWizardStep2Breadcrumbs() {
   return [
     ...getLandingBreadcrumbs(),
     {
-      text: i18n.translate('kbn.visualize.wizard.step2Breadcrumb', {
+      text: i18n.translate('visualize.wizard.step2Breadcrumb', {
         defaultMessage: 'Create',
       }),
     },
@@ -58,7 +58,7 @@ export function getCreateBreadcrumbs() {
   return [
     ...getLandingBreadcrumbs(),
     {
-      text: i18n.translate('kbn.visualize.editor.createBreadcrumb', {
+      text: i18n.translate('visualize.editor.createBreadcrumb', {
         defaultMessage: 'Create',
       }),
     },

src/legacy/core_plugins/kibana/public/visualize/np_ready/editor/editor.html → src/plugins/visualize/public/application/editor/editor.html

@@ -80,7 +80,7 @@
 
   <h1
     class="euiScreenReaderOnly"
-    i18n-id="kbn.visualize.pageHeading"
+    i18n-id="visualize.pageHeading"
     i18n-default-message="{chartName} {chartType} visualization"
     i18n-values="{
       chartName: savedVis.title,