@grafana/scenes 5.33.1--canary.996.12371059735.0 → 6.0.0--canary.979.12373078054.0

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$P = Object.defineProperty;
@@ -2481,7 +2497,7 @@ function patchGetAdhocFilters(filterVar) {
 function findActiveAdHocFilterVariableByUid(dsUid) {
   var _a;
   for (const filter of allActiveFilterSets.values()) {
-    if (interpolate(filter, (_a = filter.state.datasource) == null ? void 0 : _a.uid) === dsUid) {
+    if (((_a = filter.state.datasource) == null ? void 0 : _a.uid) === dsUid) {
       return filter;
     }
   }
@@ -2527,7 +2543,7 @@ const allActiveGroupByVariables = /* @__PURE__ */ new Set();
 function findActiveGroupByVariablesByUid(dsUid) {
   var _a;
   for (const groupByVariable of allActiveGroupByVariables.values()) {
-    if (interpolate(groupByVariable, (_a = groupByVariable.state.datasource) == null ? void 0 : _a.uid) === dsUid) {
+    if (((_a = groupByVariable.state.datasource) == null ? void 0 : _a.uid) === dsUid) {
       return groupByVariable;
     }
   }
@@ -5570,7 +5586,7 @@ class SceneQueryRunner extends SceneObjectBase {
     try {
       const datasource = (_c = this.state.datasource) != null ? _c : findFirstDatasource(queries);
       const ds = await getDataSource(datasource, this._scopedVars);
-      this.findAndSubscribeToAdHocFilters(ds.uid);
+      this.findAndSubscribeToAdHocFilters(datasource == null ? void 0 : datasource.uid);
       const runRequest = runtime.getRunRequest();
       const { primary, secondaries, processors } = this.prepareRequests(timeRange, ds);
       writeSceneLog("SceneQueryRunner", "Starting runRequest", this.state.key);
@@ -5699,13 +5715,13 @@ class SceneQueryRunner extends SceneObjectBase {
     });
     return Array.from(found.values());
   }
-  findAndSubscribeToAdHocFilters(interpolatedUid) {
-    const filtersVar = findActiveAdHocFilterVariableByUid(interpolatedUid);
+  findAndSubscribeToAdHocFilters(uid) {
+    const filtersVar = findActiveAdHocFilterVariableByUid(uid);
     if (this._adhocFiltersVar !== filtersVar) {
       this._adhocFiltersVar = filtersVar;
       this._updateExplicitVariableDependencies();
     }
-    const groupByVar = findActiveGroupByVariablesByUid(interpolatedUid);
+    const groupByVar = findActiveGroupByVariablesByUid(uid);
     if (this._groupByVar !== groupByVar) {
       this._groupByVar = groupByVar;
       this._updateExplicitVariableDependencies();
@@ -5799,16 +5815,13 @@ function escapeLokiRegexp(value) {
   return value.replace(RE2_METACHARACTERS, "\\$&");
 }
 function getQueriesForVariables(sourceObject) {
-  var _a;
   const runners = sceneGraph.findAllObjects(
     sourceObject.getRoot(),
     (o) => o instanceof SceneQueryRunner
   );
-  const interpolatedDsUuid = sceneGraph.interpolate(sourceObject, (_a = sourceObject.state.datasource) == null ? void 0 : _a.uid);
   const applicableRunners = filterOutInactiveRunnerDuplicates(runners).filter((r) => {
-    var _a2;
-    const interpolatedQueryDsUuid = sceneGraph.interpolate(sourceObject, (_a2 = r.state.datasource) == null ? void 0 : _a2.uid);
-    return interpolatedQueryDsUuid === interpolatedDsUuid;
+    var _a, _b;
+    return ((_a = r.state.datasource) == null ? void 0 : _a.uid) === ((_b = sourceObject.state.datasource) == null ? void 0 : _b.uid);
   });
   if (applicableRunners.length === 0) {
     return [];
@@ -12441,11 +12454,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);
@@ -12698,11 +12712,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;
@@ -12787,8 +12802,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 {
@@ -12836,42 +12855,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
               })
             })
           );
@@ -12884,51 +12901,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: "",