Move SplitPanel to kibana_react (#55529)

* split_panel component -> kibana_react

* Update useEffect for console warning

* `console` -> `kibana-react` i18n namespace

* Update when warning about children is emitted in split panel component

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/legacy/core_plugins/console/public/np_ready/application/components/index.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-export * from './split_panel';
 export { SomethingWentWrongCallout } from './something_went_wrong_callout';
 export { TopNavMenuItem, TopNavMenu } from './top_nav_menu';
 export { ConsoleMenu } from './console_menu';

src/legacy/core_plugins/console/public/np_ready/application/containers/editor/editor.tsx

@@ -21,7 +21,7 @@ import React, { useCallback } from 'react';
 import { debounce } from 'lodash';
 
 import { EditorContentSpinner } from '../../components';
-import { Panel, PanelsContainer } from '../../components/split_panel';
+import { Panel, PanelsContainer } from '../../../../../../../../plugins/kibana_react/public';
 import { Editor as EditorUI, EditorOutput } from './legacy/console_editor';
 import { StorageKeys } from '../../../services';
 import { useEditorReadContext, useServicesContext } from '../../contexts';

src/legacy/ui/public/vis/editors/default/default_editor.tsx

@@ -23,10 +23,7 @@ import { start as embeddables } from '../../../../../core_plugins/embeddable_api
 import { EditorRenderProps } from '../../../../../core_plugins/kibana/public/visualize/np_ready/types';
 import { VisualizeEmbeddable } from '../../../../../core_plugins/visualizations/public/embeddable';
 import { VisualizeEmbeddableFactory } from '../../../../../core_plugins/visualizations/public/embeddable/visualize_embeddable_factory';
-import {
-  PanelsContainer,
-  Panel,
-} from '../../../../../core_plugins/console/public/np_ready/application/components/split_panel';
+import { PanelsContainer, Panel } from '../../../../../../plugins/kibana_react/public';
 
 import './vis_type_agg_filter';
 import { DefaultEditorSideBar } from './components/sidebar';

src/plugins/kibana_react/public/index.ts

@@ -25,5 +25,6 @@ export * from './overlays';
 export * from './ui_settings';
 export * from './field_icon';
 export * from './table_list_view';
+export * from './split_panel';
 export { useUrlTracker } from './use_url_tracker';
 export { toMountPoint } from './util';

src/plugins/kibana_react/public/split_panel/components/resizer.tsx

@@ -35,7 +35,7 @@ export function Resizer(props: Props) {
     <button
       {...props}
       data-test-subj="splitPanelResizer"
-      aria-label={i18n.translate('console.splitPanel.adjustPanelSizeAriaLabel', {
+      aria-label={i18n.translate('kibana-react.splitPanel.adjustPanelSizeAriaLabel', {
         defaultMessage: 'Press left/right to adjust panels size',
       })}
     >

src/plugins/kibana_react/public/split_panel/containers/panel_container.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { Children, ReactNode, useRef, useState, useCallback } from 'react';
+import React, { Children, ReactNode, useRef, useState, useCallback, useEffect } from 'react';
 
 import { keyCodes } from '@elastic/eui';
 import { PanelContextProvider } from '../context';
@@ -46,7 +46,8 @@ export function PanelsContainer({
   onPanelWidthChange,
   resizerClassName,
 }: Props) {
-  const [firstChild, secondChild] = Children.toArray(children);
+  const childrenArray = Children.toArray(children);
+  const [firstChild, secondChild] = childrenArray;
 
   const registryRef = useRef(new PanelRegistry());
   const containerRef = useRef<HTMLDivElement>(null);
@@ -91,6 +92,18 @@ export function PanelsContainer({
     [onPanelWidthChange]
   );
 
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      // For now we only support bi-split
+      if (childrenArray.length > 2) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[Split Panels Container] Detected more than two children; ignoring additional children.'
+        );
+      }
+    }
+  }, [childrenArray.length]);
+
   const childrenWithResizer = [
     firstChild,
     <Resizer

src/plugins/kibana_react/public/split_panel/registry.ts

@@ -30,10 +30,6 @@ export class PanelRegistry {
     this.panels.push(panel);
   }
 
-  getResizerNeighbours(idx: number) {
-    return [this.panels[idx], this.panels[idx + 1]];
-  }
-
   getPanels() {
     return this.panels;
   }