[Discover] Deangularize context_app.html

[kertal]

So the context_app template is entirely occupied by directives using React. Well not entirely ... a small directive of indomitable Angular holds out against React and won't go away until #67259 takes over.

So for further deangularisation the doc-table directive needs to be wrapped in a React component. When this is done, the whole template can be migrated to a single React component clearing the way to migrate the controller and to get rid out the Angular router.

How to proceed

• Implement the doc_table component to render the angular template inside, there's an example how this is done in the doc_views_registry
  

  kibana/src/plugins/discover/public/application/doc_views/doc_views_registry.ts

  Lines 35 to 44 in 19bda1f

  	addDocView(docViewRaw: DocViewInput | DocViewInputFn) {
  	const docView = typeof docViewRaw === 'function' ? docViewRaw() : docViewRaw;
  	if (docView.directive) {
  	// convert angular directive to render function for backwards compatibility
  	docView.render = convertDirectiveToRenderFn(docView.directive, () => {
  	if (!this.angularInjectorGetter) {
  	throw new Error('Angular was not initialized');
  	}
  	return this.angularInjectorGetter();
  	});

  
  It can render React or Angular under the hood, and it's used by the DocViewer

  kibana/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.tsx

  Lines 32 to 50 in f47b3e5

  	export function DocViewer(renderProps: DocViewRenderProps) {
  	const docViewsRegistry = getDocViewsRegistry();
  	const tabs = docViewsRegistry
  	.getDocViewsSorted(renderProps.hit)
  	.map(({ title, render, component }: DocView, idx: number) => {
  	return {
  	id: `kbn_doc_viewer_tab_${idx}`,
  	name: title,
  	content: (
  	<DocViewerTab
  	id={idx}
  	title={title}
  	component={component}
  	renderProps={renderProps}
  	render={render}
  	/>
  	),
  	};
  	});

  
  

  kibana/src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_tab.tsx

  Lines 32 to 40 in f47b3e5

  	export function DocViewRenderTab({ render, renderProps }: Props) {
  	const ref = useRef<HTMLDivElement>(null);
  	useEffect(() => {
  	if (ref && ref.current) {
  	return render(ref.current, renderProps);
  	}
  	}, [render, renderProps]);
  	return <div ref={ref} />;
  	}

  
  That's how a angular directive is registered:

  kibana/test/plugin_functional/plugins/doc_views_plugin/public/plugin.tsx

  Lines 39 to 48 in 821aa99

  	discover.docViews.addDocView({
  	directive: {
  	controller: function MyController($injector: any) {
  	$injector.loadNewModules(['myDocView']);
  	},
  	template: `<my-hit hit="hit"></my-hit>`,
  	},
  	order: 1,
  	title: 'Angular doc view',
  	});

• Deangularize context_app like it was done before in [Discover] Deangularize Skip to bottom button #69811

Here's how the React Angular Doc table could look like (in approximately)

export function DocTable({ render, renderProps }: Props) { 
   const render = convertDirectiveToRenderFn({ template: `<doc-table></doc_table>` }, () => getAngularInjector());
   const ref = useRef<HTMLDivElement>(null); 
   useEffect(() => { 
     if (ref && ref.current) { 
       return render(ref.current, renderProps); 
     } 
   }, [render, renderProps]); 
   return <div ref={ref} />; 
 } 

Alternative: Of course you could migrate doc_table directive to React, but this a potential 🐇 hole.
Note: Once this is done, we could migrate the next template 🦖, discover.html could be next

[majagrubic]

Closed with 3 PRs above