@grafana/scenes 5.36.4 → 6.0.0--canary.979.12745482012.0

package/dist/index.d.ts

@@ -1,16 +1,15 @@
 import * as _grafana_data from '@grafana/data';
-import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeRange, DataQueryRequest, DataSourceGetTagKeysOptions, DataSourceGetTagValuesOptions, DataTransformContext, DataFrame, UrlQueryMap, PanelPlugin, EventBus, DataQuery as DataQuery$1, DataSourceApi, Registry, RegistryItem, ScopedVars, AdHocVariableFilter, SelectableValue, MetricFindValue, GetTagResponse, VariableRefresh as VariableRefresh$1, VariableSort, EventFilterOptions, AnnotationEvent, AnnotationQuery, DataTransformerConfig, PanelMenuItem, FieldConfigSource, PanelModel, AbsoluteTimeRange, InterpolateFunction, IconName as IconName$1, PageLayoutType, FieldConfig, FieldType, FieldValueMatcherConfig, ScopedVar, RawTimeRange } from '@grafana/data';
+import { BusEventWithPayload, PanelData, BusEvent, BusEventType, BusEventHandler, TimeRange, DataQueryRequest, DataSourceGetTagKeysOptions, DataSourceGetTagValuesOptions, DataTransformContext, DataFrame, EventBus, IconName, PageLayoutType, UrlQueryMap, PanelPlugin, DataQuery as DataQuery$1, DataSourceApi, Registry, RegistryItem, ScopedVars, AdHocVariableFilter, SelectableValue, MetricFindValue, GetTagResponse, VariableRefresh as VariableRefresh$1, VariableSort, EventFilterOptions, AnnotationEvent, AnnotationQuery, DataTransformerConfig, PanelMenuItem, FieldConfigSource, PanelModel, AbsoluteTimeRange, InterpolateFunction, FieldConfig, FieldType, FieldValueMatcherConfig, ScopedVar, RawTimeRange } from '@grafana/data';
 import * as React$1 from 'react';
-import React__default, { CSSProperties, ComponentType } from 'react';
+import React__default, { ComponentType, CSSProperties } from 'react';
 import * as rxjs from 'rxjs';
 import { Observable, Unsubscribable, MonoTypeOperatorFunction, Subscription, ReplaySubject } from 'rxjs';
 import * as _grafana_schema from '@grafana/schema';
 import { VariableType, VariableHide, TimeZone, DataTopic, DataQuery, DataSourceRef, VariableRefresh, LoadingState, DashboardCursorSync, MatcherConfig, TableFieldOptions } from '@grafana/schema';
 import { LocationService, VariableInterpolation } from '@grafana/runtime';
 import { Location } from 'history';
-import { PanelContext, IconName } from '@grafana/ui';
+import { PanelContext, IconName as IconName$1 } from '@grafana/ui';
 import ReactGridLayout from 'react-grid-layout';
-import { RouteComponentProps } from 'react-router-dom';
 import { Options, FieldConfig as FieldConfig$1 } from '@grafana/schema/dist/esm/raw/composable/barchart/panelcfg/x/BarChartPanelCfg_types.gen';
 import { Options as Options$1 } from '@grafana/schema/dist/esm/raw/composable/bargauge/panelcfg/x/BarGaugePanelCfg_types.gen';
 import { Options as Options$2 } from '@grafana/schema/dist/esm/raw/composable/datagrid/panelcfg/x/DatagridPanelCfg_types.gen';
@@ -352,28 +351,6 @@ interface SceneUrlSyncOptions {
     createBrowserHistorySteps?: boolean;
 }
 
