TopNav: Plugin page layouts / information architecture (#53174)

* Change nav structure when topnav is enable to do initial tests with new information architecture

* Support for nested sections

* Updated

* sentance case

* Progress on plugin challange

* Rewrite to functional component

* Progress

* Updates

* Progress

* Progress on things

* missing file

* Fixing issue with runtime, need to use setter way to set component exposed via runtime

* Move PageLayoutType to grafana/data

* Fixing breadcrumb issue, adding more tests

* reverted backend change

* fix recursive issue with cleanup

packages/grafana-runtime/src/components/PluginPage.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { NavModelItem, PageLayoutType } from '@grafana/data';
+
+export interface PluginPageProps {
+  pageNav?: NavModelItem;
+  children: React.ReactNode;
+  layout?: PageLayoutType;
+}
+
+export type PluginPageType = React.ComponentType<PluginPageProps>;
+
+export let PluginPage: PluginPageType = ({ children }) => {
+  return <div>{children}</div>;
+};
+
+/**
+ * Used to bootstrap the PluginPage during application start
+ * is exposed via runtime.
+ *
+ * @internal
+ */
+export function setPluginPage(component: PluginPageType) {
+  PluginPage = component;
+}

packages/grafana-runtime/src/config.ts

@@ -66,7 +66,6 @@ export class GrafanaBootConfig implements GrafanaConfig {
   loginHint = '';
   passwordHint = '';
   loginError = undefined;
-  navTree: any;
   viewersCanEdit = false;
   editorsCanAdmin = false;
   disableSanitizeHtml = false;

packages/grafana-runtime/src/index.ts

@@ -28,6 +28,8 @@ export { PanelRenderer, type PanelRendererProps } from './components/PanelRender
 export { PanelDataErrorView, type PanelDataErrorViewProps } from './components/PanelDataErrorView';
 export { toDataQueryError } from './utils/toDataQueryError';
 export { setQueryRunnerFactory, createQueryRunner, type QueryRunnerFactory } from './services/QueryRunner';
+export { PluginPage } from './components/PluginPage';
+export type { PluginPageType, PluginPageProps } from './components/PluginPage';
 export {
   DataSourcePicker,
   type DataSourcePickerProps,