[Console] Replace usage of PanelsContainer with OuiResizableContainer.

[curq]

After conducting the audit of the Console plugin #3966, one of the action item was to remove PanelsContainer usage in favor of OuiResizableContainer for better OUI compliance.

OpenSearch-Dashboards/src/plugins/console/public/application/containers/editor/editor.tsx

Lines 92 to 109 in ca0bb8f

	<PanelsContainer onPanelWidthChange={onPanelWidthChange} resizerClassName="conApp__resizer">
	<Panel
	style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
	initialWidth={firstPanelWidth}
	>
	{loading ? (
	<EditorContentSpinner />
	) : (
	<EditorUI initialTextValue={currentTextObject.text} dataSourceId={dataSourceId} />
	)}
	</Panel>
	<Panel
	style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
	initialWidth={secondPanelWidth}
	>
	{loading ? <EditorContentSpinner /> : <EditorOutput />}
	</Panel>
	</PanelsContainer>

This issue tracks the progress on this recommendation.

[curq]

I wish to work on this issue.

[curq]

After looking into it, I came to conclusion that this issue is blocked until we move from ace_editor to monaco, because ace_editor styles are not compatible with OuiResizableContainer, specifically the console output doesn't render at all due to them. I tried working around / disabling the styles and it started rendering, but it was still broken and unusable. So it is better to wait for migration to monaco.

---

Another important finding is that OuiResizableContainer is not utilised. Only vis_builder plugin currently uses it.

OpenSearch-Dashboards/src/plugins/vis_builder/public/application/app.tsx

Lines 47 to 77 in b337bea

	<EuiResizableContainer className="vbLayout__resizeContainer">
	{(EuiResizablePanel, EuiResizableButton) => (
	<>
	<EuiResizablePanel
	className="vbLayout__workspaceResize"
	paddingSize="none"
	initialSize={80}
	minSize="300px"
	mode="main"
	>
	<Workspace />
	</EuiResizablePanel>
	<EuiResizableButton className="vbLayout__resizeButton" />
	<EuiResizablePanel
	className="vbLayout__rightNavResize"
	paddingSize="none"
	initialSize={20}
	minSize="250px"
	mode={[
	'collapsible',
	{
	position: 'top',
	},
	]}
	id="vbRightResize"
	>
	<RightNav />
	</EuiResizablePanel>
	</>
	)}
	</EuiResizableContainer>

In other cases default_editor is used, which uses PanelsContainer under the hood.

OpenSearch-Dashboards/src/plugins/vis_default_editor/public/default_editor.tsx

Lines 108 to 136 in b337bea

	<PanelsContainer
	className="visEditor--default"
	resizerClassName={`visEditor__resizer ${
	isCollapsed ? 'visEditor__resizer-isHidden' : ''
	}`}
	>
	<Panel className="visEditor__visualization" initialWidth={100 - editorInitialWidth}>
	<div className="visEditor__canvas" ref={visRef} data-shared-items-container />
	</Panel>
	<Panel
	className={`visEditor__collapsibleSidebar ${
	isCollapsed ? 'visEditor__collapsibleSidebar-isClosed' : ''
	}`}
	initialWidth={editorInitialWidth}
	>
	<DefaultEditorSideBar
	embeddableHandler={embeddableHandler}
	isCollapsed={isCollapsed}
	onClickCollapse={onClickCollapse}
	vis={vis}
	uiState={uiState}
	isLinkedSearch={linked}
	savedSearch={savedSearch}
	timeRange={timeRange}
	eventEmitter={eventEmitter}
	/>
	</Panel>
	</PanelsContainer>

Example of plugins affected: vis_type_markdown, vis_type_markdown. It is likely any plugin except vis_builder uses it instead of OuiResizableContainer

I did not find other OuiResizableContainer instances, and we probably should look into it.