-/**
- *
- * @param path Url to append query params to
- * @param searchObject Query params of the URL
- * @param preserveParams Query params to preserve
- * @returns Url with query params
- */
-declare function getUrlWithAppState(path: string, searchObject: UrlQueryMap, preserveParams?: string[]): string;
-
-interface RuntimePanelPluginOptions {
-    /**
-     * Please specify a pluginId that is unlikely to collide with other plugins.
-     */
-    pluginId: string;
-    plugin: PanelPlugin;
-}
-/**
- * Provides a way to register runtime panel plugins.
- * Please use a pluginId that is unlikely to collide with other plugins.
- */
-declare function registerRuntimePanelPlugin({ pluginId, plugin }: RuntimePanelPluginOptions): void;
-
 declare abstract class SceneObjectBase<TState extends SceneObjectState = SceneObjectState> implements SceneObject<TState> {
     private _isActive;
     private _state;
@@ -470,6 +447,124 @@ declare abstract class SceneObjectBase<TState extends SceneObjectState = SceneOb
  */
 declare function useSceneObjectState<TState extends SceneObjectState>(model: SceneObject<TState>, options?: UseStateHookOptions): TState;
 
+interface EmbeddedSceneState extends SceneObjectState {
+    /**
+     * The main content of the scene (usually a SceneFlexLayout)
+     */
+    body: SceneObject;
+    /**
+     * Top row of variable selectors, filters, time pickers and custom actions.
+     */
+    controls?: SceneObject[];
+    /**
+     * For interoperability (used from EmbeddedSceneWithContext)
+     */
+    context?: SceneObject;
+}
+declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
+    static Component: typeof EmbeddedSceneRenderer;
+    constructor(state: EmbeddedSceneState);
+}
+declare function EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>): React__default.JSX.Element;
+
+interface SceneRouteMatch<Params extends {
+    [K in keyof Params]?: string;
+} = {}> {
+    params: Params;
+    isExact: boolean;
+    path: string;
+    url: string;
+}
+interface SceneAppState extends SceneObjectState {
+    pages: SceneAppPageLike[];
+    name?: string;
+    urlSyncOptions?: SceneUrlSyncOptions;
+}
+interface SceneAppRoute {
+    path: string;
+    page?: SceneAppPageLike;
+    drilldown?: SceneAppDrilldownView;
+}
+interface SceneAppPageState extends SceneObjectState {
+    /** Page title or tab label */
+    title: string;
+    /** Page subTitle */
+    subTitle?: string | React.ReactNode;
+    /**
+     * Customize title rendering.
+     * Please return an unstyled h1 tag here + any additional elements you need.
+     **/
+    renderTitle?: (title: string) => React.ReactNode;
+    /** For an image before title */
+    titleImg?: string;
+    /** For an icon before title or tab label */
+    titleIcon?: IconName;
+    /** For a tab label suffix */
+    tabSuffix?: ComponentType<{
+        className?: string;
+    }>;
+    url: string;
+    routePath?: string;
+    /** Array of scene object to be rendered at the top right of the page, inline with the page title */
+    controls?: SceneObject[];
+    hideFromBreadcrumbs?: boolean;
+    tabs?: SceneAppPageLike[];
+    getScene?: (routeMatch: SceneRouteMatch) => EmbeddedScene;
+    drilldowns?: SceneAppDrilldownView[];
+    getParentPage?: () => SceneAppPageLike;
+    preserveUrlKeys?: string[];
+    /**
+     * The current initialized scene, this is set by the framework after scene url initialization
+     **/
+    initializedScene?: SceneObject;
+    /**
+     * Function that returns a fallback scene app page,
+     * to be rendered when url does not match current page exactly or any of tabs or drilldowns.
+     */
+    getFallbackPage?: () => SceneAppPageLike;
+    layout?: PageLayoutType;
+}
+interface SceneAppPageLike extends SceneObject<SceneAppPageState>, DataRequestEnricher {
+    initializeScene(scene: SceneObject): void;
+    /**
+     * @internal. Please don't call this from plugin code.
+     * Will call the state.getScene function with the current routeMatch and will cache the resulting Scene using the routeMatch.url as key.
+     */
+    getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
+    /**
+     * @internal. Please don't call this from plugin code.
+     * Get drilldown scene. Will call the drilldown.getPage function with the current routeMatch and will cache the resulting page using the routeMatch.url as key.
+     */
+    getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch): SceneAppPageLike;
+}
+interface SceneAppDrilldownView {
+    routePath: string;
+    defaultRoute?: boolean;
+    getPage: (routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) => SceneAppPageLike;
+}
+
+/**
+ *
+ * @param path Url to append query params to
+ * @param searchObject Query params of the URL
+ * @param preserveParams Query params to preserve
+ * @returns Url with query params
+ */
+declare function getUrlWithAppState(path: string, searchObject: UrlQueryMap, preserveParams?: string[]): string;
+
+interface RuntimePanelPluginOptions {
+    /**
+     * Please specify a pluginId that is unlikely to collide with other plugins.
+     */
+    pluginId: string;
+    plugin: PanelPlugin;
+}
+/**
+ * Provides a way to register runtime panel plugins.
+ * Please use a pluginId that is unlikely to collide with other plugins.
+ */
+declare function registerRuntimePanelPlugin({ pluginId, plugin }: RuntimePanelPluginOptions): void;
+
 declare function cloneSceneObjectState<TState extends SceneObjectState>(sceneState: TState, withState?: Partial<TState>): TState;
 
 declare abstract class RuntimeDataSource<TQuery extends DataQuery$1 = DataQuery$1> extends DataSourceApi<TQuery> {
@@ -1732,26 +1827,6 @@ interface UrlSyncContextProviderProps extends SceneUrlSyncOptions {
  */
 declare function UrlSyncContextProvider({ children, scene, updateUrlOnInit, createBrowserHistorySteps, }: UrlSyncContextProviderProps): React$1.ReactNode;
 
-interface EmbeddedSceneState extends SceneObjectState {
-    /**
-     * The main content of the scene (usually a SceneFlexLayout)
-     */
-    body: SceneObject;
-    /**
-     * Top row of variable selectors, filters, time pickers and custom actions.
-     */
-    controls?: SceneObject[];
-    /**
-     * For interoperability (used from EmbeddedSceneWithContext)
-     */
-    context?: SceneObject;
-}
-declare class EmbeddedScene extends SceneObjectBase<EmbeddedSceneState> {
-    static Component: typeof EmbeddedSceneRenderer;
-    constructor(state: EmbeddedSceneState);
-}
-declare function EmbeddedSceneRenderer({ model }: SceneComponentProps<EmbeddedScene>): React__default.JSX.Element;
-
 declare function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>): React__default.JSX.Element;
 
 interface VizPanelMenuState extends SceneObjectState {
@@ -1921,7 +1996,7 @@ declare class SceneCanvasText extends SceneObjectBase<SceneCanvasTextState> {
 }
 
 interface ToolbarButtonState extends SceneObjectState {
-    icon: IconName;
+    icon: IconName$1;
     onClick: () => void;
 }
 declare class SceneToolbarButton extends SceneObjectBase<ToolbarButtonState> {
@@ -2277,82 +2352,6 @@ declare class SplitLayout extends SceneObjectBase<SplitLayoutState> {
     isDraggable(): boolean;
 }
 
-interface SceneRouteMatch<Params extends {
-    [K in keyof Params]?: string;
-} = {}> {
-    params: Params;
-    isExact: boolean;
-    path: string;
-    url: string;
-}
-interface SceneAppState extends SceneObjectState {
-    pages: SceneAppPageLike[];
-    name?: string;
-    urlSyncOptions?: SceneUrlSyncOptions;
-}
-interface SceneAppRoute {
-    path: string;
-    page?: SceneAppPageLike;
-    drilldown?: SceneAppDrilldownView;
-}
-interface SceneAppPageState extends SceneObjectState {
-    /** Page title or tab label */
-    title: string;
-    /** Page subTitle */
-    subTitle?: string | React.ReactNode;
-    /**
-     * Customize title rendering.
-     * Please return an unstyled h1 tag here + any additional elements you need.
-     **/
-    renderTitle?: (title: string) => React.ReactNode;
-    /** For an image before title */
-    titleImg?: string;
-    /** For an icon before title or tab label */
-    titleIcon?: IconName$1;
-    /** For a tab label suffix */
-    tabSuffix?: ComponentType<{
-        className?: string;
-    }>;
-    url: string;
-    routePath?: string;
-    /** Array of scene object to be rendered at the top right of the page, inline with the page title */
-    controls?: SceneObject[];
-    hideFromBreadcrumbs?: boolean;
-    tabs?: SceneAppPageLike[];
-    getScene?: (routeMatch: SceneRouteMatch) => EmbeddedScene;
-    drilldowns?: SceneAppDrilldownView[];
-    getParentPage?: () => SceneAppPageLike;
-    preserveUrlKeys?: string[];
-    /**
-     * The current initialized scene, this is set by the framework after scene url initialization
-     **/
-    initializedScene?: SceneObject;
-    /**
-     * Function that returns a fallback scene app page,
-     * to be rendered when url does not match current page exactly or any of tabs or drilldowns.
-     */
-    getFallbackPage?: () => SceneAppPageLike;
-    layout?: PageLayoutType;
-}
-interface SceneAppPageLike extends SceneObject<SceneAppPageState>, DataRequestEnricher {
-    initializeScene(scene: SceneObject): void;
-    /**
-     * @internal. Please don't call this from plugin code.
-     * Will call the state.getScene function with the current routeMatch and will cache the resulting Scene using the routeMatch.url as key.
-     */
-    getScene(routeMatch: SceneRouteMatch): EmbeddedScene;
-    /**
-     * @internal. Please don't call this from plugin code.
-     * Get drilldown scene. Will call the drilldown.getPage function with the current routeMatch and will cache the resulting page using the routeMatch.url as key.
-     */
-    getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch): SceneAppPageLike;
-}
-interface SceneAppDrilldownView {
-    routePath: string;
-    defaultRoute?: boolean;
-    getPage: (routeMatch: SceneRouteMatch<any>, parent: SceneAppPageLike) => SceneAppPageLike;
-}
-
 /**
  * Responsible for top level pages routing
  */
@@ -2380,10 +2379,7 @@ declare class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements
     getDrilldownPage(drilldown: SceneAppDrilldownView, routeMatch: SceneRouteMatch<{}>): SceneAppPageLike;
     enrichDataRequest(source: SceneObject): Partial<_grafana_data.DataQueryRequest<_grafana_data.DataQuery>> | null;
 }
-interface SceneAppPageRendererProps extends SceneComponentProps<SceneAppPage> {
-    routeProps: RouteComponentProps;
-}
-declare function SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps): React__default.JSX.Element;
+declare function SceneAppPageRenderer({ model }: SceneComponentProps<SceneAppPage>): React__default.JSX.Element;
 
 interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
     /**
@@ -2403,7 +2399,7 @@ interface SceneReactObjectState<TProps = {}> extends SceneObjectState {
  * A utility object that can be used to render any React component or ReactNode
  */
 declare class SceneReactObject<TProps = {}> extends SceneObjectBase<SceneReactObjectState<TProps>> {
-    static Component: ({ model }: SceneComponentProps<SceneReactObject>) => string | number | true | Iterable<React__default.ReactNode> | React__default.JSX.Element | null;
+    static Component: ({ model }: SceneComponentProps<SceneReactObject>) => string | number | true | React__default.JSX.Element | Iterable<React__default.ReactNode> | null;
 }
 
 type StandardFieldConfigInterface<T, C, Prefix extends string> = {
@@ -2747,7 +2743,7 @@ interface ControlsLabelProps {
     description?: string;
     isLoading?: boolean;
     error?: string;
-    icon?: IconName$1;
+    icon?: IconName;
     layout?: ControlsLayout;
     onCancel?: () => void;
     onRemove?: () => void;

package/dist/index.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
 var reactRouterDom = require('react-router-dom');
 var data = require('@grafana/data');
 var runtime = require('@grafana/runtime');
+var React = require('react');
 var rxjs = require('rxjs');
 var uuid = require('uuid');
 var lodash = require('lodash');
@@ -72,8 +72,24 @@ function getUrlWithAppState(path, searchObject, preserveParams) {
   }
   return data.urlUtil.renderUrl(data.locationUtil.assureBaseUrl(path), paramsCopy);
 }
-function renderSceneComponentWithRouteProps(sceneObject, routeProps) {
-  return React__default["default"].createElement(sceneObject.Component, { model: sceneObject, routeProps });
+function useSceneRouteMatch(path) {
+  const params = reactRouterDom.useParams();
+  const location = reactRouterDom.useLocation();
+  const isExact = reactRouterDom.matchPath(
+    {
+      path,
+      caseSensitive: false,
+      end: true
+    },
+    location.pathname
+  );
+  const match = {
+    params,
+    isExact: isExact !== null,
+    path: location.pathname,
+    url: location.pathname
+  };
+  return match;
 }
 
 var __defProp$Q = Object.defineProperty;
@@ -12744,11 +12760,12 @@ SceneApp.Component = ({ model }) => {
   const { pages } = model.useState();
   return /* @__PURE__ */ React__default["default"].createElement(SceneAppContext.Provider, {
     value: model
-  }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+  }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, pages.map((page) => /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
     key: page.state.url,
-    exact: false,
-    path: page.state.url,
-    render: (props) => renderSceneComponentWithRouteProps(page, props)
+    path: page.state.routePath,
+    element: /* @__PURE__ */ React__default["default"].createElement(page.Component, {
+      model: page
+    })
   }))));
 };
 const SceneAppContext = React.createContext(null);
@@ -13001,11 +13018,12 @@ function getStyles(theme) {
   };
 }
 
-function SceneAppPageView({ page, routeProps }) {
+function SceneAppPageView({ page }) {
+  const routeMatch = useSceneRouteMatch(page.state.url);
   const containerPage = getParentPageIfTab(page);
   const containerState = containerPage.useState();
   const params = useAppQueryParams();
-  const scene = page.getScene(routeProps.match);
+  const scene = page.getScene(routeMatch);
   const appContext = React.useContext(SceneAppContext);
   const isInitialized = containerState.initializedScene === scene;
   const { layout } = page.state;
@@ -13090,8 +13108,12 @@ function getParentBreadcrumbs(parent, params, searchObject) {
   }
   return void 0;
 }
-function SceneAppDrilldownViewRender({ drilldown, parent, routeProps }) {
-  return renderSceneComponentWithRouteProps(parent.getDrilldownPage(drilldown, routeProps.match), routeProps);
+function SceneAppDrilldownViewRender({ drilldown, parent }) {
+  const routeMatch = useSceneRouteMatch(drilldown.routePath);
+  const page = parent.getDrilldownPage(drilldown, routeMatch);
+  return /* @__PURE__ */ React__default["default"].createElement(page.Component, {
+    model: page
+  });
 }
 
 class SceneAppPage extends SceneObjectBase {
@@ -13139,42 +13161,40 @@ class SceneAppPage extends SceneObjectBase {
   }
 }
 SceneAppPage.Component = SceneAppPageRenderer;
-function SceneAppPageRenderer({ model, routeProps }) {
-  var _a, _b;
+function SceneAppPageRenderer({ model }) {
   const { tabs, drilldowns } = model.useState();
   const routes = [];
+  routes.push(getFallbackRoute(model));
   if (tabs && tabs.length > 0) {
     for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
       const tab = tabs[tabIndex];
       if (tabIndex === 0) {
-        routes.push(
-          /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-            exact: true,
-            key: model.state.url,
-            path: (_a = model.state.routePath) != null ? _a : model.state.url,
-            render: (props) => renderSceneComponentWithRouteProps(tab, props)
+        routes.push(/* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+          key: model.state.routePath,
+          path: "",
+          element: /* @__PURE__ */ React__default["default"].createElement(tab.Component, {
+            model: tab
           })
-        );
+        }));
       }
       routes.push(
         /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          exact: true,
           key: tab.state.url,
-          path: (_b = tab.state.routePath) != null ? _b : tab.state.url,
-          render: (props) => renderSceneComponentWithRouteProps(tab, props)
+          path: tab.state.routePath,
+          element: /* @__PURE__ */ React__default["default"].createElement(tab.Component, {
+            model: tab
+          })
         })
       );
       if (tab.state.drilldowns) {
         for (const drilldown of tab.state.drilldowns) {
           routes.push(
             /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-              exact: false,
               key: drilldown.routePath,
               path: drilldown.routePath,
-              render: (props) => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
+              element: /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
                 drilldown,
-                parent: tab,
-                routeProps: props
+                parent: tab
               })
             })
           );
@@ -13187,51 +13207,39 @@ function SceneAppPageRenderer({ model, routeProps }) {
       routes.push(
         /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           key: drilldown.routePath,
-          exact: false,
           path: drilldown.routePath,
-          render: (props) => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
+          Component: () => /* @__PURE__ */ React__default["default"].createElement(SceneAppDrilldownViewRender, {
             drilldown,
-            parent: model,
-            routeProps: props
+            parent: model
           })
         })
       );
     }
   }
-  if (!tabs && isCurrentPageRouteMatch(model, routeProps.match)) {
-    return /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
-      page: model,
-      routeProps
-    });
+  if (!tabs) {
+    routes.push(/* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+      key: "home route",
+      path: "/",
+      element: /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
+        page: model
+      })
+    }));
   }
-  routes.push(getFallbackRoute(model, routeProps));
-  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Switch, null, routes);
+  return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, routes);
 }
-function getFallbackRoute(page, routeProps) {
+function getFallbackRoute(page) {
   return /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
     key: "fallback route",
-    render: (props) => {
+    path: "*",
+    Component: () => {
       var _a, _b, _c;
       const fallbackPage = (_c = (_b = (_a = page.state).getFallbackPage) == null ? void 0 : _b.call(_a)) != null ? _c : getDefaultFallbackPage();
       return /* @__PURE__ */ React__default["default"].createElement(SceneAppPageView, {
-        page: fallbackPage,
-        routeProps
+        page: fallbackPage
       });
     }
   });
 }
-function isCurrentPageRouteMatch(page, match) {
-  if (!match.isExact) {
-    return false;
-  }
-  if (match.url === page.state.url) {
-    return true;
-  }
-  if (page.parent instanceof SceneAppPage && page.parent.state.tabs[0] === page && page.parent.state.url === match.url) {
-    return true;
-  }
-  return false;
-}
 function getDefaultFallbackPage() {
   return new SceneAppPage({
     url: "",